ele-admin-plus 1.2.2-beta.4 → 1.3.1-beta.1

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/select/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/cascader/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("./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,175 @@
+@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;
+  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;
+  position: absolute;
+  bottom: -2px;
+  right: -1px;
+}
+
+.ele-pro-form-builder-item-wrapper:not(.is-active),
+.ele-pro-form-builder-container-wrapper:not(.is-active) {
+  & > .ele-pro-form-builder-item-handle,
+  & > .ele-pro-form-builder-item-tools {
+    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,142 @@
+import type { VNode } from 'vue';
+import type { FormRules } from 'element-plus';
+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;
+  /** 子级 */
+  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;
+  /** 全部的表单项 */
+  items?: ProFormItemProps[];
+  /** 表单数据 */
+  model?: Record<string, any>;
+  /** 搜索表单展开状态 */
+  searchExpand?: boolean;
+  /** 是否是编辑模式 */
+  editable?: boolean;
+  /** 表单项对应的绑定值 */
+  modelValue: any;
+  /** 更新绑定值的方法 */
+  updateModelValue: (value: any) => void;
+}
+
+/**
+ * 获取表单项类型组件属性的方法
+ */
+export type ProFormItemPropsFunction = (
+  params: ProFormItemPropsFunctionParams
+) => Record<string, any>;
+
+/**
+ * 表单项类型数据
+ */
+export interface ProFormItemTypeData {
+  /** 组件类型 */
+  type: string;
+  /** 组件 */
+  component: UserComponent;
+  /** 是否是容器组件 */
+  isContainer?: boolean;
+  /** 容器组件在编辑模式下是否禁用拖拽功能 */
+  sortDisabled?: boolean;
+  /** 容器组件在编辑模式下是否可选中 */
+  containerSelectable?: boolean;
+  /** 是否渲染 label 属性为文本 */
+  renderLabelText?: boolean | 'html';
+  /** 组件的默认属性 */
+  defaultProps?: ProFormItemPropsFunction;
+  /** 组件的保留属性 */
+  reservedProps?: ProFormItemPropsFunction;
+}
+
+/**
+ * 渲染表单项组件时的插槽数据
+ */
+export type ProFormItemRenderSlots = Record<
+  string,
+  (slotProps?: Record<string, any>) => string | VNode | Array<string | VNode>
+>;
+
+/**
+ * 渲染表单项组件时的插槽额外参数
+ */
+export interface ItemRenderSlotProFormParam {
+  /** 表单项配置 */
+  item: ProFormItemProps;
+  /** 表单数据 */
+  model: Record<string, any>;
+  /** 验证规则 */
+  rules?: FormRules;
+  /** 全部的表单项 */
+  formItems?: ProFormItemProps[];
+  /** 搜索表单展开状态 */
+  searchExpand?: boolean;
+  /** 更新表单项值方法 */
+  updateItemValue: (prop: string, value: unknown) => void;
+  /** 插槽 */
+  slots: ProFormItemRenderSlots;
+}

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

@@ -0,0 +1,296 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const ProFormContent = require("./components/pro-form-content");
+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");
+const viewTypes = [
+  "label",
+  "divider",
+  "button",
+  "icon",
+  "image",
+  "alert",
+  "steps",
+  "proTable"
+];
+const containerTypes = [
+  "card",
+  "tabs",
+  "tabPane",
+  "table",
+  "tableRow",
+  "tableCell",
+  "collapse",
+  "collapseItem",
+  "carousel",
+  "carouselItem",
+  "row",
+  "col",
+  "descriptions",
+  "descriptionsItem",
+  "div"
+];
+const defaultTypes = [
+  "input",
+  "textarea",
+  "select",
+  "multipleSelect",
+  "radio",
+  "radioButton",
+  "checkbox",
+  "checkboxButton",
+  "date",
+  "datetime",
+  "daterange",
+  "datetimerange",
+  "time",
+  "timerange",
+  "timeSelect",
+  "switch",
+  "inputNumber",
+  "autocomplete",
+  "cascader",
+  "multipleCascader",
+  "rate",
+  "slider",
+  "sliderRange",
+  "mention",
+  "colorPicker",
+  "treeSelect",
+  "treeMultipleSelect",
+  "virtualTreeSelect",
+  "virtualTreeMultipleSelect",
+  "tableSelect",
+  "tableMultipleSelect",
+  "checkCard",
+  "multipleCheckCard",
+  "editTag",
+  "transfer",
+  "iconSelect",
+  "dictRadio",
+  "dictCheckbox",
+  "dictSelect",
+  "dictMultipleSelect",
+  "imageUpload",
+  "fileUpload",
+  "regions",
+  "multipleRegions",
+  "editor",
+  "text",
+  ...viewTypes,
+  ...containerTypes
+];
+const selectTypes = [
+  "select",
+  "multipleSelect",
+  "radio",
+  "radioButton",
+  "checkbox",
+  "checkboxButton",
+  "date",
+  "datetime",
+  "daterange",
+  "datetimerange",
+  "time",
+  "timerange",
+  "timeSelect",
+  "switch",
+  "cascader",
+  "multipleCascader",
+  "rate",
+  "slider",
+  "sliderRange",
+  "colorPicker",
+  "treeSelect",
+  "tableMultipleSelect",
+  "virtualTreeSelect",
+  "virtualTreeMultipleSelect",
+  "tableSelect",
+  "tableMultipleSelect",
+  "checkCard",
+  "multipleCheckCard",
+  "transfer",
+  "iconSelect",
+  "dictRadio",
+  "dictCheckbox",
+  "dictSelect",
+  "dictMultipleSelect",
+  "regions",
+  "multipleRegions"
+];
+const uploadTypes = ["imageUpload", "fileUpload"];
+const optionsTypes = [
+  "select",
+  "multipleSelect",
+  "radio",
+  "radioButton",
+  "checkbox",
+  "checkboxButton",
+  "autocomplete",
+  "cascader",
+  "multipleCascader",
+  "mention",
+  "treeSelect",
+  "treeMultipleSelect",
+  "checkCard",
+  "multipleCheckCard"
+];
+const blurTypes = ["input", "textarea"];
+const stringTypes = [
+  "input",
+  "textarea",
+  "date",
+  "datetime",
+  "time",
+  "timeSelect",
+  "autocomplete",
+  "mention",
+  "colorPicker",
+  "editor",
+  "text"
+];
+const numberTypes = [
+  "select",
+  "radio",
+  "radioButton",
+  "checkbox",
+  "checkboxButton",
+  "switch",
+  "inputNumber",
+  "rate",
+  "slider",
+  "tableSelect"
+];
+const arrayTypes = [
+  "multipleSelect",
+  "checkbox",
+  "checkboxButton",
+  "daterange",
+  "datetimerange",
+  "timerange",
+  "cascader",
+  "multipleCascader",
+  "sliderRange",
+  "transfer",
+  "treeMultipleSelect",
+  "virtualTreeMultipleSelect",
+  "tableMultipleSelect",
+  "multipleCheckCard",
+  "editTag",
+  "dictCheckbox",
+  "dictMultipleSelect",
+  "regions",
+  "multipleRegions"
+];
+function getRuleType(type) {
+  if (type) {
+    if (arrayTypes.includes(type)) {
+      return "array";
+    }
+    if (numberTypes.includes(type)) {
+      return "number";
+    }
+  }
+  return "string";
+}
+function getRuleTrigger(type) {
+  return type && blurTypes.includes(type) ? "blur" : "change";
+}
+function getRuleMessage(type, label, requiredMessage, placeholder) {
+  if (typeof requiredMessage === "string" && requiredMessage) {
+    return requiredMessage;
+  }
+  if (typeof placeholder === "string" && placeholder) {
+    return placeholder;
+  }
+  const text = label ?? "";
+  if (type) {
+    if (selectTypes.includes(type)) {
+      return `请选择${text}`;
+    }
+    if (uploadTypes.includes(type)) {
+      return `请上传${text}`;
+    }
+  }
+  return `请输入${text}`;
+}
+function isShowItem(item, form, items, searchExpand) {
+  if (!item.prop) {
+    return false;
+  }
+  if (item.vIf != null) {
+    if (typeof item.vIf === "function") {
+      return item.vIf(form, items, searchExpand);
+    }
+    if (typeof item.vIf === "string" && item.vIf.trim().length) {
+      try {
+        return new Function(
+          "form",
+          "items",
+          "searchExpand",
+          "formItems",
+          "formData",
+          `return (${item.vIf})`
+        )(form, items, searchExpand, items, form);
+      } catch (e) {
+        console.error(e);
+        return false;
+      }
+    }
+    if (item.vIf === false) {
+      return false;
+    }
+  }
+  return true;
+}
+function ChildrenRender(props, { emit }) {
+  return vue.h(
+    ProFormContent,
+    {
+      model: props.model,
+      rules: props.rules,
+      items: props.item.children ?? [],
+      grid: props.item.grid,
+      rowProps: props.item.rowProps,
+      formItems: props.formItems,
+      searchExpand: props.searchExpand,
+      parentItem: props.item,
+      editable: props.editable,
+      sortDisabled: props.sortDisabled,
+      containerSelectable: props.containerSelectable,
+      activeItemKey: props.activeItemKey,
+      onUpdateItemValue: (prop, value) => {
+        emit("updateItemValue", prop, value);
+      },
+      onUpdateItemsData: (items, parentItem) => {
+        emit("updateItemsData", items, parentItem);
+      },
+      "onUpdate:activeItemKey": (activeKey) => {
+        emit("update:activeItemKey", activeKey);
+      }
+    },
+    props.slots
+  );
+}
+const sortableGroupName = "ProFormBuilderBodySortGroup";
+exports.getValue = get_js;
+exports.setValue = set_js;
+exports.mergeValue = merge_js;
+exports.ChildrenRender = ChildrenRender;
+exports.arrayTypes = arrayTypes;
+exports.blurTypes = blurTypes;
+exports.containerTypes = containerTypes;
+exports.defaultTypes = defaultTypes;
+exports.getRuleMessage = getRuleMessage;
+exports.getRuleTrigger = getRuleTrigger;
+exports.getRuleType = getRuleType;
+exports.isShowItem = isShowItem;
+exports.numberTypes = numberTypes;
+exports.optionsTypes = optionsTypes;
+exports.selectTypes = selectTypes;
+exports.sortableGroupName = sortableGroupName;
+exports.stringTypes = stringTypes;
+exports.uploadTypes = uploadTypes;
+exports.viewTypes = viewTypes;