@hina-ui/vue 1.7.5 → 1.7.7

package/src/locale/zh-CN.ts

@@ -1,215 +1 @@
-import type { UiMessages } from './types'
-
-export const zhCN: UiMessages = {
-  qrCode: {
-    label: '二维码',
-    empty: '暂无内容',
-    expired: '二维码已过期',
-    scanned: '已扫描',
-    error: '无法生成二维码',
-    refresh: '刷新二维码',
-  },
-  carousel: {
-    label: '推荐内容',
-    role: '轮播',
-    slide: '内容项',
-    prev: '上一组',
-    next: '下一组',
-    choose: '选择展示位置',
-    play: '开始自动播放',
-    pause: '暂停自动播放',
-    empty: '暂无内容',
-    position: (index, total) => `第 ${index} 项，共 ${total} 项`,
-    goTo: index => `转到第 ${index} 组`,
-  },
-  monthGrid: { today: '回到本月' },
-  masonry: { empty: '暂无内容' },
-  splitButton: { more: '更多操作' },
-  editable: { edit: '编辑', save: '保存', placeholder: '点击编辑', failed: '保存失败，请重试' },
-  tag: 'zh-CN',
-  stepper: {
-    label: '步骤',
-    progress: (step, total) => `第 ${step} 步，共 ${total} 步`,
-    completed: '已完成',
-    error: '该步骤存在错误',
-  },
-  common: {
-    close: '关闭',
-    copy: '复制',
-    copied: '已复制',
-    clear: '清除',
-    loading: '加载中',
-    confirm: '确定',
-    cancel: '取消',
-  },
-  banner: {
-    prev: '上一条',
-    next: '下一条',
-  },
-  pagination: {
-    rangeLabel: (from, to, total) =>
-      total ? String(from) + '–' + to + ' / 共 ' + total + ' 条' : '共 0 条',
-    pageCountLabel: (page, count) => '第 ' + page + ' / ' + count + ' 页',
-    pageSizeLabel: '每页条数',
-    pageSizeOption: n => String(n) + ' / 页',
-    jumpLabel: '跳至页码',
-    previousPagesLabel: n => '向前跳 ' + n + ' 页',
-    nextPagesLabel: n => '向后跳 ' + n + ' 页',
-    choosePage: '选择页码',
-    choosePageHint: '按向下或向上箭头选择页码',
-    navLabel: '翻页',
-    prev: '上一页',
-    next: '下一页',
-    first: '首页',
-    last: '末页',
-    pageLabel: n => `第 ${n} 页`,
-    totalLabel: n => `共 ${n} 条`,
-  },
-  table: {
-    edit: '编辑',
-    save: '保存',
-    cancel: '取消',
-    editFailed: '保存失败，请重试',
-    selectPage: '选择当前页',
-    selectFiltered: '选择筛选结果',
-    expand: '展开',
-    collapse: '收起',
-    moveRow: '移动行',
-    moveColumn: '移动列',
-    resizeColumn: '调整列宽',
-
-    noColumns: '没有可见列',
-    empty: '暂无数据',
-    loading: '加载中',
-    sortAsc: '升序排列',
-    sortDesc: '降序排列',
-    sortNone: '取消排序',
-    selectRow: '选择此行',
-    selectAll: '全选',
-  },
-  select: {
-    placeholder: '请选择',
-    empty: '无匹配项',
-    optionCountLabel: n => `${n} 个选项可用`,
-  },
-  upload: {
-    choose: '选择文件',
-    dropHint: '拖拽文件到此处，或点击选择',
-    tooLargeLabel: readableSize => `文件超出 ${readableSize} 上限`,
-    remove: '移除',
-    removeFile: name => `移除 ${name}`,
-  },
-  time: {
-    justNow: '刚刚',
-    unknown: '未知时间',
-  },
-  virtualList: { empty: '暂无数据' },
-  dataList: { empty: '暂无数据', list: '列表视图', grid: '网格视图', layout: '展示布局' },
-  scroll: {
-    regionLabel: '可滚动区域',
-    backToTop: '返回顶部',
-  },
-  toast: {
-    regionLabel: '通知',
-  },
-  spoiler: {
-    revealLabel: '剧透内容，点击显示',
-    hideLabel: '隐藏剧透',
-  },
-  codeblock: {
-    copy: '复制代码',
-  },
-  splitter: {
-    handleLabel: '调整面板大小',
-  },
-  sidebar: {
-    navLabel: '侧边导航',
-    toggleLabel: '切换侧栏',
-  },
-  anchor: {
-    navLabel: '本页目录',
-  },
-  breadcrumb: {
-    navLabel: '面包屑',
-  },
-  lightbox: {
-    zoomIn: '放大',
-    zoomOut: '缩小',
-    resetZoom: '适应窗口',
-    actualSize: '原始尺寸',
-    rotate: '旋转',
-    download: '下载',
-    loadingLarge: '正在加载原图',
-  },
-  chip: {
-    remove: '移除',
-  },
-  numberInput: {
-    increase: '增加',
-    decrease: '减少',
-  },
-  passwordInput: {
-    show: '显示密码',
-    hide: '隐藏密码',
-  },
-  tree: { empty: '暂无节点' },
-  treeSelect: {
-    search: '搜索节点',
-  },
-  combobox: {
-    placeholder: '输入或选择',
-    toggle: '展开选项',
-  },
-  slider: {
-    minimum: '最小值',
-    maximum: '最大值',
-  },
-  pinInput: {
-    cellLabel: (index, total) => `第 ${index} 位，共 ${total} 位`,
-  },
-  dateField: {
-    year: '年',
-    month: '月',
-    day: '日',
-    hour: '时',
-    minute: '分',
-    second: '秒',
-    dayPeriod: '上午或下午',
-  },
-  dateRangeField: {
-    start: '开始日期',
-    end: '结束日期',
-    separator: '至',
-  },
-  datePicker: {
-    open: '打开日历',
-  },
-  dateTimePicker: {
-    time: '时间',
-  },
-  rating: {
-    star: value => `${value} 星`,
-    label: (value, max) => `${value} 星，满分 ${max} 星`,
-    score: (value, max) => `${value} 分，满分 ${max} 分`,
-  },
-  form: {
-    required: '必填',
-  },
-  command: {
-    label: '命令面板',
-    placeholder: '搜索',
-    empty: '无匹配项',
-  },
-  calendar: {
-    label: '日历',
-    prev: '上个月',
-    next: '下个月',
-    prevYear: '上一年',
-    nextYear: '下一年',
-    prevYears: '前十二年',
-    nextYears: '后十二年',
-    pickMonth: '选择月份',
-    pickYear: '选择年份',
-    weekStartsOn: 1,
-  },
-}
+export { zhCN } from '../../../shared/src/locale/zh-CN'

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