@hina-ui/vue 1.7.6 → 1.7.8

package/src/primitives/rating/RatingRoot.ts

@@ -0,0 +1,111 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  ref,
+  renderSlot,
+  toRefs,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { nextRating, ratingItems } from '../../../../shared/src/primitives/rating'
+import type { Orientation } from '../../../../shared/src/primitives/roving-focus'
+import type { PrimitiveProps } from '../primitive'
+import { RadioGroupRoot } from '../radio-group'
+import type { Direction } from '../utils/useDirection'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useVModel } from '../utils/useVModel'
+import { provideRatingRootContext } from './context'
+
+export interface RatingRootProps {
+  defaultValue?: number
+  modelValue?: number
+  length?: number
+  clearable?: boolean
+  hoverable?: boolean
+  step?: number
+  disabled?: boolean
+  orientation?: Orientation
+  dir?: Direction
+  loop?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+  name?: string
+  required?: boolean
+}
+
+export type RatingRootEmits = {
+  'update:modelValue': [value: number]
+}
+
+const OMITTED = ['length', 'clearable', 'hoverable', 'step']
+
+export const RatingRoot = defineComponent({
+  name: 'RatingRoot',
+  props: {
+    defaultValue: { type: Number, required: false },
+    modelValue: { type: Number, required: false },
+    length: { type: Number, required: false, default: 5 },
+    clearable: { type: Boolean, required: false },
+    hoverable: { type: Boolean, required: false },
+    step: { type: Number, required: false, default: 1 },
+    disabled: { type: Boolean, required: false },
+    orientation: { type: String as PropType<Orientation>, required: false, default: 'horizontal' },
+    dir: { type: String as PropType<Direction>, required: false },
+    loop: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, slots }) {
+    const { length, disabled, clearable, hoverable, step } = toRefs(props)
+    useForwardExpose()
+    const modelValue = useVModel(props, 'modelValue', emit, {
+      defaultValue: props.defaultValue,
+      passive: props.modelValue === undefined,
+    })
+    const items = computed(() => ratingItems(length.value))
+    const hoveredRating = ref(0)
+
+    function changeModelValue(rating: number) {
+      if (disabled.value) return
+      const next = nextRating(clearable.value, modelValue.value, rating)
+      if (next === 0) hoveredRating.value = 0
+      modelValue.value = next
+    }
+    function changeHoveredRating(rating: number) {
+      if (disabled.value || !hoverable.value) return
+      hoveredRating.value = rating
+    }
+    function resetHoveredRating() {
+      hoveredRating.value = 0
+    }
+
+    provideRatingRootContext({
+      modelValue,
+      items,
+      hoveredRating,
+      disabled,
+      step,
+      changeModelValue,
+      changeHoveredRating,
+    })
+
+    return () =>
+      h(
+        RadioGroupRoot,
+        mergeProps(
+          Object.fromEntries(Object.entries(props).filter(([key]) => !OMITTED.includes(key))),
+          { disabled: disabled.value, onMouseleave: resetHoveredRating },
+        ),
+        {
+          default: withCtx(() => [
+            renderSlot(slots, 'default', { items: items.value, modelValue: modelValue.value }),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/rating/context.ts

@@ -0,0 +1,22 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from '../utils/createContext'
+
+export interface RatingRootContext {
+  modelValue: Ref<number | undefined>
+  items: ComputedRef<number[]>
+  hoveredRating: Ref<number>
+  disabled: Ref<boolean>
+  step: Ref<number>
+  changeModelValue: (value: number) => void
+  changeHoveredRating: (value: number) => void
+}
+
+export const [injectRatingRootContext, provideRatingRootContext] =
+  createContext<RatingRootContext>('RatingRoot')
+
+export interface RatingItemContext {
+  steps: ComputedRef<number[]>
+}
+
+export const [injectRatingItemContext, provideRatingItemContext] =
+  createContext<RatingItemContext>('RatingItem')

package/src/primitives/rating/index.ts

@@ -0,0 +1,9 @@
+export {
+  injectRatingItemContext,
+  injectRatingRootContext,
+  type RatingItemContext,
+  type RatingRootContext,
+} from './context'
+export { RatingItem, type RatingItemProps } from './RatingItem'
+export { RatingItemIndicator, type RatingItemIndicatorProps } from './RatingItemIndicator'
+export { RatingRoot, type RatingRootEmits, type RatingRootProps } from './RatingRoot'

package/src/primitives/roving-focus/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/roving-focus/RovingFocusGroup.vue

@@ -0,0 +1,125 @@
+<script lang="ts">
+  export interface RovingFocusGroupProps extends PrimitiveProps {
+    orientation?: Orientation
+    dir?: Direction
+    loop?: boolean
+    currentTabStopId?: string | null
+    defaultCurrentTabStopId?: string
+    preventScrollOnEntryFocus?: boolean
+  }
+
+  export type RovingFocusGroupEmits = {
+    entryFocus: [event: Event]
+    'update:currentTabStopId': [value: string | null | undefined]
+  }
+</script>
+
+<script setup lang="ts">
+  import { ref, toRefs } from 'vue'
+  import {
+    ENTRY_FOCUS,
+    ENTRY_FOCUS_OPTIONS,
+    focusFirstCandidate,
+    type Orientation,
+  } from '../../../../shared/src/primitives/roving-focus'
+  import { useCollection } from '../collection'
+  import { Primitive, type PrimitiveProps } from '../primitive'
+  import { useDirection, type Direction } from '../utils/useDirection'
+  import { useVModel } from '../utils/useVModel'
+  import { provideRovingFocusGroupContext } from './context'
+
+  const props = withDefaults(defineProps<RovingFocusGroupProps>(), {
+    orientation: undefined,
+    loop: false,
+    preventScrollOnEntryFocus: false,
+  })
+  const emits = defineEmits<RovingFocusGroupEmits>()
+  const { loop, orientation, dir: propDir } = toRefs(props)
+  const dir = useDirection(propDir)
+  const currentTabStopId = useVModel(
+    props,
+    'currentTabStopId',
+    (_, value) => emits('update:currentTabStopId', value),
+    {
+      defaultValue: props.defaultCurrentTabStopId,
+      passive: props.currentTabStopId === undefined,
+    },
+  )
+  const isTabbingBackOut = ref(false)
+  const isClickFocus = ref(false)
+  const focusableItemsCount = ref(0)
+  const { getItems, CollectionSlot } = useCollection({ isProvider: true })
+
+  function handleFocus(event: FocusEvent) {
+    const isKeyboardFocus = !isClickFocus.value
+    if (
+      event.currentTarget &&
+      event.target === event.currentTarget &&
+      isKeyboardFocus &&
+      !isTabbingBackOut.value
+    ) {
+      const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, ENTRY_FOCUS_OPTIONS)
+      event.currentTarget.dispatchEvent(entryFocusEvent)
+      emits('entryFocus', entryFocusEvent)
+      if (!entryFocusEvent.defaultPrevented) {
+        const items = getItems()
+          .map(item => item.ref)
+          .filter(item => item.dataset.disabled !== '')
+        const activeItem = items.find(item => item.getAttribute('data-active') === '')
+        const highlightedItem = items.find(item => item.getAttribute('data-highlighted') === '')
+        const currentItem = items.find(item => item.id === currentTabStopId.value)
+        const candidates = [activeItem, highlightedItem, currentItem, ...items].filter(
+          (item): item is HTMLElement => !!item,
+        )
+        focusFirstCandidate(candidates, props.preventScrollOnEntryFocus)
+      }
+    }
+    isClickFocus.value = false
+  }
+
+  function handleMouseUp() {
+    setTimeout(() => {
+      isClickFocus.value = false
+    }, 1)
+  }
+
+  defineExpose({ getItems })
+
+  provideRovingFocusGroupContext({
+    loop,
+    dir,
+    orientation,
+    currentTabStopId,
+    onItemFocus: tabStopId => {
+      currentTabStopId.value = tabStopId
+    },
+    onItemShiftTab: () => {
+      isTabbingBackOut.value = true
+    },
+    onFocusableItemAdd: () => {
+      focusableItemsCount.value++
+    },
+    onFocusableItemRemove: () => {
+      focusableItemsCount.value--
+    },
+  })
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"
+      :data-orientation="orientation"
+      :as="as"
+      :as-child="asChild"
+      :dir="dir"
+      style="outline: none"
+      @mousedown="isClickFocus = true"
+      @mouseup="handleMouseUp"
+      @focus="handleFocus"
+      @blur="isTabbingBackOut = false"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
+</template>

package/src/primitives/roving-focus/RovingFocusItem.vue

@@ -0,0 +1,99 @@
+<script lang="ts">
+  export interface RovingFocusItemProps extends PrimitiveProps {
+    tabStopId?: string
+    focusable?: boolean
+    active?: boolean
+    allowShiftKey?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  import { computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
+  import {
+    focusFirstCandidate,
+    getFocusIntent,
+    wrapArray,
+  } from '../../../../shared/src/primitives/roving-focus'
+  import { useCollection } from '../collection'
+  import { Primitive, type PrimitiveProps } from '../primitive'
+  import { useId } from '../utils/useId'
+  import { injectRovingFocusGroupContext } from './context'
+
+  const props = withDefaults(defineProps<RovingFocusItemProps>(), {
+    focusable: true,
+    as: 'span',
+  })
+  const context = injectRovingFocusGroupContext()
+  const randomId = useId()
+  const id = computed(() => props.tabStopId || randomId)
+  const isCurrentTabStop = computed(() => context.currentTabStopId.value === id.value)
+  const { getItems, CollectionItem } = useCollection()
+
+  onMounted(() => {
+    if (props.focusable) context.onFocusableItemAdd()
+  })
+  onUnmounted(() => {
+    if (props.focusable) context.onFocusableItemRemove()
+  })
+  watch(
+    () => props.focusable,
+    (value, previous) => {
+      if (value === previous) return
+      if (value) context.onFocusableItemAdd()
+      else context.onFocusableItemRemove()
+    },
+  )
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Tab' && event.shiftKey) {
+      context.onItemShiftTab()
+      return
+    }
+    if (event.target !== event.currentTarget) return
+    const focusIntent = getFocusIntent(event, context.orientation.value, context.dir.value)
+    if (focusIntent === undefined) return
+    if (
+      event.metaKey ||
+      event.ctrlKey ||
+      event.altKey ||
+      (props.allowShiftKey ? false : event.shiftKey)
+    )
+      return
+    event.preventDefault()
+    let candidates = getItems()
+      .map(item => item.ref)
+      .filter(item => item.dataset.disabled !== '')
+    if (focusIntent === 'last') candidates.reverse()
+    else if (focusIntent === 'prev' || focusIntent === 'next') {
+      if (focusIntent === 'prev') candidates.reverse()
+      const currentIndex = candidates.indexOf(event.currentTarget as HTMLElement)
+      candidates = context.loop.value
+        ? wrapArray(candidates, currentIndex + 1)
+        : candidates.slice(currentIndex + 1)
+    }
+    void nextTick(() => focusFirstCandidate(candidates))
+  }
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :tabindex="isCurrentTabStop ? 0 : -1"
+      :data-orientation="context.orientation.value"
+      :data-active="active ? '' : undefined"
+      :data-disabled="!focusable ? '' : undefined"
+      :as="as"
+      :as-child="asChild"
+      @mousedown="
+        (event: MouseEvent) => {
+          if (!focusable) event.preventDefault()
+          else context.onItemFocus(id)
+        }
+      "
+      @focus="context.onItemFocus(id)"
+      @keydown="handleKeydown"
+    >
+      <slot />
+    </Primitive>
+  </CollectionItem>
+</template>

package/src/primitives/roving-focus/context.ts

@@ -0,0 +1,18 @@
+import type { Ref } from 'vue'
+import type { Orientation } from '../../../../shared/src/primitives/roving-focus'
+import { createContext } from '../utils/createContext'
+import type { Direction } from '../utils/useDirection'
+
+export interface RovingFocusGroupContext {
+  loop: Ref<boolean>
+  dir: Ref<Direction>
+  orientation: Ref<Orientation | undefined>
+  currentTabStopId: Ref<string | null | undefined>
+  onItemFocus: (tabStopId: string) => void
+  onItemShiftTab: () => void
+  onFocusableItemAdd: () => void
+  onFocusableItemRemove: () => void
+}
+
+export const [injectRovingFocusGroupContext, provideRovingFocusGroupContext] =
+  createContext<RovingFocusGroupContext>('RovingFocusGroup')

package/src/primitives/roving-focus/index.ts

@@ -0,0 +1,7 @@
+export { injectRovingFocusGroupContext, type RovingFocusGroupContext } from './context'
+export {
+  default as RovingFocusGroup,
+  type RovingFocusGroupEmits,
+  type RovingFocusGroupProps,
+} from './RovingFocusGroup.vue'
+export { default as RovingFocusItem, type RovingFocusItemProps } from './RovingFocusItem.vue'

package/src/primitives/separator/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/separator/Separator.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface SeparatorProps extends PrimitiveProps {
+    orientation?: SeparatorOrientation
+    decorative?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import {
+    separatorOrientation,
+    separatorSemantics,
+    type SeparatorOrientation,
+  } from '../../../../shared/src/primitives/separator'
+  import { Primitive, type PrimitiveProps } from '../primitive'
+
+  const props = withDefaults(defineProps<SeparatorProps>(), { orientation: 'horizontal' })
+  const orientation = computed(() => separatorOrientation(props.orientation))
+  const semantics = computed(() => separatorSemantics(orientation.value, props.decorative))
+</script>
+
+<template>
+  <Primitive :as="as" :as-child="asChild" :data-orientation="orientation" v-bind="semantics">
+    <slot />
+  </Primitive>
+</template>

package/src/primitives/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator, type SeparatorProps } from './Separator.vue'

package/src/primitives/slider/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/slider/SliderImpl.ts

@@ -0,0 +1,66 @@
+import { defineComponent, h, mergeProps, renderSlot, withCtx, type PropType } from 'vue'
+import { ARROW_KEYS, PAGE_KEYS } from '../../../../shared/src/primitives/slider'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { injectSliderRootContext } from './context'
+
+export const SliderImpl = defineComponent({
+  name: 'SliderImpl',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'span',
+    },
+  },
+  emits: ['slideStart', 'slideMove', 'slideEnd', 'homeKeyDown', 'endKeyDown', 'stepKeyDown'],
+  setup(props, { emit, slots }) {
+    const rootContext = injectSliderRootContext()
+
+    function onKeydown(event: KeyboardEvent) {
+      if (event.key === 'Home') {
+        emit('homeKeyDown', event)
+        event.preventDefault()
+      } else if (event.key === 'End') {
+        emit('endKeyDown', event)
+        event.preventDefault()
+      } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
+        emit('stepKeyDown', event)
+        event.preventDefault()
+      }
+    }
+
+    function onPointerdown(event: PointerEvent) {
+      const target = event.target as HTMLElement
+      target.setPointerCapture(event.pointerId)
+      event.preventDefault()
+      if (rootContext.thumbElements.value.includes(target)) target.focus()
+      else emit('slideStart', event)
+    }
+
+    function onPointermove(event: PointerEvent) {
+      const target = event.target as HTMLElement
+      if (target.hasPointerCapture(event.pointerId)) emit('slideMove', event)
+    }
+
+    function onPointerup(event: PointerEvent) {
+      const target = event.target as HTMLElement
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId)
+        emit('slideEnd', event)
+      }
+    }
+
+    return () =>
+      h(
+        Primitive,
+        mergeProps({ 'data-slider-impl': '' }, props, {
+          onKeydown,
+          onPointerdown,
+          onPointermove,
+          onPointerup,
+        }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})