@elementplus-kit/uikit 1.6.0 → 1.7.0

package/components/form/src/FormItem.ts

@@ -0,0 +1,398 @@
+import { defineComponent, h, toRefs, inject, type PropType } from "vue";
+import {
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElSelect,
+  ElOption,
+  ElSelectV2,
+  ElCascader,
+  ElTreeSelect,
+  ElRate,
+  ElCheckboxGroup,
+  ElCheckbox,
+  ElTimeSelect,
+  ElTimePicker,
+  ElDatePicker,
+  ElRadioGroup,
+  ElRadio,
+  ElRadioButton,
+  ElColorPicker,
+  ElSlider,
+  ElSwitch,
+  ElText,
+} from "element-plus";
+
+import { isFunction, isBoolean } from "lodash-es";
+import { formTypeCfg } from "./constants";
+import { formatEventName } from "./utils";
+
+const propsAttrs = {
+  model: { type: Object, default: () => {} },
+  // 表单名称
+  label: { type: String, default: "" },
+  // 表单类型
+  type: { type: String, default: "" },
+  // 表单key
+  prop: { type: String, default: "" },
+  // 必填
+  required: { type: Boolean, default: false },
+  // 全部只读
+  // allReadonly: { type: Boolean<PropType<Boolean | Object>>, default: false },
+  allReadonly: { type: Object, default: null }, // todo 上面传的类型是null报警告
+  // formItem 属性
+  formItem: { type: Object, default: () => {} },
+  // 表单类型属性
+  attrs: { type: Object, default: () => {} },
+  // 字典
+  dictType: { type: String, default: undefined },
+  // 字典选项
+  options: { type: Array, default: () => [] },
+  // 字典选项
+  optionsRef: { type: Object, default: () => {} },
+  mergeParams: { type: Object, default: () => {} },
+};
+
+export default defineComponent({
+  props: propsAttrs,
+  setup(props, { attrs: $attrs, emit, slots, expose }) {
+    // 事件插槽透传
+    const { formSlots, events } = inject("formContext");
+
+    // 解构props
+    const {
+      model,
+      type,
+      label,
+      prop,
+      required,
+      allReadonly,
+      formItem,
+      attrs,
+      dictType,
+      options,
+    } = toRefs(props);
+
+    // 处理组件自带插槽
+    const handleSlots = () => {
+      const compSlots = {};
+      // 遍历传进来的所有插槽匹配约定名称 例如：input.prefix
+      const formTypeSlots = formTypeCfg[type.value]?.slots;
+      formTypeSlots?.forEach((name) => {
+        const slotName = `${prop.value}.${name}`;
+        // 根据父组件插槽名称生成子组件插槽
+        Object.keys(formSlots).map((key) => {
+          if (key === slotName) {
+            compSlots[name] = formSlots[key];
+          }
+        });
+      });
+      return compSlots;
+    };
+
+    // 处理事件 只有自定义事件才能被vue组件捕获进$attrs中 所有不能实现根据父组件事件动态按需注册子组件事件
+    const handleEvents = () => {
+      const compEvents = {};
+      const formTypeEvents = formTypeCfg[type.value]?.events;
+      // 当前类型的事件
+      formTypeEvents?.forEach((event) => {
+        const eventName = `on${formatEventName(event)}`; // 字符串转大驼峰, 转成 h 函数需要格式
+        // events 第一个参数是事件名称，是h函数的写法规则，父组件provide events 中的e是第二个参数
+        compEvents[eventName] = (...arg: any) =>
+          events(event, prop.value, ...arg);
+      });
+      return compEvents;
+    };
+
+    // 获取禁用状态
+    const getDisabled = () => {
+      let disabled = false;
+      if (isFunction(attrs.value?.disabled)) {
+        disabled = attrs.value.disabled(props.mergeParams);
+      }
+      if (isBoolean(attrs.value?.disabled)) {
+        // 在 attrs 后面结构, 也要处理直接赋值的情况，不然会覆盖
+        disabled = attrs.value.disabled;
+      }
+      // 全部只读
+      if (allReadonly.value) {
+        disabled = true;
+      }
+      return { disabled };
+    };
+    // 处理属性 v-model绑定
+    const handleAttrs = () => {
+      // 获取默认属性
+      const defaultAttrs = formTypeCfg[type.value]?.defaultAttrs || {};
+      const typeAttrs = {
+        ref: (vEl) => setElRef(vEl, prop.value),
+        // modelValue: model.value[prop.value],
+        // 'onUpdate:modelValue': (val) => (model.value[prop.value] = val),
+        ...defaultAttrs,
+        ...attrs.value,
+        ...getDisabled(),
+      };
+
+      // 数据双向绑定，并过滤不需要双向绑定的组件
+      if (!["html"].includes(type.value)) {
+        typeAttrs.modelValue = model.value[prop.value];
+        typeAttrs["onUpdate:modelValue"] = (val) =>
+          (model.value[prop.value] = val);
+      }
+      return typeAttrs;
+    };
+
+    // 设置元素 Ref
+    const setElRef = (vEl: any, value: string) => {
+      props.optionsRef[`${value}Ref`] = vEl;
+    };
+
+    const getFormType = {
+      input: () => {
+        return h(
+          ElInput,
+          {
+            clearable: true,
+            ...handleAttrs(),
+            ...handleEvents(),
+          },
+          { ...handleSlots() }
+        );
+      },
+      textarea: () => {
+        return h(ElInput, {
+          ...handleAttrs(),
+          ...handleEvents(),
+          type: "textarea",
+        });
+      },
+      "input-number": () => {
+        return h(
+          ElInputNumber,
+          {
+            ...handleAttrs(),
+            ...handleEvents(),
+          },
+          { ...handleSlots() }
+        );
+      },
+      select: () => {
+        return h(
+          ElSelect,
+          {
+            clearable: true,
+            ...handleAttrs(),
+            ...handleEvents(),
+          },
+          () => {
+            return options?.value?.map((item) => {
+              return h(ElOption, {
+                ...item,
+                label: item.label,
+                value: item.value,
+                key: item.value,
+              });
+            });
+          }
+        );
+      },
+      "select-v2": () => {
+        return h(ElSelectV2, {
+          options: options.value,
+          clearable: true,
+          ...handleAttrs(),
+          ...handleEvents(),
+        });
+      },
+      cascader: () => {
+        return h(
+          ElCascader,
+          {
+            options: options.value,
+            clearable: true,
+            ...handleAttrs(),
+            ...handleEvents(),
+          },
+          { ...handleSlots() }
+        );
+      },
+      "tree-select": () => {
+        return h(
+          ElTreeSelect,
+          {
+            data: options.value,
+            clearable: true,
+            ...handleAttrs(),
+            ...handleEvents(),
+          },
+          { ...handleSlots() }
+        );
+      },
+      radio: () => {
+        return h(
+          ElRadioGroup,
+          {
+            ...handleAttrs(),
+            ...handleEvents(),
+          },
+          {
+            default: () => {
+              const v = options?.value?.map((item) => {
+                return h(item.radioButton ? ElRadioButton : ElRadio, {
+                  ...item,
+                  label: item.label,
+                  value: item.value,
+                  key: item.value,
+                });
+              });
+              return v;
+            },
+          }
+        );
+      },
+      checkbox: () => {
+        return h(
+          ElCheckboxGroup,
+          {
+            ...handleAttrs(),
+            ...handleEvents(),
+          },
+          {
+            default: () => {
+              const v = options?.value?.map((item) => {
+                return h(ElCheckbox, {
+                  ...item,
+                  label: item.label,
+                  value: item.value,
+                  key: item.value,
+                });
+              });
+              return v;
+            },
+          }
+        );
+      },
+      "time-select": () => {
+        return h(ElTimeSelect, {
+          ...handleAttrs(),
+          ...handleEvents(),
+        });
+      },
+      "date-picker": () => {
+        const type = attrs.value?.type || "date";
+        const valueFormatMap = {
+          year: "YYYY",
+          month: "YYYY-MM",
+          date: "YYYY-MM-DD",
+        };
+        const valueFormat = valueFormatMap[type];
+        return h(
+          ElDatePicker,
+          {
+            type,
+            valueFormat: valueFormat,
+            ...handleAttrs(),
+            ...handleEvents(),
+          },
+          { ...handleSlots() }
+        );
+      },
+      "time-picker": () => {
+        return h(ElTimePicker, {
+          valueFormat: "HH:mm:ss",
+          ...handleAttrs(),
+          ...handleEvents(),
+        });
+      },
+      rate: () => {
+        return h(ElRate, {
+          ...handleAttrs(),
+          ...handleEvents(),
+        });
+      },
+      "color-picker": () => {
+        return h(ElColorPicker, {
+          ...handleAttrs(),
+          ...handleEvents(),
+        });
+      },
+      slider: () => {
+        return h(ElSlider, {
+          ...handleAttrs(),
+          ...handleEvents(),
+        });
+      },
+      switch: () => {
+        return h(
+          ElSwitch,
+          {
+            ...handleAttrs(),
+            ...handleEvents(),
+          },
+          { ...handleSlots() }
+        );
+      },
+      text: () => {
+        return h(ElText, {
+          ...handleAttrs(),
+        });
+      },
+      html: () => {
+        return h("div", {
+          innerHTML: model.value[prop.value],
+          ...handleAttrs(),
+        });
+      },
+      slot: () => {
+        return formSlots[prop.value]?.(model.value);
+      },
+    };
+
+    const renderType = () => {
+      // 自动启动插槽
+      if (formSlots[prop.value]) {
+        return getFormType["slot"]();
+      } else {
+        // solt类型未定义插槽时提示
+        if (type.value === "slot") {
+          return `表单属性 ${prop.value} 插槽模板未定义`;
+        }
+      }
+
+      // 判断非插槽且不支持的类型
+      if (!getFormType[type.value]) {
+        console.error(`不支持的表单类型 ${type.value}`);
+        return `不支持的表单类型 ${type.value}`;
+      }
+
+      // 非插槽类型
+      return getFormType[type.value]();
+    };
+
+    const render = () => {
+      const renderTypeVdom = renderType();
+      return h(
+        ElFormItem,
+        {
+          label: label.value,
+          prop: prop.value,
+          rules: required.value
+            ? [
+                {
+                  required: true,
+                  message: `${label.value} 必填`,
+                  trigger: "blur",
+                },
+              ]
+            : undefined,
+          ...formItem.value,
+        },
+        {
+          default: () => renderTypeVdom,
+        }
+      );
+    };
+    // 返回表单类型
+    return () => render();
+  },
+});

