@wyfex/ivue 0.19.2 → 0.19.4

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

@@ -77,6 +77,7 @@ export interface ExtConfig {
     selection?: Selection;
     index?: {
         label?: string;
+        isContinuous?: boolean;
         width?: number;
         align?: string;
         fixed?: boolean;

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

@@ -49,8 +49,8 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
         default: string;
     };
 }>> & Readonly<{}>, {
-    style: string | Record<string, any>;
     class: string;
+    style: string | Record<string, any>;
     emptyText: string;
     separator: string;
     parseKey: string;

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';
@@ -17,3 +17,4 @@ export { default as UseIconfont } from './UseIconfont/index.vue';
 export { default as UseLineTitle } from './UseLineTitle/index.vue';
 export { default as UseRender } from './UseRender/index.vue';
 export { default as UseSvgIcon } from './UseSvgIcon/index.vue';
+export { useCrud } from './UseCrud/useCrudWithBusiness';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyfex/ivue",
-  "version": "0.19.2",
+  "version": "0.19.4",
   "description": "万有前端 X 体系下基于 Vite8 + Vue3 + Typescript6 + ElementPlus2 构建的 iVue 组件库",
   "homepage": "https://wyfex.top/idocs/ivue",
   "type": "module",
@@ -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-dts": "^1.0.3",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.1.3",
+    "vite": "^8.1.5",
     "vite-svg-loader": "^5.1.1",
-    "vue": "^3.5.39",
-    "vue-tsc": "^3.3.7"
+    "vue": "^3.5.40",
+    "vue-tsc": "^3.3.8"
   }
 }

package/src/components/UseCrud/defaultExtConfig.ts

