ele-admin-plus 1.2.2-beta.5 → 1.3.0-beta.3

package/lib/ele-pro-form/props.cjs

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const elementPlus = require("element-plus");
+const core = require("../utils/core");
+const proFormProps = {
+  ...elementPlus.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,
+  /** 远程数据源请求工具 */
+  httpRequest: [Object, Function]
+};
+const proFormEmits = {
+  ...elementPlus.formEmits,
+  "update:searchExpand": (_expand) => true,
+  updateValue: (_prop, _value) => true,
+  "update:items": (_items) => true,
+  "update:activeItemKey": (_activeKey) => true,
+  submit: (_model) => true,
+  reset: () => true
+};
+const childrenRenderProps = {
+  ...core.pick(proFormProps, [
+    "model",
+    "items",
+    "rules",
+    "grid",
+    "rowProps",
+    "editable",
+    "activeItemKey",
+    "itemTypeData",
+    "httpRequest"
+  ]),
+  /** 额外的 ElCol 属性 */
+  contentExtraColProps: Object,
+  /** 父级表单项 */
+  parentItem: Object,
+  /** 全部的表单项 */
+  formItems: Array,
+  /** 搜索表单展开状态 */
+  searchExpand: Boolean,
+  /** 编辑模式禁用子级排序 */
+  sortDisabled: Boolean,
+  /** 编辑模式父级拖拽容器是否可点击选中 */
+  containerSelectable: Boolean,
+  /** 直接传递插槽数据 */
+  slots: Object,
+  /** 获取表单组件的组件引用数据方法 */
+  getProFormRefs: Function,
+  /** 获取并缓存代码解析结果方法 */
+  getAndCacheCode: Function,
+  /** 更新表单数据属性值方法 */
+  updateItemValue: Function,
+  /** 编辑模式更新表单项数据方法 */
+  updateItemsData: Function,
+  /** 更新编辑模式选中项方法 */
+  updateActiveItemKey: Function,
+  /** 兼容旧版 */
+  item: Object
+};
+exports.childrenRenderProps = childrenRenderProps;
+exports.proFormEmits = proFormEmits;
+exports.proFormProps = proFormProps;

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

@@ -0,0 +1,184 @@
+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[]>;
+    /** 远程数据源请求工具 */
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
+    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>;
+    /** 获取表单组件的组件引用数据方法 */
+    getProFormRefs: PropType<() => Record<string, any>>;
+    /** 获取并缓存代码解析结果方法 */
+    getAndCacheCode: PropType<(code: string, codeResult: any) => any>;
+    /** 更新表单数据属性值方法 */
+    updateItemValue: PropType<(prop: string, value: any) => void>;
+    /** 编辑模式更新表单项数据方法 */
+    updateItemsData: PropType<(items: ProFormItemProps[], parentItem?: ProFormItemProps) => void>;
+    /** 更新编辑模式选中项方法 */
+    updateActiveItemKey: PropType<(activeKey?: ProFormItemKey) => void>;
+    /** 兼容旧版 */
+    item: PropType<ProFormItemProps>;
+    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[]>;
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
+};
+export type ChildrenRenderProps = ExtractPropTypes<typeof childrenRenderProps>;
+/**
+ * 渲染表单项数据方法参数
+ */
+export type RenderProFormContentProps = Omit<ChildrenRenderProps, 'item'>;
+/**
+ * 渲染表单项组件方法参数
+ */
+export interface RenderProFormItemProps extends Pick<RenderProFormContentProps, 'model' | 'rules' | 'formItems' | 'searchExpand' | 'editable' | 'activeItemKey' | 'updateItemValue' | 'updateItemsData' | 'updateActiveItemKey' | 'getProFormRefs' | 'getAndCacheCode' | 'itemTypeData' | 'httpRequest' | 'slots'> {
+    /** 循环的 key */
+    key?: ProFormItemKey;
+    /** 表单项 */
+    item: ProFormItemProps;
+}
+/**
+ * 渲染表单项组件时的插槽额外参数
+ */
+export type RenderSlotProFormParam = Omit<RenderProFormItemProps, 'key'>;

package/lib/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/lib/ele-pro-form/style/index.cjs

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

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

@@ -0,0 +1 @@
+

package/lib/ele-pro-form/style/index.scss

