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

Farris Vue, a Farris Design based Vue3 component library.

import { inject as J, reactive as S, defineComponent as O, computed as V, createVNode as n, createTextVNode as w, ref as T, watch as B } from "vue";
import { createPropsResolver as M } from "../dynamic-resolver/index.esm.js";
import R, { FButtonEdit as I } from "../button-edit/index.esm.js";
import { F_NOTIFY_SERVICE_TOKEN as $ } from "../notify/index.esm.js";
import K, { EditorType as U } from "../event-parameter/index.esm.js";
import { useGuid as _, withInstall as q } from "../common/index.esm.js";
const z = "https://json-schema.org/draft/2020-12/schema", H = "https://farris-design.gitee.io/json-editor.schema.json", L = "json-editor", G = "A Farris Component", W = "object", Y = {
  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: "添加"
  }
}, Q = [
  "id",
  "type"
], X = [], Z = {
  $schema: z,
  $id: H,
  title: L,
  description: G,
  type: W,
  properties: Y,
  required: Q,
  ignore: X
}, ee = /* @__PURE__ */ new Map([]);
function te(e, r, u) {
  return r;
}
const N = {
  /** 组件值 */
  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: "添加" }
}, oe = M(N, Z, ee, te);
function ne(e, r, u) {
  const l = J($, null), {
    formContextData: p,
    parameterDescriptors: m,
    initialize: c,
    hasDuplicateParameter: C,
    getNewValue: b
  } = u;
  function g(d) {
    r.emit("change", d), r.emit("update:modelValue", d);
  }
  function j() {
    if (C())
      return l == null || l.warning({ message: `配置中存在重复的${e.keyColumnTitle}，请修改。`, position: "top-center" }), !1;
    const d = b();
    return g(d), !0;
  }
  const h = S({
    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: () => j()
      }
    ]
  });
  function i() {
    g("");
  }
  function s() {
    if (c(), typeof e.beforeOpen == "function") {
      const d = e.beforeOpen();
      if (!d)
        return;
      d.then((v) => {
        const f = v == null ? void 0 : v.formContextData;
        p.value = f || p.value || {};
        const P = v == null ? void 0 : v.parameterDescriptors;
        m.value = P || m.value || [];
      });
    }
  }
  return {
    modalConfigs: h,
    beforeOpenModalDialog: s,
    onClear: i,
    changeValue: g
  };
}
const re = {
  /** 下拉选项的数据源 */
  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" }
}, ae = /* @__PURE__ */ O({
  name: "FEditableComboPopupContainer",
  props: re,
  emits: ["select", "close"],
  setup(e, r) {
    const u = V(() => e.options.length === 0);
    function l(i) {
      r.emit("select", i);
    }
    function p() {
      r.emit("close");
    }
    function m(i) {
      return i[e.idField];
    }
    function c(i) {
      return i[e.textField];
    }
    function C(i) {
      return i[e.titleField] || "";
    }
    function b() {
      return n("div", {
        class: "fv-editable-combo-list-close",
        onClick: p
      }, [n("span", null, [w("关闭")])]);
    }
    function g(i) {
      return n("div", {
        class: "fv-editable-combo-list-item",
        key: m(i),
        title: C(i),
        onClick: () => l(i)
      }, [n("span", null, [c(i)])]);
    }
    function j() {
      return e.options.map((i) => g(i));
    }
    function h() {
      return n("div", {
        class: "fv-editable-combo-list-placeholder"
      }, [n("span", null, [w("无选项")])]);
    }
    return () => n("div", {
      class: "fv-editable-combo-list"
    }, [u.value && h(), j(), b()]);
  }
}), ie = {
  /** 绑定值 */
  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 }
}, le = /* @__PURE__ */ O({
  name: "FEditableCombo",
  props: ie,
  emits: ["update:modelValue", "select"],
  setup(e, r) {
    const u = T(), l = T(""), p = V(() => Array.isArray(e.options) ? e.options.filter((s) => {
      if (!s || typeof s != "object")
        return !1;
      const d = s[e.valueField] || "";
      return typeof d != "string" ? !1 : d.includes(l.value);
    }) : []), m = V(() => p.value.length > 0);
    function c(s) {
      var d, v;
      s ? (d = u.value) == null || d.showPopup() : (v = u.value) == null || v.hidePopup();
    }
    function C(s) {
      if (s.code === "Escape") {
        c(!1);
        return;
      }
      e.filterOnType && (l.value = e.modelValue, m.value ? c(!0) : c(!1));
    }
    function b() {
      l.value = "";
    }
    function g() {
      b(), m.value && c(!0);
    }
    function j() {
      b();
    }
    function h(s) {
      r.emit("update:modelValue", s);
    }
    function i(s) {
      if (r.emit("select", s), e.autoApply) {
        const d = s[e.valueField];
        h(d);
      }
      c(!1);
    }
    return () => n(R, {
      ref: u,
      modelValue: e.modelValue,
      "onUpdate:modelValue": h,
      editable: !0,
      enableClear: !0,
      placeholder: e.placeholder,
      buttonContent: e.dropDownIcon,
      placement: "auto",
      popupClass: "fv-editable-combo-popup",
      onClick: g,
      onClickButton: j,
      onKeyup: C
    }, {
      default: () => [n(ae, {
        options: p.value,
        idField: e.idField,
        valueField: e.valueField,
        textField: e.textField,
        titleField: e.titleField,
        onSelect: i,
        onClose: () => c(!1)
      }, null)]
    });
  }
}), ue = {
  useParametersComposition: { type: Object, require: !0 },
  jsonEditorProps: { type: Object, default: {} },
  formContextData: { type: Object, default: {} }
}, de = /* @__PURE__ */ O({
  name: "FJsonEditorModalContainer",
  props: ue,
  emits: [],
  setup(e) {
    const {
      parameterItems: r,
      parameterCodeOptions: u,
      appendNewParameter: l,
      deleteParameterById: p,
      onParameterCodeChanged: m
    } = e.useParametersComposition, c = V(() => r.value.length === 0), C = V(() => !c.value);
    function b() {
      return n("div", {
        class: "fv-json-editor-header"
      }, [n("div", {
        class: "fv-json-editor-key-col"
      }, [e.jsonEditorProps.keyColumnTitle]), n("div", {
        class: "fv-json-editor-value-col"
      }, [e.jsonEditorProps.valueColumnTitle]), n("div", {
        class: "fv-json-editor-operation-col"
      }, [e.jsonEditorProps.operationColumnTitle])]);
    }
    function g() {
      return n("div", {
        class: "fv-json-editor-placeholder"
      }, [n("div", {
        class: "fv-json-editor-default-add-button",
        onClick: l
      }, [n("span", {
        class: "fv-json-editor-default-add-icon f-icon f-icon-add"
      }, null), n("span", {
        class: "fv-json-editor-default-add-text"
      }, [e.jsonEditorProps.addButtonText])])]);
    }
    function j(f) {
      return n(le, {
        modelValue: f.code,
        "onUpdate:modelValue": [(P) => f.code = P, () => m(f.id)],
        options: u.value,
        placeholder: e.jsonEditorProps.keyColumnPlaceholder
      }, null);
    }
    function h(f) {
      var P, D, x;
      return n(K, {
        modelValue: f.value,
        "onUpdate:modelValue": (E) => f.value = E,
        editorType: f.editorType,
        fieldData: (P = e.formContextData) == null ? void 0 : P.fieldData,
        varData: (D = e.formContextData) == null ? void 0 : D.varData,
        formData: (x = e.formContextData) == null ? void 0 : x.formData
      }, null);
    }
    function i(f) {
      return n("div", {
        class: "fv-json-editor-row"
      }, [n("div", {
        class: "fv-json-editor-key-col"
      }, [j(f)]), n("div", {
        class: "fv-json-editor-value-col"
      }, [h(f)]), n("div", {
        class: "fv-json-editor-operation-col"
      }, [n("div", {
        class: "fv-json-editor-delete-button"
      }, [n("span", {
        class: "fv-json-editor-delete-icon f-icon f-icon-yxs_delete",
        onClick: () => p(f.id)
      }, null)])])]);
    }
    function s() {
      return r.value.map((f) => i(f));
    }
    function d() {
      return n("div", {
        class: "fv-json-editor-add-button",
        onClick: l
      }, [n("span", {
        class: "fv-json-editor-add-icon f-icon f-icon-add"
      }, null), n("span", {
        class: "fv-json-editor-add-text"
      }, [e.jsonEditorProps.addButtonText])]);
    }
    function v() {
      return n("div", {
        class: "fv-json-editor-body"
      }, [c.value && g(), s(), C.value && d()]);
    }
    return () => n("div", {
      class: "fv-json-editor"
    }, [b(), v()]);
  }
});
function se(e) {
  const r = T([]), u = T([]), l = T(e.parameterDescriptors || []);
  B(
    () => e.parameterDescriptors,
    (t) => {
      l.value = t;
    }
  );
  const { guid: p } = _();
  function m(t) {
    if (r.value = [], u.value = [], !b(t))
      return;
    const o = JSON.parse(t);
    Object.keys(o).forEach((a) => {
      const y = p(), F = i(a);
      r.value.push(S({
        id: y,
        code: a,
        value: g(o[a], y),
        editorType: F
      }));
    });
  }
  B(
    () => e.modelValue,
    (t) => m(t)
  );
  function c() {
    m(e.modelValue);
  }
  function C() {
    const t = {};
    return r.value.forEach((a) => {
      const y = a == null ? void 0 : a.code;
      y && y.trim().length > 0 && (t[y] = j(a.value, a.id));
    }), Object.keys(t).length === 0 ? "" : JSON.stringify(t);
  }
  function b(t) {
    try {
      const o = JSON.parse(t);
      if (!o || typeof o != "object" || Array.isArray(o))
        return !1;
    } catch {
      return !1;
    }
    return !0;
  }
  function g(t, o) {
    return typeof t == "object" ? (u.value.push(o), JSON.stringify(t)) : t;
  }
  function j(t, o) {
    if (t && typeof t == "string" && u.value.includes(o))
      try {
        t = JSON.parse(t);
      } catch {
        return t;
      }
    return t === void 0 ? "" : t;
  }
  function h(t) {
    const o = l.value;
    return !t || !o ? void 0 : o.find((y) => y.id === t);
  }
  function i(t) {
    const o = h(t);
    return o == null ? void 0 : o.editorType;
  }
  function s(t) {
    if (!t)
      return "";
    switch (t) {
      case U.Switch:
        return !1;
      default:
        return "";
    }
  }
  function d(t) {
    const o = h(t);
    if (!o)
      return;
    const { editorType: a, defaultValue: y } = o;
    return y !== void 0 ? y : s(a);
  }
  function v() {
    const t = /* @__PURE__ */ new Set();
    for (const o of r.value) {
      const a = o == null ? void 0 : o.code;
      if (!(!a || a.trim().length === 0)) {
        if (t.has(a))
          return !0;
        t.add(a);
      }
    }
    return !1;
  }
  function f(t) {
    const o = r.value.find((A) => A.id === t);
    if (!o)
      return;
    const a = o.code;
    if (!a)
      return;
    const y = i(a);
    o.editorType = y || void 0;
    let F = d(a);
    F = g(F, t), o.value = F;
  }
  function P(t) {
    const o = r.value.findIndex((a) => a.id === t);
    o >= 0 && r.value.splice(o, 1);
  }
  function D() {
    r.value.push(S({
      id: p(),
      code: "",
      value: "",
      editorType: void 0
    }));
  }
  const x = V(() => l.value.map((t) => {
    let o = t.label;
    return t.description && (o += `（${t.description}）`), {
      id: t.id,
      name: o
    };
  })), E = T(e.formContextData);
  return {
    parameterItems: r,
    parameterCodeOptions: x,
    formContextData: E,
    parameterDescriptors: l,
    initialize: c,
    onParameterCodeChanged: f,
    hasDuplicateParameter: v,
    deleteParameterById: P,
    appendNewParameter: D,
    getNewValue: C
  };
}
const k = /* @__PURE__ */ O({
  name: "FJsonEditor",
  props: N,
  emits: ["change", "update:modelValue"],
  setup(e, r) {
    const u = se(e), {
      modalConfigs: l,
      onClear: p,
      beforeOpenModalDialog: m,
      changeValue: c
    } = ne(e, r, u), {
      formContextData: C
    } = u;
    return () => n(I, {
      modelValue: e.modelValue,
      enableClear: !0,
      buttonBehavior: "Modal",
      modalOptions: l,
      beforeOpen: m,
      onClear: p,
      "onUpdate:modelValue": c
    }, {
      default: () => [n(de, {
        useParametersComposition: u,
        jsonEditorProps: e,
        formContextData: C.value
      }, null)]
    });
  }
});
k.register = (e, r, u, l) => {
  e["json-editor"] = k, r["json-editor"] = oe;
};
const ge = q(k);
export {
  k as FJsonEditor,
  ge as default,
  N as jsonEditorProps,
  oe as propsResolver
};