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

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

@@ -0,0 +1,127 @@
+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,
+  /** 远程数据源请求工具 */
+  httpRequest: [Object, Function]
+};
+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",
+    "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
+};
+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,46 @@
+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/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/rate/style/index";
+import "element-plus/es/components/slider/style/index";
+import "element-plus/es/components/color-picker/style/index";
+import "../../ele-admin-layout/style/index";
+import "../../ele-alert/style/index";
+import "../../ele-autocomplete/style/index";
+import "../../ele-card/style/index";
+import "../../ele-cascader/style/index";
+import "../../ele-check-card/style/index";
+import "../../ele-checkbox-group/style/index";
+import "../../ele-edit-tag/style/index";
+import "../../ele-icon/style/index";
+import "../../ele-mention/style/index";
+import "../../ele-pro-table/style/index";
+import "../../ele-radio-group/style/index";
+import "../../ele-select/style/index";
+import "../../ele-select-tree/style/index";
+import "../../ele-steps/style/index";
+import "../../ele-table/style/index";
+import "../../ele-table-select/style/index";
+import "../../ele-tabs/style/index";
+import "../../ele-text/style/index";
+import "../../ele-transfer/style/index";
+import "../../ele-tree-select/style/index";
+import "./index.scss";

package/es/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');
+}

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

@@ -0,0 +1,112 @@
+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>;
+  /** ElCol 属性 */
+  colProps?: ElColProps;
+  /** 容器组件是否栅格布局 */
+  grid?: boolean | ElColProps;
+  /** 容器组件栅格布局 ElRow 属性 */
+  rowProps?: ElRowProps;
+  /** 自定义组件类型时标识表单项类型 */
+  itemType?: 'default' | 'view' | 'container';
+  /** 显示条件 */
+  vIf?: any;
+  /** 容器组件编辑模式是否可拖拽排序 */
+  containerDraggable?: boolean;
+  /** 初始值 */
+  initValue?: any;
+  /** 子级 */
+  children?: ProFormItemProps[];
+}
+
+/**
+ * 获取表单项类型组件属性的方法参数
+ */
+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;
+}
+
+/**
+ * 渲染表单项组件时的插槽数据
+ */
+export type ProFormItemRenderSlots = Record<
+  string,
+  (
+    slotProps?: Record<string, any>
+  ) => string | VNode | Array<string | VNode> | undefined
+>;

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

@@ -0,0 +1,17 @@
+import { get as getValue, set as setValue, merge as mergeValue } from 'lodash-es';
+import { ProFormItemProps, ProFormItemTypeData } from './types';
+
+export { sortableGroupName, ChildrenRender } from './components/render-util';
+export { setValue, getValue, mergeValue };
+/**
+ * 判断表单项是否是容器类型
+ * @param item 表单项
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function isContainerType(item: ProFormItemProps, itemTypeData?: ProFormItemTypeData[]): boolean;
+/**
+ * 获取表单数据初始值
+ * @param items 表单项数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function getFormInitValue(items?: ProFormItemProps[], itemTypeData?: ProFormItemTypeData[]): Record<string, any>;

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

@@ -0,0 +1,59 @@
+import { eachTree } from "../utils/core";
+import { defaultItemTypeData } from "./components/item-type-data";
+import { ChildrenRender, sortableGroupName } from "./components/render-util";
+import setValue from "../../node_modules/lodash-es/set.js";
+import { default as default2 } from "../../node_modules/lodash-es/set.js";
+import getValue from "../../node_modules/lodash-es/get.js";
+import { default as default3 } from "../../node_modules/lodash-es/get.js";
+import { default as default4 } from "../../node_modules/lodash-es/merge.js";
+function isContainerType(item, itemTypeData) {
+  const typeData = item.type ? [...itemTypeData || [], ...defaultItemTypeData].find(
+    (d) => d.type === item.type
+  ) : void 0;
+  return (typeData == null ? void 0 : typeData.isContainer) || item.itemType === "container" || item.itemType === "view";
+}
+function getFormInitValue(items, itemTypeData) {
+  const init = {};
+  eachTree(items, (item) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    if (item.initValue != null && item.initValue !== "" && item.prop) {
+      setValue(init, item.prop, item.initValue);
+      return;
+    }
+    if (item.type && item.prop) {
+      if ("tabs" === item.type) {
+        const active = ((_a = item.props) == null ? void 0 : _a.modelValue) ?? ((_c = (_b = item.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.prop);
+        setValue(init, item.prop, active);
+        return;
+      }
+      if ("collapse" === item.type) {
+        const active = ((_d = item.props) == null ? void 0 : _d.modelValue) ?? (((_e = item.props) == null ? void 0 : _e.accordion) ? ((_h = (_g = (_f = item.children) == null ? void 0 : _f[0]) == null ? void 0 : _g.props) == null ? void 0 : _h.name) ?? ((_j = (_i = item.children) == null ? void 0 : _i[0]) == null ? void 0 : _j.prop) : []);
+        setValue(init, item.prop, active);
+        return;
+      }
+      if ("sliderRange" === item.type) {
+        setValue(init, item.prop, [
+          ((_k = item.props) == null ? void 0 : _k.min) ?? 0,
+          ((_l = item.props) == null ? void 0 : _l.max) ?? 100
+        ]);
+        return;
+      }
+    }
+    if (isContainerType(item, itemTypeData) || !item.prop) {
+      return;
+    }
+    if (typeof getValue(init, item.prop) === "undefined") {
+      setValue(init, item.prop, void 0);
+    }
+  });
+  return init;
+}
+export {
+  ChildrenRender,
+  getFormInitValue,
+  default3 as getValue,
+  isContainerType,
+  default4 as mergeValue,
+  default2 as setValue,
+  sortableGroupName
+};