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

Farris Vue, a Farris Design based Vue3 component library.

import { ref as l, computed as E, watch as F, 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 M } 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 p = l(!1), i = l(e.constType), v = l(e.constEnums), t = l(e.constDateTime), a = l(e.constTime), {
    getPropertyValue: o,
    triggerValueChange: n
  } = s, d = o("Const"), m = E(() => (u) => u === i.value);
  F(() => e.constDateTime, (u) => {
    t.value = u;
  });
  function V(u) {
    n(u);
  }
  function C(u) {
    V(u);
  }
  function g(u) {
    if (!u || u.length < 1)
      return;
    const T = u[0].id;
    V(T);
  }
  function r() {
    return h(L, {
      nullable: !0,
      readonly: p.value,
      modelValue: d.value,
      "onUpdate:modelValue": (u) => d.value = u,
      onChange: C
    }, null);
  }
  function f() {
    return h(M, {
      key: "const-combo-list",
      modelValue: d.value,
      "onUpdate:modelValue": (u) => d.value = u,
      placeholder: "",
      viewType: "text",
      enableClear: !1,
      valueField: "id",
      textField: "name",
      data: v.value,
      editable: !1,
      readonly: p.value,
      onChange: g
    }, null);
  }
  function y() {
    var u, T, b, P, w, O, N;
    return h(_, {
      modelValue: d.value,
      "onUpdate:modelValue": (I) => d.value = I,
      onDatePicked: V,
      onClear: () => V(null),
      enableClear: (u = t.value) == null ? void 0 : u.enableClear,
      selectMode: (T = t.value) == null ? void 0 : T.selectMode,
      displayFormat: (b = t.value) == null ? void 0 : b.displayFormat,
      valueFormat: (P = t.value) == null ? void 0 : P.valueFormat,
      minDate: (w = t.value) == null ? void 0 : w.minDate,
      maxDate: (O = t.value) == null ? void 0 : O.maxDate,
      showTime: (N = t.value) == null ? void 0 : N.showTime
    }, null);
  }
  function x() {
    var u, T, b;
    return h(q, {
      modelValue: d.value,
      "onUpdate:modelValue": (P) => d.value = P,
      hourStep: (u = a.value) == null ? void 0 : u.hourStep,
      minuteStep: (T = a.value) == null ? void 0 : T.minuteStep,
      secondStep: (b = a.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") && r(), m.value("enum") && f(), m.value("date-picker") && y(), m.value("time-picker") && x()]);
}
function me(e, c, s) {
  const p = l(e.newVariablePrefix), i = l(e.newVariableType), v = l(e.id), t = l(e.controlName), a = l(e.variables), { getPropertyValue: o } = s;
  function n(r) {
    return r[0].toUpperCase() + r.slice(1);
  }
  function d(r) {
    return r[0].toLowerCase() + r.slice(1);
  }
  function m(r) {
    return r.replace(/[-_](.)/g, (f, y) => y.toUpperCase());
  }
  function V() {
    const r = p.value && !p.value.endsWith("_") ? n(t.value) : d(t.value), f = n(v.value);
    let y = `${r}${f}`;
    y = m(y), y = `${p.value}${y}`;
    const { guid: x } = Y();
    return {
      type: "Variable",
      path: e.parentComponentId ? `${e.parentComponentId}.${y}` : y,
      field: x(),
      fullPath: y,
      isNewVariable: !0,
      newVariableType: i.value
    };
  }
  function C(r) {
    return a.value.find((y) => y.path === r);
  }
  function g() {
    const r = o("Variable");
    return r.value || (r.value = {
      type: "Variable",
      field: "",
      path: "",
      fullPath: ""
    }), r;
  }
  return { generateVariable: V, getVariableByPath: C, getVariableValue: g };
}
function ge(e, c, s) {
  const p = l(!1), i = l(e.variables), v = l(e.controlName), t = l(!!v.value), {
    generateVariable: a,
    getVariableByPath: o,
    getVariableValue: n
  } = me(e, c, s), {
    triggerValueChange: d
  } = s, m = n(), V = l(m.value.field), C = E(() => [{
    "form-control-select-show": t.value
  }, {
    "form-control-select-hide": !t.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, d(m.value);
  }
  function r() {
    const b = a(), P = o(b.path);
    P ? g(P) : (i.value.push(b), g(b));
  }
  const f = () => (c.emit("beforeOpenVariables", i), Promise.resolve(!0));
  function y(b) {
    if (!b || b.length < 1)
      return;
    const P = b[0], w = {
      path: P.path,
      fullPath: P.fullPath,
      field: P.field
    };
    g(w);
  }
  function x() {
    d(null);
  }
  function u() {
    return h(M, {
      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: i.value,
      beforeOpen: f,
      readonly: p.value,
      editable: !1,
      onClear: x,
      onChange: y
    }, null);
  }
  function T() {
    return h("div", {
      class: "f-property-editor-variable-add-button"
    }, [h("button", {
      title: "新增变量",
      class: "f-variable-button",
      onClick: r
    }, [h("span", {
      class: "f-icon f-icon-add",
      style: "margin:unset;"
    }, null)])]);
  }
  return () => h("div", {
    class: "f-property-editor-variable-container"
  }, [u(), t.value && T()]);
}
function be(e, c, s) {
  const p = /^(?:(!)?)viewModel\.stateMachine\['([^']+)'\]$/, { getPropertyValue: i } = s;
  function v(a) {
    if (!(typeof a.value == "string"))
      return;
    const n = a.value.match(p);
    if (!n || n.length < 3)
      return;
    const m = {
      type: "StateMachine",
      status: n[1] !== "!",
      field: n[2]
    };
    a.value = m, s.triggerValueChange(m);
  }
  function t() {
    const a = i("StateMachine");
    return a.value ? (v(a), a) : (a.value = {
      type: "StateMachine",
      field: "",
      status: !1
    }, a);
  }
  return { getStateMachineValue: t };
}
function he(e, c, s) {
  const p = l(!1), i = l(e.stateMachines), {
    getStateMachineValue: v
  } = be(e, c, s), {
    triggerValueChange: t
  } = s, a = v(), o = l(a.value.field), n = l(a.value.status);
  function d() {
    n.value = !n.value, a.value.status = n.value, t(a.value);
  }
  function m(g) {
    if (!g || g.length < 1)
      return;
    const r = g[0];
    a.value.field = r.id, t(a.value);
  }
  function V() {
    return h("div", {
      class: "f-stateMachine-status",
      onClick: d
    }, [n.value ? "是" : "非"]);
  }
  function C() {
    return h("div", {
      class: "f-stateMachine-combo-list"
    }, [h(M, {
      key: "state-machine-combo-list",
      modelValue: o.value,
      "onUpdate:modelValue": (g) => o.value = g,
      placeholder: "",
      viewType: "text",
      enableClear: !1,
      valueField: "id",
      textField: "name",
      data: i.value,
      editable: !1,
      readonly: p.value,
      onChange: m
    }, null)]);
  }
  return () => h("div", {
    class: "f-property-editor-stateMachine-container"
  }, [V(), C()]);
}
function Ve(e, c, s) {
  const p = l(!1), {
    getPropertyValue: i,
    triggerValueChange: v
  } = s, t = i("Custom");
  function a(o) {
    const n = o.target.value;
    v(n);
  }
  return () => h("div", {
    class: "f-property-editor-customize-container"
  }, [k(h("input", {
    class: "form-control",
    placeholder: "输入自定义内容",
    "onUpdate:modelValue": (o) => t.value = o,
    onChange: a,
    disabled: p.value
  }, null), [[D, t.value]])]);
}
function Ce(e, c, s) {
  const { getPropertyValue: p } = s, i = e.id;
  function v(o) {
    return o + "_" + i;
  }
  function t(o) {
    return {
      type: "Expression",
      expressionId: v((o == null ? void 0 : o.targetId) || ""),
      expressionInfo: o
    };
  }
  function a() {
    const { expressionInfo: o = { value: "", targetId: "", targetType: "", expressionType: "" } } = e.expressionConfig, n = p("Expression");
    return n.value ? (n.value.expressionInfo = o, n.value.expressionId = v(o == null ? void 0 : o.targetId), n) : (n.value = t(o), n);
  }
  return { getExpressionValue: a };
}
function Te(e, c, s) {
  const p = l(!1), {
    triggerValueChange: i
  } = s, {
    getExpressionValue: v
  } = Ce(e, c, s);
  let t = v();
  const {
    expressionInfo: a
  } = t.value, o = l(a.value), n = l(a.message), d = l(e.expressionConfig);
  F(() => [e.expressionConfig], () => {
    d.value = e.expressionConfig, t = v(), o.value = t.value.expressionInfo.value;
  });
  function m({
    expression: C,
    message: g
  }) {
    !C && !e.enableClear || (t.value.expressionInfo.value = C, g ? t.value.expressionInfo.message = g : delete t.value.expressionInfo.message, i(t.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, $(d.value, {
    modelValue: o.value,
    "onUpdate:modelValue": (C) => o.value = C,
    validateMessage: n.value,
    enableClear: e.enableClear,
    readonly: p.value,
    beforeSubmit: V,
    onSubmitModal: m
  }), null)]);
}
function xe(e, c, s) {
  const p = l(e.modelValue), i = /* @__PURE__ */ new Map();
  i.set(s, l(j(p.value)));
  function v(o) {
    c.emit("valueChange", j(o));
  }
  function t(o) {
    const n = i.get(o);
    if (n)
      return n;
    const d = l();
    return i.set(o, d), d;
  }
  function a(o, n) {
    switch (o) {
      case "Const":
        return n !== void 0;
      case "Variable":
        return n && n.field;
      case "Custom":
        return !0;
      case "Expression":
        return n && n.expressionInfo && n.expressionInfo.value;
      case "StateMachine":
        return n && n.field;
    }
  }
  return { triggerValueChange: v, getPropertyValue: t, isPropertyValueValid: a };
}
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), p = l(e.constEnums), i = l(e.propertyTypes), v = l([]), t = l();
  function a() {
    const r = i.value;
    return v.value = Pe.filter((f) => r.includes(f.id)), v;
  }
  F(() => [e.propertyTypes], () => {
    i.value = e.propertyTypes, a();
  });
  function o(r) {
    return typeof r != "string" ? !1 : /^(?:(!)?)viewModel\.stateMachine\['([^']+)'\]$/.test(r);
  }
  function n(r) {
    const f = i.value, y = f.includes("Const") && s.value === "enum" && p.value.findIndex((u) => u.id === r) > -1, x = f.includes("Const") && s.value === "number" && typeof r == "number";
    return y || x;
  }
  function d(r) {
    return i.value.includes("Custom") && typeof r == "string";
  }
  function m(r) {
    if (r && typeof r == "object")
      return r.type;
  }
  function V(r) {
    const f = /* @__PURE__ */ new Map([
      ["Const", n],
      ["StateMachine", o],
      ["Custom", d]
    ]);
    for (const [y, x] of f.entries())
      if (x(r))
        return y;
  }
  function C() {
    const r = e.modelValue, f = i.value[0], y = m(r), x = V(r);
    return y || x || f;
  }
  function g() {
    return t.value || (t.value = C()), t;
  }
  return { getAllowedPropertyTypeItems: a, getCurrentPropertyType: g };
}
const S = /* @__PURE__ */ A({
  name: "FPropertyEditor",
  props: R,
  emits: ["valueChange", "beforeOpenVariables"],
  setup(e, c) {
    const s = l(!1), {
      getAllowedPropertyTypeItems: p,
      getCurrentPropertyType: i
    } = we(e), v = p(), t = i(), a = xe(e, c, t.value), {
      getPropertyValue: o,
      triggerValueChange: n,
      isPropertyValueValid: d
    } = a, m = ve(e, c, a), V = ge(e, c, a), C = Ve(e, c, a), g = he(e, c, a), r = Te(e, c, a), f = E(() => (T) => T === t.value);
    c.expose({
      currentPropertyType: t
    });
    function y() {
      const T = o(t.value);
      d(t.value, T.value) && n(T.value), t.value === "Const" && (e.constType === "time-picker" || e.constType === "date-picker") && T.value === void 0 && n("");
    }
    function x() {
      return h("div", {
        class: "f-property-editor-left"
      }, [h(M, {
        modelValue: t.value,
        "onUpdate:modelValue": (T) => t.value = T,
        placeholder: "",
        enableClear: !1,
        valueField: "id",
        textField: "name",
        data: v.value,
        editable: !1,
        readonly: s.value,
        onChange: y
      }, null)]);
    }
    function u() {
      return h("div", {
        class: "f-property-editor-right"
      }, [f.value("Const") && m(), f.value("Variable") && V(), f.value("Custom") && C(), f.value("StateMachine") && g(), f.value("Expression") && r()]);
    }
    return () => h("div", {
      class: "f-property-editor-container clearfix"
    }, [x(), u()]);
  }
});
S.register = (e, c, s, p) => {
  e["property-editor"] = S, c["property-editor"] = ye;
};
const ke = z(S);
export {
  S as FPropertyEditor,
  ke as default,
  R as propertyEditorProps,
  ye as propsResolver
};