@semi-kit/hooks 1.1.9 → 1.1.11

package/lib/drawer.d.mts

@@ -0,0 +1,24 @@
+import { Ref } from "vue";
+interface UseDrawerReturn {
+  /**
+   * 显示状态
+   */
+  showDrawer: Ref<boolean>;
+  /**
+   * 打开 Drawer
+   */
+  openDrawer: () => void;
+  /**
+   * 关闭 Drawer
+   */
+  closeDrawer: () => void;
+  /**
+   * 切换 Drawer 状态
+   */
+  toggleDrawer: () => void;
+}
+/**
+ * Drawer Hook
+ */
+declare const useDrawer: () => UseDrawerReturn;
+export { UseDrawerReturn, useDrawer };

package/lib/drawer.mjs

@@ -0,0 +1 @@
+import{ref}from"vue";const useDrawer=()=>{let t=ref(!1);return{showDrawer:t,closeDrawer:()=>{t.value=!1},openDrawer:()=>{t.value=!0},toggleDrawer:()=>{t.value=!t.value}}};export{useDrawer};

package/lib/dropdown.d.mts

@@ -0,0 +1,24 @@
+import { Ref } from "vue";
+interface UseDropdownReturn {
+  /**
+   * 显示状态
+   */
+  showDropdown: Ref<boolean>;
+  /**
+   * 打开 Dropdown
+   */
+  openDropdown: () => void;
+  /**
+   * 关闭 Dropdown
+   */
+  closeDropdown: () => void;
+  /**
+   * 切换 Dropdown 状态
+   */
+  toggleDropdown: () => void;
+}
+/**
+ * Dropdown Hook
+ */
+declare const useDropdown: () => UseDropdownReturn;
+export { UseDropdownReturn, useDropdown };

package/lib/dropdown.mjs

@@ -0,0 +1 @@
+import{ref}from"vue";const useDropdown=()=>{let t=ref(!1);return{showDropdown:t,closeDropdown:()=>{t.value=!1},openDropdown:()=>{t.value=!0},toggleDropdown:()=>{t.value=!t.value}}};export{useDropdown};

package/lib/filter-column.d.mts

@@ -0,0 +1,19 @@
+import { ComputedRef, Ref } from "vue";
+import { DataTableColumns } from "naive-ui";
+import { InternalRowData } from "naive-ui/es/data-table/src/interface";
+interface UseFilterColumnReturn {
+  /**
+   * 表格列配置
+   */
+  tableColumns: ComputedRef<DataTableColumns<InternalRowData>>;
+  /**
+   * 可过滤的列配置列表
+   */
+  filterColumns: Ref<any[]>;
+  /**
+   * 忽略的列类型
+   */
+  ignoreTypes: string[];
+}
+declare const useFilterColumn: (columns: Ref<DataTableColumns<any>>) => UseFilterColumnReturn;
+export { UseFilterColumnReturn, useFilterColumn };

package/lib/filter-column.mjs

@@ -0,0 +1 @@
+import{computed,ref,watch}from"vue";const useFilterColumn=r=>{let i=[`selection`,`expand`],a=ref([]);return watch(()=>r.value,e=>{a.value=e.map(e=>({show:!0,...e}))},{immediate:!0}),{tableColumns:computed(()=>{let e=[];for(let t=0;t<a.value.length;t++){let{show:n,...r}=a.value[t];n&&(a.value[t].type===`selection`?e.push({...r,width:45}):e.push({resizable:!0,ellipsis:{tooltip:{scrollable:!0}},minWidth:50,...r}))}return e}),filterColumns:a,ignoreTypes:i}};export{useFilterColumn};

package/lib/form.d.mts

