@hina-ui/vue 1.7.6 → 1.7.8

package/src/primitives/radio-group/Radio.ts

@@ -0,0 +1,110 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  Fragment,
+  h,
+  mergeProps,
+  renderSlot,
+  toRefs,
+  withCtx,
+  withModifiers,
+  type PropType,
+} from 'vue'
+import { getLabelText } from '../../../../shared/src/primitives/label'
+import { dispatchRadioSelect } from '../../../../shared/src/primitives/radio-group'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import type { AcceptableValue } from '../utils/types'
+import { useFormControl } from '../utils/useFormControl'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardScopeId } from '../utils/useForwardScopeId'
+import { useVModel } from '../utils/useVModel'
+import { VisuallyHiddenInput } from '../visually-hidden'
+
+export const Radio = defineComponent({
+  name: 'Radio',
+  inheritAttrs: false,
+  props: {
+    id: { type: String, required: false },
+    value: { type: null as unknown as PropType<AcceptableValue>, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    checked: { type: Boolean, required: false, default: undefined },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'button',
+    },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+  },
+  emits: ['update:checked', 'select'],
+  setup(props, { emit, attrs, slots }) {
+    const checked = useVModel(props, 'checked', (_, value) => emit('update:checked', value), {
+      passive: props.checked === undefined,
+    })
+    const { value } = toRefs(props)
+    const { forwardRef, currentElement: triggerElement } = useForwardExpose()
+    const isFormControl = useFormControl(triggerElement)
+    const scopeIdAttrs = useForwardScopeId()
+    const ariaLabel = computed(() => getLabelText(props.id, triggerElement.value))
+
+    function handleClick(event: MouseEvent) {
+      if (props.disabled) return
+      dispatchRadioSelect(event, props.value, selectEvent => {
+        emit('select', selectEvent)
+        if (selectEvent?.defaultPrevented) return
+        checked.value = true
+        if (isFormControl.value) selectEvent.stopPropagation()
+      })
+    }
+
+    return () =>
+      h(Fragment, null, [
+        h(
+          Primitive,
+          mergeProps(
+            {
+              id: props.id,
+              ref: forwardRef,
+              role: 'radio',
+              type: props.as === 'button' ? 'button' : undefined,
+              as: props.as,
+              'aria-checked': checked.value ?? false,
+              'aria-label': ariaLabel.value,
+              'as-child': props.asChild,
+              disabled: props.disabled ? '' : undefined,
+              'data-state': checked.value ? 'checked' : 'unchecked',
+              'data-disabled': props.disabled ? '' : undefined,
+              value: value.value,
+              required: props.required,
+              name: props.name,
+            },
+            { ...scopeIdAttrs, ...attrs },
+            { onClick: withModifiers(handleClick as (event: Event) => void, ['stop']) },
+          ),
+          {
+            default: withCtx(() => [renderSlot(slots, 'default', { checked: checked.value })]),
+          },
+        ),
+        isFormControl.value && props.name
+          ? h(
+              VisuallyHiddenInput,
+              mergeProps(
+                {
+                  key: 0,
+                  type: 'radio',
+                  tabindex: '-1',
+                  value: value.value,
+                  checked: !!checked.value,
+                  name: props.name,
+                  disabled: props.disabled,
+                  required: props.required,
+                },
+                scopeIdAttrs,
+              ) as { name: string; value: unknown },
+            )
+          : createCommentVNode('v-if', true),
+      ])
+  },
+})

package/src/primitives/radio-group/RadioGroupIndicator.ts

