@wyfex/ivue 0.12.0 → 0.13.0

package/dist/types/UseElForm/types.d.ts

@@ -0,0 +1,194 @@
+import { ExtractPropTypes } from 'vue';
+import { default as componentProps } from './props';
+import { RenderConfig, UseDict } from '../../../types';
+export type Props = ExtractPropTypes<typeof componentProps>;
+export interface Emits {
+    (e: 'onDictKeys', value?: string[]): void;
+    (e: 'update:formModel', value: Record<string, any>): void;
+}
+export interface QueryConfig {
+    mode?: 'ROW' | 'INLINE';
+    colSpan?: 24 | 12 | 8 | 6 | 4 | 3 | 2 | 1 | 0;
+    formItemWidth?: string;
+    showBottomBorber?: boolean;
+    openQueryBtnLoading?: boolean;
+    onQuery?: Function;
+}
+export interface InputConfig {
+    useRender: boolean | RenderConfig;
+    type?: 'text' | 'textarea' | 'number' | 'password' | 'email' | 'search' | 'tel' | 'url';
+    prefixIcon?: string;
+    suffixIcon?: string;
+    clearable?: boolean;
+    maxlength?: string;
+    formatter?: string;
+    parser?: string;
+    autosize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    rows?: number;
+    resize?: string;
+    showPassword?: boolean;
+    placeholder?: string;
+    width?: string;
+    autoFocus?: boolean;
+    prefixContent?: string | object;
+    suffixContent?: string | object;
+    prependContent?: string | object;
+    appendContent?: string | object;
+    unit?: string | object;
+    onClear?: (...args: any) => any;
+    inputEvent?: Function;
+    onKeyupEnter?: (...args: any) => any;
+}
+export interface InputNumberConfig {
+    useRender: boolean | RenderConfig;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    placeholder?: string;
+    disabledScientific?: boolean;
+    unit?: string | object;
+}
+export interface RadioConfig {
+    useRender: boolean | RenderConfig;
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    props?: {
+        value: string;
+        label?: string;
+    };
+    reverse?: boolean;
+    onChange?: (...args: any) => any;
+}
+export interface SelectConfig {
+    useRender: boolean | RenderConfig;
+    multiple?: boolean;
+    clearable?: boolean;
+    placeholder?: string;
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    props?: {
+        value: string;
+        label?: string;
+    };
+    useV2: boolean;
+    reverse?: boolean;
+    toJoin?: boolean;
+    width?: string;
+    onChange?: (...args: any) => any;
+}
+export interface CascaderConfig {
+    useRender: boolean | RenderConfig;
+    clearable?: boolean;
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    props?: {
+        value: string;
+        label?: string;
+    };
+    width?: string;
+    onChange?: (...args: any) => any;
+}
+export interface DatePickerConfig {
+    useRender: boolean | RenderConfig;
+    type?: 'year' | 'years' | 'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange';
+    clearable?: boolean;
+    disabledDate?: Function;
+    placeholder?: string;
+    format?: string;
+    valueFormat?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    rangeSeparator?: string;
+    width?: string;
+    onCalendarChange?: Function;
+    onClear?: Function;
+    onChange?: Function;
+}
+export interface TimePickerConfig {
+    useRender: boolean | RenderConfig;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    rangeSeparator?: string;
+    isRange?: boolean;
+    editable?: boolean;
+    format?: string;
+    valueFormat?: string;
+    onChange?: (...args: any) => any;
+}
+export interface TimeSelectConfig {
+    useRender: boolean | RenderConfig;
+    startProp: string;
+    endProp: string;
+}
+export interface SwitchConfig {
+    useRender: boolean | RenderConfig;
+    activeValue?: string | number | boolean;
+    inactiveValue?: string | number | boolean;
+    onChange?: (...args: any) => any;
+}
+export interface InputRangeConfig {
+    startProp: string;
+    endProp: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    rangeSeparator?: string;
+    onClear?: (...args: any) => any;
+}
+export interface TreeSelectConfig {
+    useRender?: boolean | RenderConfig;
+    data: Record<string, unknown>[];
+    reverse?: boolean;
+    width?: string;
+    placeholder?: string;
+    props?: {
+        value: string;
+        label?: string;
+    };
+    checkStrictly?: boolean;
+    filterable?: boolean;
+    clearable?: boolean;
+    defaultExpandedKeys?: Array<string | number>;
+}
+export interface IRequired {
+    isRequired?: boolean;
+    validator: 'mobile' | 'nonNegativeDecimal';
+    parmas?: any;
+}
+export interface FormColumn {
+    label?: string;
+    prop: string;
+    queryProp?: string | string[];
+    required: boolean | IRequired;
+    errorMessage?: string;
+    disabled?: boolean;
+    useDict?: boolean | string | UseDict;
+    span?: number;
+    labelWidth?: string;
+    labelPosition?: 'left' | 'right' | 'top';
+    show?: boolean;
+    filter?: boolean;
+    formItemClass?: string;
+    slot?: string | boolean;
+    renderConfig?: RenderConfig;
+    inputConfig?: InputConfig;
+    inputNumberConfig?: InputNumberConfig;
+    selectConfig?: SelectConfig;
+    treeSelectConfig?: TreeSelectConfig;
+    cascaderConfig?: CascaderConfig;
+    datePickerConfig?: DatePickerConfig;
+    timePickerConfig?: TimePickerConfig;
+    timeSelectConfig?: TimeSelectConfig;
+    radioConfig?: RadioConfig;
+    switchConfig?: SwitchConfig;
+    inputRangeConfig?: InputRangeConfig;
+}

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export { default as UseElDatePicker } from './UseElDatePicker/index.vue';
 export { default as UseElDescriptions } from './UseElDescriptions/index.vue';
 export { default as UseElDialog } from './UseElDialog/index.vue';
 export { default as UseElDrawer } from './UseElDrawer/index.vue';
