@hina-ui/vue 1.7.6 → 1.7.8

package/src/primitives/splitter/SplitterPanel.ts

@@ -0,0 +1,170 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  normalizeStyle,
+  onMounted,
+  onUnmounted,
+  renderSlot,
+  watch,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { PRECISION } from '../../../../shared/src/primitives/splitter/constants'
+import type { PanelData, SizeUnit } from '../../../../shared/src/primitives/splitter/types'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useId } from '../utils/useId'
+import { injectPanelGroupContext } from './context'
+
+export interface SplitterPanelProps {
+  collapsedSize?: number
+  collapsible?: boolean
+  defaultSize?: number
+  id?: string
+  maxSize?: number
+  minSize?: number
+  order?: number
+  sizeUnit?: SizeUnit
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export type SplitterPanelEmits = {
+  collapse: []
+  expand: []
+  resize: [size: number, prevSize: number | undefined]
+}
+
+export const SplitterPanel = defineComponent({
+  name: 'SplitterPanel',
+  props: {
+    collapsedSize: { type: Number, required: false },
+    collapsible: { type: Boolean, required: false },
+    defaultSize: { type: Number, required: false },
+    id: { type: String, required: false },
+    maxSize: { type: Number, required: false },
+    minSize: { type: Number, required: false },
+    order: { type: Number, required: false },
+    sizeUnit: { type: String as PropType<SizeUnit>, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  emits: ['collapse', 'expand', 'resize'],
+  setup(props, { emit, expose, slots }) {
+    const panelGroupContext = injectPanelGroupContext()
+    if (panelGroupContext === null)
+      throw new Error('SplitterPanel components must be rendered within a SplitterGroup container')
+    const {
+      collapsePanel,
+      expandPanel,
+      getPanelSize,
+      getPanelStyle,
+      isPanelCollapsed,
+      resizePanel,
+      groupId,
+      reevaluatePanelConstraints,
+      registerPanel,
+      unregisterPanel,
+    } = panelGroupContext
+    const panelId = useId(props.id, 'reka-splitter-panel')
+
+    const panelDataRef = computed<PanelData>(() => ({
+      callbacks: {
+        onCollapse: () => emit('collapse'),
+        onExpand: () => emit('expand'),
+        onResize: (...args: [number, number | undefined]) => emit('resize', ...args),
+      },
+      constraints: {
+        collapsedSize:
+          props.collapsedSize && Number.parseFloat(props.collapsedSize.toFixed(PRECISION)),
+        collapsible: props.collapsible,
+        defaultSize: props.defaultSize,
+        maxSize: props.maxSize,
+        minSize: props.minSize,
+        sizeUnit: props.sizeUnit ?? '%',
+      },
+      id: panelId,
+      idIsFromProps: props.id !== undefined,
+      order: props.order,
+    }))
+
+    watch(
+      () => panelDataRef.value.constraints,
+      (constraints, prevConstraints) => {
+        if (
+          prevConstraints.collapsedSize !== constraints.collapsedSize ||
+          prevConstraints.collapsible !== constraints.collapsible ||
+          prevConstraints.maxSize !== constraints.maxSize ||
+          prevConstraints.minSize !== constraints.minSize ||
+          prevConstraints.sizeUnit !== constraints.sizeUnit
+        )
+          reevaluatePanelConstraints(panelDataRef.value, prevConstraints)
+      },
+      { deep: true },
+    )
+
+    onMounted(() => {
+      registerPanel(panelDataRef.value)
+    })
+    onUnmounted(() => {
+      unregisterPanel(panelDataRef.value)
+    })
+
+    const style = computed(() => getPanelStyle(panelDataRef.value, props.defaultSize))
+    const isCollapsed = computed(() => isPanelCollapsed(panelDataRef.value))
+    const isExpanded = computed(() => !isCollapsed.value)
+
+    function collapse() {
+      collapsePanel(panelDataRef.value)
+    }
+    function expand() {
+      expandPanel(panelDataRef.value)
+    }
+    function resize(size: number) {
+      resizePanel(panelDataRef.value, size)
+    }
+
+    expose({
+      collapse,
+      expand,
+      getSize() {
+        return getPanelSize(panelDataRef.value)
+      },
+      resize,
+      isCollapsed,
+      isExpanded,
+    })
+
+    return () =>
+      h(
+        Primitive,
+        {
+          id: panelId,
+          style: normalizeStyle(style.value),
+          as: props.as,
+          'as-child': props.asChild,
+          'data-panel': '',
+          'data-panel-collapsible': props.collapsible || undefined,
+          'data-panel-group-id': groupId,
+          'data-panel-id': panelId,
+          'data-panel-size': Number.parseFloat(`${style.value.flexGrow}`).toFixed(1),
+          'data-state': props.collapsible
+            ? isCollapsed.value
+              ? 'collapsed'
+              : 'expanded'
+            : undefined,
+        },
+        {
+          default: withCtx(() => [
+            renderSlot(slots, 'default', {
+              isCollapsed: isCollapsed.value,
+              isExpanded: isExpanded.value,
+              expand,
+              collapse,
+              resize,
+            }),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/splitter/SplitterResizeHandle.ts

@@ -0,0 +1,170 @@
+import {
+  defineComponent,
+  h,
+  ref,
+  renderSlot,
+  toRefs,
+  watch,
+  watchEffect,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { assert } from '../../../../shared/src/primitives/splitter/assert'
+import { registerResizeHandle } from '../../../../shared/src/primitives/splitter/registry'
+import type {
+  PointerHitAreaMargins,
+  ResizeEvent,
+  ResizeHandler,
+  ResizeHandlerAction,
+  ResizeHandlerState,
+} from '../../../../shared/src/primitives/splitter/types'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useId } from '../utils/useId'
+import { useNonce } from '../utils/useNonce'
+import { useWindowSplitterResizeHandlerBehavior } from './behaviors'
+import { injectPanelGroupContext } from './context'
+
+export interface SplitterResizeHandleProps {
+  id?: string
+  hitAreaMargins?: PointerHitAreaMargins
+  tabindex?: number
+  disabled?: boolean
+  nonce?: string
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export type SplitterResizeHandleEmits = {
+  dragging: [isDragging: boolean]
+}
+
+const isBrowser = typeof document !== 'undefined'
+
+export const SplitterResizeHandle = defineComponent({
+  name: 'SplitterResizeHandle',
+  props: {
+    id: { type: String, required: false },
+    hitAreaMargins: { type: Object as PropType<PointerHitAreaMargins>, required: false },
+    tabindex: { type: Number, required: false, default: 0 },
+    disabled: { type: Boolean, required: false },
+    nonce: { type: String, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  emits: ['dragging'],
+  setup(props, { emit, slots }) {
+    const { forwardRef, currentElement } = useForwardExpose()
+    const { disabled } = toRefs(props)
+    const panelGroupContext = injectPanelGroupContext()
+    if (panelGroupContext === null)
+      throw new Error('PanelResizeHandle components must be rendered within a PanelGroup container')
+    const {
+      direction,
+      groupId,
+      registerResizeHandle: registerResizeHandleWithParentGroup,
+      startDragging,
+      stopDragging,
+      panelGroupElement,
+    } = panelGroupContext
+    const resizeHandleId = useId(props.id, 'reka-splitter-resize-handle')
+    const state = ref<ResizeHandlerState>('inactive')
+    const isFocused = ref(false)
+    const resizeHandler = ref<ResizeHandler | null>(null)
+    const { nonce: propNonce } = toRefs(props)
+    const nonce = useNonce(propNonce)
+
+    watch(
+      disabled,
+      () => {
+        if (!isBrowser) return
+        if (disabled.value) resizeHandler.value = null
+        else resizeHandler.value = registerResizeHandleWithParentGroup(resizeHandleId)
+      },
+      { immediate: true },
+    )
+
+    watchEffect(onCleanup => {
+      if (disabled.value || resizeHandler.value === null) return
+      const element = currentElement.value
+      if (!element) return
+      assert(element)
+      const setResizeHandlerState = (
+        action: ResizeHandlerAction,
+        isActive: boolean,
+        event: ResizeEvent,
+      ) => {
+        if (!isActive) {
+          state.value = 'inactive'
+          return
+        }
+        switch (action) {
+          case 'down':
+            state.value = 'drag'
+            startDragging(resizeHandleId, event)
+            emit('dragging', true)
+            break
+          case 'move':
+            if (state.value !== 'drag') state.value = 'hover'
+            resizeHandler.value?.(event)
+            break
+          case 'up':
+            state.value = 'hover'
+            stopDragging()
+            emit('dragging', false)
+            break
+        }
+      }
+      onCleanup(
+        registerResizeHandle(
+          resizeHandleId,
+          element,
+          () => direction.value,
+          {
+            coarse: props.hitAreaMargins?.coarse ?? 15,
+            fine: props.hitAreaMargins?.fine ?? 5,
+          },
+          () => nonce.value,
+          setResizeHandlerState,
+        ),
+      )
+    })
+
+    useWindowSplitterResizeHandlerBehavior({
+      disabled,
+      resizeHandler,
+      handleId: resizeHandleId,
+      panelGroupElement,
+    })
+
+    const onBlur = () => (isFocused.value = false)
+    const onFocus = () => (isFocused.value = false)
+
+    return () =>
+      h(
+        Primitive,
+        {
+          id: resizeHandleId,
+          ref: forwardRef,
+          style: { touchAction: 'none', userSelect: 'none' },
+          as: props.as,
+          'as-child': props.asChild,
+          role: 'separator',
+          'data-resize-handle': '',
+          tabindex: props.tabindex,
+          'data-state': state.value,
+          'data-disabled': disabled.value ? '' : undefined,
+          'data-orientation': direction.value,
+          'data-panel-group-id': groupId,
+          'data-resize-handle-active':
+            state.value === 'drag' ? 'pointer' : isFocused.value ? 'keyboard' : undefined,
+          'data-resize-handle-state': state.value,
+          'data-panel-resize-handle-enabled': !disabled.value,
+          'data-panel-resize-handle-id': resizeHandleId,
+          onBlur,
+          onFocus,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/splitter/behaviors.ts

@@ -0,0 +1,173 @@
+import { watchEffect, type Ref } from 'vue'
+import { assert } from '../../../../shared/src/primitives/splitter/assert'
+import { calculateAriaValues } from '../../../../shared/src/primitives/splitter/calculate'
+import { fuzzyNumbersEqual } from '../../../../shared/src/primitives/splitter/compare'
+import {
+  getPanelGroupElement,
+  getResizeHandleElement,
+  getResizeHandleElementIndex,
+  getResizeHandleElementsForGroup,
+  getResizeHandlePanelIds,
+} from '../../../../shared/src/primitives/splitter/dom'
+import { adjustLayoutByDelta } from '../../../../shared/src/primitives/splitter/layout'
+import { determinePivotIndices } from '../../../../shared/src/primitives/splitter/pivot'
+import type { PanelData, ResizeHandler } from '../../../../shared/src/primitives/splitter/types'
+
+export interface EagerValues {
+  layout: number[]
+  panelDataArray: PanelData[]
+  panelDataArrayChanged: boolean
+}
+
+export function useWindowSplitterPanelGroupBehavior({
+  eagerValuesRef,
+  groupId,
+  layout,
+  panelGroupElement,
+  setLayout,
+  getPanelDataWithPercentConstraints,
+}: {
+  eagerValuesRef: Ref<EagerValues>
+  groupId: string
+  layout: Ref<number[]>
+  panelGroupElement: Ref<ParentNode | null | undefined>
+  setLayout: (value: number[]) => void
+  getPanelDataWithPercentConstraints: () => PanelData[] | null
+}) {
+  watchEffect(onCleanup => {
+    const groupElement = panelGroupElement.value
+    if (!groupElement) return
+    const panels = getPanelDataWithPercentConstraints()
+    if (!panels) return
+    const handles = getResizeHandleElementsForGroup(groupId, groupElement)
+    for (let index = 0; index < panels.length - 1; index++) {
+      const { valueMax, valueMin, valueNow } = calculateAriaValues({
+        layout: layout.value,
+        panelsArray: panels,
+        pivotIndices: [index, index + 1],
+      })
+      const handle = handles[index]
+      if (handle != null) {
+        const panelData = panels[index]
+        assert(panelData)
+        handle.setAttribute('aria-controls', panelData.id)
+        handle.setAttribute('aria-valuemax', `${Math.round(valueMax)}`)
+        handle.setAttribute('aria-valuemin', `${Math.round(valueMin)}`)
+        handle.setAttribute('aria-valuenow', valueNow != null ? `${Math.round(valueNow)}` : '')
+      }
+    }
+    onCleanup(() => {
+      handles.forEach(handle => {
+        handle.removeAttribute('aria-controls')
+        handle.removeAttribute('aria-valuemax')
+        handle.removeAttribute('aria-valuemin')
+        handle.removeAttribute('aria-valuenow')
+      })
+    })
+  })
+
+  watchEffect(onCleanup => {
+    const groupElement = panelGroupElement.value
+    if (!groupElement) return
+    const eagerValues = eagerValuesRef.value
+    assert(eagerValues)
+    const panels = getPanelDataWithPercentConstraints()
+    if (!panels) return
+    const { panelDataArray } = eagerValues
+    assert(
+      getPanelGroupElement(groupId, groupElement) != null,
+      `No group found for id "${groupId}"`,
+    )
+    const handles = getResizeHandleElementsForGroup(groupId, groupElement)
+    assert(handles)
+    const cleanups = handles.map(handle => {
+      const handleId = handle.getAttribute('data-panel-resize-handle-id')
+      assert(handleId)
+      const [idBefore, idAfter] = getResizeHandlePanelIds(
+        groupId,
+        handleId,
+        panelDataArray,
+        groupElement,
+      )
+      if (idBefore == null || idAfter == null) return () => {}
+      const onKeyDown = (event: KeyboardEvent) => {
+        if (event.defaultPrevented) return
+        if (event.key !== 'Enter') return
+        event.preventDefault()
+        const index = panels.findIndex(panelData => panelData.id === idBefore)
+        if (index < 0) return
+        const panelData = panels[index]
+        assert(panelData)
+        const size = layout.value[index]
+        const { collapsedSize = 0, collapsible, minSize = 0 } = panelData.constraints
+        if (size == null || !collapsible) return
+        const nextLayout = adjustLayoutByDelta({
+          delta: fuzzyNumbersEqual(size, collapsedSize)
+            ? minSize - collapsedSize
+            : collapsedSize - size,
+          layout: layout.value,
+          panelConstraints: panels.map(panel => panel.constraints),
+          pivotIndices: determinePivotIndices(groupId, handleId, groupElement),
+          trigger: 'keyboard',
+        })
+        if (layout.value !== nextLayout) setLayout(nextLayout)
+      }
+      handle.addEventListener('keydown', onKeyDown)
+      return () => handle.removeEventListener('keydown', onKeyDown)
+    })
+    onCleanup(() => cleanups.forEach(cleanup => cleanup()))
+  })
+}
+
+export function useWindowSplitterResizeHandlerBehavior({
+  disabled,
+  handleId,
+  resizeHandler,
+  panelGroupElement,
+}: {
+  disabled: Ref<boolean>
+  handleId: string
+  resizeHandler: Ref<ResizeHandler | null>
+  panelGroupElement: Ref<ParentNode | null | undefined>
+}) {
+  watchEffect(onCleanup => {
+    const groupElement = panelGroupElement.value
+    if (disabled.value || resizeHandler.value === null || groupElement === null) return
+    const handleElement = getResizeHandleElement(handleId, groupElement)
+    if (handleElement == null) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowLeft':
+        case 'ArrowRight':
+        case 'ArrowUp':
+        case 'End':
+        case 'Home': {
+          event.preventDefault()
+          resizeHandler.value?.(event)
+          break
+        }
+        case 'F6': {
+          event.preventDefault()
+          const groupId = handleElement.getAttribute('data-panel-group-id')
+          assert(groupId)
+          const handles = getResizeHandleElementsForGroup(groupId, groupElement)
+          const index = getResizeHandleElementIndex(groupId, handleId, groupElement)
+          assert(index !== null)
+          const nextIndex = event.shiftKey
+            ? index > 0
+              ? index - 1
+              : handles.length - 1
+            : index + 1 < handles.length
+              ? index + 1
+              : 0
+          handles[nextIndex]!.focus()
+          break
+        }
+      }
+    }
+    handleElement.addEventListener('keydown', onKeyDown)
+    onCleanup(() => handleElement.removeEventListener('keydown', onKeyDown))
+  })
+}

package/src/primitives/splitter/context.ts

@@ -0,0 +1,33 @@
+import type { Ref } from 'vue'
+import type {
+  Direction,
+  DragState,
+  PanelConstraints,
+  PanelData,
+  ResizeEvent,
+  ResizeHandler,
+} from '../../../../shared/src/primitives/splitter/types'
+import { createContext } from '../utils/createContext'
+
+export interface PanelGroupContext {
+  direction: Ref<Direction>
+  dragState: DragState | null
+  groupId: string
+  reevaluatePanelConstraints: (panelData: PanelData, prevConstraints: PanelConstraints) => void
+  registerPanel: (panelData: PanelData) => void
+  registerResizeHandle: (dragHandleId: string) => ResizeHandler
+  resizePanel: (panelData: PanelData, size: number) => void
+  startDragging: (dragHandleId: string, event: ResizeEvent) => void
+  stopDragging: () => void
+  unregisterPanel: (panelData: PanelData) => void
+  panelGroupElement: Ref<ParentNode | null | undefined>
+  collapsePanel: (panelData: PanelData) => void
+  expandPanel: (panelData: PanelData) => void
+  isPanelCollapsed: (panelData: PanelData) => boolean
+  isPanelExpanded: (panelData: PanelData) => boolean
+  getPanelSize: (panelData: PanelData) => number
+  getPanelStyle: (panelData: PanelData, defaultSize: number | undefined) => Record<string, unknown>
+}
+
+export const [injectPanelGroupContext, providePanelGroupContext] =
+  createContext<PanelGroupContext>('PanelGroup')

package/src/primitives/splitter/index.ts

@@ -0,0 +1,13 @@
+export type {
+  Direction,
+  PanelGroupStorage,
+  SizeUnit,
+} from '../../../../shared/src/primitives/splitter/types'
+export { injectPanelGroupContext, type PanelGroupContext } from './context'
+export { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps } from './SplitterGroup'
+export { SplitterPanel, type SplitterPanelEmits, type SplitterPanelProps } from './SplitterPanel'
+export {
+  SplitterResizeHandle,
+  type SplitterResizeHandleEmits,
+  type SplitterResizeHandleProps,
+} from './SplitterResizeHandle'

package/src/primitives/stepper/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/stepper/StepperItem.ts

@@ -0,0 +1,68 @@
+import { computed, defineComponent, h, renderSlot, toRefs, withCtx, type PropType } from 'vue'
+import { isStepFocusable, stepperItemState } from '../../../../shared/src/primitives/stepper'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useId } from '../utils/useId'
+import { injectStepperRootContext, provideStepperItemContext } from './context'
+
+export interface StepperItemProps {
+  step: number
+  disabled?: boolean
+  completed?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const StepperItem = defineComponent({
+  name: 'StepperItem',
+  props: {
+    step: { type: Number, required: true },
+    disabled: { type: Boolean, required: false, default: false },
+    completed: { type: Boolean, required: false, default: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    const { disabled, step, completed } = toRefs(props)
+    const { forwardRef } = useForwardExpose()
+    const rootContext = injectStepperRootContext()
+    const titleId = useId(undefined, 'reka-stepper-item-title')
+    const descriptionId = useId(undefined, 'reka-stepper-item-description')
+    const itemState = computed(() =>
+      stepperItemState(completed.value, rootContext.modelValue.value!, step.value),
+    )
+    const isFocusable = computed(() =>
+      isStepFocusable(
+        disabled.value,
+        rootContext.linear.value,
+        step.value,
+        rootContext.modelValue.value!,
+      ),
+    )
+
+    provideStepperItemContext({
+      titleId,
+      descriptionId,
+      state: itemState,
+      disabled,
+      step,
+      isFocusable,
+    })
+
+    return () =>
+      h(
+        Primitive,
+        {
+          ref: forwardRef,
+          as: props.as,
+          'as-child': props.asChild,
+          'aria-current': itemState.value === 'active' ? 'true' : undefined,
+          'data-state': itemState.value,
+          disabled: disabled.value || !isFocusable.value ? '' : undefined,
+          'data-disabled': disabled.value || !isFocusable.value ? '' : undefined,
+          'data-orientation': rootContext.orientation.value,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default', { state: itemState.value })]) },
+      )
+  },
+})