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

Farris Vue, a Farris Design based Vue3 component library.

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