@hina-ui/vue 1.7.6 → 1.7.8

package/src/primitives/slider/SliderOrientation.ts

@@ -0,0 +1,100 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  normalizeStyle,
+  renderSlot,
+  toRefs,
+  withCtx,
+  type PropType,
+} from 'vue'
+import {
+  createSlideGeometry,
+  sliderOrientationState,
+  sliderStepDirection,
+  type SliderOrientation,
+} from '../../../../shared/src/primitives/slider'
+import type { Direction } from '../utils/useDirection'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectSliderRootContext, provideSliderOrientationContext } from './context'
+import { SliderImpl } from './SliderImpl'
+
+function defineSliderOrientation(orientation: SliderOrientation, name: string) {
+  const horizontal = orientation === 'horizontal'
+  return defineComponent({
+    name,
+    props: {
+      ...(horizontal ? { dir: { type: String as PropType<Direction>, required: false } } : {}),
+      min: { type: Number, required: true },
+      max: { type: Number, required: true },
+      inverted: { type: Boolean, required: true },
+    },
+    emits: ['slideEnd', 'slideStart', 'slideMove', 'homeKeyDown', 'endKeyDown', 'stepKeyDown'],
+    setup(props, { emit, slots }) {
+      const { max, min, inverted } = toRefs(props)
+      const dir = computed(() => (props as { dir?: Direction }).dir)
+      const { forwardRef, currentElement: sliderElement } = useForwardExpose()
+      const rootContext = injectSliderRootContext()
+      const geometry = createSlideGeometry(horizontal ? 'x' : 'y')
+      const state = computed(() =>
+        sliderOrientationState(
+          orientation,
+          dir.value,
+          inverted.value,
+          rootContext.thumbAlignment.value,
+        ),
+      )
+
+      function getValueFromPointerEvent(event: PointerEvent, slideStart = false) {
+        const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value]!
+        return geometry.value(event, slideStart, {
+          element: sliderElement.value,
+          thumb,
+          contain: rootContext.thumbAlignment.value === 'contain',
+          output: state.value.increasing ? [min.value, max.value] : [max.value, min.value],
+        })
+      }
+
+      provideSliderOrientationContext({
+        startEdge: computed(() => state.value.startEdge),
+        endEdge: computed(() => state.value.endEdge),
+        direction: computed(() => state.value.direction),
+        size: horizontal ? 'width' : 'height',
+      })
+
+      const onSlideStart = (event: PointerEvent) =>
+        emit('slideStart', getValueFromPointerEvent(event, true))
+      const onSlideMove = (event: PointerEvent) =>
+        emit('slideMove', getValueFromPointerEvent(event))
+      const onSlideEnd = () => {
+        geometry.reset()
+        emit('slideEnd')
+      }
+      const onStepKeyDown = (event: KeyboardEvent) =>
+        emit('stepKeyDown', event, sliderStepDirection(state.value.slideDirection, event.key))
+      const onEndKeyDown = (event: KeyboardEvent) => emit('endKeyDown', event)
+      const onHomeKeyDown = (event: KeyboardEvent) => emit('homeKeyDown', event)
+
+      return () =>
+        h(
+          SliderImpl,
+          {
+            ref: forwardRef,
+            ...(horizontal ? { dir: dir.value } : {}),
+            'data-orientation': orientation,
+            style: normalizeStyle({ '--reka-slider-thumb-transform': state.value.thumbTransform }),
+            onSlideStart,
+            onSlideMove,
+            onSlideEnd,
+            onStepKeyDown,
+            onEndKeyDown,
+            onHomeKeyDown,
+          },
+          { default: withCtx(() => [renderSlot(slots, 'default')]) },
+        )
+    },
+  })
+}
+
+export const SliderHorizontal = defineSliderOrientation('horizontal', 'SliderHorizontal')
+export const SliderVertical = defineSliderOrientation('vertical', 'SliderVertical')

package/src/primitives/slider/SliderRoot.ts

