Skip to content

Commit

Permalink
feat(xo-core): update TabItem and TabList components to v2
Browse files Browse the repository at this point in the history
  • Loading branch information
OlivierFL committed Oct 11, 2024
1 parent a596702 commit b30d16d
Show file tree
Hide file tree
Showing 16 changed files with 187 additions and 199 deletions.
8 changes: 4 additions & 4 deletions @xen-orchestra/lite/src/components/RouterTab.vue
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<template>
<RouterLink v-slot="{ isActive, href }" :to custom>
<TabItem
:active="isActive"
<VtsTabItem
:selected="isActive"
:disabled="isDisabled"
:href="isDisabled ? undefined : href"
:tag="isDisabled ? undefined : 'a'"
>
<slot />
</TabItem>
</VtsTabItem>
</RouterLink>
</template>

<script lang="ts" setup>
import TabItem from '@core/components/tab/TabItem.vue'
import VtsTabItem from '@core/components/tab/VtsTabItem.vue'
import { useContext } from '@core/composables/context.composable'
import { DisabledContext } from '@core/context'
import type { RouteLocationRaw } from 'vue-router'
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<TabList>
<TabItem v-bind="tab(TAB.PROPS, propParams)">Props</TabItem>
<TabItem class="event-tab" v-bind="tab(TAB.EVENTS, eventParams)">
<VtsTabList>
<VtsTabItem v-bind="tab(TAB.PROPS, propParams)">Props</VtsTabItem>
<VtsTabItem class="event-tab" v-bind="tab(TAB.EVENTS, eventParams)">
Events
<VtsCounter
v-if="unreadEventsCount > 0"
Expand All @@ -10,21 +10,21 @@
variant="primary"
size="small"
/>
</TabItem>
<TabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</TabItem>
<TabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</TabItem>
</VtsTabItem>
<VtsTabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</VtsTabItem>
<VtsTabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</VtsTabItem>
<MenuList placement="bottom" border>
<template #trigger="{ open, isOpen }">
<TabItem :active="isOpen" :disabled="presets === undefined" class="preset-tab" @click="open">
<VtsTabItem :selected="isOpen" :disabled="presets === undefined" class="preset-tab" @click="open">
<UiIcon :icon="faSliders" />
Presets
</TabItem>
</VtsTabItem>
</template>
<MenuItem v-for="(preset, label) in presets" :key="label" @click="applyPreset(preset)">
{{ label }}
</MenuItem>
</MenuList>
</TabList>
</VtsTabList>

<div :class="{ 'full-width': fullWidthComponent }" class="tabs">
<UiCard v-if="selectedTab === TAB.NONE" class="tab-content">
Expand Down Expand Up @@ -89,8 +89,8 @@ import UiButton from '@core/components/button/UiButton.vue'
import VtsCounter from '@core/components/counter/VtsCounter.vue'
import MenuItem from '@core/components/menu/MenuItem.vue'
import MenuList from '@core/components/menu/MenuList.vue'
import TabItem from '@core/components/tab/TabItem.vue'
import TabList from '@core/components/tab/TabList.vue'
import VtsTabItem from '@core/components/tab/VtsTabItem.vue'
import VtsTabList from '@core/components/tab/VtsTabList.vue'
import { faSliders } from '@fortawesome/free-solid-svg-icons'
import 'highlight.js/styles/github-dark.css'
import { uniqueId, upperFirst } from 'lodash-es'
Expand Down
6 changes: 3 additions & 3 deletions @xen-orchestra/lite/src/components/pool/PoolTabBar.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<TabList :disabled="!isReady">
<VtsTabList :disabled="!isReady">
<RouterTab :to="{ name: 'pool.dashboard', params: { uuid: pool?.uuid } }">
{{ $t('dashboard') }}
</RouterTab>
Expand Down Expand Up @@ -27,13 +27,13 @@
<RouterTab :to="{ name: 'pool.vms', params: { uuid: pool?.uuid } }">
{{ $t('vms') }}
</RouterTab>
</TabList>
</VtsTabList>
</template>

<script lang="ts" setup>
import RouterTab from '@/components/RouterTab.vue'
import { usePoolStore } from '@/stores/xen-api/pool.store'
import TabList from '@core/components/tab/TabList.vue'
import VtsTabList from '@core/components/tab/VtsTabList.vue'
const { pool, isReady } = usePoolStore().subscribe()
</script>
6 changes: 3 additions & 3 deletions @xen-orchestra/lite/src/components/vm/VmTabBar.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<TabList>
<VtsTabList>
<RouterTab :to="{ name: 'vm.dashboard', params: { uuid } }" disabled>
{{ $t('dashboard') }}
</RouterTab>
Expand All @@ -24,12 +24,12 @@
<RouterTab :to="{ name: 'vm.tasks', params: { uuid } }" disabled>
{{ $t('tasks') }}
</RouterTab>
</TabList>
</VtsTabList>
</template>

<script lang="ts" setup>
import RouterTab from '@/components/RouterTab.vue'
import TabList from '@core/components/tab/TabList.vue'
import VtsTabList from '@core/components/tab/VtsTabList.vue'
defineProps<{
uuid: string
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
setting('label').widget(text()).preset('Foobar'),
]"
>
<TabList>
<VtsTabList>
<RouterTab v-bind="properties">{{ settings.label }}</RouterTab>
</TabList>
</VtsTabList>
</ComponentStory>
</template>