@@ -0,0 +1,54 @@
+import { defineComponent, h, mergeProps, renderSlot, withCtx, type PropType } from 'vue'
+import { getCheckedState } from '../../../../shared/src/primitives/checkbox'
+import { Presence } from '../presence'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectRadioGroupItemContext } from './context'
+
+export interface RadioGroupIndicatorProps {
+  forceMount?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const RadioGroupIndicator = defineComponent({
+  name: 'RadioGroupIndicator',
+  inheritAttrs: false,
+  props: {
+    forceMount: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'span',
+    },
+  },
+  setup(props, { attrs, slots }) {
+    const { forwardRef } = useForwardExpose()
+    const itemContext = injectRadioGroupItemContext()
+
+    return () =>
+      h(
+        Presence,
+        { present: props.forceMount || itemContext.checked.value },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              mergeProps(
+                {
+                  ref: forwardRef,
+                  'data-state': getCheckedState(itemContext.checked.value),
+                  'data-disabled': itemContext.disabled.value ? '' : undefined,
+                  'as-child': props.asChild,
+                  as: props.as,
+                },
+                attrs,
+              ),
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/radio-group/RadioGroupItem.ts

@@ -0,0 +1,116 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  onScopeDispose,
+  renderSlot,
+  withCtx,
+  withKeys,
+  withModifiers,
+  type PropType,
+} from 'vue'
+import { trackArrowKeys } from '../../../../shared/src/primitives/radio-group'
+import { isEqual } from '../../../../shared/src/primitives/value'
+import type { PrimitiveProps } from '../primitive'
+import { RovingFocusItem } from '../roving-focus'
+import type { AcceptableValue } from '../utils/types'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardScopeId } from '../utils/useForwardScopeId'
+import { injectRadioGroupRootContext, provideRadioGroupItemContext } from './context'
+import { Radio } from './Radio'
+
+export interface RadioGroupItemProps {
+  id?: string
+  value?: AcceptableValue
+  disabled?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+  name?: string
+  required?: boolean
+}
+
+export const RadioGroupItem = defineComponent({
+  name: 'RadioGroupItem',
+  inheritAttrs: false,
+  props: {
+    id: { type: String, required: false },
+    value: { type: null as unknown as PropType<AcceptableValue>, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'button',
+    },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+  },
+  emits: ['select'],
+  setup(props, { emit, attrs, slots }) {
+    const { forwardRef, currentElement } = useForwardExpose()
+    const rootContext = injectRadioGroupRootContext()
+    const disabled = computed(() => rootContext.disabled.value || props.disabled)
+    const required = computed(() => rootContext.required.value || props.required)
+    const checked = computed(() => isEqual(rootContext.modelValue?.value, props.value))
+    provideRadioGroupItemContext({ disabled, checked })
+
+    const arrowKeys = typeof window === 'undefined' ? undefined : trackArrowKeys(window)
+    onScopeDispose(() => arrowKeys?.dispose())
+
+    function handleFocus() {
+      setTimeout(() => {
+        if (arrowKeys?.pressed) currentElement.value?.click()
+      }, 0)
+    }
+
+    const scopeIdAttrs = useForwardScopeId()
+    const onUpdateChecked = () => rootContext.changeModelValue(props.value)
+    const onSelect = (event: Event) => emit('select', event)
+    const onKeydown = withKeys(
+      withModifiers(() => {}, ['prevent']),
+      ['enter'],
+    )
+
+    return () =>
+      h(
+        RovingFocusItem,
+        {
+          checked: checked.value,
+          disabled: disabled.value,
+          'as-child': '',
+          focusable: !disabled.value,
+          active: checked.value,
+        },
+        {
+          default: withCtx(() => [
+            h(
+              Radio,
+              mergeProps(
+                { ...scopeIdAttrs, ...attrs, ...props },
+                {
+                  ref: forwardRef,
+                  checked: checked.value,
+                  required: required.value,
+                  disabled: disabled.value,
+                  'onUpdate:checked': onUpdateChecked,
+                  onSelect,
+                  onKeydown,
+                  onFocus: handleFocus,
+                },
+              ),
+              {
+                default: withCtx(() => [
+                  renderSlot(slots, 'default', {
+                    checked: checked.value,
+                    required: required.value,
+                    disabled: disabled.value,
+                  }),
+                ]),
+              },
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/radio-group/RadioGroupRoot.ts

@@ -0,0 +1,108 @@
+import {
+  createCommentVNode,
+  defineComponent,
+  h,
+  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 type { AcceptableValue } from '../utils/types'
+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 { provideRadioGroupRootContext } from './context'
+
+export interface RadioGroupRootProps {
+  modelValue?: AcceptableValue
+  defaultValue?: AcceptableValue
+  disabled?: boolean
+  orientation?: Orientation
+  dir?: Direction
+  loop?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+  name?: string
+  required?: boolean
+}
+
+export const RadioGroupRoot = defineComponent({
+  name: 'RadioGroupRoot',
+  props: {
+    modelValue: { type: null as unknown as PropType<AcceptableValue>, required: false },
+    defaultValue: { type: null as unknown as PropType<AcceptableValue>, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    orientation: { type: String as PropType<Orientation>, required: false, default: undefined },
+    dir: { type: String as PropType<Direction>, required: false },
+    loop: { type: Boolean, required: false, default: true },
+    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, default: false },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, slots }) {
+    const { forwardRef, currentElement } = useForwardExpose()
+    const modelValue = useVModel(props, 'modelValue', emit, {
+      defaultValue: props.defaultValue,
+      passive: props.modelValue === undefined,
+    })
+    const { disabled, loop, orientation, name, required, dir: propDir } = toRefs(props)
+    const dir = useDirection(propDir)
+    const isFormControl = useFormControl(currentElement)
+
+    provideRadioGroupRootContext({
+      modelValue,
+      changeModelValue: value => {
+        modelValue.value = value as AcceptableValue
+      },
+      disabled,
+      loop,
+      orientation,
+      name: name?.value,
+      required,
+    })
+
+    return () =>
+      h(
+        RovingFocusGroup,
+        { 'as-child': '', orientation: orientation.value, dir: dir.value, loop: loop.value },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              {
+                ref: forwardRef,
+                role: 'radiogroup',
+                'data-disabled': disabled.value ? '' : undefined,
+                'as-child': props.asChild,
+                as: props.as,
+                'aria-orientation': orientation.value,
+                'aria-required': required.value,
+                dir: dir.value,
+              },
+              {
+                default: withCtx(() => [
+                  renderSlot(slots, 'default', { modelValue: modelValue.value }),
+                  isFormControl.value && name.value
+                    ? h(VisuallyHiddenInput, {
+                        key: 0,
+                        required: required.value,
+                        disabled: disabled.value,
+                        value: modelValue.value,
+                        name: name.value,
+                      })
+                    : createCommentVNode('v-if', true),
+                ]),
+              },
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/radio-group/context.ts

@@ -0,0 +1,25 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { Orientation } from '../../../../shared/src/primitives/roving-focus'
+import type { AcceptableValue } from '../utils/types'
+import { createContext } from '../utils/createContext'
+
+export interface RadioGroupRootContext {
+  modelValue?: Readonly<Ref<AcceptableValue | undefined>>
+  changeModelValue: (value?: AcceptableValue) => void
+  disabled: Ref<boolean>
+  loop: Ref<boolean>
+  orientation: Ref<Orientation | undefined>
+  name?: string
+  required: Ref<boolean>
+}
+
+export const [injectRadioGroupRootContext, provideRadioGroupRootContext] =
+  createContext<RadioGroupRootContext>('RadioGroupRoot')
+
+export interface RadioGroupItemContext {
+  disabled: ComputedRef<boolean>
+  checked: ComputedRef<boolean>
+}
+
+export const [injectRadioGroupItemContext, provideRadioGroupItemContext] =
+  createContext<RadioGroupItemContext>('RadioGroupItem')

package/src/primitives/radio-group/index.ts

@@ -0,0 +1,9 @@
+export {
+  injectRadioGroupItemContext,
+  injectRadioGroupRootContext,
+  type RadioGroupItemContext,
+  type RadioGroupRootContext,
+} from './context'
+export { RadioGroupItem, type RadioGroupItemProps } from './RadioGroupItem'
+export { RadioGroupRoot, type RadioGroupRootProps } from './RadioGroupRoot'
+export { RadioGroupIndicator, type RadioGroupIndicatorProps } from './RadioGroupIndicator'

package/src/primitives/rating/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/rating/RatingItem.ts

@@ -0,0 +1,35 @@
+import { computed, defineComponent, h, renderSlot, withCtx, type PropType } from 'vue'
+import { ratingSteps } from '../../../../shared/src/primitives/rating'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { injectRatingRootContext, provideRatingItemContext } from './context'
+
+export interface RatingItemProps {
+  item: number
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const RatingItem = defineComponent({
+  name: 'RatingItem',
+  props: {
+    item: { type: Number, required: true },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'label',
+    },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectRatingRootContext()
+    const steps = computed(() => ratingSteps(props.item, rootContext.step.value))
+    provideRatingItemContext({ steps })
+
+    return () =>
+      h(
+        Primitive,
+        { as: props.as, 'as-child': props.asChild },
+        { default: withCtx(() => [renderSlot(slots, 'default', { steps: steps.value })]) },
+      )
+  },
+})

package/src/primitives/rating/RatingItemIndicator.ts

@@ -0,0 +1,87 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  normalizeStyle,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { useActiveElement } from '@vueuse/core'
+import {
+  isRatingStepActive,
+  isRatingStepVisible,
+  ratingStepWidth,
+  ratingStepZIndex,
+} from '../../../../shared/src/primitives/rating'
+import type { PrimitiveProps } from '../primitive'
+import { RadioGroupIndicator, RadioGroupItem } from '../radio-group'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectRatingItemContext, injectRatingRootContext } from './context'
+
+export interface RatingItemIndicatorProps {
+  step: number
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const RatingItemIndicator = defineComponent({
+  name: 'RatingItemIndicator',
+  props: {
+    step: { type: Number, required: true },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectRatingRootContext()
+    const { currentElement, forwardRef } = useForwardExpose()
+    const activeElement = useActiveElement()
+    const itemContext = injectRatingItemContext()
+    const isActive = computed(() =>
+      isRatingStepActive(props.step, rootContext.hoveredRating.value, rootContext.modelValue.value),
+    )
+    const isVisible = computed(() =>
+      isRatingStepVisible(
+        activeElement.value === currentElement.value,
+        rootContext.step.value,
+        props.step,
+        rootContext.hoveredRating.value,
+        rootContext.modelValue.value,
+      ),
+    )
+    const onSelect = () => rootContext.changeModelValue(props.step)
+    const onMouseenter = () => rootContext.changeHoveredRating(props.step)
+
+    return () =>
+      h(
+        RadioGroupItem,
+        {
+          ref: forwardRef,
+          as: props.as,
+          'as-child': props.asChild,
+          style: normalizeStyle({
+            '--reka-rating-item-step-width': ratingStepWidth(props.step),
+            '--reka-rating-item-step-opacity': isVisible.value ? 1 : 0,
+            '--reka-rating-item-step-z-index': ratingStepZIndex(
+              itemContext.steps.value,
+              props.step,
+            ),
+          }),
+          value: props.step,
+          'data-state': isActive.value ? 'active' : undefined,
+          disabled: rootContext.disabled.value,
+          onSelect,
+          onMouseenter,
+        },
+        {
+          default: withCtx(() => [
+            h(
+              RadioGroupIndicator,
+              { forceMount: true, 'as-child': '' },
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})