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

package/lib/ele-pro-form-builder/components/icons/icon-table-row.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'vue';
+
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    size?: "sm" | "md";
+    multiple?: boolean;
+    checkboxChecked?: boolean;
+    skeletonStyle?: CSSProperties;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    size?: "sm" | "md";
+    multiple?: boolean;
+    checkboxChecked?: boolean;
+    skeletonStyle?: CSSProperties;
+}>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ele-pro-form-builder/components/icons/icon-table.cjs

@@ -0,0 +1,64 @@
+"use strict";
+const vue = require("vue");
+const index = require("./index");
+const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", { style: { flex: 1 } }, null, -1);
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "icon-table",
+  props: {
+    size: {},
+    multiple: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "ele-icon-border-color-base",
+        style: vue.normalizeStyle({
+          borderStyle: "solid",
+          borderWidth: "1px",
+          borderRadius: _ctx.size === "sm" ? "2px" : "4px"
+        })
+      }, [
+        vue.createVNode(vue.unref(index.IconTableRow), {
+          size: _ctx.size,
+          multiple: _ctx.multiple,
+          class: "ele-icon-bg-fill",
+          style: vue.normalizeStyle({ borderRadius: _ctx.size === "sm" ? "2px 2px 0 0" : "4px 4px 0 0" })
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              style: vue.normalizeStyle({ flex: 1, marginLeft: _ctx.size === "sm" ? "4px" : "6px" })
+            }, null, 4),
+            vue.createElementVNode("div", {
+              class: "ele-icon-border-color-base",
+              style: vue.normalizeStyle({
+                flex: 1,
+                height: _ctx.size === "sm" ? "4px" : "8px",
+                borderLeftStyle: "solid",
+                borderLeftWidth: "1px",
+                borderRightStyle: "solid",
+                borderRightWidth: "1px"
+              })
+            }, null, 4),
+            _hoisted_1
+          ]),
+          _: 1
+        }, 8, ["size", "multiple", "style"]),
+        vue.createVNode(vue.unref(index.IconTableRow), {
+          size: _ctx.size,
+          multiple: _ctx.multiple,
+          checkboxChecked: true
+        }, null, 8, ["size", "multiple"]),
+        vue.createVNode(vue.unref(index.IconTableRow), {
+          size: _ctx.size,
+          multiple: _ctx.multiple
+        }, null, 8, ["size", "multiple"]),
+        vue.createVNode(vue.unref(index.IconTableRow), {
+          size: _ctx.size,
+          multiple: _ctx.multiple,
+          style: { border: "none" }
+        }, null, 8, ["size", "multiple"])
+      ], 4);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-pro-form-builder/components/icons/icon-table.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    size?: "sm" | "md";
+    multiple?: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    size?: "sm" | "md";
+    multiple?: boolean;
+}>>>, {}, {}>;
+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/icons/index.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const iconArrow = require("./icon-arrow");
+const iconButton = require("./icon-button");
+const iconCalendar = require("./icon-calendar");
+const iconCard = require("./icon-card");
+const iconCheckbox = require("./icon-checkbox");
+const iconCursor = require("./icon-cursor");
+const svgIcon = require("./svg-icon");
+const iconImage = require("./icon-image");
+const iconInput = require("./icon-input");
+const iconPanel = require("./icon-panel");
+const iconRadio = require("./icon-radio");
+const iconRadioButton = require("./icon-radio-button");
+const iconRangeSkeleton = require("./icon-range-skeleton");
+const iconSkeleton = require("./icon-skeleton");
+const iconTable = require("./icon-table");
+const iconTableRow = require("./icon-table-row");
+exports.IconArrow = iconArrow;
+exports.IconButton = iconButton;
+exports.IconCalendar = iconCalendar;
+exports.IconCard = iconCard;
+exports.IconCheckbox = iconCheckbox;
+exports.IconCursor = iconCursor;
+exports.SvgIcon = svgIcon;
+exports.IconImage = iconImage;
+exports.IconInput = iconInput;
+exports.IconPanel = iconPanel;
+exports.IconRadio = iconRadio;
+exports.IconRadioButton = iconRadioButton;
+exports.IconRangeSkeleton = iconRangeSkeleton;
+exports.IconSkeleton = iconSkeleton;
+exports.IconTable = iconTable;
+exports.IconTableRow = iconTableRow;