+export { default as UseElForm } from './UseElForm/index.vue';
 export { default as UseElInput } from './UseElInput/index.vue';
 export { default as UseElSelect } from './UseElSelect/index.vue';
 export { default as UseElSwitch } from './UseElSwitch/index.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyfex/ivue",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "万有前端 X 体系下基于 Vite8 + Vue3 + Typescript6 + ElementPlus2 构建的 iVue 组件库",
   "homepage": "https://wyfe.top/idocs/ivue",
   "type": "module",

package/src/components/UseElDialog/props.ts

@@ -73,11 +73,11 @@ export default {
     default: false
   },
   /**
-   * 底部定位 默认right
+   * 底部定位 默认left
    */
   footerPosition: {
     type: String,
-    default: 'right',
+    default: 'left',
     validator: (val: string) => ['left', 'center', 'right'].includes(val)
   },
   /**

package/src/components/UseElForm/props.ts

@@ -0,0 +1,102 @@
+import type { PropType } from 'vue'
+import type { FormColumn, QueryConfig } from './types'
+import type { DictMap, DictProps, RenderConfig } from '@/types'
+
+/**
+ * 组件props
+ */
+export default {
+  /**
+   * 表单列 必传
+   */
+  formColumns: {
+    type: Array as PropType<FormColumn[]>,
+    required: true
+  },
+  /**
+   * 表单模型 必传
+   */
+  formModel: {
+    type: Object as PropType<Record<string, any>>,
+    required: true
+  },
+  /**
+   * 是否使用渲染器 默认否
+   */
+  useRender: {
+    type: [Boolean, Object] as PropType<boolean | RenderConfig>,
+    default: false
+  },
+  /**
+   * 字典映射 数据结构为{ formColumns[][label | useDict | useDict.data]: Array<{ label: string, value: any }> }
+   */
+  dictMap: {
+    type: Object as PropType<DictMap>,
+    default: () => ({})
+  },
+  /**
+   * 字典属性 默认为{ value: 'value', label: 'label', children: 'children' }，可通过全局配置进行设置，为适配全局配置此处不再设置默认值
+   */
+  dictProps: {
+    type: Object as PropType<DictProps>,
+    default: () => ({})
+  },
+  /**
+   * el-form-item宽度值
+   */
+  formItemWidth: {
+    type: String,
+    default: '100%'
+  },
+  /**
+   * label后缀
+   */
+  labelSuffix: {
+    type: String,
+    default: ''
+  },
+  /**
+   * label宽度
+   */
+  labelWidth: {
+    type: String,
+    default: 'auto'
+  },
+  /**
+   * label定位
+   */
+  labelPosition: {
+    type: String,
+    default: 'right',
+    validator: (val: string) => ['left', 'right', 'top'].includes(val)
+  },
+  /**
+   * el-row的gutter值
+   */
+  rowGutter: {
+    type: Number,
+    default: 20
+  },
+  /**
+   * el-col的span值
+   */
+  colSpan: {
+    type: Number,
+    default: 12,
+    validator: (val: number) => [24, 12, 8, 6, 4, 3, 2, 1, 0].includes(val)
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 查询配置
+   */
+  queryConfig: {
+    type: Object as PropType<QueryConfig>,
+    default: () => ({})
+  }
+}

package/src/components/UseElForm/types.ts

@@ -0,0 +1,371 @@
+import type { ExtractPropTypes } from 'vue'
+import componentProps from './props'
+import type { RenderConfig, UseDict } from '@/types'
+
+/**
+ * props类型
+ */
+export type Props = ExtractPropTypes<typeof componentProps>
+
+/**
+ * emits接口
+ */
+export interface Emits {
+  // dictKeys事件
+  (e: 'onDictKeys', value?: string[]): void
+  // 更新formModel 仅formMode为inlineForm时支持
+  (e: 'update:formModel', value: Record<string, any>): void
+}
+
+/**
+ * queryConfig接口
+ */
+export interface QueryConfig {
+  /**
+   * 查询表单模式 支持ROW和INLINE
+   * 不显式指定则默认为ROW（queryConfig为非空对象方可生效）
+   */
+  mode?: 'ROW' | 'INLINE'
+  /**
+   * 查询表单mode为ROW的el-col的span
+   * 不显式设置则使用内部默认响应式
+   */
+  colSpan?: 24 | 12 | 8 | 6 | 4 | 3 | 2 | 1 | 0
+  /**
+   * el-form-item宽度值
+   * 查询表单mode为ROW时formItemWidth默认为100%；查询表单mode为INLINE时formItemWidth默认为180px
+   */
+  formItemWidth?: string
+  /**
+   * 是否显示底部border 默认显示
+   */
+  showBottomBorber?: boolean
+  /**
+   * 开启查询按钮loading
+   * 注意：开启此配置项需回调onQuery事件第二个参数done，否则查询按钮loading无法关闭
+   */
+  openQueryBtnLoading?: boolean
+  /**
+   * 查询表单事件
+   */
+  onQuery?: Function
+}
+
+/**
+ * inputConfig接口
+ */
+export interface InputConfig {
+  useRender: boolean | RenderConfig
+  type?:
+    | 'text'
+    | 'textarea'
+    | 'number'
+    | 'password'
+    | 'email'
+    | 'search'
+    | 'tel'
+    | 'url'
+  prefixIcon?: string
+  suffixIcon?: string
+  clearable?: boolean
+  maxlength?: string
+  formatter?: string
+  parser?: string
+  autosize?: boolean | { minRows?: number; maxRows?: number }
+  rows?: number
+  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事件
+}
+
+/**
+ * inputNumberConfig接口
+ */
+export interface InputNumberConfig {
+  useRender: boolean | RenderConfig
+  min?: number
+  max?: number
+  step?: number
+  precision?: number
+  placeholder?: string
+  disabledScientific?: boolean
+  unit?: string | object // 在el-input-number右外部显示单位
+}
+
+/**
+ * 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事件
+}
+
+/**
+ * selectConfig接口
+ */
+export interface SelectConfig {
+  useRender: boolean | RenderConfig
+  multiple?: boolean
+  clearable?: 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事件
+}
+
+/**
+ * cascaderConfig接口
+ */
+export interface CascaderConfig {
+  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事件
+}
+
+/**
+ * datePickerConfig接口
+ */
+export interface DatePickerConfig {
+  useRender: boolean | RenderConfig
+  type?:
+    | 'year'
+    | 'years'
+    | 'month'
+    | 'months'
+    | 'date'
+    | 'dates'
+    | 'datetime'
+    | 'week'
+    | 'datetimerange'
+    | 'daterange'
+    | 'monthrange'
+    | 'yearrange'
+  clearable?: boolean
+  disabledDate?: Function
+  placeholder?: string
+  format?: string
+  valueFormat?: string
+  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事件
+}
+
+/**
+ * timePickerConfig接口
+ */
+export interface TimePickerConfig {
+  useRender: boolean | RenderConfig
+  startPlaceholder?: string
+  endPlaceholder?: string
+  rangeSeparator?: string
+  isRange?: boolean
+  editable?: boolean
+  format?: string
+  valueFormat?: string
+  onChange?: (...args: any) => any //el-date-picker的change事件
+}
+
+/**
+ * timeSelectConfig接口
+ */
+export interface TimeSelectConfig {
+  useRender: boolean | RenderConfig
+  startProp: string // 时间选择范围开始时间在formModel中的属性名
+  endProp: string // 时间选择范围结束时间在formModel中的属性名
+}
+
+/**
+ * switchConfig接口
+ */
+export interface SwitchConfig {
+  useRender: boolean | RenderConfig
+  activeValue?: string | number | boolean
+  inactiveValue?: string | number | boolean
+  onChange?: (...args: any) => any // el-switch的change事件
+}
+
+/**
+ * inputRangeConfig接口
+ */
+export interface InputRangeConfig {
+  startProp: string // 输入范围开始值在formModel中的属性名
+  endProp: string // 输入范围结束值在formModel中的属性名
+  startPlaceholder?: string
+  endPlaceholder?: string
+  rangeSeparator?: string
+  onClear?: (...args: any) => any
+}
+
+/**
+ * treeSelectConfig接口
+ */
+export interface TreeSelectConfig {
+  useRender?: boolean | RenderConfig
+  data: Record<string, unknown>[]
+  reverse?: boolean // 是否反转
+  width?: string
+  placeholder?: string
+  props?: { value: string; label?: string }
+  checkStrictly?: boolean
+  filterable?: boolean
+  clearable?: boolean
+  defaultExpandedKeys?: Array<string | number>
+}
+
+export interface IRequired {
+  // 是否必填
+  isRequired?: boolean
+  // 内置校验器
+  validator: 'mobile' | 'nonNegativeDecimal'
+  // 参数
+  parmas?: any
+}
+
+/**
+ * formColumn接口
+ */
+export interface FormColumn {
+  /**
+   * el-form-item的label
+   * 可不传，不传则不显示label且不占用label空间，同时不会显示必填项星号，但需要手动指定errorMessage以显示必填项错误提示信息
+   * 如果useDict为true则必须传入label以获取dictMap中的数据，否则无法使用字典功能
+   */
+  label?: string
+  /**
+   * el-form-item的prop
+   * 可传以逗号分隔的字符串，组件内部自动拆解，如'startDate,endDate' => { startDate: xxx, endDate: yyy }
+   */
+  prop: string
+  /**
+   * 查询prop
+   * 当查询表单（如起止时间字段拆分）和列表prop字段不一致时传入该配置项
+   * 可传以逗号分隔的字符串，组件内部自动拆解，亦可传入字符串数组
+   */
+  queryProp?: string | string[]
+  /**
+   * 是否为必填项
+   * 如为boolean则使用基础必填校验
+   * 如为IRequired则使用内置必填校验
+   * 可传对象数组进行自定义校验
+   */
+  required: boolean | IRequired
+  /**
+   * 必填项错误消息
+   * 如不指定则默认为“请输入xxx”或“请选择xxx”
+   */
+  errorMessage?: string
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 使用字典
+   * 如为boolean则将label作为dictMap的key
+   * 如为string或dict.data为string则将dict或dict.data作为dictMap的key
+   */
+  useDict?: boolean | string | UseDict
+  /**
+   * el-col的span
+   */
+  span?: number
+  /**
+   * el-form-item的labelWidth
+   */
+  labelWidth?: string
+  /**
+   * el-form-item的labelPosition
+   */
+  labelPosition?: 'left' | 'right' | 'top'
+  /**
+   * 是否显示当前项
+   * 为false则不显示当前项 会占用formColumn空间，似v-show
+   */
+  show?: boolean
+  /**
+   * 是否过滤当前项
+   * 为true则将当前项从formColumns中过滤掉 不会占用formColumn空间，似v-if
+   */
+  filter?: boolean
+  /**
+   * el-form-item的class
+   */
+  formItemClass?: string
+  /**
+   * 插槽
+   * 为string类型则使用slot值作为具名插槽值
+   * 为boolean类型则使用prop值作为具名插槽值
+   */
+  slot?: string | boolean
+  /**
+   * 表单项为【UseRender】的配置项
+   */
+  renderConfig?: RenderConfig
+  /**
+   * 表单项为【输入框】的配置项
+   */
+  inputConfig?: InputConfig
+  /**
+   * 表单项为【数字输入框】的配置项
+   */
+  inputNumberConfig?: InputNumberConfig
+  /**
+   * 表单项为【选择下拉框】的配置项
+   */
+  selectConfig?: SelectConfig
+  /**
+   * 表单项为【树形选择下拉框】的配置项
+   */
+  treeSelectConfig?: TreeSelectConfig
+  /**
+   * 表单项为【级联选择器】的配置项
+   */
+  cascaderConfig?: CascaderConfig
+  /**
+   * 表单项为【日期选择器】的配置项
+   */
+  datePickerConfig?: DatePickerConfig
+  /**
+   * 表单项为【时间选择器】的配置项
+   */
+  timePickerConfig?: TimePickerConfig
+  /**
+   * 表单项为【时间选择范围】的配置项
+   */
+  timeSelectConfig?: TimeSelectConfig
+  /**
+   * 表单项为【单选框】的配置项
+   */
+  radioConfig?: RadioConfig
+  /**
+   * 表单项为【开关】的配置项
+   */
+  switchConfig?: SwitchConfig
+  /**
+   * 表单项为【输入范围】的配置项
+   */
+  inputRangeConfig?: InputRangeConfig
+}