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

package/lib/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/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,50 @@
+"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/radio-group/style/index");
+require("element-plus/es/components/radio/style/index");
+require("element-plus/es/components/radio-button/style/index");
+require("element-plus/es/components/checkbox-group/style/index");
+require("element-plus/es/components/checkbox/style/index");
+require("element-plus/es/components/checkbox-button/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/autocomplete/style/index");
+require("element-plus/es/components/rate/style/index");
+require("element-plus/es/components/slider/style/index");
+require("element-plus/es/components/mention/style/index");
+require("element-plus/es/components/color-picker/style/index");
+require("element-plus/es/components/transfer/style/index");
+require("element-plus/es/components/tree-select/style/index");
+require("../../ele-icon/style/index");
+require("../../ele-text/style/index");
+require("../../ele-alert/style/index");
+require("../../ele-steps/style/index");
+require("../../ele-pro-table/style/index");
+require("../../ele-card/style/index");
+require("../../ele-tabs/style/index");
+require("../../ele-table/style/index");
+require("../../ele-tree-select/style/index");
+require("../../ele-table-select/style/index");
+require("../../ele-check-card/style/index");
+require("../../ele-edit-tag/style/index");
+require("../../ele-select/style/index");
+require("../../ele-cascader/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,183 @@
+@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;
+  }
+}

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

@@ -0,0 +1,132 @@
+import type { VNode } from 'vue';
+import type { ElFormItemProps, ElRowProps, ElColProps } from '../ele-app/el';
+import type { UserComponent } from '../ele-app/types';
+
+/**
+ * 表单项 key
+ */
+export type ProFormItemKey = keyof any;
+
+/**
+ * 表单项数据
+ */
+export interface ProFormItemProps {
+  /** 表单项 key */
+  key?: ProFormItemKey;
+  /** 字段名 */
+  prop: string;
+  /** 标题 */
+  label?: string;
+  /** 是否为必填项 */
+  required?: boolean;
+  /** 必填校验信息 */
+  requiredMessage?: string;
+  /** ElFormItem 属性 */
+  itemProps?: ElFormItemProps;
+  /** ElFormItem 插槽 */
+  itemSlots?: Record<string, string>;
+  /** 组件类型 */
+  type?: string;
+  /** 组件属性 */
+  props?: Record<string, any>;
+  /** 组件插槽 */
+  slots?: Record<string, string>;
+  /** 下拉单选多选等选项数据 */
+  options?: ProFormItemOption[];
+  /** ElCol 属性 */
+  colProps?: ElColProps;
+  /** 容器组件是否栅格布局 */
+  grid?: boolean | ElColProps;
+  /** 容器组件栅格布局 ElRow 属性 */
+  rowProps?: ElRowProps;
+  /** 自定义组件类型时标识表单项类型 */
+  itemType?: 'default' | 'view' | 'container';
+  /** 显示条件 */
+  vIf?: any;
+  /** 初始值 */
+  initValue?: any;
+  /** 子级 */
+  children?: ProFormItemProps[];
+}
+
+/**
+ * 下拉选项数据
+ */
+export interface ProFormItemOption extends Record<string, any> {
+  /** 循环的 key */
+  key?: keyof any;
+  /** 选中值 */
+  value: any;
+  /** 显示文本 */
+  label?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 子级 */
+  children?: ProFormItemOption[];
+}
+
+/**
+ * 获取表单项类型组件属性的方法参数
+ */
+export interface ProFormItemPropsFunctionParams {
+  /** 表单项数据 */
+  item: ProFormItemProps;
+  /** 表单项对应的绑定值 */
+  modelValue: any;
+  /** 更新绑定值的方法 */
+  updateModelValue: (value: any) => void;
+  /** 判断表单项是否展示的方法 */
+  isShowFormItem: (item: ProFormItemProps) => boolean;
+  /** 渲染表单项子级的方法 */
+  renderChildren: (
+    item: ProFormItemProps,
+    sortDisabled?: boolean,
+    containerSelectable?: boolean
+  ) => string | VNode | Array<string | VNode> | undefined;
+}
+
+/**
+ * 表单项类型数据
+ */
+export interface ProFormItemTypeData {
+  /** 组件类型 */
+  type: string;
+  /** 组件 */
+  component: UserComponent;
+  /** 是否是容器组件 */
+  isContainer?: boolean;
+  /** 容器组件在编辑模式下是否禁用拖拽功能 */
+  sortDisabled?: boolean;
+  /** 容器组件在编辑模式下是否可选中 */
+  containerSelectable?: boolean;
+  /** 是否渲染 label 属性为文本内容 */
+  renderLabelText?: boolean;
+  /** 组件的默认属性 */
+  defaultProps?: (
+    params: ProFormItemPropsFunctionParams
+  ) => Record<string, any>;
+  /** 组件的保留属性 */
+  reservedProps?: (
+    params: ProFormItemPropsFunctionParams
+  ) => Record<string, any>;
+  /** 组件的保留插槽 */
+  reservedSlots?: (
+    params: ProFormItemPropsFunctionParams
+  ) => ProFormItemRenderSlots;
+  /** 必填校验触发方式 */
+  requiredTrigger?: string;
+  /** 选项组件 */
+  optionsComponent?: UserComponent;
+  /** 选项组件属性 */
+  optionsComponentProps?: (option: ProFormItemOption) => Record<string, any>;
+}
+
+/**
+ * 渲染表单项组件时的插槽数据
+ */
+export type ProFormItemRenderSlots = Record<
+  string,
+  (
+    slotProps?: Record<string, any>
+  ) => string | VNode | Array<string | VNode> | undefined
+>;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const renderUtil = require("./components/render-util");
+const get_js = require("../../node_modules/lodash-es/get.js");
+const set_js = require("../../node_modules/lodash-es/set.js");
+const merge_js = require("../../node_modules/lodash-es/merge.js");
+Object.defineProperty(exports, "ChildrenRender", {
+  enumerable: true,
+  get: () => renderUtil.ChildrenRender
+});
+Object.defineProperty(exports, "sortableGroupName", {
+  enumerable: true,
+  get: () => renderUtil.sortableGroupName
+});
+exports.getValue = get_js;
+exports.setValue = set_js;
+exports.mergeValue = merge_js;

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

@@ -0,0 +1,2 @@
+export { get as getValue, set as setValue, merge as mergeValue } from 'lodash-es';
+export { sortableGroupName, ChildrenRender } from './components/render-util';