package/lib/ele-pro-form-builder/components/icons/index.d.ts

@@ -0,0 +1,16 @@
+export { default as IconArrow } from './icon-arrow';
+export { default as IconButton } from './icon-button';
+export { default as IconCalendar } from './icon-calendar';
+export { default as IconCard } from './icon-card';
+export { default as IconCheckbox } from './icon-checkbox';
+export { default as IconCursor } from './icon-cursor';
+export { default as SvgIcon } from './svg-icon';
+export { default as IconImage } from './icon-image';
+export { default as IconInput } from './icon-input';
+export { default as IconPanel } from './icon-panel';
+export { default as IconRadio } from './icon-radio';
+export { default as IconRadioButton } from './icon-radio-button';
+export { default as IconRangeSkeleton } from './icon-range-skeleton';
+export { default as IconSkeleton } from './icon-skeleton';
+export { default as IconTable } from './icon-table';
+export { default as IconTableRow } from './icon-table-row';

package/lib/ele-pro-form-builder/components/icons/svg-icon.cjs

@@ -0,0 +1,65 @@
+"use strict";
+const vue = require("vue");
+const icons = require("../../../icons");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    components: {
+      ArrowUp: icons.ArrowUp,
+      ArrowDown: icons.ArrowDown,
+      ArrowRight: icons.ArrowRight,
+      ArrowLeft: icons.ArrowLeft,
+      CheckOutlined: icons.CheckOutlined,
+      CalendarOutlined: icons.CalendarOutlined,
+      PlusOutlined: icons.PlusOutlined,
+      StarFilled: icons.StarFilled,
+      ClockCircleOutlined: icons.ClockCircleOutlined,
+      EnvironmentOutlined: icons.EnvironmentOutlined,
+      CheckCircleFilled: icons.CheckCircleFilled,
+      StepForwardFilled: icons.StepForwardFilled,
+      ExclamationCircleFilled: icons.ExclamationCircleFilled,
+      UserOutlined: icons.UserOutlined,
+      CloseOutlined: icons.CloseOutlined
+    }
+  },
+  __name: "svg-icon",
+  props: {
+    name: {},
+    iconStyle: {},
+    size: {},
+    color: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          {
+            "ele-icon-color-primary": _ctx.color !== "secondary" && _ctx.color !== "lighter" && _ctx.color !== "base" && _ctx.color !== "placeholder" && _ctx.color !== "light" && _ctx.color !== "primary5" && _ctx.color !== "success"
+          },
+          { "ele-icon-color-secondary": _ctx.color === "secondary" },
+          { "ele-icon-color-lighter": _ctx.color === "lighter" },
+          { "ele-icon-color-base": _ctx.color === "base" },
+          { "ele-icon-color-placeholder": _ctx.color === "placeholder" },
+          { "ele-icon-color-light": _ctx.color === "light" },
+          { "ele-icon-color-primary5": _ctx.color === "primary5" },
+          { "ele-icon-color-success": _ctx.color === "success" }
+        ]),
+        style: vue.normalizeStyle({
+          flexShrink: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: _ctx.size === "sm" ? "12px" : "14px"
+        })
+      }, [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.name), {
+            width: "1em",
+            height: "1em",
+            style: vue.normalizeStyle(_ctx.iconStyle)
+          }, null, 8, ["style"]))
+        ])
+      ], 6);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-pro-form-builder/components/icons/svg-icon.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'vue';
+
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    name?: string;
+    iconStyle?: CSSProperties;
+    size?: "sm" | "md";
+    color?: "primary" | "secondary" | "lighter" | "base" | "placeholder" | "light" | "primary5" | "success";
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    name?: string;
+    iconStyle?: CSSProperties;
+    size?: "sm" | "md";
+    color?: "primary" | "secondary" | "lighter" | "base" | "placeholder" | "light" | "primary5" | "success";
+}>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ele-pro-form-builder/components/if-edit.cjs