Expand All @@ -19,5 +19,5 @@ import ComponentStory from '@/components/component-story/ComponentStory.vue'
import RouterTab from '@/components/RouterTab.vue'
import { prop, setting, slot } from '@/libs/story/story-param'
import { text } from '@/libs/story/story-widget'
import TabList from '@core/components/tab/TabList.vue'
import VtsTabList from '@core/components/tab/VtsTabList.vue'
</script>
14 changes: 7 additions & 7 deletions @xen-orchestra/lite/src/stories/web-core/tab/tab-item.story.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@
v-slot="{ properties, settings }"
:params="[
prop('disabled').bool().widget().ctx(),
prop('active').bool().widget(),
prop('selected').bool().widget(),
prop('tag').str().default('span'),
slot(),
setting('label').widget(text()).preset('Foobar'),
setting('counter').widget(text()),
]"
>
<TabList>
<TabItem v-bind="properties">
<VtsTabList>
<VtsTabItem v-bind="properties">
{{ settings.label }}
<VtsCounter v-if="settings.counter" :value="settings.counter" accent="brand" variant="primary" size="small" />
</TabItem>
</TabList>
</VtsTabItem>
</VtsTabList>
</ComponentStory>
</template>

Expand All @@ -24,6 +24,6 @@ import ComponentStory from '@/components/component-story/ComponentStory.vue'
import { prop, setting, slot } from '@/libs/story/story-param'
import { text } from '@/libs/story/story-widget'
import VtsCounter from '@core/components/counter/VtsCounter.vue'
import TabItem from '@core/components/tab/TabItem.vue'
import TabList from '@core/components/tab/TabList.vue'
import VtsTabItem from '@core/components/tab/VtsTabItem.vue'
import VtsTabList from '@core/components/tab/VtsTabList.vue'
</script>
16 changes: 8 additions & 8 deletions @xen-orchestra/lite/src/stories/web-core/tab/tab-list.story.vue
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<template>
<ComponentStory
v-slot="{ properties }"
:params="[prop('disabled').bool().widget(), slot().help('Contains <RouterTab> or <TabItem>')]"
:params="[prop('disabled').bool().widget(), slot().help('Contains <RouterTab> or <VtsTabItem>')]"
>
<TabList v-bind="properties">
<TabItem>Foo</TabItem>
<TabItem>Bar</TabItem>
<TabItem>Baz</TabItem>
</TabList>
<VtsTabList v-bind="properties">
<VtsTabItem>Foo</VtsTabItem>
<VtsTabItem>Bar</VtsTabItem>
<VtsTabItem>Baz</VtsTabItem>
</VtsTabList>
</ComponentStory>
</template>

<script lang="ts" setup>
import ComponentStory from '@/components/component-story/ComponentStory.vue'
import { prop, slot } from '@/libs/story/story-param'
import TabItem from '@core/components/tab/TabItem.vue'
import TabList from '@core/components/tab/TabList.vue'
import VtsTabItem from '@core/components/tab/VtsTabItem.vue'
import VtsTabList from '@core/components/tab/VtsTabList.vue'
</script>
100 changes: 0 additions & 100 deletions @xen-orchestra/web-core/lib/components/tab/TabItem.vue

This file was deleted.

84 changes: 84 additions & 0 deletions @xen-orchestra/web-core/lib/components/tab/VtsTabItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!-- v2 -->
<template>
<component :is="tag" :class="classNames" class="vts-tab-item">
<slot />
</component>
</template>

<script lang="ts" setup>
import { useContext } from '@core/composables/context.composable'
import { DisabledContext } from '@core/context'
import { useUiStore } from '@core/stores/ui.store'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'

const props = withDefaults(
defineProps<{
disabled?: boolean
selected?: boolean
tag?: string
}>(),
{ tag: 'span', disabled: undefined }
)

defineSlots<{
default(): any
}>()

const { isMobile } = storeToRefs(useUiStore())

const isDisabled = useContext(DisabledContext, () => props.disabled)

const classNames = computed(() => {
return [
isMobile.value ? 'typo c3-semi-bold' : 'typo c1-semi-bold',
{
disabled: isDisabled.value,
selected: props.selected,
mobile: isMobile.value,
},
]
})
</script>

<style lang="postcss" scoped>
.vts-tab-item {
display: flex;
align-items: center;
gap: 1.6rem;
padding: 1.6rem;
text-decoration: none;
color: var(--color-neutral-txt-primary);
border-bottom: 0.2rem solid transparent;
cursor: pointer;

&.mobile {
gap: 0.8rem;
padding: 0.8rem;
}

/* INTERACTION VARIANTS */

&:hover {
border-color: var(--color-normal-item-hover);
background-color: var(--color-normal-background-hover);
}

&:active {
border-color: var(--color-normal-item-active);
background-color: var(--color-normal-background-active);
}

&.selected {
border-color: var(--color-normal-item-base);
background-color: var(--color-normal-background-selected);
}

&.disabled {
color: var(--color-neutral-txt-secondary);
border-color: transparent;
background-color: transparent;
pointer-events: none;
}
}
</style>
Loading

0 comments on commit b30d16d

Please sign in to comment.