@farris/ui-vue/components/json-editor/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { inject as I, reactive as w, defineComponent as D, computed as E, createVNode as f, createTextVNode as S, ref as T, watch as B } from "vue";
import { isPlainObject as N, cloneDeep as $ } from "lodash-es";
import _, { FButtonEdit as L } from "../button-edit/index.esm.js";
import { F_NOTIFY_SERVICE_TOKEN as U } from "../notify/index.esm.js";
import q, { EditorType as z } from "../event-parameter/index.esm.js";
import { useGuid as H, withInstall as G } from "../common/index.esm.js";
const W = {}, Y = {};
function M(e) {
  const { properties: t, title: s, ignore: o } = e, a = o && Array.isArray(o), g = Object.keys(t).reduce((c, y) => ((!a || !o.find((h) => h === y)) && (c[y] = t[y].type === "object" && t[y].properties ? M(t[y]) : $(t[y].default)), c), {});
  if (s && (!a || !o.find((c) => c === "id"))) {
    const c = s.toLowerCase().replace(/-/g, "_");
    g.id = `${c}_${Math.random().toString().slice(2, 6)}`;
  }
  return g;
}
function Q(e, t) {
  const s = M(t);
  return Object.keys(s).reduce((o, a) => (Object.prototype.hasOwnProperty.call(e, a) && (o[a] && N(o[a]) && N(e[a] || !e[a]) ? Object.assign(o[a], e[a] || {}) : o[a] = e[a]), o), s), s;
}
function A(e, t) {
  return Object.keys(e).filter((o) => e[o] != null).reduce((o, a) => {
    if (t.has(a)) {
      const g = t.get(a);
      if (typeof g == "string")
        o[g] = e[a];
      else {
        const c = g(a, e[a], e);
        Object.assign(o, c);
      }
    } else
      o[a] = e[a];
    return o;
  }, {});
}
function X(e, t, s = /* @__PURE__ */ new Map()) {
  const o = Q(e, t);
  return A(o, s);
}
function Z(e = {}) {
  function t(r, d, l, i) {
    if (typeof l == "number")
      return i[r].length === l;
    if (typeof l == "object") {
      const p = Object.keys(l)[0], m = l[p];
      if (p === "not")
        return Number(i[r].length) !== Number(m);
      if (p === "moreThan")
        return Number(i[r].length) >= Number(m);
      if (p === "lessThan")
        return Number(i[r].length) <= Number(m);
    }
    return !1;
  }
  function s(r, d, l, i) {
    return i[r] && i[r].propertyValue && String(i[r].propertyValue.value) === String(l);
  }
  const o = /* @__PURE__ */ new Map([
    ["length", t],
    ["getProperty", s]
  ]);
  Object.keys(e).reduce((r, d) => (r.set(d, e[d]), r), o);
  function a(r, d) {
    const l = r;
    return typeof d == "number" ? [{ target: l, operator: "length", param: null, value: Number(d) }] : typeof d == "boolean" ? [{ target: l, operator: "getProperty", param: r, value: !!d }] : typeof d == "object" ? Object.keys(d).map((i) => {
      if (i === "length")
        return { target: l, operator: "length", param: null, value: d[i] };
      const p = i, m = d[i];
      return { target: l, operator: "getProperty", param: p, value: m };
    }) : [];
  }
  function g(r) {
    return Object.keys(r).reduce((l, i) => {
      const p = a(i, r[i]);
      return l.push(...p), l;
    }, []);
  }
  function c(r, d) {
    if (o.has(r.operator)) {
      const l = o.get(r.operator);
      return l && l(r.target, r.param, r.value, d) || !1;
    }
    return !1;
  }
  function y(r, d) {
    return g(r).reduce((p, m) => p && c(m, d), !0);
  }
  function h(r, d) {
    const l = Object.keys(r), i = l.includes("allOf"), p = l.includes("anyOf"), m = i || p, P = (m ? r[m ? i ? "allOf" : "anyOf" : "allOf"] : [r]).map((O) => y(O, d));
    return i ? !P.includes(!1) : P.includes(!0);
  }
  return { parseValueSchema: h };
}
const K = {}, ee = {};
Z();
function te(e, t, s = /* @__PURE__ */ new Map(), o = (c, y, h, r) => y, a = {}, g = (c) => c) {
  return W[t.title] = t, Y[t.title] = o, K[t.title] = a, ee[t.title] = g, (c = {}, y = !0) => {
    if (!y)
      return A(c, s);
    const h = X(c, t, s), r = Object.keys(e).reduce((d, l) => (d[l] = e[l].default, d), {});
    return Object.assign(r, h);
  };
}
const ne = "https://json-schema.org/draft/2020-12/schema", oe = "https://farris-design.gitee.io/json-editor.schema.json", re = "json-editor", ie = "A Farris Component", ae = "object", le = {
  type: {
    description: "The type string of json-editor",
    type: "string",
    default: "json-editor"
  },
  parameterDescriptors: {
    description: "Description of parameters to be configured",
    type: "array",
    default: []
  },
  formContextData: {
    description: "Form context data",
    type: "object",
    default: {}
  },
  beforeOpen: {
    description: "Before opening the configuration dialog, the callback function is executed",
    type: "function",
    default: null
  },
  dialogTitle: {
    description: "Title of the dialog modal",
    type: "string",
    default: "JSON编辑器"
  },
  keyColumnTitle: {
    description: "Title for the key column in the table",
    type: "string",
    default: "键"
  },
  valueColumnTitle: {
    description: "Title for the value column in the table",
    type: "string",
    default: "值"
  },
  operationColumnTitle: {
    description: "Title for the operation column",
    type: "string",
    default: "操作"
  },
  keyColumnPlaceholder: {
    description: "Placeholder text for key input fields",
    type: "string",
    default: ""
  },
  valueColumnPlaceholder: {
    description: "Placeholder text for value input fields",
    type: "string",
    default: ""
  },
  addButtonText: {
    description: "Text displayed on the add new row button",
    type: "string",
    default: "添加"
  }
}, ue = [
  "id",
  "type"
], se = [], ce = {
  $schema: ne,
  $id: oe,
  title: re,
  description: ie,
  type: ae,
  properties: le,
  required: ue,
  ignore: se
}, de = /* @__PURE__ */ new Map([]);
function fe(e, t, s) {
  return t;
}
const R = {
  /** 组件值 */
  modelValue: { type: String, default: "" },
  /** 待配置参数的描述信息 */
  parameterDescriptors: { type: Array, default: [] },
  /** 表单上下文数据，用于传递给通用参数编辑器组件 */
  formContextData: { type: Object, default: {} },
  /** 打开编辑框前回调 */
  beforeOpen: { type: Function, default: null },
  dialogTitle: { type: String, default: "JSON编辑器" },
  keyColumnTitle: { type: String, default: "键" },
  valueColumnTitle: { type: String, default: "值" },
  operationColumnTitle: { type: String, default: "操作" },
  keyColumnPlaceholder: { type: String, default: "" },
  valueColumnPlaceholder: { type: String, default: "" },
  addButtonText: { type: String, default: "添加" }
}, pe = te(R, ce, de, fe);
function me(e, t, s) {
  const o = I(U, null), {
    formContextData: a,
    parameterDescriptors: g,
    initialize: c,
    hasDuplicateParameter: y,
    getNewValue: h
  } = s;
  function r(m) {
    t.emit("change", m), t.emit("update:modelValue", m);
  }
  function d() {
    if (y())
      return o == null || o.warning({ message: `配置中存在重复的${e.keyColumnTitle}，请修改。`, position: "top-center" }), !1;
    const m = h();
    return r(m), !0;
  }
  const l = w({
    title: e.dialogTitle,
    width: 675,
    height: 500,
    fitContent: !1,
    showHeader: !0,
    showCloseButton: !0,
    showMaxButton: !1,
    resizeable: !1,
    draggable: !0,
    closedCallback: () => {
    },
    buttons: [
      {
        class: "btn btn-secondary",
        text: "取消",
        handle: () => !0
      },
      {
        class: "btn btn-primary",
        text: "确定",
        handle: () => d()
      }
    ]
  });
  function i() {
    r("");
  }
  function p() {
    if (c(), typeof e.beforeOpen == "function") {
      const m = e.beforeOpen();
      if (!m)
        return;
      m.then((C) => {
        const b = C == null ? void 0 : C.formContextData;
        a.value = b || a.value || {};
        const P = C == null ? void 0 : C.parameterDescriptors;
        g.value = P || g.value || [];
      });
    }
  }
  return {
    modalConfigs: l,
    beforeOpenModalDialog: p,
    onClear: i,
    changeValue: r
  };
}
const ge = {
  /** 下拉选项的数据源 */
  options: { type: Array, default: [] },
  /** 下拉选项的ID字段 */
  idField: { type: String, default: "id" },
  /** 下拉选项的值字段 */
  valueField: { type: String, default: "id" },
  /** 下拉选项的名称字段 */
  textField: { type: String, default: "name" },
  /** 下拉选项的标题字段 */
  titleField: { type: String, default: "name" }
}, ye = /* @__PURE__ */ D({
  name: "FEditableComboPopupContainer",
  props: ge,
  emits: ["select", "close"],
  setup(e, t) {
    const s = E(() => e.options.length === 0);
    function o(i) {
      t.emit("select", i);
    }
    function a() {
      t.emit("close");
    }
    function g(i) {
      return i[e.idField];
    }
    function c(i) {
      return i[e.textField];
    }
    function y(i) {
      return i[e.titleField] || "";
    }
    function h() {
      return f("div", {
        class: "fv-editable-combo-list-close",
        onClick: a
      }, [f("span", null, [S("关闭")])]);
    }
    function r(i) {
      return f("div", {
        class: "fv-editable-combo-list-item",
        key: g(i),
        title: y(i),
        onClick: () => o(i)
      }, [f("span", null, [c(i)])]);
    }
    function d() {
      return e.options.map((i) => r(i));
    }
    function l() {
      return f("div", {
        class: "fv-editable-combo-list-placeholder"
      }, [f("span", null, [S("无选项")])]);
    }
    return () => f("div", {
      class: "fv-editable-combo-list"
    }, [s.value && l(), d(), h()]);
  }
}), ve = {
  /** 绑定值 */
  modelValue: { type: String, default: "" },
  /** 下拉选项的数据源 */
  options: { type: Array, default: [] },
  /** 下拉选项的ID字段 */
  idField: { type: String, default: "id" },
  /** 下拉选项的值字段 */
  valueField: { type: String, default: "id" },
  /** 下拉选项的名称字段 */
  textField: { type: String, default: "name" },
  /** 下拉选项的标题字段 */
  titleField: { type: String, default: "name" },
  /** 占位符 */
  placeholder: { type: String, default: "请选择" },
  /** 下拉图标 */
  dropDownIcon: { type: String, default: '<span class="f-icon f-icon-arrow-60-down"></span>' },
  /** 是否在选中下拉选项后自动应用选项的值到输入框 */
  autoApply: { type: Boolean, default: !0 },
  /** 是否在输入时自动根据当前值过滤选项 */
  filterOnType: { type: Boolean, default: !0 }
}, be = /* @__PURE__ */ D({
  name: "FEditableCombo",
  props: ve,
  emits: ["update:modelValue", "select"],
  setup(e, t) {
    const s = T(), o = T(""), a = E(() => Array.isArray(e.options) ? e.options.filter((p) => {
      if (!p || typeof p != "object")
        return !1;
      const m = p[e.valueField] || "";
      return typeof m != "string" ? !1 : m.includes(o.value);
    }) : []), g = E(() => a.value.length > 0);
    function c(p) {
      var m, C;
      p ? (m = s.value) == null || m.showPopup() : (C = s.value) == null || C.hidePopup();
    }
    function y(p) {
      if (p.code === "Escape") {
        c(!1);
        return;
      }
      e.filterOnType && (o.value = e.modelValue, g.value ? c(!0) : c(!1));
    }
    function h() {
      o.value = "";
    }
    function r() {
      h(), g.value && c(!0);
    }
    function d() {
      h();
    }
    function l(p) {
      t.emit("update:modelValue", p);
    }
    function i(p) {
      if (t.emit("select", p), e.autoApply) {
        const m = p[e.valueField];
        l(m);
      }
      c(!1);
    }
    return () => f(_, {
      ref: s,
      modelValue: e.modelValue,
      "onUpdate:modelValue": l,
      editable: !0,
      enableClear: !0,
      placeholder: e.placeholder,
      buttonContent: e.dropDownIcon,
      placement: "auto",
      popupClass: "fv-editable-combo-popup",
      onClick: r,
      onClickButton: d,
      onKeyup: y
    }, {
      default: () => [f(ye, {
        options: a.value,
        idField: e.idField,
        valueField: e.valueField,
        textField: e.textField,
        titleField: e.titleField,
        onSelect: i,
        onClose: () => c(!1)
      }, null)]
    });
  }
}), he = {
  useParametersComposition: { type: Object, require: !0 },
  jsonEditorProps: { type: Object, default: {} },
  formContextData: { type: Object, default: {} }
}, Ce = /* @__PURE__ */ D({
  name: "FJsonEditorModalContainer",
  props: he,
  emits: [],
  setup(e) {
    const {
      parameterItems: t,
      parameterCodeOptions: s,
      appendNewParameter: o,
      deleteParameterById: a,
      onParameterCodeChanged: g
    } = e.useParametersComposition, c = E(() => t.value.length === 0), y = E(() => !c.value);
    function h() {
      return f("div", {
        class: "fv-json-editor-header"
      }, [f("div", {
        class: "fv-json-editor-key-col"
      }, [e.jsonEditorProps.keyColumnTitle]), f("div", {
        class: "fv-json-editor-value-col"
      }, [e.jsonEditorProps.valueColumnTitle]), f("div", {
        class: "fv-json-editor-operation-col"
      }, [e.jsonEditorProps.operationColumnTitle])]);
    }
    function r() {
      return f("div", {
        class: "fv-json-editor-placeholder"
      }, [f("div", {
        class: "fv-json-editor-default-add-button",
        onClick: o
      }, [f("span", {
        class: "fv-json-editor-default-add-icon f-icon f-icon-add"
      }, null), f("span", {
        class: "fv-json-editor-default-add-text"
      }, [e.jsonEditorProps.addButtonText])])]);
    }
    function d(b) {
      return f(be, {
        modelValue: b.code,
        "onUpdate:modelValue": [(P) => b.code = P, () => g(b.id)],
        options: s.value,
        placeholder: e.jsonEditorProps.keyColumnPlaceholder
      }, null);
    }
    function l(b) {
      var P, V, O;
      return f(q, {
        modelValue: b.value,
        "onUpdate:modelValue": (F) => b.value = F,
        editorType: b.editorType,
        fieldData: (P = e.formContextData) == null ? void 0 : P.fieldData,
        varData: (V = e.formContextData) == null ? void 0 : V.varData,
        formData: (O = e.formContextData) == null ? void 0 : O.formData
      }, null);
    }
    function i(b) {
      return f("div", {
        class: "fv-json-editor-row"
      }, [f("div", {
        class: "fv-json-editor-key-col"
      }, [d(b)]), f("div", {
        class: "fv-json-editor-value-col"
      }, [l(b)]), f("div", {
        class: "fv-json-editor-operation-col"
      }, [f("div", {
        class: "fv-json-editor-delete-button"
      }, [f("span", {
        class: "fv-json-editor-delete-icon f-icon f-icon-yxs_delete",
        onClick: () => a(b.id)
      }, null)])])]);
    }
    function p() {
      return t.value.map((b) => i(b));
    }
    function m() {
      return f("div", {
        class: "fv-json-editor-add-button",
        onClick: o
      }, [f("span", {
        class: "fv-json-editor-add-icon f-icon f-icon-add"
      }, null), f("span", {
        class: "fv-json-editor-add-text"
      }, [e.jsonEditorProps.addButtonText])]);
    }
    function C() {
      return f("div", {
        class: "fv-json-editor-body"
      }, [c.value && r(), p(), y.value && m()]);
    }
    return () => f("div", {
      class: "fv-json-editor"
    }, [h(), C()]);
  }
});
function je(e) {
  const t = T([]), s = T([]), o = T(e.parameterDescriptors || []);
  B(
    () => e.parameterDescriptors,
    (n) => {
      o.value = n;
    }
  );
  const { guid: a } = H();
  function g(n) {
    if (t.value = [], s.value = [], !h(n))
      return;
    const u = JSON.parse(n);
    Object.keys(u).forEach((v) => {
      const j = a(), x = i(v);
      t.value.push(w({
        id: j,
        code: v,
        value: r(u[v], j),
        editorType: x
      }));
    });
  }
  B(
    () => e.modelValue,
    (n) => g(n)
  );
  function c() {
    g(e.modelValue);
  }
  function y() {
    const n = {};
    return t.value.forEach((v) => {
      const j = v == null ? void 0 : v.code;
      j && j.trim().length > 0 && (n[j] = d(v.value, v.id));
    }), Object.keys(n).length === 0 ? "" : JSON.stringify(n);
  }
  function h(n) {
    try {
      const u = JSON.parse(n);
      if (!u || typeof u != "object" || Array.isArray(u))
        return !1;
    } catch {
      return !1;
    }
    return !0;
  }
  function r(n, u) {
    return typeof n == "object" ? (s.value.push(u), JSON.stringify(n)) : n;
  }
  function d(n, u) {
    if (n && typeof n == "string" && s.value.includes(u))
      try {
        n = JSON.parse(n);
      } catch {
        return n;
      }
    return n === void 0 ? "" : n;
  }
  function l(n) {
    const u = o.value;
    return !n || !u ? void 0 : u.find((j) => j.id === n);
  }
  function i(n) {
    const u = l(n);
    return u == null ? void 0 : u.editorType;
  }
  function p(n) {
    if (!n)
      return "";
    switch (n) {
      case z.Switch:
        return !1;
      default:
        return "";
    }
  }
  function m(n) {
    const u = l(n);
    if (!u)
      return;
    const { editorType: v, defaultValue: j } = u;
    return j !== void 0 ? j : p(v);
  }
  function C() {
    const n = /* @__PURE__ */ new Set();
    for (const u of t.value) {
      const v = u == null ? void 0 : u.code;
      if (!(!v || v.trim().length === 0)) {
        if (n.has(v))
          return !0;
        n.add(v);
      }
    }
    return !1;
  }
  function b(n) {
    const u = t.value.find((J) => J.id === n);
    if (!u)
      return;
    const v = u.code;
    if (!v)
      return;
    const j = i(v);
    u.editorType = j || void 0;
    let x = m(v);
    x = r(x, n), u.value = x;
  }
  function P(n) {
    const u = t.value.findIndex((v) => v.id === n);
    u >= 0 && t.value.splice(u, 1);
  }
  function V() {
    t.value.push(w({
      id: a(),
      code: "",
      value: "",
      editorType: void 0
    }));
  }
  const O = E(() => o.value.map((n) => {
    let u = n.label;
    return n.description && (u += `（${n.description}）`), {
      id: n.id,
      name: u
    };
  })), F = T(e.formContextData);
  return {
    parameterItems: t,
    parameterCodeOptions: O,
    formContextData: F,
    parameterDescriptors: o,
    initialize: c,
    onParameterCodeChanged: b,
    hasDuplicateParameter: C,
    deleteParameterById: P,
    appendNewParameter: V,
    getNewValue: y
  };
}
const k = /* @__PURE__ */ D({
  name: "FJsonEditor",
  props: R,
  emits: ["change", "update:modelValue"],
  setup(e, t) {
    const s = je(e), {
      modalConfigs: o,
      onClear: a,
      beforeOpenModalDialog: g,
      changeValue: c
    } = me(e, t, s), {
      formContextData: y
    } = s;
    return () => f(L, {
      modelValue: e.modelValue,
      enableClear: !0,
      buttonBehavior: "Modal",
      modalOptions: o,
      beforeOpen: g,
      onClear: a,
      "onUpdate:modelValue": c
    }, {
      default: () => [f(Ce, {
        useParametersComposition: s,
        jsonEditorProps: e,
        formContextData: y.value
      }, null)]
    });
  }
});
k.register = (e, t, s, o) => {
  e["json-editor"] = k, t["json-editor"] = pe;
};
const De = G(k);
export {
  k as FJsonEditor,
  De as default,
  R as jsonEditorProps,
  pe as propsResolver
};