@hina-ui/vue 1.7.6 → 1.7.7

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')]) },
+      )
+  },
+})

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')