@indielayer/ui 1.18.1 → 2.1.0

package/src/components/tab/TabGroup.vue

@@ -1,33 +1,46 @@
 <script lang="ts">
+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: Boolean,
-  grow: Boolean,
-  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;
@@ -48,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>
 
@@ -58,10 +79,12 @@ import { injectTabGroupKey } from '../../composables/keys'
 import { useCommon, type Size } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 
 import XScroll from '../../components/scroll/Scroll.vue'
 
 const props = defineProps(tabGroupProps)
+const resolvedProps = useResolvedComponentProps('TabGroup', props)
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -80,45 +103,107 @@ watchEffect(() => {
 const state = reactive({
   active: computed(() => active.value),
   variant: computed(() => props.variant),
-  ghost: computed(() => props.ghost),
-  grow: computed(() => props.grow),
+  ghost: computed(() => resolvedProps.value.ghost ?? false),
+  grow: computed(() => resolvedProps.value.grow ?? false),
   exact: computed(() => props.exact),
   size: computed(() => props.size),
   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')) {
@@ -166,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')
+  })
 })

package/src/components/tab/theme/Tab.base.theme.ts

@@ -1,5 +1,24 @@
 import type { TabTheme } from '../Tab.vue'
 
+const compactSizeClasses = (size: string | undefined, iconOnly: boolean) => {
+  if (iconOnly) {
+    // Explicit h/w so width cannot collapse under flex/`w-full` conflicts.
+    if (size === 'xs') return 'h-6 w-6'
+    if (size === 'sm') return 'h-7 w-7'
+    if (size === 'lg') return 'h-10 w-10'
+    if (size === 'xl') return 'h-11 w-11'
+
+    return 'h-7 w-7'
+  }
+
+  if (size === 'xs') return 'text-xs min-h-6'
+  if (size === 'sm') return 'text-sm min-h-7'
+  if (size === 'lg') return 'text-lg min-h-10'
+  if (size === 'xl') return 'text-xl min-h-11'
+
+  return 'text-sm min-h-7'
+}
+
 const theme: TabTheme = {
   classes: {
     wrapper: ({ props, data }) => {
@@ -8,7 +27,10 @@ const theme: TabTheme = {
       if (data.variant === 'line') c.push('py-2')
       if (data.variant === 'block') c.push('py-1 px-8')
 
-      if (props.size === 'xs') c.push('text-xs')
+      if (data.variant === 'compact') {
+        if (data.showLabel) c.push('px-2.5')
+        c.push(compactSizeClasses(props.size, !data.showLabel))
+      } else if (props.size === 'xs') c.push('text-xs')
       else if (props.size === 'sm') c.push('text-sm')
       else if (props.size === 'lg') c.push('text-lg')
       else if (props.size === 'xl') c.push('text-xl')
@@ -20,7 +42,7 @@ const theme: TabTheme = {
 
     label: 'font-medium',
 
-    icon: 'mr-1.5',
+    icon: ({ data }) => (data.showLabel ? 'mr-1.5' : ''),
 
     tabpanel: 'py-2',
   },

package/src/components/tab/theme/Tab.carbon.theme.ts

@@ -1,16 +1,39 @@
 import type { TabTheme } from '../Tab.vue'
 
+const compactSizeClasses = (size: string | undefined, iconOnly: boolean) => {
+  if (iconOnly) {
+    // Explicit h/w so width cannot collapse under flex/`w-full` conflicts.
+    if (size === 'xs') return 'h-6 w-6'
+    if (size === 'sm') return 'h-7 w-7'
+    if (size === 'lg') return 'h-10 w-10'
+    if (size === 'xl') return 'h-11 w-11'
+
+    return 'h-7 w-7'
+  }
+
+  if (size === 'xs') return 'text-xs min-h-6'
+  if (size === 'sm') return 'text-sm min-h-7'
+  if (size === 'lg') return 'text-lg min-h-10'
+  if (size === 'xl') return 'text-xl min-h-11'
+
+  return 'text-sm min-h-7'
+}
+
 const theme: TabTheme = {
   classes: {
     wrapper: ({ props, data }) => {
-      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-left']
+      const c = ['transition-colors duration-150 ease-in-out whitespace-nowrap text-left']
 
-      if (data.variant === 'block') c.push('px-4')
-      else c.push('px-4')
+      if (data.variant === 'compact') {
+        if (data.showLabel) c.push('px-2.5')
+        c.push(compactSizeClasses(props.size, !data.showLabel))
+      } else {
+        c.push('py-2 px-4')
 
-      if (props.size === 'lg') c.push('text-lg')
-      else if (props.size === 'xl') c.push('text-xl')
-      else c.push('text-sm')
+        if (props.size === 'lg') c.push('text-lg')
+        else if (props.size === 'xl') c.push('text-xl')
+        else c.push('text-sm')
+      }
 
       return c
     },
@@ -25,7 +48,7 @@ const theme: TabTheme = {
       return c
     },
 
-    icon: 'mr-1.5',
+    icon: ({ data }) => (data.showLabel ? 'mr-1.5' : ''),
 
     tabpanel: 'py-4',
   },

package/src/components/tab/theme/TabGroup.base.theme.ts

@@ -7,9 +7,10 @@ const theme: TabGroupTheme = {
     scroller: ({ props }) => {
       const c = ['']
 
-      if (!props.fullWidth) c.push('!w-fit')
-      if (props.variant === 'block') c.push('rounded-lg')
-      if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-100 dark:bg-secondary-800 p-1')
+      if (!props.fullWidth || props.variant === 'compact') c.push('!w-fit')
+      if (props.variant === 'block' || props.variant === 'compact') c.push('rounded-lg')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-200/80 dark:bg-secondary-800 p-1')
+      if (props.variant === 'compact' && !props.ghost) c.push('bg-secondary-200/80 dark:bg-secondary-800 p-1')
 
       return c
     },
@@ -19,7 +20,7 @@ const theme: TabGroupTheme = {
 
       if (props.variant === 'line') c.push('border-b border-secondary-200 dark:border-secondary-700')
       if (props.variant === 'line' && !props.grow) c.push('space-x-8')
-      if (props.variant === 'block') c.push('z-[1]')
+      if (props.variant === 'block' || props.variant === 'compact') c.push('z-[1] space-x-1')
       if (props.align === 'center') c.push('justify-center')
       if (props.align === 'right') c.push('justify-end')
 
@@ -31,7 +32,9 @@ const theme: TabGroupTheme = {
 
       if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
 
-      if (props.variant === 'block') c.push('rounded-md h-full top-0 bg-[color:var(--x-tab-group-bg)] dark:bg-[color:var(--x-tab-group-dark-bg)]')
+      if (props.variant === 'block' || props.variant === 'compact') {
+        c.push('rounded-md h-full top-0 bg-[color:var(--x-tab-group-bg)] dark:bg-[color:var(--x-tab-group-dark-bg)]')
+      }
 
       return c
     },
@@ -42,11 +45,11 @@ const theme: TabGroupTheme = {
     const color = colors.getPalette(props.color)
 
     return css.variables({
-      text: color[600],
-      bg: props.ghost ? color[50] : '#fff',
+      text: color[700],
+      bg: props.ghost ? color[100] : '#fff',
       dark: {
-        text: color[400],
-        bg: props.ghost ? color[900] : secondary[700],
+        text: color[300],
+        bg: props.ghost ? secondary[700] : secondary[700],
       },
     })
   },

package/src/components/tab/theme/TabGroup.carbon.theme.ts

@@ -7,9 +7,10 @@ const theme: TabGroupTheme = {
     scroller: ({ props }) => {
       const c = ['']
 
-      if (!props.fullWidth) c.push('!w-fit')
+      if (!props.fullWidth || props.variant === 'compact') c.push('!w-fit')
       if (props.variant === 'block') c.push('')
       if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-200 dark:bg-secondary-800')
+      if (props.variant === 'compact' && !props.ghost) c.push('bg-secondary-200 dark:bg-secondary-800')
 
       return c
     },
@@ -20,6 +21,7 @@ const theme: TabGroupTheme = {
       if (props.variant === 'line') c.push('border-b border-secondary-200 dark:border-secondary-700')
       if (props.variant === 'line' && !props.grow) c.push('')
       if (props.variant === 'block') c.push('z-[1] py-1.5')
+      if (props.variant === 'compact') c.push('z-[1] py-0.5')
       if (props.align === 'center') c.push('justify-center')
       if (props.align === 'right') c.push('justify-end')
 
@@ -31,7 +33,9 @@ const theme: TabGroupTheme = {
 
       if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
 
-      if (props.variant === 'block') c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-secondary-100 dark:bg-secondary-700')
+      if (props.variant === 'block' || props.variant === 'compact') {
+        c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-secondary-100 dark:bg-secondary-700')
+      }
 
       return c
     },