@hina-ui/vue 1.7.6 → 1.7.8

package/src/locale/index.ts

@@ -30,5 +30,5 @@ export function useUiLocale(): ComputedRef<UiMessages> {
   return inject(UI_LOCALE_KEY, fallbackLocale)
 }
 
-export { zhCN, enUS } from '../../../shared/src/locale'
+export { zhCN, enUS, jaJP } from '../../../shared/src/locale'
 export type { UiMessages, PartialUiMessages } from '../../../shared/src/locale'

package/src/primitives/accordion/AccordionContent.ts

@@ -0,0 +1,47 @@
+import { defineComponent, h, renderSlot, withCtx, type PropType } from 'vue'
+import { CollapsibleContent } from '../collapsible'
+import type { PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectAccordionItemContext, injectAccordionRootContext } from './context'
+
+export interface AccordionContentProps {
+  forceMount?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const AccordionContent = defineComponent({
+  name: 'AccordionContent',
+  props: {
+    forceMount: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectAccordionRootContext()
+    const itemContext = injectAccordionItemContext()
+    useForwardExpose()
+    const onContentFound = () => rootContext.changeModelValue(itemContext.value.value)
+
+    return () =>
+      h(
+        CollapsibleContent,
+        {
+          role: 'region',
+          'as-child': props.asChild,
+          as: props.as,
+          'force-mount': props.forceMount,
+          'aria-labelledby': itemContext.triggerId,
+          'data-state': itemContext.dataState.value,
+          'data-disabled': itemContext.dataDisabled.value,
+          'data-orientation': rootContext.orientation,
+          style: {
+            '--reka-accordion-content-width': 'var(--reka-collapsible-content-width)',
+            '--reka-accordion-content-height': 'var(--reka-collapsible-content-height)',
+          },
+          onContentFound,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/accordion/AccordionHeader.ts

@@ -0,0 +1,35 @@
+import { defineComponent, h, renderSlot, withCtx, type PropType } from 'vue'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectAccordionItemContext, injectAccordionRootContext } from './context'
+
+export interface AccordionHeaderProps {
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const AccordionHeader = defineComponent({
+  name: 'AccordionHeader',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false, default: 'h3' },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectAccordionRootContext()
+    const itemContext = injectAccordionItemContext()
+    useForwardExpose()
+
+    return () =>
+      h(
+        Primitive,
+        {
+          as: props.as,
+          'as-child': props.asChild,
+          'data-orientation': rootContext.orientation,
+          'data-state': itemContext.dataState.value,
+          'data-disabled': itemContext.dataDisabled.value,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/accordion/AccordionItem.ts

@@ -0,0 +1,83 @@
+import { computed, defineComponent, h, renderSlot, withCtx, withKeys, type PropType } from 'vue'
+import { isAccordionItemOpen, navigateAccordion } from '../../../../shared/src/primitives/accordion'
+import { COLLECTION_ITEM } from '../../../../shared/src/primitives/collection'
+import { openState } from '../../../../shared/src/primitives/collapsible'
+import { CollapsibleRoot } from '../collapsible'
+import type { PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectAccordionRootContext, provideAccordionItemContext } from './context'
+
+export interface AccordionItemProps {
+  disabled?: boolean
+  value: string
+  unmountOnHide?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const AccordionItem = defineComponent({
+  name: 'AccordionItem',
+  props: {
+    disabled: { type: Boolean, required: false },
+    value: { type: String, required: true },
+    unmountOnHide: { type: Boolean, required: false, default: undefined },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { expose, slots }) {
+    const rootContext = injectAccordionRootContext()
+    const open = computed(() =>
+      isAccordionItemOpen(rootContext.isSingle.value, rootContext.modelValue.value, props.value),
+    )
+    const disabled = computed(() => rootContext.disabled.value || props.disabled)
+    const dataDisabled = computed(() => (disabled.value ? ('' as const) : undefined))
+    const dataState = computed(() => openState(open.value))
+    expose({ open, dataDisabled })
+    const { currentRef, currentElement } = useForwardExpose()
+
+    provideAccordionItemContext({
+      open,
+      dataState,
+      disabled,
+      dataDisabled,
+      triggerId: '',
+      currentRef,
+      currentElement,
+      value: computed(() => props.value),
+    })
+
+    function handleArrowKey(event: KeyboardEvent) {
+      navigateAccordion(event, rootContext.parentElement.value, {
+        orientation: rootContext.orientation,
+        dir: rootContext.direction.value,
+        attributeName: `[${COLLECTION_ITEM}]`,
+      })
+    }
+
+    const onKeydown = withKeys(handleArrowKey as (event: Event) => void, [
+      'up',
+      'down',
+      'left',
+      'right',
+      'home',
+      'end',
+    ])
+
+    return () =>
+      h(
+        CollapsibleRoot,
+        {
+          'data-orientation': rootContext.orientation,
+          'data-disabled': dataDisabled.value,
+          'data-state': dataState.value,
+          disabled: disabled.value,
+          open: open.value,
+          as: props.as,
+          'as-child': props.asChild,
+          'unmount-on-hide': props.unmountOnHide ?? rootContext.unmountOnHide.value,
+          onKeydown,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default', { open: open.value })]) },
+      )
+  },
+})

package/src/primitives/accordion/AccordionRoot.ts

@@ -0,0 +1,75 @@
+import { defineComponent, h, renderSlot, toRefs, withCtx, type PropType } from 'vue'
+import type { SingleOrMultipleType } from '../../../../shared/src/primitives/value'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useSingleOrMultipleValue } from '../utils/useSingleOrMultipleValue'
+import { provideAccordionRootContext, type AccordionOrientation } from './context'
+
+export interface AccordionRootProps {
+  collapsible?: boolean
+  disabled?: boolean
+  dir?: Direction
+  orientation?: AccordionOrientation
+  unmountOnHide?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+  type?: SingleOrMultipleType
+  modelValue?: string | string[]
+  defaultValue?: string | string[]
+}
+
+export type AccordionRootEmits = {
+  'update:modelValue': [value: string | string[] | undefined]
+}
+
+export const AccordionRoot = defineComponent({
+  name: 'AccordionRoot',
+  props: {
+    collapsible: { type: Boolean, required: false, default: false },
+    disabled: { type: Boolean, required: false, default: false },
+    dir: { type: String as PropType<Direction>, required: false },
+    orientation: {
+      type: String as PropType<AccordionOrientation>,
+      required: false,
+      default: 'vertical',
+    },
+    unmountOnHide: { type: Boolean, required: false, default: true },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+    type: { type: String as PropType<SingleOrMultipleType>, required: false },
+    modelValue: { type: null as unknown as PropType<string | string[]>, required: false },
+    defaultValue: { type: null as unknown as PropType<string | string[]>, required: false },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, slots }) {
+    const { dir, disabled, unmountOnHide } = toRefs(props)
+    const direction = useDirection(dir)
+    const { modelValue, changeModelValue, isSingle } = useSingleOrMultipleValue<
+      string,
+      typeof props
+    >(props, emit as never)
+    const { forwardRef, currentElement: parentElement } = useForwardExpose()
+
+    provideAccordionRootContext({
+      disabled,
+      direction,
+      orientation: props.orientation,
+      parentElement,
+      isSingle,
+      collapsible: props.collapsible,
+      modelValue: modelValue as never,
+      changeModelValue,
+      unmountOnHide,
+    })
+
+    return () =>
+      h(
+        Primitive,
+        { ref: forwardRef, 'as-child': props.asChild, as: props.as },
+        {
+          default: withCtx(() => [renderSlot(slots, 'default', { modelValue: modelValue.value })]),
+        },
+      )
+  },
+})

package/src/primitives/accordion/AccordionTrigger.ts

@@ -0,0 +1,55 @@
+import { defineComponent, h, renderSlot, withCtx, type PropType } from 'vue'
+import { isAccordionTriggerLocked } from '../../../../shared/src/primitives/accordion'
+import { COLLECTION_ITEM } from '../../../../shared/src/primitives/collection'
+import { CollapsibleTrigger } from '../collapsible'
+import type { PrimitiveProps } from '../primitive'
+import { useId } from '../utils/useId'
+import { injectAccordionItemContext, injectAccordionRootContext } from './context'
+
+export interface AccordionTriggerProps {
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const AccordionTrigger = defineComponent({
+  name: 'AccordionTrigger',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectAccordionRootContext()
+    const itemContext = injectAccordionItemContext()
+    itemContext.triggerId ||= useId(undefined, 'reka-accordion-trigger')
+
+    function changeItem() {
+      const locked = isAccordionTriggerLocked(
+        rootContext.isSingle.value,
+        itemContext.open.value,
+        rootContext.collapsible,
+      )
+      if (itemContext.disabled.value || locked) return
+      rootContext.changeModelValue(itemContext.value.value)
+    }
+
+    return () =>
+      h(
+        CollapsibleTrigger,
+        {
+          id: itemContext.triggerId,
+          ref: itemContext.currentRef as never,
+          [COLLECTION_ITEM]: '',
+          as: props.as,
+          'as-child': props.asChild,
+          'aria-disabled': itemContext.disabled.value || undefined,
+          'aria-expanded': itemContext.open.value || false,
+          'data-disabled': itemContext.dataDisabled.value,
+          'data-orientation': rootContext.orientation,
+          'data-state': itemContext.dataState.value,
+          disabled: itemContext.disabled.value,
+          onClick: changeItem,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/accordion/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/accordion/context.ts

@@ -0,0 +1,34 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from '../utils/createContext'
+import type { Direction } from '../utils/useDirection'
+
+export type AccordionOrientation = 'vertical' | 'horizontal'
+
+export interface AccordionRootContext {
+  disabled: Ref<boolean>
+  direction: Ref<Direction>
+  orientation: AccordionOrientation
+  parentElement: Ref<HTMLElement | undefined>
+  isSingle: ComputedRef<boolean>
+  collapsible: boolean
+  modelValue: Ref<string | string[] | undefined>
+  changeModelValue: (value: string) => void
+  unmountOnHide: Ref<boolean>
+}
+
+export const [injectAccordionRootContext, provideAccordionRootContext] =
+  createContext<AccordionRootContext>('AccordionRoot')
+
+export interface AccordionItemContext {
+  open: ComputedRef<boolean>
+  dataState: ComputedRef<'open' | 'closed'>
+  disabled: ComputedRef<boolean>
+  dataDisabled: ComputedRef<'' | undefined>
+  triggerId: string
+  currentRef: Ref<unknown>
+  currentElement: ComputedRef<HTMLElement | undefined>
+  value: ComputedRef<string>
+}
+
+export const [injectAccordionItemContext, provideAccordionItemContext] =
+  createContext<AccordionItemContext>('AccordionItem')

package/src/primitives/accordion/index.ts

@@ -0,0 +1,11 @@
+export {
+  injectAccordionItemContext,
+  injectAccordionRootContext,
+  type AccordionItemContext,
+  type AccordionRootContext,
+} from './context'
+export { AccordionContent, type AccordionContentProps } from './AccordionContent'
+export { AccordionHeader, type AccordionHeaderProps } from './AccordionHeader'
+export { AccordionItem, type AccordionItemProps } from './AccordionItem'
+export { AccordionRoot, type AccordionRootEmits, type AccordionRootProps } from './AccordionRoot'
+export { AccordionTrigger, type AccordionTriggerProps } from './AccordionTrigger'

package/src/primitives/aspect-ratio/AspectRatio.ts

@@ -0,0 +1,47 @@
+import { computed, defineComponent, h, mergeProps, renderSlot, withCtx, type PropType } from 'vue'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+
+export interface AspectRatioProps {
+  ratio?: number
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const AspectRatio = defineComponent({
+  name: 'AspectRatio',
+  inheritAttrs: false,
+  props: {
+    ratio: { type: Number, required: false, default: 1 },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { attrs, slots }) {
+    const { forwardRef } = useForwardExpose()
+    const aspect = computed(() => (1 / props.ratio) * 100)
+
+    return () =>
+      h(
+        'div',
+        {
+          style: `position: relative; width: 100%; padding-bottom: ${aspect.value}%`,
+          'data-reka-aspect-ratio-wrapper': '',
+        },
+        [
+          h(
+            Primitive,
+            mergeProps(
+              {
+                ref: forwardRef,
+                'as-child': props.asChild,
+                as: props.as,
+                style: { position: 'absolute', inset: '0px' },
+              },
+              attrs,
+            ),
+            { default: withCtx(() => [renderSlot(slots, 'default', { aspect: aspect.value })]) },
+          ),
+        ],
+      )
+  },
+})

package/src/primitives/aspect-ratio/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/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { AspectRatio, type AspectRatioProps } from './AspectRatio'

package/src/primitives/checkbox/CheckboxGroupRoot.ts

@@ -0,0 +1,93 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  h,
+  mergeProps,
+  renderSlot,
+  toRefs,
+  withCtx,
+  type PropType,
+} from 'vue'
+import type { Orientation } from '../../../../shared/src/primitives/roving-focus'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { RovingFocusGroup } from '../roving-focus'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useFormControl } from '../utils/useFormControl'
+import { usePrimitiveElement } from '../utils/usePrimitiveElement'
+import { useVModel } from '../utils/useVModel'
+import { VisuallyHiddenInput } from '../visually-hidden'
+import { provideCheckboxGroupRootContext } from './context'
+
+export interface CheckboxGroupRootProps {
+  defaultValue?: unknown[]
+  modelValue?: unknown[]
+  rovingFocus?: boolean
+  disabled?: boolean
+  as?: PrimitiveProps['as']
+  asChild?: boolean
+  dir?: Direction
+  orientation?: Orientation
+  loop?: boolean
+  name?: string
+  required?: boolean
+}
+
+export const CheckboxGroupRoot = defineComponent({
+  name: 'CheckboxGroupRoot',
+  props: {
+    defaultValue: { type: Array as PropType<unknown[]>, required: false },
+    modelValue: { type: Array as PropType<unknown[]>, required: false },
+    rovingFocus: { type: Boolean, required: false, default: true },
+    disabled: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+    asChild: { type: Boolean, required: false },
+    dir: { type: String as PropType<Direction>, required: false },
+    orientation: { type: String as PropType<Orientation>, required: false },
+    loop: { type: Boolean, required: false },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, slots }) {
+    const { disabled, rovingFocus, dir: propDir } = toRefs(props)
+    const dir = useDirection(propDir)
+    const { primitiveElement, currentElement } = usePrimitiveElement()
+    const isFormControl = useFormControl(currentElement)
+    const modelValue = useVModel(props, 'modelValue', emit, {
+      defaultValue: props.defaultValue ?? [],
+      passive: props.modelValue === undefined,
+    })
+    const rovingFocusProps = computed(() =>
+      rovingFocus.value ? { loop: props.loop, dir: dir.value, orientation: props.orientation } : {},
+    )
+
+    provideCheckboxGroupRootContext({
+      modelValue: modelValue as never,
+      rovingFocus,
+      disabled,
+    })
+
+    return () =>
+      h(
+        rovingFocus.value ? RovingFocusGroup : Primitive,
+        mergeProps(
+          { ref: primitiveElement, as: props.as, 'as-child': props.asChild },
+          rovingFocusProps.value,
+        ),
+        {
+          default: withCtx(() => [
+            renderSlot(slots, 'default'),
+            isFormControl.value && props.name
+              ? h(VisuallyHiddenInput, {
+                  key: 0,
+                  name: props.name,
+                  value: modelValue.value,
+                  required: props.required,
+                })
+              : createCommentVNode('v-if', true),
+          ]),
+        },
+      )
+  },
+})