@farris/ui-vue 1.8.0-alpha.0 → 1.8.0-beta.1

package/components/step/index.esm.js

@@ -1,14 +1,63 @@
-import { defineComponent as A, ref as u, computed as d, watch as N, createVNode as c, inject as V, onMounted as E } from "vue";
-import { resolveAppearance as G, createPropsResolver as H } from "../dynamic-resolver/index.esm.js";
-import { getCustomClass as q } from "../common/index.esm.js";
-import { useDesignerComponent as J } from "../designer-canvas/index.esm.js";
-const K = /* @__PURE__ */ new Map([
-  ["appearance", G]
+var z = Object.defineProperty;
+var A = (a, e, t) => e in a ? z(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var w = (a, e, t) => A(a, typeof e != "symbol" ? e + "" : e, t);
+import { defineComponent as j, ref as T, computed as M, watch as q, createVNode as b, inject as O, onMounted as L } from "vue";
+import { resolveAppearance as _, createPropsResolver as G } from "../dynamic-resolver/index.esm.js";
+import { getCustomClass as B } from "../common/index.esm.js";
+import { DgControl as U, canvasChanged as J, refreshCanvas as K, useDesignerComponent as Q } from "../designer-canvas/index.esm.js";
+import { cloneDeep as W } from "lodash-es";
+const X = /* @__PURE__ */ new Map([
+  ["appearance", _]
 ]);
-function Q(l, p, a) {
-  return p;
+function Y(a, e) {
+  const {
+    formSchemaUtils: t,
+    designViewModelUtils: s
+  } = e;
+  function i(l, o) {
+    var c, p, m, h;
+    return (p = (c = o == null ? void 0 : o.parentComponentInstance) == null ? void 0 : c.schema) == null || p.type, (h = (m = t.getFormSchema()) == null ? void 0 : m.module) == null || h.templateId, l;
+  }
+  function r(l) {
+    const o = a.getSchemaByType("component");
+    return Object.assign(o, {
+      id: `${l.componentId}-component`,
+      contents: [],
+      type: "wizard",
+      appearance: {
+        class: "h-100"
+      },
+      steps: [],
+      clickable: !0,
+      fill: !1,
+      direction: "vertical",
+      activeIndex: 0
+    }), o;
+  }
+  function n(l) {
+    const o = r(l);
+    return i(o, l);
+  }
+  return { createComponent: n };
+}
+function Z(a, e, t, s) {
+  var r, n, l, o, c, p;
+  const i = t.parentComponentInstance;
+  if (i && s) {
+    const m = Math.random().toString(36).slice(2, 6), h = {
+      componentId: `step-${m}`,
+      componentName: ((r = t.bindingSourceContext) == null ? void 0 : r.entityTitle) || ((l = (n = t.bindingSourceContext) == null ? void 0 : n.bindingEntity) == null ? void 0 : l.name) || `列表-${m}`,
+      componentType: "step",
+      parentContainerId: i.schema.id,
+      parentComponentInstance: i,
+      bindTo: ((o = t.bindingSourceContext) == null ? void 0 : o.bindTo) || "",
+      dataSource: (p = (c = t.bindingSourceContext) == null ? void 0 : c.bindingEntity) == null ? void 0 : p.label
+    }, { createComponent: V } = Y(a, s);
+    return V(h);
+  } else
+    return e;
 }
-const U = "https://json-schema.org/draft/2020-12/schema", W = "https://farris-design.gitee.io/step.schema.json", X = "step", Y = "A Farris Component", Z = "object", _ = {
+const D = "https://json-schema.org/draft/2020-12/schema", H = "https://farris-design.gitee.io/step.schema.json", ee = "step", te = "A Farris Component", se = "object", ie = {
   id: {
     description: "The unique identifier for step",
     type: "string"
@@ -40,75 +89,47 @@ const U = "https://json-schema.org/draft/2020-12/schema", W = "https://farris-de
     type: "string",
     default: !1
   },
-  editable: {
+  visible: {
     description: "",
     type: "boolean",
     default: !0
   },
-  placeholder: {
-    description: "",
-    type: "string",
-    default: ""
-  },
-  readonly: {
-    description: "",
-    type: "boolean",
-    default: !1
+  direction: {
+    description: "排列方式",
+    type: "enum",
+    default: "horizontal"
   },
-  require: {
-    description: "",
-    type: "boolean",
-    default: !1
+  steps: {
+    description: "步骤条",
+    type: "array"
   },
-  tabindex: {
-    description: "",
+  activeIndex: {
+    description: "当前索引",
     type: "number",
     default: -1
   },
-  visible: {
-    description: "",
+  clickable: {
+    description: "是否允许点击",
+    type: "boolean",
+    default: !0
+  },
+  fill: {
+    description: "是否填充",
     type: "boolean",
     default: !0
   }
-}, I = [
+}, ne = [
   "id",
   "type"
-], x = {
-  $schema: U,
-  $id: W,
-  title: X,
-  description: Y,
-  type: Z,
-  properties: _,
-  required: I
-}, ee = "step", te = "A Farris Component", se = "object", ne = {
-  basic: {
-    description: "Basic Infomation",
-    title: "基本信息",
-    properties: {
-      id: {
-        description: "组件标识",
-        title: "标识",
-        type: "string",
-        readonly: !0
-      },
-      type: {
-        description: "组件类型",
-        title: "控件类型",
-        type: "select",
-        editor: {
-          type: "waiting for modification",
-          enum: []
-        }
-      }
-    }
-  }
-}, le = {
+], re = {
+  $schema: D,
+  $id: H,
   title: ee,
   description: te,
   type: se,
-  categories: ne
-}, F = {
+  properties: ie,
+  required: ne
+}, R = {
   /** 步骤条方向  */
   direction: { type: String, default: "horizontal" },
   /** 是否平铺 */
@@ -139,237 +160,983 @@ const U = "https://json-schema.org/draft/2020-12/schema", W = "https://farris-de
   /** 步骤条点击后事件 */
   onClick: { type: Function, default: () => {
   } }
-}, B = H(F, x, K, Q, le), g = /* @__PURE__ */ A({
+}, $ = G(R, re, X, Z), I = /* @__PURE__ */ j({
   name: "FStep",
-  props: F,
+  props: R,
   emits: ["click"],
-  setup(l, p) {
-    const a = u(l.direction), v = u(l.fill), O = u(l.height), o = u(l.activeIndex), f = d(() => ({
-      "f-progress-step-list": a.value === "horizontal",
-      "f-progress-step-list-block": a.value === "vertical",
-      "f-progress-step-horizontal-fill": a.value === "horizontal" && v.value,
-      "f-progress-step-vertical-fill": a.value === "vertical" && v.value
-    })), C = d(() => ({
-      height: a.value === "vertical" ? `${O.value}px` : ""
+  setup(a, e) {
+    const t = T(a.activeIndex), s = M(() => ({
+      "f-progress-step-list": a.direction === "horizontal",
+      "f-progress-step-list-block": a.direction === "vertical",
+      "f-progress-step-horizontal-fill": a.direction === "horizontal" && a.fill,
+      "f-progress-step-vertical-fill": a.direction === "vertical" && a.fill
+    })), i = M(() => ({
+      overflow: "auto"
+      // height: props.direction === 'vertical' ? `${props.height || 300}px` : ''
     }));
-    function k(t, e) {
-      const i = {
+    function r(d, u) {
+      const v = {
         step: !0,
-        active: e === o.value,
-        clickable: l.clickable,
-        current: e === o.value,
-        finish: e < o.value
+        active: u === t.value,
+        clickable: a.clickable,
+        current: u === t.value,
+        finish: u < t.value
       };
-      return t.status && (i[t.status] = !0), q(i, t.class || "");
+      return d.status && (v[d.status] = !0), B(v, d.class || "");
     }
-    function b(t, e) {
-      if (!l.clickable)
+    function n(d, u) {
+      if (!a.clickable)
         return;
-      const i = {
-        step: t,
-        stepIndex: e
+      t.value = u;
+      const v = {
+        step: d,
+        stepIndex: u
       };
-      p.emit("click", i);
+      e.emit("click", v);
     }
-    function S(t, e) {
-      const i = {
+    function l(d, u) {
+      const v = {
         "f-progressstep-row": !0,
-        "step-active": e === o.value,
-        "step-current": e === o.value,
-        "step-finish": e < o.value
+        "step-active": u === t.value,
+        "step-current": u === t.value,
+        "step-finish": u < t.value
       };
-      return t.status && (i["step-" + t.status] = !0), i;
+      return d.status && (v["step-" + d.status] = !0), v;
     }
-    function h(t, e) {
-      return q({
+    function o(d, u) {
+      return B({
         "step-icon": !0,
-        "step-success": e,
-        "f-icon": e,
-        "f-icon-check": e
-      }, t.icon || "");
+        "step-success": u,
+        "f-icon": u,
+        "f-icon-check": u
+      }, d.icon || "");
     }
-    function T(t, e) {
-      const i = [];
-      return t.icon ? i.push(c("span", {
-        class: h(t, !1)
-      }, null)) : e >= o.value ? i.push(c("span", {
+    function c(d, u) {
+      const v = [];
+      return d.icon ? v.push(b("span", {
+        class: o(d, !1)
+      }, null)) : u >= t.value ? v.push(b("span", {
         class: "step-icon"
-      }, [e + 1])) : i.push(c("span", {
-        class: h(t, !0)
-      }, null)), i;
+      }, [u + 1])) : v.push(b("span", {
+        class: o(d, !0)
+      }, null)), v;
     }
-    function $(t, e) {
+    function p(d, u) {
       return {
         "step-name": !0,
-        "step-name-success": e < o.value
+        "step-name-success": u < t.value
       };
     }
-    function R(t, e) {
-      return c("div", {
+    function m(d, u) {
+      return b("div", {
         class: "f-progress-step-title"
-      }, [c("p", {
-        class: $(t, e)
-      }, [t.title])]);
+      }, [b("p", {
+        class: p(d, u)
+      }, [d.title])]);
     }
-    function L(t, e) {
+    function h(d, u) {
       return {
         "f-progress-step-line": !0,
-        "f-progress-step-line-success": e === o.value
+        "f-progress-step-line-success": u === t.value
       };
     }
-    function w(t, e) {
-      return e !== l.steps.length - 1;
+    function V(d, u) {
+      return u !== a.steps.length - 1;
     }
-    const m = d(() => ({
-      triangle: !0,
-      "": a.value === "vertical"
+    const E = M(() => ({
+      triangle: !0
     }));
-    function j() {
-      return l.steps.map((t, e, i) => c("li", {
-        class: k(t, e),
-        onClick: (M) => b(t, e)
-      }, [p.slots.stepTemplate ? p.slots.stepTemplate({
-        step: t,
-        index: e,
-        length: i.length,
-        activeIndex: o.value,
-        direction: a.value
-      }) : c("div", {
-        class: S(t, e)
-      }, [c("div", {
+    function x() {
+      return a.steps.map((d, u, v) => b("li", {
+        class: r(d, u),
+        onClick: (P) => n(d, u)
+      }, [e.slots.stepTemplate ? e.slots.stepTemplate({
+        step: d,
+        index: u,
+        length: v.length,
+        activeIndex: t.value,
+        direction: a.direction
+      }) : b("div", {
+        class: l(d, u)
+      }, [b("div", {
         class: "f-progress-step-content"
-      }, [T(t, e), R(t, e)]), w(t, e) && c("div", {
-        class: L(t, e)
-      }, [c("span", {
-        class: m.value
+      }, [c(d, u), m(d, u)]), V(d, u) && b("div", {
+        class: h(d, u)
+      }, [b("span", {
+        class: E.value
       }, null)])])]));
     }
-    return N(() => l.activeIndex, () => {
-      l.activeIndex > -1 && l.activeIndex <= l.steps.length && (o.value = l.activeIndex, j());
-    }), () => l.visible && c("div", {
+    return q(() => a.activeIndex, () => {
+      a.activeIndex > -1 && a.activeIndex <= a.steps.length && (t.value = a.activeIndex);
+    }), () => a.visible && b("div", {
       class: "f-progress-step"
-    }, [c("ul", {
-      class: f.value,
-      style: C.value
-    }, [j()])]);
+    }, [b("ul", {
+      class: s.value,
+      style: i.value
+    }, [x()])]);
+  }
+}), F = {
+  "tab-page": { type: "tab-page" },
+  section: { type: "section" },
+  "list-view": { name: "列表" }
+};
+function oe(a) {
+  const { formSchemaUtils: e, formStateMachineUtils: t } = a;
+  function s(o, c = "") {
+    return {
+      path: c + o.code,
+      field: o.id,
+      fullPath: o.code
+    };
+  }
+  function i(o, c = "") {
+    const p = e.getViewModelById(o);
+    return p ? p.states.map((m) => s(m, c)) : [];
+  }
+  function r(o) {
+    const c = e.getRootViewModelId(), p = i(o);
+    if (o === c)
+      return p;
+    const m = i(c, "root-component.");
+    return [...p, ...m];
+  }
+  function n(o) {
+    return o.binding && o.binding.path || o.id || "";
+  }
+  function l() {
+    return t && t.getRenderStates() || [];
+  }
+  return { getVariables: r, getControlName: n, getStateMachines: l };
+}
+class ae {
+  constructor(e) {
+    w(this, "sessionVariables", [
+      {
+        key: "CurrentSysOrgName",
+        name: "当前组织Name",
+        description: "当前组织Name"
+      },
+      //   {
+      //     key: "CurrentSysOrgCode",
+      //     name: "当前组织Code",
+      //     description: "当前组织Code"
+      //   },
+      {
+        key: "CurrentSysOrgId",
+        name: "当前组织Id",
+        description: "当前组织Id"
+      },
+      {
+        key: "CurrentUserName",
+        name: "当前用户Name",
+        description: "当前用户Name"
+      },
+      {
+        key: "CurrentUserCode",
+        name: "当前用户Code",
+        description: "当前用户Code"
+      },
+      {
+        key: "CurrentUserId",
+        name: "当前用户Id",
+        description: "当前用户Id"
+      },
+      {
+        key: "CurrentLanguage",
+        name: "当前语言编号",
+        description: "当前登录的语言编号，例如简体中文返回'zh-CHS'，英文返回'en'，繁体中文'zh-CHT'"
+      }
+    ]);
+    w(this, "expressionNames", {
+      compute: "计算表达式",
+      dependency: "依赖表达式",
+      validate: "验证表达式",
+      dataPicking: "帮助前表达式",
+      visible: "可见表达式",
+      readonly: "只读表达式",
+      required: "必填表达式"
+    });
+    w(this, "getExpressionConverter", (e, t) => ({
+      convertFrom: (s, i, r, n) => {
+        const l = r.getExpressionRuleValue(e, t || i);
+        return l && l.value || "";
+      },
+      convertTo: (s, i, r, n, l) => {
+        var o;
+        if (i === "dataPicking" && (r != null && r.target)) {
+          const c = `${r.target}_dataPicking`;
+          ((o = r.rules) == null ? void 0 : o.some(
+            (m) => m.id === c && m.value
+          )) ? s.dictPickingExpressionId = c : delete s.dictPickingExpressionId;
+        }
+        n.updateExpression(r);
+      }
+    }));
+    this.formSchemaService = e;
+  }
+  getExpressionRule(e, t) {
+    const s = this.formSchemaService.getExpressions();
+    if (!s)
+      return "";
+    const i = s.find((n) => n.target === e);
+    if (!i)
+      return "";
+    const r = i.rules.find((n) => n.type === t);
+    return r || "";
+  }
+  // 获取上下文表单变量
+  getContextFormVariables() {
+    const { module: e } = this.formSchemaService.getFormSchema();
+    if (!e.viewmodels || e.viewmodels.length === 0)
+      return [];
+    const t = this.formSchemaService.getRootViewModelId(), s = this.formSchemaService.getViewModelById(t);
+    if (!s || !s.states || s.states.length === 0)
+      return [];
+    const i = [];
+    return s.states.filter((r) => r.category === "remote").forEach((r) => {
+      i.push({
+        key: r.code,
+        name: r.name,
+        description: r.name,
+        category: r.category
+      });
+    }), i;
+  }
+  createTreeNode(e, t, s = "label") {
+    return {
+      id: e.id,
+      name: e.name,
+      bindingPath: e[s],
+      parents: t,
+      type: "field"
+    };
+  }
+  buildEntityFieldsTreeData(e = null, t) {
+    const s = [];
+    return e == null || e.forEach((i) => {
+      var l;
+      const r = this.createTreeNode(i, t);
+      let n = [];
+      (l = i.type) != null && l.fields && (n = this.buildEntityFieldsTreeData(i.type.fields, [...t, i.label])), s.push({
+        data: r,
+        children: n,
+        expanded: !0
+      });
+    }), s;
+  }
+  buildChildEntityTreeData(e = null, t) {
+    const s = [];
+    return e == null || e.forEach((i) => {
+      var o, c;
+      const r = this.createTreeNode(i, t);
+      r.type = "entity";
+      const n = this.buildEntityFieldsTreeData((o = i.type) == null ? void 0 : o.fields, [...t, i.label]), l = this.buildChildEntityTreeData((c = i.type) == null ? void 0 : c.entities, [...t, i.label]);
+      l != null && l.length && (n == null || n.push(...l)), s.push({
+        data: r,
+        children: n || [],
+        // 空值回退
+        expanded: !0
+      });
+    }), s;
+  }
+  getEntitiesTreeData() {
+    const e = this.formSchemaService.getSchemaEntities();
+    if (!(e != null && e.length))
+      return [];
+    const t = e[0];
+    if (!(t != null && t.type))
+      return [];
+    const s = this.buildEntityFieldsTreeData(t.type.fields, [t.code]), i = this.buildChildEntityTreeData(t.type.entities, [t.code]);
+    return i != null && i.length && (s == null || s.push(...i)), {
+      entityCode: t.code,
+      fields: [{
+        data: this.createTreeNode(t, [], "code"),
+        children: s || []
+      }]
+    };
+  }
+  getEntitiesAndVariables() {
+    return {
+      entities: this.getEntitiesTreeData(),
+      variables: {
+        session: {
+          name: "系统变量",
+          items: this.sessionVariables,
+          visible: !1
+        },
+        forms: {
+          name: "表单变量",
+          items: this.getContextFormVariables(),
+          visible: !0
+        }
+      }
+    };
+  }
+  onBeforeOpenExpression(e, t, s) {
+    const i = s === "Field" ? e.binding.field : e.id, r = this.getExpressionRule(i, t), n = this.getEntitiesAndVariables(), l = {
+      message: ["validate", "required", "dataPicking"].includes(t) && r ? r.message : "",
+      ...n
+    };
+    return r.messageType != null && (l.messageType = r.messageType), l;
+  }
+  buildRule(e, t, s, i) {
+    const { expression: r, message: n, messageType: l } = t, o = {
+      id: `${e}_${s}`,
+      type: s,
+      value: r
+    };
+    return (s === "validate" || s === "dataPicking" || s === "required") && (o.message = n), s === "dataPicking" && (o.messageType = l), s === "validate" && i && (o.elementId = i), o;
+  }
+  getExpressionData() {
+    const { expressions: e } = this.formSchemaService.getFormSchema().module;
+    return e || [];
+  }
+  updateExpression(e, t, s, i) {
+    const r = t === "Field" ? e.binding.field : e.id, n = this.buildRule(r, s, i, e.type === "form-group" ? e.id : "");
+    let o = this.getExpressionData().find((p) => p.targetType === t && p.target === r);
+    const c = (p) => p.value.trim() === "";
+    if (o) {
+      const p = o.rules.find((m) => m.id === n.id);
+      if (p)
+        c(n) ? o.rules = o.rules.filter((m) => m.id !== n.id) : (Object.assign(p, n), i === "validate" && e.type === "form-group" && (p.elementId = e.id));
+      else {
+        if (c(n))
+          return null;
+        o.rules = o.rules || [], o.rules.push(n);
+      }
+    } else {
+      if (c(n))
+        return null;
+      o = {
+        target: `${r}`,
+        rules: [n],
+        targetType: t
+      };
+    }
+    return o;
+  }
+  getExpressionEditorOptions(e, t, s, i) {
+    return s.reduce((r, n) => {
+      var o, c;
+      const l = t === "Field" ? (o = e == null ? void 0 : e.binding) == null ? void 0 : o.field : e.id;
+      return r[n] = {
+        hide: t === "Field" ? !!((c = e == null ? void 0 : e.binding) != null && c.field) : !1,
+        description: "",
+        title: this.expressionNames[n],
+        type: "string",
+        $converter: this.getExpressionConverter(l),
+        refreshPanelAfterChanged: !0,
+        editor: {
+          type: "expression-editor",
+          singleExpand: !1,
+          dialogTitle: `${this.expressionNames[n]}编辑器`,
+          showMessage: n === "validate" || n === "dataPicking" || n === "required",
+          showMessageType: n === "dataPicking",
+          beforeOpen: () => this.onBeforeOpenExpression(e, n, t),
+          onSubmitModal: (p) => {
+            const m = this.updateExpression(e, t, p, n);
+            if (i) {
+              const h = this.buildRule(l, p, n);
+              i(h);
+            }
+            return m;
+          }
+        }
+      }, r;
+    }, {});
+  }
+  getExpressionInfo(e, t, s) {
+    const i = t === "Field" ? e.binding.field : e.id, r = this.getExpressionRule(i, s), n = {
+      value: r && r.value,
+      targetId: i,
+      targetType: t,
+      expressionType: s
+    };
+    return r && r.message && (n.message = r.message), n;
+  }
+  getExpressionConfig(e, t, s = ["compute", "dependency", "validate"], i) {
+    return {
+      description: "表达式",
+      title: "表达式",
+      hide: !e.binding,
+      properties: {
+        ...this.getExpressionEditorOptions(e, t, s, i)
+      }
+    };
+  }
+  getExpressionOptions(e, t, s) {
+    const i = this.getExpressionInfo(e, t, s);
+    return {
+      dialogTitle: `${this.expressionNames[s]}编辑器`,
+      singleExpand: !1,
+      showMessage: s === "required",
+      beforeOpen: () => this.onBeforeOpenExpression(e, s, t),
+      expressionInfo: i
+    };
+  }
+}
+class le {
+  constructor(e, t) {
+    w(this, "componentId");
+    w(this, "viewModelId");
+    w(this, "eventsEditorUtils");
+    w(this, "formSchemaUtils");
+    w(this, "formMetadataConverter");
+    w(this, "designViewModelUtils");
+    w(this, "designViewModelField");
+    w(this, "controlCreatorUtils");
+    w(this, "designerHostService");
+    w(this, "designerContext");
+    w(this, "schemaService", null);
+    w(this, "metadataService", null);
+    w(this, "propertyConfig", {
+      type: "object",
+      categories: {}
+    });
+    var s;
+    this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((s = this.formSchemaUtils) == null ? void 0 : s.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService, this.designerContext = t.designerContext;
+  }
+  getFormDesignerInstance() {
+    var e, t;
+    return (t = (e = this.designerContext) == null ? void 0 : e.instances) == null ? void 0 : t.formDesigner.value;
+  }
+  getTableInfo() {
+    var e;
+    return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
+  }
+  setDesignViewModelField(e) {
+    var s;
+    const t = e.binding && e.binding.type === "Form" && e.binding.field;
+    if (t) {
+      if (!this.designViewModelField) {
+        const i = this.designViewModelUtils.getDgViewModel(this.viewModelId);
+        this.designViewModelField = i.fields.find((r) => r.id === t);
+      }
+      e.updateOn = (s = this.designViewModelField) == null ? void 0 : s.updateOn;
+    }
+  }
+  getBasicPropConfig(e) {
+    return {
+      description: "Basic Information",
+      title: "基本信息",
+      properties: {
+        id: {
+          description: "组件标识",
+          title: "标识",
+          type: "string",
+          readonly: !0
+        },
+        type: {
+          description: "组件类型",
+          title: "控件类型",
+          type: "select",
+          editor: {
+            type: "combo-list",
+            textField: "name",
+            valueField: "value",
+            idField: "value",
+            editable: !1,
+            data: [{ value: e.type, name: U[e.type] && U[e.type].name }]
+          }
+        }
+      }
+    };
+  }
+  getAppearanceConfig(e = null, t = {}, s) {
+    const i = {
+      title: "外观",
+      description: "Appearance"
+    }, r = {
+      class: {
+        title: "class样式",
+        type: "string",
+        description: "组件的CSS样式",
+        $converter: "/converter/appearance.converter",
+        parentPropertyID: "appearance"
+      },
+      style: {
+        title: "style样式",
+        type: "string",
+        description: "组件的样式",
+        $converter: "/converter/appearance.converter",
+        parentPropertyID: "appearance"
+      }
+    };
+    for (const n in t)
+      r[n] = Object.assign(r[n] || {}, t[n]);
+    return {
+      ...i,
+      properties: { ...r },
+      setPropertyRelates(n, l) {
+        if (n) {
+          switch (n && n.propertyID) {
+            case "class":
+            case "style": {
+              J.value++;
+              break;
+            }
+          }
+          s && s(n, e, l);
+        }
+      }
+    };
+  }
+  /**
+   * 
+   * @param propertyData 
+   * @param propertyTypes 
+   * @param propertyName 
+   * @param constInfos 
+   * @param variableInfos 
+   * @param expressionType 指定表达式类型，存在属性和表达式类型不一致的情况
+   * @returns 
+   */
+  getPropertyEditorParams(e, t = [], s = "visible", i = {}, r = {}, n = "") {
+    const { getVariables: l, getControlName: o, getStateMachines: c } = oe(this.designerHostService), p = this.getRealTargetType(e), m = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], h = {
+      type: "property-editor",
+      propertyTypes: m
+    };
+    return m.map((V) => {
+      switch (V) {
+        case "Const":
+          Object.assign(h, {
+            constType: "enum",
+            constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
+          }, i);
+          break;
+        case "Expression":
+          h.expressionConfig = this.getExpressionOptions(e, p, n || s);
+          break;
+        case "StateMachine":
+          h.stateMachines = c();
+          break;
+        case "Variable":
+          Object.assign(h, {
+            controlName: o(e),
+            newVariablePrefix: "is",
+            newVariableType: "Boolean",
+            variables: l(this.viewModelId),
+            parentComponentId: this.componentId === "root-component" ? "" : "root-component",
+            onBeforeOpenVariables: (E) => {
+              E.value = l(this.viewModelId);
+            }
+          }, r), this.designerContext.designerMode === "PC_RTC" && (h.newVariablePrefix = "ext_" + h.newVariablePrefix);
+          break;
+      }
+    }), h;
+  }
+  getVisibleProperty(e, t = "") {
+    var r;
+    let s = ["Const", "Variable", "StateMachine", "Expression"];
+    return t === "gridFieldEditor" ? s = ["Const", "Expression"] : t === "form-group" && !((r = e.binding) != null && r.field) ? s = ["Const", "Variable", "StateMachine"] : (t === "dataGrid" || t === "treeGrid" || t === "wizard") && (s = ["Const", "Variable", "Expression"]), {
+      visible: {
+        title: "是否可见",
+        type: "boolean",
+        description: "运行时组件是否可见",
+        editor: this.getPropertyEditorParams(e, s, "visible")
+      }
+    };
+  }
+  /**
+   * 获取行为
+   * @param propertyData 
+   * @param viewModelId 
+   * @returns 
+   */
+  getBehaviorConfig(e, t = "", s = {}, i) {
+    const r = {
+      title: "行为",
+      description: ""
+    }, n = this.getVisibleProperty(e, t);
+    for (const o in s)
+      n[o] = Object.assign(n[o] || {}, s[o]);
+    const l = this;
+    return {
+      ...r,
+      properties: { ...n },
+      setPropertyRelates(o, c) {
+        if (o) {
+          switch (o.propertyID) {
+            case "disabled":
+            case "readonly":
+            case "visible":
+              l.afterMutilEditorChanged(e, o);
+              break;
+          }
+          i && i(o, c);
+        }
+      }
+    };
+  }
+  /**
+   * 当多值编辑器变更时
+   * @param propertyData 
+   * @param changeObject 
+   */
+  afterMutilEditorChanged(e, t) {
+    this.addNewVariableToViewModel(t, this.viewModelId), this.updateExpressionValue(t), this.clearExpression(t, e);
+  }
+  /**
+   * 
+   * @param propertyId 
+   * @param componentInstance 
+   * @returns 
+   */
+  updateElementByParentContainer(e, t) {
+    const s = t && t.parent && t.parent.schema;
+    if (!s)
+      return;
+    const i = s.contents.findIndex((n) => n.id === e), r = W(s.contents[i]);
+    s.contents.splice(i, 1), s.contents.splice(i, 0, r), K();
+  }
+  /**
+   * 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中
+   * @param changeObject 
+   * @param viewModelId 
+   * @returns 
+   */
+  addNewVariableToViewModel(e, t) {
+    const s = e.propertyValue;
+    if (!(s && typeof s == "object") || !(s.type === "Variable" && s.isNewVariable))
+      return;
+    const n = {
+      id: s.field,
+      category: "locale",
+      code: s.fullPath,
+      name: s.fullPath,
+      type: s.newVariableType || "String",
+      isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
+    };
+    delete s.newVariableType, delete s.isNewVariable, this.formSchemaUtils.getVariableByCode(n.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(n);
   }
-}), ce = /* @__PURE__ */ A({
+  /**
+   * 更新表达式到expressions节点
+   * @param changeObject 
+   */
+  updateExpressionValue(e) {
+    const t = e.propertyValue;
+    if (!((t && t.type) === "Expression" && t.expressionInfo))
+      return;
+    const { expressionId: r, expressionInfo: n } = t, { targetId: l, targetType: o, expressionType: c, value: p, message: m } = n, h = this.formSchemaUtils.getModule();
+    h.expressions = h.expressions || [];
+    const { expressions: V } = h;
+    let E = V.find((d) => d.target === l);
+    E || (E = { target: l, rules: [], targetType: o }, V.push(E));
+    const x = E.rules.find((d) => d.type === c);
+    if (x)
+      x.value = p, x.message = m;
+    else {
+      const d = { id: r, type: c, value: p, message: m };
+      E.rules.push(d);
+    }
+    delete t.expressionInfo;
+  }
+  /**
+   * 属性类型切换为非表达式后，清除原表达式
+   * @param changeObject 
+   * @param propertyData 
+   * @returns 
+   */
+  clearExpression(e, t) {
+    const s = e.propertyValue;
+    if (s && s.type === "Expression")
+      return;
+    const r = e.propertyID, n = this.formSchemaUtils.getExpressions(), l = t.binding ? t.binding.field : t.id, o = n.find((c) => c.target === l);
+    !o || !o.rules || (o.rules = o.rules.filter((c) => c.type !== r));
+  }
+  getExpressionOptions(e, t, s) {
+    return new ae(this.formSchemaUtils).getExpressionOptions(e, t, s);
+  }
+  getRealTargetType(e) {
+    return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item", "drawer-toolbar-item"].indexOf(e.type) > -1 ? "Button" : e.binding && e.binding.field ? "Field" : "Container";
+  }
+  createBaseEventProperty(e) {
+    const t = {};
+    return t[this.viewModelId] = {
+      type: "events-editor",
+      editor: {
+        initialData: e,
+        viewSourceHandle: (s) => {
+          var i;
+          ((i = s.controller) == null ? void 0 : i.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(s);
+        }
+      }
+    }, t;
+  }
+}
+class ce extends le {
+  constructor(e, t) {
+    super(e, t);
+  }
+  getPropertyConfig(e) {
+    return this.getBasicPropConfig(e), this.getAppearanceProperties(), this.propertyConfig.categories.behavior = this.getBehaviorConfig(
+      e,
+      "step",
+      {
+        clickable: {
+          description: "是否支持点击",
+          title: "是否支持点击",
+          type: "boolean"
+        },
+        steps: {
+          title: "步骤条",
+          type: "array",
+          description: "是否填充",
+          editor: {
+            columns: [
+              { field: "id", title: "值", dataType: "string" },
+              { field: "title", title: "名称", dataType: "string" }
+            ],
+            type: "item-collection-editor",
+            valueField: "id",
+            nameField: "title",
+            requiredFields: ["id", "title"],
+            uniqueFields: ["id", "title"]
+          },
+          refreshPanelAfterChanged: !0
+        }
+      }
+    ), this.getEventPropConfig(e), this.propertyConfig;
+  }
+  getBasicPropConfig(e) {
+    const t = super.getBasicPropConfig(e);
+    this.propertyConfig.categories.basic = {
+      description: "Basic Information",
+      title: "基本信息",
+      properties: {
+        ...t.properties
+      }
+    };
+  }
+  /**
+   * 将schema实体表组装成树
+   */
+  assembleSchemaEntityToTree(e, t, s, i = "", r = []) {
+    const n = i ? `${i}/${e.label}` : "/";
+    return r.push({
+      id: e.id,
+      name: e.name,
+      label: e.label,
+      layer: t,
+      parent: s && s.id,
+      bindTo: n.replace("//", "/")
+    }), e.type.entities && e.type.entities.length && e.type.entities.map((l) => this.assembleSchemaEntityToTree(l, t + 1, e, n, r)), r;
+  }
+  getAppearanceProperties() {
+    this.propertyConfig.categories.appearance = {
+      title: "外观",
+      properties: {
+        fill: {
+          title: "是否填充",
+          type: "boolean",
+          description: "是否填充"
+        },
+        direction: {
+          title: "排列方式",
+          type: "enum",
+          description: "排列方式",
+          editor: {
+            data: [
+              { id: "vertical", name: "垂直" },
+              { id: "horizontal", name: "水平" }
+            ]
+          }
+        }
+      }
+    };
+  }
+  getEventPropConfig(e) {
+    var n;
+    const t = [
+      {
+        label: "onClick",
+        name: "点击事件"
+      }
+    ];
+    (n = e.pagination) == null || n.enable;
+    const s = this, i = s.eventsEditorUtils.formProperties(e, s.viewModelId, t), r = s.createBaseEventProperty(i);
+    this.propertyConfig.categories.eventsEditor = {
+      title: "事件",
+      hideTitle: !0,
+      properties: r,
+      // 这个属性，标记当属性变更得时候触发重新更新属性
+      refreshPanelAfterChanged: !0,
+      tabId: "commands",
+      tabName: "交互",
+      setPropertyRelates(l, o) {
+        const c = l.propertyValue;
+        delete e[s.viewModelId], c && (c.setPropertyRelates = this.setPropertyRelates, s.eventsEditorUtils.saveRelatedParameters(e, s.viewModelId, c.events, c));
+      }
+    };
+  }
+}
+function de(a, e) {
+  const t = a.schema;
+  function s() {
+    return "";
+  }
+  function i(p) {
+    return !1;
+  }
+  function r() {
+    return !0;
+  }
+  function n() {
+    return !0;
+  }
+  function l() {
+    return !0;
+  }
+  function o(p) {
+    return new ce(p, e).getPropertyConfig(t);
+  }
+  function c() {
+    var p, m, h, V;
+    if (a && e) {
+      const E = (p = a == null ? void 0 : a.componentInstance) == null ? void 0 : p.value.belongedComponentId;
+      let x = "", d = "";
+      const { formSchemaUtils: u } = e;
+      if (E) {
+        const P = u.getRootViewModelId(), k = u.getComponentByViewModelId(P), C = u.selectNode(k, (f) => f.contents && f.contents.find((g) => g.component === E));
+        (C == null ? void 0 : C.type) === ((m = F["tab-page"]) == null ? void 0 : m.type) && ((h = C == null ? void 0 : C.contents) != null && h.length) && (x = C.title || ""), (C == null ? void 0 : C.type) === ((V = F.section) == null ? void 0 : V.type) && (C == null ? void 0 : C.showHeader) !== !1 && (x = C.mainTitle || ""), x = x ? `${x} > ` : "", d = x ? C.id : "";
+      }
+      const v = F["list-view"].name;
+      e == null || e.formSchemaUtils.getControlBasicInfoMap().set(a.schema.id, {
+        componentTitle: v,
+        parentPathName: `${x}${v}`,
+        reliedComponentId: d
+      });
+    }
+  }
+  return {
+    canAccepts: i,
+    checkCanDeleteComponent: r,
+    checkCanMoveComponent: n,
+    hideNestedPaddingInDesginerView: l,
+    // triggerBelongedComponentToMoveWhenMoved,
+    // triggerBelongedComponentToDeleteWhenDeleted,
+    getPropsConfig: o,
+    setComponentBasicInfoMap: c,
+    getDesignerClass: s
+  };
+}
+const ue = /* @__PURE__ */ j({
   name: "FStepDesign",
-  props: F,
+  props: R,
   emits: [],
-  setup(l, p) {
-    const a = u(l.direction), v = u(l.fill), O = u(l.height), o = u(l.steps), f = u(0), C = u(l.clickable), k = u(0), b = u(), S = V("design-item-context"), h = J(b, S);
-    E(() => {
-      b.value.componentInstance = h;
-    }), p.expose(h.value);
-    const T = d(() => ({
-      "f-progress-step-list": a.value === "horizontal",
-      "f-progress-step-list-block": a.value === "vertical",
-      "f-progress-step-horizontal-fill": a.value === "horizontal" && v.value,
-      "f-progress-step-vertical-fill": a.value === "vertical" && v.value
-    })), $ = d(() => ({
-      height: a.value === "vertical" ? `${O.value}px` : ""
+  setup(a, e) {
+    const t = T(0), s = T(0), i = T(), r = O("designer-host-service"), n = O("design-item-context"), l = de(n, r), o = Q(i, n, l);
+    L(() => {
+      i.value.componentInstance = o;
+    }), e.expose(o.value);
+    const c = M(() => ({
+      "f-progress-step-list": a.direction === "horizontal",
+      "f-progress-step-list-block": a.direction === "vertical",
+      "f-progress-step-horizontal-fill": a.direction === "horizontal" && a.fill,
+      "f-progress-step-vertical-fill": a.direction === "vertical" && a.fill
+    })), p = M(() => ({
+      overflow: "auto"
     }));
-    function R(s, n) {
-      const r = {
+    function m(f, g) {
+      const y = {
         step: !0,
-        active: n === f.value,
-        clickable: C.value,
-        "click-disable": s.disable,
-        current: n === f.value
+        active: g === t.value,
+        clickable: a.clickable,
+        "click-disable": f.disable,
+        current: g === t.value
       };
-      return n < f.value && (r.finish = !0), s.status && (r[s.status] = !0), s.hasOwnProperty("class") && s.class.split(" ").reduce((y, z) => (y[z] = !0, y), r), r;
+      return g < t.value && (y.finish = !0), f.status && (y[f.status] = !0), f.hasOwnProperty("class") && f.class.split(" ").reduce((S, N) => (S[N] = !0, S), y), y;
     }
-    function L(s, n) {
+    function h(f, g) {
     }
-    function w(s, n) {
-      const r = {
+    function V(f, g) {
+      const y = {
         "f-progressstep-row": !0,
-        "step-active": n === f.value,
-        "step-current": n === f.value
+        "step-active": g === t.value,
+        "step-current": g === t.value
       };
-      return n < f.value && (r["step-finish"] = !0), s.status && (r["step-" + s.status] = !0), r;
+      return g < t.value && (y["step-finish"] = !0), f.status && (y["step-" + f.status] = !0), y;
     }
-    function m(s, n) {
-      const r = {
+    function E(f, g) {
+      const y = {
         "step-icon": !0,
-        "step-success": n,
-        "k-icon": n,
-        "k-i-check": n
+        "step-success": g,
+        "k-icon": g,
+        "k-i-check": g
       };
-      return s.hasOwnProperty("icon") && s.class.split(" ").reduce((y, z) => (y[z] = !0, y), r), r;
+      return f.hasOwnProperty("icon") && f.class.split(" ").reduce((S, N) => (S[N] = !0, S), y), y;
     }
-    function j(s, n) {
-      const r = [];
-      return s.icon ? r.push(c("span", {
-        class: m(s, !1)
-      }, null)) : n >= f.value || n === k.value ? r.push(c("span", {
+    function x(f, g) {
+      const y = [];
+      return f.icon ? y.push(b("span", {
+        class: E(f, !1)
+      }, null)) : g >= t.value || g === s.value ? y.push(b("span", {
         class: "step-icon"
-      }, [n + 1])) : r.push(c("span", {
-        class: m(s, !0)
-      }, null)), r;
+      }, [g + 1])) : y.push(b("span", {
+        class: E(f, !0)
+      }, null)), y;
     }
-    function t(s, n) {
+    function d(f, g) {
       return {
         "step-name": !0,
-        "step-name-success": n < f.value
+        "step-name-success": g < t.value
       };
     }
-    function e(s, n) {
-      return c("div", {
+    function u(f, g) {
+      return b("div", {
         class: "f-progress-step-title"
-      }, [c("p", {
-        class: t(s, n)
-      }, [s.title])]);
+      }, [b("p", {
+        class: d(f, g)
+      }, [f.title])]);
     }
-    function i(s, n) {
+    function v(f, g) {
       return {
         "f-progress-step-line": !0,
-        "f-progress-step-line-success": n === f.value
+        "f-progress-step-line-success": g === t.value
       };
     }
-    function M(s, n) {
-      return n !== o.value.length - 1;
+    function P(f, g) {
+      return g !== a.steps.length - 1;
     }
-    const D = d(() => ({
-      triangle: !0,
-      "": a.value === "vertical"
+    const k = M(() => ({
+      triangle: !0
+      // '': props.direction === 'vertical'
     }));
-    function P() {
-      return o.value.map((s, n) => c("li", {
-        class: R(s, n),
-        onClick: (r) => void 0
-      }, [c("div", {
-        class: w(s, n)
-      }, [c("div", {
+    function C() {
+      return a.steps.map((f, g) => b("li", {
+        class: m(f, g),
+        onClick: (y) => void 0
+      }, [b("div", {
+        class: V(f, g)
+      }, [b("div", {
         class: "f-progress-step-content"
-      }, [j(s, n), e(s, n)]), M(s, n) && c("div", {
-        class: i(s, n)
-      }, [c("span", {
-        class: D.value
+      }, [x(f, g), u(f, g)]), P(f, g) && b("div", {
+        class: v(f, g)
+      }, [b("span", {
+        class: k.value
       }, null)])])]));
     }
-    return () => c("div", {
-      ref: b,
+    return () => b("div", {
+      ref: i,
       class: "f-progress-step"
-    }, [c("ul", {
-      class: T.value,
-      style: $.value
-    }, [P()])]);
+    }, [b("ul", {
+      class: c.value,
+      style: p.value
+    }, [C()])]);
   }
 });
-g.install = (l) => {
-  l.component(g.name, g);
+I.install = (a) => {
+  a.component(I.name, I);
 };
-g.register = (l, p, a, v) => {
-  l.step = g, p.step = B;
+I.register = (a, e, t, s) => {
+  a.step = I, e.step = $;
 };
-g.registerDesigner = (l, p, a) => {
-  l.step = ce, p.step = B;
+I.registerDesigner = (a, e, t) => {
+  a.step = ue, e.step = $;
 };
 export {
-  g as FStep,
-  g as default,
-  B as propsResolver,
-  F as stepProps
+  I as FStep,
+  I as default,
+  $ as propsResolver,
+  R as stepProps
 };