@hina-ui/vue 1.7.6 → 1.7.8

package/src/primitives/tabs/TabsContent.ts

@@ -0,0 +1,94 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  h,
+  normalizeStyle,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { isCollapsibleContentRendered } from '../../../../shared/src/primitives/collapsible'
+import {
+  makeContentId,
+  makeTriggerId,
+  tabsState,
+  type TabsValue,
+} from '../../../../shared/src/primitives/tabs'
+import { Presence } from '../presence'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectTabsRootContext } from './context'
+
+export interface TabsContentProps {
+  value: TabsValue
+  forceMount?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const TabsContent = defineComponent({
+  name: 'TabsContent',
+  props: {
+    value: { type: [String, Number] as PropType<TabsValue>, required: true },
+    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 { forwardRef } = useForwardExpose()
+    const rootContext = injectTabsRootContext()
+    const triggerId = computed(() => makeTriggerId(rootContext.baseId, props.value))
+    const contentId = computed(() => makeContentId(rootContext.baseId, props.value))
+    const isSelected = computed(() => props.value === rootContext.modelValue.value)
+    const isMountAnimationPrevented = ref(isSelected.value)
+
+    onMounted(() => {
+      rootContext.registerContent(props.value)
+      requestAnimationFrame(() => {
+        isMountAnimationPrevented.value = false
+      })
+    })
+    onBeforeUnmount(() => {
+      rootContext.unregisterContent(props.value)
+    })
+
+    return () =>
+      h(
+        Presence,
+        { present: props.forceMount || isSelected.value, forceMount: true },
+        {
+          default: withCtx(({ present }: { present: boolean }) => [
+            h(
+              Primitive,
+              {
+                id: contentId.value,
+                ref: forwardRef,
+                'as-child': props.asChild,
+                as: props.as,
+                role: 'tabpanel',
+                'data-state': tabsState(isSelected.value),
+                'data-orientation': rootContext.orientation.value,
+                'aria-labelledby': triggerId.value,
+                hidden: !present,
+                tabindex: '0',
+                style: normalizeStyle({
+                  animationDuration: isMountAnimationPrevented.value ? '0s' : undefined,
+                }),
+              },
+              {
+                default: withCtx(() => [
+                  isCollapsibleContentRendered(present, rootContext.unmountOnHide.value)
+                    ? renderSlot(slots, 'default', { key: 0 })
+                    : createCommentVNode('v-if', true),
+                ]),
+              },
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/tabs/TabsList.ts

@@ -0,0 +1,52 @@
+import { defineComponent, h, renderSlot, toRefs, withCtx, type PropType } from 'vue'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { RovingFocusGroup } from '../roving-focus'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectTabsRootContext } from './context'
+
+export interface TabsListProps {
+  loop?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const TabsList = defineComponent({
+  name: 'TabsList',
+  props: {
+    loop: { type: Boolean, required: false, default: true },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    const { loop } = toRefs(props)
+    const { forwardRef, currentElement } = useForwardExpose()
+    const context = injectTabsRootContext()
+    context.tabsList = currentElement
+
+    return () =>
+      h(
+        RovingFocusGroup,
+        {
+          'as-child': '',
+          orientation: context.orientation.value,
+          dir: context.dir.value,
+          loop: loop.value,
+        },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              {
+                ref: forwardRef,
+                role: 'tablist',
+                'as-child': props.asChild,
+                as: props.as,
+                'aria-orientation': context.orientation.value,
+              },
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/tabs/TabsRoot.ts

@@ -0,0 +1,99 @@
+import {
+  defineComponent,
+  h,
+  ref,
+  renderSlot,
+  shallowRef,
+  toRefs,
+  withCtx,
+  type PropType,
+} from 'vue'
+import type { Orientation } from '../../../../shared/src/primitives/roving-focus'
+import type { TabsActivationMode, TabsValue } from '../../../../shared/src/primitives/tabs'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useId } from '../utils/useId'
+import { useVModel } from '../utils/useVModel'
+import { provideTabsRootContext } from './context'
+
+export interface TabsRootProps {
+  defaultValue?: TabsValue
+  orientation?: Orientation
+  dir?: Direction
+  activationMode?: TabsActivationMode
+  modelValue?: TabsValue
+  unmountOnHide?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export type TabsRootEmits = {
+  'update:modelValue': [value: TabsValue]
+}
+
+export const TabsRoot = defineComponent({
+  name: 'TabsRoot',
+  props: {
+    defaultValue: { type: null as unknown as PropType<TabsValue>, required: false },
+    orientation: { type: String as PropType<Orientation>, required: false, default: 'horizontal' },
+    dir: { type: String as PropType<Direction>, required: false },
+    activationMode: {
+      type: String as PropType<TabsActivationMode>,
+      required: false,
+      default: 'automatic',
+    },
+    modelValue: { type: null as unknown as PropType<TabsValue>, required: false },
+    unmountOnHide: { type: Boolean, required: false, default: true },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, slots }) {
+    const { orientation, unmountOnHide, dir: propDir } = toRefs(props)
+    const dir = useDirection(propDir)
+    useForwardExpose()
+    const modelValue = useVModel(props, 'modelValue', emit, {
+      defaultValue: props.defaultValue,
+      passive: props.modelValue === undefined,
+    })
+    const tabsList = ref<HTMLElement>()
+    const contentIds = shallowRef(new Set<TabsValue>())
+
+    provideTabsRootContext({
+      modelValue,
+      changeModelValue: value => {
+        modelValue.value = value
+      },
+      orientation,
+      dir,
+      unmountOnHide,
+      activationMode: props.activationMode,
+      baseId: useId(undefined, 'reka-tabs'),
+      tabsList,
+      contentIds,
+      registerContent: value => {
+        contentIds.value = new Set([...contentIds.value, value])
+      },
+      unregisterContent: value => {
+        const next = new Set(contentIds.value)
+        next.delete(value)
+        contentIds.value = next
+      },
+    })
+
+    return () =>
+      h(
+        Primitive,
+        {
+          dir: dir.value,
+          'data-orientation': orientation.value,
+          'as-child': props.asChild,
+          as: props.as,
+        },
+        {
+          default: withCtx(() => [renderSlot(slots, 'default', { modelValue: modelValue.value })]),
+        },
+      )
+  },
+})

package/src/primitives/tabs/TabsTrigger.ts

@@ -0,0 +1,97 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  renderSlot,
+  withCtx,
+  withKeys,
+  withModifiers,
+  type PropType,
+} from 'vue'
+import {
+  activatesOnFocus,
+  makeContentId,
+  makeTriggerId,
+  tabsState,
+  type TabsValue,
+} from '../../../../shared/src/primitives/tabs'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { RovingFocusItem } from '../roving-focus'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectTabsRootContext } from './context'
+
+export interface TabsTriggerProps {
+  value: TabsValue
+  disabled?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const TabsTrigger = defineComponent({
+  name: 'TabsTrigger',
+  props: {
+    value: { type: [String, Number] as PropType<TabsValue>, required: true },
+    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',
+    },
+  },
+  setup(props, { slots }) {
+    const { forwardRef } = useForwardExpose()
+    const rootContext = injectTabsRootContext()
+    const triggerId = computed(() => makeTriggerId(rootContext.baseId, props.value))
+    const contentId = computed(() =>
+      rootContext.contentIds.value.has(props.value)
+        ? makeContentId(rootContext.baseId, props.value)
+        : undefined,
+    )
+    const isSelected = computed(() => props.value === rootContext.modelValue.value)
+
+    const onMousedown = withModifiers(
+      ((event: MouseEvent) => {
+        if (!props.disabled && event.ctrlKey === false) rootContext.changeModelValue(props.value)
+        else event.preventDefault()
+      }) as (event: Event) => void,
+      ['left'],
+    )
+    const onKeydown = withKeys(() => rootContext.changeModelValue(props.value), ['enter', 'space'])
+    const onFocus = () => {
+      if (activatesOnFocus(rootContext.activationMode, isSelected.value, props.disabled))
+        rootContext.changeModelValue(props.value)
+    }
+
+    return () =>
+      h(
+        RovingFocusItem,
+        { 'as-child': '', focusable: !props.disabled, active: isSelected.value },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              {
+                id: triggerId.value,
+                ref: forwardRef,
+                role: 'tab',
+                type: props.as === 'button' ? 'button' : undefined,
+                as: props.as,
+                'as-child': props.asChild,
+                'aria-selected': isSelected.value ? 'true' : 'false',
+                'aria-controls': contentId.value,
+                'data-state': tabsState(isSelected.value),
+                disabled: props.disabled,
+                'data-disabled': props.disabled ? '' : undefined,
+                'data-orientation': rootContext.orientation.value,
+                onMousedown,
+                onKeydown,
+                onFocus,
+              },
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/tabs/context.ts

@@ -0,0 +1,22 @@
+import type { Ref } from 'vue'
+import type { Orientation } from '../../../../shared/src/primitives/roving-focus'
+import type { TabsActivationMode, TabsValue } from '../../../../shared/src/primitives/tabs'
+import { createContext } from '../utils/createContext'
+import type { Direction } from '../utils/useDirection'
+
+export interface TabsRootContext {
+  modelValue: Ref<TabsValue | undefined>
+  changeModelValue: (value: TabsValue) => void
+  orientation: Ref<Orientation>
+  dir: Ref<Direction>
+  unmountOnHide: Ref<boolean>
+  activationMode: TabsActivationMode
+  baseId: string
+  tabsList: Ref<HTMLElement | undefined>
+  contentIds: Ref<Set<TabsValue>>
+  registerContent: (value: TabsValue) => void
+  unregisterContent: (value: TabsValue) => void
+}
+
+export const [injectTabsRootContext, provideTabsRootContext] =
+  createContext<TabsRootContext>('TabsRoot')

package/src/primitives/tabs/index.ts

@@ -0,0 +1,5 @@
+export { injectTabsRootContext, type TabsRootContext } from './context'
+export { TabsContent, type TabsContentProps } from './TabsContent'
+export { TabsList, type TabsListProps } from './TabsList'
+export { TabsRoot, type TabsRootEmits, type TabsRootProps } from './TabsRoot'
+export { TabsTrigger, type TabsTriggerProps } from './TabsTrigger'

package/src/primitives/toggle/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/toggle/Toggle.ts

@@ -0,0 +1,116 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  Fragment,
+  h,
+  mergeProps,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { toggleState } from '../../../../shared/src/primitives/toggle'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { injectToggleGroupRootContext } from '../toggle-group/context'
+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 interface ToggleProps {
+  defaultValue?: boolean
+  modelValue?: boolean | null
+  disabled?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+  name?: string
+  required?: boolean
+}
+
+export type ToggleEmits = {
+  'update:modelValue': [value: boolean]
+}
+
+export const Toggle = defineComponent({
+  name: 'Toggle',
+  inheritAttrs: false,
+  props: {
+    defaultValue: { type: Boolean, required: false },
+    modelValue: {
+      type: [Boolean, null] as PropType<boolean | null>,
+      required: false,
+      default: undefined,
+    },
+    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: ['update:modelValue'],
+  setup(props, { emit, attrs, slots }) {
+    const { forwardRef, currentElement } = useForwardExpose()
+    const scopeIdAttrs = useForwardScopeId()
+    const toggleGroupContext = injectToggleGroupRootContext(null)
+    const modelValue = useVModel(props, 'modelValue', emit, {
+      defaultValue: props.defaultValue,
+      passive: props.modelValue === undefined,
+    })
+    function togglePressed() {
+      modelValue.value = !modelValue.value
+    }
+    const dataState = computed(() => toggleState(modelValue.value))
+    const isFormControl = useFormControl(currentElement)
+
+    return () =>
+      h(Fragment, null, [
+        h(
+          Primitive,
+          mergeProps(
+            {
+              ref: forwardRef,
+              type: props.as === 'button' ? 'button' : undefined,
+              'as-child': props.asChild,
+              as: props.as,
+              'aria-pressed': modelValue.value,
+              'data-state': dataState.value,
+              'data-disabled': props.disabled ? '' : undefined,
+              disabled: props.disabled,
+            },
+            { ...scopeIdAttrs, ...attrs },
+            { onClick: togglePressed },
+          ),
+          {
+            default: withCtx(() => [
+              renderSlot(slots, 'default', {
+                modelValue: modelValue.value,
+                disabled: props.disabled,
+                pressed: modelValue.value,
+                state: dataState.value,
+              }),
+            ]),
+          },
+        ),
+        isFormControl.value && props.name && !toggleGroupContext
+          ? h(
+              VisuallyHiddenInput,
+              mergeProps(
+                {
+                  key: 0,
+                  type: 'checkbox',
+                  name: props.name,
+                  value: modelValue.value,
+                  required: props.required,
+                },
+                scopeIdAttrs,
+              ) as { name: string; value: unknown },
+            )
+          : createCommentVNode('v-if', true),
+      ])
+  },
+})

package/src/primitives/toggle/index.ts

@@ -0,0 +1 @@
+export { Toggle, type ToggleEmits, type ToggleProps } from './Toggle'

package/src/primitives/toggle-group/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/toggle-group/ToggleGroupItem.ts

@@ -0,0 +1,80 @@
+import {
+  computed,
+  defineComponent,
+  guardReactiveProps,
+  h,
+  mergeProps,
+  normalizeProps,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { isValueEqualOrExist } from '../../../../shared/src/primitives/value'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { RovingFocusItem } from '../roving-focus'
+import { Toggle } from '../toggle'
+import type { AcceptableValue } from '../utils/types'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardScopeId } from '../utils/useForwardScopeId'
+import { injectToggleGroupRootContext } from './context'
+
+export interface ToggleGroupItemProps {
+  value: AcceptableValue
+  disabled?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const ToggleGroupItem = defineComponent({
+  name: 'ToggleGroupItem',
+  props: {
+    value: { type: null as unknown as PropType<AcceptableValue>, required: true },
+    disabled: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'button',
+    },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectToggleGroupRootContext()
+    const disabled = computed(() => rootContext.disabled?.value || props.disabled)
+    const pressed = computed(() => isValueEqualOrExist(rootContext.modelValue.value, props.value))
+    const { forwardRef } = useForwardExpose()
+    const scopeIdAttrs = useForwardScopeId()
+    const onUpdate = () => rootContext.changeModelValue(props.value)
+
+    return () =>
+      h(
+        rootContext.rovingFocus.value ? RovingFocusItem : Primitive,
+        mergeProps(
+          { 'as-child': '' },
+          rootContext.rovingFocus.value
+            ? { focusable: !disabled.value, active: pressed.value }
+            : {},
+        ),
+        {
+          default: withCtx(() => [
+            h(
+              Toggle,
+              mergeProps(
+                { ...scopeIdAttrs, ...props },
+                {
+                  ref: forwardRef,
+                  disabled: disabled.value,
+                  'model-value': pressed.value,
+                  'onUpdate:modelValue': onUpdate,
+                },
+              ),
+              {
+                default: withCtx((slotProps: Record<string, unknown>) => [
+                  renderSlot(slots, 'default', normalizeProps(guardReactiveProps(slotProps))),
+                ]),
+              },
+            ),
+          ]),
+        },
+      )
+  },
+})