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

package/lib/ele-pro-form/components/pro-form-footer.cjs

@@ -0,0 +1,147 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const ownSlots = ["footer", "footerExtra"];
+const _sfc_main = vue.defineComponent({
+  name: "ProFormFooter",
+  components: { ElFormItem: elementPlus.ElFormItem, ElButton: elementPlus.ElButton, ElLink: elementPlus.ElLink, ElIcon: elementPlus.ElIcon, ArrowDown: icons.ArrowDown, ArrowUp: icons.ArrowUp },
+  props: {
+    /** 底栏 ElFormItem 属性 */
+    footerProps: Object,
+    /** 底栏 ElFormItem 插槽 */
+    footerSlots: Object,
+    /** 底栏样式 */
+    footerStyle: Object,
+    /** 提交按钮文本 */
+    submitText: String,
+    /** 重置按钮文本 */
+    resetText: String,
+    /** 提交按钮属性 */
+    submitButtonProps: Object,
+    /** 重置按钮属性 */
+    resetButtonProps: Object,
+    /** 是否在底栏显示表单展开收起按钮 */
+    showSearchExpand: Boolean,
+    /** 搜索表单展开状态 */
+    searchExpand: Boolean,
+    /** 展开和收起按钮属性 */
+    searchExpandButtonProps: Object,
+    /** 展开按钮的文字 */
+    searchExpandText: String,
+    /** 收起按钮的文字 */
+    searchShrinkText: String
+  },
+  emits: {
+    updateSearchExpand: (_expand) => true,
+    submit: () => true,
+    reset: () => true
+  },
+  setup(props, { emit }) {
+    const toggleSearchExpand = () => {
+      emit("updateSearchExpand", !props.searchExpand);
+    };
+    const handleSubmit = () => {
+      emit("submit");
+    };
+    const handleReset = () => {
+      emit("reset");
+    };
+    return {
+      ownSlots,
+      toggleSearchExpand,
+      handleSubmit,
+      handleReset
+    };
+  }
+});
+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) {
+  var _a, _b;
+  const _component_ElButton = vue.resolveComponent("ElButton");
+  const _component_ArrowUp = vue.resolveComponent("ArrowUp");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ArrowDown = vue.resolveComponent("ArrowDown");
+  const _component_ElLink = vue.resolveComponent("ElLink");
+  const _component_ElFormItem = vue.resolveComponent("ElFormItem");
+  return vue.openBlock(), vue.createBlock(_component_ElFormItem, vue.mergeProps(_ctx.footerProps || {}, {
+    labelWidth: typeof ((_a = _ctx.footerProps) == null ? void 0 : _a.labelWidth) === "number" ? `${_ctx.footerProps.labelWidth}px` : (_b = _ctx.footerProps) == null ? void 0 : _b.labelWidth
+  }), vue.createSlots({
+    default: vue.withCtx(() => [
+      vue.createElementVNode("div", {
+        style: vue.normalizeStyle({
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          ..._ctx.footerStyle || {}
+        })
+      }, [
+        vue.renderSlot(_ctx.$slots, "footer", {}, () => [
+          vue.createVNode(_component_ElButton, vue.mergeProps({ type: "primary" }, _ctx.submitButtonProps || {}, { onClick: _ctx.handleSubmit }), {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.submitText), 1)
+            ]),
+            _: 1
+          }, 16, ["onClick"]),
+          vue.createVNode(_component_ElButton, vue.mergeProps(_ctx.resetButtonProps || {}, { onClick: _ctx.handleReset }), {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.resetText), 1)
+            ]),
+            _: 1
+          }, 16, ["onClick"])
+        ]),
+        _ctx.showSearchExpand ? (vue.openBlock(), vue.createBlock(_component_ElLink, vue.mergeProps({
+          key: 0,
+          type: "primary",
+          underline: false,
+          style: { "margin-left": "12px" }
+        }, _ctx.searchExpandButtonProps || {}, { onClick: _ctx.toggleSearchExpand }), {
+          default: vue.withCtx(() => [
+            _ctx.searchExpand ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              vue.createElementVNode("span", null, vue.toDisplayString(_ctx.searchShrinkText), 1),
+              vue.createVNode(_component_ElIcon, { style: { "vertical-align": "-1px" } }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_ArrowUp)
+                ]),
+                _: 1
+              })
+            ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createElementVNode("span", null, vue.toDisplayString(_ctx.searchExpandText), 1),
+              vue.createVNode(_component_ElIcon, { style: { "vertical-align": "-2px" } }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_ArrowDown)
+                ]),
+                _: 1
+              })
+            ], 64))
+          ]),
+          _: 1
+        }, 16, ["onClick"])) : vue.createCommentVNode("", true),
+        vue.renderSlot(_ctx.$slots, "footerExtra")
+      ], 4)
+    ]),
+    _: 2
+  }, [
+    vue.renderList(Object.keys(_ctx.footerSlots || {}).filter(
+      (k) => !_ctx.ownSlots.includes(k) && !!(_ctx.footerSlots && _ctx.footerSlots[k] && _ctx.$slots[_ctx.footerSlots[k]])
+    ), (name) => {
+      return {
+        name,
+        fn: vue.withCtx((slotProps) => {
+          var _a2;
+          return [
+            vue.renderSlot(_ctx.$slots, (_a2 = _ctx.footerSlots) == null ? void 0 : _a2[name], vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ];
+        })
+      };
+    })
+  ]), 1040, ["labelWidth"]);
+}
+const proFormFooter = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = proFormFooter;

