@wyfex/ivue 0.19.3 → 0.20.0

package/dist/types/UseElTable/types.d.ts

@@ -24,14 +24,6 @@ export interface Edit {
     component: Component;
     attrs?: EditAttrs;
 }
-export interface TableColumnExtConfig {
-    header?: Header;
-    edit?: Edit;
-    formatter?: Function;
-    class?: string | string[];
-    style?: string | Record<string, unknown>;
-    slot?: boolean | string;
-}
 export interface TableColumn {
     label?: string;
     prop?: string;
@@ -43,7 +35,14 @@ export interface TableColumn {
     fixed?: boolean | string;
     sortable?: boolean;
     showOverflowTooltip?: boolean;
-    extConfig?: TableColumnExtConfig;
+    extConfig?: {
+        header?: Header;
+        edit?: Edit;
+        formatter?: Function;
+        class?: string | string[];
+        style?: string | Record<string, unknown>;
+        slot?: boolean | string;
+    };
     children?: TableColumn[];
 }
 export interface Selection {
@@ -94,7 +93,7 @@ export interface ExtConfig {
     pagination?: {
         total?: number;
         marginTop?: number;
-        position?: string;
+        position?: 'left' | 'center' | 'right';
         pageSizes?: number[];
         background?: boolean;
         layout?: string;

package/dist/types/UseElTimeSelect/index.vue.d.ts

@@ -0,0 +1,28 @@
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    useRender: {
+        type: import('vue').PropType<boolean | import('../../types').RenderConfig>;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | any[]) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    useRender: {
+        type: import('vue').PropType<boolean | import('../../types').RenderConfig>;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | any[]) => any) | undefined;
+}>, {
+    useRender: boolean | import('../../types').RenderConfig;
+    modelValue: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/UseElTimeSelect/props.d.ts

@@ -0,0 +1,13 @@
+import { PropType } from 'vue';
+import { RenderConfig } from '../../types';
+declare const _default: {
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    useRender: {
+        type: PropType<boolean | RenderConfig>;
+        default: boolean;
+    };
+};
+export default _default;

package/dist/types/UseElTimeSelect/types.d.ts

@@ -0,0 +1,6 @@
+import { ExtractPropTypes } from 'vue';
+import { default as componentProps } from './props';
+export type Props = ExtractPropTypes<typeof componentProps>;
+export type Emits = {
+    (e: 'update:modelValue', value: string | number | any[]): void;
+};

package/dist/types/UseRender/index.vue.d.ts

@@ -50,9 +50,9 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
     };
 }>> & Readonly<{}>, {
     class: string;
+    separator: string;
     style: string | Record<string, any>;
     emptyText: string;
-    separator: string;
     parseKey: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { default as UseCrudTable } from './UseCrudTable/index.vue';
+export { default as UseCrud } from './UseCrud/index.vue';
 export { default as UseElButton } from './UseElButton/index.vue';
 export { default as UseElCheckbox } from './UseElCheckbox/index.vue';
 export { default as UseElConfigProvider } from './UseElConfigProvider/index.vue';
@@ -11,6 +11,7 @@ export { default as UseElInput } from './UseElInput/index.vue';
 export { default as UseElSelect } from './UseElSelect/index.vue';
 export { default as UseElSwitch } from './UseElSwitch/index.vue';
 export { default as UseElTable } from './UseElTable/index.vue';
+export { default as UseElTimeSelect } from './UseElTimeSelect/index.vue';
 export { default as UseElTooltip } from './UseElTooltip/index.vue';
 export { default as UseElUpload } from './UseElUpload/index.vue';
 export { default as UseIconfont } from './UseIconfont/index.vue';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wyfex/ivue",
-  "version": "0.19.3",
-  "description": "万有前端 X 体系下基于 Vite8 + Vue3 + Typescript6 + ElementPlus2 构建的 iVue 组件库",
+  "version": "0.20.0",
+  "description": "万有前端 X 体系下基于 Vite8 + Vue3 + Typescript6 + ElementPlus2 构建的高性能组件库",
   "homepage": "https://wyfex.top/idocs/ivue",
   "type": "module",
   "main": "dist/index.umd.cjs",
@@ -37,7 +37,7 @@
     "wyfex",
     "ivue",
     "wyfex-ivue",
-    "万有前端",
+    "万有前端 X",
     "万有前端 X ·iVue"
   ],
   "author": "Symbol(王独秀) <963569210@qq.com>",
@@ -50,20 +50,20 @@
     "vue": ">=3.2.0 <4.0.0"
   },
   "devDependencies": {
-    "@types/node": "^26.1.1",
-    "@vitejs/plugin-vue": "^6.0.7",
+    "@types/node": "^26.1.2",
+    "@vitejs/plugin-vue": "^6.0.8",
     "@vue/tsconfig": "^0.9.1",
-    "@wyfex/iutils": "^0.45.0",
+    "@wyfex/iutils": "^0.55.0",
     "dayjs": "^1.11.21",
-    "element-plus": "^2.14.2",
+    "element-plus": "^2.14.3",
     "sass-embedded": "^1.100.0",
     "typescript": "~6.0.3",
-    "unplugin-auto-import": "^21.0.0",
+    "unplugin-auto-import": "^21.1.0",
     "unplugin-dts": "^1.0.3",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.1.4",
+    "vite": "^8.2.1",
     "vite-svg-loader": "^5.1.1",
-    "vue": "^3.5.39",
-    "vue-tsc": "^3.3.7"
+    "vue": "^3.5.41",
+    "vue-tsc": "^3.3.9"
   }
 }

