ele-admin-plus 1.3.0 → 1.4.0-beta.1

package/lib/ele-pro-form-builder/components/code-preview.cjs

@@ -0,0 +1,122 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../../icons/index");
+const common = require("../../utils/common");
+const hook = require("../../utils/hook");
+const EleModal = require("../../ele-modal/index");
+const EleTabBar = require("../../ele-tab-bar/index");
+const codeGenerator = require("./code-generator");
+const CodeViewer = require("./code-viewer");
+const _hoisted_1 = { class: "ele-pro-form-builder-code-view" };
+const _hoisted_2 = { class: "ele-pro-form-builder-code-body" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "CodePreview" },
+  __name: "code-preview",
+  props: {
+    modelValue: { type: Boolean },
+    config: {},
+    componentData: {},
+    codeViewerComponent: { type: [String, Object, Function] }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const [setCopied, resetCopied, copied] = hook.useTimer(1e3);
+    const tabItems = [
+      { value: "ProForm", label: "ProForm" },
+      { value: "ElForm", label: "ElForm" }
+    ];
+    const tabActive = vue.ref("ProForm");
+    const codeContent = vue.ref("");
+    const generateData = ["", ""];
+    const handleUpdateModelValue = (visible) => {
+      emit("update:modelValue", visible);
+    };
+    const setCodeContent = () => {
+      codeContent.value = generateData[tabActive.value === "ElForm" ? 1 : 0];
+    };
+    const handleCopy = () => {
+      common.copyText(codeContent.value).then(() => {
+        setCopied();
+      }).catch((error) => {
+        console.error(error);
+        resetCopied();
+      });
+    };
+    const handleDownload = () => {
+      common.download(codeContent.value, "index.vue", "text/plain;charset=utf-8");
+    };
+    vue.watch(
+      () => props.modelValue,
+      (visible) => {
+        if (visible) {
+          const proCode = codeGenerator.generateProFormCode(props.config, props.componentData);
+          const elCode = codeGenerator.generateElFormCode(props.config, props.componentData);
+          generateData[0] = proCode;
+          generateData[1] = elCode;
+          setCodeContent();
+        }
+      }
+    );
+    vue.watch(tabActive, () => {
+      setCodeContent();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(EleModal, {
+        width: 980,
+        maxable: true,
+        position: "center",
+        title: "生成代码",
+        modelValue: _ctx.modelValue,
+        closeOnClickModal: false,
+        destroyOnClose: true,
+        class: "ele-pro-form-builder-code-preview",
+        "onUpdate:modelValue": handleUpdateModelValue
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createVNode(EleTabBar, {
+              modelValue: tabActive.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabActive.value = $event),
+              items: tabItems
+            }, {
+              extra: vue.withCtx(() => [
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  class: vue.normalizeClass([
+                    "ele-pro-form-builder-code-icon-tool",
+                    { "is-copied": vue.unref(copied) }
+                  ]),
+                  title: "复制",
+                  onClick: handleCopy
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.unref(copied) ? (vue.openBlock(), vue.createBlock(vue.unref(index.CheckOutlined), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(index.CopyOutlined), { key: 1 }))
+                  ]),
+                  _: 1
+                }, 8, ["class"]),
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  class: "ele-pro-form-builder-code-icon-tool",
+                  title: "下载",
+                  onClick: handleDownload
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(index.DownloadOutlined))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"]),
+            vue.createElementVNode("div", _hoisted_2, [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.codeViewerComponent || CodeViewer), { code: codeContent.value }, null, 8, ["code"]))
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-pro-form-builder/components/code-preview.d.ts

@@ -0,0 +1,37 @@
+import { UserComponent } from '../../ele-app/types';
+import { EleProFormProps } from '../../ele-app/plus';
+import { ComponentGroup } from '../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单配置数据 */
+    config?: EleProFormProps;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (visible?: boolean | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单配置数据 */
+    config?: EleProFormProps;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((visible?: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/lib/ele-pro-form-builder/components/code-template.cjs

@@ -3,8 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const proTemplate = `<template>
   <pro-form
     v-bind="config"
-    :model="form"<%# if(d.showFooterExpand){ %>
-    v-model:search-expand="form.searchExpand"<%# } %>
+    :model="form"
     @updateValue="setFieldValue"
     @submit="handleSubmit"
     @reset="handleReset"
@@ -69,18 +68,15 @@ const formTemplate = `<template>
   };
 
   /** 重置表单 */
-  const handleReset = () => {<%# if(d.showFooterExpand){ %>
-    resetFields(void 0, ['searchExpand']);<%# }else{ %>
-    resetFields();<%# } %>
+  const handleReset = () => {
+    resetFields();
     nextTick(() => {
-      nextTick(() => {
-        formRef.value?.clearValidate?.();
-      });
+      formRef.value?.clearValidate?.();
     });
-  };
+  };<%# if(d.showFooterExpand){ %>
 
   /** 搜索表单是否展开 */
-  const searchExpand = computed(() => form.searchExpand);<%# if(d.formVarCode){ %>
+  const searchExpand = ref(false);<%# } %><%# if(d.formVarCode){ %>
 
   <% d.formVarCode %><%# } %>
 <\/script>
@@ -95,7 +91,7 @@ const contentTemplate = `<%# getFormContent(d.items,d.grid,d.rowProps,d.indentSi
 <% indentChar %>  <el-col<% d.generateColProps(null,contentExtraColProps,4,indentChar) %>>
 <% indentChar %>    <% d.addIndentChar(contentExtra,'    '+indentChar) %>
 <% indentChar %>  </el-col><%# } %>
-<% indentChar %></el-row><%# } } function getFormItem(item,indentSize){ var indentChar = Array.from({length:indentSize||0}).fill(' ').join(''); if(item.type=='icon'){ %><el-icon<% d.generateComponentProps(item,2,indentChar) %>><%# if(item.props&&item.props.name){ %>
+<% indentChar %></el-row><%# } } function getFormItem(item,indentSize){ var indentChar = Array.from({length:indentSize||0}).fill(' ').join(''); if(item.type=='icon'){ %><el-icon<% d.generateComponentProps(item,2,indentChar,['name']) %>><%# if(item.props&&item.props.name){ %>
 <% indentChar %>  <<% item.props.name %> /><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>
 <% indentChar %></el-icon><%# }else if(item.type=='tabs'){ %><ele-tabs<% d.generateComponentProps(item,2,indentChar) %>><%# (item.children||[]).forEach(function(tabItem){ %>
 <% indentChar %>  <template #<% tabItem.prop %>><%# getFormContent(tabItem.children,tabItem.grid,tabItem.rowProps,indentSize+4); %>
@@ -105,15 +101,15 @@ const contentTemplate = `<%# getFormContent(d.items,d.grid,d.rowProps,d.indentSi
 <% indentChar %></<% divTagName %>><%# }else if(d.isContainerType(item)){ %><<% d.getComponentTag(item) %><% d.generateComponentProps(item,2,indentChar) %>><%# if(item.label){ %>
 <% indentChar %>  <% item.label %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>
 <% indentChar %></<% d.getComponentTag(item) %>><%# }else{ %><el-form-item<% d.generateFormItemProps(item,2,indentChar) %>>
-<% indentChar %>  <%# if((item.type=='select'||item.type=='multipleSelect')&&Array.isArray((item.props||{}).options||[])){ %><el-select<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
+<% indentChar %>  <%# if((item.type=='select'||item.type=='multipleSelect')&&d.isArrayOptions(item)){ %><el-select<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
 <% indentChar %>    <el-option<% d.generatePropsCode(opt,true) %> /><%# }); %>
-<% indentChar %>  </el-select><%# }else if(item.type=='radio'&&Array.isArray((item.props||{}).options||[])){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
+<% indentChar %>  </el-select><%# }else if(item.type=='radio'&&d.isArrayOptions(item)){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
 <% indentChar %>    <el-radio<% d.generatePropsCode(opt,true) %> /><%# }); %>
-<% indentChar %>  </el-radio-group><%# }else if(item.type=='radioButton'&&Array.isArray((item.props||{}).options||[])){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
+<% indentChar %>  </el-radio-group><%# }else if(item.type=='radioButton'&&d.isArrayOptions(item)){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
 <% indentChar %>    <el-radio-button<% d.generatePropsCode(opt,true) %> /><%# }); %>
-<% indentChar %>  </el-radio-group><%# }else if(item.type=='checkbox'&&Array.isArray((item.props||{}).options||[])){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
+<% indentChar %>  </el-radio-group><%# }else if(item.type=='checkbox'&&d.isArrayOptions(item)){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
 <% indentChar %>    <el-checkbox<% d.generatePropsCode(opt,true) %> /><%# }); %>
-<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='checkboxButton'&&Array.isArray((item.props||{}).options||[])){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
+<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='checkboxButton'&&d.isArrayOptions(item)){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>
 <% indentChar %>    <el-checkbox-button<% d.generatePropsCode(opt,true) %> /><%# }); %>
 <% indentChar %>  </el-checkbox-group><%# }else if(item.type=='text'){ %><ele-text<% d.generateComponentProps(item,4,indentChar) %>>
 <% indentChar %>    {{ form.<% item.prop %> }}
@@ -121,22 +117,22 @@ const contentTemplate = `<%# getFormContent(d.items,d.grid,d.rowProps,d.indentSi
 <% indentChar %></el-form-item><%# } } %>`;
 const footerTemplate = `<el-form-item<% d.footerPropsCode %>>
   <div :style="<% d.footerStyleCode %>">
-    <el-button type="primary" @click="handleSubmit"><% d.showFooterExpand?'搜索':'提交' %></el-button>
-    <el-button @click="handleReset">重置</el-button><%# if(d.showFooterExpand){ %>
+    <el-button type="primary" @click="handleSubmit"><% d.submitText==null?'提交':d.submitText %></el-button>
+    <el-button @click="handleReset"><% d.resetText==null?'重置':d.resetText %></el-button><%# if(d.showFooterExpand){ %>
     <el-link
       type="primary"
-      :underline="false"
+      underline="never"
       style="margin-left: 12px"
-      @click="form.searchExpand = !form.searchExpand"
+      @click="searchExpand = !searchExpand"
     >
-      <template v-if="form.searchExpand">
-        <span>收起</span>
+      <template v-if="searchExpand">
+        <span><% d.searchShrinkText==null?'收起':d.searchShrinkText %></span>
         <el-icon style="vertical-align: -1px">
           <ArrowUp />
         </el-icon>
       </template>
       <template v-else>
-        <span>展开</span>
+        <span><% d.searchExpandText==null?'展开':d.searchExpandText %></span>
         <el-icon style="vertical-align: -2px">
           <ArrowDown />
         </el-icon>

package/lib/ele-pro-form-builder/components/code-template.d.ts

@@ -1,16 +1,16 @@
 /**
  * ProForm 代码生成模板
  */
-export declare const proTemplate = "<template>\n  <pro-form\n    v-bind=\"config\"\n    :model=\"form\"<%# if(d.showFooterExpand){ %>\n    v-model:search-expand=\"form.searchExpand\"<%# } %>\n    @updateValue=\"setFieldValue\"\n    @submit=\"handleSubmit\"\n    @reset=\"handleReset\"\n  />\n</template>\n\n<script setup>\n  <% d.proFormImportCode %><%# if(d.proFormVarCode){ %>\n\n  <% d.proFormVarCode %><%# } %>\n\n  /** \u8868\u5355\u914D\u7F6E */\n  const config = reactive(<% d.proFormConfigCode %>);\n\n  /** \u8868\u5355\u6570\u636E */\n  const [form, resetFields, _assignFields, setFieldValue] = useFormData(\n    getFormInitValue(config.items)\n  );\n\n  /** \u63D0\u4EA4\u8868\u5355 */\n  const handleSubmit = (form) => {\n    console.log(form);\n  };\n\n  /** \u91CD\u7F6E\u8868\u5355 */\n  const handleReset = () => {<%# if(d.showFooterExpand){ %>\n    resetFields(void 0, ['searchExpand']);<%# }else{ %>\n    resetFields();<%# } %>\n  };\n</script>\n";
+export declare const proTemplate: string;
 /**
  * ElForm 代码生成模板
  */
-export declare const formTemplate = "<template>\n  <el-form\n    ref=\"formRef\"\n    :model=\"form\"\n    :rules=\"rules\"<% d.formPropsCode %>\n    @submit.prevent=\"\"\n  ><% d.formContentCode %>\n  </el-form>\n</template>\n\n<script setup>\n  <% d.formImportCode %>\n\n  /** \u8868\u5355\u7EC4\u4EF6 */\n  const formRef = ref(null);\n\n  /** \u8868\u5355\u6570\u636E */\n  const [form, resetFields, _assignFields] = useFormData(<% d.modelCode %>);\n\n  /** \u8868\u5355\u9A8C\u8BC1\u89C4\u5219 */\n  const rules = reactive(<% d.formRuleCode %>);\n\n  /** \u63D0\u4EA4\u8868\u5355 */\n  const handleSubmit = () => {\n    formRef.value?.validate?.((valid) => {\n      if (!valid) {\n        return;\n      }\n      console.log(form);\n    });\n  };\n\n  /** \u91CD\u7F6E\u8868\u5355 */\n  const handleReset = () => {<%# if(d.showFooterExpand){ %>\n    resetFields(void 0, ['searchExpand']);<%# }else{ %>\n    resetFields();<%# } %>\n    nextTick(() => {\n      nextTick(() => {\n        formRef.value?.clearValidate?.();\n      });\n    });\n  };\n\n  /** \u641C\u7D22\u8868\u5355\u662F\u5426\u5C55\u5F00 */\n  const searchExpand = computed(() => form.searchExpand);<%# if(d.formVarCode){ %>\n\n  <% d.formVarCode %><%# } %>\n</script>\n";
+export declare const formTemplate: string;
 /**
  * ElForm 内容代码生成模板
  */
-export declare const contentTemplate = "<%# getFormContent(d.items,d.grid,d.rowProps,d.indentSize,d.contentExtra,d.contentExtraColProps); function getFormContent(items,grid,rowProps,indentSize,contentExtra,contentExtraColProps){ var indentChar = Array.from({length:indentSize||0}).fill(' ').join(''); if(!grid){ (items||[]).forEach(function(item){ %>\n<% indentChar %><%# getFormItem(item,indentSize); }); if(contentExtra){ %>\n<% indentChar %><% d.addIndentChar(contentExtra,indentChar) %><%# } }else if(items&&items.length){ %>\n<% indentChar %><el-row<% d.addIndentChar(d.generatePropsCode(rowProps,null,2,true),indentChar) %>><%# items.forEach(function(item){ %>\n<% indentChar %>  <el-col<% d.generateColProps(item,grid,4,indentChar) %>>\n<% indentChar %>    <%# getFormItem(item,(indentSize||0)+4); %>\n<% indentChar %>  </el-col><%# }); if(contentExtra){ %>\n<% indentChar %>  <el-col<% d.generateColProps(null,contentExtraColProps,4,indentChar) %>>\n<% indentChar %>    <% d.addIndentChar(contentExtra,'    '+indentChar) %>\n<% indentChar %>  </el-col><%# } %>\n<% indentChar %></el-row><%# } } function getFormItem(item,indentSize){ var indentChar = Array.from({length:indentSize||0}).fill(' ').join(''); if(item.type=='icon'){ %><el-icon<% d.generateComponentProps(item,2,indentChar) %>><%# if(item.props&&item.props.name){ %>\n<% indentChar %>  <<% item.props.name %> /><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></el-icon><%# }else if(item.type=='tabs'){ %><ele-tabs<% d.generateComponentProps(item,2,indentChar) %>><%# (item.children||[]).forEach(function(tabItem){ %>\n<% indentChar %>  <template #<% tabItem.prop %>><%# getFormContent(tabItem.children,tabItem.grid,tabItem.rowProps,indentSize+4); %>\n<% indentChar %>  </template><%# }); %>\n<% indentChar %></ele-tabs><%# }else if(item.type=='div'){ var divTagName = d.getDivTag(item); %><<% divTagName %><% d.generateComponentProps(item,2,indentChar) %>><%# const divHTML = (item.props||{}).innerHTML||item.label; if(divHTML){ %>\n<% indentChar %>  <% divHTML %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></<% divTagName %>><%# }else if(d.isContainerType(item)){ %><<% d.getComponentTag(item) %><% d.generateComponentProps(item,2,indentChar) %>><%# if(item.label){ %>\n<% indentChar %>  <% item.label %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></<% d.getComponentTag(item) %>><%# }else{ %><el-form-item<% d.generateFormItemProps(item,2,indentChar) %>>\n<% indentChar %>  <%# if((item.type=='select'||item.type=='multipleSelect')&&Array.isArray((item.props||{}).options||[])){ %><el-select<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-option<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-select><%# }else if(item.type=='radio'&&Array.isArray((item.props||{}).options||[])){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-radio<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-radio-group><%# }else if(item.type=='radioButton'&&Array.isArray((item.props||{}).options||[])){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-radio-button<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-radio-group><%# }else if(item.type=='checkbox'&&Array.isArray((item.props||{}).options||[])){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-checkbox<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='checkboxButton'&&Array.isArray((item.props||{}).options||[])){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar,['options']) %>><%# ((item.props||{}).options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-checkbox-button<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='text'){ %><ele-text<% d.generateComponentProps(item,4,indentChar) %>>\n<% indentChar %>    {{ form.<% item.prop %> }}\n<% indentChar %>  </ele-text><%# }else{ %><% d.generateComponentCode(item,4,indentChar) %><%# } %>\n<% indentChar %></el-form-item><%# } } %>";
+export declare const contentTemplate: string;
 /**
  * ElForm 底栏代码生成模板
  */
-export declare const footerTemplate = "<el-form-item<% d.footerPropsCode %>>\n  <div :style=\"<% d.footerStyleCode %>\">\n    <el-button type=\"primary\" @click=\"handleSubmit\"><% d.showFooterExpand?'\u641C\u7D22':'\u63D0\u4EA4' %></el-button>\n    <el-button @click=\"handleReset\">\u91CD\u7F6E</el-button><%# if(d.showFooterExpand){ %>\n    <el-link\n      type=\"primary\"\n      :underline=\"false\"\n      style=\"margin-left: 12px\"\n      @click=\"form.searchExpand = !form.searchExpand\"\n    >\n      <template v-if=\"form.searchExpand\">\n        <span>\u6536\u8D77</span>\n        <el-icon style=\"vertical-align: -1px\">\n          <ArrowUp />\n        </el-icon>\n      </template>\n      <template v-else>\n        <span>\u5C55\u5F00</span>\n        <el-icon style=\"vertical-align: -2px\">\n          <ArrowDown />\n        </el-icon>\n      </template>\n    </el-link><%# } %>\n  </div>\n</el-form-item>";
+export declare const footerTemplate: string;

package/lib/ele-pro-form-builder/components/code-viewer.cjs

@@ -0,0 +1,33 @@
+"use strict";
+const vue = require("vue");
+const _hoisted_1 = { class: "ele-pro-form-builder-code-line-numbers" };
+const _hoisted_2 = { class: "ele-pro-form-builder-code-pre" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "CodeViewer" },
+  __name: "code-viewer",
+  props: {
+    code: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const codeLines = vue.ref(1);
+    vue.watch(
+      () => props.code,
+      (code) => {
+        codeLines.value = code ? code.split("\n").length : 1;
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createElementVNode("div", _hoisted_1, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(codeLines.value, (n) => {
+            return vue.openBlock(), vue.createElementBlock("div", { key: n }, vue.toDisplayString(n), 1);
+          }), 128))
+        ]),
+        vue.createElementVNode("pre", _hoisted_2, vue.toDisplayString(_ctx.code), 1)
+      ], 64);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-pro-form-builder/components/code-viewer.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 代码 */
+    code?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 代码 */
+    code?: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};