@@ -0,0 +1,214 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  h,
+  mergeProps,
+  ref,
+  renderSlot,
+  toRaw,
+  toRefs,
+  withCtx,
+  type PropType,
+} from 'vue'
+import {
+  getClosestValueIndex,
+  resolveSliderUpdate,
+  sliderStepAmount,
+  type SliderOrientation,
+  type SliderThumbAlignment,
+} from '../../../../shared/src/primitives/slider'
+import { useCollection } from '../collection'
+import type { PrimitiveProps } from '../primitive'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useFormControl } from '../utils/useFormControl'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useVModel } from '../utils/useVModel'
+import { VisuallyHiddenInput } from '../visually-hidden'
+import { provideSliderRootContext } from './context'
+import { SliderHorizontal, SliderVertical } from './SliderOrientation'
+
+export interface SliderRootProps {
+  defaultValue?: number[]
+  modelValue?: number[] | null
+  disabled?: boolean
+  orientation?: SliderOrientation
+  dir?: Direction
+  inverted?: boolean
+  min?: number
+  max?: number
+  step?: number
+  minStepsBetweenThumbs?: number
+  thumbAlignment?: SliderThumbAlignment
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+  name?: string
+  required?: boolean
+}
+
+export type SliderRootEmits = {
+  'update:modelValue': [value: number[] | undefined]
+  valueCommit: [value: number[]]
+}
+
+export const SliderRoot = defineComponent({
+  name: 'SliderRoot',
+  inheritAttrs: false,
+  props: {
+    defaultValue: { type: Array as PropType<number[]>, required: false, default: () => [0] },
+    modelValue: { type: [Array, null] as PropType<number[] | null>, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    orientation: {
+      type: String as PropType<SliderOrientation>,
+      required: false,
+      default: 'horizontal',
+    },
+    dir: { type: String as PropType<Direction>, required: false },
+    inverted: { type: Boolean, required: false, default: false },
+    min: { type: Number, required: false, default: 0 },
+    max: { type: Number, required: false, default: 100 },
+    step: { type: Number, required: false, default: 1 },
+    minStepsBetweenThumbs: { type: Number, required: false, default: 0 },
+    thumbAlignment: {
+      type: String as PropType<SliderThumbAlignment>,
+      required: false,
+      default: 'contain',
+    },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'span',
+    },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+  },
+  emits: ['update:modelValue', 'valueCommit'],
+  setup(props, { emit, attrs, slots }) {
+    const {
+      min,
+      max,
+      step,
+      minStepsBetweenThumbs,
+      orientation,
+      disabled,
+      thumbAlignment,
+      dir: propDir,
+    } = toRefs(props)
+    const dir = useDirection(propDir)
+    const { forwardRef, currentElement } = useForwardExpose()
+    const isFormControl = useFormControl(currentElement)
+    const { CollectionSlot } = useCollection({ isProvider: true })
+    const modelValue = useVModel(
+      props,
+      'modelValue',
+      (_, value) => emit('update:modelValue', value as number[] | undefined),
+      { defaultValue: props.defaultValue, passive: props.modelValue === undefined },
+    )
+    const currentModelValue = computed(() =>
+      Array.isArray(modelValue.value) ? [...modelValue.value] : [],
+    )
+    const valueIndexToChangeRef = ref(0)
+    const valuesBeforeSlideStartRef = ref(currentModelValue.value)
+    const thumbElements = ref<HTMLElement[]>([])
+
+    function updateValues(value: number, atIndex: number, { commit } = { commit: false }) {
+      const update = resolveSliderUpdate(currentModelValue.value, value, atIndex, {
+        min: min.value,
+        max: max.value,
+        step: step.value,
+        minStepsBetweenThumbs: minStepsBetweenThumbs.value,
+      })
+      if (!update) return
+      valueIndexToChangeRef.value = update.index
+      const hasChanged = String(update.values) !== String(modelValue.value)
+      if (hasChanged && commit) emit('valueCommit', update.values)
+      if (hasChanged) {
+        thumbElements.value[valueIndexToChangeRef.value]?.focus()
+        modelValue.value = update.values
+      }
+    }
+
+    function handleSlideStart(value: number) {
+      updateValues(value, getClosestValueIndex(currentModelValue.value, value))
+    }
+    function handleSlideMove(value: number) {
+      updateValues(value, valueIndexToChangeRef.value)
+    }
+    function handleSlideEnd() {
+      const previous = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value]
+      const next = currentModelValue.value[valueIndexToChangeRef.value]
+      if (next !== previous) emit('valueCommit', toRaw(currentModelValue.value))
+    }
+
+    provideSliderRootContext({
+      modelValue,
+      currentModelValue,
+      valueIndexToChangeRef,
+      thumbElements,
+      orientation,
+      min,
+      max,
+      disabled,
+      thumbAlignment,
+    })
+
+    const handlers = {
+      onPointerdown: () => {
+        if (!disabled.value) valuesBeforeSlideStartRef.value = currentModelValue.value
+      },
+      onSlideStart: (value: number) => !disabled.value && handleSlideStart(value),
+      onSlideMove: (value: number) => !disabled.value && handleSlideMove(value),
+      onSlideEnd: () => !disabled.value && handleSlideEnd(),
+      onHomeKeyDown: () => !disabled.value && updateValues(min.value, 0, { commit: true }),
+      onEndKeyDown: () =>
+        !disabled.value &&
+        updateValues(max.value, currentModelValue.value.length - 1, { commit: true }),
+      onStepKeyDown: (event: KeyboardEvent, direction: number) => {
+        if (disabled.value) return
+        const atIndex = valueIndexToChangeRef.value
+        const value = currentModelValue.value[atIndex]!
+        updateValues(value + sliderStepAmount(event, step.value) * direction, atIndex, {
+          commit: true,
+        })
+      },
+    }
+
+    return () =>
+      h(CollectionSlot, null, {
+        default: withCtx(() => [
+          h(
+            orientation.value === 'horizontal' ? SliderHorizontal : SliderVertical,
+            mergeProps(attrs, {
+              ref: forwardRef,
+              'as-child': props.asChild,
+              as: props.as,
+              min: min.value,
+              max: max.value,
+              dir: dir.value,
+              inverted: props.inverted,
+              'aria-disabled': disabled.value,
+              'data-disabled': disabled.value ? '' : undefined,
+              ...handlers,
+            }) as { min: number; max: number; inverted: boolean },
+            {
+              default: withCtx(() => [
+                renderSlot(slots, 'default', { modelValue: modelValue.value }),
+                isFormControl.value && props.name
+                  ? h(VisuallyHiddenInput, {
+                      key: 0,
+                      type: 'number',
+                      value: modelValue.value,
+                      name: props.name,
+                      required: props.required,
+                      disabled: disabled.value,
+                      step: step.value,
+                    })
+                  : createCommentVNode('v-if', true),
+              ]),
+            },
+          ),
+        ]),
+      })
+  },
+})