package/src/components/UseCrud/defaultExtConfig.ts

@@ -0,0 +1,16 @@
+import type { MergedExtConfig } from './types'
+
+/**
+ * 默认扩展配置
+ */
+export default {
+  crudFetch: { queryImmediate: true, autoCancelQueryStrategy: 'unmount' },
+  mode: { type: 'PAGE' },
+  actionBar: {
+    margin: '20px 0',
+    showControlFormDisplayBtn: true,
+    reverse: false,
+    divider: { show: false, borderStyle: 'solid' }
+  },
+  modal: { type: 'Drawer' }
+} satisfies MergedExtConfig

package/src/components/UseCrud/props.ts

@@ -0,0 +1,25 @@
+import type { PropType } from 'vue'
+import type { Configs, MergedExtConfig } from './types'
+
+/**
+ * 组件props
+ */
+export default {
+  /**
+   * 配置 必传
+   * 1、该configs是【formColumns】和【tableColumns】的统一配置入口
+   * 2、该configs在【formColumns】和【tableColumns】的配置基础上新增了【queryLabel】、【onlySearch】和【tableOrder】配置项用于兼容特殊应用场景
+   */
+  configs: {
+    type: Array as PropType<Configs[]>,
+    required: true
+  },
+  /**
+   * 扩展配置 如【操作栏/弹窗】等
+   * 该extConfig是本组件extConfig和UseElTable组件extConfig合并后的扩展配置
+   */
+  extConfig: {
+    type: Object as PropType<MergedExtConfig>,
+    default: () => ({})
+  }
+}

package/src/components/UseCrud/types.ts