package/components/form/src/constants.ts

@@ -0,0 +1,161 @@
+export const formTypeCfg = {
+  input: {
+    elName: 'input',
+    defaultAttrs: {},
+    events: [
+      'blur',
+      'focus',
+      'change',
+      'input',
+      'clear',
+      'keydown',
+      'mouseleave',
+      'mouseenter',
+      'compositionstart',
+      'compositionupdate',
+      'compositionend',
+    ],
+    slots: ['prefix', 'suffix', 'prepend', 'append'],
+  },
+  textarea: {
+    elName: 'textarea',
+    defaultAttrs: {},
+    events: ['blur', 'focus', 'change', 'input'],
+  },
+
+  'input-number': {
+    elName: 'input-number',
+    defaultAttrs: {},
+    events: ['change', 'Function', 'blur', 'focus'],
+    slots: ['decrease-icon', 'increase-icon', 'prefix', 'suffix'],
+  },
+  select: {
+    elName: 'select',
+    defaultAttrs: {},
+    events: ['change', 'visible-change', 'remove-tag', 'clear', 'blur', 'focus', 'popup-scroll'],
+    slots: ['default', 'header', 'footer', 'prefix', 'empty', 'tag', 'loading', 'label'],
+  },
+  'select-v2': {
+    elName: 'select-v2',
+    defaultAttrs: {},
+    events: ['focus', 'blur', 'selectedLabel'],
+    slots: ['default', 'header', 'footer', 'prefix', 'empty', 'tag', 'loading', 'label'],
+  },
+  cascader: {
+    elName: 'cascader',
+    defaultAttrs: {},
+    events: ['change', 'expand-change', 'blur', 'focus', 'clear', 'visible-change', 'remove-tag'],
+    slots: ['default', 'empty', 'prefix', 'suggestion-item', 'tag'],
+  },
+  'tree-select': {
+    elName: 'tree-select',
+    defaultAttrs: {},
+    events: ['change', 'clear', 'blur', 'focus'],
+    slots: ['default'],
+  },
+  radio: {
+    elName: 'radio',
+    defaultAttrs: {},
+    events: ['change'],
+    // slots: ['default'],
+  },
+  checkbox: {
+    elName: 'checkbox',
+    defaultAttrs: {},
+    events: ['change'],
+    // slots: ['default'],
+  },
+  'time-select': {
+    elName: 'time-select',
+    defaultAttrs: {},
+    events: ['change', 'blur', 'focus', 'clear'],
+  },
+  'date-picker': {
+    elName: 'date-picker',
+    defaultAttrs: {},
+    events: [
+      'change',
+      'blur',
+      'focus',
+      'clear',
+      'calendar-change',
+      'panel-change',
+      'visible-change',
+    ],
+    slots: ['default', 'range-separator', 'prev-month', 'next-month', 'prev-year', 'next-year'],
+  },
+  'time-picker': {
+    elName: 'time-picker',
+    defaultAttrs: {},
+    events: ['change', 'blur', 'focus', 'clear', 'visible-change'],
+    slots: [],
+  },
+  rate: {
+    elName: 'rate',
+    defaultAttrs: {},
+    events: ['change'],
+  },
+  'color-picker': {
+    elName: 'color-picker',
+    defaultAttrs: {},
+    events: ['change', 'active-change', 'focus', 'blur'],
+  },
+  slider: {
+    elName: 'slider',
+    defaultAttrs: {},
+    events: ['change', 'input'],
+  },
+  switch: {
+    elName: 'switch',
+    defaultAttrs: {},
+    events: ['change'],
+    slots: ['active-action', 'inactive-action'],
+  },
+  text: {
+    elName: 'text',
+    defaultAttrs: {},
+    slots: ['default'],
+  },
+  html: {},
+  slot: {},
+}
+
+enum formItemType2 {
+  input = 'input', // 文本
+  textarea = 'textarea', // 文本域
+  inputNumber = 'inputNumber', // 数字
+
+  select = 'select', // 下拉
+  selectV2 = 'selectV2', // 虚拟下拉
+  cascader = 'cascader', // 联级选择器
+  treeSelect = 'treeSelect', // 下拉树
+
+  radio = 'radio', // 单选
+  checkbox = 'checkbox', // 多选
+
+  datePicker = 'datePicker', // 日期选择器
+  dateTimePicker = 'dateTimePicker', // 日期时间选择器
+  timePicker = 'timePicker', // 联级时间选择
+  timeSelect = 'timeSelect', // 下拉时间选择
+
+  colorPicker = 'colorPicker', // 颜色选择器
+  switch = 'switch', // 开关
+  rate = 'rate', // 评分
+  slider = 'slider', // 滑块
+
+  html = 'html', // html
+  slot = 'slot', // slot插槽
+}
+
+// 获取所有的事件
+export const getEmits = () => {
+  let emits = []
+  Object.keys(formTypeCfg).map((key) => {
+    const events = formTypeCfg[key]?.events
+    if (events?.length > 0) {
+      emits.push(...events)
+    }
+  })
+  emits = [...new Set(emits)]
+  return emits
+}