package/src/primitives/slider/SliderThumb.ts

@@ -0,0 +1,139 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  onMounted,
+  onUnmounted,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { useMounted } from '@vueuse/core'
+import {
+  convertValueToPercentage,
+  getLabel,
+  sliderThumbOffset,
+} from '../../../../shared/src/primitives/slider'
+import { useCollection } from '../collection'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useSize } from '../utils/useSize'
+import { injectSliderOrientationContext, injectSliderRootContext } from './context'
+
+export interface SliderThumbProps {
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+const SliderThumbImpl = defineComponent({
+  name: 'SliderThumbImpl',
+  inheritAttrs: false,
+  props: {
+    index: { type: Number, required: true },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { attrs, slots }) {
+    const rootContext = injectSliderRootContext()
+    const orientation = injectSliderOrientationContext()
+    const { forwardRef, currentElement: thumbElement } = useForwardExpose()
+    const { CollectionItem } = useCollection()
+    const value = computed(() => rootContext.modelValue?.value?.[props.index])
+    const percent = computed(() =>
+      value.value === undefined
+        ? 0
+        : convertValueToPercentage(
+            value.value,
+            rootContext.min.value ?? 0,
+            rootContext.max.value ?? 100,
+          ),
+    )
+    const label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0))
+    const size = useSize(thumbElement)
+    const orientationSize = computed(() => size[orientation.size].value)
+    const thumbInBoundsOffset = computed(() =>
+      sliderThumbOffset(
+        rootContext.thumbAlignment.value,
+        orientationSize.value,
+        percent.value,
+        orientation.direction.value,
+      ),
+    )
+    const isMounted = useMounted()
+
+    onMounted(() => {
+      rootContext.thumbElements.value.push(thumbElement.value)
+    })
+    onUnmounted(() => {
+      const index = rootContext.thumbElements.value.findIndex(
+        element => element === thumbElement.value,
+      )
+      rootContext.thumbElements.value.splice(index, 1)
+    })
+
+    const onFocus = () => {
+      rootContext.valueIndexToChangeRef.value = props.index
+    }
+
+    return () =>
+      h(CollectionItem, null, {
+        default: withCtx(() => [
+          h(
+            Primitive,
+            mergeProps(attrs, {
+              ref: forwardRef,
+              role: 'slider',
+              tabindex: rootContext.disabled.value ? undefined : 0,
+              'aria-label': attrs['aria-label'] || label.value,
+              'data-disabled': rootContext.disabled.value ? '' : undefined,
+              'data-orientation': rootContext.orientation.value,
+              'aria-valuenow': value.value,
+              'aria-valuemin': rootContext.min.value,
+              'aria-valuemax': rootContext.max.value,
+              'aria-orientation': rootContext.orientation.value,
+              'as-child': props.asChild,
+              as: props.as,
+              style: {
+                transform: 'var(--reka-slider-thumb-transform)',
+                position: 'absolute',
+                [orientation.startEdge.value]:
+                  `calc(${percent.value}% + ${thumbInBoundsOffset.value}px)`,
+                display: !isMounted.value && value.value === undefined ? 'none' : undefined,
+              },
+              onFocus,
+            }),
+            { default: withCtx(() => [renderSlot(slots, 'default')]) },
+          ),
+        ]),
+      })
+  },
+})
+
+export const SliderThumb = defineComponent({
+  name: 'SliderThumb',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'span',
+    },
+  },
+  setup(props, { slots }) {
+    const { getItems } = useCollection()
+    const { forwardRef, currentElement: thumbElement } = useForwardExpose()
+    const index = computed(() =>
+      thumbElement.value ? getItems(true).findIndex(item => item.ref === thumbElement.value) : -1,
+    )
+
+    return () =>
+      h(
+        SliderThumbImpl,
+        mergeProps({ ref: forwardRef }, props, { index: index.value }) as { index: number },
+        {
+          default: withCtx(() => [renderSlot(slots, 'default')]),
+        },
+      )
+  },
+})