@@ -0,0 +1,161 @@
+import type {
+  Component,
+  ComputedRef,
+  ExtractPropTypes,
+  Ref,
+  ShallowRef
+} from 'vue'
+import componentProps from './props'
+import type { FormColumn } from '../UseElForm/types'
+import type {
+  TableColumn,
+  ExtConfig as TableExtConfig
+} from '../UseElTable/types'
+
+/**
+ * props类型
+ */
+export type Props = ExtractPropTypes<typeof componentProps>
+
+/**
+ * emits类型
+ */
+export type Emits = {
+  /** dictKeys事件 */
+  (e: 'onDictKeys', value?: string[]): void
+}
+
+/**
+ * 基础配置类型
+ */
+export type BaseConfigs = FormColumn & TableColumn
+
+/**
+ * 配置项接口
+ */
+export interface Configs extends BaseConfigs {
+  /** 查询表单项标签 当查询表单项标签和表格项标签不一致使使用 */
+  queryLabel?: string
+  /** 查询表单项属性 当查询表单项属性和表格项属性不一致使使用，可传以逗号分隔的字符串，组件内部自动拆解*/
+  queryProp?: string
+  /** 是否仅搜索 */
+  onlySearch?: boolean
+  /** 表格排序 */
+  tableOrder?: number
+}
+
+/**
+ * 分割线配置接口
+ */
+export interface Divider {
+  /** 是否显示分割线 */
+  show?: boolean
+  /** 分割线边框样式 */
+  borderStyle?: 'none' | 'solid' | 'hidden' | 'dashed'
+}
+
+/**
+ * 操作栏配置接口
+ */
+export interface ActionBar {
+  /** 操作栏外边距 */
+  margin?: string
+  /** 是否显示【收起/展开查询】按钮 */
+  showControlFormDisplayBtn?: boolean
+  /** 【收起/展开查询】按钮展开时图标 */
+  controlFormDisplayBtnWithOpenedIcon?: Component
+  /** 【收起/展开查询】按钮收起时图标 */
+  controlFormDisplayBtnWithClosedIcon?: Component
+  /** 是否反转操作栏按钮 仅showControlFormDisplayBtn为true时生效 */
+  reverse?: boolean
+  /** 操作栏底部分割线 */
+  divider?: Divider
+}
+
+/**
+ * extConfig接口
+ */
+export interface ExtConfig {
+  /** 增删改查请求配置项 */
+  crudFetch?: {
+    /** 查询api */
+    queryApi?: Function
+    /** 是否立即查询 */
+    queryImmediate?: boolean
+    /** 自动取消查询策略 配合signal实现接口取消请求 */
+    autoCancelQueryStrategy?: 'none' | 'unmount' | 'deactivate' | 'both'
+    /** 开始查询前钩子 用于注入字典数据等 */
+    onQueryBefore?: (done: () => void) => void
+    /** 查询错误钩子  */
+    onQueryError?: (err: any) => void
+    /** 删除api */
+    deleteApi?: Function
+  }
+  /** 操作栏配置项 */
+  actionBar?: ActionBar
+  /** 弹窗配置项 */
+  modal?: {
+    /** 弹窗类型 支持Drawer和Dialog */
+    type?: 'Drawer' | 'Dialog'
+    /** 其他配置项由于组件内部已进行v-bind透传，故不在此重复声明接口，详见UseElDrawer和UseElDialog组件types */
+  }
+}
+
+/**
+ * 合并后的extConfig类型 本组件ExtConfig和UseElTable组件ExtConfig合并
+ */
+export type MergedExtConfig = ExtConfig & TableExtConfig
+
+/**
+ * Crud状态类型
+ */
+export interface UseCrudState {
+  /** 表单列配置 */
+  formColumns: FormColumn[]
+  /** 表格列配置 */
+  tableColumns: TableColumn[]
+  /** 表单模型 查询表单的原始数据模型 */
+  formModel: Record<string, any>
+  /** 表单参数 查询表单提交接口的数据参数 */
+  formParams: Record<string, any>
+  /** 表格loading */
+  tableLoading: boolean
+  /** 表格数据 */
+  tableData: any[]
+  /** 当前页码 */
+  currentPage: number
+  /** 分页大小 */
+  pageSize: number
+  /** 分页总数 */
+  total: number
+  /** 字典映射 */
+  dictMap: Record<string, any>
+}
+
+/**
+ * Crud返回类型
+ */
+export interface UseCrudReturn {
+  state: Ref<UseCrudState>
+  heightComputed: ComputedRef<string>
+  fetchTableData: (
+    options?: { params?: Record<string, any>; isPageApi?: boolean },
+    cb?: () => void
+  ) => Promise<any>
+  onQuery: (e: Record<string, unknown>, done?: () => void) => void
+  onCancelQueryRequest: () => void
+  handleDelete: (
+    payload: { id?: string | number; ids?: string | Array<string | number> },
+    loadingConfig: { source?: Record<string, unknown>; key?: string },
+    successCb?: () => void,
+    errorCb?: (err: unknown) => void,
+    successMsg?: string
+  ) => Promise<void>
+  margin: ComputedRef<string | undefined>
+  actionBar: any
+  handleDisplayQueryForm: () => void
+  showModal: Ref<boolean>
+  modalComponent: ShallowRef<Component | null>
+  handleShowModal: () => Promise<void>
+  handleCloseModal: ComputedRef<() => void>
+}

