easybill-ui 1.3.5 → 1.4.0

package/components/CurdForm/src/CurdForm.vue

@@ -28,15 +28,7 @@
 
       <!-- 其他类型使用 el-form-item 包裹 -->
       <template v-else>
-        <el-form-item
-          v-if="!$slots[formItem.prop + 'Item']"
-          :required="rules && rules[formItem.prop]?.find((a) => a.hasOwnProperty('required'))?.required"
-          :label="formItem.label"
-          :prop="formItem.prop"
-          :label-width="formItem.labelWidth"
-          :class="getFormItemStyle(formItem)"
-          v-bind="getFormItemProps(formItem)"
-        >
+        <el-form-item v-if="!$slots[formItem.prop + 'Item']" :required="hasRequiredRule(formItem.prop)" :label="formItem.label" :prop="formItem.prop" :label-width="formItem.labelWidth" :class="getFormItemStyle(formItem)" v-bind="getFormItemProps(formItem)">
           <template v-for="(item, key) in getFormItemProps(formItem)?.slots || {}" :key="key" #[key]="row">
             <component :is="item" v-bind="row" />
           </template>
@@ -65,7 +57,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElForm, type FormRules } from "element-plus"
+import { ElForm, type FormItemRule, type FormRules } from "element-plus"
 import { computed, getCurrentInstance, onMounted, provide, reactive, ref, triggerRef, watch, type PropType } from "vue"
 import FormItem from "./FormItem.vue"
 import type { CurdFormOptionItem, Fields, FormContext, FormItemProvider, FormItemSearchResult, FormItem as FormItemType, FormSchema } from "./types"
@@ -272,6 +264,13 @@ const rules = computed(() => {
 
   return mergedRules
 })
