ele-admin-plus 1.2.2-beta.4 → 1.3.0-beta.2

package/es/ele-pro-form/index.js

@@ -0,0 +1,245 @@
+import { defineComponent, useModel, ref, computed, watch, nextTick, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, renderSlot, createVNode, createSlots, renderList, normalizeProps, guardReactiveProps } from "vue";
+import { ElForm } from "element-plus";
+import { eachTree } from "../utils/core";
+import { ChildrenRender, translateJsCode } from "./components/render-util";
+import ProFormFooter from "./components/pro-form-footer";
+import { proFormProps, proFormEmits } from "./props";
+const footerSlotExcludes = [
+  "default",
+  "topExtra",
+  "bottomExtra",
+  "contentExtra"
+];
+const slotExcludes = [...footerSlotExcludes, "footer", "footerExtra"];
+const _sfc_main = defineComponent({
+  name: "EleProForm",
+  components: { ElForm, ProFormFooter, ChildrenRender },
+  props: proFormProps,
+  emits: proFormEmits,
+  setup(props, { emit }) {
+    const exposeMethods = {};
+    [
+      "validate",
+      "validateField",
+      "resetFields",
+      "scrollToField",
+      "clearValidate"
+    ].forEach((key) => {
+      exposeMethods[key] = (...params) => {
+        if (!formRef.value) {
+          throw new Error("formRef is null");
+        }
+        return formRef.value[key](...params);
+      };
+    });
+    const formItems = useModel(props, "items");
+    const formRef = ref(null);
+    const formSearchExpand = ref(!!props.searchExpand);
+    const currentActiveKey = ref(
+      props.activeItemKey
+    );
+    const footerStyleData = computed(
+      () => translateJsCode(
+        props.footerStyle || {},
+        props.model || {},
+        formItems.value || [],
+        formSearchExpand.value
+      )
+    );
+    const updateSearchExpand = (expand) => {
+      formSearchExpand.value = expand;
+      if (props.searchExpand !== expand) {
+        emit("update:searchExpand", expand);
+      }
+    };
+    const updateValue = (prop, value) => {
+      if (prop != null) {
+        emit("updateValue", prop, value);
+      }
+    };
+    const handleUpdateItemsData = (items, parentItem) => {
+      if (!parentItem) {
+        formItems.value = items;
+      } else {
+        const parentItemKey = parentItem.key;
+        eachTree(formItems.value, (item) => {
+          if (item.key === parentItemKey) {
+            item.children = items;
+            return false;
+          }
+        });
+      }
+    };
+    const handleUpdateActiveItemKey = (key) => {
+      currentActiveKey.value = key;
+      if (props.activeItemKey !== key) {
+        emit("update:activeItemKey", key);
+      }
+    };
+    const handleSubmit = () => {
+      if (formRef.value) {
+        formRef.value.validate((valid) => {
+          if (valid) {
+            emit("submit", props.model ?? {});
+          }
+        });
+      }
+    };
+    const handleReset = () => {
+      emit("reset");
+      exposeMethods.clearValidate();
+      nextTick(() => {
+        exposeMethods.clearValidate();
+        nextTick(() => {
+          exposeMethods.clearValidate();
+        });
+      });
+    };
+    const handleFormSubmit = (e) => {
+      if (props.preventFormSubmit) {
+        e.preventDefault();
+      }
+    };
+    const handleFormValidate = (prop, isValid, message) => {
+      emit("validate", prop, isValid, message);
+    };
+    watch(
+      () => props.searchExpand,
+      (expand) => {
+        if (formSearchExpand.value !== expand) {
+          formSearchExpand.value = expand;
+        }
+      }
+    );
+    watch(
+      () => props.activeItemKey,
+      (key) => {
+        if (currentActiveKey.value !== key) {
+          currentActiveKey.value = key;
+        }
+      }
+    );
+    return {
+      ...exposeMethods,
+      slotExcludes,
+      footerSlotExcludes,
+      formItems,
+      formRef,
+      formSearchExpand,
+      currentActiveKey,
+      footerStyleData,
+      updateValue,
+      handleUpdateItemsData,
+      handleUpdateActiveItemKey,
+      updateSearchExpand,
+      handleSubmit,
+      handleReset,
+      handleFormSubmit,
+      handleFormValidate
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ProFormFooter = resolveComponent("ProFormFooter");
+  const _component_ChildrenRender = resolveComponent("ChildrenRender");
+  const _component_ElForm = resolveComponent("ElForm");
+  return openBlock(), createBlock(_component_ElForm, {
+    ref: "formRef",
+    model: _ctx.model,
+    labelPosition: _ctx.labelPosition,
+    labelWidth: _ctx.labelWidth,
+    statusIcon: _ctx.statusIcon,
+    validateOnRuleChange: _ctx.validateOnRuleChange,
+    size: _ctx.size,
+    disabled: _ctx.disabled,
+    scrollToError: _ctx.scrollToError,
+    scrollIntoViewOptions: _ctx.scrollIntoViewOptions,
+    inline: _ctx.inline,
+    labelSuffix: _ctx.labelSuffix,
+    hideRequiredAsterisk: _ctx.hideRequiredAsterisk,
+    requireAsteriskPosition: _ctx.requireAsteriskPosition,
+    showMessage: _ctx.showMessage,
+    inlineMessage: _ctx.inlineMessage,
+    class: normalizeClass(["ele-pro-form", { "is-editable": _ctx.editable }]),
+    onValidate: _ctx.handleFormValidate,
+    onSubmit: _ctx.handleFormSubmit
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "topExtra"),
+      createVNode(_component_ChildrenRender, {
+        model: _ctx.model,
+        items: _ctx.formItems,
+        rules: _ctx.rules,
+        grid: _ctx.grid,
+        rowProps: _ctx.rowProps,
+        contentExtraColProps: _ctx.footerColProps,
+        formItems: _ctx.formItems,
+        searchExpand: _ctx.formSearchExpand,
+        editable: _ctx.editable,
+        activeItemKey: _ctx.currentActiveKey,
+        itemTypeData: _ctx.itemTypeData,
+        onUpdateItemValue: _ctx.updateValue,
+        onUpdateItemsData: _ctx.handleUpdateItemsData,
+        "onUpdate:activeItemKey": _ctx.handleUpdateActiveItemKey
+      }, createSlots({ _: 2 }, [
+        renderList(Object.keys(_ctx.$slots).filter(
+          (k) => !_ctx.slotExcludes.includes(k)
+        ), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+            ])
+          };
+        }),
+        _ctx.footer ? {
+          name: "contentExtra",
+          fn: withCtx(() => [
+            createVNode(_component_ProFormFooter, {
+              footerProps: _ctx.footerProps,
+              footerSlots: _ctx.footerSlots,
+              footerStyle: _ctx.footerStyleData,
+              submitText: _ctx.submitText,
+              resetText: _ctx.resetText,
+              submitButtonProps: _ctx.submitButtonProps,
+              resetButtonProps: _ctx.resetButtonProps,
+              showSearchExpand: _ctx.showSearchExpand,
+              searchExpand: _ctx.formSearchExpand,
+              searchExpandButtonProps: _ctx.searchExpandButtonProps,
+              searchExpandText: _ctx.searchExpandText,
+              searchShrinkText: _ctx.searchShrinkText,
+              onSubmit: _ctx.handleSubmit,
+              onReset: _ctx.handleReset,
+              onUpdateSearchExpand: _ctx.updateSearchExpand
+            }, createSlots({ _: 2 }, [
+              renderList(Object.keys(_ctx.$slots).filter(
+                (k) => !_ctx.footerSlotExcludes.includes(k)
+              ), (name) => {
+                return {
+                  name,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                  ])
+                };
+              })
+            ]), 1032, ["footerProps", "footerSlots", "footerStyle", "submitText", "resetText", "submitButtonProps", "resetButtonProps", "showSearchExpand", "searchExpand", "searchExpandButtonProps", "searchExpandText", "searchShrinkText", "onSubmit", "onReset", "onUpdateSearchExpand"])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["model", "items", "rules", "grid", "rowProps", "contentExtraColProps", "formItems", "searchExpand", "editable", "activeItemKey", "itemTypeData", "onUpdateItemValue", "onUpdateItemsData", "onUpdate:activeItemKey"]),
+      renderSlot(_ctx.$slots, "bottomExtra")
+    ]),
+    _: 3
+  }, 8, ["model", "labelPosition", "labelWidth", "statusIcon", "validateOnRuleChange", "size", "disabled", "scrollToError", "scrollIntoViewOptions", "inline", "labelSuffix", "hideRequiredAsterisk", "requireAsteriskPosition", "showMessage", "inlineMessage", "class", "onValidate", "onSubmit"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-pro-form/props.d.ts

@@ -0,0 +1,176 @@
+import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import { ElRowProps, ElColProps, ElFormItemProps, ElButtonProps, ElLinkProps } from '../ele-app/el';
+import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData, ProFormItemRenderSlots } from './types';
+
+/**
+ * 属性
+ */
+export declare const proFormProps: {
+    /** 标签宽度 */
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    /** 表单项 */
+    items: PropType<ProFormItemProps[]>;
+    /** 是否栅格布局 */
+    grid: PropType<boolean | ElColProps>;
+    /** 栅格布局时更多 ElRow 属性 */
+    rowProps: PropType<ElRowProps>;
+    /** 是否需要底栏 */
+    footer: BooleanConstructor;
+    /** 底栏 ElFormItem 属性 */
+    footerProps: PropType<ElFormItemProps>;
+    /** 底栏 ElFormItem 插槽 */
+    footerSlots: ObjectConstructor;
+    /** 栅格布局时底栏 ElCol 属性 */
+    footerColProps: {
+        type: PropType<ElColProps>;
+        default: () => {
+            span: number;
+        };
+    };
+    /** 底栏样式 */
+    footerStyle: PropType<CSSProperties>;
+    /** 提交按钮文本 */
+    submitText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 重置按钮文本 */
+    resetText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 提交按钮属性 */
+    submitButtonProps: PropType<ElButtonProps>;
+    /** 重置按钮属性 */
+    resetButtonProps: PropType<ElButtonProps>;
+    /** 是否在底栏显示表单展开收起按钮 */
+    showSearchExpand: BooleanConstructor;
+    /** 展开和收起按钮属性 */
+    searchExpandButtonProps: PropType<ElLinkProps>;
+    /** 展开按钮的文字 */
+    searchExpandText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 收起按钮的文字 */
+    searchShrinkText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 搜索表单展开状态 */
+    searchExpand: BooleanConstructor;
+    /** 阻止表单原生的表单提交事件 */
+    preventFormSubmit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 编辑模式 */
+    editable: BooleanConstructor;
+    /** 编辑模式选中的表单项 */
+    activeItemKey: PropType<ProFormItemKey>;
+    /** 组件类型数据 */
+    itemTypeData: PropType<ProFormItemTypeData[]>;
+    model: ObjectConstructor;
+    rules: {
+        readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/utils/typescript').Arrayable<import('element-plus').FormItemRule>>>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    labelPosition: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, "top" | "left" | "right", unknown, "right", boolean>;
+    requireAsteriskPosition: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, "left" | "right", unknown, "left", boolean>;
+    labelSuffix: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    inline: BooleanConstructor;
+    inlineMessage: BooleanConstructor;
+    statusIcon: BooleanConstructor;
+    showMessage: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    validateOnRuleChange: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    hideRequiredAsterisk: BooleanConstructor;
+    scrollToError: BooleanConstructor;
+    scrollIntoViewOptions: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [ObjectConstructor, BooleanConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    size: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    disabled: BooleanConstructor;
+};
+export type ProFormProps = ExtractPropTypes<typeof proFormProps>;
+/**
+ * 事件
+ */
+export declare const proFormEmits: {
+    'update:searchExpand': (_expand: boolean) => boolean;
+    updateValue: (_prop: string, _value: unknown) => boolean;
+    'update:items': (_items: ProFormItemProps[]) => boolean;
+    'update:activeItemKey': (_activeKey: ProFormItemKey) => boolean;
+    submit: (_model: Record<string, any>) => boolean;
+    reset: () => boolean;
+    validate: (prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => boolean;
+};
+/**
+ * 表单项数据渲染组件属性
+ */
+export declare const childrenRenderProps: {
+    /** 额外的 ElCol 属性 */
+    contentExtraColProps: PropType<ElColProps>;
+    /** 父级表单项 */
+    parentItem: PropType<ProFormItemProps>;
+    /** 全部的表单项 */
+    formItems: PropType<ProFormItemProps[]>;
+    /** 搜索表单展开状态 */
+    searchExpand: BooleanConstructor;
+    /** 编辑模式禁用子级排序 */
+    sortDisabled: BooleanConstructor;
+    /** 编辑模式父级拖拽容器是否可点击选中 */
+    containerSelectable: BooleanConstructor;
+    /** 直接传递插槽数据 */
+    slots: PropType<ProFormItemRenderSlots>;
+    model: ObjectConstructor;
+    rules: {
+        readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/utils/typescript').Arrayable<import('element-plus').FormItemRule>>>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    grid: PropType<boolean | ElColProps>;
+    rowProps: PropType<ElRowProps>;
+    editable: BooleanConstructor;
+    items: PropType<ProFormItemProps[]>;
+    activeItemKey: PropType<ProFormItemKey>;
+    itemTypeData: PropType<ProFormItemTypeData[]>;
+};
+export type ChildrenRenderProps = ExtractPropTypes<typeof childrenRenderProps>;
+/**
+ * 渲染表单项数据方法参数
+ */
+export interface RenderProFormContentProps extends ChildrenRenderProps {
+    /** 更新表单数据属性值方法 */
+    updateItemValue: (prop: string, value: any) => void;
+    /** 编辑模式更新表单项数据方法 */
+    updateItemsData: (items: ProFormItemProps[], parentItem?: ProFormItemProps) => void;
+    /** 更新编辑模式选中项方法 */
+    updateActiveItemKey: (activeKey?: ProFormItemKey) => void;
+}
+/**
+ * 渲染表单项组件方法参数
+ */
+export interface RenderProFormItemProps extends Pick<RenderProFormContentProps, 'model' | 'rules' | 'formItems' | 'searchExpand' | 'editable' | 'activeItemKey' | 'updateItemValue' | 'updateItemsData' | 'updateActiveItemKey' | 'slots' | 'itemTypeData'> {
+    /** 循环的 key */
+    key?: ProFormItemKey;
+    /** 表单项 */
+    item: ProFormItemProps;
+}
+/**
+ * 渲染表单项组件时的插槽额外参数
+ */
+export type RenderSlotProFormParam = Omit<RenderProFormItemProps, 'key'>;

package/es/ele-pro-form/props.js

@@ -0,0 +1,112 @@
+import { formProps, formEmits } from "element-plus";
+import { pick } from "../utils/core";
+const proFormProps = {
+  ...formProps,
+  /** 标签宽度 */
+  labelWidth: {
+    type: [String, Number],
+    default: "80px"
+  },
+  /** 表单项 */
+  items: Array,
+  /** 是否栅格布局 */
+  grid: [Boolean, Object],
+  /** 栅格布局时更多 ElRow 属性 */
+  rowProps: Object,
+  /** 是否需要底栏 */
+  footer: Boolean,
+  /** 底栏 ElFormItem 属性 */
+  footerProps: Object,
+  /** 底栏 ElFormItem 插槽 */
+  footerSlots: Object,
+  /** 栅格布局时底栏 ElCol 属性 */
+  footerColProps: {
+    type: Object,
+    default: () => {
+      return { span: 24 };
+    }
+  },
+  /** 底栏样式 */
+  footerStyle: Object,
+  /** 提交按钮文本 */
+  submitText: {
+    type: String,
+    default: "提交"
+  },
+  /** 重置按钮文本 */
+  resetText: {
+    type: String,
+    default: "重置"
+  },
+  /** 提交按钮属性 */
+  submitButtonProps: Object,
+  /** 重置按钮属性 */
+  resetButtonProps: Object,
+  /** 是否在底栏显示表单展开收起按钮 */
+  showSearchExpand: Boolean,
+  /** 展开和收起按钮属性 */
+  searchExpandButtonProps: Object,
+  /** 展开按钮的文字 */
+  searchExpandText: {
+    type: String,
+    default: "展开"
+  },
+  /** 收起按钮的文字 */
+  searchShrinkText: {
+    type: String,
+    default: "收起"
+  },
+  /** 搜索表单展开状态 */
+  searchExpand: Boolean,
+  /** 阻止表单原生的表单提交事件 */
+  preventFormSubmit: {
+    type: Boolean,
+    default: true
+  },
+  /** 编辑模式 */
+  editable: Boolean,
+  /** 编辑模式选中的表单项 */
+  activeItemKey: [String, Number],
+  /** 组件类型数据 */
+  itemTypeData: Array
+};
+const proFormEmits = {
+  ...formEmits,
+  "update:searchExpand": (_expand) => true,
+  updateValue: (_prop, _value) => true,
+  "update:items": (_items) => true,
+  "update:activeItemKey": (_activeKey) => true,
+  submit: (_model) => true,
+  reset: () => true
+};
+const childrenRenderProps = {
+  ...pick(proFormProps, [
+    "model",
+    "items",
+    "rules",
+    "grid",
+    "rowProps",
+    "editable",
+    "activeItemKey",
+    "itemTypeData"
+  ]),
+  /** 额外的 ElCol 属性 */
+  contentExtraColProps: Object,
+  /** 父级表单项 */
+  parentItem: Object,
+  /** 全部的表单项 */
+  formItems: Array,
+  /** 搜索表单展开状态 */
+  searchExpand: Boolean,
+  /** 编辑模式禁用子级排序 */
+  sortDisabled: Boolean,
+  /** 编辑模式父级拖拽容器是否可点击选中 */
+  containerSelectable: Boolean,
+  /** 直接传递插槽数据 */
+  slots: Object
+};
+export {
+  childrenRenderProps,
+  proFormEmits,
+  proFormProps
+};

package/es/ele-pro-form/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 高级表单主题变量 */
+@mixin set-pro-form-var($var) {
+  .ele-pro-form {
+    @include set-ele-var('pro-form', $var);
+  }
+}

package/es/ele-pro-form/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-pro-form/style/index.js

@@ -0,0 +1,49 @@
+import "element-plus/es/components/form/style/index";
+import "element-plus/es/components/form-item/style/index";
+import "element-plus/es/components/button/style/index";
+import "element-plus/es/components/link/style/index";
+import "element-plus/es/components/icon/style/index";
+import "element-plus/es/components/row/style/index";
+import "element-plus/es/components/col/style/index";
+import "element-plus/es/components/divider/style/index";
+import "element-plus/es/components/image/style/index";
+import "element-plus/es/components/collapse/style/index";
+import "element-plus/es/components/collapse-item/style/index";
+import "element-plus/es/components/carousel/style/index";
+import "element-plus/es/components/carousel-item/style/index";
+import "element-plus/es/components/descriptions/style/index";
+import "element-plus/es/components/descriptions-item/style/index";
+import "element-plus/es/components/input/style/index";
+import "element-plus/es/components/radio-group/style/index";
+import "element-plus/es/components/radio/style/index";
+import "element-plus/es/components/radio-button/style/index";
+import "element-plus/es/components/checkbox-group/style/index";
+import "element-plus/es/components/checkbox/style/index";
+import "element-plus/es/components/checkbox-button/style/index";
+import "element-plus/es/components/date-picker/style/index";
+import "element-plus/es/components/time-picker/style/index";
+import "element-plus/es/components/time-select/style/index";
+import "element-plus/es/components/switch/style/index";
+import "element-plus/es/components/input-number/style/index";
+import "element-plus/es/components/autocomplete/style/index";
+import "element-plus/es/components/rate/style/index";
+import "element-plus/es/components/slider/style/index";
+import "element-plus/es/components/mention/style/index";
+import "element-plus/es/components/color-picker/style/index";
+import "element-plus/es/components/transfer/style/index";
+import "element-plus/es/components/tree-select/style/index";
+import "../../ele-icon/style/index";
+import "../../ele-text/style/index";
+import "../../ele-alert/style/index";
+import "../../ele-steps/style/index";
+import "../../ele-pro-table/style/index";
+import "../../ele-card/style/index";
+import "../../ele-tabs/style/index";
+import "../../ele-table/style/index";
+import "../../ele-tree-select/style/index";
+import "../../ele-table-select/style/index";
+import "../../ele-check-card/style/index";
+import "../../ele-edit-tag/style/index";
+import "../../ele-select/style/index";
+import "../../ele-cascader/style/index";
+import "./index.scss";