@@ -0,0 +1,105 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const EleModal = require("../../ele-modal/index");
+const CodeEditer = require("./code-editer");
+const _hoisted_1 = { class: "ele-pro-form-builder-code-edit-wrapper" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-pro-form-builder-code-edit-header"
+};
+const _hoisted_3 = { class: "ele-pro-form-builder-code-edit-body" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "if-edit",
+  props: {
+    modelValue: {},
+    title: {},
+    codeTips: {},
+    codeEditerComponent: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visible = vue.ref(false);
+    const codeContent = vue.ref("");
+    const openModal = () => {
+      codeContent.value = props.modelValue ?? "";
+      visible.value = true;
+    };
+    const handleCancel = () => {
+      visible.value = false;
+      codeContent.value = "";
+    };
+    const handleSave = () => {
+      const result = codeContent.value;
+      handleCancel();
+      emit("update:modelValue", result === "" ? void 0 : result);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createVNode(vue.unref(elementPlus.ElButton), {
+          size: "small",
+          style: { width: "100%" },
+          onClick: openModal
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
+          ]),
+          _: 1
+        }),
+        vue.createVNode(EleModal, {
+          width: 800,
+          maxable: true,
+          position: "center",
+          title: _ctx.title,
+          modelValue: visible.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
+          closeOnClickModal: false,
+          destroyOnClose: true,
+          bodyStyle: {
+            height: "520px",
+            minHeight: "100%",
+            maxHeight: "100%",
+            padding: "8px 16px"
+          }
+        }, {
+          footer: vue.withCtx(() => [
+            vue.createVNode(vue.unref(elementPlus.ElButton), {
+              size: "default",
+              onClick: handleCancel
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("取消")
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(elementPlus.ElButton), {
+              type: "primary",
+              size: "default",
+              onClick: handleSave
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(" 保存 ")
+              ]),
+              _: 1
+            })
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_1, [
+              _ctx.codeTips ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(_ctx.codeTips), 1)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_3, [
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.codeEditerComponent || CodeEditer), {
+                  modelValue: codeContent.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => codeContent.value = $event)
+                }, null, 8, ["modelValue"]))
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["title", "modelValue"])
+      ], 64);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-pro-form-builder/components/if-edit.d.ts

@@ -0,0 +1,35 @@
+import { UserComponent } from '../../ele-app/types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 数据 */
+    modelValue?: string;
+    /** 弹窗标题 */
+    title?: string;
+    /** 顶部提示内容 */
+    codeTips?: string;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (data?: string | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 数据 */
+    modelValue?: string;
+    /** 弹窗标题 */
+    title?: string;
+    /** 顶部提示内容 */
+    codeTips?: string;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+}>>> & {
+    "onUpdate:modelValue"?: ((data?: string | undefined) => any) | undefined;
+}, {}, {}>;
+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/import-modal.cjs