package/src/primitives/slider/SliderTrack.ts

@@ -0,0 +1,37 @@
+import { defineComponent, h, renderSlot, withCtx, type PropType } from 'vue'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectSliderRootContext } from './context'
+
+export interface SliderTrackProps {
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const SliderTrack = defineComponent({
+  name: 'SliderTrack',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'span',
+    },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectSliderRootContext()
+    useForwardExpose()
+
+    return () =>
+      h(
+        Primitive,
+        {
+          'as-child': props.asChild,
+          as: props.as,
+          'data-disabled': rootContext.disabled.value ? '' : undefined,
+          'data-orientation': rootContext.orientation.value,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/slider/context.ts

@@ -0,0 +1,31 @@
+import type { ComputedRef, Ref } from 'vue'
+import type {
+  SliderOrientation,
+  SliderThumbAlignment,
+} from '../../../../shared/src/primitives/slider'
+import { createContext } from '../utils/createContext'
+
+export interface SliderRootContext {
+  orientation: Ref<SliderOrientation>
+  disabled: Ref<boolean>
+  min: Ref<number>
+  max: Ref<number>
+  modelValue?: Readonly<Ref<number[] | null | undefined>>
+  currentModelValue: ComputedRef<number[]>
+  valueIndexToChangeRef: Ref<number>
+  thumbElements: Ref<HTMLElement[]>
+  thumbAlignment: Ref<SliderThumbAlignment>
+}
+
+export const [injectSliderRootContext, provideSliderRootContext] =
+  createContext<SliderRootContext>('SliderRoot')
+
+export interface SliderOrientationContext {
+  startEdge: ComputedRef<'left' | 'right' | 'bottom' | 'top'>
+  endEdge: ComputedRef<'left' | 'right' | 'bottom' | 'top'>
+  size: 'width' | 'height'
+  direction: ComputedRef<1 | -1>
+}
+
+export const [injectSliderOrientationContext, provideSliderOrientationContext] =
+  createContext<SliderOrientationContext>(['SliderVertical', 'SliderHorizontal'])

package/src/primitives/slider/index.ts

@@ -0,0 +1,8 @@
+export {
+  injectSliderOrientationContext,
+  injectSliderRootContext,
+  type SliderRootContext,
+} from './context'
+export { SliderRoot, type SliderRootEmits, type SliderRootProps } from './SliderRoot'
+export { SliderThumb, type SliderThumbProps } from './SliderThumb'
+export { SliderTrack, type SliderTrackProps } from './SliderTrack'

package/src/primitives/splitter/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.