@indielayer/ui 1.18.0 → 2.0.0

package/src/components/stepper/__tests__/Stepper.spec.ts

@@ -1,11 +1,205 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { defineComponent, h, ref } from 'vue'
 import Stepper from '../Stepper.vue'
+import type { StepperProps } from '../Stepper.vue'
+
+const steps = [
+  { value: 'a', title: 'Step A' },
+  { value: 'b', title: 'Step B' },
+  { value: 'c', title: 'Step C' },
+]
+
+function mountStepper(options: {
+  props?: Partial<StepperProps>;
+  slots?: Record<string, () => ReturnType<typeof h>>;
+  global?: Record<string, unknown>;
+} = {}) {
+  return mount(Stepper, {
+    props: {
+      modelValue: 'a',
+      steps,
+      ...options.props,
+    },
+    slots: {
+      a: () => h('div', { class: 'panel-a' }, 'Panel A'),
+      b: () => h('div', { class: 'panel-b' }, 'Panel B'),
+      c: () => h('div', { class: 'panel-c' }, 'Panel C'),
+      ...options.slots,
+    },
+    global: options.global,
+  })
+}
 
 describe('Stepper', () => {
-  it('renders without errors', () => {
-    const wrapper = mount(Stepper)
+  it('renders step titles in vertical nav', () => {
+    const wrapper = mountStepper()
+
+    expect(wrapper.text()).toContain('Step A')
+    expect(wrapper.text()).toContain('Step B')
+    expect(wrapper.text()).toContain('Step C')
+  })
+
+  it('shows only the active panel slot for initial step', () => {
+    const wrapper = mountStepper({ props: { modelValue: 'a' } })
+
+    expect(wrapper.find('.panel-a').exists()).toBe(true)
+    expect(wrapper.find('.panel-b').exists()).toBe(false)
+    expect(wrapper.find('.panel-c').exists()).toBe(false)
+  })
+
+  it('shows the panel matching modelValue', () => {
+    const wrapper = mountStepper({ props: { modelValue: 'b' } })
+
+    expect(wrapper.find('.panel-a').exists()).toBe(false)
+    expect(wrapper.find('.panel-b').exists()).toBe(true)
+  })
+
+  it('exposes isFirst and isLast', async () => {
+    const wrapper = mountStepper()
+    const vm = wrapper.vm as any
+
+    expect(vm.isFirst).toBe(true)
+    expect(vm.isLast).toBe(false)
+
+    await wrapper.setProps({ modelValue: 'c' })
+
+    expect(vm.isFirst).toBe(false)
+    expect(vm.isLast).toBe(true)
+  })
+
+  it('next() advances v-model and marks step complete', async () => {
+    const wrapper = mountStepper()
+    const vm = wrapper.vm as any
+
+    await vm.next()
+    await flushPromises()
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['b'])
+    expect(wrapper.emitted('step-complete')?.[0]).toEqual(['a', 0])
+    expect(wrapper.emitted('change')?.at(-1)).toEqual(['b', 1])
+  })
+
+  it('prev() goes back when allowed', async () => {
+    const wrapper = mountStepper({ props: { modelValue: 'b' } })
+    const vm = wrapper.vm as any
+
+    await vm.prev()
+    await flushPromises()
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['a'])
+  })
+
+  it('validate blocks next()', async () => {
+    const validate = vi.fn(() => false)
+    const wrapper = mountStepper({ props: { validate } })
+    const vm = wrapper.vm as any
+
+    await vm.next()
+    await flushPromises()
+
+    expect(validate).toHaveBeenCalled()
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('beforeNext rejection blocks navigation', async () => {
+    const wrapper = mountStepper({
+      props: {
+        steps: [
+          { value: 'a', title: 'A', beforeNext: () => Promise.reject(new Error('fail')) },
+          { value: 'b', title: 'B' },
+        ],
+      },
+    })
+    const vm = wrapper.vm as any
+
+    await vm.next()
+    await flushPromises()
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('linear mode blocks goTo until previous steps complete', async () => {
+    const wrapper = mountStepper({ props: { linear: true } })
+    const vm = wrapper.vm as any
+
+    await vm.goTo('c')
+    await flushPromises()
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('non-linear allows jumping to visited steps', async () => {
+    const wrapper = mountStepper({ props: { linear: false } })
+    const vm = wrapper.vm as any
+
+    await vm.next()
+    await flushPromises()
+    await vm.goTo('a')
+    await flushPromises()
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['a'])
+  })
+
+  it('loading blocks navigation', async () => {
+    const wrapper = mountStepper({ props: { loading: true } })
+    const vm = wrapper.vm as any
+
+    await vm.next()
+    await flushPromises()
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('interactive false prevents sidebar navigation via goTo', async () => {
+    const wrapper = mountStepper({ props: { interactive: false, modelValue: 'a' } })
+    const vm = wrapper.vm as any
+
+    await vm.goTo('b')
+    await flushPromises()
+
+    expect(wrapper.emitted('change')).toBeUndefined()
+  })
+
+  it('renders summary slot when step is completed', async () => {
+    const wrapper = mount(Stepper, {
+      props: { modelValue: 'b', steps },
+      slots: {
+        a: () => h('div', 'A'),
+        b: () => h('div', 'B'),
+        c: () => h('div', 'C'),
+        'summary-a': () => h('span', { class: 'summary-a' }, 'Done A'),
+      },
+    })
+
+    expect(wrapper.find('.summary-a').exists()).toBe(true)
+  })
+
+  it('single step skips nav chrome', () => {
+    const wrapper = mount(Stepper, {
+      props: {
+        modelValue: 'only',
+        steps: [{ value: 'only', title: 'Only' }],
+      },
+      slots: {
+        only: () => h('div', { class: 'only-panel' }, 'Only panel'),
+      },
+    })
+
+    expect(wrapper.find('.only-panel').exists()).toBe(true)
+    expect(wrapper.find('nav').exists()).toBe(false)
+  })
+
+  it('reset() clears progress and returns to first step', async () => {
+    const wrapper = mountStepper({ props: { modelValue: 'c' } })
+    const vm = wrapper.vm as any
+
+    await vm.next()
+    await vm.next()
+    await vm.reset()
+    await flushPromises()
 
-    expect(wrapper.vm).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['a'])
+    expect(vm.activeIndex).toBe(0)
   })
 })

package/src/components/stepper/index.ts

@@ -1,6 +1,10 @@
 export { default as XStepper } from './Stepper.vue'
 export type {
   StepperProps,
+  StepperStep,
+  StepperStepStatus,
   StepperVariant,
+  StepperOrientation,
+  StepperLabelPlacement,
   StepperTheme,
 } from './Stepper.vue'

package/src/components/stepper/theme/Stepper.base.theme.ts

@@ -2,43 +2,73 @@ import type { StepperTheme } from '../Stepper.vue'
 
 const theme: StepperTheme = {
   classes: {
-    wrapper: '',
+    wrapper: 'w-full',
 
-    scroller: ({ props }) => {
-      const c = ['']
+    layout: ({ props }) => {
+      if (props.orientation === 'vertical') return 'flex h-full min-h-0'
 
-      if (!props.fullWidth) c.push('!w-fit')
+      return 'flex flex-col'
+    },
+
+    sidebar: 'w-full shrink-0 hidden md:block bg-secondary-100 dark:bg-secondary-900 h-full py-4 px-6 overflow-y-auto max-w-[260px]',
+
+    nav: 'relative ml-4 pr-2 list-none m-0 p-0',
+
+    navItem: 'pb-8 pl-6 group relative border-l list-none',
+
+    indicator: ({ props }) => {
+      const c = [
+        'absolute flex items-center justify-center w-8 h-8 rounded-full -start-4 ring-4 ring-secondary-100 dark:ring-secondary-900 font-semibold text-sm shrink-0',
+      ]
+
+      if (props.size === 'sm') c.push('w-6 h-6 text-xs -start-3')
 
       return c
     },
 
-    list: ({ props }) => {
-      const c = ['flex min-w-full w-fit items-start']
+    indicatorHorizontal: ({ props }) => {
+      const c = [
+        'relative z-[1] flex items-center justify-center w-8 h-8 rounded-full font-semibold text-sm shrink-0',
+      ]
+
+      if (props.size === 'sm') c.push('w-6 h-6 text-xs')
 
       return c
     },
 
-    step: ({ props, data }) => {
-      const classes = ['']
+    stepTrack: 'flex w-full items-center min-h-8',
 
-      if (!props.grow) classes.push('w-[8rem]')
+    stepConnector: 'h-0.5 flex-1 min-w-[0.5rem] rounded-full',
 
-      return classes
-    },
+    connector: '',
 
-    label: ({ props, data }) => {
-      const classes = ['']
+    title: 'text-sm min-h-8 flex flex-col justify-center',
 
-      return classes
-    },
+    subtitle: 'text-xs text-secondary-500 dark:text-secondary-400',
 
-    icon: ({ props, data }) => {
-      const classes = ['mr-2 mt-0.5']
+    description: 'text-xs text-secondary-500 dark:text-secondary-400',
 
-      return classes
+    optional: 'text-xs font-normal text-secondary-400 dark:text-secondary-500',
+
+    summary: 'text-xs text-secondary-500 dark:text-secondary-400 mt-1',
+
+    content: ({ props }) => {
+      if (props.orientation === 'vertical') return 'grow py-4 px-6 md:px-10 overflow-y-auto relative min-h-[8rem]'
+
+      return 'mt-6 px-1 relative min-h-[5rem]'
     },
 
-    content: 'mt-2 mb-4',
+    panel: 'w-full',
+
+    scroller: 'w-full',
+
+    list: 'flex min-w-full w-full items-start gap-0',
+
+    step: 'flex flex-1 flex-col min-w-[5.5rem] max-w-[12rem] py-2 px-2 border-0 bg-transparent',
+
+    label: 'flex flex-col gap-0.5 mt-2 min-w-0 w-full',
+
+    icon: 'shrink-0',
   },
 }
 

package/src/components/tab/Tab.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const tabProps = {
   ...useCommon.props(),
   value: {
@@ -13,7 +15,7 @@ const tabProps = {
   icon: String,
   disabled: Boolean,
   exact: Boolean,
-  removable: Boolean,
+  removable: optionalBooleanProp(),
 }
 
 export type TabProps = ExtractPublicPropTypes<typeof tabProps>
@@ -38,6 +40,7 @@ import { useMutationObserver } from '@vueuse/core'
 import { injectTabGroupKey } from '../../composables/keys'
 import { useCommon, type Size } from '../../composables/useCommon'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 
 import XIcon from '../icon/Icon.vue'
 import XLink from '../link/Link.vue'
@@ -47,6 +50,7 @@ import { closeIcon } from '../../common/icons'
 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 computedLabel = computed(() => props.label || props.value)
@@ -163,7 +167,7 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
         />
         <div :class="classes.label">{{ computedLabel }}</div>
         <x-icon
-          v-if="removable"
+          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"

package/src/components/tab/TabGroup.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const validators = {
   ...useCommon.validators(),
   variant: ['line', 'block'] as const,
@@ -16,8 +18,8 @@ const tabGroupProps = {
     type: String as PropType<'left' | 'center' | 'right'>,
     default: 'left',
   },
-  ghost: Boolean,
-  grow: Boolean,
+  ghost: optionalBooleanProp(),
+  grow: optionalBooleanProp(),
   exact: Boolean,
   fullWidth: {
     type: Boolean,
@@ -58,10 +60,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,8 +84,8 @@ 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),

package/src/components/table/Table.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const tableProps = {
   headers: {
     type: Array as PropType<TableHeader[]>,
@@ -12,6 +14,7 @@ const tableProps = {
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  sortMultiple: optionalBooleanProp(),
   loading: Boolean,
   loadingSkeleton: Boolean,
   loadingLines: {
@@ -19,10 +22,10 @@ const tableProps = {
     default: 3,
   },
   error: Boolean,
-  dense: Boolean,
-  fixed: Boolean,
-  striped: Boolean,
-  pointer: Boolean,
+  dense: optionalBooleanProp(),
+  fixed: optionalBooleanProp(),
+  striped: optionalBooleanProp(),
+  pointer: optionalBooleanProp(),
   scrollable: {
     type: Boolean,
     default: true,
@@ -31,8 +34,8 @@ const tableProps = {
     type: Boolean,
     default: true,
   },
-  expandable: Boolean,
-  virtualList: Boolean,
+  expandable: optionalBooleanProp(),
+  virtualList: optionalBooleanProp(),
   virtualListOffsetTop: Number,
   virtualListOffsetBottom: Number,
   virtualListItemHeight: {
@@ -44,8 +47,8 @@ const tableProps = {
     default: 10,
   },
   keyProp: String,
-  selectable: Boolean,
-  singleSelect: Boolean,
+  selectable: optionalBooleanProp(),
+  singleSelect: optionalBooleanProp(),
   autoClearSelected: {
     type: Boolean,
     default: true,
@@ -174,7 +177,26 @@ function getSort(headerValue: string | undefined, sort: string[]): TableHeaderSo
 }
 
 function sortHeader(header: TableHeader) {
-  // update sort array
+  if (!header.value) return
+
+  if (!props.sortMultiple) {
+    const index = props.sort.findIndex((entry) => entry.split(',')[0] === header.value)
+
+    if (index >= 0) {
+      const order = props.sort[index].split(',')[1]
+
+      if (order === '-1') {
+        emit('update:sort', [`${header.value},1`])
+      } else {
+        emit('update:sort', [])
+      }
+    } else {
+      emit('update:sort', [`${header.value},-1`])
+    }
+
+    return
+  }
+
   const sort = props.sort.slice(0)
   let exists = false
 
@@ -185,11 +207,9 @@ function sortHeader(header: TableHeader) {
       exists = true
 
       if (order === '-1') {
-        // update position to 1
         sort.splice(i, 1, `${header.value},1`)
         break
       } else if (order === '1') {
-        // delete position
         sort.splice(i, 1)
         break
       }

package/src/components/table/TableCell.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const validators = {
   textAlign: [null, 'left', 'center', 'right', 'justify'] as const,
   verticalAlign: [null, 'baseline', 'bottom', 'middle', 'text-bottom', 'text-top', 'top'] as const,
@@ -8,8 +10,8 @@ const tableCellProps = {
     type: String as PropType<TableCellTextAlign>,
     validator: (value: string) => validators.textAlign.includes(value as any),
   },
-  truncate: Boolean,
-  dense: Boolean,
+  truncate: optionalBooleanProp(),
+  dense: optionalBooleanProp(),
   width: [String, Number],
   verticalAlign: {
     type: String as PropType<TableCellVerticalAlign>,

package/src/components/table/TableHead.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const tableHeadProps = {
-  stickyHeader: Boolean,
+  stickyHeader: optionalBooleanProp(),
 }
 
 export type TableHeadProps = ExtractPublicPropTypes<typeof tableHeadProps>

package/src/components/table/TableHeader.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const validators = {
   sort: [1, -1, undefined] as const,
   textAlign: ['left', 'center', 'right'] as const,
@@ -9,7 +11,7 @@ const tableHeaderProps = {
     type: Number as PropType<TableHeaderSort>,
     validator: (value: number) => validators.sort.includes(value as any),
   },
-  sortable: Boolean,
+  sortable: optionalBooleanProp(),
   textAlign: {
     type: String as PropType<TableHeaderAlign>,
     default: 'left',

package/src/components/table/TableRow.vue

@@ -1,13 +1,15 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const validators = {
   verticalAlign: ['baseline', 'bottom', 'middle', 'text-bottom', 'text-top', 'top'],
 }
 
 const tableRowProps = {
-  pointer: Boolean,
-  striped: Boolean,
+  pointer: optionalBooleanProp(),
+  striped: optionalBooleanProp(),
   selected: Boolean,
-  singleSelect: Boolean,
+  singleSelect: optionalBooleanProp(),
   verticalAlign: {
     type: String as PropType<'baseline' | 'bottom' | 'middle' | 'text-bottom' | 'text-top' | 'top'>,
     default: 'top',

package/src/components/table/__tests__/Table.spec.ts

@@ -1,6 +1,29 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import Table from '../Table.vue'
+import type { TableHeader } from '../Table.vue'
+
+const sortableHeaders: TableHeader[] = [
+  { text: 'ID', value: 'id', sortable: true },
+  { text: 'Name', value: 'name', sortable: true },
+]
+
+function mountTable(props: Record<string, unknown> = {}) {
+  return mount(Table, {
+    props: {
+      headers: sortableHeaders,
+      items: [{ id: 1, name: 'A' }, { id: 2, name: 'B' }],
+      sort: [],
+      ...props,
+    },
+  })
+}
+
+function clickSortableHeader(wrapper: ReturnType<typeof mountTable>, index: number) {
+  const headers = wrapper.findAll('th')
+
+  return headers[index].trigger('click')
+}
 
 describe('Table', () => {
   it('renders without errors', () => {
@@ -8,4 +31,34 @@ describe('Table', () => {
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  describe('sort', () => {
+    it('defaults to single-column sort', async () => {
+      const wrapper = mountTable()
+
+      await clickSortableHeader(wrapper, 0)
+      expect(wrapper.emitted('update:sort')?.[0]).toEqual([['id,-1']])
+
+      await clickSortableHeader(wrapper, 1)
+      expect(wrapper.emitted('update:sort')?.[1]).toEqual([['name,-1']])
+    })
+
+    it('cycles sort order for the active column in single-column mode', async () => {
+      const wrapper = mountTable({ sort: ['id,-1'] })
+
+      await clickSortableHeader(wrapper, 0)
+      expect(wrapper.emitted('update:sort')?.[0]).toEqual([['id,1']])
+
+      await wrapper.setProps({ sort: ['id,1'] })
+      await clickSortableHeader(wrapper, 0)
+      expect(wrapper.emitted('update:sort')?.[1]).toEqual([[]])
+    })
+
+    it('appends columns when sortMultiple is enabled', async () => {
+      const wrapper = mountTable({ sortMultiple: true, sort: ['id,-1'] })
+
+      await clickSortableHeader(wrapper, 1)
+      expect(wrapper.emitted('update:sort')?.[0]).toEqual([['id,-1', 'name,-1']])
+    })
+  })
 })

package/src/components/table/theme/Table.carbon.theme.ts

@@ -2,7 +2,7 @@ import type { TableTheme } from '../Table.vue'
 
 const theme: TableTheme = {
   classes: {
-    wrapper: 'w-full h-full shadow-sm overflow-x-auto text-sm bg-white dark:bg-secondary-800',
+    wrapper: 'w-full h-full shadow-xs overflow-x-auto text-sm bg-white dark:bg-secondary-800',
 
     table: ({ props }) => {
       const classes = ['w-full relative']