@farris/ui-vue/components/step/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

var A = Object.defineProperty;
var z = (a, e, t) => e in a ? A(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
var w = (a, e, t) => z(a, typeof e != "symbol" ? e + "" : e, t);
import { defineComponent as U, ref as R, computed as P, watch as q, createVNode as h, inject as B, onMounted as _ } from "vue";
import { getCustomClass as L, EVENT_PROPERTY_TAB_IDS as G } from "../common/index.esm.js";
import { resolveAppearance as Y, createPropsResolver as J } from "../dynamic-resolver/index.esm.js";
import { DgControl as j, canvasChanged as K, refreshCanvas as Q, useDesignerComponent as W } from "../designer-canvas/index.esm.js";
import { cloneDeep as X } from "lodash-es";
const Z = /* @__PURE__ */ new Map([
  ["appearance", Y]
]);
function D(a, e) {
  const {
    formSchemaUtils: t,
    designViewModelUtils: s
  } = e;
  function i(l, o) {
    var c, d, m, b;
    return (d = (c = o == null ? void 0 : o.parentComponentInstance) == null ? void 0 : c.schema) == null || d.type, (b = (m = t.getFormSchema()) == null ? void 0 : m.module) == null || b.templateId, l;
  }
  function r(l) {
    const o = a.getSchemaByType("component");
    return Object.assign(o, {
      id: `${l.componentId}-component`,
      contents: [],
      type: "step",
      appearance: {},
      steps: [],
      fill: !1,
      direction: "vertical",
      activeIndex: 0
    }), o;
  }
  function n(l) {
    const o = r(l);
    return i(o, l);
  }
  return { createComponent: n };
}
function H(a, e, t, s) {
  var r, n, l, o, c, d;
  const i = t.parentComponentInstance;
  if (i && s) {
    const m = Math.random().toString(36).slice(2, 6), b = {
      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: (d = (c = t.bindingSourceContext) == null ? void 0 : c.bindingEntity) == null ? void 0 : d.label
    }, { createComponent: V } = D(a, s);
    return V(b);
  } else
    return e;
}
const ee = "https://json-schema.org/draft/2020-12/schema", te = "https://farris-design.gitee.io/step.schema.json", se = "step", ie = "A Farris Component", ne = "object", re = {
  id: {
    description: "The unique identifier for step",
    type: "string"
  },
  type: {
    description: "The type string of step",
    type: "string",
    default: "step"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disable: {
    type: "string",
    default: !1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  direction: {
    description: "排列方式",
    type: "enum",
    default: "horizontal"
  },
  steps: {
    description: "步骤条",
    type: "array"
  },
  activeIndex: {
    description: "当前索引",
    type: "number",
    default: 0
  },
  clickable: {
    description: "是否允许点击",
    type: "boolean",
    default: !0
  },
  fill: {
    description: "是否填充",
    type: "boolean",
    default: !0
  },
  stepsMessage: {
    description: "步骤条",
    type: "array"
  },
  stepDataSourceType: {
    description: "数据源类型",
    type: "enum",
    default: "static"
  },
  beforeClickStep: {
    description: "步骤条点击前事件",
    type: "string"
  },
  stepTemplate: {
    description: "步骤条模板",
    type: "string"
  }
}, oe = [
  "id",
  "type"
], ae = {
  $schema: ee,
  $id: te,
  title: se,
  description: ie,
  type: ne,
  properties: re,
  required: oe
}, O = {
  /**
   * 步骤条方向
   * @default 'horizontal'
   */
  direction: { type: String, default: "horizontal" },
  /**
   * 每个步骤是否平分步骤条整体宽度或高度
   * @default false
   */
  fill: { type: Boolean, default: !1 },
  /**
   * 竖向步骤条，fill 时需要传递的高度
   */
  height: { type: Number, default: 0 },
  /**
   * 是否支持点击
   */
  clickable: { type: Boolean, default: !0 },
  /**
   * 步骤条的具体参数
   */
  steps: {
    type: Array,
    default: [
      {
        id: "1",
        title: "审批中（示例）",
        description: "正在审批"
      },
      {
        id: "2",
        title: "复核中（示例）",
        description: "等待复核"
      }
    ]
  },
  /**
   * 当前active步骤的索引
   */
  activeIndex: { type: Number, default: 0 },
  visible: { type: Boolean, default: !0 },
  /**
   * 步骤条点击前事件
   */
  beforeClickStep: { type: Object, default: () => () => !0 },
  /**
   * 步骤条点击后事件
   */
  onClick: { type: Function, default: () => {
  } },
  customClass: { type: String, default: "" },
  stepTemplate: { type: Object }
}, $ = J(O, ae, Z, H), T = /* @__PURE__ */ U({
  name: "FStep",
  props: O,
  emits: ["click"],
  setup(a, e) {
    const t = R(0), s = R(a.activeIndex), i = P(() => ({
      "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
    })), r = P(() => ({
      overflow: "auto"
      // height: props.direction === 'vertical' ? `${props.height || 300}px` : ''
    }));
    function n(g, u) {
      const v = {
        step: !0,
        active: u === s.value,
        clickable: !g.disabled,
        // 'click-disable': step.disable,
        current: u === s.value
      };
      return u < s.value && (v.finish = !0), v;
    }
    function l(g, u) {
      const v = {
        steps: a.steps,
        step: g,
        index: u,
        activeIndex: s.value,
        direction: a.direction
      };
      Promise.resolve().then(() => a.beforeClickStep ? a.beforeClickStep(v) : !0).then((y) => {
        if (y && !g.disabled) {
          const I = {
            step: g,
            stepIndex: u
          };
          s.value = u, e.emit("click", I);
        }
      });
    }
    function o(g, u) {
      const v = {
        "f-progressstep-row": !0,
        "step-active": u === s.value,
        "step-current": u === s.value
      };
      return u < s.value && (v["step-finish"] = !0), v;
    }
    function c(g, u) {
      return {
        "step-icon": !0,
        "step-success": u,
        "f-icon": u,
        "f-icon-check": u
      };
    }
    function d(g, u) {
      const v = [];
      return u >= s.value || u === t.value ? v.push(h("span", {
        class: "step-icon"
      }, [u + 1])) : v.push(h("span", {
        class: c(g, !0)
      }, null)), v;
    }
    function m(g, u) {
      return {
        "step-name": !0,
        "step-name-success": u < s.value
      };
    }
    function b(g, u) {
      return h("div", {
        class: "f-progress-step-title"
      }, [h("p", {
        class: m(g, u)
      }, [g.title])]);
    }
    function V(g, u) {
      return {
        "f-progress-step-line": !0,
        "f-progress-step-line-success": u === s.value
      };
    }
    function x(g, u) {
      return u !== a.steps.length - 1;
    }
    const E = P(() => ({
      triangle: !0
    }));
    function S() {
      return a.steps.map((g, u) => h("li", {
        class: n(g, u),
        onClick: (v) => l(g, u)
      }, [a.stepTemplate ? a.stepTemplate({
        step: g,
        index: u,
        length: a.steps.length,
        activeIndex: s.value,
        direction: a.direction
      }) : e.slots.stepTemplate ? e.slots.stepTemplate({
        step: g,
        index: u,
        length: a.steps.length,
        activeIndex: s.value,
        direction: a.direction
      }) : h("div", {
        class: o(g, u)
      }, [h("div", {
        class: "f-progress-step-content"
      }, [d(g, u), b(g, u)]), x(g, u) && h("div", {
        class: V(g, u)
      }, [h("span", {
        class: E.value
      }, null)])])]));
    }
    q(() => a.activeIndex, (g) => {
      a.activeIndex > -1 && a.activeIndex <= a.steps.length && (s.value = g);
    });
    const M = P(() => L({
      "f-progress-step": !0
    }, a.customClass));
    return () => h("div", {
      class: M.value
    }, [h("ul", {
      class: i.value,
      style: r.value
    }, [S()])]);
  }
}), N = {
  "tab-page": { type: "tab-page" },
  section: { type: "section" },
  "list-view": { name: "列表" }
};
function le(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 d = e.getViewModelById(o);
    return d ? d.states.map((m) => s(m, c)) : [];
  }
  function r(o) {
    const c = e.getRootViewModelId(), d = i(o);
    if (o === c)
      return d;
    const m = i(c, "root-component.");
    return [...d, ...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 ce {
  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.getExpressionData();
    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((d) => d.targetType === t && d.target === r);
    const c = (d) => d.value.trim() === "";
    if (o) {
      const d = o.rules.find((m) => m.id === n.id);
      if (d)
        c(n) ? o.rules = o.rules.filter((m) => m.id !== n.id) : (Object.assign(d, n), i === "validate" && e.type === "form-group" && (d.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: (d) => {
            const m = this.updateExpression(e, t, d, n);
            if (i) {
              const b = this.buildRule(l, d, n);
              i(b);
            }
            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) {
    var r;
    return {
      description: "表达式",
      title: "表达式",
      hide: !(e.binding && ((r = e.binding) == null ? void 0 : r.type) === "Form"),
      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 de {
  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, "modalService", null);
    /** 表单规则 */
    w(this, "formRule", null);
    w(this, "schemaService", null);
    w(this, "metadataService", null);
    w(this, "propertyConfig", {
      type: "object",
      categories: {}
    });
    w(this, "expressionProperty");
    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, this.modalService = t.modalService, this.expressionProperty = new ce(this.formSchemaUtils);
  }
  /**
   * 是否在响应式表单中
   */
  inResponsiveForm() {
    var e;
    return !!((e = this.designerContext) != null && e.responsiveForm);
  }
  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: j[e.type] && j[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": {
              K.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 } = le(this.designerHostService), d = this.getRealTargetType(e), m = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], b = {
      type: "property-editor",
      propertyTypes: m
    };
    return m.map((V) => {
      switch (V) {
        case "Const":
          Object.assign(b, {
            constType: "enum",
            constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
          }, i);
          break;
        case "Expression":
          b.expressionConfig = this.getExpressionOptions(e, d, n || s);
          break;
        case "StateMachine":
          b.stateMachines = c();
          break;
        case "Variable":
          Object.assign(b, {
            controlName: o(e),
            newVariablePrefix: "is",
            newVariableType: "Boolean",
            variables: l(this.viewModelId),
            parentComponentId: this.componentId === "root-component" ? "" : "root-component",
            onBeforeOpenVariables: (x) => {
              x.value = l(this.viewModelId);
            }
          }, r), this.designerContext.designerMode === "PC_RTC" && (b.newVariablePrefix = "ext_" + b.newVariablePrefix);
          break;
      }
    }), b;
  }
  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", "Custom"] : t === "dataGrid" || t === "treeGrid" || t === "wizard" ? s = ["Const", "Variable", "Expression"] : (e.type.indexOf("toolbar-item") > -1 || t === "form-group") && (s = ["Const", "Variable", "StateMachine", "Custom", "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, e), 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 = X(s.contents[i]);
    s.contents.splice(i, 1), s.contents.splice(i, 0, r), Q();
  }
  /**
   * 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到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);
  }
  getExpressions() {
    let e = [];
    return this.formRule ? (this.formRule.expressions = this.formRule.expressions || [], e = this.formRule.expressions || []) : e = this.formSchemaUtils.getExpressions(), e;
  }
  /**
   * 更新表达式到expressions节点
   * @param changeObject 
   */
  updateExpressionValue(e, t) {
    const s = e.propertyValue;
    if (!((s && s.type) === "Expression" && s.expressionInfo))
      return;
    const { expressionId: n, expressionInfo: l } = s, { targetId: o, targetType: c, expressionType: d, value: m, message: b } = l, V = this.getExpressions();
    let x = V.find((S) => S.target === o);
    x || (x = { target: o, rules: [], targetType: c }, V.push(x));
    const E = x.rules.find((S) => S.type === d);
    if (E)
      E.id = n, E.value = m, E.message = b, (d === "minDate" || d === "maxDate" || d === "defaultTime") && (E.elementId = t.id);
    else {
      const S = { id: n, type: d, value: m, message: b, elementId: t.id };
      x.rules.push(S);
    }
    delete s.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.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 this.expressionProperty.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 ue extends de {
  constructor(e, t) {
    super(e, t);
  }
  getPropertyConfig(e) {
    const t = this;
    this.getBasicPropConfig(e), this.getAppearanceProperties(e);
    const s = this.getPropertyEditorParams(e, ["Variable"]);
    return this.propertyConfig.categories.behavior = this.getBehaviorConfig(
      e,
      "step",
      {
        // clickable: {
        //     description: "是否支持点击",
        //     title: "是否支持点击",
        //     type: "boolean",
        // },
        activeIndex: {
          title: "当前步骤变量",
          type: "array",
          description: "当前步骤变量",
          editor: s
        },
        stepTemplate: {
          description: "步骤条模板",
          title: "步骤条模板",
          type: "string",
          editor: {
            type: "code-editor",
            language: "html"
          }
        },
        stepDataSourceType: {
          title: "数据源类型",
          type: "enum",
          description: "数据源类型",
          editor: {
            data: [
              { id: "static", name: "静态" },
              { id: "dynamic", name: "动态" }
            ]
          },
          refreshPanelAfterChanged: !0
        },
        steps: {
          title: "步骤条",
          type: "array",
          description: "步骤条信息",
          visible: !e.stepDataSourceType || e.stepDataSourceType === "static",
          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
        },
        stepsMessage: {
          title: "数据源",
          type: "array",
          description: "数据源",
          visible: e.stepDataSourceType === "dynamic",
          editor: s
        }
      },
      (i, r) => {
        switch (i.propertyValue, i.propertyID) {
          case "stepsMessage":
          case "activeIndex": {
            t.afterMutilEditorChanged(e, i);
            break;
          }
        }
      }
    ), 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(e) {
    this.propertyConfig.categories.appearance = {
      title: "外观",
      properties: {
        class: {
          title: "class样式",
          type: "string",
          description: "组件的class样式"
        },
        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: "点击事件"
      },
      {
        label: "beforeClickStep",
        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: G,
      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 pe(a, e) {
  const t = a.schema;
  function s() {
    return "";
  }
  function i(d) {
    return !1;
  }
  function r() {
    return !0;
  }
  function n() {
    return !0;
  }
  function l() {
    return !0;
  }
  function o(d) {
    return new ue(d, e).getPropertyConfig(t);
  }
  function c() {
    var d, m, b, V;
    if (a && e) {
      const x = (d = a == null ? void 0 : a.componentInstance) == null ? void 0 : d.value.belongedComponentId;
      let E = "", S = "";
      const { formSchemaUtils: M } = e;
      if (x) {
        const u = M.getRootViewModelId(), v = M.getComponentByViewModelId(u), y = M.selectNode(v, (I) => I.contents && I.contents.find((p) => p.component === x));
        (y == null ? void 0 : y.type) === ((m = N["tab-page"]) == null ? void 0 : m.type) && ((b = y == null ? void 0 : y.contents) != null && b.length) && (E = y.title || ""), (y == null ? void 0 : y.type) === ((V = N.section) == null ? void 0 : V.type) && (y == null ? void 0 : y.showHeader) !== !1 && (E = y.mainTitle || ""), E = E ? `${E} > ` : "", S = E ? y.id : "";
      }
      const g = N["list-view"].name;
      e == null || e.formSchemaUtils.getControlBasicInfoMap().set(a.schema.id, {
        componentTitle: g,
        parentPathName: `${E}${g}`,
        reliedComponentId: S
      });
    }
  }
  return {
    canAccepts: i,
    checkCanDeleteComponent: r,
    checkCanMoveComponent: n,
    hideNestedPaddingInDesginerView: l,
    // triggerBelongedComponentToMoveWhenMoved,
    // triggerBelongedComponentToDeleteWhenDeleted,
    getPropsConfig: o,
    setComponentBasicInfoMap: c,
    getDesignerClass: s
  };
}
const fe = /* @__PURE__ */ U({
  name: "FStepDesign",
  props: O,
  emits: [],
  setup(a, e) {
    const t = R(0), s = R(0), i = R(), r = B("designer-host-service"), n = B("design-item-context"), l = pe(n, r), o = W(i, n, l), c = [{
      id: "firstStep",
      title: "步骤一",
      description: "步骤一"
    }, {
      id: "secondStep",
      title: "步骤二",
      description: "步骤二"
    }];
    _(() => {
      i.value.componentInstance = o;
    }), e.expose(o.value);
    const d = P(() => ({
      "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
    })), m = P(() => ({
      overflow: "auto"
    }));
    function b(p, f) {
      const C = {
        step: !0,
        active: f === t.value,
        clickable: a.clickable,
        "click-disable": p.disabled,
        current: f === t.value
      };
      return f < t.value && (C.finish = !0), p.status && (C[p.status] = !0), p.hasOwnProperty("class") && p.class.split(" ").reduce((k, F) => (k[F] = !0, k), C), C;
    }
    function V(p, f) {
    }
    function x(p, f) {
      const C = {
        "f-progressstep-row": !0,
        "step-active": f === t.value,
        "step-current": f === t.value
      };
      return f < t.value && (C["step-finish"] = !0), p.status && (C["step-" + p.status] = !0), C;
    }
    function E(p, f) {
      const C = {
        "step-icon": !0,
        "step-success": f,
        "k-icon": f,
        "k-i-check": f
      };
      return p.hasOwnProperty("icon") && p.class.split(" ").reduce((k, F) => (k[F] = !0, k), C), C;
    }
    function S(p, f) {
      const C = [];
      return p.icon ? C.push(h("span", {
        class: E(p, !1)
      }, null)) : f >= t.value || f === s.value ? C.push(h("span", {
        class: "step-icon"
      }, [f + 1])) : C.push(h("span", {
        class: E(p, !0)
      }, null)), C;
    }
    function M(p, f) {
      return {
        "step-name": !0,
        "step-name-success": f < t.value
      };
    }
    function g(p, f) {
      return h("div", {
        class: "f-progress-step-title"
      }, [h("p", {
        class: M(p, f)
      }, [p.title])]);
    }
    function u(p, f) {
      return {
        "f-progress-step-line": !0,
        "f-progress-step-line-success": f === t.value
      };
    }
    function v(p, f) {
      return f !== a.steps.length - 1;
    }
    const y = P(() => ({
      triangle: !0
      // '': props.direction === 'vertical'
    }));
    function I() {
      return a.steps && a.steps.length > 0 ? a.steps.map((p, f) => h("li", {
        class: b(p, f),
        onClick: (C) => void 0
      }, [h("div", {
        class: x(p, f)
      }, [h("div", {
        class: "f-progress-step-content"
      }, [S(p, f), g(p, f)]), v(p, f) && h("div", {
        class: u(p, f)
      }, [h("span", {
        class: y.value
      }, null)])])])) : c.map((p, f) => h("li", {
        class: b(p, f),
        onClick: (C) => void 0
      }, [h("div", {
        class: x(p, f)
      }, [h("div", {
        class: "f-progress-step-content"
      }, [S(p, f), g(p, f)]), v(p, f) && f !== c.length - 1 && h("div", {
        class: u(p, f)
      }, [h("span", {
        class: y.value
      }, null)])])]));
    }
    return () => h("div", {
      ref: i,
      class: "f-progress-step"
    }, [h("ul", {
      class: d.value,
      style: m.value
    }, [I()])]);
  }
});
function ge() {
  function a(e, t) {
    const s = {};
    return s.beforeClickStep = (i) => t.call("beforeClickStep", e, [i, e]), s;
  }
  return {
    resolve: a
  };
}
const me = ge();
T.install = (a) => {
  a.component(T.name, T);
};
T.register = (a, e, t, s) => {
  a.step = T, e.step = $, s.step = { callbackResolver: me };
};
T.registerDesigner = (a, e, t) => {
  a.step = fe, e.step = $;
};
export {
  T as FStep,
  me as callbackResolver,
  T as default,
  $ as propsResolver,
  O as stepProps
};