@hina-ui/vue 1.7.6 → 1.7.7

package/src/primitives/pagination/PaginationEdge.ts

@@ -0,0 +1,77 @@
+import {
+  computed,
+  createTextVNode,
+  defineComponent,
+  h,
+  mergeProps,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import {
+  PAGINATION_EDGES,
+  paginationEdgeDisabled,
+  paginationEdgeTarget,
+  type PaginationEdge,
+} from '../../../../shared/src/primitives/pagination'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectPaginationRootContext } from './context'
+
+export interface PaginationEdgeProps {
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+function definePaginationEdge(edge: PaginationEdge, name: string) {
+  const { label, fallback } = PAGINATION_EDGES[edge]
+  return defineComponent({
+    name,
+    props: {
+      asChild: { type: Boolean, required: false },
+      as: {
+        type: null as unknown as PropType<PrimitiveProps['as']>,
+        required: false,
+        default: 'button',
+      },
+    },
+    setup(props, { slots }) {
+      const rootContext = injectPaginationRootContext()
+      useForwardExpose()
+      const disabled = computed(() =>
+        paginationEdgeDisabled(
+          edge,
+          rootContext.page.value,
+          rootContext.pageCount.value,
+          rootContext.disabled.value,
+        ),
+      )
+      const onClick = () =>
+        !disabled.value &&
+        rootContext.onPageChange(
+          paginationEdgeTarget(edge, rootContext.page.value, rootContext.pageCount.value),
+        )
+
+      return () =>
+        h(
+          Primitive,
+          mergeProps(props, {
+            'aria-label': label,
+            type: props.as === 'button' ? 'button' : undefined,
+            disabled: disabled.value,
+            onClick,
+          }),
+          {
+            default: withCtx(() => [
+              renderSlot(slots, 'default', {}, () => [createTextVNode(fallback)]),
+            ]),
+          },
+        )
+    },
+  })
+}
+
+export const PaginationFirst = definePaginationEdge('first', 'PaginationFirst')
+export const PaginationPrev = definePaginationEdge('prev', 'PaginationPrev')
+export const PaginationNext = definePaginationEdge('next', 'PaginationNext')
+export const PaginationLast = definePaginationEdge('last', 'PaginationLast')

package/src/primitives/pagination/PaginationList.ts

@@ -0,0 +1,46 @@
+import {
+  computed,
+  defineComponent,
+  guardReactiveProps,
+  h,
+  normalizeProps,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { getRange, transform } from '../../../../shared/src/primitives/pagination'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectPaginationRootContext } from './context'
+
+export interface PaginationListProps {
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const PaginationList = defineComponent({
+  name: 'PaginationList',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    useForwardExpose()
+    const rootContext = injectPaginationRootContext()
+    const transformedRange = computed(() =>
+      transform(
+        getRange(
+          rootContext.page.value,
+          rootContext.pageCount.value,
+          rootContext.siblingCount.value,
+          rootContext.showEdges.value,
+        ),
+      ),
+    )
+
+    return () =>
+      h(Primitive, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(slots, 'default', { items: transformedRange.value })]),
+      })
+  },
+})

package/src/primitives/pagination/PaginationListItem.ts