@@ -0,0 +1,15 @@
+import type { MergedExtConfig } from './types'
+
+/**
+ * 默认扩展配置
+ */
+export default {
+  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】的配置基础上新增了【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,85 @@
+import type { Component, ExtractPropTypes } 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 = Omit<FormColumn, 'prop'> & Omit<TableColumn, 'prop'>
+
+/**
+ * 配置项接口
+ */
+export interface Configs extends BaseConfigs {
+  prop: string
+  onlySearch?: boolean
+  tableOrder?: number
+}
+
+/**
+ * 分割线配置接口
+ * show：是否显示分割线
+ * borderStyle：分割线边框样式
+ */
+export interface Divider {
+  show?: boolean
+  borderStyle?: 'none' | 'solid' | 'hidden' | 'dashed'
+}
+
+/**
+ * 操作栏配置接口
+ * margin：操作栏外边距
+ * showControlFormDisplayBtn：是否显示【收起/展开查询】按钮
+ * controlFormDisplayBtnWithOpenedIcon：【收起/展开查询】按钮展开时图标
+ * controlFormDisplayBtnWithClosedIcon：【收起/展开查询】按钮收起时图标
+ * reverse：是否反转操作栏按钮 仅showControlFormDisplayBtn为true时生效
+ * divider：操作栏底部分割线
+ */
+export interface ActionBar {
+  margin?: string
+  showControlFormDisplayBtn?: boolean
+  controlFormDisplayBtnWithOpenedIcon?: Component
+  controlFormDisplayBtnWithClosedIcon?: Component
+  reverse?: boolean
+  divider?: Divider
+}
+
+/**
+ * extConfig接口
+ */
+export interface ExtConfig {
+  /**
+   * 操作栏配置项
+   */
+  actionBar?: ActionBar
+  /**
+   * 弹窗配置项
+   * type：弹窗类型 支持Drawer和Dialog
+   * 其他配置项由于组件内部已进行v-bind透传，不不在此重复声明接口，详见UseElDrawer和UseElDialog组件types
+   */
+  modal?: { type?: 'Drawer' | 'Dialog' }
+}
+
+/**
+ * 合并后的extConfig类型 本组件ExtConfig和UseElTable组件ExtConfig合并
+ */
+export type MergedExtConfig = ExtConfig & TableExtConfig

package/src/components/UseElCheckbox/types.ts

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

package/src/components/UseElConfigProvider/types.ts

@@ -15,6 +15,15 @@ export interface ExtConfig {
    * 字典属性配置项
    */
   dictProps?: DictProps
+  /**
+   * crud配置项
+   * pageHeight：crud表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度
+   * modalHeight：crud表格弹窗高度 extConfig.mode.type='MODAL'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度
+   */
+  crud?: {
+    pageHeight?: string
+    modalHeight?: string
+  }
   /**
    * 表格配置项
    * pageHeight：表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度

package/src/components/UseElForm/types.ts

@@ -8,13 +8,13 @@ import type { RenderConfig, UseDict } from '@/types'
 export type Props = ExtractPropTypes<typeof componentProps>
 
 /**
- * emits接口
+ * emits类型
  */
-export interface Emits {
-  // dictKeys事件
+export type Emits = {
+  /**
+   * dictKeys事件
+   */
   (e: 'onDictKeys', value?: string[]): void
-  // 更新formModel
-  (e: 'update:formModel', value: Record<string, any>): void
 }
 
 /**
@@ -55,7 +55,7 @@ export interface QueryConfig {
  * inputConfig接口
  */
 export interface InputConfig {
-  useRender: boolean | RenderConfig
+  useRender?: boolean | RenderConfig
   type?:
     | 'text'
     | 'textarea'
@@ -76,78 +76,150 @@ export interface InputConfig {
   resize?: string
   showPassword?: boolean
   placeholder?: string
-  width?: string // 默认el-input的width为100% 可设置width为''或具体宽度值，为''则使用默认的el-input宽度
-  autoFocus?: boolean // 为true则对el-input使用v-focus聚焦指令
-  prefixContent?: string | object // el-input头部插槽内容
-  suffixContent?: string | object // el-input尾部插槽内容
-  prependContent?: string | object // el-input前置插槽内容
-  appendContent?: string | object // el-input后置插槽内容
-  unit?: string | object // 在el-input右外部显示单位
-  onClear?: (...args: any) => any // el-input的clear事件
-  inputEvent?: Function // el-input的input事件
-  onKeyupEnter?: (...args: any) => any // el-input的keyup.enter事件
+  /**
+   * 默认el-input的width为100% 可设置width为''或具体宽度值，为''则使用默认的el-input宽度
+   */
+  width?: string
+  /**
+   * 为true则对el-input使用v-focus聚焦指令
+   */
+  autoFocus?: boolean
+  /**
+   * el-input头部插槽内容
+   */
+  prefixContent?: string | object
+  /**
+   * el-input尾部插槽内容
+   */
+  suffixContent?: string | object
+  /**
+   * el-input前置插槽内容
+   */
+  prependContent?: string | object
+  /**
+   * el-input后置插槽内容
+   */
+  appendContent?: string | object
+  /**
+   * 在el-input右外部显示单位
+   */
+  unit?: string | object
+  /**
+   * el-input的clear事件
+   */
+  onClear?: Function
+  /**
+   * el-input的input事件
+   */
+  inputEvent?: Function
+  /**
+   * el-input的keyup.enter事件
+   */
+  onKeyupEnter?: Function
 }
 
 /**
  * inputNumberConfig接口
  */
 export interface InputNumberConfig {
-  useRender: boolean | RenderConfig
+  useRender?: boolean | RenderConfig
   min?: number
   max?: number
   step?: number
   precision?: number
   placeholder?: string
   disabledScientific?: boolean
-  unit?: string | object // 在el-input-number右外部显示单位
+  /**
+   * 在el-input-number右外部显示单位
+   */
+  unit?: string | object
 }
 
 /**
  * radioConfig接口
  */
 export interface RadioConfig {
-  useRender: boolean | RenderConfig
-  options?: Array<{ label: string; value: string | number }> // el-radio的选项集
-  props?: { value: string; label?: string } // el-radio的props配置项
-  reverse?: boolean // 是否反转单选框和标签的位置
-  onChange?: (...args: any) => any // el-radio的change事件
+  useRender?: boolean | RenderConfig
+  /**
+   * el-radio的选项集
+   */
+  options?: Array<{ label: string; value: string | number }>
+  /**
+   * el-radio的props配置项
+   */
+  props?: { value: string; label?: string }
+  /**
+   * 是否反转单选框和标签的位置
+   */
+  reverse?: boolean
+  /**
+   * el-radio的change事件
+   */
+  onChange?: Function
 }
 
 /**
  * selectConfig接口
  */
 export interface SelectConfig {
-  useRender: boolean | RenderConfig
+  useRender?: boolean | RenderConfig
   multiple?: boolean
   clearable?: boolean
   filterable?: boolean
   placeholder?: string
   options?: Array<{ label: string; value: string | number }>
   props?: { value: string; label?: string }
-  useV2: boolean //是否使用v2版本
-  reverse?: boolean // 是否反转
-  toJoin?: boolean // 是否将值为数组转为以逗号分隔的字符串
-  width?: string // 默认el-select的width为100% 可设置width为''或具体宽度值，为''则使用默认的el-select宽度
-  onChange?: (...args: any) => any // el-select的change事件
+  /**
+   * 是否使用v2版本
+   */
+  useV2: boolean
+  /**
+   * 是否反转
+   */
+  reverse?: boolean
+  /**
+   * 是否将值为数组转为以逗号分隔的字符串
+   */
+  toJoin?: boolean
+  /**
+   * 默认el-select的width为100% 可设置width为''或具体宽度值，为''则使用默认的el-select宽度
+   */
+  width?: string
+  /**
+   * el-select的change事件
+   */
+  onChange?: Function
 }
 
 /**
  * cascaderConfig接口
  */
 export interface CascaderConfig {
-  useRender: boolean | RenderConfig
+  useRender?: boolean | RenderConfig
   clearable?: boolean
-  options?: Array<{ label: string; value: string | number }> //el-cascader的选项集
-  props?: { value: string; label?: string } //el-cascader的props配置项
-  width?: string //默认el-cascader的width为100% 可设置width为''或具体宽度值，为''则使用默认的el-cascader宽度
-  onChange?: (...args: any) => any //el-select的change事件
+  /**
+   * el-cascader的选项集
+   */
+  options?: Array<{ label: string; value: string | number }>
+  /**
+   * el-cascader的props配置项
+   */
+  props?: { value: string; label?: string }
+  /**
+   * 默认el-cascader的width为100% 可设置width为''或具体宽度值，为''则使用默认的el-cascader宽度
+   */
+  width?: string
+  /**
+   * el-select的change事件
+   */
+  onChange?: Function
 }
 
 /**
  * datePickerConfig接口
  */
 export interface DatePickerConfig {
-  useRender: boolean | RenderConfig
+  useRender?: boolean | RenderConfig
   type?:
     | 'year'
     | 'years'
@@ -169,17 +241,29 @@ export interface DatePickerConfig {
   startPlaceholder?: string
   endPlaceholder?: string
   rangeSeparator?: string
-  width?: string // 默认el-date-picker的width为100% 可设置width为''或具体宽度值，为''则使用默认的el-date-picker宽度
-  onCalendarChange?: Function // el-date-picker的calendar-change事件
-  onClear?: Function // el-date-picker的clear事件
-  onChange?: Function // el-date-picker的change事件
+  /**
+   * 默认el-date-picker的width为100% 可设置width为''或具体宽度值，为''则使用默认的el-date-picker宽度
+   */
+  width?: string
+  /**
+   * el-date-picker的calendar-change事件
+   */
+  onCalendarChange?: Function
+  /**
+   * el-date-picker的clear事件
+   */
+  onClear?: Function
+  /**
+   * el-date-picker的change事件
+   */
+  onChange?: Function
 }
 
 /**
  * timePickerConfig接口
  */
 export interface TimePickerConfig {
-  useRender: boolean | RenderConfig
+  useRender?: boolean | RenderConfig
   startPlaceholder?: string
   endPlaceholder?: string
   rangeSeparator?: string
@@ -187,38 +271,56 @@ export interface TimePickerConfig {
   editable?: boolean
   format?: string
   valueFormat?: string
-  onChange?: (...args: any) => any //el-date-picker的change事件
+  /**
+   * el-date-picker的change事件
+   */
+  onChange?: Function
 }
 
 /**
  * timeSelectConfig接口
  */
 export interface TimeSelectConfig {
-  useRender: boolean | RenderConfig
-  startProp: string // 时间选择范围开始时间在formModel中的属性名
-  endProp: string // 时间选择范围结束时间在formModel中的属性名
+  useRender?: boolean | RenderConfig
+  /**
+   * 时间选择范围开始时间在formModel中的属性名
+   */
+  startProp: string
+  /**
+   * 时间选择范围结束时间在formModel中的属性名
+   */
+  endProp: string
 }
 
 /**
  * switchConfig接口
  */
 export interface SwitchConfig {
-  useRender: boolean | RenderConfig
+  useRender?: boolean | RenderConfig
   activeValue?: string | number | boolean
   inactiveValue?: string | number | boolean
-  onChange?: (...args: any) => any // el-switch的change事件
+  /**
+   * el-switch的change事件
+   */
+  onChange?: Function
 }
 
 /**
  * inputRangeConfig接口
  */
 export interface InputRangeConfig {
-  startProp: string // 输入范围开始值在formModel中的属性名
-  endProp: string // 输入范围结束值在formModel中的属性名
+  /**
+   * 输入范围开始值在formModel中的属性名
+   */
+  startProp: string
+  /**
+   * 输入范围结束值在formModel中的属性名
+   */
+  endProp: string
   startPlaceholder?: string
   endPlaceholder?: string
   rangeSeparator?: string
-  onClear?: (...args: any) => any
+  onClear?: Function
 }
 
 /**
@@ -227,7 +329,10 @@ export interface InputRangeConfig {
 export interface TreeSelectConfig {
   useRender?: boolean | RenderConfig
   data: Record<string, unknown>[]
-  reverse?: boolean // 是否反转
+  /**
+   * 是否反转
+   */
+  reverse?: boolean
   width?: string
   placeholder?: string
   props?: { value: string; label?: string }
@@ -238,11 +343,17 @@ export interface TreeSelectConfig {
 }
 
 export interface IRequired {
-  // 是否必填
+  /**
+   * 是否必填
+   */
   isRequired?: boolean
-  // 内置校验器
+  /**
+   * 内置校验器
+   */
   validator: 'mobile' | 'nonNegativeDecimal'
-  // 参数
+  /**
+   * 参数
+   */
   parmas?: any
 }
 
@@ -273,7 +384,7 @@ export interface FormColumn {
    * 如为IRequired则使用内置必填校验
    * 可传对象数组进行自定义校验
    */
-  required: boolean | IRequired
+  required?: boolean | IRequired
   /**
    * 必填项错误消息
    * 如不指定则默认为“请输入xxx”或“请选择xxx”

package/src/components/UseElTable/defaultExtConfig.ts

@@ -12,7 +12,7 @@ export default {
   },
   mode: { type: 'PAGE' },
   selection: { width: 40, enableRowClick: false, align: 'center', fixed: true },
-  index: { width: 55, align: 'center', fixed: true },
+  index: { width: 55, align: 'center', fixed: true, isContinuous: true },
   expand: { show: false },
   operation: { width: 128, fixed: 'right' },
   pagination: {

package/src/components/UseElTable/props.ts

@@ -51,6 +51,20 @@ export default {
     type: Object as PropType<DictProps>,
     default: () => ({})
   },
+  /**
+   * 当前页数
+   */
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * 当前页码
+   */
+  pageSize: {
+    type: Number,
+    default: 10
+  },
   /**
    * 当内容过长被隐藏时是否显示tooltip 默认是
    */

package/src/components/UseElTable/types.ts

@@ -256,9 +256,16 @@ export interface ExtConfig {
   /**
    * 序号列配置项
    * label：序号列表头文本 不显式设置则不显示序号列
+   * isContinuous：是否连续的，默认是，即第二页的序号根据第一条最后一个序号进行延续
    * width、align、fixed同选择器配置项
    */
-  index?: { label?: string; width?: number; align?: string; fixed?: boolean }
+  index?: {
+    label?: string
+    isContinuous?: boolean
+    width?: number
+    align?: string
+    fixed?: boolean
+  }
   /**
    * 展开列配置项
    * show：是否显示展开列

package/src/types/index.ts

@@ -139,6 +139,14 @@ export interface GlobalConfig {
    * 最终字典映射
    */
   finalDictMap: DictMap
+  /**
+   * 最终crud表格页面高度
+   */
+  finalCrudTablePageHeight: string
+  /**
+   * 最终crud表格弹窗高度
+   */
+  finalCrudTableModalHeight: string
   /**
    * 最终表格页面高度
    */

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

@@ -1,18 +0,0 @@
-import { PropType } from 'vue';
-import { ExtConfig as TableExtConfig } from '../UseElTable/types';
-import { Configs, ExtConfig } from './types';
-declare const _default: {
-    configs: {
-        type: PropType<Configs[]>;
-        required: boolean;
-    };
-    tableExtConfig: {
-        type: PropType<TableExtConfig>;
-        default: () => {};
-    };
-    extConfig: {
-        type: PropType<ExtConfig>;
-        default: () => {};
-    };
-};
-export default _default;