package/lib/ele-pro-form/components/pro-form-footer.d.ts

@@ -0,0 +1,71 @@
+import { CSSProperties, PropType } from 'vue';
+import { ElFormItemProps, ElButtonProps, ElLinkProps } from '../../ele-app/el';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 底栏 ElFormItem 属性 */
+    footerProps: PropType<ElFormItemProps>;
+    /** 底栏 ElFormItem 插槽 */
+    footerSlots: PropType<Record<string, string>>;
+    /** 底栏样式 */
+    footerStyle: PropType<CSSProperties>;
+    /** 提交按钮文本 */
+    submitText: StringConstructor;
+    /** 重置按钮文本 */
+    resetText: StringConstructor;
+    /** 提交按钮属性 */
+    submitButtonProps: PropType<ElButtonProps>;
+    /** 重置按钮属性 */
+    resetButtonProps: PropType<ElButtonProps>;
+    /** 是否在底栏显示表单展开收起按钮 */
+    showSearchExpand: BooleanConstructor;
+    /** 搜索表单展开状态 */
+    searchExpand: BooleanConstructor;
+    /** 展开和收起按钮属性 */
+    searchExpandButtonProps: PropType<ElLinkProps>;
+    /** 展开按钮的文字 */
+    searchExpandText: StringConstructor;
+    /** 收起按钮的文字 */
+    searchShrinkText: StringConstructor;
+}, {
+    ownSlots: string[];
+    toggleSearchExpand: () => void;
+    handleSubmit: () => void;
+    handleReset: () => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    updateSearchExpand: (_expand: boolean) => true;
+    submit: () => true;
+    reset: () => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 底栏 ElFormItem 属性 */
+    footerProps: PropType<ElFormItemProps>;
+    /** 底栏 ElFormItem 插槽 */
+    footerSlots: PropType<Record<string, string>>;
+    /** 底栏样式 */
+    footerStyle: PropType<CSSProperties>;
+    /** 提交按钮文本 */
+    submitText: StringConstructor;
+    /** 重置按钮文本 */
+    resetText: StringConstructor;
+    /** 提交按钮属性 */
+    submitButtonProps: PropType<ElButtonProps>;
+    /** 重置按钮属性 */
+    resetButtonProps: PropType<ElButtonProps>;
+    /** 是否在底栏显示表单展开收起按钮 */
+    showSearchExpand: BooleanConstructor;
+    /** 搜索表单展开状态 */
+    searchExpand: BooleanConstructor;
+    /** 展开和收起按钮属性 */
+    searchExpandButtonProps: PropType<ElLinkProps>;
+    /** 展开按钮的文字 */
+    searchExpandText: StringConstructor;
+    /** 收起按钮的文字 */
+    searchShrinkText: StringConstructor;
+}>> & {
+    onReset?: (() => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+    onUpdateSearchExpand?: ((_expand: boolean) => any) | undefined;
+}, {
+    showSearchExpand: boolean;
+    searchExpand: boolean;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,442 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const VueDraggable = require("vuedraggable");
+const elementPlus = require("element-plus");
+const core = require("../../utils/core");
+const util = require("../util");
+const props = require("../props");
+const BuilderWrapper = require("./builder-wrapper.vue");
+const itemTypeData = require("./item-type-data");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const sortableGroupName = "ProFormBuilderBodySortGroup";
+function getRuleMessage(label, requiredMessage, placeholder) {
+  if (typeof requiredMessage === "string" && requiredMessage) {
+    return requiredMessage;
+  }
+  if (typeof placeholder === "string" && placeholder) {
+    return placeholder;
+  }
+  return `${label ?? ""}必填`;
+}
+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 translateJsCode(code, model, items, searchExpand) {
+  if (code != null) {
+    if (typeof code === "string") {
+      if (code.startsWith("/*__PRO_FORM__*/")) {
+        try {
+          return new Function("form", "items", "searchExpand", "formData", "formItems", `return (${code})`)(model, items, searchExpand, model, items);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      return code;
+    } else if (Array.isArray(code)) {
+      return code.map((c) => translateJsCode(c, model, items, searchExpand));
+    } else if (typeof code === "object") {
+      const result = {};
+      Object.keys(code).forEach((k) => {
+        result[k] = translateJsCode(code[k], model, items, searchExpand);
+      });
+      return result;
+    }
+  }
+  return code;
+}
+function renderProFormItem(props2) {
+  var _a, _b, _c;
+  const slots = props2.slots || {};
+  const itemType = props2.item.type;
+  const formData = props2.model || {};
+  const typeSlot = itemType ? slots[itemType] : void 0;
+  const typeData = [...props2.itemTypeData || [], ...itemTypeData.defaultItemTypeData].find((d) => d.type === itemType);
+  if (!typeSlot && !typeData) {
+    return;
+  }
+  const modelValue = props2.item.prop == null ? void 0 : util.getValue(formData, props2.item.prop);
+  const handleUpdateModelValue = (value) => {
+    const propName = props2.item.prop;
+    props2.updateItemValue(propName, value);
+  };
+  const propsFunctionParams = {
+    item: props2.item,
+    modelValue,
+    updateModelValue: handleUpdateModelValue,
+    isShowFormItem: (cItem) => isShowItem(cItem, formData, props2.formItems || [], props2.searchExpand),
+    renderChildren: (cItem, cSortDisabled, cContainerSelectable) => renderProFormContent({
+      model: formData,
+      items: cItem.children,
+      rules: props2.rules,
+      grid: cItem.grid,
+      rowProps: cItem.rowProps,
+      parentItem: cItem,
+      formItems: props2.formItems,
+      searchExpand: props2.searchExpand,
+      editable: props2.editable,
+      sortDisabled: !!cSortDisabled,
+      containerSelectable: !!cContainerSelectable,
+      activeItemKey: props2.activeItemKey,
+      updateItemValue: props2.updateItemValue,
+      updateItemsData: props2.updateItemsData,
+      updateActiveItemKey: props2.updateActiveItemKey,
+      slots,
+      itemTypeData: props2.itemTypeData
+    })
+  };
+  const slotProFormParams = {
+    item: props2.item,
+    model: formData,
+    rules: props2.rules,
+    formItems: props2.formItems,
+    searchExpand: props2.searchExpand,
+    editable: props2.editable,
+    activeItemKey: props2.activeItemKey,
+    itemTypeData: props2.itemTypeData,
+    updateItemValue: props2.updateItemValue,
+    updateItemsData: props2.updateItemsData,
+    updateActiveItemKey: props2.updateActiveItemKey,
+    slots
+  };
+  const itemSlots = {};
+  if (!typeSlot) {
+    const itemSlotMap = props2.item.slots || {};
+    Object.keys(itemSlotMap).forEach((name) => {
+      if (itemSlotMap[name]) {
+        const slotFuntion = slots[itemSlotMap[name]];
+        if (slotFuntion) {
+          itemSlots[name] = (slotProps) => slotFuntion({
+            proForm: slotProFormParams,
+            ...slotProps || {}
+          });
+        }
+      }
+    });
+    if (typeData && typeData.reservedSlots) {
+      const itemReservedSlots = typeData.reservedSlots(propsFunctionParams);
+      Object.keys(itemReservedSlots).forEach((name) => {
+        if (itemReservedSlots[name]) {
+          itemSlots[name] = itemReservedSlots[name];
+        }
+      });
+    }
+    if (!itemSlots.default) {
+      const isRenderLabel = (typeData == null ? void 0 : typeData.renderLabelText) && props2.item.label != null && props2.item.label !== "";
+      const isRenderChildren = (!typeData || typeData.isContainer) && (!(typeData == null ? void 0 : typeData.sortDisabled) && props2.editable || props2.item.children && props2.item.children.length);
+      const isRenderOptions = props2.item.options && (typeData == null ? void 0 : typeData.optionsComponent);
+      if (isRenderLabel || isRenderChildren || isRenderOptions) {
+        itemSlots.default = () => {
+          const nodes = [];
+          if (isRenderLabel && props2.item.label != null) {
+            nodes.push(props2.item.label);
+          }
+          if (isRenderChildren) {
+            const contentNode = renderProFormContent({
+              model: formData,
+              items: props2.item.children,
+              rules: props2.rules,
+              grid: props2.item.grid,
+              rowProps: props2.item.rowProps,
+              parentItem: props2.item,
+              formItems: props2.formItems,
+              searchExpand: props2.searchExpand,
+              editable: props2.editable,
+              sortDisabled: !!(typeData == null ? void 0 : typeData.sortDisabled),
+              containerSelectable: !!(typeData == null ? void 0 : typeData.containerSelectable),
+              activeItemKey: props2.activeItemKey,
+              updateItemValue: props2.updateItemValue,
+              updateItemsData: props2.updateItemsData,
+              updateActiveItemKey: props2.updateActiveItemKey,
+              slots,
+              itemTypeData: props2.itemTypeData
+            });
+            if (contentNode) {
+              if (Array.isArray(contentNode)) {
+                contentNode.forEach((node) => {
+                  nodes.push(node);
+                });
+              } else {
+                nodes.push(contentNode);
+              }
+            }
+          } else if (isRenderOptions && (typeData == null ? void 0 : typeData.optionsComponent)) {
+            const optionsComponent = typeData.optionsComponent;
+            (props2.item.options || []).forEach((option) => {
+              var _a2;
+              const defaultProps = {
+                key: option.key ?? option.value
+              };
+              const userProps = (_a2 = typeData.optionsComponentProps) == null ? void 0 : _a2.call(typeData, option);
+              nodes.push(vue.h(optionsComponent, userProps ? vue.mergeProps(defaultProps, userProps) : defaultProps));
+            });
+          }
+          return nodes;
+        };
+      }
+    }
+  }
+  const componentTag = (typeData == null ? void 0 : typeData.component) || "div";
+  const isDivTag = componentTag === "div" || componentTag === "td";
+  const componentPropsData = translateJsCode(props2.item.props || {}, formData, props2.formItems || [], props2.searchExpand);
+  const componentNode = typeSlot ? typeSlot({
+    item: props2.item,
+    model: formData,
+    modelValue,
+    updateValue: handleUpdateModelValue,
+    updatePropValue: props2.updateItemValue,
+    proForm: slotProFormParams
+  }) : vue.h((isDivTag ? (_a = props2.item.props) == null ? void 0 : _a.is : void 0) || componentTag, vue.mergeProps({
+    key: props2.key
+  }, ((_b = typeData == null ? void 0 : typeData.defaultProps) == null ? void 0 : _b.call(typeData, propsFunctionParams)) || {}, isDivTag ? core.omit(componentPropsData, ["is"]) : componentPropsData, ((_c = typeData == null ? void 0 : typeData.reservedProps) == null ? void 0 : _c.call(typeData, propsFunctionParams)) || {}), itemSlots);
+  if ((typeData == null ? void 0 : typeData.isContainer) || props2.item.itemType === "container" || props2.item.itemType === "view") {
+    return componentNode;
+  }
+  const itemPropsData = translateJsCode(props2.item.itemProps || {}, formData, props2.formItems || [], props2.searchExpand);
+  const labelWidth = itemPropsData.labelWidth;
+  const formItemLabelWidth = typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth;
+  const formItemSlots = {};
+  const formItemSlotMap = props2.item.itemSlots || {};
+  Object.keys(formItemSlotMap).forEach((name) => {
+    if (formItemSlotMap[name] && slots[formItemSlotMap[name]]) {
+      formItemSlots[name] = slots[formItemSlotMap[name]];
+    }
+  });
+  formItemSlots.default = () => componentNode;
+  const iRule = itemPropsData.rules;
+  const iRules = iRule ? Array.isArray(iRule) ? iRule : [iRule] : void 0;
+  const fRule = props2.rules ? props2.rules[props2.item.prop] : void 0;
+  const fRules = fRule ? Array.isArray(fRule) ? fRule : [fRule] : void 0;
+  const formItemRules = iRules || fRules || [];
+  const trigger = (typeData == null ? void 0 : typeData.requiredTrigger) ?? "change";
+  const message = getRuleMessage(props2.item.label, props2.item.requiredMessage, componentPropsData.placeholder);
+  if (props2.item.required) {
+    formItemRules.unshift({
+      required: true,
+      message,
+      trigger
+    });
+  }
+  return vue.createVNode(elementPlus.ElFormItem, vue.mergeProps({
+    "key": props2.key,
+    "label": props2.item.label
+  }, itemPropsData, {
+    "labelWidth": formItemLabelWidth,
+    "prop": props2.item.prop,
+    "rules": formItemRules
+  }), _isSlot(formItemSlots) ? formItemSlots : {
+    default: () => [formItemSlots]
+  });
+}
+function renderProFormContent(props2) {
+  const nodes = [];
+  const slots = props2.slots || {};
+  const itemsData = props2.items || [];
+  const formData = props2.model || {};
+  const ownSlots = ["default", "contentExtra"];
+  const getProFormItemNode = (item, editable, sortDisabled) => {
+    const itemKey = item.key ?? item.prop;
+    const defaultSlot = () => {
+      return renderProFormItem({
+        key: itemKey,
+        item,
+        model: formData,
+        rules: props2.rules,
+        formItems: props2.formItems,
+        searchExpand: props2.searchExpand,
+        editable: props2.editable,
+        activeItemKey: props2.activeItemKey,
+        updateItemValue: props2.updateItemValue,
+        updateItemsData: props2.updateItemsData,
+        updateActiveItemKey: props2.updateActiveItemKey,
+        slots: core.omit(slots, ownSlots),
+        itemTypeData: props2.itemTypeData
+      });
+    };
+    if (!editable) {
+      return defaultSlot();
+    }
+    return vue.createVNode(BuilderWrapper, {
+      "key": itemKey,
+      "item": item,
+      "handle": !sortDisabled,
+      "activeItemKey": props2.activeItemKey,
+      "onUpdate:activeItemKey": props2.updateActiveItemKey
+    }, {
+      default: defaultSlot,
+      builderItemHandleContent: slots.builderItemHandleContent,
+      builderItemTools: slots.builderItemTools
+    });
+  };
+  if (props2.grid) {
+    itemsData.forEach((item) => {
+      const itemKey = item.key ?? item.prop;
+      const gridColProps = props2.grid === true ? {
+        span: 12
+      } : props2.grid;
+      const itemColProps = translateJsCode(item.colProps || {}, formData, props2.formItems || [], props2.searchExpand);
+      if (props2.editable && !props2.sortDisabled) {
+        let _slot;
+        nodes.push(vue.createVNode(elementPlus.ElCol, vue.mergeProps({
+          "key": itemKey
+        }, gridColProps, itemColProps), _isSlot(_slot = getProFormItemNode(item, true, true)) ? _slot : {
+          default: () => [_slot]
+        }));
+      } else if (isShowItem(item, formData, props2.formItems || [], props2.searchExpand)) {
+        let _slot2;
+        nodes.push(vue.createVNode(elementPlus.ElCol, vue.mergeProps({
+          "key": itemKey
+        }, gridColProps, itemColProps), _isSlot(_slot2 = getProFormItemNode(item)) ? _slot2 : {
+          default: () => [_slot2]
+        }));
+      }
+    });
+    if (slots.contentExtra) {
+      let _slot3;
+      nodes.push(vue.createVNode(elementPlus.ElCol, translateJsCode(props2.contentExtraColProps || {}, formData, props2.formItems || [], props2.searchExpand), _isSlot(_slot3 = slots.contentExtra()) ? _slot3 : {
+        default: () => [_slot3]
+      }));
+    }
+    return vue.createVNode(elementPlus.ElRow, translateJsCode(props2.rowProps || {}, formData, props2.formItems || [], props2.searchExpand), _isSlot(nodes) ? nodes : {
+      default: () => [nodes]
+    });
+  }
+  if (props2.editable && !props2.sortDisabled) {
+    const footerSlot = () => {
+      var _a;
+      return vue.createVNode("div", {
+        "class": "ele-pro-form-builder-item-tool-wrapper"
+      }, [vue.createVNode("div", {
+        "class": "ele-pro-form-builder-item-handle is-disabled"
+      }, [slots.builderItemHandleContent ? slots.builderItemHandleContent({
+        item: props2.parentItem,
+        activeItemKey: props2.activeItemKey
+      }) : vue.createVNode("div", {
+        "class": "ele-pro-form-builder-item-handle-content"
+      }, [(_a = props2.parentItem) == null ? void 0 : _a.type])]), vue.createVNode("div", {
+        "class": "ele-pro-form-builder-item-tools"
+      }, [slots.builderItemTools ? slots.builderItemTools({
+        item: props2.parentItem,
+        activeItemKey: props2.activeItemKey
+      }) : void 0])]);
+    };
+    const handleUpdateModelValue = (data) => {
+      props2.updateItemsData(data, props2.parentItem);
+    };
+    const handleContainerBuilderWrapperClick = (e) => {
+      var _a;
+      const parentItemKey = (_a = props2.parentItem) == null ? void 0 : _a.key;
+      if (props2.containerSelectable && parentItemKey != null) {
+        e.stopPropagation();
+        props2.updateActiveItemKey(parentItemKey);
+      }
+    };
+    nodes.push(vue.createVNode(VueDraggable, {
+      "itemKey": "key",
+      "animation": 150,
+      "modelValue": itemsData,
+      "setData": () => void 0,
+      "group": sortableGroupName,
+      "handle": ".ele-pro-form-builder-item-handle",
+      "draggable": ".ele-pro-form-builder-item-wrapper",
+      "class": ["ele-pro-form-builder-container-wrapper", {
+        "is-selectable": props2.containerSelectable
+      }, {
+        "is-active": props2.containerSelectable && props2.parentItem && props2.parentItem.key != null && props2.activeItemKey != null && props2.activeItemKey === props2.parentItem.key
+      }],
+      "onUpdate:modelValue": handleUpdateModelValue,
+      "onClick": handleContainerBuilderWrapperClick
+    }, {
+      item: ({
+        element
+      }) => getProFormItemNode(element, true),
+      footer: props2.containerSelectable && props2.parentItem ? footerSlot : void 0
+    }));
+  } else {
+    itemsData.forEach((item) => {
+      if (isShowItem(item, formData, props2.formItems || [], props2.searchExpand)) {
+        const proFormItemNode = getProFormItemNode(item);
+        if (proFormItemNode) {
+          if (Array.isArray(proFormItemNode)) {
+            proFormItemNode.forEach((node) => {
+              nodes.push(node);
+            });
+          } else {
+            nodes.push(proFormItemNode);
+          }
+        }
+      }
+    });
+  }
+  if (slots.contentExtra) {
+    const contentExtraNodes = slots.contentExtra();
+    if (contentExtraNodes) {
+      if (Array.isArray(contentExtraNodes)) {
+        contentExtraNodes.forEach((node) => {
+          nodes.push(node);
+        });
+      } else {
+        nodes.push(contentExtraNodes);
+      }
+    }
+  }
+  return nodes;
+}
+const ChildrenRender = /* @__PURE__ */ vue.defineComponent({
+  name: "ChildrenRender",
+  props: props.childrenRenderProps,
+  emits: {
+    updateItemValue: (_prop, _value) => true,
+    updateItemsData: (_items, _parentItem) => true,
+    "update:activeItemKey": (_activeKey) => true
+  },
+  setup(props2, {
+    emit,
+    slots
+  }) {
+    const handleUpdateItemValue = (prop, value) => {
+      emit("updateItemValue", prop, value);
+    };
+    const handleUpdateItemsData = (items, parentItem) => {
+      emit("updateItemsData", items, parentItem);
+    };
+    const handleUpdateActiveItemKey = (activeKey) => {
+      emit("update:activeItemKey", activeKey);
+    };
+    return () => renderProFormContent({
+      ...props2,
+      updateItemValue: handleUpdateItemValue,
+      updateItemsData: handleUpdateItemsData,
+      updateActiveItemKey: handleUpdateActiveItemKey,
+      slots: props2.slots ?? slots
+    });
+  }
+});
+exports.ChildrenRender = ChildrenRender;
+exports.getRuleMessage = getRuleMessage;
+exports.isShowItem = isShowItem;
+exports.renderProFormContent = renderProFormContent;
+exports.renderProFormItem = renderProFormItem;
+exports.sortableGroupName = sortableGroupName;
+exports.translateJsCode = translateJsCode;