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

package/components/list-nav/index.esm.js

@@ -1,22 +1,24 @@
-var S = Object.defineProperty;
-var P = (d, e, t) => e in d ? S(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t;
-var v = (d, e, t) => P(d, typeof e != "symbol" ? e + "" : e, t);
-import { defineComponent as M, ref as h, computed as C, createVNode as p, inject as V, onMounted as N } from "vue";
-import { getCustomClass as T } from "../common/index.esm.js";
-import { resolveAppearance as F, createPropsResolver as R } from "../dynamic-resolver/index.esm.js";
-import { DgControl as w, canvasChanged as k, refreshCanvas as U, UseTemplateDragAndDropRules as B, useDragulaCommonRule as $, useDesignerComponent as z } from "../designer-canvas/index.esm.js";
-import { cloneDeep as A } from "lodash-es";
-function O(d, e) {
+var N = Object.defineProperty;
+var T = (a, e, t) => e in a ? N(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var v = (a, e, t) => T(a, typeof e != "symbol" ? e + "" : e, t);
+import { defineComponent as S, ref as y, watch as w, computed as C, createVNode as p, inject as M, onMounted as F, nextTick as R } 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 E, 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 q = /* @__PURE__ */ new Map([
-  ["appearance", F],
-  ["size", O]
+const _ = /* @__PURE__ */ new Map([
+  ["appearance", B],
+  ["size", j]
 ]);
-function j(d, e, t) {
-  return e;
+function G(a, e, t) {
+  return e.size = {
+    width: 220
+  }, e.title = "标题", e;
 }
-const D = "https://json-schema.org/draft/2020-12/schema", L = "https://farris-design.gitee.io/list-nav.schema.json", _ = "list-nav", H = "A Farris Container Component", G = "object", J = {
+const H = "https://json-schema.org/draft/2020-12/schema", J = "https://farris-design.gitee.io/list-nav.schema.json", K = "list-nav", Q = "A Farris Container Component", W = "object", X = {
   id: {
     description: "The unique identifier for a list-nav",
     type: "string"
@@ -71,20 +73,30 @@ const D = "https://json-schema.org/draft/2020-12/schema", L = "https://farris-de
     description: "",
     type: "string",
     default: ""
+  },
+  collapsible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  folded: {
+    description: "",
+    type: "boolean",
+    default: !1
   }
-}, K = [
+}, Y = [
   "id",
   "type",
   "contents"
-], Q = {
-  $schema: D,
-  $id: L,
-  title: _,
-  description: H,
-  type: G,
-  properties: J,
-  required: K
-}, E = {
+], Z = {
+  $schema: H,
+  $id: J,
+  title: K,
+  description: Q,
+  type: W,
+  properties: X,
+  required: Y
+}, V = {
   /** 自定义样式 */
   customClass: { type: String, default: "" },
   customStyle: { type: String, default: "" },
@@ -101,90 +113,95 @@ const D = "https://json-schema.org/draft/2020-12/schema", L = "https://farris-de
   /** 控件禁用状态 */
   disabled: { Type: Boolean, default: !1 },
   /** 是否启用拖拽 TODO */
-  draggable: { Type: Boolean, default: !1 }
-}, I = R(E, Q, q, j), x = /* @__PURE__ */ M({
+  draggable: { Type: Boolean, default: !1 },
+  /** 控制是否可见 */
+  visible: { type: Boolean, default: !0 }
+}, I = U(V, Z, _, G), x = /* @__PURE__ */ S({
   name: "FListNav",
-  props: E,
+  props: V,
   emits: ["collapse"],
-  setup(d, e) {
-    const t = h(d.position), s = h(d.title), i = h(d.folded), r = h(!1);
-    function n(a) {
-      a && a.stopPropagation(), !d.disabled && (r.value = !0, i.value = !i.value, e.emit("collapse", i.value));
+  setup(a, e) {
+    const t = y(a.position), i = y(a.folded), n = y(!1);
+    w(() => a.position, (s, l) => {
+      s !== l && (t.value = s);
+    });
+    function o(s) {
+      s && s.stopPropagation(), !a.disabled && (n.value = !0, i.value = !i.value, e.emit("collapse", i.value));
     }
-    const l = C(() => {
-      const a = {}, c = ["top", "bottom"].indexOf(t.value) > -1 ? "height" : "width";
-      return a[c] = i.value ? "0px" : d.size + "px", a;
-    }), o = C(() => {
-      const a = {
+    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 T(a, d.customClass);
+      return k(s, a.customClass);
     });
-    return () => p("div", {
-      class: o.value,
-      style: d.customStyle
+    return () => a.visible ? p("div", {
+      class: d.value,
+      style: a.customStyle
     }, [p("div", {
       class: "f-list-nav-in",
-      style: l.value
+      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 && s.value && p("div", {
+    }, [e.slots.navHeader()]), !e.slots.navHeader && a.title && p("div", {
       class: "f-list-nav-header"
     }, [p("div", {
       class: "f-list-nav-title"
-    }, [s.value])]), e.slots.default && p("div", {
+    }, [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()])]), d.collapsible && p("div", {
+    }, [e.slots.navFooter()])]), a.collapsible && p("div", {
       class: ["f-list-nav-toggle-sidebar", {
-        disabled: d.disabled,
+        disabled: a.disabled,
         active: i.value,
-        "splitter-pane-collapse-animate": r.value
+        "splitter-pane-collapse-animate": n.value
       }],
-      onClick: (a) => n(a)
+      onClick: (s) => o(s)
     }, [p("span", {
       class: "triangle"
-    }, null)])])]);
+    }, null)])])]) : null;
   }
-}), W = h(0);
-function X(d) {
-  const { formSchemaUtils: e, formStateMachineUtils: t } = d;
-  function s(o, a = "") {
+}), ee = y(0);
+function te(a) {
+  const { formSchemaUtils: e, formStateMachineUtils: t } = a;
+  function i(s, l = "") {
     return {
-      path: a + o.code,
-      field: o.id,
-      fullPath: o.code
+      path: l + s.code,
+      field: s.id,
+      fullPath: s.code
     };
   }
-  function i(o, a = "") {
-    const c = e.getViewModelById(o);
-    return c ? c.states.map((u) => s(u, a)) : [];
+  function n(s, l = "") {
+    const c = e.getViewModelById(s);
+    return c ? c.states.map((u) => i(u, l)) : [];
   }
-  function r(o) {
-    const a = e.getRootViewModelId(), c = i(o);
-    if (o === a)
+  function o(s) {
+    const l = e.getRootViewModelId(), c = n(s);
+    if (s === l)
       return c;
-    const u = i(a, "root-component.");
+    const u = n(l, "root-component.");
     return [...c, ...u];
   }
-  function n(o) {
-    return o.binding && o.binding.path || o.id || "";
+  function r(s) {
+    return s.binding && s.binding.path || s.id || "";
   }
-  function l() {
+  function d() {
     return t && t.getRenderStates() || [];
   }
-  return { getVariables: r, getControlName: n, getStateMachines: l };
+  return { getVariables: o, getControlName: r, getStateMachines: d };
 }
-class Y {
+class ie {
   constructor(e) {
     v(this, "sessionVariables", [
       {
@@ -233,87 +250,87 @@ class Y {
       required: "必填表达式"
     });
     v(this, "getExpressionConverter", (e, t) => ({
-      convertFrom: (s, i, r, n) => {
-        const l = r.getExpressionRuleValue(e, t || i);
-        return l && l.value || "";
+      convertFrom: (i, n, o, r) => {
+        const d = o.getExpressionRuleValue(e, t || n);
+        return d && d.value || "";
       },
-      convertTo: (s, i, r, n, l) => {
-        var o;
-        if (i === "dataPicking" && (r != null && r.target)) {
-          const a = `${r.target}_dataPicking`;
-          ((o = r.rules) == null ? void 0 : o.some(
-            (u) => u.id === a && u.value
-          )) ? s.dictPickingExpressionId = a : delete s.dictPickingExpressionId;
+      convertTo: (i, n, o, r, d) => {
+        var s;
+        if (n === "dataPicking" && (o != null && o.target)) {
+          const l = `${o.target}_dataPicking`;
+          ((s = o.rules) == null ? void 0 : s.some(
+            (u) => u.id === l && u.value
+          )) ? i.dictPickingExpressionId = l : delete i.dictPickingExpressionId;
         }
-        n.updateExpression(r);
+        r.updateExpression(o);
       }
     }));
     this.formSchemaService = e;
   }
   getExpressionRule(e, t) {
-    const s = this.formSchemaService.getExpressions();
-    if (!s)
-      return "";
-    const i = s.find((n) => n.target === e);
+    const i = this.formSchemaService.getExpressions();
     if (!i)
       return "";
-    const r = i.rules.find((n) => n.type === t);
-    return r || "";
+    const n = i.find((r) => r.target === e);
+    if (!n)
+      return "";
+    const o = n.rules.find((r) => r.type === t);
+    return o || "";
   }
   // 获取上下文表单变量
   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)
+    const t = this.formSchemaService.getRootViewModelId(), i = this.formSchemaService.getViewModelById(t);
+    if (!i || !i.states || i.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
+    const n = [];
+    return i.states.filter((o) => o.category === "remote").forEach((o) => {
+      n.push({
+        key: o.code,
+        name: o.name,
+        description: o.name,
+        category: o.category
       });
-    }), i;
+    }), n;
   }
-  createTreeNode(e, t, s = "label") {
+  createTreeNode(e, t, i = "label") {
     return {
       id: e.id,
       name: e.name,
-      bindingPath: e[s],
+      bindingPath: e[i],
       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,
+    const i = [];
+    return e == null || e.forEach((n) => {
+      var d;
+      const o = this.createTreeNode(n, t);
+      let r = [];
+      (d = n.type) != null && d.fields && (r = this.buildEntityFieldsTreeData(n.type.fields, [...t, n.label])), i.push({
+        data: o,
+        children: r,
         expanded: !0
       });
-    }), s;
+    }), i;
   }
   buildChildEntityTreeData(e = null, t) {
-    const s = [];
-    return e == null || e.forEach((i) => {
-      var o, a;
-      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((a = i.type) == null ? void 0 : a.entities, [...t, i.label]);
-      l != null && l.length && (n == null || n.push(...l)), s.push({
-        data: r,
-        children: n || [],
+    const i = [];
+    return e == null || e.forEach((n) => {
+      var s, l;
+      const o = this.createTreeNode(n, t);
+      o.type = "entity";
+      const r = this.buildEntityFieldsTreeData((s = n.type) == null ? void 0 : s.fields, [...t, n.label]), d = this.buildChildEntityTreeData((l = n.type) == null ? void 0 : l.entities, [...t, n.label]);
+      d != null && d.length && (r == null || r.push(...d)), i.push({
+        data: o,
+        children: r || [],
         // 空值回退
         expanded: !0
       });
-    }), s;
+    }), i;
   }
   getEntitiesTreeData() {
     const e = this.formSchemaService.getSchemaEntities();
@@ -322,12 +339,12 @@ class Y {
     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)), {
+    const i = this.buildEntityFieldsTreeData(t.type.fields, [t.code]), n = this.buildChildEntityTreeData(t.type.entities, [t.code]);
+    return n != null && n.length && (i == null || i.push(...n)), {
       entityCode: t.code,
       fields: [{
         data: this.createTreeNode(t, [], "code"),
-        children: s || []
+        children: i || []
       }]
     };
   }
@@ -348,110 +365,110 @@ class Y {
       }
     };
   }
-  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
+  onBeforeOpenExpression(e, t, i) {
+    const n = i === "Field" ? e.binding.field : e.id, o = this.getExpressionRule(n, t), r = this.getEntitiesAndVariables(), d = {
+      message: ["validate", "required", "dataPicking"].includes(t) && o ? o.message : "",
+      ...r
     };
-    return r.messageType != null && (l.messageType = r.messageType), l;
+    return o.messageType != null && (d.messageType = o.messageType), d;
   }
-  buildRule(e, t, s, i) {
-    const { expression: r, message: n, messageType: l } = t, o = {
-      id: `${e}_${s}`,
-      type: s,
-      value: r
+  buildRule(e, t, i, n) {
+    const { expression: o, message: r, messageType: d } = t, s = {
+      id: `${e}_${i}`,
+      type: i,
+      value: o
     };
-    return (s === "validate" || s === "dataPicking" || s === "required") && (o.message = n), s === "dataPicking" && (o.messageType = l), s === "validate" && i && (o.elementId = i), o;
+    return (i === "validate" || i === "dataPicking" || i === "required") && (s.message = r), i === "dataPicking" && (s.messageType = d), i === "validate" && n && (s.elementId = n), s;
   }
   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((c) => c.targetType === t && c.target === r);
-    const a = (c) => c.value.trim() === "";
-    if (o) {
-      const c = o.rules.find((u) => u.id === n.id);
+  updateExpression(e, t, i, n) {
+    const o = t === "Field" ? e.binding.field : e.id, r = this.buildRule(o, i, n, e.type === "form-group" ? e.id : "");
+    let s = this.getExpressionData().find((c) => c.targetType === t && c.target === o);
+    const l = (c) => c.value.trim() === "";
+    if (s) {
+      const c = s.rules.find((u) => u.id === r.id);
       if (c)
-        a(n) ? o.rules = o.rules.filter((u) => u.id !== n.id) : (Object.assign(c, n), i === "validate" && e.type === "form-group" && (c.elementId = e.id));
+        l(r) ? s.rules = s.rules.filter((u) => u.id !== r.id) : (Object.assign(c, r), n === "validate" && e.type === "form-group" && (c.elementId = e.id));
       else {
-        if (a(n))
+        if (l(r))
           return null;
-        o.rules = o.rules || [], o.rules.push(n);
+        s.rules = s.rules || [], s.rules.push(r);
       }
     } else {
-      if (a(n))
+      if (l(r))
         return null;
-      o = {
-        target: `${r}`,
-        rules: [n],
+      s = {
+        target: `${o}`,
+        rules: [r],
         targetType: t
       };
     }
-    return o;
-  }
-  getExpressionEditorOptions(e, t, s, i) {
-    return s.reduce((r, n) => {
-      var o, a;
-      const l = t === "Field" ? (o = e == null ? void 0 : e.binding) == null ? void 0 : o.field : e.id;
-      return r[n] = {
-        hide: t === "Field" ? !!((a = e == null ? void 0 : e.binding) != null && a.field) : !1,
+    return s;
+  }
+  getExpressionEditorOptions(e, t, i, n) {
+    return i.reduce((o, r) => {
+      var s, l;
+      const d = t === "Field" ? (s = e == null ? void 0 : e.binding) == null ? void 0 : s.field : e.id;
+      return o[r] = {
+        hide: t === "Field" ? !!((l = e == null ? void 0 : e.binding) != null && l.field) : !1,
         description: "",
-        title: this.expressionNames[n],
+        title: this.expressionNames[r],
         type: "string",
-        $converter: this.getExpressionConverter(l),
+        $converter: this.getExpressionConverter(d),
         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),
+          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, n);
-            if (i) {
-              const f = this.buildRule(l, c, n);
-              i(f);
+            const u = this.updateExpression(e, t, c, r);
+            if (n) {
+              const f = this.buildRule(d, c, r);
+              n(f);
             }
             return u;
           }
         }
-      }, r;
+      }, o;
     }, {});
   }
-  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,
+  getExpressionInfo(e, t, i) {
+    const n = t === "Field" ? e.binding.field : e.id, o = this.getExpressionRule(n, i), r = {
+      value: o && o.value,
+      targetId: n,
       targetType: t,
-      expressionType: s
+      expressionType: i
     };
-    return r && r.message && (n.message = r.message), n;
+    return o && o.message && (r.message = o.message), r;
   }
-  getExpressionConfig(e, t, s = ["compute", "dependency", "validate"], i) {
+  getExpressionConfig(e, t, i = ["compute", "dependency", "validate"], n) {
     return {
       description: "表达式",
       title: "表达式",
       hide: !e.binding,
       properties: {
-        ...this.getExpressionEditorOptions(e, t, s, i)
+        ...this.getExpressionEditorOptions(e, t, i, n)
       }
     };
   }
-  getExpressionOptions(e, t, s) {
-    const i = this.getExpressionInfo(e, t, s);
+  getExpressionOptions(e, t, i) {
+    const n = this.getExpressionInfo(e, t, i);
     return {
-      dialogTitle: `${this.expressionNames[s]}编辑器`,
+      dialogTitle: `${this.expressionNames[i]}编辑器`,
       singleExpand: !1,
-      showMessage: s === "required",
-      beforeOpen: () => this.onBeforeOpenExpression(e, s, t),
-      expressionInfo: i
+      showMessage: i === "required",
+      beforeOpen: () => this.onBeforeOpenExpression(e, i, t),
+      expressionInfo: n
     };
   }
 }
-class Z {
+class se {
   constructor(e, t) {
     v(this, "componentId");
     v(this, "viewModelId");
@@ -469,8 +486,8 @@ class Z {
       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;
+    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;
   }
   getFormDesignerInstance() {
     var e, t;
@@ -481,14 +498,14 @@ class Z {
     return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
   }
   setDesignViewModelField(e) {
-    var s;
+    var i;
     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);
+        const n = this.designViewModelUtils.getDgViewModel(this.viewModelId);
+        this.designViewModelField = n.fields.find((o) => o.id === t);
       }
-      e.updateOn = (s = this.designViewModelField) == null ? void 0 : s.updateOn;
+      e.updateOn = (i = this.designViewModelField) == null ? void 0 : i.updateOn;
     }
   }
   getBasicPropConfig(e) {
@@ -512,17 +529,17 @@ class Z {
             valueField: "value",
             idField: "value",
             editable: !1,
-            data: [{ value: e.type, name: w[e.type] && w[e.type].name }]
+            data: [{ value: e.type, name: E[e.type] && E[e.type].name }]
           }
         }
       }
     };
   }
-  getAppearanceConfig(e = null, t = {}, s) {
-    const i = {
+  getAppearanceConfig(e = null, t = {}, i) {
+    const n = {
       title: "外观",
       description: "Appearance"
-    }, r = {
+    }, o = {
       class: {
         title: "class样式",
         type: "string",
@@ -538,21 +555,21 @@ class Z {
         parentPropertyID: "appearance"
       }
     };
-    for (const n in t)
-      r[n] = Object.assign(r[n] || {}, t[n]);
+    for (const r in t)
+      o[r] = Object.assign(o[r] || {}, t[r]);
     return {
-      ...i,
-      properties: { ...r },
-      setPropertyRelates(n, l) {
-        if (n) {
-          switch (n && n.propertyID) {
+      ...n,
+      properties: { ...o },
+      setPropertyRelates(r, d) {
+        if (r) {
+          switch (r && r.propertyID) {
             case "class":
             case "style": {
-              k.value++;
+              z.value++;
               break;
             }
           }
-          s && s(n, e, l);
+          i && i(r, e, d);
         }
       }
     };
@@ -567,49 +584,49 @@ class Z {
    * @param expressionType 指定表达式类型，存在属性和表达式类型不一致的情况
    * @returns 
    */
-  getPropertyEditorParams(e, t = [], s = "visible", i = {}, r = {}, n = "") {
-    const { getVariables: l, getControlName: o, getStateMachines: a } = X(this.designerHostService), c = this.getRealTargetType(e), u = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], f = {
+  getPropertyEditorParams(e, t = [], i = "visible", n = {}, o = {}, 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"], f = {
       type: "property-editor",
       propertyTypes: u
     };
-    return u.map((m) => {
-      switch (m) {
+    return u.map((b) => {
+      switch (b) {
         case "Const":
           Object.assign(f, {
             constType: "enum",
             constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
-          }, i);
+          }, n);
           break;
         case "Expression":
-          f.expressionConfig = this.getExpressionOptions(e, c, n || s);
+          f.expressionConfig = this.getExpressionOptions(e, c, r || i);
           break;
         case "StateMachine":
-          f.stateMachines = a();
+          f.stateMachines = l();
           break;
         case "Variable":
           Object.assign(f, {
-            controlName: o(e),
+            controlName: s(e),
             newVariablePrefix: "is",
             newVariableType: "Boolean",
-            variables: l(this.viewModelId),
+            variables: d(this.viewModelId),
             parentComponentId: this.componentId === "root-component" ? "" : "root-component",
-            onBeforeOpenVariables: (g) => {
-              g.value = l(this.viewModelId);
+            onBeforeOpenVariables: (m) => {
+              m.value = d(this.viewModelId);
             }
-          }, r), this.designerContext.designerMode === "PC_RTC" && (f.newVariablePrefix = "ext_" + f.newVariablePrefix);
+          }, o), this.designerContext.designerMode === "PC_RTC" && (f.newVariablePrefix = "ext_" + f.newVariablePrefix);
           break;
       }
     }), f;
   }
   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"]), {
+    var o;
+    let i = ["Const", "Variable", "StateMachine", "Expression"];
+    return t === "gridFieldEditor" ? i = ["Const", "Expression"] : t === "form-group" && !((o = e.binding) != null && o.field) ? i = ["Const", "Variable", "StateMachine"] : (t === "dataGrid" || t === "treeGrid" || t === "wizard") && (i = ["Const", "Variable", "Expression"]), {
       visible: {
         title: "是否可见",
         type: "boolean",
         description: "运行时组件是否可见",
-        editor: this.getPropertyEditorParams(e, s, "visible")
+        editor: this.getPropertyEditorParams(e, i, "visible")
       }
     };
   }
@@ -619,27 +636,27 @@ class Z {
    * @param viewModelId 
    * @returns 
    */
-  getBehaviorConfig(e, t = "", s = {}, i) {
-    const r = {
+  getBehaviorConfig(e, t = "", i = {}, n) {
+    const o = {
       title: "行为",
       description: ""
-    }, n = this.getVisibleProperty(e, t);
-    for (const o in s)
-      n[o] = Object.assign(n[o] || {}, s[o]);
-    const l = this;
+    }, r = this.getVisibleProperty(e, t);
+    for (const s in i)
+      r[s] = Object.assign(r[s] || {}, i[s]);
+    const d = this;
     return {
-      ...r,
-      properties: { ...n },
-      setPropertyRelates(o, a) {
-        if (o) {
-          switch (o.propertyID) {
+      ...o,
+      properties: { ...r },
+      setPropertyRelates(s, l) {
+        if (s) {
+          switch (s.propertyID) {
             case "disabled":
             case "readonly":
             case "visible":
-              l.afterMutilEditorChanged(e, o);
+              d.afterMutilEditorChanged(e, s);
               break;
           }
-          i && i(o, a);
+          n && n(s, l);
         }
       }
     };
@@ -659,11 +676,11 @@ class Z {
    * @returns 
    */
   updateElementByParentContainer(e, t) {
-    const s = t && t.parent && t.parent.schema;
-    if (!s)
+    const i = t && t.parent && t.parent.schema;
+    if (!i)
       return;
-    const i = s.contents.findIndex((n) => n.id === e), r = A(s.contents[i]);
-    s.contents.splice(i, 1), s.contents.splice(i, 0, r), U();
+    const n = i.contents.findIndex((r) => r.id === e), o = L(i.contents[n]);
+    i.contents.splice(n, 1), i.contents.splice(n, 0, o), O();
   }
   /**
    * 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中
@@ -672,18 +689,18 @@ class Z {
    * @returns 
    */
   addNewVariableToViewModel(e, t) {
-    const s = e.propertyValue;
-    if (!(s && typeof s == "object") || !(s.type === "Variable" && s.isNewVariable))
+    const i = e.propertyValue;
+    if (!(i && typeof i == "object") || !(i.type === "Variable" && i.isNewVariable))
       return;
-    const n = {
-      id: s.field,
+    const r = {
+      id: i.field,
       category: "locale",
-      code: s.fullPath,
-      name: s.fullPath,
-      type: s.newVariableType || "String",
+      code: i.fullPath,
+      name: i.fullPath,
+      type: i.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);
+    delete i.newVariableType, delete i.isNewVariable, this.formSchemaUtils.getVariableByCode(r.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(r);
   }
   /**
    * 更新表达式到expressions节点
@@ -693,17 +710,17 @@ class Z {
     const t = e.propertyValue;
     if (!((t && t.type) === "Expression" && t.expressionInfo))
       return;
-    const { expressionId: r, expressionInfo: n } = t, { targetId: l, targetType: o, expressionType: a, value: c, message: u } = n, f = this.formSchemaUtils.getModule();
+    const { expressionId: o, expressionInfo: r } = t, { targetId: d, targetType: s, expressionType: l, value: c, message: u } = r, f = this.formSchemaUtils.getModule();
     f.expressions = f.expressions || [];
-    const { expressions: m } = f;
-    let g = m.find((y) => y.target === l);
-    g || (g = { target: l, rules: [], targetType: o }, m.push(g));
-    const b = g.rules.find((y) => y.type === a);
-    if (b)
-      b.value = c, b.message = u;
+    const { expressions: b } = f;
+    let m = b.find((h) => h.target === d);
+    m || (m = { target: d, rules: [], targetType: s }, b.push(m));
+    const g = m.rules.find((h) => h.type === l);
+    if (g)
+      g.value = c, g.message = u;
     else {
-      const y = { id: r, type: a, value: c, message: u };
-      g.rules.push(y);
+      const h = { id: o, type: l, value: c, message: u };
+      m.rules.push(h);
     }
     delete t.expressionInfo;
   }
@@ -714,14 +731,14 @@ class Z {
    * @returns 
    */
   clearExpression(e, t) {
-    const s = e.propertyValue;
-    if (s && s.type === "Expression")
+    const i = e.propertyValue;
+    if (i && i.type === "Expression")
       return;
-    const r = e.propertyID, n = this.formSchemaUtils.getExpressions(), l = t.binding ? t.binding.field : t.id, o = n.find((a) => a.target === l);
-    !o || !o.rules || (o.rules = o.rules.filter((a) => a.type !== r));
+    const o = e.propertyID, r = this.formSchemaUtils.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 !== o));
   }
-  getExpressionOptions(e, t, s) {
-    return new Y(this.formSchemaUtils).getExpressionOptions(e, t, s);
+  getExpressionOptions(e, t, i) {
+    return new ie(this.formSchemaUtils).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";
@@ -732,17 +749,17 @@ class Z {
       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);
+        viewSourceHandle: (i) => {
+          var n;
+          ((n = i.controller) == null ? void 0 : n.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(i);
         }
       }
     }, t;
   }
 }
-class ee extends Z {
+class ne extends se {
   getPropertyConfig(e) {
-    return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.appearance = this.getAppearanceConfig(e), this.propertyConfig;
+    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, {
@@ -770,92 +787,161 @@ class ee extends Z {
         $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
       }
-    }, (s, i, r) => {
-      switch (s.propertyID) {
+    }, (i, n, o) => {
+      switch (i.propertyID) {
         case "width":
-        case "height":
-          W.value++;
+        case "height": {
+          ee.value++;
+          break;
+        }
+        case "title": {
+          i.needRefreshControlTree = !0;
           break;
+        }
       }
     });
   }
 }
-function te(d, e) {
-  const t = new B(), { canAccept: s } = t.getTemplateRule(d, e);
-  function i(c) {
-    var f, m, g;
-    return !(!$().basalDragulaRuleForContainer(c, e) || !s || ((f = d.schema.contents) == null ? void 0 : f.length) === 1 && ((g = (m = d.schema) == null ? void 0 : m.contents[0]) == null ? void 0 : g.type) === w["external-container"].type);
+function oe(a, e) {
+  const t = new A(), { canAccept: i } = t.getTemplateRule(a, e);
+  function n(c) {
+    var f, b, m;
+    return !(!$().basalDragulaRuleForContainer(c, e) || !i || ((f = a.schema.contents) == null ? void 0 : f.length) === 1 && ((m = (b = a.schema) == null ? void 0 : b.contents[0]) == null ? void 0 : m.type) === E["external-container"].type);
   }
-  function r() {
+  function o() {
     return "display: flex;flex-direction:column;height:100%";
   }
-  function n() {
-    return !1;
+  function r() {
+    const { canMove: c } = t.getTemplateRule(a, e);
+    return c;
   }
-  function l() {
-    return !1;
+  function d() {
+    const { canDelete: c } = t.getTemplateRule(a, e);
+    return c;
   }
-  function o() {
-    return !0;
+  function s() {
+    const { canMove: c, canDelete: u } = t.getTemplateRule(a, e);
+    return !c && !u;
   }
-  function a(c) {
-    const u = new ee(c, e), { schema: f } = d;
+  function l(c) {
+    const u = new ne(c, e), { schema: f } = a;
     return u.getPropertyConfig(f);
   }
   return {
-    canAccepts: i,
-    getStyles: r,
-    checkCanMoveComponent: n,
-    checkCanDeleteComponent: l,
-    hideNestedPaddingInDesginerView: o,
-    getPropsConfig: a
+    canAccepts: n,
+    getStyles: o,
+    checkCanMoveComponent: r,
+    checkCanDeleteComponent: d,
+    hideNestedPaddingInDesginerView: s,
+    getPropsConfig: l
   };
 }
-const se = /* @__PURE__ */ M({
+const re = /* @__PURE__ */ S({
   name: "FListNavDesign",
-  props: E,
+  props: V,
   emits: [],
-  setup(d, e) {
-    const t = h(), s = V("designer-host-service"), i = V("design-item-context"), r = te(i, s), n = z(t, i, r), l = h(d.position), o = h(d.title), a = h(!1), c = h(!1), u = C(() => {
-      const g = {}, b = ["top", "bottom"].indexOf(l.value) > -1 ? "height" : "width";
-      return g[b] = a.value ? "0px" : d.size + "px", g;
+  setup(a, e) {
+    const t = y(), i = y(), n = M("designer-host-service"), o = M("design-item-context"), r = oe(o, n), d = q(t, o, r), s = y(a.position), l = y(!1), c = y(!1);
+    w(() => a.position, (g, h) => {
+      g !== h && (s.value = g);
     });
-    N(() => {
-      t.value.componentInstance = n;
-    }), e.expose(n.value);
+    function u() {
+      if (!i.value)
+        return;
+      const g = i.value.parentElement;
+      if (g && g.className && g.className.includes("farris-component-list-nav")) {
+        const h = ["top", "bottom"].indexOf(s.value) > -1 ? "height" : "width", P = l.value ? "0px" : a.size + "px";
+        g.style[h] = P;
+      }
+    }
+    F(() => {
+      t.value.componentInstance = d, u();
+    }), e.expose(d.value);
     function f(g) {
-      g && g.stopPropagation(), !d.disabled && (c.value = !0, a.value = !a.value);
+      g && g.stopPropagation(), !a.disabled && (c.value = !0, l.value = !l.value, u(), R(() => {
+        D();
+      }));
     }
-    const m = C(() => ({
+    const b = C(() => ({
       "f-list-nav-main": !0,
-      "d-none": a.value
+      "d-none": l.value
+    })), m = C(() => ({
+      [["top", "bottom"].indexOf(s.value) > -1 ? "min-width" : "min-height"]: "200px"
     }));
-    return () => p("div", {
-      class: `f-list-nav f-list-nav-${l.value}`
+    return w(() => a.size, (g, h) => {
+      g !== h && u();
+    }), () => p("div", {
+      class: `f-list-nav f-list-nav-${s.value}`,
+      ref: i
     }, [p("div", {
-      class: "f-list-nav-in",
-      style: u.value
+      class: "f-list-nav-in"
     }, [p("div", {
-      class: m.value
+      class: b.value,
+      style: m.value
     }, [e.slots.navHeader && p("div", {
       class: "f-list-nav-header"
-    }, [e.slots.navHeader()]), !e.slots.navHeader && o.value && p("div", {
+    }, [e.slots.navHeader()]), !e.slots.navHeader && a.title && p("div", {
       class: "f-list-nav-header"
     }, [p("div", {
       class: "f-list-nav-title"
-    }, [o.value])]), e.slots.default && p("div", {
+    }, [a.title])]), e.slots.default && p("div", {
       class: "f-list-nav-content drag-container",
       ref: t,
-      "data-dragref": `${i.schema.id}-container`
+      "data-dragref": `${o.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()])]), d.collapsible && p("div", {
+    }, [e.slots.navFooter()])]), a.collapsible && p("div", {
       class: ["f-list-nav-toggle-sidebar", {
-        disabled: d.disabled,
-        active: a.value,
+        disabled: a.disabled,
+        active: l.value,
         "splitter-pane-collapse-animate": c.value
       }],
       onClick: (g) => f(g)
@@ -863,20 +949,20 @@ const se = /* @__PURE__ */ M({
       class: "triangle"
     }, null)])])]);
   }
-}), de = {
-  install(d) {
-    d.component(x.name, x);
+}), fe = {
+  install(a) {
+    a.component(x.name, x);
   },
-  register(d, e, t, s) {
-    d["list-nav"] = x, e["list-nav"] = I;
+  register(a, e, t, i) {
+    a["list-nav"] = x, e["list-nav"] = I;
   },
-  registerDesigner(d, e, t) {
-    d["list-nav"] = se, e["list-nav"] = I;
+  registerDesigner(a, e, t) {
+    a["list-nav"] = re, e["list-nav"] = I;
   }
 };
 export {
   x as FListNav,
-  de as default,
-  E as listNavProps,
+  fe as default,
+  V as listNavProps,
   I as propsResolver
 };