@@ -0,0 +1,46 @@
+import { Ref } from "vue";
+import { FormItemRule, FormValidationError } from "naive-ui";
+import { FormInst } from "naive-ui/es/form/src/interface";
+interface UseFormReturn<T> {
+  /**
+   * 表单数据
+   */
+  formData: Ref<any>;
+  /**
+   * 表单实例引用
+   */
+  formInst: Ref<FormInst | null>;
+  /**
+   * 更新表单字段数据
+   * @param fields - 需要更新的字段对象
+   */
+  updateField: (fields: Partial<T> | null | undefined) => void;
+  /**
+   * 重置表单数据，并移除校验
+   */
+  resetField: () => void;
+  /**
+   * 重置表单验证状态
+   */
+  restoreValidation: () => void;
+  /**
+   * 验证表单
+   * @param validateCallback - 验证回调函数
+   * @param shouldRuleBeApplied - 规则应用条件函数
+   */
+  validate: (validateCallback?: (errors?: FormValidationError[]) => void, shouldRuleBeApplied?: (rule: FormItemRule) => boolean) => any;
+  /**
+   * 过滤列表选择项提供给表单
+   * @param selectedList - 选中列表
+   * @param formData - 表单数据
+   * @returns 过滤后的数据对象
+   */
+  useFilterSelectedData: <Q = any, R = any>(selectedList?: Q, formData?: R) => any;
+}
+/**
+ * 表单数据管理 Hook
+ * @param data - 原始表单数据
+ * @returns 表单管理对象
+ */
+declare const useForm: <T = never>(data: NoInfer<T>) => UseFormReturn<T>;
+export { UseFormReturn, useForm };

package/lib/form.mjs

@@ -0,0 +1 @@
+import{ref,toRaw}from"vue";import{cloneDeep,pick}from"es-toolkit";const useForm=i=>{let a=ref(structuredClone(i)),o=ref(null),s=()=>o?.value?.restoreValidation(),c=(e,n)=>o?.value?.validate(e,n),l=e=>{e&&Object.assign(a.value,e)};return{updateField:l,resetField:()=>{l(cloneDeep(i)),s()},formData:a,formInst:o,restoreValidation:s,validate:c,useFilterSelectedData:(e,r)=>pick(toRaw(e).at(0)??{},Object.keys(r??{}))}};export{useForm};

package/lib/forward-inst.d.mts

@@ -1,16 +1,28 @@
+interface UseForwardInstReturn<T> {
+  /**
+   * 转发实例函数
+   * @param el - 目标实例元素
+   */
+  forwardInst: (el: any) => void;
+  /**
+   * 目标实例（仅在 exposeTarget 为 true 时存在）
+   */
+  targetInst?: {
+    value: T | null;
+  };
+}
+/**
+ * 转发子组件实例
+ * @param options - 配置选项
+ * @param options.methods - 需要暴露的方法对象
+ * @param options.exposeTarget - 是否暴露目标实例
+ * @returns 实例转发对象
+ */
 declare function useForwardInst<T>({
   methods,
   exposeTarget
 }?: {
   methods?: Record<string, any>;
   exposeTarget?: boolean;
-}): {
-  forwardInst: (el: any) => void;
-  targetInst: {
-    value: T | null;
-  };
-} | {
-  forwardInst: (el: any) => void;
-  targetInst?: undefined;
-};
-export { useForwardInst };
+}): UseForwardInstReturn<T>;
+export { UseForwardInstReturn, useForwardInst };

package/lib/index.d.mts

@@ -1,3 +1,11 @@
-import { useForwardInst } from "./forward-inst.mjs";
-import { useSortable } from "./sortable.mjs";
-export { useForwardInst, useSortable };
+import { UseDrawerReturn, useDrawer } from "./drawer.mjs";
+import { UseDropdownReturn, useDropdown } from "./dropdown.mjs";
+import { UseFilterColumnReturn, useFilterColumn } from "./filter-column.mjs";
+import { UseFormReturn, useForm } from "./form.mjs";
+import { UseForwardInstReturn, useForwardInst } from "./forward-inst.mjs";
+import { UseSortableReturn, useSortable } from "./sortable.mjs";
+import { UseTreeReturn, useTree } from "./tree.mjs";
+import { UseModalReturn, useModal } from "./modal.mjs";
+import { UsePopoverReturn, usePopover } from "./popover.mjs";
+import { UseTableSelectionReturn, useTableSelection } from "./selection.mjs";
+export { UseDrawerReturn, UseDropdownReturn, UseFilterColumnReturn, UseFormReturn, UseForwardInstReturn, UseModalReturn, UsePopoverReturn, UseSortableReturn, UseTableSelectionReturn, UseTreeReturn, useDrawer, useDropdown, useFilterColumn, useForm, useForwardInst, useModal, usePopover, useSortable, useTableSelection, useTree };

