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

Farris Vue, a Farris Design based Vue3 component library.

import { ref as m, computed as O, createVNode as V, withDirectives as F, vModelText as A, mergeProps as I, defineComponent as L } from "vue";
import { isPlainObject as E, cloneDeep as M } from "lodash-es";
import { FComboList as T } from "../combo-list/index.esm.js";
import { FNumberSpinner as k } from "../number-spinner/index.esm.js";
import { useGuid as $ } from "../common/index.esm.js";
import { FExpressionTextbox as B } from "../expression-editor/index.esm.js";
const U = {}, _ = {};
function S(t) {
  const { properties: i, title: c, ignore: l } = t, o = l && Array.isArray(l), f = Object.keys(i).reduce((r, a) => ((!o || !l.find((p) => p === a)) && (r[a] = i[a].type === "object" && i[a].properties ? S(i[a]) : M(i[a].default)), r), {});
  if (c && (!o || !l.find((r) => r === "id"))) {
    const r = c.toLowerCase().replace(/-/g, "_");
    f.id = `${r}_${Math.random().toString().slice(2, 6)}`;
  }
  return f;
}
function q(t, i) {
  const c = S(i);
  return Object.keys(c).reduce((l, o) => (Object.prototype.hasOwnProperty.call(t, o) && (l[o] && E(l[o]) && E(t[o] || !t[o]) ? Object.assign(l[o], t[o] || {}) : l[o] = t[o]), l), c), c;
}
function N(t, i) {
  return Object.keys(t).filter((l) => t[l] != null).reduce((l, o) => {
    if (i.has(o)) {
      const f = i.get(o);
      if (typeof f == "string")
        l[f] = t[o];
      else {
        const r = f(o, t[o], t);
        Object.assign(l, r);
      }
    } else
      l[o] = t[o];
    return l;
  }, {});
}
function D(t, i, c = /* @__PURE__ */ new Map()) {
  const l = q(t, i);
  return N(l, c);
}
function Y(t = {}) {
  function i(e, u, s, d) {
    if (typeof s == "number")
      return d[e].length === s;
    if (typeof s == "object") {
      const g = Object.keys(s)[0], y = s[g];
      if (g === "not")
        return Number(d[e].length) !== Number(y);
      if (g === "moreThan")
        return Number(d[e].length) >= Number(y);
      if (g === "lessThan")
        return Number(d[e].length) <= Number(y);
    }
    return !1;
  }
  function c(e, u, s, d) {
    return d[e] && d[e].propertyValue && String(d[e].propertyValue.value) === String(s);
  }
  const l = /* @__PURE__ */ new Map([
    ["length", i],
    ["getProperty", c]
  ]);
  Object.keys(t).reduce((e, u) => (e.set(u, t[u]), e), l);
  function o(e, u) {
    const s = e;
    return typeof u == "number" ? [{ target: s, operator: "length", param: null, value: Number(u) }] : typeof u == "boolean" ? [{ target: s, operator: "getProperty", param: e, value: !!u }] : typeof u == "object" ? Object.keys(u).map((d) => {
      if (d === "length")
        return { target: s, operator: "length", param: null, value: u[d] };
      const g = d, y = u[d];
      return { target: s, operator: "getProperty", param: g, value: y };
    }) : [];
  }
  function f(e) {
    return Object.keys(e).reduce((s, d) => {
      const g = o(d, e[d]);
      return s.push(...g), s;
    }, []);
  }
  function r(e, u) {
    if (l.has(e.operator)) {
      const s = l.get(e.operator);
      return s && s(e.target, e.param, e.value, u) || !1;
    }
    return !1;
  }
  function a(e, u) {
    return f(e).reduce((g, y) => g && r(y, u), !0);
  }
  function p(e, u) {
    const s = Object.keys(e), d = s.includes("allOf"), g = s.includes("anyOf"), y = d || g, v = (y ? e[y ? d ? "allOf" : "anyOf" : "allOf"] : [e]).map((x) => a(x, u));
    return d ? !v.includes(!1) : v.includes(!0);
  }
  return { parseValueSchema: p };
}
const z = {}, G = {};
Y();
function H(t, i, c = /* @__PURE__ */ new Map(), l = (r, a, p, e) => a, o = {}, f = (r) => r) {
  return U[i.title] = i, _[i.title] = l, z[i.title] = o, G[i.title] = f, (r = {}, a = !0) => {
    if (!a)
      return N(r, c);
    const p = D(r, i, c), e = Object.keys(t).reduce((u, s) => (u[s] = t[s].default, u), {});
    return Object.assign(e, p);
  };
}
function J(t, i) {
  return { customClass: i.class, customStyle: i.style };
}
const Q = /* @__PURE__ */ new Map([
  ["appearance", J]
]);
function W(t, i, c) {
  return i;
}
const X = "https://json-schema.org/draft/2020-12/schema", Z = "https://farris-design.gitee.io/property-editor.schema.json", K = "property-editor", ee = "A Farris Component", te = "object", ne = {
  id: {
    description: "The unique identifier for property-editor",
    type: "string"
  },
  type: {
    description: "The type string of property-editor",
    type: "string",
    default: "property-editor"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disable: {
    type: "string",
    default: !1
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  require: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  propertyTypes: {
    description: "",
    type: "Array",
    default: []
  },
  constEnums: {
    description: "",
    type: "Array",
    default: []
  },
  constType: {
    description: "",
    type: "String",
    default: ""
  },
  variables: {
    description: "",
    type: "Array",
    default: []
  },
  controlName: {
    description: "",
    type: "string",
    default: ""
  },
  newVariablePrefix: {
    description: "",
    type: "string",
    default: ""
  },
  newVariableType: {
    description: "",
    type: "string",
    default: ""
  },
  stateMachines: {
    description: "",
    type: "Array",
    default: []
  },
  expressionConfig: {
    description: "",
    type: "Object",
    default: {}
  }
}, re = [
  "type"
], oe = [
  "id"
], ae = {
  $schema: X,
  $id: Z,
  title: K,
  description: ee,
  type: te,
  properties: ne,
  required: re,
  ignore: oe
}, se = "property-editor", ie = "A Farris Component", le = "object", ue = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, ce = {
  title: se,
  description: ie,
  type: le,
  categories: ue
}, pe = {
  /** 静态值的类型 */
  constType: { type: String, default: "" },
  /** 静态值的枚举项（静态值类型为enum时使用） */
  constEnums: { type: Array, default: [] }
}, de = {
  variables: { type: Array, default: [] },
  controlName: { type: String, default: "" },
  /** 新增变量名称的前缀 */
  newVariablePrefix: { type: String, default: "" },
  /** 新增变量的类型 */
  newVariableType: { type: String, default: "" }
}, fe = {
  /** 状态机列表 */
  stateMachines: { type: Array, default: [] }
}, ye = {}, ge = {
  expressionConfig: { type: Object, default: {} }
}, j = {
  ...pe,
  ...de,
  ...ye,
  ...fe,
  ...ge,
  id: { Type: String, default: "" },
  modelValue: { type: [Number, String, Boolean, Object] },
  /** 属性类型列表 */
  propertyTypes: { type: Array, default: [] }
}, me = H(j, ae, Q, W, ce);
function be(t, i, c) {
  const l = m(!1), o = m(t.constType), f = m(t.constEnums), {
    getPropertyValue: r,
    triggerValueChange: a
  } = c, p = r("Const"), e = O(() => (n) => n === o.value);
  function u(n) {
    a(n);
  }
  function s(n) {
    u(n);
  }
  function d(n) {
    if (!n || n.length < 1)
      return;
    const b = n[0].id;
    u(b);
  }
  function g() {
    return V(k, {
      nullable: !0,
      readonly: l.value,
      modelValue: p.value,
      "onUpdate:modelValue": (n) => p.value = n,
      onChange: s
    }, null);
  }
  function y() {
    return V(T, {
      key: "const-combo-list",
      modelValue: p.value,
      "onUpdate:modelValue": (n) => p.value = n,
      placeholder: "",
      viewType: "text",
      enableClear: !1,
      valueField: "id",
      textField: "name",
      data: f.value,
      editable: !1,
      readonly: l.value,
      onChange: d
    }, null);
  }
  return () => V("div", {
    class: "f-property-editor-const-container"
  }, [e.value("number") && g(), e.value("enum") && y()]);
}
function ve(t, i, c) {
  const l = m(t.newVariablePrefix), o = m(t.newVariableType), f = m(t.id), r = m(t.controlName), a = m(t.variables), { getPropertyValue: p } = c;
  function e(n) {
    return n[0].toUpperCase() + n.slice(1);
  }
  function u(n) {
    return n[0].toLowerCase() + n.slice(1);
  }
  function s(n) {
    return n.replace(/[-_](.)/g, (b, v) => v.toUpperCase());
  }
  function d() {
    const n = l.value ? e(r.value) : u(r.value), b = e(f.value);
    let v = `${l.value}${n}${b}`;
    v = s(v);
    const { guid: C } = $();
    return {
      type: "Variable",
      path: v,
      field: C(),
      fullPath: v,
      isNewVariable: !0,
      newVariableType: o.value
    };
  }
  function g(n) {
    return a.value.find((v) => v.path === n);
  }
  function y() {
    const n = p("Variable");
    return n.value || (n.value = {
      type: "Variable",
      field: "",
      path: "",
      fullPath: ""
    }), n;
  }
  return { generateVariable: d, getVariableByPath: g, getVariableValue: y };
}
function he(t, i, c) {
  const l = m(!1), o = m(t.variables), f = m(t.controlName), r = m(!!f.value), {
    generateVariable: a,
    getVariableByPath: p,
    getVariableValue: e
  } = ve(t, i, c), {
    triggerValueChange: u
  } = c, s = e(), d = m(s.value.field), g = O(() => [{
    "form-control-select-show": r.value
  }, {
    "form-control-select-hide": !r.value
  }]);
  function y(h) {
    Object.assign(s.value, {
      field: h.field,
      path: h.path,
      fullPath: h.fullPath,
      isNewVariable: h.isNewVariable,
      newVariableType: h.isNewVariable && h.newVariableType
    }), d.value = s.value.field, u(s.value);
  }
  function n() {
    const h = a(), P = p(h.path);
    P ? y(P) : (o.value.push(h), y(h));
  }
  const b = () => (i.emit("beforeOpenVariables", o), Promise.resolve(!0));
  function v(h) {
    if (!h || h.length < 1)
      return;
    const P = h[0], R = {
      path: P.path,
      fullPath: P.fullPath,
      field: P.field,
      type: "Variable"
    };
    y(R);
  }
  function C() {
    return V(T, {
      key: "variable-combo-list",
      class: g.value,
      modelValue: d.value,
      "onUpdate:modelValue": (h) => d.value = h,
      placeholder: "",
      viewType: "text",
      enableClear: !1,
      valueField: "field",
      idField: "field",
      textField: "fullPath",
      data: o.value,
      beforeOpen: b,
      readonly: l.value,
      editable: !1,
      onChange: v
    }, null);
  }
  function x() {
    return V("div", {
      class: "f-property-editor-variable-add-button"
    }, [V("button", {
      title: "新增变量",
      class: "f-variable-button",
      onClick: n
    }, [V("span", {
      class: "f-icon f-icon-add",
      style: "margin:unset;"
    }, null)])]);
  }
  return () => V("div", {
    class: "f-property-editor-variable-container"
  }, [C(), r.value && x()]);
}
function Ve(t, i, c) {
  const l = /^(?:(!)?)viewModel\.stateMachine\['([^']+)'\]$/, { getPropertyValue: o } = c;
  function f(a) {
    if (!(typeof a.value == "string"))
      return;
    const e = a.value.match(l);
    if (!e || e.length < 3)
      return;
    const s = {
      type: "StateMachine",
      status: e[1] !== "!",
      field: e[2]
    };
    a.value = s, c.triggerValueChange(s);
  }
  function r() {
    const a = o("StateMachine");
    return a.value ? (f(a), a) : (a.value = {
      type: "StateMachine",
      field: "",
      status: !1
    }, a);
  }
  return { getStateMachineValue: r };
}
function Ce(t, i, c) {
  const l = m(!1), o = m(t.stateMachines), {
    getStateMachineValue: f
  } = Ve(t, i, c), {
    triggerValueChange: r
  } = c, a = f(), p = m(a.value.field), e = m(a.value.status);
  function u() {
    e.value = !e.value, a.value.status = e.value, r(a.value);
  }
  function s(y) {
    if (!y || y.length < 1)
      return;
    const n = y[0];
    a.value.field = n.id, r(a.value);
  }
  function d() {
    return V("div", {
      class: "f-stateMachine-status",
      onClick: u
    }, [e.value ? "是" : "非"]);
  }
  function g() {
    return V("div", {
      class: "f-stateMachine-combo-list"
    }, [V(T, {
      key: "state-machine-combo-list",
      modelValue: p.value,
      "onUpdate:modelValue": (y) => p.value = y,
      placeholder: "",
      viewType: "text",
      enableClear: !1,
      valueField: "id",
      textField: "name",
      data: o.value,
      editable: !1,
      readonly: l.value,
      onChange: s
    }, null)]);
  }
  return () => V("div", {
    class: "f-property-editor-stateMachine-container"
  }, [d(), g()]);
}
function xe(t, i, c) {
  const l = m(!1), {
    getPropertyValue: o,
    triggerValueChange: f
  } = c, r = o("Custom");
  function a(p) {
    const e = p.target.value;
    f(e);
  }
  return () => V("div", {
    class: "f-property-editor-customize-container"
  }, [F(V("input", {
    class: "form-control",
    placeholder: "输入自定义内容",
    "onUpdate:modelValue": (p) => r.value = p,
    onChange: a,
    disabled: l.value
  }, null), [[A, r.value]])]);
}
function Pe(t, i, c) {
  const { getPropertyValue: l } = c, o = t.id, { expressionConfig: f = {} } = t, { expressionInfo: r = { value: "", targetId: "", targetType: "", expressionType: "" } } = f, { targetId: a } = r;
  function p() {
    return a + "_" + o;
  }
  function e() {
    return {
      type: "Expression",
      expressionId: p(),
      expressionInfo: r
    };
  }
  function u() {
    const s = l("Expression");
    return s.value ? (s.value.expressionInfo = r, s) : (s.value = e(), s);
  }
  return { getExpressionValue: u };
}
function Te(t, i, c) {
  const l = m(!1), {
    triggerValueChange: o
  } = c, {
    getExpressionValue: f
  } = Pe(t, i, c), r = f(), {
    expressionInfo: a
  } = r.value, p = m(a.value), e = m(a.message), u = m(t.expressionConfig);
  function s({
    expression: g,
    message: y
  }) {
    g && (r.value.expressionInfo.value = g, y ? r.value.expressionInfo.message = y : delete r.value.expressionInfo.message, o(r.value));
  }
  function d({
    expressionValue: g,
    notifyService: y
  }) {
    return g ? !0 : (y.warning({
      message: "请先配置表达式",
      position: "top-center"
    }), !1);
  }
  return () => V("div", {
    class: "f-property-editor-expression-container"
  }, [V(B, I(u.value, {
    modelValue: p.value,
    "onUpdate:modelValue": (g) => p.value = g,
    validateMessage: e.value,
    enableClear: !1,
    readonly: l.value,
    beforeSubmit: d,
    onSubmitModal: s
  }), null)]);
}
function we(t, i, c) {
  const l = m(t.modelValue), o = /* @__PURE__ */ new Map();
  o.set(c, m(M(l.value)));
  function f(p) {
    i.emit("valueChange", M(p));
  }
  function r(p) {
    const e = o.get(p);
    if (e)
      return e;
    const u = m();
    return o.set(p, u), u;
  }
  function a(p, e) {
    switch (p) {
      case "Const":
        return e !== void 0;
      case "Variable":
        return e && e.field;
      case "Custom":
        return e !== void 0;
      case "Expression":
        return e && e.expressionInfo && e.expressionInfo.value;
      case "StateMachine":
        return e && e.field;
    }
  }
  return { triggerValueChange: f, getPropertyValue: r, isPropertyValueValid: a };
}
const Me = [
  {
    id: "Const",
    name: "常量"
  },
  {
    id: "Variable",
    name: "变量"
  },
  {
    id: "Custom",
    name: "自定义"
  },
  {
    id: "StateMachine",
    name: "状态机"
  },
  {
    id: "Expression",
    name: "表达式"
  }
];
function Oe(t, i) {
  const c = m(t.constType), l = m(t.constEnums), o = m(t.propertyTypes), f = m([]), r = m();
  function a() {
    const n = o.value;
    return f.value = Me.filter((b) => n.includes(b.id)), f;
  }
  function p(n) {
    return typeof n != "string" ? !1 : /^(?:(!)?)viewModel\.stateMachine\['([^']+)'\]$/.test(n);
  }
  function e(n) {
    const b = o.value, v = b.includes("Const") && c.value === "enum" && l.value.findIndex((x) => x.id === n) > -1, C = b.includes("Const") && c.value === "number" && typeof n == "number";
    return v || C;
  }
  function u(n) {
    return o.value.includes("Custom") && typeof n == "string";
  }
  function s(n) {
    if (n && typeof n == "object")
      return n.type;
  }
  function d(n) {
    const b = /* @__PURE__ */ new Map([
      ["Const", e],
      ["StateMachine", p],
      ["Custom", u]
    ]);
    for (const [v, C] of b.entries())
      if (C(n))
        return v;
  }
  function g() {
    const n = t.modelValue, b = o.value[0], v = s(n), C = d(n);
    return v || C || b;
  }
  function y() {
    return r.value || (r.value = g()), r;
  }
  return { getAllowedPropertyTypeItems: a, getCurrentPropertyType: y };
}
const w = /* @__PURE__ */ L({
  name: "FPropertyEditor",
  props: j,
  emits: ["valueChange", "beforeOpenVariables"],
  setup(t, i) {
    const c = m(!1), {
      getAllowedPropertyTypeItems: l,
      getCurrentPropertyType: o
    } = Oe(t), f = l(), r = o(), a = we(t, i, r.value), {
      getPropertyValue: p,
      triggerValueChange: e,
      isPropertyValueValid: u
    } = a, s = be(t, i, a), d = he(t, i, a), g = xe(t, i, a), y = Ce(t, i, a), n = Te(t, i, a), b = O(() => (h) => h === r.value);
    function v() {
      const h = p(r.value);
      u(r.value, h.value) && e(h.value);
    }
    function C() {
      return V("div", {
        class: "f-property-editor-left"
      }, [V(T, {
        modelValue: r.value,
        "onUpdate:modelValue": (h) => r.value = h,
        placeholder: "",
        enableClear: !1,
        valueField: "id",
        textField: "name",
        data: f.value,
        editable: !1,
        readonly: c.value,
        onChange: v
      }, null)]);
    }
    function x() {
      return V("div", {
        class: "f-property-editor-right"
      }, [b.value("Const") && s(), b.value("Variable") && d(), b.value("Custom") && g(), b.value("StateMachine") && y(), b.value("Expression") && n()]);
    }
    return () => V("div", {
      class: "f-property-editor-container clearfix"
    }, [C(), x()]);
  }
}), Ae = {
  install(t) {
    t.component(w.name, w);
  },
  register(t, i, c, l) {
    t["property-editor"] = w, i["property-editor"] = me;
  }
};
export {
  w as PropertyEditor,
  Ae as default,
  j as propertyEditorProps,
  me as propsResolver
};