+const normalizeFormItemRules = (rule: FormItemRule | FormItemRule[] | undefined) => {
+  if (!rule) return []
+  return Array.isArray(rule) ? rule : [rule]
+}
+const hasRequiredRule = (prop: string) => {
+  return normalizeFormItemRules(rules.value[prop] as FormItemRule | FormItemRule[] | undefined).some((rule) => Object.prototype.hasOwnProperty.call(rule, "required") && rule.required)
+}
 
 /**
  * 递归查找表单项

package/components/CurdForm/src/FormItem.vue

@@ -5,12 +5,12 @@
     <slot name="prefix"></slot>
     <component :is="comp" v-if="comp" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject">
       <template v-for="(item, key) in formItemProps.slots" :key="key" #[key]="slotScope">
-        <component :is="item" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
+        <component :is="item" v-model="modelRef[props.formItem.prop || '']" v-bind="slotScope" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
       </template>
     </component>
     <component :is="props.formItem.type" v-else v-model="modelRef[props.formItem.prop || '']" v-bind="formItemProps" v-on="eventObject">
       <template v-for="(item, key) in formItemProps.slots" :key="key" #[key]="slotScope">
-        <component :is="item" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
+        <component :is="item" v-model="modelRef[props.formItem.prop || '']" v-bind="slotScope" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
       </template>
     </component>
 

package/components/CurdForm/src/FormTooltip.vue

@@ -10,12 +10,11 @@
 </template>
 <script lang="ts" setup>
 import { Warning } from "@element-plus/icons-vue"
-import { type ElTooltipProps } from "element-plus"
 import { type PropType, computed } from "vue"
-import type { Fields, FormItem } from "./types"
+import type { Fields, FormItem, TooltipProps } from "./types"
 const props = defineProps({
   tooltip: {
-    type: [String, Function] as PropType<string | ((formModel: Fields, formItem: FormItem) => Partial<ElTooltipProps> | string) | Partial<ElTooltipProps>>,
+    type: [String, Function, Object] as PropType<string | ((formModel: Fields, formItem: FormItem) => Partial<TooltipProps> | string) | Partial<TooltipProps>>,
     default: null,
   },
   formItem: {
@@ -40,11 +39,11 @@ const tooltipModel = computed(() => {
   return getTooltip(tooltip)
 })
 // 获取组件tooltip内容
-const getTooltip = (tooltip: Partial<ElTooltipProps> | string): Partial<ElTooltipProps> => {
+const getTooltip = (tooltip: Partial<TooltipProps> | string): Partial<TooltipProps> => {
   if (!tooltip) {
     return { content: "" }
   }
-  let t: Partial<ElTooltipProps> = {}
+  let t: Partial<TooltipProps> = {}
   if (typeof tooltip == "string") {
     t = { content: tooltip }
   } else {

package/components/CurdForm/src/components/schema-form-date-picker.vue

@@ -1,7 +1,7 @@
 <template>
   <el-date-picker v-model="model" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-bind="props" v-on="eventObject">
-    <template v-for="(item, key) in props.props?.slots" :key="key" #[key]="slotScope">
-      <component :is="item" v-model="model" :form-item="props.formItem" :form-model="props.formModel" :props="formItemProps" :event-object="eventObject" />
+    <template v-for="(item, key) in props.slots" :key="key" #[key]="slotScope">
+      <component :is="item" v-model="model" v-bind="slotScope" :form-item="formItem" :form-model="formModel" :props="props" :event-object="eventObject" />
     </template>
   </el-date-picker>
 </template>

package/components/CurdForm/src/components/schema-form-input-number.vue

@@ -1,7 +1,7 @@
 <template>
   <el-input-number v-model="model" v-bind="props.props" v-on="eventObject">
     <template v-for="(item, key) in props.props?.slots" :key="key" #[key]="slotScope">
-      <component :is="item" v-model="model" :form-item="props.formItem" :form-model="props.formModel" :props="props.props" :event-object="eventObject" />
+      <component :is="item" v-model="model" v-bind="slotScope" :form-item="props.formItem" :form-model="props.formModel" :props="props.props" :event-object="eventObject" />
     </template>
   </el-input-number>
 </template>

package/components/CurdForm/src/components/schema-form-time-picker.vue

@@ -1,7 +1,7 @@
 <template>
   <el-time-picker v-model="model" v-bind="props" v-on="eventObject">
-    <template v-for="(item, key) in props.props?.slots" :key="key" #[key]="slotScope">
-      <component :is="item" v-model="model" :form-item="formItem" :form-model="formModel" :props="formItemProps" :event-object="eventObject" />
+    <template v-for="(item, key) in props.slots" :key="key" #[key]="slotScope">
+      <component :is="item" v-model="model" v-bind="slotScope" :form-item="formItem" :form-model="formModel" :props="props" :event-object="eventObject" />
     </template>
   </el-time-picker>
 </template>

package/components/CurdForm/src/types.ts

@@ -1,4 +1,4 @@
-import { ElForm, type FormItemRule, type FormRules, type TooltipTriggerType } from "element-plus"
+import { ElForm, type FormItemRule, type FormRules } from "element-plus"
 import type { Arrayable } from "element-plus/es/utils"
 import { defineComponent, type PropType, type VNode } from "vue"
 import type { OptionItem } from "../../ConstantStatus"
@@ -32,7 +32,7 @@ export interface FormItem {
   hidden?: boolean | ((model: Fields) => boolean)
   rules?: Arrayable<FormItemRule>
   props?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => FormItemPropObject)
-  formItemProps?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => void)
+  formItemProps?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => FormItemPropObject)
   labelWidth?: string | number
   labelPosition?: "left" | "right" | "top" | string
   span?: number
@@ -47,28 +47,28 @@ export interface FormItem {
 export type FormItemTypeEmun = "input" | "select" | "radio" | "checkbox" | "input-number" | "switch" | "file" | "date-picker" | "time-picker" | "color-picker" | "value" | "tree-select" | "autocomplete" | "choose"
 export interface FormItemPropObject extends Fields {
   slots?: Record<string, (props?: FormItemPropObject) => VNode | VNode[] | string | null>
-  all?: boolean | CurdFormOptionItem
+  all?: boolean | OptionItem
   empty?: string | VNode
   noDataText?: string
   style?: Record<string, string> | string
 }
-export interface TooltipProps {
-  effect: "dark" | "light"
-  content: string
-  rawContent: boolean
-  placement: import("element-plus/es/components/popper").Placement
-  disabled: boolean
-  offset: number
-  transition: string
-  popperOptions: unknown
-  showAfter: number
-  showArrow: boolean
-  hideAfter: number
-  autoClose: number
-  popperClass: string
-  enterable: boolean
-  teleported: boolean
-  trigger: TooltipTriggerType
+export interface TooltipProps extends Record<string, unknown> {
+  effect?: "dark" | "light" | string
+  content?: string
+  rawContent?: boolean
+  placement?: string
+  disabled?: boolean
+  offset?: number
+  transition?: string
+  popperOptions?: unknown
+  showAfter?: number
+  showArrow?: boolean
+  hideAfter?: number
+  autoClose?: number
+  popperClass?: string
+  enterable?: boolean
+  teleported?: boolean
+  trigger?: string | string[]
 }
 export interface FormContext {
   loadOptions: (prop: string, config?: unknown) => void | Promise<CurdFormOptionItem[]> | CurdFormOptionItem[]
@@ -109,10 +109,11 @@ export interface FormItemSearchResult {
 // interface EventObjectDefault {
 //   change?: (formModel: Fields, formItem: FormItem, proxy: any) => void
 // }
+export type EventObjectHandler = (formModel: Fields, formItem: FormItem, context?: FormContext, ...args: unknown[]) => void | boolean
 export interface EventObject {
-  change?: (formModel: Fields, formItem: FormItem, context: FormContext, ...args: unknown[]) => void | boolean
-  optionLoaded?: (formModel: Fields, formItem: FormItem, context: FormContext, config?: unknown) => void
-  [key: string]: ((formModel: Fields, formItem: FormItem, context: FormContext, config?: unknown) => void) | undefined
+  change?: EventObjectHandler
+  optionLoaded?: EventObjectHandler
+  [key: string]: EventObjectHandler | undefined
 }
 // export interface OptionItem {
 //   label: string
@@ -135,7 +136,7 @@ export const FormItemProps = {
     default: () => ({}),
   },
   eventObject: {
-    type: Object as PropType<Fields & { change: (formModel: Fields, formItem: FormItem) => void | boolean }>,
+    type: Object as PropType<EventObject>,
     default: () => ({}),
   },
   modelValue: {

package/components/CurdGroupForm/src/hooks/useFormHook.ts

@@ -1,21 +1,21 @@
 import { CurdForm } from "easybill-ui"
 import { ref, type Ref } from "vue"
-import type { Schema, SchemaItem } from "../../types"
+import type { CurdGroupFormSchema, CurdGroupFormSchemaItem } from "../../types"
 
 export const useFormHook = (): {
   form: Ref<Record<string, unknown>>
   formRef: Ref<Record<string, InstanceType<typeof CurdForm>>>
   submit: () => void
-  schema: Ref<Schema | undefined>
+  schema: Ref<CurdGroupFormSchema | undefined>
   validate: (callback: (valid: boolean) => void) => void
   loading: Ref<boolean>
-  schemaItemHidden: (item: SchemaItem) => boolean
+  schemaItemHidden: (item: CurdGroupFormSchemaItem) => boolean
 } => {
   const formRef = ref<Record<string, InstanceType<typeof CurdForm>>>({})
   const form = ref<Record<string, unknown>>({})
-  const schema = ref<Schema>()
+  const schema = ref<CurdGroupFormSchema>()
   const loading = ref(false)
-  const schemaItemHidden = (item: SchemaItem) => {
+  const schemaItemHidden = (item: CurdGroupFormSchemaItem) => {
     if (item?.hidden && item?.hidden instanceof Function) {
       return item.hidden(form.value, item)
     }

package/components/CurdTable/src/CurdTable.vue

@@ -21,7 +21,7 @@
           <el-table-column v-else-if="item.type == 'selection'" type="selection" v-bind="item" />
           <STableItem v-else :ref="getTableItemRef(item.prop)" :schema="item" :is-slot="!!$slots[item.prop]" :is-slot-header="!!$slots[item.prop + 'Header']" :option="option" @search="onItemChange">
             <template v-for="(_slot, key) in $slots" :key="key" #[key]="scopeChild">
-              <slot :name="key" v-bind="scopeChild"></slot>
+              <slot :name="key" v-bind="normalizeSlotScope(scopeChild)"></slot>
             </template>
           </STableItem>
         </template>
@@ -133,12 +133,12 @@ const props = defineProps({
   },
   // 自定义创建函数
   fetchCreate: {
-    type: Function as PropType<(formModel: Fields) => Promise<void>>,
+    type: Function as PropType<(formModel: Fields) => void | boolean | Promise<void | boolean>>,
     default: null,
   },
   // 自定义编辑函数
   fetchEdit: {
-    type: Function as PropType<(row: unknown, formItem: unknown, index: number) => Promise<void>>,
+    type: Function as PropType<(formModel: Fields, row: Record<string, unknown>, index?: number) => void | boolean | Promise<void | boolean>>,
 
     default: null,
   },
@@ -248,6 +248,7 @@ const fetchData = async (opt?: FetchDataOpt) => {
   }
 }
 const tableItemRefs: Ref<Record<string, InstanceType<typeof STableItem>>> = ref({})
+const normalizeSlotScope = (scope: unknown) => (scope && typeof scope === "object" ? scope : {})
 const getTableItemRef = (prop: string) => {
   return (el: unknown) => {
     if (el) {
@@ -404,8 +405,10 @@ const create = (row?: Record<string, unknown>, index?: number) => {
     fields: row as Fields,
     width: formAttrs?.width || 600,
     handleOk: async (modelRef: Fields) => {
-      const fun = row ? "fetchEdit" : "fetchCreate"
-      return await (props[fun] && props[fun](modelRef, row, index))
+      if (row) {
+        return await props.fetchEdit?.(modelRef, row, index)
+      }
+      return await props.fetchCreate?.(modelRef)
     },
     ...eoptions,
   })

package/components/CurdTable/src/STableItem.vue

@@ -14,7 +14,7 @@
         <template v-for="item in props.schema.children" :key="item.label">
           <STableItem :ref="(el) => (tableItemRefs[item.prop] = el)" :schema="item" :is-slot="!!$slots[item.prop]" :is-slot-header="!!$slots[item.prop + 'Header']" :option="option" @search="onItemChange">
             <template v-for="(_slot, key) in $slots" :key="key" #[key]="scopeChild">
-              <slot :name="key" v-bind="scopeChild"></slot>
+              <slot :name="key" v-bind="normalizeSlotScope(scopeChild)"></slot>
             </template>
           </STableItem>
         </template>
@@ -44,6 +44,7 @@ import { useLocale } from "easybill-ui"
 import { ElMessage } from "element-plus"
 import { computed, inject, type PropType, ref, type Ref } from "vue"
 import ConstantStatus from "../../ConstantStatus"
+import type { Fields } from "../../CurdForm"
 import type { ParamsItem } from "../../TableFilter"
 import { copy } from "../utils/common"
 import STableItemFilter from "./STableItemFilter.vue"
@@ -72,6 +73,7 @@ const props = defineProps({
     default: () => ({}),
   },
 })
+defineSlots<Record<string, (scope: Record<string, unknown>) => unknown>>()
 const selectParams = inject<Ref<Array<ParamsItem>>>("selectParams")
 const filterSchema = computed(() => {
   let result = selectParams?.value.filter((a) => a.prop == props.schema.filter?.prop || a.prop == props.schema.prop) //getFilterFromColumn(props.schema)
@@ -94,7 +96,7 @@ const copyValue = async (value: unknown) => {
   ElMessage.success(t("el.table.clickCopySuccess"))
 }
 const emits = defineEmits(["search"])
-const search = inject("search")
+const search = inject<Fields>("search", {})
 const getColumnHidden = computed(() => {
   if (props.schema.hidden && props.schema.hidden instanceof Function) {
     return props.schema.hidden(props.schema, search)
@@ -109,6 +111,7 @@ const onSearch = (opt: { listQuery: Record<string, unknown> }) => {
   if (tableItemFilterRef.value) tableItemFilterRef.value.search(opt)
 }
 const tableItemRefs: Ref<Record<string, unknown>> = ref({})
+const normalizeSlotScope = (scope: unknown) => (scope && typeof scope === "object" ? scope : {})
 const onItemChange = (prop: string, value: string) => {
   emits("search", prop, value, filterSchema.value)
 }

package/components/CurdTable/src/types.ts

@@ -8,6 +8,8 @@ import type { EventObject, FormSchema } from "./../../CurdForm/src/types"
 import type { VNode } from "vue"
 import type { FormDialogOptions } from "../../FormDialog/src/types"
 
+export type MaybePromise<T> = T | Promise<T>
+
 export interface CurdTableProps<T = unknown> extends Partial<TableProps<T>> {
   rowKey?: string
   data?: T[]
@@ -15,22 +17,22 @@ export interface CurdTableProps<T = unknown> extends Partial<TableProps<T>> {
   pageOptions?: { pageIndex?: number; pageSize?: number; total?: number } & Fields
   option?: Partial<PropOption>
   fetchData?: (opt: FeachDataParam) => Promise<{ total?: number; list?: T[] } | void>
-  fetchCreate?: (formModel: Fields) => Promise<void>
-  fetchEdit?: (row: T) => Promise<void>
-  fetchRemove?: (row: T) => Promise<void>
+  fetchCreate?: (formModel: Fields) => MaybePromise<void | boolean>
+  fetchEdit?: (formModel: Fields, row: T, index?: number) => MaybePromise<void | boolean>
+  fetchRemove?: (row: T, index: number) => Promise<void>
 }
 // extends Partial<TableColumnCtx<T>>
 export interface ColumnItemCtx<T> extends Partial<TableColumnCtx<T>> {
   prop: string
   label: string
   type?: string
-  hidden?: boolean | ((item: ColumnItemCtx<T>, search: (opt: { listQuery: Record<string, unknown> }) => void) => boolean)
+  hidden?: boolean | ((item: ColumnItemCtx<T>, query: Fields) => boolean)
   neverShow?: boolean // 表示不在列控制器里
   children?: ColumnItem<T>[]
   options?: Array<OptionItem> //数据字典
   asyncOptions?: () => Promise<OptionItem[]>
   eventObject?: EventObject
-  form?: Partial<FormItemType> | ((formItem: FormItemType, row: T, query: Fields) => Partial<FormItemType>)
+  form?: Partial<FormItemType> | ((column: ColumnItemCtx<T>, row: T, query: Fields) => Partial<FormItemType>)
   filter?: ColumnItemFilter
   empty?: string | unknown
   detail?: ColumnItemDetail

package/components/DetailInfo/src/types.ts

@@ -14,8 +14,8 @@ export interface DetailDataItem extends Record<string, unknown> {
   labelWidth?: number | string
   props?: Record<string, string>
   slot?: string
-  tooltip?: string | import("element-plus/es/components/tooltip").ElTooltipProps
-  labelPosition?: "string" | "left" | "right" | "center"
+  tooltip?: string | ElTooltipProps
+  labelPosition?: string | "left" | "right" | "center" | "top"
   labelStyle?: string | Record<string, string | number>
   showOverflowTooltip?: boolean | string | Partial<ElTooltipProps>
   rawContent?: boolean

package/components/FormDialog/src/FormDialog.vue

@@ -28,10 +28,11 @@
 
 <script lang="ts">
 import { CurdForm, CurdGroupForm, type CurdGroupFormSchema, useLocale } from "easybill-ui"
-import { computed, defineComponent, type PropType, provide, reactive, ref, type Ref, toRefs, useAttrs } from "vue"
+import { type Component, computed, defineComponent, type PropType, provide, reactive, ref, type Ref, toRefs, useAttrs } from "vue"
 import { type Fields, type FormSchema } from "../../CurdForm"
 import { useStepList } from "./hooks/useStepList"
 import { useStepNavigation } from "./hooks/useStepNavigation"
+import type { FormDialogHandleOk } from "./types"
 export default defineComponent({
   name: "FormDialog",
   components: {
@@ -69,7 +70,7 @@ export default defineComponent({
     },
     // 点击确定
     handleOk: {
-      type: Function,
+      type: Function as PropType<FormDialogHandleOk>,
       default: null,
     },
     // 关闭的回调,通过类型判断是点取消按钮还是右上角关闭按钮
@@ -99,11 +100,11 @@ export default defineComponent({
       default: "dialog",
     },
     stepComponent: {
-      type: Object,
+      type: Object as PropType<Component>,
       default: null,
     },
     footerComponent: {
-      type: Object,
+      type: Object as PropType<Component>,
       default: null,
     },
   },
@@ -151,7 +152,7 @@ export default defineComponent({
             state.confirmLoading = false
             return
           }
-          const pass = await (props.handleOk && props.handleOk(form.value, state)).finally(() => (state.confirmLoading = false))
+          const pass = await Promise.resolve(props.handleOk?.(form.value, state)).finally(() => (state.confirmLoading = false))
           if (typeof pass == "undefined" || pass) {
             state.visible = false
             onCancel()

package/components/FormDialog/src/types.ts

@@ -1,32 +1,37 @@
 import type { DialogProps, StepProps } from "element-plus"
+import type { Component, Ref } from "vue"
 import type { Fields, FormContext, FormSchema } from "../../CurdForm"
 import type { CurdGroupFormSchema } from "../../CurdGroupForm/types"
 import type { StepItem } from "./hooks/useStepList"
 
+export interface FormDialogState {
+  visible: boolean
+  confirmLoading: boolean
+}
+
+export type FormDialogHandleOk = (modelRef: Fields, state: FormDialogState) => void | boolean | Promise<void | boolean>
+
 export interface FormDialogOptions extends Partial<DialogProps> {
   title?: string
   width?: string | number
   fields?: Fields
   formSchema?: FormSchema
   groupSchema?: CurdGroupFormSchema
-  handleOk?: (modelRef: Fields) => Promise<void>
+  handleOk?: FormDialogHandleOk
   handleClose?: (e: "close" | "cancel") => void
-  setForm?: (form: Fields) => void
+  setForm?: (form: Ref<Fields>) => void
   stepProps?: Partial<StepProps & Fields>
   extendContext?: Partial<FormContext>
   confirmBtnText?: string
   cancelBtnText?: string
-  stepComponent?: object
-  footerComponent?: object
+  stepComponent?: Component
+  footerComponent?: Component
   mode?: "dialog" | "drawer"
 }
 
 export interface FormDialogContext {
   form: Fields
-  state: {
-    visible: boolean
-    confirmLoading: boolean
-  }
+  state: FormDialogState
   stepList: StepItem[]
   activeStep: { value: number }
   loadOptions: (prop: string, config?: unknown) => void

package/components/TableFilter/types.ts

@@ -1,5 +1,5 @@
 import { defineComponent } from "vue"
-import type { FormContext, FormItem, FormItemTypeEmun } from "../CurdForm"
+import type { CurdFormOptionItem, FormContext, FormItem, FormItemTypeEmun } from "../CurdForm"
 export interface ParamsItem extends FormItem {
   type?: FormItemTypeEmun | ReturnType<typeof defineComponent>
   tableKey?: Array<string>
@@ -9,10 +9,16 @@ export interface ParamsItem extends FormItem {
   tagNames?: string
 }
 export type FilterItem = ParamsItem
-export interface TableFilterContext extends FormContext {
+export interface TableFilterContext {
   loadOptions: (prop: string, config?: unknown) => void
+  setOptions: (prop: string, options: CurdFormOptionItem[], config?: unknown) => void
   setValue: (prop: string, value: unknown) => void
   search: () => void
+  formModel: ListQuery
+  components: FormContext["components"]
+  change: FormContext["change"]
+  formRef?: FormContext["formRef"]
+  formSchema?: FormContext["formSchema"]
 }
 
 export interface ListQuery {

package/package.json

@@ -1,11 +1,66 @@
 {
   "name": "easybill-ui",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,
   "license": "ISC",
+  "scripts": {
+    "typecheck": "vue-tsc -p tsconfig.typecheck.json --noEmit --skipLibCheck"
+  },
   "main": "index.ts",
+  "types": "index.ts",
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    },
+    "./index": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    },
+    "./index.ts": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    },
+    "./components/CurdForm/src/types": {
+      "types": "./components/CurdForm/src/types.ts",
+      "import": "./components/CurdForm/src/types.ts",
+      "default": "./components/CurdForm/src/types.ts"
+    },
+    "./components/*": {
+      "types": "./components/*",
+      "import": "./components/*",
+      "default": "./components/*"
+    },
+    "./utils/*": {
+      "types": "./utils/*",
+      "import": "./utils/*",
+      "default": "./utils/*"
+    },
+    "./locale/*": {
+      "types": "./locale/*",
+      "import": "./locale/*",
+      "default": "./locale/*"
+    },
+    "./theme-chalk/*": {
+      "types": "./theme-chalk/*",
+      "import": "./theme-chalk/*",
+      "default": "./theme-chalk/*"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.ts",
+    "components",
+    "utils",
+    "locale",
+    "theme-chalk",
+    "README.md"
+  ],
   "peerDependencies": {
     "@element-plus/icons-vue": "^2.0.6",
     "element-plus": "^2.7.0",

package/utils/hooks/useLocal.ts

@@ -1,23 +1,25 @@
-import { computed, isRef, ref, unref, type ComputedRef } from "vue"
+import { computed, isRef, ref, type ComputedRef, type Ref } from "vue"
 import en from "../../locale/lang/en"
 
-import type { MaybeRef } from "@vueuse/core"
 import { useGlobalConfig } from "easybill-ui"
-import type { Ref } from "vue"
 import type { Language } from "../../locale"
 
 export type TranslatorOption = Record<string, string | number> | string[]
 export type Translator = (path: string, option?: TranslatorOption) => string
+export type LocaleSource = Language | Ref<Language> | ComputedRef<Language>
+export type LocaleRef = Ref<Language> | ComputedRef<Language>
 export type LocaleContext = {
-  locale: Ref<Language>
-  lang: Ref<string>
+  locale: LocaleRef
+  lang: ComputedRef<string>
   t: Translator
 }
 
+const resolveLocale = (locale: LocaleSource): Language => (isRef(locale) ? locale.value : locale)
+
 export const buildTranslator =
-  (locale: MaybeRef<Language>): Translator =>
+  (locale: LocaleSource): Translator =>
   (path, option) =>
-    translate(path, option, unref(locale))
+    translate(path, option, resolveLocale(locale))
 
 export const translate = (path: string, option: undefined | TranslatorOption, locale: Language): string => {
   const value = get(locale, path, path) as string
@@ -27,9 +29,9 @@ export const translate = (path: string, option: undefined | TranslatorOption, lo
   return value.replace(/\{(\w+)\}/g, (_, key) => `${option?.[key] ?? `{${key}}`}`)
 }
 
-export const buildLocaleContext = (locale: ComputedRef<Language>): LocaleContext => {
-  const lang = computed(() => unref(locale).name)
-  const localeRef = isRef(locale) ? locale : ref(locale)
+export const buildLocaleContext = (locale: LocaleSource): LocaleContext => {
+  const localeRef = (isRef(locale) ? locale : ref(locale)) as LocaleRef
+  const lang = computed(() => localeRef.value.name)
   return {
     lang,
     locale: localeRef,