package/lib/index.mjs

@@ -1 +1 @@
-import{useForwardInst}from"./forward-inst.mjs";import{useSortable}from"./sortable.mjs";export{useForwardInst,useSortable};
+import{useDrawer}from"./drawer.mjs";import{useDropdown}from"./dropdown.mjs";import{useFilterColumn}from"./filter-column.mjs";import{useForm}from"./form.mjs";import{useForwardInst}from"./forward-inst.mjs";import{useSortable}from"./sortable.mjs";import{useTree}from"./tree.mjs";import{useModal}from"./modal.mjs";import{usePopover}from"./popover.mjs";import{useTableSelection}from"./selection.mjs";export{useDrawer,useDropdown,useFilterColumn,useForm,useForwardInst,useModal,usePopover,useSortable,useTableSelection,useTree};

package/lib/modal.d.mts

@@ -0,0 +1,24 @@
+import { Ref } from "vue";
+interface UseModalReturn {
+  /**
+   * Modal 显示状态
+   */
+  showModal: Ref<boolean>;
+  /**
+   * 打开 Modal
+   */
+  openModal: () => void;
+  /**
+   * 关闭 Modal
+   */
+  closeModal: () => void;
+  /**
+   * 切换 Modal 状态
+   */
+  toggleModal: () => void;
+}
+/**
+ * Modal Hook
+ */
+declare const useModal: () => UseModalReturn;
+export { UseModalReturn, useModal };

package/lib/modal.mjs

@@ -0,0 +1 @@
+import{ref}from"vue";const useModal=()=>{let t=ref(!1);return{showModal:t,closeModal:()=>{t.value=!1},openModal:()=>{t.value=!0},toggleModal:()=>{t.value=!t.value}}};export{useModal};

package/lib/popover.d.mts

@@ -0,0 +1,24 @@
+import { Ref } from "vue";
+interface UsePopoverReturn {
+  /**
+   * Popover 显示状态
+   */
+  showPopover: Ref<boolean>;
+  /**
+   * 打开 Popover
+   */
+  openPopover: () => void;
+  /**
+   * 关闭 Popover
+   */
+  closePopover: () => void;
+  /**
+   * 切换 Popover 状态
+   */
+  togglePopover: () => void;
+}
+/**
+ * Popover Hook
+ */
+declare const usePopover: () => UsePopoverReturn;
+export { UsePopoverReturn, usePopover };

package/lib/popover.mjs

@@ -0,0 +1 @@
+import{ref}from"vue";const usePopover=()=>{let t=ref(!1);return{showPopover:t,closePopover:()=>{t.value=!1},openPopover:()=>{t.value=!0},togglePopover:()=>{t.value=!t.value}}};export{usePopover};

package/lib/selection.d.mts

@@ -0,0 +1,37 @@
+import { Ref } from "vue";
+import { RowData } from "naive-ui/es/data-table/src/interface";
+type MixedArray = (string | number)[];
+interface UseTableSelectionReturn {
+  /**
+   * 选择 key 列表
+   */
+  selectedKeys: Ref<MixedArray>;
+  /**
+   * 获取行数据 key 值
+   * @param row - 行数据
+   * @returns key 值
+   */
+  rowKey: (row: RowData) => any;
+  /**
+   * 选中项改变回调函数
+   * @param keys - 选中的 key 列表
+   * @param rows - 选中的行数据列表
+   */
+  checkedChange: (keys: MixedArray, rows: object[]) => void;
+  /**
+   * 清空选中项
+   */
+  clearSelected: () => void;
+  /**
+   * 获取选中 key 列表
+   * @returns 选中 key 列表
+   */
+  getSelectedKeys: () => MixedArray;
+  /**
+   * 获取选中行数据列表
+   * @returns 选中数据列表
+   */
+  getSelectedRows: () => object[];
+}
+declare const useTableSelection: (keyField: string) => UseTableSelectionReturn;
+export { UseTableSelectionReturn, useTableSelection };

