@indielayer/ui 2.0.0 → 2.1.0

package/src/components/tab/Tab.vue

@@ -3,19 +3,50 @@ import { optionalBooleanProp } from '../../common/props'
 
 const tabProps = {
   ...useCommon.props(),
+  size: {
+    type: String as PropType<Size>,
+    validator: (value: string) => useCommon.validators().size.includes(value),
+    description: 'Tab size. Falls back to the parent tab group size when omitted.',
+  },
   value: {
     type: [String, Number],
+    description: 'Value used to select this tab in the group.',
   },
   tag: {
     type: String,
     default: 'button',
+    description: 'Root element tag when not using `to`.',
+  },
+  to: {
+    type: [String, Object],
+    description: 'Vue Router location; renders as a link when set.',
+  },
+  label: {
+    type: String,
+    description: 'Visible label. Defaults to `value` when omitted.',
+  },
+  icon: {
+    type: String,
+    description: 'Icon name shown before the label.',
   },
-  to: [String, Object],
-  label: String,
-  icon: String,
-  disabled: Boolean,
-  exact: Boolean,
-  removable: optionalBooleanProp(),
+  tooltip: {
+    type: String,
+    description: 'Tooltip text. Prefer the tooltip slot for custom content.',
+  },
+  tooltipPosition: {
+    type: String as PropType<TooltipPosition>,
+    default: 'top',
+    description: 'Tooltip placement relative to the tab.',
+  },
+  disabled: {
+    type: Boolean,
+    description: 'Prevents selecting this tab.',
+  },
+  exact: {
+    type: Boolean,
+    description: 'Requires exact route match when using `to`.',
+  },
+  removable: optionalBooleanProp('Shows a remove control that emits `remove`.'),
 }
 
 export type TabProps = ExtractPublicPropTypes<typeof tabProps>
@@ -23,6 +54,7 @@ export type TabProps = ExtractPublicPropTypes<typeof tabProps>
 type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon' | 'tabpanel'
 type InternalExtraData = {
   selected: boolean;
+  showLabel: boolean;
 } & Pick<TabGroupInjection, 'state'>['state']
 export interface TabTheme extends ThemeComponent<TabProps, InternalClasses, InternalExtraData> {}
 
