@farris/ui-vue/components/list-nav/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

var N = Object.defineProperty;
var R = (a, e, t) => e in a ? N(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
var g = (a, e, t) => R(a, typeof e != "symbol" ? e + "" : e, t);
import { defineComponent as P, ref as y, watch as E, computed as C, createVNode as p, inject as M, onMounted as F, nextTick as T } from "vue";
import { getCustomClass as k } from "../common/index.esm.js";
import { resolveAppearance as B, createPropsResolver as U } from "../dynamic-resolver/index.esm.js";
import { DgControl as w, canvasChanged as z, refreshCanvas as O, UseTemplateDragAndDropRules as A, useDragulaCommonRule as $, useDesignerComponent as q, setPositionOfSelectedComponentBtnGroup as D } from "../designer-canvas/index.esm.js";
import { cloneDeep as L } from "lodash-es";
function j(a, e) {
  return { size: e.width || e.height || "" };
}
const _ = /* @__PURE__ */ new Map([
  ["appearance", B],
  ["size", j]
]);
function G(a, e, t) {
  return e.size = {
    width: 220
  }, e.title = "标题", e;
}
const J = "https://json-schema.org/draft/2020-12/schema", K = "https://farris-design.gitee.io/list-nav.schema.json", Q = "list-nav", W = "A Farris Container Component", X = "object", Y = {
  id: {
    description: "The unique identifier for a list-nav",
    type: "string"
  },
  type: {
    description: "The type string of list-nav component",
    type: "string",
    default: "list-nav"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  size: {
    description: "",
    type: "object",
    properties: {
      width: {
        type: "number"
      },
      height: {
        type: "number"
      }
    },
    default: null
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  position: {
    description: "",
    type: "string",
    default: "left"
  },
  title: {
    description: "",
    type: "string",
    default: ""
  },
  collapsible: {
    description: "",
    type: "boolean",
    default: !0
  },
  folded: {
    description: "",
    type: "boolean",
    default: !1
  }
}, Z = [
  "id",
  "type",
  "contents"
], H = {
  $schema: J,
  $id: K,
  title: Q,
  description: W,
  type: X,
  properties: Y,
  required: Z
}, V = {
  /**
   * 自定义样式
   */
  customClass: { type: String, default: "" },
  customStyle: { type: String, default: "" },
  /**
   * 位置
   */
  position: { Type: String, default: "left" },
  /**
   * 导航标题
   * @default ''
   */
  title: { Type: String, default: "" },
  /**
   * 指定宽度或者高度，如果导航的位置是左侧、右侧，size 指定的就是宽度，如果导航位置是顶部和底部，size 指定的就是高度
   * @default 218
   */
  size: { Type: Number || String, default: 218 },
  /**
   * 是否启用收折功能，true 是启用收折，显示收折按钮，false 是禁不启用收折功能，不显示收折按钮
   * @default true
   */
  collapsible: { Type: Boolean, default: !0 },
  /**
   * 初始收折状态，false 导航展开，true 导航收折是
   * @default false
   */
  folded: { Type: Boolean, default: !1 },
  /**
   * 是否禁用收折功能，false 是不禁用收折，收折按钮不可点击，true 是禁用收折，点击收折按钮可以收折展开
   * @default false
   */
  disabled: { Type: Boolean, default: !1 },
  /**
   * 是否启用拖拽 TODO
   */
  draggable: { Type: Boolean, default: !1 },
  /**
   * 控制是否可见
   */
  visible: { type: Boolean, default: !0 }
}, I = U(V, H, _, G), x = /* @__PURE__ */ P({
  name: "FListNav",
  props: V,
  emits: ["collapse"],
  setup(a, e) {
    const t = y(a.position), i = y(a.folded), o = y(!1);
    E(() => a.position, (s, l) => {
      s !== l && (t.value = s);
    });
    function n(s) {
      s && s.stopPropagation(), !a.disabled && (o.value = !0, i.value = !i.value, e.emit("collapse", i.value));
    }
    const r = C(() => {
      const s = {}, l = ["top", "bottom"].indexOf(t.value) > -1 ? "height" : "width";
      return s[l] = i.value ? "0px" : a.size + "px", s;
    }), d = C(() => {
      const s = {
        "f-list-nav": !0,
        "f-list-nav-top": t.value === "top",
        "f-list-nav-left": t.value === "left",
        "f-list-nav-right": t.value === "right",
        "f-list-nav-bottom": t.value === "bottom"
      };
      return k(s, a.customClass);
    });
    return () => a.visible ? p("div", {
      class: d.value,
      style: a.customStyle
    }, [p("div", {
      class: "f-list-nav-in",
      style: r.value
    }, [p("div", {
      class: "f-list-nav-main"
    }, [e.slots.navHeader && p("div", {
      class: "f-list-nav-header"
    }, [e.slots.navHeader()]), !e.slots.navHeader && a.title && p("div", {
      class: "f-list-nav-header"
    }, [p("div", {
      class: "f-list-nav-title"
    }, [a.title])]), e.slots.default && p("div", {
      class: "f-list-nav-content"
    }, [e.slots.default()]), e.slots.navContent && p("div", {
      class: "f-list-nav-content"
    }, [e.slots.navContent()]), e.slots.navFooter && p("div", {
      class: "f-list-nav-footer"
    }, [e.slots.navFooter()])]), a.collapsible && p("div", {
      class: ["f-list-nav-toggle-sidebar", {
        disabled: a.disabled,
        active: i.value,
        "splitter-pane-collapse-animate": o.value
      }],
      onClick: (s) => n(s)
    }, [p("span", {
      class: "triangle"
    }, null)])])]) : null;
  }
}), ee = y(0);
function te(a) {
  const { formSchemaUtils: e, formStateMachineUtils: t } = a;
  function i(s, l = "") {
    return {
      path: l + s.code,
      field: s.id,
      fullPath: s.code
    };
  }
  function o(s, l = "") {
    const c = e.getViewModelById(s);
    return c ? c.states.map((u) => i(u, l)) : [];
  }
  function n(s) {
    const l = e.getRootViewModelId(), c = o(s);
    if (s === l)
      return c;
    const u = o(l, "root-component.");
    return [...c, ...u];
  }
  function r(s) {
    return s.binding && s.binding.path || s.id || "";
  }
  function d() {
    return t && t.getRenderStates() || [];
  }
  return { getVariables: n, getControlName: r, getStateMachines: d };
}
class ie {
  constructor(e) {
    g(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'"
      }
    ]);
    g(this, "expressionNames", {
      compute: "计算表达式",
      dependency: "依赖表达式",
      validate: "验证表达式",
      dataPicking: "帮助前表达式",
      visible: "可见表达式",
      readonly: "只读表达式",
      required: "必填表达式"
    });
    g(this, "getExpressionConverter", (e, t) => ({
      convertFrom: (i, o, n, r) => {
        const d = n.getExpressionRuleValue(e, t || o);
        return d && d.value || "";
      },
      convertTo: (i, o, n, r, d) => {
        var s;
        if (o === "dataPicking" && (n != null && n.target)) {
          const l = `${n.target}_dataPicking`;
          ((s = n.rules) == null ? void 0 : s.some(
            (u) => u.id === l && u.value
          )) ? i.dictPickingExpressionId = l : delete i.dictPickingExpressionId;
        }
        r.updateExpression(n);
      }
    }));
    this.formSchemaService = e;
  }
  getExpressionRule(e, t) {
    const i = this.getExpressionData();
    if (!i)
      return "";
    const o = i.find((r) => r.target === e);
    if (!o)
      return "";
    const n = o.rules.find((r) => r.type === t);
    return n || "";
  }
  // 获取上下文表单变量
  getContextFormVariables() {
    const { module: e } = this.formSchemaService.getFormSchema();
    if (!e.viewmodels || e.viewmodels.length === 0)
      return [];
    const t = this.formSchemaService.getRootViewModelId(), i = this.formSchemaService.getViewModelById(t);
    if (!i || !i.states || i.states.length === 0)
      return [];
    const o = [];
    return i.states.filter((n) => n.category === "remote").forEach((n) => {
      o.push({
        key: n.code,
        name: n.name,
        description: n.name,
        category: n.category
      });
    }), o;
  }
  createTreeNode(e, t, i = "label") {
    return {
      id: e.id,
      name: e.name,
      bindingPath: e[i],
      parents: t,
      type: "field"
    };
  }
  buildEntityFieldsTreeData(e = null, t) {
    const i = [];
    return e == null || e.forEach((o) => {
      var d;
      const n = this.createTreeNode(o, t);
      let r = [];
      (d = o.type) != null && d.fields && (r = this.buildEntityFieldsTreeData(o.type.fields, [...t, o.label])), i.push({
        data: n,
        children: r,
        expanded: !0
      });
    }), i;
  }
  buildChildEntityTreeData(e = null, t) {
    const i = [];
    return e == null || e.forEach((o) => {
      var s, l;
      const n = this.createTreeNode(o, t);
      n.type = "entity";
      const r = this.buildEntityFieldsTreeData((s = o.type) == null ? void 0 : s.fields, [...t, o.label]), d = this.buildChildEntityTreeData((l = o.type) == null ? void 0 : l.entities, [...t, o.label]);
      d != null && d.length && (r == null || r.push(...d)), i.push({
        data: n,
        children: r || [],
        // 空值回退
        expanded: !0
      });
    }), i;
  }
  getEntitiesTreeData() {
    const e = this.formSchemaService.getSchemaEntities();
    if (!(e != null && e.length))
      return [];
    const t = e[0];
    if (!(t != null && t.type))
      return [];
    const i = this.buildEntityFieldsTreeData(t.type.fields, [t.code]), o = this.buildChildEntityTreeData(t.type.entities, [t.code]);
    return o != null && o.length && (i == null || i.push(...o)), {
      entityCode: t.code,
      fields: [{
        data: this.createTreeNode(t, [], "code"),
        children: i || []
      }]
    };
  }
  getEntitiesAndVariables() {
    return {
      entities: this.getEntitiesTreeData(),
      variables: {
        session: {
          name: "系统变量",
          items: this.sessionVariables,
          visible: !1
        },
        forms: {
          name: "表单变量",
          items: this.getContextFormVariables(),
          visible: !0
        }
      }
    };
  }
  onBeforeOpenExpression(e, t, i) {
    const o = i === "Field" ? e.binding.field : e.id, n = this.getExpressionRule(o, t), r = this.getEntitiesAndVariables(), d = {
      message: ["validate", "required", "dataPicking"].includes(t) && n ? n.message : "",
      ...r
    };
    return n.messageType != null && (d.messageType = n.messageType), d;
  }
  buildRule(e, t, i, o) {
    const { expression: n, message: r, messageType: d } = t, s = {
      id: `${e}_${i}`,
      type: i,
      value: n
    };
    return (i === "validate" || i === "dataPicking" || i === "required") && (s.message = r), i === "dataPicking" && (s.messageType = d), i === "validate" && o && (s.elementId = o), s;
  }
  getExpressionData() {
    const { expressions: e } = this.formSchemaService.getFormSchema().module;
    return e || [];
  }
  updateExpression(e, t, i, o) {
    const n = t === "Field" ? e.binding.field : e.id, r = this.buildRule(n, i, o, e.type === "form-group" ? e.id : "");
    let s = this.getExpressionData().find((c) => c.targetType === t && c.target === n);
    const l = (c) => c.value.trim() === "";
    if (s) {
      const c = s.rules.find((u) => u.id === r.id);
      if (c)
        l(r) ? s.rules = s.rules.filter((u) => u.id !== r.id) : (Object.assign(c, r), o === "validate" && e.type === "form-group" && (c.elementId = e.id));
      else {
        if (l(r))
          return null;
        s.rules = s.rules || [], s.rules.push(r);
      }
    } else {
      if (l(r))
        return null;
      s = {
        target: `${n}`,
        rules: [r],
        targetType: t
      };
    }
    return s;
  }
  getExpressionEditorOptions(e, t, i, o) {
    return i.reduce((n, r) => {
      var s, l;
      const d = t === "Field" ? (s = e == null ? void 0 : e.binding) == null ? void 0 : s.field : e.id;
      return n[r] = {
        hide: t === "Field" ? !!((l = e == null ? void 0 : e.binding) != null && l.field) : !1,
        description: "",
        title: this.expressionNames[r],
        type: "string",
        $converter: this.getExpressionConverter(d),
        refreshPanelAfterChanged: !0,
        editor: {
          type: "expression-editor",
          singleExpand: !1,
          dialogTitle: `${this.expressionNames[r]}编辑器`,
          showMessage: r === "validate" || r === "dataPicking" || r === "required",
          showMessageType: r === "dataPicking",
          beforeOpen: () => this.onBeforeOpenExpression(e, r, t),
          onSubmitModal: (c) => {
            const u = this.updateExpression(e, t, c, r);
            if (o) {
              const m = this.buildRule(d, c, r);
              o(m);
            }
            return u;
          }
        }
      }, n;
    }, {});
  }
  getExpressionInfo(e, t, i) {
    const o = t === "Field" ? e.binding.field : e.id, n = this.getExpressionRule(o, i), r = {
      value: n && n.value,
      targetId: o,
      targetType: t,
      expressionType: i
    };
    return n && n.message && (r.message = n.message), r;
  }
  getExpressionConfig(e, t, i = ["compute", "dependency", "validate"], o) {
    var n;
    return {
      description: "表达式",
      title: "表达式",
      hide: !(e.binding && ((n = e.binding) == null ? void 0 : n.type) === "Form"),
      properties: {
        ...this.getExpressionEditorOptions(e, t, i, o)
      }
    };
  }
  getExpressionOptions(e, t, i) {
    const o = this.getExpressionInfo(e, t, i);
    return {
      dialogTitle: `${this.expressionNames[i] || "表达式"}编辑器`,
      singleExpand: !1,
      showMessage: i === "required",
      beforeOpen: () => this.onBeforeOpenExpression(e, i, t),
      expressionInfo: o
    };
  }
}
class se {
  constructor(e, t) {
    g(this, "componentId");
    g(this, "viewModelId");
    g(this, "eventsEditorUtils");
    g(this, "formSchemaUtils");
    g(this, "formMetadataConverter");
    g(this, "designViewModelUtils");
    g(this, "designViewModelField");
    g(this, "controlCreatorUtils");
    g(this, "designerHostService");
    g(this, "designerContext");
    g(this, "modalService", null);
    /** 表单规则 */
    g(this, "formRule", null);
    g(this, "schemaService", null);
    g(this, "metadataService", null);
    g(this, "propertyConfig", {
      type: "object",
      categories: {}
    });
    g(this, "expressionProperty");
    var i;
    this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((i = this.formSchemaUtils) == null ? void 0 : i.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 ie(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 i;
    const t = e.binding && e.binding.type === "Form" && e.binding.field;
    if (t) {
      if (!this.designViewModelField) {
        const o = this.designViewModelUtils.getDgViewModel(this.viewModelId);
        this.designViewModelField = o.fields.find((n) => n.id === t);
      }
      e.updateOn = (i = this.designViewModelField) == null ? void 0 : i.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: w[e.type] && w[e.type].name }]
          }
        }
      }
    };
  }
  getAppearanceConfig(e = null, t = {}, i) {
    const o = {
      title: "外观",
      description: "Appearance"
    }, n = {
      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 r in t)
      n[r] = Object.assign(n[r] || {}, t[r]);
    return {
      ...o,
      properties: { ...n },
      setPropertyRelates(r, d) {
        if (r) {
          switch (r && r.propertyID) {
            case "class":
            case "style": {
              z.value++;
              break;
            }
          }
          i && i(r, e, d);
        }
      }
    };
  }
  /**
   * 
   * @param propertyData 
   * @param propertyTypes 
   * @param propertyName 
   * @param constInfos 
   * @param variableInfos 
   * @param expressionType 指定表达式类型，存在属性和表达式类型不一致的情况
   * @returns 
   */
  getPropertyEditorParams(e, t = [], i = "visible", o = {}, n = {}, r = "") {
    const { getVariables: d, getControlName: s, getStateMachines: l } = te(this.designerHostService), c = this.getRealTargetType(e), u = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], m = {
      type: "property-editor",
      propertyTypes: u
    };
    return u.map((b) => {
      switch (b) {
        case "Const":
          Object.assign(m, {
            constType: "enum",
            constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
          }, o);
          break;
        case "Expression":
          m.expressionConfig = this.getExpressionOptions(e, c, r || i);
          break;
        case "StateMachine":
          m.stateMachines = l();
          break;
        case "Variable":
          Object.assign(m, {
            controlName: s(e),
            newVariablePrefix: "is",
            newVariableType: "Boolean",
            variables: d(this.viewModelId),
            parentComponentId: this.componentId === "root-component" ? "" : "root-component",
            onBeforeOpenVariables: (v) => {
              v.value = d(this.viewModelId);
            }
          }, n), this.designerContext.designerMode === "PC_RTC" && (m.newVariablePrefix = "ext_" + m.newVariablePrefix);
          break;
      }
    }), m;
  }
  getVisibleProperty(e, t = "") {
    var n;
    let i = ["Const", "Variable", "StateMachine", "Expression"];
    return t === "gridFieldEditor" ? i = ["Const", "Expression"] : t === "form-group" && !((n = e.binding) != null && n.field) ? i = ["Const", "Variable", "StateMachine", "Custom"] : t === "dataGrid" || t === "treeGrid" || t === "wizard" ? i = ["Const", "Variable", "Expression"] : (e.type.indexOf("toolbar-item") > -1 || t === "form-group") && (i = ["Const", "Variable", "StateMachine", "Custom", "Expression"]), {
      visible: {
        title: "是否可见",
        type: "boolean",
        description: "运行时组件是否可见",
        editor: this.getPropertyEditorParams(e, i, "visible")
      }
    };
  }
  /**
   * 获取行为
   * @param propertyData 
   * @param viewModelId 
   * @returns 
   */
  getBehaviorConfig(e, t = "", i = {}, o) {
    const n = {
      title: "行为",
      description: ""
    }, r = this.getVisibleProperty(e, t);
    for (const s in i)
      r[s] = Object.assign(r[s] || {}, i[s]);
    const d = this;
    return {
      ...n,
      properties: { ...r },
      setPropertyRelates(s, l) {
        if (s) {
          switch (s.propertyID) {
            case "disabled":
            case "readonly":
            case "visible":
              d.afterMutilEditorChanged(e, s);
              break;
          }
          o && o(s, l);
        }
      }
    };
  }
  /**
   * 当多值编辑器变更时
   * @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 i = t && t.parent && t.parent.schema;
    if (!i)
      return;
    const o = i.contents.findIndex((r) => r.id === e), n = L(i.contents[o]);
    i.contents.splice(o, 1), i.contents.splice(o, 0, n), O();
  }
  /**
   * 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中
   * @param changeObject 
   * @param viewModelId 
   * @returns 
   */
  addNewVariableToViewModel(e, t) {
    const i = e.propertyValue;
    if (!(i && typeof i == "object") || !(i.type === "Variable" && i.isNewVariable))
      return;
    const r = {
      id: i.field,
      category: "locale",
      code: i.fullPath,
      name: i.fullPath,
      type: i.newVariableType || "String",
      isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
    };
    delete i.newVariableType, delete i.isNewVariable, this.formSchemaUtils.getVariableByCode(r.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(r);
  }
  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 i = e.propertyValue;
    if (!((i && i.type) === "Expression" && i.expressionInfo))
      return;
    const { expressionId: r, expressionInfo: d } = i, { targetId: s, targetType: l, expressionType: c, value: u, message: m } = d, b = this.getExpressions();
    let v = b.find((h) => h.target === s);
    v || (v = { target: s, rules: [], targetType: l }, b.push(v));
    const f = v.rules.find((h) => h.type === c);
    if (f)
      f.id = r, f.value = u, f.message = m, (c === "minDate" || c === "maxDate" || c === "defaultTime") && (f.elementId = t.id);
    else {
      const h = { id: r, type: c, value: u, message: m, elementId: t.id };
      v.rules.push(h);
    }
    delete i.expressionInfo;
  }
  /**
   * 属性类型切换为非表达式后，清除原表达式
   * @param changeObject 
   * @param propertyData 
   * @returns 
   */
  clearExpression(e, t) {
    const i = e.propertyValue;
    if (i && i.type === "Expression")
      return;
    const n = e.propertyID, r = this.getExpressions(), d = t.binding ? t.binding.field : t.id, s = r.find((l) => l.target === d);
    !s || !s.rules || (s.rules = s.rules.filter((l) => l.type !== n));
  }
  getExpressionOptions(e, t, i) {
    return this.expressionProperty.getExpressionOptions(e, t, i);
  }
  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: (i) => {
          var o;
          ((o = i.controller) == null ? void 0 : o.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(i);
        }
      }
    }, t;
  }
}
class ne extends se {
  getPropertyConfig(e) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.appearance = this.getAppearanceConfig(e), this.propertyConfig.categories.behavior = this.getBehaviorConfig(e, ""), this.propertyConfig;
  }
  getAppearanceConfig(e) {
    return super.getAppearanceConfig(e, {
      width: {
        title: "宽度",
        type: "number",
        editor: {
          nullable: !0,
          min: 0,
          precision: 0,
          needValid: !0
        },
        $converter: "/converter/size.converter",
        parentPropertyID: "size"
      },
      height: {
        title: "高度",
        type: "number",
        editor: {
          nullable: !0,
          min: 0,
          precision: 0,
          needValid: !0
        },
        $converter: "/converter/size.converter",
        parentPropertyID: "size",
        visible: !1
      },
      title: {
        title: "标题",
        type: "string",
        description: "导航标题"
      },
      folded: {
        title: "是否默认收起",
        type: "boolean",
        description: "初始状态是否将面板默认收起"
      },
      collapsible: {
        title: "是否启用收折",
        type: "boolean",
        description: "是否启用收折特性",
        editor: {
          type: "combo-list",
          textField: "name",
          valueField: "value",
          data: [{
            name: "启用",
            value: !0
          }, {
            name: "不启用",
            value: !1
          }],
          enableClear: !1
        },
        refreshPanelAfterChanged: !0
      },
      position: {
        title: "收折按钮显示位置",
        // 因为控件里这个属性是针对导航面板的，但是属性面板里是针对收折按钮的，位置含义相反，所以在设计器上枚举项也反着写
        type: "enum",
        description: "收折按钮显示位置",
        editor: {
          type: "combo-list",
          textField: "name",
          valueField: "value",
          idField: "value",
          editable: !1,
          data: [{ value: "left", name: "靠右" }, { value: "right", name: "靠左" }, { value: "bottom", name: "靠上" }, { value: "top", name: "靠下" }]
        },
        // visible: propertyData.collapsible,
        visible: !1
      }
    }, (i, o, n) => {
      switch (i.propertyID) {
        case "width":
        case "height": {
          ee.value++;
          break;
        }
        case "title": {
          i.needRefreshControlTree = !0;
          break;
        }
      }
    });
  }
}
function oe(a, e) {
  const t = new A(), { canAccept: i } = t.getTemplateRule(a, e);
  function o(c) {
    var m, b, v;
    return !(!$().basalDragulaRuleForContainer(c, e) || !i || ((m = a.schema.contents) == null ? void 0 : m.length) === 1 && ((v = (b = a.schema) == null ? void 0 : b.contents[0]) == null ? void 0 : v.type) === w["external-container"].type);
  }
  function n() {
    return "display: flex;flex-direction:column;height:100%";
  }
  function r() {
    const { canMove: c } = t.getTemplateRule(a, e);
    return c;
  }
  function d() {
    const { canDelete: c } = t.getTemplateRule(a, e);
    return c;
  }
  function s() {
    const { canMove: c, canDelete: u } = t.getTemplateRule(a, e);
    return !c && !u;
  }
  function l(c) {
    const u = new ne(c, e), { schema: m } = a;
    return u.getPropertyConfig(m);
  }
  return {
    canAccepts: o,
    getStyles: n,
    checkCanMoveComponent: r,
    checkCanDeleteComponent: d,
    hideNestedPaddingInDesginerView: s,
    getPropsConfig: l
  };
}
const re = /* @__PURE__ */ P({
  name: "FListNavDesign",
  props: V,
  emits: [],
  setup(a, e) {
    const t = y(), i = y(), o = M("designer-host-service"), n = M("design-item-context"), r = oe(n, o), d = q(t, n, r), s = y(a.position), l = y(!1), c = y(!1);
    E(() => a.position, (f, h) => {
      f !== h && (s.value = f);
    });
    function u() {
      if (!i.value)
        return;
      const f = i.value.parentElement;
      if (f && f.className && f.className.includes("farris-component-list-nav")) {
        const h = ["top", "bottom"].indexOf(s.value) > -1 ? "height" : "width", S = l.value ? "0px" : a.size + "px";
        f.style[h] = S;
      }
    }
    F(() => {
      t.value.componentInstance = d, u();
    }), e.expose(d.value);
    function m(f) {
      f && f.stopPropagation(), !a.disabled && (c.value = !0, l.value = !l.value, u(), T(() => {
        D();
      }));
    }
    const b = C(() => ({
      "f-list-nav-main": !0,
      "d-none": l.value
    })), v = C(() => ({
      [["top", "bottom"].indexOf(s.value) > -1 ? "min-width" : "min-height"]: "200px"
    }));
    return E(() => a.size, (f, h) => {
      f !== h && u();
    }), () => p("div", {
      class: `f-list-nav f-list-nav-${s.value}`,
      ref: i
    }, [p("div", {
      class: "f-list-nav-in"
    }, [p("div", {
      class: b.value,
      style: v.value
    }, [e.slots.navHeader && p("div", {
      class: "f-list-nav-header"
    }, [e.slots.navHeader()]), !e.slots.navHeader && a.title && p("div", {
      class: "f-list-nav-header"
    }, [p("div", {
      class: "f-list-nav-title"
    }, [a.title])]), e.slots.default && p("div", {
      class: "f-list-nav-content drag-container",
      ref: t,
      "data-dragref": `${n.schema.id}-container`
    }, [e.slots.default()]), e.slots.navContent && p("div", {
      class: "f-list-nav-content"
    }, [e.slots.navContent()]), e.slots.navFooter && p("div", {
      class: "f-list-nav-footer"
    }, [e.slots.navFooter()])]), a.collapsible && p("div", {
      class: ["f-list-nav-toggle-sidebar", {
        disabled: a.disabled,
        active: l.value,
        "splitter-pane-collapse-animate": c.value
      }],
      onClick: (f) => m(f)
    }, [p("span", {
      class: "triangle"
    }, null)])])]);
  }
}), fe = {
  install(a) {
    a.component(x.name, x);
  },
  register(a, e, t, i) {
    a["list-nav"] = x, e["list-nav"] = I;
  },
  registerDesigner(a, e, t) {
    a["list-nav"] = re, e["list-nav"] = I;
  }
};
export {
  x as FListNav,
  fe as default,
  V as listNavProps,
  I as propsResolver
};