@@ -0,0 +1,61 @@
+import {
+  computed,
+  createTextVNode,
+  defineComponent,
+  h,
+  mergeProps,
+  renderSlot,
+  toDisplayString,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectPaginationRootContext } from './context'
+
+export interface PaginationListItemProps {
+  value: number
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const PaginationListItem = defineComponent({
+  name: 'PaginationListItem',
+  props: {
+    value: { type: Number, required: true },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'button',
+    },
+  },
+  setup(props, { slots }) {
+    useForwardExpose()
+    const rootContext = injectPaginationRootContext()
+    const isSelected = computed(() => rootContext.page.value === props.value)
+    const disabled = computed(() => rootContext.disabled.value)
+    const onClick = () => !disabled.value && rootContext.onPageChange(props.value)
+
+    return () =>
+      h(
+        Primitive,
+        mergeProps(props, {
+          'data-type': 'page',
+          'aria-label': `Page ${props.value}`,
+          'aria-current': isSelected.value ? 'page' : undefined,
+          'data-selected': isSelected.value ? 'true' : undefined,
+          disabled: disabled.value,
+          type: props.as === 'button' ? 'button' : undefined,
+          onClick,
+        }),
+        {
+          default: withCtx(() => [
+            renderSlot(slots, 'default', {}, () => [
+              createTextVNode(toDisplayString(props.value), 1),
+            ]),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/pagination/PaginationRoot.ts

@@ -0,0 +1,73 @@
+import { computed, defineComponent, h, renderSlot, toRefs, withCtx, type PropType } from 'vue'
+import { paginationPageCount } from '../../../../shared/src/primitives/pagination'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useVModel } from '../utils/useVModel'
+import { providePaginationRootContext } from './context'
+
+export interface PaginationRootProps {
+  page?: number
+  defaultPage?: number
+  itemsPerPage: number
+  total?: number
+  siblingCount?: number
+  disabled?: boolean
+  showEdges?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export type PaginationRootEmits = {
+  'update:page': [value: number]
+}
+
+export const PaginationRoot = defineComponent({
+  name: 'PaginationRoot',
+  props: {
+    page: { type: Number, required: false },
+    defaultPage: { type: Number, required: false, default: 1 },
+    itemsPerPage: { type: Number, required: true },
+    total: { type: Number, required: false, default: 0 },
+    siblingCount: { type: Number, required: false, default: 2 },
+    disabled: { type: Boolean, required: false },
+    showEdges: { type: Boolean, required: false, default: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'nav',
+    },
+  },
+  emits: ['update:page'],
+  setup(props, { emit, slots }) {
+    const { siblingCount, disabled, showEdges } = toRefs(props)
+    useForwardExpose()
+    const page = useVModel(props, 'page', emit, {
+      defaultValue: props.defaultPage,
+      passive: props.page === undefined,
+    })
+    const pageCount = computed(() => paginationPageCount(props.total, props.itemsPerPage))
+
+    providePaginationRootContext({
+      page: page as never,
+      onPageChange(value) {
+        page.value = value
+      },
+      pageCount,
+      siblingCount,
+      disabled,
+      showEdges,
+    })
+
+    return () =>
+      h(
+        Primitive,
+        { as: props.as, 'as-child': props.asChild },
+        {
+          default: withCtx(() => [
+            renderSlot(slots, 'default', { page: page.value, pageCount: pageCount.value }),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/pagination/context.ts

@@ -0,0 +1,14 @@
+import type { Ref } from 'vue'
+import { createContext } from '../utils/createContext'
+
+export interface PaginationRootContext {
+  page: Ref<number>
+  onPageChange: (value: number) => void
+  pageCount: Ref<number>
+  siblingCount: Ref<number>
+  disabled: Ref<boolean>
+  showEdges: Ref<boolean>
+}
+
+export const [injectPaginationRootContext, providePaginationRootContext] =
+  createContext<PaginationRootContext>('PaginationRoot')

package/src/primitives/pagination/index.ts

@@ -0,0 +1,15 @@
+export { injectPaginationRootContext, type PaginationRootContext } from './context'
+export {
+  PaginationFirst,
+  PaginationLast,
+  PaginationNext,
+  PaginationPrev,
+  type PaginationEdgeProps,
+} from './PaginationEdge'
+export { PaginationList, type PaginationListProps } from './PaginationList'
+export { PaginationListItem, type PaginationListItemProps } from './PaginationListItem'
+export {
+  PaginationRoot,
+  type PaginationRootEmits,
+  type PaginationRootProps,
+} from './PaginationRoot'

package/src/primitives/pin-input/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/pin-input/PinInputInput.ts

@@ -0,0 +1,218 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  renderSlot,
+  watch,
+  withCtx,
+  withKeys,
+  type PropType,
+} from 'vue'
+import { getActiveElement } from '../../../../shared/src/primitives/focus-scope'
+import {
+  navigatePin,
+  pinFocusRedirect,
+  pinInputLabel,
+  pinPlaceholder,
+  resolvePinComposition,
+  resolvePinInput,
+  resolvePinPaste,
+  setPinValueAt,
+  spreadPinValue,
+  type PinTextAction,
+} from '../../../../shared/src/primitives/pin-input'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useComposing } from '../utils/useComposing'
+import { usePrimitiveElement } from '../utils/usePrimitiveElement'
+import { injectPinInputRootContext } from './context'
+
+export interface PinInputInputProps {
+  index: number
+  disabled?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const PinInputInput = defineComponent({
+  name: 'PinInputInput',
+  props: {
+    index: { type: Number, required: true },
+    disabled: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'input',
+    },
+  },
+  setup(props, { slots }) {
+    const context = injectPinInputRootContext()
+    const inputElements = computed(() => [...context.inputElements!.value])
+    const currentValue = computed(() => context.currentModelValue.value[props.index])
+    const disabled = computed(() => props.disabled || context.disabled.value)
+    const isOtpMode = computed(() => context.otp.value)
+    const isPasswordMode = computed(() => context.mask.value)
+    const { primitiveElement, currentElement } = usePrimitiveElement()
+
+    function updateModelValueAt(index: number, value: string) {
+      context.modelValue.value = setPinValueAt(
+        context.currentModelValue.value,
+        index,
+        value,
+        context.isNumericMode.value,
+      )
+    }
+
+    function handleMultipleCharacter(characters: string) {
+      const { values, filled, end } = spreadPinValue(
+        context.currentModelValue.value,
+        characters,
+        props.index,
+        inputElements.value.length,
+        context.isNumericMode.value,
+      )
+      for (const at of filled) inputElements.value[at]!.focus()
+      context.modelValue.value = values
+      inputElements.value[end]?.focus()
+    }
+
+    function apply(target: HTMLInputElement, action: PinTextAction) {
+      if (action.kind === 'clear') target.value = ''
+      else if (action.kind === 'filter') target.value = action.value
+      else if (action.kind === 'spread') handleMultipleCharacter(action.characters)
+      else {
+        target.value = action.character
+        updateModelValueAt(props.index, target.value)
+        inputElements.value[props.index + 1]?.focus()
+      }
+    }
+
+    const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing(event => {
+      const target = event.target as HTMLInputElement
+      apply(target, resolvePinComposition(event.data || target.value, context.isNumericMode.value))
+    })
+
+    function handleInput(event: InputEvent) {
+      if (isComposing.value || event.isComposing) return
+      const target = event.target as HTMLInputElement
+      apply(target, resolvePinInput(event.data, target.value, context.isNumericMode.value))
+    }
+
+    function updatePlaceholder() {
+      void nextTick(() => {
+        const target = currentElement.value as HTMLInputElement | undefined
+        if (!target) return
+        pinPlaceholder(target, getActiveElement(), context.placeholder.value)
+      })
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+      if (isComposing.value || event.isComposing) return
+      navigatePin(
+        event,
+        getActiveElement() as HTMLElement | null,
+        inputElements.value,
+        context.dir.value,
+      )
+    }
+
+    function handleBackspace(event: KeyboardEvent) {
+      event.preventDefault()
+      const target = event.target as HTMLInputElement
+      if (target.value) updateModelValueAt(props.index, '')
+      else {
+        const previous = inputElements.value[props.index - 1]
+        if (previous) {
+          previous.focus()
+          updateModelValueAt(props.index - 1, '')
+        }
+      }
+    }
+
+    function handleDelete(event: KeyboardEvent) {
+      if (event.key === 'Delete') {
+        event.preventDefault()
+        updateModelValueAt(props.index, '')
+      }
+    }
+
+    function handleFocus(event: FocusEvent) {
+      if (context.otp.value) {
+        const redirect = pinFocusRedirect(
+          context.currentModelValue.value,
+          inputElements.value.length,
+          props.index,
+        )
+        if (redirect !== -1) {
+          inputElements.value[redirect]!.focus()
+          return
+        }
+      }
+      ;(event.target as HTMLInputElement).setSelectionRange(1, 1)
+      updatePlaceholder()
+    }
+
+    function handlePaste(event: ClipboardEvent) {
+      event.preventDefault()
+      const clipboardData = event.clipboardData
+      if (!clipboardData) return
+      handleMultipleCharacter(
+        resolvePinPaste(clipboardData.getData('text'), context.isNumericMode.value),
+      )
+    }
+
+    watch(currentValue, updatePlaceholder)
+    onMounted(() => {
+      context.onInputElementChange(currentElement.value as HTMLInputElement)
+    })
+    onUnmounted(() => {
+      context.inputElements?.value.delete(currentElement.value as HTMLInputElement)
+    })
+
+    const onInput = (event: Event) => handleInput(event as InputEvent)
+    const onKeydown = [
+      withKeys(handleKeydown as (event: Event) => void, [
+        'left',
+        'right',
+        'up',
+        'down',
+        'home',
+        'end',
+      ]),
+      withKeys(handleBackspace as (event: Event) => void, ['backspace']),
+      withKeys(handleDelete as (event: Event) => void, ['delete']),
+    ]
+
+    return () =>
+      h(
+        Primitive,
+        {
+          ref: primitiveElement,
+          autocapitalize: 'none',
+          as: props.as,
+          'as-child': props.asChild,
+          autocomplete: isOtpMode.value ? 'one-time-code' : 'false',
+          type: isPasswordMode.value ? 'password' : 'text',
+          inputmode: context.isNumericMode.value ? 'numeric' : 'text',
+          pattern: context.isNumericMode.value ? '[0-9]*' : undefined,
+          placeholder: context.placeholder.value,
+          value: currentValue.value,
+          disabled: disabled.value,
+          'data-disabled': disabled.value ? '' : undefined,
+          'data-complete': context.isCompleted.value ? '' : undefined,
+          'aria-label': pinInputLabel(props.index, inputElements.value.length),
+          onInput,
+          onKeydown,
+          onFocus: handleFocus,
+          onBlur: updatePlaceholder,
+          onPaste: handlePaste,
+          onCompositionstart: handleCompositionStart,
+          onCompositionend: handleCompositionEnd,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/pin-input/PinInputRoot.ts

@@ -0,0 +1,136 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  ref,
+  renderSlot,
+  toRefs,
+  watch,
+  withCtx,
+  type PropType,
+} from 'vue'
+import {
+  isPinInputComplete,
+  pinInputValues,
+  type PinInputValue,
+} from '../../../../shared/src/primitives/pin-input'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useVModel } from '../utils/useVModel'
+import { VisuallyHiddenInput } from '../visually-hidden'
+import { providePinInputRootContext, type PinInputType } from './context'
+
+export interface PinInputRootProps {
+  modelValue?: PinInputValue | null
+  defaultValue?: PinInputValue
+  placeholder?: string
+  mask?: boolean
+  otp?: boolean
+  type?: PinInputType
+  dir?: Direction
+  disabled?: boolean
+  id?: string
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+  name?: string
+  required?: boolean
+}
+
+export type PinInputRootEmits = {
+  'update:modelValue': [value: PinInputValue]
+  complete: [value: PinInputValue]
+}
+
+export const PinInputRoot = defineComponent({
+  name: 'PinInputRoot',
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: null as unknown as PropType<PinInputValue | null>, required: false },
+    defaultValue: { type: null as unknown as PropType<PinInputValue>, required: false },
+    placeholder: { type: String, required: false, default: '' },
+    mask: { type: Boolean, required: false },
+    otp: { type: Boolean, required: false },
+    type: { type: null as unknown as PropType<PinInputType>, required: false, default: 'text' },
+    dir: { type: String as PropType<Direction>, required: false },
+    disabled: { type: Boolean, required: false },
+    id: { type: String, 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', 'complete'],
+  setup(props, { emit, attrs, slots }) {
+    const { mask, otp, placeholder, type, disabled, dir: propDir } = toRefs(props)
+    const { forwardRef } = useForwardExpose()
+    const dir = useDirection(propDir)
+    const modelValue = useVModel(
+      props,
+      'modelValue',
+      (_, value) => emit('update:modelValue', value as PinInputValue),
+      { defaultValue: props.defaultValue ?? [], passive: true },
+    )
+    const currentModelValue = computed(() => pinInputValues(modelValue.value))
+    const inputElements = ref(new Set<HTMLInputElement>())
+    function onInputElementChange(element: HTMLInputElement) {
+      inputElements.value.add(element)
+    }
+    const isNumericMode = computed(() => props.type === 'number')
+    const isCompleted = computed(() =>
+      isPinInputComplete(currentModelValue.value, inputElements.value.size, isNumericMode.value),
+    )
+    watch(
+      modelValue,
+      () => {
+        if (isCompleted.value) emit('complete', modelValue.value as PinInputValue)
+      },
+      { deep: true },
+    )
+
+    providePinInputRootContext({
+      modelValue: modelValue as never,
+      currentModelValue,
+      mask,
+      otp,
+      placeholder,
+      type,
+      dir,
+      disabled,
+      isCompleted,
+      inputElements: inputElements as never,
+      onInputElementChange,
+      isNumericMode,
+    })
+
+    const onFocus = () => Array.from(inputElements.value)?.[0]?.focus()
+
+    return () =>
+      h(
+        Primitive,
+        mergeProps(attrs, {
+          ref: forwardRef,
+          dir: dir.value,
+          'data-complete': isCompleted.value ? '' : undefined,
+          'data-disabled': disabled.value ? '' : undefined,
+        }),
+        {
+          default: withCtx(() => [
+            renderSlot(slots, 'default', { modelValue: modelValue.value }),
+            h(VisuallyHiddenInput, {
+              id: props.id,
+              as: 'input',
+              feature: 'focusable',
+              tabindex: '-1',
+              value: currentModelValue.value.join(''),
+              name: props.name ?? '',
+              disabled: disabled.value,
+              required: props.required,
+              onFocus,
+            }),
+          ]),
+        },
+      )
+  },
+})