@@ -31,11 +63,21 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Tab panel content shown when this tab is selected.',
+      tab: 'Custom tab trigger content. Slot props: label, value, size, icon.',
+      tooltip: 'Custom tooltip content; overrides the `tooltip` prop.',
+    },
+    emits: {
+      remove: 'Emitted when the remove control is clicked.',
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { inject, reactive, computed, ref, onMounted, type ExtractPublicPropTypes } from 'vue'
+import { inject, reactive, computed, ref, onMounted, onBeforeUnmount, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
 import { injectTabGroupKey } from '../../composables/keys'
 import { useCommon, type Size } from '../../composables/useCommon'
@@ -44,22 +86,40 @@ import { useResolvedComponentProps } from '../../composables/resolveComponentDef
 
 import XIcon from '../icon/Icon.vue'
 import XLink from '../link/Link.vue'
+import XTooltip from '../tooltip/Tooltip.vue'
 
 import { closeIcon } from '../../common/icons'
 
+import type { TooltipPosition } from '../tooltip/Tooltip.vue'
 import type { TabGroupInjection, TabGroupVariant } from './TabGroup.vue'
 
 const props = defineProps(tabProps)
 const resolvedProps = useResolvedComponentProps('Tab', props)
 
 const computedValue = computed(() => (elRef.value as typeof XLink)?.$el?.href || props.value)
+const showLabel = computed(() => {
+  if (props.icon && (props.label === undefined || props.label === '')) return false
+
+  return true
+})
 const computedLabel = computed(() => props.label || props.value)
+const ariaLabel = computed(() => {
+  if (showLabel.value) return undefined
+
+  if (props.tooltip) return props.tooltip
+  if (props.label) return props.label
+  if (computedValue.value !== undefined && computedValue.value !== null) return String(computedValue.value)
+
+  return undefined
+})
 const teleportTo = ref<HTMLElement | null>(null)
 const elRef = ref<HTMLElement | typeof XLink | null>(null)
 
 const tabs = inject(injectTabGroupKey, {
   tabsContentRef: ref(null),
   activateTab: () => {},
+  registerTab: () => {},
+  unregisterTab: () => {},
   state: reactive({
     active: undefined,
     variant: 'line' as TabGroupVariant,
@@ -72,11 +132,13 @@ const tabs = inject(injectTabGroupKey, {
 })
 
 const computedExact = computed(() => tabs.state.exact || props.exact)
-const computedSize = computed(() => props.size || tabs.state.size)
+const computedSize = computed(() => props.size ?? tabs.state.size ?? 'md')
 
 onMounted(() => {
   teleportTo.value = tabs.tabsContentRef.value
 
+  if (typeof computedValue.value !== 'undefined') tabs.registerTab(computedValue.value)
+
   if (props.to && elRef.value) {
     check()
     useMutationObserver((elRef.value as typeof XLink).$el, check, {
@@ -86,6 +148,10 @@ onMounted(() => {
   }
 })
 
+onBeforeUnmount(() => {
+  if (typeof computedValue.value !== 'undefined') tabs.unregisterTab(computedValue.value)
+})
+
 function check() {
   if (elRef.value && (elRef.value as typeof XLink).$el && (props.to)) {
     const active = (elRef.value as typeof XLink).$el.classList.contains(computedExact.value ? 'router-link-exact-active' : 'router-link-active')
@@ -111,74 +177,98 @@ function onClickTab(e: MouseEvent) {
 
 defineEmits(['remove'])
 
-const { styles, classes, className } = useTheme('Tab', {}, ref({
+const isBlockLike = computed(() => tabs.state.variant === 'block' || tabs.state.variant === 'compact')
+
+const themeProps = computed(() => ({
   ...props,
   size: computedSize.value,
   exact: computedExact.value,
-}), {
+}))
+
+const { styles, classes, className } = useTheme('Tab', {}, themeProps, {
   ...tabs.state,
   selected,
+  showLabel,
 })
 </script>
 
 <template>
-  <component
-    :is="to ? XLink : tag"
-    ref="elRef"
-    :type="tag === 'button' ? 'button' : undefined"
+  <x-tooltip
+    :position="tooltipPosition"
     :data-value="computedValue"
-    :to="to"
-    :color="selected ? color : undefined"
-    :style="[
-      styles,
-      to && selected && tabs.state.variant === 'block'
-        ? '--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);'
-        : ''
-    ]"
     :class="[
-      className,
-      classes.wrapper,
       'shrink-0',
-      {
-        'flex-1': tabs.state.grow,
-        'text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]': selected,
-        'cursor-pointer': !disabled,
-        'cursor-not-allowed': disabled,
-        'cursor-not-allowed text-secondary-500': disabled && !selected,
-      },
+      { 'flex-1': tabs.state.grow },
     ]"
-    :aria-disabled="disabled ? 'true' : undefined"
-    :aria-selected="selected ? 'true' : 'false'"
-    @click="onClickTab"
   >
-    <slot
-      name="tab"
-      :label="label"
-      :value="value"
-      :size="computedSize"
-      :icon="icon"
+    <template v-if="$slots.tooltip || tooltip" #tooltip>
+      <slot name="tooltip">
+        {{ tooltip }}
+      </slot>
+    </template>
+    <component
+      :is="to ? XLink : tag"
+      ref="elRef"
+      :type="tag === 'button' ? 'button' : undefined"
+      :to="to"
+      :color="selected ? color : undefined"
+      :style="[
+        styles,
+        to && selected && isBlockLike
+          ? '--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);'
+          : ''
+      ]"
+      :class="[
+        className,
+        classes.wrapper,
+        'flex items-center justify-center',
+        {
+          'w-full': tabs.state.grow,
+          'text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]': selected,
+          'cursor-pointer': !disabled,
+          'cursor-not-allowed': disabled,
+          'cursor-not-allowed text-secondary-500': disabled && !selected,
+        },
+      ]"
+      :aria-label="ariaLabel"
+      :aria-disabled="disabled ? 'true' : undefined"
+      :aria-selected="selected ? 'true' : 'false'"
+      @click="onClickTab"
     >
-      <div :class="classes.content">
-        <x-icon
-          v-if="icon"
-          :icon="icon"
-          :size="computedSize"
-          :class="classes.icon"
-        />
-        <div :class="classes.label">{{ computedLabel }}</div>
-        <x-icon
-          v-if="resolvedProps.removable"
-          size="sm"
-          :icon="closeIcon"
-          class="ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150"
-          @click="(e: Event) => $emit('remove', e)"
-        />
-      </div>
-    </slot>
-    <teleport v-if="selected && teleportTo" :to="teleportTo">
-      <div v-if="$slots.default" role="tabpanel" :class="classes.tabpanel">
-        <slot></slot>
-      </div>
-    </teleport>
-  </component>
+      <slot
+        name="tab"
+        :label="label"
+        :value="value"
+        :size="computedSize"
+        :icon="icon"
+      >
+        <div :class="classes.content">
+          <x-icon
+            v-if="icon"
+            :icon="icon"
+            :size="computedSize"
+            :class="classes.icon"
+          />
+          <div
+            v-if="showLabel"
+            :class="classes.label"
+          >
+            {{ computedLabel }}
+          </div>
+          <x-icon
+            v-if="resolvedProps.removable"
+            size="sm"
+            :icon="closeIcon"
+            class="ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150"
+            @click="(e: Event) => $emit('remove', e)"
+          />
+        </div>
+      </slot>
+      <teleport v-if="selected && teleportTo" :to="teleportTo">
+        <div v-if="$slots.default" role="tabpanel" :class="classes.tabpanel">
+          <slot></slot>
+        </div>
+      </teleport>
+    </component>
+  </x-tooltip>
 </template>

package/src/components/tab/TabGroup.vue

@@ -3,33 +3,44 @@ import { optionalBooleanProp } from '../../common/props'
 
 const validators = {
   ...useCommon.validators(),
-  variant: ['line', 'block'] as const,
+  variant: ['line', 'block', 'compact'] as const,
   align: ['left', 'center', 'right'] as const,
 }
 const tabGroupProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
-  modelValue: [String, Number],
+  modelValue: {
+    type: [String, Number],
+    description: 'Active tab value (v-model).',
+  },
   variant: {
-    type: String as PropType<'line' | 'block'>,
+    type: String as PropType<'line' | 'block' | 'compact'>,
     default: 'line',
+    description: 'Visual style of the tab list (line, block, or compact).',
   },
   align: {
     type: String as PropType<'left' | 'center' | 'right'>,
     default: 'left',
+    description: 'Horizontal alignment of tabs in the list.',
+  },
+  ghost: optionalBooleanProp('Subtle styling with less background emphasis.'),
+  grow: optionalBooleanProp('Stretches tabs to fill the list width.'),
+  exact: {
+    type: Boolean,
+    description: 'Default exact route matching for linked tabs.',
   },
-  ghost: optionalBooleanProp(),
-  grow: optionalBooleanProp(),
-  exact: Boolean,
   fullWidth: {
     type: Boolean,
     default: true,
+    description: 'Stretches the tab list to the container width.',
   },
 }
 
 export type TabGroupInjection = {
   tabsContentRef: Ref<HTMLElement | null>;
-  activateTab: (tab: string | number) => void;
+  activateTab: (tab: string | number | null) => void;
+  registerTab: (tab: string | number) => void;
+  unregisterTab: (tab: string | number) => void;
   state: {
     active: string | number | undefined;
     variant: TabGroupVariant;
@@ -50,6 +61,14 @@ export interface TabGroupTheme extends ThemeComponent<TabGroupProps, InternalCla
 export default {
   name: 'XTabGroup',
   validators,
+  docs: {
+    slots: {
+      default: 'Tab triggers (typically x-tab children).',
+    },
+    emits: {
+      'update:modelValue': 'Emitted when the active tab changes (v-model).',
+    },
+  },
 }
 </script>
 
@@ -91,38 +110,100 @@ const state = reactive({
   color: computed(() => props.color),
 })
 
+const showTracker = ref(true)
+const registeredTabs: (string | number)[] = []
+
 function activateTab(tab: string | number | null) {
   active.value = tab
   emit('update:modelValue', tab)
 }
 
+function registerTab(tab: string | number) {
+  if (!registeredTabs.includes(tab)) registeredTabs.push(tab)
+}
+
+function unregisterTab(tab: string | number) {
+  const index = registeredTabs.indexOf(tab)
+
+  if (index === -1) return
+
+  registeredTabs.splice(index, 1)
+
+  if (active.value !== tab) return
+
+  const fallback = registeredTabs[Math.min(index, registeredTabs.length - 1)]
+
+  if (typeof fallback !== 'undefined') {
+    activateTab(fallback)
+  } else {
+    activateTab(null)
+    showTracker.value = false
+  }
+}
+
 provide(injectTabGroupKey, {
   tabsContentRef,
   activateTab,
+  registerTab,
+  unregisterTab,
   state,
 })
 
 const updateTracker = useThrottleFn(async (value: string | number | undefined) => {
-  if (typeof value === 'undefined') return
+  if (typeof value === 'undefined' || value === null) {
+    showTracker.value = false
+
+    return
+  }
 
   await nextTick()
 
   const tabEl = tabsRef.value?.querySelector(`[data-value="${value}"]`) as HTMLElement
 
-  if (!tabEl || !trackerRef.value) return
+  if (!tabEl || !trackerRef.value) {
+    showTracker.value = false
 
+    return
+  }
+
+  showTracker.value = true
   trackerRef.value.style.left = `${tabEl.offsetLeft}px`
   trackerRef.value.style.width = `${tabEl.offsetWidth}px`
 
-  if (!tabsRef.value || !scrollRef.value) return
+  if (!tabsRef.value || !scrollRef.value?.scrollEl) return
 
-  // scrollIntoView only updates one at a time
-  const center = tabEl.offsetLeft - (tabsRef.value.getBoundingClientRect().width - tabEl.getBoundingClientRect().width) / 2
+  const scrollEl = scrollRef.value.scrollEl
+  // Measure overflow from the in-flow tabs list only (tracker is absolute and clipped).
+  const maxScroll = Math.max(0, tabsRef.value.scrollWidth - scrollEl.clientWidth)
+  const viewLeft = scrollEl.scrollLeft
+  const viewRight = viewLeft + scrollEl.clientWidth
+  const tabLeft = tabEl.offsetLeft
+  const tabRight = tabLeft + tabEl.offsetWidth
+  const tabFullyVisible = tabLeft >= viewLeft && tabRight <= viewRight
 
-  if (scrollRef.value.scrollEl) scrollRef.value.scrollEl.scrollTo({ left: center, behavior: 'smooth' })
-}, 100, true)
+  if (maxScroll <= 0) {
+    if (scrollEl.scrollLeft !== 0) scrollEl.scrollTo({ left: 0 })
+    scrollEl.dispatchEvent(new CustomEvent('scroll'))
 
-const showTracker = ref(true)
+    return
+  }
+
+  if (tabFullyVisible) {
+    scrollEl.dispatchEvent(new CustomEvent('scroll'))
+
+    return
+  }
+
+  let nextLeft = viewLeft
+
+  if (tabLeft < viewLeft) nextLeft = tabLeft
+  else if (tabRight > viewRight) nextLeft = tabRight - scrollEl.clientWidth
+
+  nextLeft = Math.max(0, Math.min(nextLeft, maxScroll))
+
+  if (nextLeft !== viewLeft) scrollEl.scrollTo({ left: nextLeft, behavior: 'smooth' })
+  else scrollEl.dispatchEvent(new CustomEvent('scroll'))
+}, 100, true)
 
 function check() {
   if (!tabsRef.value?.querySelector('.router-link-active')) {
@@ -170,18 +251,21 @@ const { styles, classes, className } = useTheme('TabGroup', {}, props)
         mousewheel
         :class="classes.scroller"
       >
-        <div
-          ref="tabsRef"
-          class="relative"
-          :class="classes.list"
-        >
-          <slot></slot>
+        <div class="relative overflow-x-clip">
+          <div
+            ref="tabsRef"
+            class="relative"
+            :class="classes.list"
+          >
+            <slot></slot>
+          </div>
+          <div
+            v-show="showTracker"
+            ref="trackerRef"
+            class="pointer-events-none"
+            :class="classes.tracker"
+          ></div>
         </div>
-        <div
-          v-show="showTracker"
-          ref="trackerRef"
-          :class="classes.tracker"
-        ></div>
       </x-scroll>
     </div>
     <div ref="tabsContentRef"></div>

package/src/components/tab/__tests__/Tab.spec.ts

@@ -8,4 +8,57 @@ describe('Tab', () => {
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('falls back label to value when icon is absent', () => {
+    const wrapper = mount(Tab, {
+      props: { value: 'grid' },
+    })
+
+    expect(wrapper.text()).toContain('grid')
+  })
+
+  it('omits label when icon is set without label', () => {
+    const wrapper = mount(Tab, {
+      props: { value: 'grid', icon: 'grid' },
+      global: {
+        stubs: { XIcon: true },
+      },
+    })
+
+    expect(wrapper.text()).not.toContain('grid')
+  })
+
+  it('renders label when icon and label are both set', () => {
+    const wrapper = mount(Tab, {
+      props: { value: 'grid', icon: 'grid', label: 'Grid' },
+      global: {
+        stubs: { XIcon: true },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Grid')
+  })
+
+  it('passes tooltip to the tooltip wrapper', () => {
+    const wrapper = mount(Tab, {
+      props: { value: 'grid', icon: 'grid', tooltip: 'Grid view' },
+      global: {
+        stubs: {
+          XIcon: true,
+          XTooltip: {
+            props: ['position'],
+            template: `
+              <div class="tooltip-stub">
+                <slot />
+                <div class="tooltip-content"><slot name="tooltip" /></div>
+              </div>
+            `,
+          },
+        },
+      },
+    })
+
+    expect(wrapper.find('.tooltip-content').text()).toBe('Grid view')
+    expect(wrapper.find('[aria-label="Grid view"]').exists()).toBe(true)
+  })
 })

package/src/components/tab/__tests__/TabGroup.spec.ts

@@ -1,6 +1,8 @@
 import { describe, it, expect } from 'vitest'
+import { defineComponent, h, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import TabGroup from '../TabGroup.vue'
+import Tab from '../Tab.vue'
 
 describe('TabGroup', () => {
   it('renders without errors', () => {
@@ -8,4 +10,115 @@ describe('TabGroup', () => {
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('supports compact variant with text labels', async () => {
+    const wrapper = mount(TabGroup, {
+      props: {
+        variant: 'compact',
+        modelValue: 'unique',
+      },
+      slots: {
+        default: () => [
+          h(Tab, { value: 'unique', label: 'Unique' }),
+          h(Tab, { value: 'total', label: 'Total' }),
+        ],
+      },
+      global: {
+        stubs: {
+          XScroll: {
+            template: '<div><slot /></div>',
+          },
+        },
+      },
+    })
+
+    await nextTick()
+
+    expect(wrapper.text()).toContain('Unique')
+    expect(wrapper.text()).toContain('Total')
+    expect(wrapper.find('[data-value="unique"] [aria-selected="true"]').exists()).toBe(true)
+  })
+
+  it('hides label for icon-only compact tabs', async () => {
+    const Host = defineComponent({
+      components: { TabGroup, Tab },
+      data: () => ({ view: 'grid' }),
+      template: `
+        <TabGroup v-model="view" variant="compact">
+          <Tab value="grid" icon="grid" tooltip="Grid view" />
+          <Tab value="list" icon="list" tooltip="List view" />
+        </TabGroup>
+      `,
+    })
+
+    const wrapper = mount(Host, {
+      global: {
+        stubs: {
+          XScroll: {
+            template: '<div><slot /></div>',
+          },
+          XIcon: true,
+        },
+      },
+    })
+
+    await nextTick()
+
+    expect(wrapper.find('[data-value="grid"] [aria-label="Grid view"]').exists()).toBe(true)
+    expect(wrapper.find('[data-value="list"] [aria-label="List view"]').exists()).toBe(true)
+    expect(wrapper.text()).not.toContain('grid')
+    expect(wrapper.text()).not.toContain('list')
+  })
+
+  it('passes size down to Tab icons', async () => {
+    const wrapper = mount(TabGroup, {
+      props: {
+        modelValue: 'a',
+        size: 'lg',
+      },
+      slots: {
+        default: () => h(Tab, { value: 'a', label: 'Tab A', icon: 'smile' }),
+      },
+      global: {
+        stubs: {
+          XScroll: { template: '<div><slot /></div>' },
+          XTooltip: { template: '<div><slot /></div>' },
+          XIcon: {
+            props: ['icon', 'size'],
+            template: '<i class="icon-stub" :data-size="size" />',
+          },
+        },
+      },
+    })
+
+    await nextTick()
+
+    expect(wrapper.find('.icon-stub').attributes('data-size')).toBe('lg')
+  })
+
+  it('lets Tab size override TabGroup size', async () => {
+    const wrapper = mount(TabGroup, {
+      props: {
+        modelValue: 'a',
+        size: 'lg',
+      },
+      slots: {
+        default: () => h(Tab, { value: 'a', label: 'Tab A', icon: 'smile', size: 'sm' }),
+      },
+      global: {
+        stubs: {
+          XScroll: { template: '<div><slot /></div>' },
+          XTooltip: { template: '<div><slot /></div>' },
+          XIcon: {
+            props: ['icon', 'size'],
+            template: '<i class="icon-stub" :data-size="size" />',
+          },
+        },
+      },
+    })
+
+    await nextTick()
+
+    expect(wrapper.find('.icon-stub').attributes('data-size')).toBe('sm')
+  })
 })