package/lib/selection.mjs

@@ -0,0 +1 @@
+import{ref,toRaw}from"vue";const useTableSelection=n=>{let r=ref([]),i=ref([]);return{selectedKeys:r,clearSelected:()=>{r.value=[],i.value=[]},rowKey:e=>e[n],checkedChange:(e,t)=>{r.value=e,i.value=t},getSelectedKeys:()=>toRaw(r.value),getSelectedRows:()=>i.value.map(e=>toRaw(e))}};export{useTableSelection};

package/lib/sortable.d.mts

@@ -1,8 +1,27 @@
 import Sortable from "sortablejs";
-declare const useSortable: (id: string, options?: Sortable.Options) => {
-  instance: null;
+interface UseSortableReturn {
+  /**
+   * Sortable 实例
+   */
+  instance: Sortable | null;
+  /**
+   * 初始化 Sortable
+   */
   initSortable: () => void;
+  /**
+   * 获取 Sortable 实例
+   * @returns Sortable 实例或 null
+   */
   getInstance: () => Sortable | null;
-  destroy: () => null;
-};
-export { useSortable };
+  /**
+   * 销毁 Sortable 实例
+   */
+  destroy: () => void;
+}
+/**
+ * Sortable Hook
+ * @param selector - 目标元素选择器
+ * @param options - Sortable 配置选项
+ */
+declare const useSortable: (selector: string, options?: Sortable.Options) => UseSortableReturn;
+export { UseSortableReturn, useSortable };

package/lib/sortable.mjs

@@ -1 +1 @@
-import Sortable from"sortablejs";const useSortable=(t,n)=>{let r=null;return{instance:r,initSortable:()=>{let i=document.getElementById(t);i&&(r=Sortable.create(i,{animation:500,...n}))},getInstance:()=>r,destroy:()=>r&&=(r?.destroy(),null)}};export{useSortable};
+import Sortable from"sortablejs";const useSortable=(t,n)=>{let r=null;return{instance:r,initSortable:()=>{let i=document.querySelector(t);i&&(r=Sortable.create(i,{animation:500,...n}))},getInstance:()=>r,destroy:()=>r&&=(r?.destroy(),null)}};export{useSortable};

package/lib/tree.d.mts

@@ -0,0 +1,79 @@
+import { Ref } from "vue";
+type MixedArray = (string | number)[];
+interface UseTreeReturn<T> {
+  /**
+   * 当前选中的节点 key 列表
+   */
+  selectedKeys: Ref<MixedArray>;
+  /**
+   * 搜索文本
+   */
+  searchText: Ref<string>;
+  /**
+   * 全选状态的节点 key 列表
+   */
+  checkedKeys: Ref<MixedArray>;
+  /**
+   * 全选状态的节点数据列表
+   */
+  checkedRows: Ref<T[]>;
+  /**
+   * 半选状态的节点 key 列表
+   */
+  halfCheckedKeys: Ref<MixedArray>;
+  /**
+   * 半选状态的节点数据列表
+   */
+  halfCheckedRows: Ref<T[]>;
+  /**
+   * 更新全选状态的 key 列表
+   * @param val - 新 key 列表
+   */
+  updateCheckedKeys: (val: MixedArray) => void;
+  /**
+   * 更新全选状态的数据列表
+   * @param val - 新数据列表
+   */
+  updateCheckedRows: (val: T[]) => void;
+  /**
+   * 更新半选状态的 key 列表
+   * @param val - 新 key 列表
+   */
+  updateHalfCheckedKeys: (val: MixedArray) => void;
+  /**
+   * 更新半选状态的 rows 列表
+   * @param val - 新 rows 列表
+   */
+  updateHalfCheckedRows: (val: T[]) => void;
+  /**
+   * 节点勾选项发生变化时的回调函数
+   * @param keys - 勾选 key 列表
+   * @param options - 勾选数据列表
+   */
+  onUpdateChecked: (keys: MixedArray, options: T[]) => void;
+  /**
+   * 节点部分勾选项发生变化时的回调函数
+   * @param keys - 半选 key 列表
+   * @param options - 半选数据列表
+   */
+  onUpdateHalfChecked: (keys: MixedArray, options: T[]) => void;
+  /**
+   * 根据条件过滤全选状态的 key 列表
+   * @param predicate - 过滤条件函数
+   * @param key - 数据中作为 key 的字段名，默认为 'id'
+   * @returns 过滤后 key 列表
+   */
+  getFilteredCheckedKeys: (predicate: (value: T, index: number) => boolean, key?: string) => MixedArray;
+  /**
+   * 根据条件过滤全选状态的 rows 列表
+   * @param predicate - 过滤条件函数
+   * @returns 过滤后 rows 列表
+   */
+  getFilteredCheckedRows: (predicate: (value: T, index: number) => boolean) => T[];
+  /**
+   * 清空所有勾选状态
+   */
+  clear: () => void;
+}
+declare const useTree: <T>() => UseTreeReturn<T>;
+export { UseTreeReturn, useTree };