@@ -0,0 +1,285 @@
+@use 'sass:list';
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-pro-form-var($ele);
+
+/* 构建表单内对部分组件排除禁用 */
+$enable-selectors: (
+  '.el-tabs>.el-tabs__header',
+  '.el-tabs__nav>.el-tabs__item',
+  '.el-tabs__nav>.el-tabs__item>.ele-tab-title',
+  '.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-prev',
+  '.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-next',
+  '.el-collapse>.el-collapse-item>.el-collapse-item__header',
+  '.el-carousel>.el-carousel__arrow',
+  '.el-carousel>.el-carousel__indicators>.el-carousel__indicator>.el-carousel__button'
+) !default;
+/* 构建表单内排除禁用的元素 */
+$exclude-disabled-selectors: list.join(
+  (
+    '.ele-pro-form-builder-item-wrapper',
+    '.ele-pro-form-builder-container-wrapper',
+    '.ele-pro-form-builder-item-tools',
+    '.ele-pro-form-builder-item-handle',
+    '.ele-pro-form-builder-tool-button'
+  ),
+  $enable-selectors
+) !default;
+
+/* 构建移动手柄 */
+.ele-pro-form-builder-item-handle {
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  display: flex;
+  align-items: center;
+  color: eleVar('pro-form', 'handle-color');
+  font-size: eleVar('pro-form', 'handle-font-size');
+  height: eleVar('pro-form', 'handle-height');
+  line-height: eleVar('pro-form', 'handle-height');
+  padding: eleVar('pro-form', 'handle-padding');
+  background: eleVar('pro-form', 'handle-bg');
+  box-shadow: eleVar('pro-form', 'handle-shadow');
+  z-index: eleVar('pro-form', 'handle-index');
+  box-sizing: border-box;
+  pointer-events: auto;
+  cursor: move;
+
+  &.is-disabled {
+    pointer-events: none;
+  }
+}
+
+.ele-pro-form-builder-item-handle-icon {
+  margin-right: eleVar('pro-form', 'handle-space');
+}
+
+.ele-pro-form-builder-item-tools {
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+  position: absolute;
+  bottom: -2px;
+  right: -1px;
+}
+
+.ele-pro-form-builder-item-tool-wrapper {
+  position: static;
+  overflow: visible;
+  font-weight: normal;
+  pointer-events: none;
+}
+
+.ele-pro-form-builder-item-wrapper:not(.is-active),
+.ele-pro-form-builder-container-wrapper:not(.is-active) {
+  & > .ele-pro-form-builder-item-tool-wrapper {
+    display: none;
+  }
+}
+
+/* 构建容器 */
+.ele-pro-form-builder-item-wrapper,
+.ele-pro-form-builder-container-wrapper {
+  border: eleVar('pro-form', 'item-wrapper-padding') solid transparent;
+  outline: eleVar('pro-form', 'item-wrapper-border');
+  box-sizing: border-box;
+  pointer-events: auto;
+  position: relative;
+}
+
+.ele-pro-form-builder-item-wrapper,
+.ele-pro-form-builder-container-wrapper.is-selectable {
+  &:hover {
+    outline: eleVar('pro-form', 'item-wrapper-hover-border');
+  }
+
+  &.is-active {
+    outline: eleVar('pro-form', 'item-wrapper-active-border');
+    outline-offset: eleVar('pro-form', 'item-wrapper-active-border-offset');
+    z-index: eleVar('pro-form', 'item-wrapper-active-index');
+  }
+}
+
+.ele-pro-form-builder-container-wrapper {
+  min-height: eleVar('pro-form', 'container-wrapper-min-height');
+  outline-offset: eleVar('pro-form', 'container-wrapper-border-offset');
+}
+
+.ele-pro-form-builder-container-wrapper.is-selectable.is-active {
+  outline-offset: eleVar('pro-form', 'container-wrapper-active-border-offset');
+}
+
+.ele-pro-form-builder-item-wrapper.is-div-type {
+  min-height: eleVar('pro-form', 'container-div-min-height');
+}
+
+/* 构建表单组件特殊处理 */
+.ele-pro-form.is-editable {
+  & > .ele-pro-form-builder-container-wrapper {
+    border: none;
+    outline: none;
+  }
+
+  #{joinNotSelectors($exclude-disabled-selectors)} {
+    pointer-events: none !important;
+    transition: none !important;
+  }
+
+  #{$enable-selectors} {
+    pointer-events: auto !important;
+    transition: none !important;
+  }
+
+  .ele-pro-form-builder-item-wrapper > table.ele-table {
+    width: 100%;
+    height: 100%;
+    #{eleVarName('table', 'tr-hover-bg')}: eleVar('table', 'tr-bg');
+
+    &.is-stripe > tr:nth-child(even),
+    &.is-stripe > tbody > tr:nth-child(even) {
+      #{eleVarName('table', 'tr-hover-bg')}: eleVar('table', 'even-bg');
+    }
+
+    td > .ele-pro-form-builder-container-wrapper {
+      height: 100%;
+    }
+  }
+
+  .el-descriptions__cell > .ele-pro-form-builder-container-wrapper {
+    min-height: eleVar('pro-form', 'container-description-min-height');
+  }
+
+  .ele-pro-form-builder-item-wrapper > .el-descriptions {
+    & > .el-descriptions__body > table.el-descriptions__table {
+      width: 100%;
+      height: 100%;
+
+      td > .ele-pro-form-builder-container-wrapper {
+        height: 100%;
+      }
+    }
+  }
+
+  .el-carousel__item > .ele-pro-form-builder-container-wrapper {
+    height: 100%;
+  }
+}
+
+/* 表单必填星号辅助类 */
+.ele-pro-form-required-asterisk::before {
+  content: '*';
+  color: elVar('color-error');
+  margin-right: 4px;
+}
+
+/* 描述列表组件辅助类 */
+.ele-pro-form-descriptions-details.el-descriptions {
+  .el-descriptions__cell.el-descriptions__label {
+    width: eleVar('pro-form', 'descriptions-label-wdith');
+    font-weight: normal;
+  }
+}
+
+/* 边框色辅助类 */
+.ele-icon-border-color-base {
+  border-color: elVar('border-color');
+}
+
+.ele-icon-border-color-light {
+  border-color: elVar('border-color', 'light');
+}
+
+.ele-icon-border-color-primary {
+  border-color: elVar('color-primary');
+}
+
+.ele-icon-border-color-primary5 {
+  border-color: elVar('color-primary', 'light-5');
+}
+
+.ele-icon-border-color-text {
+  border-color: elVar('text-color', 'primary');
+}
+
+.ele-icon-border-color-text-light {
+  border-color: elVar('text-color', 'placeholder');
+}
+
+/* 背景色辅助类 */
+.ele-icon-bg-primary {
+  background: elVar('color-primary');
+}
+
+.ele-icon-bg-primary7 {
+  background: elVar('color-primary', 'light-7');
+}
+
+.ele-icon-bg-primary9 {
+  background: elVar('color-primary', 'light-9');
+}
+
+.ele-icon-bg-base {
+  background: elVar('bg-color');
+}
+
+.ele-icon-bg-fill {
+  background: elVar('fill-color');
+}
+
+.ele-icon-bg-fill-light {
+  background: elVar('border-color', 'light');
+}
+
+.ele-icon-bg-fill-lighter {
+  background: elVar('fill-color', 'light');
+}
+
+.ele-icon-bg-fill-dark {
+  background: elVar('border-color');
+}
+
+.ele-icon-bg-white {
+  background: #fff;
+}
+
+.ele-icon-bg-calendar {
+  background-image: radial-gradient(
+    elVar('border-color', 'light') 50%,
+    transparent 50%
+  );
+}
+
+/* 文字色辅助类 */
+.ele-icon-color-base {
+  color: elVar('text-color', 'regular');
+}
+
+.ele-icon-color-secondary {
+  color: elVar('text-color', 'secondary');
+}
+
+.ele-icon-color-placeholder {
+  color: elVar('text-color', 'placeholder');
+}
+
+.ele-icon-color-light {
+  color: elVar('border-color');
+}
+
+.ele-icon-color-lighter {
+  color: elVar('border-color', 'light');
+}
+
+.ele-icon-color-primary {
+  color: elVar('color-primary');
+}
+
+.ele-icon-color-primary5 {
+  color: elVar('color-primary', 'light-5');
+}
+
+.ele-icon-color-success {
+  color: elVar('color-success');
+}