@tuoyuan/json-schema/dist/es/src/json-schema-editor/index.vue2.js

json-schema编辑器及表单组件

import { defineComponent as G, mergeModels as M, useModel as K, computed as L, ref as a, watch as P, onBeforeMount as Q, onMounted as W, resolveComponent as r, openBlock as d, createElementBlock as V, createVNode as s, withCtx as n, createBlock as m, createTextVNode as k, createCommentVNode as p, createElementVNode as X, unref as O } from "vue";
import Y from "json-editor-vue";
import Z from "./components/row.vue.js";
import ee from "./components/example-modal.vue.js";
import { deepEqual as oe } from "../utils/utils.js";
import te from "../json-schema-form/index.js";
const le = {
  key: 0,
  class: "schema-editor-wrapper"
}, ne = {
  key: 0,
  class: "schema-editor-toolbar"
}, se = { class: "schema-editor" }, ie = "text", ce = /* @__PURE__ */ G({
  name: "AJsonSchemaEditor",
  __name: "index",
  props: /* @__PURE__ */ M({
    // 是否显示工具栏
    showToolbar: {
      type: Boolean,
      default: !0
    },
    // 自定义属性列表
    custom: {
      type: Array,
      default: () => []
    },
    // 表单组件列表
    widgets: {
      type: Array,
      default: () => []
    },
    // 是否显示 mock 按钮
    showMock: {
      type: Boolean
    },
    // 是否显示 form 按钮
    showForm: {
      type: Boolean
    },
    // modal 大小
    modalSize: {
      type: String,
      default: "small"
    }
  }, {
    modelValue: { type: Object, required: !0 },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ M(["change"], ["update:modelValue"]),
  setup(v, { emit: B }) {
    const l = K(v, "modelValue"), i = v, E = L(() => i.modalSize === "small" ? "500px" : i.modalSize === "middle" ? "800px" : i.modalSize === "large" ? "1000px" : "500px"), F = B, b = a(), f = a(!1), g = a(!1), y = a(!1), S = a(), h = a(!0), x = a({});
    P(
      l,
      (o, e) => {
        oe(o, e) || _(), F("change", o);
      },
      { deep: !0 }
    ), Q(() => {
      _();
    }), W(() => {
    });
    const _ = () => {
      l.value.type || (l.value.type = "object"), j(l.value);
    }, j = (o) => {
      const e = () => {
        if (o.properties)
          if (o.order) {
            const u = {};
            o.order.forEach((w, c) => {
              u[w] = o.properties[w];
            }), o.properties = u;
          } else
            o.order = Object.keys(o.properties);
      };
      (typeof o.type == "string" && o.type === "object" || Array.isArray(o.type) && o.type.includes("object")) && e(), o.properties && Object.keys(o.properties).forEach((u) => {
        j(o.properties[u]);
      });
    }, z = () => {
      h.value = !h.value;
    }, N = () => {
      S.value = l.value, g.value = !0;
    }, J = () => {
      f.value = !0;
    }, A = () => {
      y.value = !0;
    }, R = () => {
      x.value = {};
    }, U = (o) => {
    }, q = () => {
      const o = b.value.jsonEditor.get();
      l.value = o.json || JSON.parse(o.text);
    }, H = () => {
      b.value.jsonEditor.set({ json: S.value });
    };
    return (o, e) => {
      const u = r("icon-eye-invisible"), w = r("icon-eye"), c = r("a-button"), $ = r("icon-code-block"), T = r("icon-code-square"), I = r("icon-computer"), D = r("a-space"), C = r("a-modal");
      return l.value ? (d(), V("div", le, [
        i.showToolbar ? (d(), V("div", ne, [
          s(D, null, {
            default: n(() => [
              s(c, {
                onClick: e[0] || (e[0] = (t) => z())
              }, {
                icon: n(() => [
                  h.value ? (d(), m(u, { key: 0 })) : (d(), m(w, { key: 1 }))
                ]),
                default: n(() => e[9] || (e[9] = [
                  k("显示/隐藏")
                ])),
                _: 1
              }),
              s(c, {
                onClick: e[1] || (e[1] = (t) => N())
              }, {
                icon: n(() => [
                  s($)
                ]),
                default: n(() => e[10] || (e[10] = [
                  k("文本编辑")
                ])),
                _: 1
              }),
              v.showMock ? (d(), m(c, {
                key: 0,
                onClick: e[2] || (e[2] = (t) => J())
              }, {
                icon: n(() => [
                  s(T)
                ]),
                default: n(() => e[11] || (e[11] = [
                  k("示例数据")
                ])),
                _: 1
              })) : p("", !0),
              v.showForm ? (d(), m(c, {
                key: 1,
                onClick: e[3] || (e[3] = (t) => A())
              }, {
                icon: n(() => [
                  s(I)
                ]),
                default: n(() => e[12] || (e[12] = [
                  k("表单预览")
                ])),
                _: 1
              })) : p("", !0)
            ]),
            _: 1
          })
        ])) : p("", !0),
        X("div", se, [
          s(Z, {
            modelValue: l.value,
            "onUpdate:modelValue": e[4] || (e[4] = (t) => l.value = t),
            custom: i.custom,
            widgets: i.widgets,
            isRoot: "",
            disabledFieldName: "",
            isHidden: h.value
          }, null, 8, ["modelValue", "custom", "widgets", "isHidden"])
        ]),
        f.value ? (d(), m(ee, {
          key: 1,
          show: f.value,
          "onUpdate:show": e[5] || (e[5] = (t) => f.value = t),
          schema: l.value,
          modalSize: i.modalSize
        }, null, 8, ["show", "schema", "modalSize"])) : p("", !0),
        s(C, {
          visible: g.value,
          "onUpdate:visible": e[6] || (e[6] = (t) => g.value = t),
          title: "JSON Schema",
          width: E.value,
          "ok-text": "保存",
          "body-style": { "max-height": "80vh", padding: "18px" },
          onOk: q,
          onCancel: H
        }, {
          default: n(() => [
            s(O(Y), {
              ref_key: "jsonEditorRef",
              ref: b,
              modelValue: l.value,
              mode: ie,
              mainMenuBar: !1,
              statusBar: !1,
              onChange: U,
              style: { height: "75vh" }
            }, null, 8, ["modelValue"])
          ]),
          _: 1
        }, 8, ["visible", "width"]),
        y.value ? (d(), m(C, {
          key: 2,
          visible: y.value,
          "onUpdate:visible": e[8] || (e[8] = (t) => y.value = t),
          title: "表单预览",
          width: E.value,
          "hide-cancel": "",
          "body-style": { "max-height": "80vh", padding: "18px" },
          onOk: R
        }, {
          default: n(() => [
            s(O(te), {
              ref: "jsonSchemaFormRef",
              modelValue: x.value,
              "onUpdate:modelValue": e[7] || (e[7] = (t) => x.value = t),
              options: l.value,
              widgets: i.widgets
            }, null, 8, ["modelValue", "options", "widgets"])
          ]),
          _: 1
        }, 8, ["visible", "width"])) : p("", !0)
      ])) : p("", !0);
    };
  }
});
export {
  ce as default
};