@@ -0,0 +1,124 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const EleModal = require("../../ele-modal/index");
+const buildUtil = require("./build-util");
+const CodeEditer = require("./code-editer");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "import-modal",
+  props: {
+    modelValue: { type: Boolean },
+    config: {},
+    isImport: { type: Boolean },
+    jsonEditerComponent: {}
+  },
+  emits: ["update:modelValue", "importData"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const jsonContent = vue.ref("");
+    const handleUpdateModelValue = (visible) => {
+      emit("update:modelValue", visible);
+    };
+    const handleImportData = (data) => {
+      emit("importData", data);
+    };
+    const handleCloseModal = () => {
+      handleUpdateModelValue(false);
+    };
+    const handleImport = () => {
+      if (!jsonContent.value) {
+        return;
+      }
+      handleCloseModal();
+      try {
+        const result = JSON.parse(jsonContent.value);
+        if (result && Array.isArray(result)) {
+          const config = JSON.parse(JSON.stringify(props.config));
+          buildUtil.itemsGenerateNewKey(result, config.items, false);
+          result.forEach((item) => {
+            config.items.push(item);
+          });
+          handleImportData(config);
+          return;
+        }
+        if (result && typeof result === "object" && result.prop && result.items == null) {
+          const config = JSON.parse(JSON.stringify(props.config));
+          buildUtil.itemsGenerateNewKey(result, config.items, false);
+          config.items.push(result);
+          handleImportData(config);
+          return;
+        }
+        if (result) {
+          buildUtil.itemsGenerateNewKey(result.items, [], false);
+          handleImportData(result);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    };
+    vue.watch(
+      () => props.modelValue,
+      (visible) => {
+        if (visible && !props.isImport) {
+          jsonContent.value = JSON.stringify(props.config || {}, void 0, 2);
+        } else {
+          jsonContent.value = "";
+        }
+      }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(EleModal, {
+        width: 800,
+        maxable: true,
+        position: "center",
+        title: "表单配置JSON",
+        modelValue: _ctx.modelValue,
+        closeOnClickModal: false,
+        destroyOnClose: true,
+        bodyStyle: {
+          height: "520px",
+          minHeight: "100%",
+          maxHeight: "100%",
+          padding: _ctx.isImport ? "8px 16px 8px 16px" : "8px 16px 12px 16px"
+        },
+        "onUpdate:modelValue": handleUpdateModelValue
+      }, vue.createSlots({
+        default: vue.withCtx(() => [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.jsonEditerComponent || CodeEditer), {
+            modelValue: jsonContent.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => jsonContent.value = $event)
+          }, null, 8, ["modelValue"]))
+        ]),
+        _: 2
+      }, [
+        _ctx.isImport ? {
+          name: "footer",
+          fn: vue.withCtx(() => [
+            vue.createVNode(vue.unref(elementPlus.ElButton), {
+              size: "default",
+              onClick: handleCloseModal
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("取消")
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(elementPlus.ElButton), {
+              type: "primary",
+              size: "default",
+              onClick: handleImport
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(" 导入 ")
+              ]),
+              _: 1
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["modelValue", "bodyStyle"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-pro-form-builder/components/import-modal.d.ts

@@ -0,0 +1,38 @@
+import { UserComponent } from '../../ele-app/types';
+import { TemplateFormConfig } from '../types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单配置数据 */
+    config?: TemplateFormConfig;
+    /** 是否是导入 */
+    isImport?: boolean;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (visible?: boolean | undefined) => void;
+    importData: (data: TemplateFormConfig) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单配置数据 */
+    config?: TemplateFormConfig;
+    /** 是否是导入 */
+    isImport?: boolean;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+}>>> & {
+    "onUpdate:modelValue"?: ((visible?: boolean | undefined) => any) | undefined;
+    onImportData?: ((data: TemplateFormConfig) => any) | undefined;
+}, {}, {}>;
+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/json-input.cjs

@@ -0,0 +1,63 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "json-input",
+  props: {
+    modelValue: { type: [String, Boolean, Number, Object, Array] },
+    placeholder: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const inputValue = vue.ref("");
+    const stringifyJSON = (data) => {
+      if (data == null) {
+        return "";
+      }
+      return JSON.stringify(data, void 0, 2);
+    };
+    const updateModelValue = (json) => {
+      if (stringifyJSON(props.modelValue) !== json) {
+        try {
+          const isEmpty = json == null || json === "" || json.trim() === "";
+          const value = isEmpty ? void 0 : JSON.parse(json);
+          emit("update:modelValue", value);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    };
+    const handleInputChange = (value) => {
+      if (value != null) {
+        updateModelValue(value);
+      }
+    };
+    vue.watch(
+      () => props.modelValue,
+      (value) => {
+        const json = stringifyJSON(value);
+        if (inputValue.value !== json) {
+          inputValue.value = json;
+        }
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElInput), {
+        rows: 4,
+        size: "small",
+        type: "textarea",
+        modelValue: inputValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+        placeholder: _ctx.placeholder,
+        onChange: handleInputChange
+      }, null, 8, ["modelValue", "placeholder"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-pro-form-builder/components/json-input.d.ts

@@ -0,0 +1,26 @@
+type DataValue = string | boolean | number | Record<string, any> | Array<any>;
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 绑定值 */
+    modelValue?: DataValue;
+    /** 提示文本 */
+    placeholder?: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value?: DataValue | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 绑定值 */
+    modelValue?: DataValue;
+    /** 提示文本 */
+    placeholder?: string;
+}>>> & {
+    "onUpdate:modelValue"?: ((value?: DataValue | undefined) => any) | undefined;
+}, {}, {}>;
+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;
+    };
+};