@elementplus-kit/uikit 1.4.0 → 1.6.0

package/components/form/src/FormItem.ts

@@ -1,397 +0,0 @@
-import { defineComponent, ref, 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

@@ -1,161 +0,0 @@
-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
-}