package/lib/tree.mjs

@@ -0,0 +1 @@
+import{ref,toRaw}from"vue";const useTree=()=>{let n=ref([]),r=ref(``),i=ref([]),a=ref([]),o=ref([]),s=ref([]),c=e=>i.value=e,l=e=>a.value=e,u=e=>o.value=e,d=e=>s.value=e,f=(e,t)=>{i.value=e,a.value=t},p=(e,t)=>{o.value=e,s.value=t},m=(e,t=`id`)=>h(e).map(e=>e[t]),h=e=>toRaw(a.value).filter((t,n)=>e(t,n));return{checkedRows:a,getFilteredCheckedKeys:m,getFilteredCheckedRows:h,halfCheckedRows:s,clear:()=>(c([]),u([])),updateHalfCheckedKeys:u,updateCheckedKeys:c,updateCheckedRows:l,updateHalfCheckedRows:d,selectedKeys:n,searchText:r,halfCheckedKeys:o,checkedKeys:i,onUpdateChecked:f,onUpdateHalfChecked:p}};export{useTree};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semi-kit/hooks",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "Commonly used Hooks collection",
   "type": "module",
   "license": "MIT",
@@ -16,8 +16,16 @@
   "types": "./lib/index.d.mts",
   "exports": {
     ".": "./lib/index.mjs",
+    "./drawer": "./lib/drawer.mjs",
+    "./dropdown": "./lib/dropdown.mjs",
+    "./filter-column": "./lib/filter-column.mjs",
+    "./form": "./lib/form.mjs",
     "./forward-inst": "./lib/forward-inst.mjs",
+    "./modal": "./lib/modal.mjs",
+    "./popover": "./lib/popover.mjs",
+    "./selection": "./lib/selection.mjs",
     "./sortable": "./lib/sortable.mjs",
+    "./tree": "./lib/tree.mjs",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -34,12 +42,16 @@
     "typescript": "catalog:",
     "sortablejs": "catalog:",
     "@types/sortablejs": "catalog:",
-    "vue": "catalog:"
+    "vue": "catalog:",
+    "naive-ui": "catalog:",
+    "es-toolkit": "catalog:"
   },
   "peerDependencies": {
     "sortablejs": "*",
     "@types/sortablejs": "*",
-    "vue": "*"
+    "vue": "*",
+    "naive-ui": "*",
+    "es-toolkit": "*"
   },
   "peerDependenciesMeta": {
     "sortablejs": {
@@ -50,6 +62,12 @@
     },
     "vue": {
       "optional": true
+    },
+    "naive-ui": {
+      "optional": true
+    },
+    "es-toolkit": {
+      "optional": true
     }
   }
 }