package/src/components/UseElButton/types.ts

@@ -10,9 +10,7 @@ export type Props = ExtractPropTypes<typeof componentProps>
  * emits类型
  */
 export type Emits = {
-  /**
-   * 点击事件 默认自带防抖
-   */
+  /** 点击事件 默认自带防抖 */
   (e: 'click', value?: string | number | Record<string, unknown>): void
 }
 
@@ -20,31 +18,18 @@ export type Emits = {
  * extConfig接口
  */
 export interface ExtConfig {
-  /**
-   * 防抖配置项 无需防抖将delay设置为0即可
-   */
+  /** 防抖配置项 无需防抖将delay设置为0即可 */
   debounce?: {
-    /**
-     * 防抖时间
-     */
+    /** 防抖时间 */
     delay?: number
-    /**
-     * 是否立即开启防抖
-     */
+    /** 是否立即开启防抖 */
     immediate?: boolean
   }
-  /**
-   * 二次确认配置项
-   */
+  /** 二次确认配置项 */
   confirm?: {
-    /**
-     * 二次确认数据 显式设置则开启二次确认
-     * 可为String、Number、Object、Array，无需传递数据则显式设置为null
-     */
+    /** 二次确认数据 显式设置则开启二次确认，可为String、Number、Object、Array，无需传递数据则显式设置为null */
     data?: string | number | Record<string, unknown> | unknown[] | null
-    /**
-     * 二次确认类型 同ElButton类型
-     */
+    /** 二次确认类型 同ElButton类型 */
     type?:
       | 'default'
       | 'primary'
@@ -53,25 +38,15 @@ export interface ExtConfig {
       | 'danger'
       | 'info'
       | ''
-    /**
-     * 二次确认数据主键key 对象或对象数组需要
-     */
+    /** 二次确认数据主键key 对象或对象数组需要 */
     dataKey?: string
-    /**
-     * 是否将数组转换为以逗号分隔的字符串 如：[1,2] => '1,2'
-     */
+    /** 是否将数组转换为以逗号分隔的字符串 如：[1,2] => '1,2' */
     toJoin?: boolean
-    /**
-     * 是否追加s到dataKey后面 如：id => ids
-     */
+    /** 是否追加s到dataKey后面 如：id => ids */
     appendS?: boolean
-    /**
-     * 二次确认弹框标题
-     */
+    /** 二次确认弹框标题 */
     title?: string
-    /**
-     * 二次确认弹框内容
-     */
+    /** 二次确认弹框内容 */
     content?: string
   }
 }

package/src/components/UseElCheckbox/types.ts

@@ -10,6 +10,6 @@ export type Props = ExtractPropTypes<typeof componentProps>
  * emits类型
  */
 export type Emits = {
-  // 更新value值
+  /** 更新value值 */
   (e: 'update:modelValue', value: string | number | (string | number)[]): void
 }

package/src/components/UseElConfigProvider/types.ts

@@ -11,25 +11,26 @@ export type Props = ExtractPropTypes<typeof componentProps>
  * extConfig接口
  */
 export interface ExtConfig {
-  /**
-   * 字典属性配置项
-   */
+  /** 字典属性配置项 */
   dictProps?: DictProps
-  /**
-   * 表格配置项
-   * pageHeight：表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度
-   * modalHeight：表格弹窗高度 extConfig.mode.type='MODAL'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度
-   * pageBottomOffset：表格页面底部预留偏移
-   * modalBottomOffset：表格弹窗底部预留偏移
-   */
+  /** crud配置项 */
+  crud?: {
+    /** crud表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
+    pageHeight?: string
+    /** crud表格弹窗高度 extConfig.mode.type='MODAL'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
+    modalHeight?: string
+  }
+  /** 表格配置项 */
   table?: {
+    /** 表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
     pageHeight?: string
+    /** 表格弹窗高度 extConfig.mode.type='MODAL'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
     modalHeight?: string
+    /** 表格页面底部预留偏移 */
     pageBottomOffset?: number
+    /** 表格弹窗底部预留偏移 */
     modalBottomOffset?: number
   }
-  /**
-   * 上传配置项
-   */
+  /** 上传配置项 */
   upload?: UploadConfig
 }

package/src/components/UseElDatePicker/types.ts

@@ -7,9 +7,9 @@ import componentProps from './props'
 export type Props = ExtractPropTypes<typeof componentProps>
 
 /**
- * emits接口
+ * emits类型
  */
-export interface Emits {
-  // 更新value值
+export type Emits = {
+  /** 更新value值 */
   (e: 'update:modelValue', value: string | number | any[]): void
 }

package/src/components/UseElDialog/props.ts

@@ -17,11 +17,18 @@ export default {
     default: true
   },
   /**
-   * el-dialog内容区域最大高度
+   * el-dialog CSS 中的 margin-top 值 默认12dvh
+   */
+  top: {
+    type: String,
+    default: '12dvh'
+  },
+  /**
+   * el-dialog内容区域最大高度 默认为autoMax，内部自动根据浏览器高度进行计算最大高度
    */
   maxHeight: {
     type: [String, Number],
-    default: ''
+    default: 'autoCalcMaxHeight'
   },
   /**
    * el-scrollbar不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能
@@ -108,6 +115,13 @@ export default {
     type: String,
     default: '取消'
   },
+  /**
+   * 确定按钮loading状态
+   */
+  confirmLoading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * 取消按钮类型
    */

package/src/components/UseElDrawer/props.ts

@@ -87,6 +87,13 @@ export default {
     type: String,
     default: '取消'
   },
+  /**
+   * 确定按钮loading状态
+   */
+  confirmLoading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * 取消按钮类型 同ElButton类型
    */

package/src/components/UseElForm/types.ts

@@ -11,9 +11,7 @@ export type Props = ExtractPropTypes<typeof componentProps>
  * emits类型
  */
 export type Emits = {
-  /**
-   * dictKeys事件
-   */
+  /** dictKeys事件 */
   (e: 'onDictKeys', value?: string[]): void
 }
 
@@ -369,15 +367,10 @@ export interface FormColumn {
   label?: string
   /**
    * el-form-item的prop
+   * 一般情况下为必传 为适配UseCrud组件类型特将此属性设置为非必传
    * 可传以逗号分隔的字符串，组件内部自动拆解，如'startDate,endDate' => { startDate: xxx, endDate: yyy }
    */
-  prop: string
-  /**
-   * 查询prop
-   * 当查询表单（如起止时间字段拆分）和列表prop字段不一致时传入该配置项
-   * 可传以逗号分隔的字符串，组件内部自动拆解，亦可传入字符串数组
-   */
-  queryProp?: string | string[]
+  prop?: string
   /**
    * 是否为必填项
    * 如为boolean则使用基础必填校验