@farris/ui-vue 1.7.0-beta.4 → 1.7.0

package/designer/drawer/index.esm.js

@@ -1,16 +1,19 @@
-import { resolveAppearance as we, createPropsResolver as Ce } from "../../components/dynamic-resolver/index.esm.js";
-import { withInstall as Te } from "../../components/common/index.esm.js";
-import { ref as N, computed as R, defineComponent as te, watch as z, createVNode as f, Teleport as ke, Transition as U, withModifiers as W, withDirectives as Fe, vShow as Se, Fragment as re, inject as Q, onMounted as Pe } from "vue";
-import xe from "../../components/response-toolbar/index.esm.js";
-import { isPlainObject as Z, cloneDeep as K } from "lodash-es";
+import { resolveAppearance as te, createPropsResolver as J } from "../../components/dynamic-resolver/index.esm.js";
+import { getCustomStyle as Se, getMaxZIndex as xe, withInstall as Fe } from "../../components/common/index.esm.js";
+import { ref as M, computed as D, defineComponent as oe, watch as _, watchEffect as Pe, createVNode as p, Teleport as $e, Transition as Z, withModifiers as W, withDirectives as Re, vShow as De, Fragment as re, nextTick as Me, inject as G, onMounted as Ee } from "vue";
+import je, { responseToolbarProps as Oe } from "../../components/response-toolbar/index.esm.js";
+import { isPlainObject as Y, cloneDeep as K } from "lodash-es";
 import { LocaleService as ee } from "../../components/locale/index.esm.js";
-import { UseTemplateDragAndDropRules as Re, useDragulaCommonRule as Me, useDesignerComponent as De, FDesignerInnerItem as Ee } from "../../components/designer-canvas/index.esm.js";
-import { responseToolbarResolver as q, FResponseToolbarDesign as Oe } from "../response-toolbar/index.esm.js";
-import { BaseControlProperty as Ne } from "../../components/property-panel/index.esm.js";
-import { canvasChanged as je } from "../../components/designer-canvas/index.esm.js/src/composition/designer-canvas-changed";
-const oe = /* @__PURE__ */ new Map([
-  ["appearance", we]
-]), $e = "https://json-schema.org/draft/2020-12/schema", Be = "https://farris-design.gitee.io/drawer.schema.json", He = "drawer", Ie = "A Farris Component", Le = "object", Ae = {
+import { UseTemplateDragAndDropRules as Ie, DgControl as Be, useDragulaCommonRule as He, setPositionOfButtonGroup as Ne, useDesignerComponent as Ae, FDesignerInnerItem as Le } from "../../components/designer-canvas/index.esm.js";
+import { commonToolbarItemDesignProps as Ve, FResponseToolbarDesign as ne, FResponseToolbarItemDesign as qe } from "../response-toolbar/index.esm.js";
+import { BaseControlProperty as ze } from "../../components/property-panel/index.esm.js";
+import { canvasChanged as _e } from "../../components/designer-canvas/index.esm.js/src/composition/designer-canvas-changed";
+const ie = /* @__PURE__ */ new Map([
+  ["appearance", te]
+]), We = /* @__PURE__ */ new Map([
+  ["buttons", "items"],
+  ["appearance", te]
+]), Ue = "https://json-schema.org/draft/2020-12/schema", Ge = "https://farris-design.gitee.io/drawer.schema.json", Ze = "drawer", Je = "A Farris Component", Qe = "object", Xe = {
   id: {
     description: "The unique identifier for drawer",
     type: "string"
@@ -98,7 +101,7 @@ const oe = /* @__PURE__ */ new Map([
       type: {
         description: "",
         type: "string",
-        default: "response-toolbar"
+        default: "drawer-toolbar"
       },
       alignment: {
         description: "The alignment of Response Toolbar Button.",
@@ -143,7 +146,7 @@ const oe = /* @__PURE__ */ new Map([
       type: {
         description: "",
         type: "string",
-        default: "response-toolbar"
+        default: "drawer-toolbar"
       },
       alignment: {
         description: "The alignment of Response Toolbar Button.",
@@ -186,182 +189,107 @@ const oe = /* @__PURE__ */ new Map([
     type: "boolean",
     default: !1
   }
-}, Ve = [
+}, Ye = [
   "id",
   "type",
   "contents"
-], _e = {
+], Ke = {
   beforeClose: "关闭前事件"
-}, ne = {
-  $schema: $e,
-  $id: Be,
-  title: He,
-  description: Ie,
-  type: Le,
-  properties: Ae,
-  required: Ve,
-  events: _e
+}, ae = {
+  $schema: Ue,
+  $id: Ge,
+  title: Ze,
+  description: Je,
+  type: Qe,
+  properties: Xe,
+  required: Ye,
+  events: Ke
 };
-function ie(e, t, r) {
+function se(e, t, o) {
   return Object.assign(t, {
     title: "标题",
     headerToolbar: {
       id: t.id + "_header_toolbar",
-      type: "response-toolbar",
+      type: "drawer-toolbar",
       buttons: []
     },
     footerToolbar: {
       id: t.id + "_footer_toolbar",
-      type: "response-toolbar",
+      type: "drawer-toolbar",
       buttons: []
     }
   }), t;
 }
-function ae(e, t) {
-  let r;
-  function o(n) {
-    const { properties: s, title: m, ignore: i } = n, a = i && Array.isArray(i), c = Object.keys(s).reduce((b, w) => ((!a || !i.find((l) => l === w)) && (b[w] = s[w].type === "object" && s[w].properties ? o(s[w]) : K(s[w].default)), b), {});
-    if (m && (!a || !i.find((b) => b === "id"))) {
-      const b = m.toLowerCase().replace(/-/g, "_");
-      c.id = `${b}_${Math.random().toString().slice(2, 6)}`;
-    }
-    return c;
-  }
-  function v(n) {
-    const { properties: s, title: m, required: i } = n;
-    if (i && Array.isArray(i)) {
-      const a = i.reduce((c, b) => (c[b] = s[b].type === "object" && s[b].properties ? o(s[b]) : K(s[b].default), c), {});
-      if (m && i.find((c) => c === "id")) {
-        const c = m.toLowerCase().replace(/-/g, "_");
-        a.id = `${c}_${Math.random().toString().slice(2, 6)}`;
-      }
-      return a;
-    }
-    return {
-      type: m
-    };
-  }
-  function k(n, s = {}, m) {
-    const i = e[n];
-    if (i) {
-      let a = v(i);
-      const c = t[n];
-      return a = c ? c({ getSchemaByType: k }, a, s, m) : a, r != null && r.appendIdentifyForNewControl && r.appendIdentifyForNewControl(a), a;
-    }
-    return null;
-  }
-  function h(n, s) {
-    const m = o(s);
-    return Object.keys(m).reduce((i, a) => (Object.prototype.hasOwnProperty.call(n, a) && (i[a] && Z(i[a]) && Z(n[a] || !n[a]) ? Object.assign(i[a], n[a] || {}) : i[a] = n[a]), i), m), m;
-  }
-  function p(n, s) {
-    return Object.keys(n).filter((i) => n[i] != null).reduce((i, a) => {
-      if (s.has(a)) {
-        const c = s.get(a);
-        if (typeof c == "string")
-          i[c] = n[a];
-        else {
-          const b = c(a, n[a], n);
-          Object.assign(i, b);
-        }
-      } else
-        i[a] = n[a];
-      return i;
-    }, {});
-  }
-  function F(n, s, m = /* @__PURE__ */ new Map()) {
-    const i = h(n, s);
-    return p(i, m);
-  }
-  function u(n) {
-    var m;
-    const s = n.type;
-    if (s) {
-      const i = e[s];
-      if (!i)
-        return n;
-      const a = h(n, i), c = ((m = n.editor) == null ? void 0 : m.type) || "";
-      if (c) {
-        const b = e[c], w = h(n.editor, b);
-        a.editor = w;
-      }
-      return a;
-    }
-    return n;
-  }
-  function g(n) {
-    r = n;
-  }
-  return { getSchemaByType: k, resolveSchemaWithDefaultValue: u, resolveSchemaToProps: F, mappingSchemaToProps: p, setDesignerContext: g };
+function le(e, t, o) {
+  return t;
 }
-const se = {}, le = {}, { resolveSchemaWithDefaultValue: qe, resolveSchemaToProps: ze, mappingSchemaToProps: Ue } = ae(se, le);
-function We(e = {}) {
-  function t(u, g, n, s) {
-    if (typeof n == "number")
-      return s[u].length === n;
-    if (typeof n == "object") {
-      const m = Object.keys(n)[0], i = n[m];
-      if (m === "not")
-        return Number(s[u].length) !== Number(i);
-      if (m === "moreThan")
-        return Number(s[u].length) >= Number(i);
-      if (m === "lessThan")
-        return Number(s[u].length) <= Number(i);
+function et(e = {}) {
+  function t(f, v, s, c) {
+    if (typeof s == "number")
+      return c[f].length === s;
+    if (typeof s == "object") {
+      const b = Object.keys(s)[0], i = s[b];
+      if (b === "not")
+        return Number(c[f].length) !== Number(i);
+      if (b === "moreThan")
+        return Number(c[f].length) >= Number(i);
+      if (b === "lessThan")
+        return Number(c[f].length) <= Number(i);
     }
     return !1;
   }
-  function r(u, g, n, s) {
-    return s[u] && s[u].propertyValue && String(s[u].propertyValue.value) === String(n);
+  function o(f, v, s, c) {
+    return c[f] && c[f].propertyValue && String(c[f].propertyValue.value) === String(s);
   }
-  const o = /* @__PURE__ */ new Map([
+  const r = /* @__PURE__ */ new Map([
     ["length", t],
-    ["getProperty", r]
+    ["getProperty", o]
   ]);
-  Object.keys(e).reduce((u, g) => (u.set(g, e[g]), u), o);
-  function v(u, g) {
-    const n = u;
-    return typeof g == "number" ? [{ target: n, operator: "length", param: null, value: Number(g) }] : typeof g == "boolean" ? [{ target: n, operator: "getProperty", param: u, value: !!g }] : typeof g == "object" ? Object.keys(g).map((s) => {
-      if (s === "length")
-        return { target: n, operator: "length", param: null, value: g[s] };
-      const m = s, i = g[s];
-      return { target: n, operator: "getProperty", param: m, value: i };
+  Object.keys(e).reduce((f, v) => (f.set(v, e[v]), f), r);
+  function g(f, v) {
+    const s = f;
+    return typeof v == "number" ? [{ target: s, operator: "length", param: null, value: Number(v) }] : typeof v == "boolean" ? [{ target: s, operator: "getProperty", param: f, value: !!v }] : typeof v == "object" ? Object.keys(v).map((c) => {
+      if (c === "length")
+        return { target: s, operator: "length", param: null, value: v[c] };
+      const b = c, i = v[c];
+      return { target: s, operator: "getProperty", param: b, value: i };
     }) : [];
   }
-  function k(u) {
-    return Object.keys(u).reduce((n, s) => {
-      const m = v(s, u[s]);
-      return n.push(...m), n;
+  function k(f) {
+    return Object.keys(f).reduce((s, c) => {
+      const b = g(c, f[c]);
+      return s.push(...b), s;
     }, []);
   }
-  function h(u, g) {
-    if (o.has(u.operator)) {
-      const n = o.get(u.operator);
-      return n && n(u.target, u.param, u.value, g) || !1;
+  function T(f, v) {
+    if (r.has(f.operator)) {
+      const s = r.get(f.operator);
+      return s && s(f.target, f.param, f.value, v) || !1;
     }
     return !1;
   }
-  function p(u, g) {
-    return k(u).reduce((m, i) => m && h(i, g), !0);
+  function m(f, v) {
+    return k(f).reduce((b, i) => b && T(i, v), !0);
   }
-  function F(u, g) {
-    const n = Object.keys(u), s = n.includes("allOf"), m = n.includes("anyOf"), i = s || m, b = (i ? u[i ? s ? "allOf" : "anyOf" : "allOf"] : [u]).map((l) => p(l, g));
-    return s ? !b.includes(!1) : b.includes(!0);
+  function x(f, v) {
+    const s = Object.keys(f), c = s.includes("allOf"), b = s.includes("anyOf"), i = c || b, u = (i ? f[i ? c ? "allOf" : "anyOf" : "allOf"] : [f]).map((S) => m(S, v));
+    return c ? !u.includes(!1) : u.includes(!0);
   }
-  return { parseValueSchema: F };
+  return { parseValueSchema: x };
 }
-const Ge = {
-  convertTo: (e, t, r, o) => {
-    e.appearance || (e.appearance = {}), e.appearance[t] = r;
+const tt = {
+  convertTo: (e, t, o, r) => {
+    e.appearance || (e.appearance = {}), e.appearance[t] = o;
   },
-  convertFrom: (e, t, r) => e.appearance ? e.appearance[t] : e[t]
-}, Je = {
-  convertFrom: (e, t, r) => e.buttons && e.buttons.length ? `共 ${e.buttons.length} 项` : "无"
-}, Qe = {
-  convertTo: (e, t, r, o) => {
-    e.editor && (e.editor[t] = r);
+  convertFrom: (e, t, o) => e.appearance ? e.appearance[t] : e[t]
+}, ot = {
+  convertFrom: (e, t, o) => e.buttons && e.buttons.length ? `共 ${e.buttons.length} 项` : "无"
+}, rt = {
+  convertTo: (e, t, o, r) => {
+    e.editor && (e.editor[t] = o);
   },
-  convertFrom: (e, t, r) => e.editor && Object.prototype.hasOwnProperty.call(e.editor, t) ? e.editor[t] : e[t]
-}, Xe = {
+  convertFrom: (e, t, o) => e.editor && Object.prototype.hasOwnProperty.call(e.editor, t) ? e.editor[t] : e[t]
+}, nt = {
   button: { type: "button", name: "按钮" },
   "response-toolbar": { type: "response-toolbar", name: "工具栏" },
   "response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
@@ -388,6 +316,7 @@ const Ge = {
   tabs: { type: "tabs", name: "标签页" },
   "tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" },
   "tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮" },
+  "drawer-toolbar-item": { type: "drawer-toolbar-item", name: "抽屉工具栏按钮" },
   "html-template": { type: "html-template", name: "模板容器" },
   "time-picker": { type: "time-picker", name: "时间选择" },
   section: { type: "section", name: "分组面板" },
@@ -400,6 +329,7 @@ const Ge = {
   "page-header": { type: "page-header", name: "页头" },
   "page-footer": { type: "page-footer", name: "页脚" },
   "tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏" },
+  "drawer-toolbar": { type: "drawer-toolbar", name: "抽屉工具栏" },
   fieldset: { type: "fieldset", name: "分组" },
   "query-solution": { type: "query-solution", name: "筛选方案" },
   drawer: { type: "drawer", name: "抽屉" },
@@ -412,26 +342,26 @@ const Ge = {
   "discussion-editor": { type: "discussion-editor", name: "评论编辑区" },
   "discussion-list": { type: "discussion-list", name: "评论列表" },
   comment: { type: "comment", name: "评论区" },
-  "rich-text-editor": { type: "rich-text-editor", name: "富文本编辑器", icon: "rich-text-box" },
+  "rich-text-editor": { type: "rich-text-editor", name: "富文本", icon: "rich-text-box" },
   calendar: { type: "calendar", name: "日历", icon: "date-picker" }
-}, Ye = {
-  convertFrom: (e, t, r) => {
-    var v;
-    const o = e.editor && e.editor[t] ? e.editor[t] : e[t];
-    return ((v = Xe[o]) == null ? void 0 : v.name) || o;
+}, it = {
+  convertFrom: (e, t, o) => {
+    var g;
+    const r = e.editor && e.editor[t] ? e.editor[t] : e[t];
+    return ((g = nt[r]) == null ? void 0 : g.name) || r;
   }
-}, Ze = {
-  convertTo: (e, t, r, o) => {
+}, at = {
+  convertTo: (e, t, o, r) => {
     e[t] = e[t];
   },
-  convertFrom: (e, t, r) => e.editor ? r.getRealEditorType(e.editor.type) : ""
-}, Ke = {
-  convertTo: (e, t, r, o) => {
-    (e.type === "data-grid-column" || e.type === "tree-grid-column") && (e.formatter ? e.formatter[t] = r : e.formatter = {
-      [t]: r
+  convertFrom: (e, t, o) => e.editor ? o.getRealEditorType(e.editor.type) : ""
+}, st = {
+  convertTo: (e, t, o, r) => {
+    (e.type === "data-grid-column" || e.type === "tree-grid-column") && (e.formatter ? e.formatter[t] = o : e.formatter = {
+      [t]: o
     });
   },
-  convertFrom: (e, t, r) => {
+  convertFrom: (e, t, o) => {
     if (e.formatter) {
       if (t === "trueText")
         return e.formatter.trueText;
@@ -456,11 +386,11 @@ const Ge = {
     }
     return "none";
   }
-}, et = {
-  convertTo: (e, t, r, o) => {
-    e.command ? e.command[t] = r : e.command = {
-      [t]: r
-    }, t === "enableType" && r === "default" && (e.command.enable = !0, e.command.commands = [
+}, lt = {
+  convertTo: (e, t, o, r) => {
+    e.command ? e.command[t] = o : e.command = {
+      [t]: o
+    }, t === "enableType" && o === "default" && (e.command.enable = !0, e.command.commands = [
       {
         text: "编辑",
         type: "primary",
@@ -471,45 +401,59 @@ const Ge = {
         type: "danger",
         command: "remove"
       }
-    ]), t === "enableType" && r === "custom" && (e.command.enable = !0, e.command.commands = [
+    ]), t === "enableType" && o === "custom" && (e.command.enable = !0, e.command.commands = [
       {
         value: "add",
-        text: "增加",
+        text: {
+          en: "add",
+          "zh-CHS": "增加",
+          "zh-CHT": "增加"
+        },
         type: "link"
       },
       {
         value: "edit",
-        text: "编辑",
+        text: {
+          en: "edit",
+          "zh-CHS": "编辑",
+          "zh-CHT": "編輯"
+        },
         type: "danger"
       },
       {
         value: "remove",
-        text: "删除",
+        text: {
+          en: "remove",
+          "zh-CHS": "删除",
+          "zh-CHT": "刪除"
+        },
         type: "remove"
       }
-    ]), t === "enableType" && r === "unable" && (e.command.enable = !1);
+    ]), t === "enableType" && o === "unable" && (e.command.enable = !1);
   },
-  convertFrom: (e, t, r) => {
-    var o, v;
+  convertFrom: (e, t, o) => {
+    var r, g;
     if (e.command) {
       if (t === "enableType") {
-        const k = (v = (o = e.command) == null ? void 0 : o.commands) == null ? void 0 : v.find((h) => h.command === "edit" && h.type === "primary");
+        const k = (g = (r = e.command) == null ? void 0 : r.commands) == null ? void 0 : g.find((T) => T.command === "edit" && T.type === "primary");
         return e.command.enable ? k ? "default" : "custom" : "unable";
       }
       if (t === "commands")
         return e.command.enableType === "custom" ? e.command.commands : [];
       if (t === "formatter")
         return e.command.formatter;
+      if (t === "count")
+        return e.command.count;
     }
     return "";
   }
-}, tt = {
-  convertTo: (e, t, r, o) => {
-    e.column ? e.column[t] = r : e.column = {
-      [t]: r
-    }, t === "fitColumns" && r && (e.column.fitMode || (e.column.fitMode = "average"));
+}, ct = {
+  convertTo: (e, t, o, r) => {
+    e.column ? e.column[t] = o : e.column = {
+      [t]: o
+    }, t === "fitColumns" && o && (e.column.fitMode || (e.column.fitMode = "average"));
   },
-  convertFrom: (e, t, r) => {
+  convertFrom: (e, t, o) => {
     if (e.column) {
       if (t === "fitColumns")
         return e.column.fitColumns;
@@ -518,27 +462,27 @@ const Ge = {
     }
     return "";
   }
-}, rt = {
-  convertTo: (e, t, r, o) => {
-    e.summary ? e.summary[t] = r : e.summary = {
-      [t]: r
-    }, t === "enable" && r && (e.summary ? e.summary.groupFields || (e.summary.groupFields = []) : e.summary = {
-      enable: r,
+}, ut = {
+  convertTo: (e, t, o, r) => {
+    e.summary ? e.summary[t] = o : e.summary = {
+      [t]: o
+    }, t === "enable" && o && (e.summary ? e.summary.groupFields || (e.summary.groupFields = []) : e.summary = {
+      enable: o,
       groupFields: []
     });
   },
-  convertFrom: (e, t, r) => e.summary && t === "enable" ? e.summary.enable : e.type === "data-grid-column" ? e.enableSummary === void 0 ? !1 : e.enableSummary : ""
-}, ot = {
-  convertTo: (e, t, r, o) => {
-    e.group ? e.group[t] = r : e.group = {
-      [t]: r
-    }, t === "enable" && r && (e.group ? e.group.groupFields || (e.group.groupFields = []) : e.group = {
-      enable: r,
+  convertFrom: (e, t, o) => e.summary && t === "enable" ? e.summary.enable : e.type === "data-grid-column" ? e.enableSummary === void 0 ? !1 : e.enableSummary : ""
+}, dt = {
+  convertTo: (e, t, o, r) => {
+    e.group ? e.group[t] = o : e.group = {
+      [t]: o
+    }, t === "enable" && o && (e.group ? e.group.groupFields || (e.group.groupFields = []) : e.group = {
+      enable: o,
       groupFields: [],
       showSummary: !1
     });
   },
-  convertFrom: (e, t, r) => {
+  convertFrom: (e, t, o) => {
     if (e.group) {
       if (t === "enable")
         return e.group.enable;
@@ -546,76 +490,76 @@ const Ge = {
         return e.group.showSummary;
     }
   }
-}, nt = {
+}, ft = {
   convertFrom: (e, t) => e.binding ? e.binding.path : "",
-  convertTo: (e, t, r) => {
-    if (r && r.length > 0) {
-      const o = r[0];
-      e.binding || (e.binding = {}), e.binding.type = "Form", e.binding.path = o.bindingField, e.binding.field = o.id, e.binding.fullPath = o.path, e.path = o.bindingPath;
+  convertTo: (e, t, o) => {
+    if (o && o.length > 0) {
+      const r = o[0];
+      e.binding || (e.binding = {}), e.binding.type = "Form", e.binding.path = r.bindingField, e.binding.field = r.id, e.binding.fullPath = r.path, e.path = r.bindingPath;
     }
   }
-}, it = {
-  convertTo: (e, t, r, o) => {
-    e.pagination || (e.pagination = {}), e.pagination[t] = r;
+}, pt = {
+  convertTo: (e, t, o, r) => {
+    e.pagination || (e.pagination = {}), e.pagination[t] = o;
   },
-  convertFrom: (e, t, r) => e.pagination ? e.pagination[t] : e[t]
-}, at = {
-  convertTo: (e, t, r, o) => {
-    e.rowNumber || (e.rowNumber = {}), e.rowNumber[t] = r;
+  convertFrom: (e, t, o) => e.pagination ? e.pagination[t] : e[t]
+}, mt = {
+  convertTo: (e, t, o, r) => {
+    e.rowNumber || (e.rowNumber = {}), e.rowNumber[t] = o;
   },
-  convertFrom: (e, t, r) => e.rowNumber ? e.rowNumber[t] : e[t]
-}, st = {
-  convertTo: (e, t, r, o) => {
-    e.selection || (e.selection = {}), e.selection[t] = r;
+  convertFrom: (e, t, o) => e.rowNumber ? e.rowNumber[t] : e[t]
+}, bt = {
+  convertTo: (e, t, o, r) => {
+    e.selection || (e.selection = {}), e.selection[t] = o;
   },
-  convertFrom: (e, t, r) => {
-    var o, v;
-    return t === "showCheckbox" ? (o = e.selection) != null && o.multiSelect ? !0 : (v = e.selection) == null ? void 0 : v.showCheckbox : e.selection ? e.selection[t] : e[t];
+  convertFrom: (e, t, o) => {
+    var r, g;
+    return t === "showCheckbox" ? (r = e.selection) != null && r.multiSelect ? !0 : (g = e.selection) == null ? void 0 : g.showCheckbox : e.selection ? e.selection[t] : e[t];
   }
-}, lt = {
-  convertFrom: (e, t, r) => e[t] && e[t].length ? `共 ${e[t].length} 项` : ""
-}, ct = {
+}, gt = {
+  convertFrom: (e, t, o) => e[t] && e[t].length ? `共 ${e[t].length} 项` : ""
+}, vt = {
   convertFrom: (e, t) => e[t] || "",
-  convertTo: (e, t, r) => {
-    e[t] = r;
+  convertTo: (e, t, o) => {
+    e[t] = o;
   }
-}, ut = {
-  convertTo: (e, t, r, o) => {
-    e.size || (e.size = {}), e.size[t] = r;
+}, yt = {
+  convertTo: (e, t, o, r) => {
+    e.size || (e.size = {}), e.size[t] = o;
   },
-  convertFrom: (e, t, r) => e.size ? e.size[t] : e[t]
-}, dt = {
-  convertFrom: (e, t, r) => {
-    var o, v;
-    return (o = e.formatter) != null && o.data && t === "formatterEnumData" && !e.formatterEnumData ? (v = e.formatter) == null ? void 0 : v.data : e.formatterEnumData;
+  convertFrom: (e, t, o) => e.size ? e.size[t] : e[t]
+}, ht = {
+  convertFrom: (e, t, o) => {
+    var r, g;
+    return (r = e.formatter) != null && r.data && t === "formatterEnumData" && !e.formatterEnumData ? (g = e.formatter) == null ? void 0 : g.data : e.formatterEnumData;
   }
-}, ft = {
-  convertTo: (e, t, r, o) => {
-    e.sort || (e.sort = {}), e.sort[t] = r;
+}, wt = {
+  convertTo: (e, t, o, r) => {
+    e.sort || (e.sort = {}), e.sort[t] = o;
   },
-  convertFrom: (e, t, r) => {
-    var o, v;
+  convertFrom: (e, t, o) => {
+    var r, g;
     if (t === "mode")
-      return ((o = e.sort) == null ? void 0 : o.mode) || "client";
+      return ((r = e.sort) == null ? void 0 : r.mode) || "client";
     if (t === "multiSort")
-      return !!((v = e.sort) != null && v.multiSort);
+      return !!((g = e.sort) != null && g.multiSort);
   }
-}, mt = {
-  convertTo: (e, t, r, o) => {
-    e.filter || (e.filter = {}), e.filter[t] = r;
+}, Ct = {
+  convertTo: (e, t, o, r) => {
+    e.filter || (e.filter = {}), e.filter[t] = o;
   },
-  convertFrom: (e, t, r) => {
-    var o;
+  convertFrom: (e, t, o) => {
+    var r;
     if (t === "mode")
-      return ((o = e.filter) == null ? void 0 : o.mode) || "client";
+      return ((r = e.filter) == null ? void 0 : r.mode) || "client";
   }
-}, pt = {
-  convertTo: (e, t, r, o) => {
-    e.rowOption ? e.rowOption[t] = r : e.rowOption = {
-      [t]: r
+}, Tt = {
+  convertTo: (e, t, o, r) => {
+    e.rowOption ? e.rowOption[t] = o : e.rowOption = {
+      [t]: o
     };
   },
-  convertFrom: (e, t, r) => {
+  convertFrom: (e, t, o) => {
     if (e.rowOption) {
       if (t === "customRowStyle")
         return e.rowOption.customRowStyle;
@@ -624,44 +568,44 @@ const Ge = {
     }
     return "";
   }
-}, vt = {
-  convertTo: (e, t, r, o) => {
-    (e.type === "data-grid-column" || e.type === "tree-grid-column") && (e[t] = r, t === "columnTemplateType" && r === "hyperlink" && (e.onClickLinkCommand ? e.columnTemplate = `
+}, kt = {
+  convertTo: (e, t, o, r) => {
+    (e.type === "data-grid-column" || e.type === "tree-grid-column") && (e[t] = o, t === "columnTemplateType" && o === "hyperlink" && (e.onClickLinkCommand ? e.columnTemplate = `
     <span class="f-pretend-link f-cursor-pointer"
     @click="(ctx)=>viewModel.current.${e.onClickLinkCommand || ""}({id: rowData.id,context: ctx})">
     {{rowData.${e.field}}}
     </span>` : e.columnTemplate = `
                     <span class="f-pretend-link f-cursor-pointer">
                     {{rowData.${e.field}}}
-                    </span>`), t === "columnTemplateType" && r === "default" && (e.columnTemplate = ""), t === "columnTemplateType" && r === "custom" && (e.columnTemplate = ""));
+                    </span>`), t === "columnTemplateType" && o === "default" && (e.columnTemplate = ""), t === "columnTemplateType" && o === "custom" && (e.columnTemplate = ""));
   },
-  convertFrom: (e, t, r) => t === "columnTemplate" ? e.columnTemplate : t === "columnTemplateType" ? e.columnTemplateType ? e.columnTemplateType || "default" : e.columnTemplate && !e.onClickLinkCommand ? "custom" : e.columnTemplate && e.onClickLinkCommand ? "hyperlink" : "default" : ""
+  convertFrom: (e, t, o) => t === "columnTemplate" ? e.columnTemplate : t === "columnTemplateType" ? e.columnTemplateType ? e.columnTemplateType || "default" : e.columnTemplate && !e.onClickLinkCommand ? "custom" : e.columnTemplate && e.onClickLinkCommand ? "hyperlink" : "default" : ""
 };
-function ce(e, t, r) {
-  const o = /* @__PURE__ */ new Map([
-    ["/converter/appearance.converter", Ge],
-    ["/converter/buttons.converter", Je],
-    ["/converter/property-editor.converter", Qe],
-    ["/converter/items-count.converter", lt],
-    ["/converter/type.converter", Ye],
-    ["/converter/change-editor.converter", Ze],
-    ["/converter/change-formatter.converter", Ke],
-    ["/converter/column-command.converter", et],
-    ["/converter/column-option.converter", tt],
-    ["/converter/summary.converter", rt],
-    ["/converter/group.converter", ot],
-    ["/converter/form-group-label.converter", ct],
-    ["/converter/field-selector.converter", nt],
-    ["/converter/pagination.converter", it],
-    ["/converter/row-number.converter", at],
-    ["/converter/grid-selection.converter", st],
-    ["/converter/size.converter", ut],
-    ["/converter/change-formatter-enum.converter", dt],
-    ["/converter/grid-sort.converter", ft],
-    ["/converter/grid-filter.converter", mt],
-    ["/converter/row-option.converter", pt],
-    ["/converter/change-formatter-type.converter", vt]
-  ]), v = /* @__PURE__ */ new Map([
+function ce(e, t, o) {
+  const r = /* @__PURE__ */ new Map([
+    ["/converter/appearance.converter", tt],
+    ["/converter/buttons.converter", ot],
+    ["/converter/property-editor.converter", rt],
+    ["/converter/items-count.converter", gt],
+    ["/converter/type.converter", it],
+    ["/converter/change-editor.converter", at],
+    ["/converter/change-formatter.converter", st],
+    ["/converter/column-command.converter", lt],
+    ["/converter/column-option.converter", ct],
+    ["/converter/summary.converter", ut],
+    ["/converter/group.converter", dt],
+    ["/converter/form-group-label.converter", vt],
+    ["/converter/field-selector.converter", ft],
+    ["/converter/pagination.converter", pt],
+    ["/converter/row-number.converter", mt],
+    ["/converter/grid-selection.converter", bt],
+    ["/converter/size.converter", yt],
+    ["/converter/change-formatter-enum.converter", ht],
+    ["/converter/grid-sort.converter", wt],
+    ["/converter/grid-filter.converter", Ct],
+    ["/converter/row-option.converter", Tt],
+    ["/converter/change-formatter-type.converter", kt]
+  ]), g = /* @__PURE__ */ new Map([
     ["string", { type: "input-group", enableClear: !1 }],
     ["boolean", {
       type: "combo-list",
@@ -685,124 +629,201 @@ function ce(e, t, r) {
     ["array", { type: "button-edit" }],
     ["number", { type: "number-spinner", placeholder: "" }],
     ["events-editor", { type: "events-editor", hide: !0 }]
-  ]), k = We();
-  function h(i, a) {
-    return () => k.parseValueSchema(i, a);
+  ]), k = et();
+  function T(i, n) {
+    return () => k.parseValueSchema(i, n);
   }
-  function p(i, a, c) {
-    return i.includes("visible") && a.visible !== void 0 ? typeof a.visible == "boolean" ? () => !!a.visible : a.visible === void 0 ? !0 : h(a.visible, c) : () => !0;
+  function m(i, n, l) {
+    return i.includes("visible") && n.visible !== void 0 ? typeof n.visible == "boolean" ? () => !!n.visible : n.visible === void 0 ? !0 : T(n.visible, l) : () => !0;
   }
-  function F(i, a, c) {
-    return i.includes("readonly") && a.readonly !== void 0 ? typeof a.readonly == "boolean" ? () => !!a.readonly : h(a.readonly, c) : () => !1;
+  function x(i, n, l) {
+    return i.includes("readonly") && n.readonly !== void 0 ? typeof n.readonly == "boolean" ? () => !!n.readonly : T(n.readonly, l) : () => !1;
   }
-  function u(i, a) {
-    const c = i.$converter || a;
-    return typeof c == "string" && c && o.has(c) ? o.get(c) || null : c || null;
+  function f(i, n) {
+    const l = i.$converter || n;
+    return typeof l == "string" && l && r.has(l) ? r.get(l) || null : l || null;
   }
-  function g(i, a, c, b, w, l = "", y = "") {
-    return Object.keys(i).map((C) => {
-      const T = N(1), D = C, d = i[C], M = Object.keys(d), L = d.title, I = d.type, B = v.get(I) || { type: "input-group", enableClear: !1 }, j = d.editor ? Object.assign({}, B, d.editor) : Object.assign({}, B), V = p(M, d, a), A = F(M, d, a);
-      j.readonly = j.readonly === void 0 ? A() : j.readonly;
-      const _ = d.type === "cascade" ? g(d.properties, a, c, b, w, l, y) : [], J = !0;
-      let E = u(d, y);
-      const S = R({
+  function v(i, n, l, u, h, S = "", $ = "") {
+    return Object.keys(i).map((a) => {
+      const y = M(1), R = a, w = i[a], d = Object.keys(w), B = w.title, E = w.type, N = g.get(E) || { type: "input-group", enableClear: !1 }, O = w.editor ? Object.assign({}, N, w.editor) : Object.assign({}, N), L = m(d, w, n), A = x(d, w, n);
+      O.readonly = O.readonly === void 0 ? A() : O.readonly;
+      const V = w.type === "cascade" ? v(w.properties, n, l, u, h, S, $) : [], q = !0;
+      let C = f(w, $);
+      const P = D({
         get() {
-          if (T.value) {
-            if (["class", "style"].find((he) => he === D) && !E && (E = o.get("/converter/appearance.converter") || null), E && E.convertFrom)
-              return E.convertFrom(c, C, w, l);
-            const H = c[C];
-            return Object.prototype.hasOwnProperty.call(d, "defaultValue") && (H === void 0 || typeof H == "string" && H === "") ? d.type === "boolean" ? d.defaultValue : d.defaultValue || "" : H;
+          if (y.value) {
+            if (["class", "style"].find((ke) => ke === R) && !C && (C = r.get("/converter/appearance.converter") || null), C && C.convertFrom)
+              return C.convertFrom(l, a, h, S);
+            const H = l[a];
+            return Object.prototype.hasOwnProperty.call(w, "defaultValue") && (H === void 0 || typeof H == "string" && H === "") ? w.type === "boolean" ? w.defaultValue : w.defaultValue || "" : H;
           }
           return null;
         },
         set(H) {
-          T.value += 1, E && E.convertTo ? (E.convertTo(b, C, H, w, l), E.convertTo(c, C, H, w, l)) : (b[C] = H, c[C] = H);
+          y.value += 1, C && C.convertTo ? (C.convertTo(u, a, H, h, S), C.convertTo(l, a, H, h, S)) : (u[a] = H, l[a] = H);
         }
-      }), { refreshPanelAfterChanged: x, description: $, isExpand: O, parentPropertyID: ye } = d, Y = { propertyID: D, propertyName: L, propertyType: I, propertyValue: S, editor: j, visible: V, readonly: A, cascadeConfig: _, hideCascadeTitle: J, refreshPanelAfterChanged: x, description: $, isExpand: O, parentPropertyID: ye };
-      return a[D] = Y, Y;
+      }), { refreshPanelAfterChanged: I, description: j, isExpand: Ce, parentPropertyID: Te } = w, X = { propertyID: R, propertyName: B, propertyType: E, propertyValue: P, editor: O, visible: L, readonly: A, cascadeConfig: V, hideCascadeTitle: q, refreshPanelAfterChanged: I, description: j, isExpand: Ce, parentPropertyID: Te };
+      return n[R] = X, X;
     });
   }
-  function n(i, a, c = {}) {
-    const b = {}, w = e[i];
-    return w && w.categories ? Object.keys(w.categories).map((y) => {
-      const P = w.categories[y], C = P == null ? void 0 : P.title, T = g(P.properties || {}, b, {}, c, a);
-      return { categoryId: y, categoryName: C, properties: T };
+  function s(i, n, l = {}) {
+    const u = {}, h = e[i];
+    return h && h.categories ? Object.keys(h.categories).map(($) => {
+      const F = h.categories[$], a = F == null ? void 0 : F.title, y = v(F.properties || {}, u, {}, l, n);
+      return { categoryId: $, categoryName: a, properties: y };
     }) : [];
   }
-  function s(i, a, c, b, w = "") {
-    const l = a.$ref.schema, y = a.$ref.converter, P = c[l], C = P.type, T = r(P), D = {}, d = e[C];
-    if (d && d.categories) {
-      const M = d.categories[i], L = M == null ? void 0 : M.title;
-      y && Object.keys(M.properties).forEach((j) => {
-        M.properties[j].$converter = y;
+  function c(i, n, l, u, h = "") {
+    const S = n.$ref.schema, $ = n.$ref.converter, F = l[S], a = F.type, y = o(F), R = {}, w = e[a];
+    if (w && w.categories) {
+      const d = w.categories[i], B = d == null ? void 0 : d.title;
+      $ && Object.keys(d.properties).forEach((O) => {
+        d.properties[O].$converter = $;
       });
-      const I = (M == null ? void 0 : M.properties) || {}, B = g(I, D, T, P, b, w);
-      return { categoryId: i, categoryName: L, properties: B };
+      const E = (d == null ? void 0 : d.properties) || {}, N = v(E, R, y, F, u, h);
+      return { categoryId: i, categoryName: B, properties: N };
     }
     return { categoryId: i, categoryName: "", properties: [] };
   }
-  function m(i, a, c, b, w) {
-    const l = i.type, y = r(i), P = {};
-    let C = w || e[l];
-    if (C && Object.keys(C).length === 0 && c && c.getPropConfig && (C = c.getPropConfig(b)), C && C.categories) {
-      const T = [];
-      return Object.keys(C.categories).map((D) => {
-        const d = C.categories[D];
+  function b(i, n, l, u, h) {
+    const S = i.type, $ = o(i), F = {};
+    let a = h || e[S];
+    if (!(a && Object.keys(a).length > 0) && l && l.getPropConfig && (a = l.getPropConfig(u)), a && a.categories) {
+      const R = [];
+      return Object.keys(a.categories).map((w) => {
+        const d = a.categories[w];
         if (d.$ref) {
-          T.push(s(D, d, i, a, b));
+          R.push(c(w, d, i, n, u));
           return;
         }
-        const M = d == null ? void 0 : d.title, L = d == null ? void 0 : d.tabId, I = d == null ? void 0 : d.tabName, B = d == null ? void 0 : d.hide, j = d == null ? void 0 : d.hideTitle, V = g(d.properties || {}, P, y, i, a, b, d.$converter), { setPropertyRelates: A } = d, _ = d == null ? void 0 : d.parentPropertyID;
-        T.push({ categoryId: D, categoryName: M, tabId: L, tabName: I, hide: B, properties: V, hideTitle: j, setPropertyRelates: A, parentPropertyID: _ });
-      }), T;
+        const B = d == null ? void 0 : d.title, E = d == null ? void 0 : d.tabId, N = d == null ? void 0 : d.tabName, O = d == null ? void 0 : d.hide, L = d == null ? void 0 : d.hideTitle, A = v(d.properties || {}, F, $, i, n, u, d.$converter), { setPropertyRelates: V } = d, q = d == null ? void 0 : d.parentPropertyID;
+        R.push({ categoryId: w, categoryName: B, tabId: E, tabName: N, hide: O, properties: A, hideTitle: L, setPropertyRelates: V, parentPropertyID: q });
+      }), R;
     }
     return [];
   }
   return {
-    getPropertyConfigBySchema: m,
-    getPropertyConfigByType: n,
-    propertyConverterMap: o
+    getPropertyConfigBySchema: b,
+    getPropertyConfigByType: s,
+    propertyConverterMap: r
   };
 }
-const ue = {}, de = {};
-ce(ue, de, qe);
-const fe = {}, me = {}, { resolveSchemaWithDefaultValue: gt } = ae(fe, me), pe = {}, ve = {};
-ce(pe, ve, gt);
-function bt(e, t, r = /* @__PURE__ */ new Map(), o = (h, p, F, u) => p, v = {}, k = (h) => h) {
-  return se[t.title] = t, le[t.title] = o, ue[t.title] = v, de[t.title] = k, fe[t.title] = t, me[t.title] = o, pe[t.title] = v, ve[t.title] = k, (h = {}, p = !0) => {
-    if (!p)
-      return Ue(h, r);
-    const F = ze(h, t, r), u = Object.keys(e).reduce((g, n) => (g[n] = e[n].default, g), {});
-    return Object.assign(u, F);
+function ue(e, t) {
+  let o;
+  function r(s) {
+    const { properties: c, title: b, ignore: i } = s, n = i && Array.isArray(i), l = Object.keys(c).reduce((u, h) => ((!n || !i.find((S) => S === h)) && (u[h] = c[h].type === "object" && c[h].properties ? r(c[h]) : K(c[h].default)), u), {});
+    if (b && (!n || !i.find((u) => u === "id"))) {
+      const u = b.toLowerCase().replace(/-/g, "_");
+      l.id = `${u}_${Math.random().toString().slice(2, 6)}`;
+    }
+    return l;
+  }
+  function g(s) {
+    const { properties: c, title: b, required: i } = s;
+    if (i && Array.isArray(i)) {
+      const n = i.reduce((l, u) => (l[u] = c[u].type === "object" && c[u].properties ? r(c[u]) : K(c[u].default), l), {});
+      if (b && i.find((l) => l === "id")) {
+        const l = b.toLowerCase().replace(/-/g, "_");
+        n.id = `${l}_${Math.random().toString().slice(2, 6)}`;
+      }
+      return n;
+    }
+    return {
+      type: b
+    };
+  }
+  function k(s, c = {}, b) {
+    const i = e[s];
+    if (i) {
+      let n = g(i);
+      const l = t[s];
+      return n = l ? l({ getSchemaByType: k }, n, c, b) : n, o != null && o.appendIdentifyForNewControl && o.appendIdentifyForNewControl(n), n;
+    }
+    return null;
+  }
+  function T(s, c) {
+    const b = r(c);
+    return Object.keys(b).reduce((i, n) => (Object.prototype.hasOwnProperty.call(s, n) && (i[n] && Y(i[n]) && Y(s[n] || !s[n]) ? Object.assign(i[n], s[n] || {}) : i[n] = s[n]), i), b), b;
+  }
+  function m(s, c) {
+    return Object.keys(s).filter((i) => s[i] != null).reduce((i, n) => {
+      if (c.has(n)) {
+        const l = c.get(n);
+        if (typeof l == "string")
+          i[l] = s[n];
+        else {
+          const u = l(n, s[n], s);
+          Object.assign(i, u);
+        }
+      } else
+        i[n] = s[n];
+      return i;
+    }, {});
+  }
+  function x(s, c, b = /* @__PURE__ */ new Map()) {
+    const i = T(s, c);
+    return m(i, b);
+  }
+  function f(s) {
+    var b;
+    const c = s.type;
+    if (c) {
+      const i = e[c];
+      if (!i)
+        return s;
+      const n = T(s, i), l = ((b = s.editor) == null ? void 0 : b.type) || "";
+      if (l) {
+        const u = e[l], h = T(s.editor, u);
+        n.editor = h;
+      }
+      return n;
+    }
+    return s;
+  }
+  function v(s) {
+    o = s;
+  }
+  return { getSchemaByType: k, resolveSchemaWithDefaultValue: f, resolveSchemaToProps: x, mappingSchemaToProps: m, setDesignerContext: v };
+}
+const de = {}, fe = {}, { resolveSchemaWithDefaultValue: St } = ue(de, fe), pe = {}, me = {};
+ce(pe, me, St);
+const be = {}, ge = {}, { resolveSchemaWithDefaultValue: xt, resolveSchemaToProps: Ft, mappingSchemaToProps: Pt } = ue(be, ge), ve = {}, ye = {};
+ce(ve, ye, xt);
+function $t(e, t, o = /* @__PURE__ */ new Map(), r = (T, m, x, f) => m, g = {}, k = (T) => T) {
+  return be[t.title] = t, ge[t.title] = r, ve[t.title] = g, ye[t.title] = k, de[t.title] = t, fe[t.title] = r, pe[t.title] = g, me[t.title] = k, (T = {}, m = !0) => {
+    if (!m)
+      return Pt(T, o);
+    const x = Ft(T, t, o), f = Object.keys(e).reduce((v, s) => (v[s] = e[s].default, v), {});
+    return Object.assign(f, x);
   };
 }
-function yt(e, t) {
+function Rt(e, t) {
   if (!e || e.length < 1)
     return null;
-  for (const r of e) {
-    if (r.id === t)
-      return r;
-    if (r.children) {
-      const o = r.children.find((v) => v.id === t);
-      if (o)
-        return o;
+  for (const o of e) {
+    if (o.id === t)
+      return o;
+    if (o.children) {
+      const r = o.children.find((g) => g.id === t);
+      if (r)
+        return r;
     }
   }
   return null;
 }
-function ht() {
-  function e(t, r) {
-    const { footerToolbar: o, headerToolbar: v } = t, k = ((o == null ? void 0 : o.buttons) || []).concat((v == null ? void 0 : v.buttons) || []);
+function Dt() {
+  function e(t, o) {
+    const { footerToolbar: r, headerToolbar: g } = t, k = ((r == null ? void 0 : r.buttons) || []).concat((g == null ? void 0 : g.buttons) || []);
     if (!k || k.length < 1)
       return null;
-    const [h, p] = r.payloads, F = yt(k, p);
-    return F ? F.onClick || F.click : null;
+    const [T, m] = o.payloads, x = Rt(k, m);
+    return x ? x.onClick || x.click : null;
   }
   return {
     resolve: e
   };
 }
-const X = {
+const Q = {
   id: { type: String, required: !0 },
   /** 背景色 */
   backgroundColor: { type: String, default: "#fff" },
@@ -811,7 +832,8 @@ const X = {
    */
   beforeClose: { type: Function, default: () => !0 },
   /**
-   * 自定义抽屉样式
+   * 自定义抽屉样式 
+   * @deprecated  请使用 customClass
    */
   class: { type: String, default: "" },
   /**
@@ -851,176 +873,211 @@ const X = {
   footerTemplate: { type: Object, default: null },
   footerToolbar: { type: Object, default: {} },
   footerHeight: { type: Number, default: 60 },
-  buttons: { type: Array, default: [] }
+  buttons: { type: Array, default: [] },
+  customClass: { type: String, default: "" },
+  customStyle: { type: String, default: "" }
 };
-bt(X, ne, oe, ie);
-const wt = ht();
-function Ct() {
+$t(Q, ae, ie, se);
+const Mt = Dt();
+function Et() {
   return { drawerLocale: {
     cancel: ee.getLocaleValue("drawer.cancel") || "取消",
     confirm: ee.getLocaleValue("drawer.confirm") || "确定"
   } };
 }
-const Tt = /* @__PURE__ */ te({
+const jt = /* @__PURE__ */ oe({
   name: "FDrawer",
-  props: X,
+  props: Q,
   emits: ["afterClose", "update:modelValue", "click"],
   setup(e, t) {
-    Ct();
-    const r = N(e.modelValue), o = N(e.buttons), v = R(() => ({
-      "f-drawer": !0,
+    Et();
+    const o = M(e.modelValue), r = M(e.buttons), g = D(() => ({
+      "f-utils-absolute-all f-drawer": !0,
       // 在某个DOM内部打开抽屉
       "f-drawer-inline": typeof e.host == "string" ? e.host !== "body" : document.querySelector(e.host) !== document.body
-    })), k = R(() => ({
+    })), k = D(() => ({
       opacity: e.transparent ? 0 : 1
-    })), h = R(() => {
-      const l = {};
+    })), T = D(() => {
+      const a = {};
       return e.maskClass && e.maskClass.split(" ").forEach((y) => {
-        l[y] = !0;
+        a[y] = !0;
       }), {
-        "f-drawer-mask": !0,
-        ...l
+        "f-drawer-mask f-utils-absolute-all": !0,
+        ...a
       };
-    }), p = R(() => {
-      const l = {};
-      return e.maskClass && e.class.split(" ").forEach((y) => {
-        l[y] = !0;
+    }), m = D(() => {
+      const a = {};
+      return e.customClass && e.customClass.split(" ").forEach((y) => {
+        a[y] = !0;
       }), {
         "f-drawer-wrapper": !0,
         [`f-drawer-wrapper-${e.position}`]: !0,
-        ...l
+        ...a
+      };
+    }), x = D(() => {
+      const a = e.width;
+      return typeof a == "string" ? a : typeof a == "number" ? `${a}px` : "20%";
+    }), f = D(() => {
+      const a = e.height;
+      return typeof a == "string" ? a : typeof a == "number" ? `${a}px` : "20%";
+    }), v = D(() => {
+      let a = "-6px 0";
+      switch (e.position) {
+        case "left":
+          a = "6px 0";
+          break;
+        case "right":
+          a = "-6px 0";
+          break;
+        case "top":
+          a = "0 6px";
+          break;
+        case "bottom":
+          a = "0 -6px";
+          break;
+      }
+      const y = {
+        width: x.value,
+        height: f.value,
+        backgroundColor: e.backgroundColor,
+        maxWidth: "100%"
       };
-    }), F = R(() => {
-      const l = e.width;
-      return typeof l == "string" ? l : typeof l == "number" ? `${l}px` : "20%";
-    }), u = R(() => {
-      const l = e.height;
-      return typeof l == "string" ? l : typeof l == "number" ? `${l}px` : "20%";
-    }), g = R(() => `f-drawer-${e.position}`), n = (l) => {
+      return e.transparent && (y.boxShadow = `${a} 8px 0 rgba(31, 35, 41, .1)`), Se(y, e == null ? void 0 : e.customStyle);
+    }), s = D(() => `f-drawer-${e.position}`), c = (a) => {
       Promise.resolve().then(() => {
         var y;
         return (y = e.beforeClose) == null ? void 0 : y.call(e);
       }).then((y) => {
-        y && (r.value = !1, t.emit("update:modelValue", r.value), t.emit("afterClose"));
+        y && (o.value = !1, t.emit("update:modelValue", o.value), t.emit("afterClose"));
       });
     };
-    z(() => e.modelValue, (l, y) => {
-      l !== y && (r.value = l);
+    _(() => e.modelValue, (a, y) => {
+      a !== y && (o.value = a);
     });
-    const s = (l, y) => {
-      t.emit("click", l, y);
-    }, m = {
+    const b = (a, y) => {
+      t.emit("click", a, y);
+    }, i = {
       close: () => {
-        r.value = !1;
+        o.value = !1;
       }
     };
-    async function i(l, y) {
-      l.handle && await l.handle(y, m) && t.emit("closed", y);
+    async function n(a, y) {
+      a.handle && await a.handle(y, i) && t.emit("closed", y);
     }
-    const a = (l, y) => f(xe, {
+    const l = (a, y) => p(je, {
       class: y,
       alignment: "right",
-      items: l,
-      onClick: s
+      items: a,
+      onClick: b
     }, null);
-    function c() {
-      var l, y, P, C;
-      if ((y = (l = e.footerToolbar) == null ? void 0 : l.buttons) != null && y.length) {
-        const T = {
+    function u() {
+      var a, y, R, w;
+      if ((y = (a = e.footerToolbar) == null ? void 0 : a.buttons) != null && y.length && (e.footerToolbar.visible === void 0 || e.footerToolbar.visible)) {
+        const d = {
           "f-utils-fill": !0
         };
-        return (C = (P = e.footerToolbar) == null ? void 0 : P.appearance) != null && C.class && (T[e.footerToolbar.appearance.class] = !0), a(e.footerToolbar.buttons, T);
+        return (w = (R = e.footerToolbar) == null ? void 0 : R.appearance) != null && w.class && (d[e.footerToolbar.appearance.class] = !0), l(e.footerToolbar.buttons, d);
       }
-      return o.value && !!o.value.length && o.value.map((T) => {
-        const D = N(T.disabled);
-        return f("button", {
-          id: T.id,
+      return r.value && !!r.value.length && r.value.map((d) => {
+        const B = M(d.disabled);
+        return p("button", {
+          id: d.id,
           type: "button",
-          disabled: D.value,
-          class: T.class + (T.iconClass ? " btn-icontext" : ""),
-          onClick: (d) => {
-            i(T, d);
+          disabled: B.value,
+          class: d.class + (d.iconClass ? " btn-icontext" : ""),
+          onClick: (E) => {
+            n(d, E);
           }
-        }, [!!T.iconClass && f("i", {
-          class: T.iconClass
-        }, null), T.text]);
+        }, [!!d.iconClass && p("i", {
+          class: d.iconClass
+        }, null), d.text]);
       });
     }
-    function b() {
-      return e.footerTemplate && typeof e.footerTemplate == "function" ? e.footerTemplate() : t.slots.footerTemplate ? t.slots.footerTemplate() : c();
+    function h() {
+      return e.footerTemplate && typeof e.footerTemplate == "function" ? e.footerTemplate() : t.slots.footerTemplate ? t.slots.footerTemplate() : u();
     }
-    function w() {
-      var y, P;
-      const l = {
+    function S() {
+      var y, R;
+      const a = {
         "f-utils-fill": !0
       };
-      return (P = (y = e.headerToolbar) == null ? void 0 : y.appearance) != null && P.class && (l[e.headerToolbar.appearance.class] = !0), e.headerTemplate && typeof e.headerTemplate == "function" ? e.headerTemplate() : t.slots.headerTemplate ? t.slots.headerTemplate() : f(re, null, [f("div", {
-        class: "f-drawer-title"
-      }, [e.title]), e.headerToolbar && f("div", {
+      return (R = (y = e.headerToolbar) == null ? void 0 : y.appearance) != null && R.class && (a[e.headerToolbar.appearance.class] = !0), e.headerTemplate && typeof e.headerTemplate == "function" ? e.headerTemplate() : t.slots.headerTemplate ? t.slots.headerTemplate() : p(re, null, [p("div", {
+        class: "f-drawer-title",
+        title: e.title
+      }, [e.title]), e.headerToolbar && (e.headerToolbar.visible === void 0 || e.headerToolbar.visible) && p("div", {
         class: "f-utils-fill-flex-row mx-2 col-7"
-      }, [a(e.headerToolbar.buttons || [], l)]), e.showClose && f("div", {
+      }, [l(e.headerToolbar.buttons || [], a)]), e.showClose && p("div", {
         class: "f-drawer-close"
-      }, [f("span", {
+      }, [p("span", {
         class: "f-icon f-icon-close",
-        onClick: W((C) => {
-          n();
+        onClick: W((w) => {
+          c();
         }, ["stop"])
       }, null)])]);
     }
-    return t.expose({
+    const $ = M({});
+    function F() {
+      const a = xe();
+      $.value = {
+        zIndex: a < 1e3 ? 1e3 : a
+      };
+    }
+    return Pe(() => {
+      o.value && F();
+    }), t.expose({
       open: () => {
-        r.value = !0;
+        o.value = !0;
       },
       close: () => {
-        n();
+        c();
       }
-    }), () => f(ke, {
+    }), () => p($e, {
       to: e.host
     }, {
-      default: () => [f("div", {
-        class: v.value,
-        id: e.id
-      }, [f(U, {
+      default: () => [p("div", {
+        class: g.value,
+        id: e.id,
+        style: $.value
+      }, [p(Z, {
         name: "f-drawer-mask",
         appear: !0
       }, {
-        default: () => [r.value && f("div", {
-          class: h.value,
+        default: () => [o.value && p("div", {
+          class: T.value,
           style: k.value,
-          onClick: W((l) => {
-            e.allowClickMaskToClose && n();
+          onClick: W((a) => {
+            e.allowClickMaskToClose && c();
           }, ["stop"])
         }, null)]
-      }), f(U, {
-        name: g.value
+      }), p(Z, {
+        name: s.value
       }, {
-        default: () => [Fe(f("div", {
-          class: p.value,
-          style: {
-            width: F.value,
-            height: u.value,
-            backgroundColor: e.backgroundColor
-          }
-        }, [f("div", {
-          class: "f-drawer-container"
-        }, [e.showHeader && f("div", {
-          class: "f-drawer-header align-items-center"
-        }, [w()]), f("div", {
-          class: "f-drawer-body f-utils-fill",
-          style: "overflow: auto;"
-        }, [t.slots.default && t.slots.default()]), e.showFooter && f("div", {
-          class: "f-drawer-footer px-2",
-          style: {
-            height: e.footerHeight + "px"
-          }
-        }, [b()])])]), [[Se, r.value]])]
+        default: () => {
+          var a, y;
+          return [Re(p("div", {
+            class: m.value,
+            style: v.value
+          }, [p("div", {
+            class: "f-drawer-container"
+          }, [e.showHeader && p("div", {
+            class: "f-drawer-header align-items-center"
+          }, [S()]), p("div", {
+            class: "f-drawer-body f-utils-fill",
+            style: "overflow: auto;"
+          }, [(y = (a = t.slots).default) == null ? void 0 : y.call(a)]), e.showFooter && p("div", {
+            class: "f-drawer-footer px-2",
+            style: {
+              height: e.footerHeight + "px"
+            }
+          }, [h()])])]), [[De, o.value]])];
+        }
       })])]
     });
   }
 });
-class kt extends Ne {
-  constructor(t, r) {
-    super(t, r);
+class Ot extends ze {
+  constructor(t, o) {
+    super(t, o);
   }
   getPropertyConfig(t) {
     return this.propertyConfig.categories.basic = this.getBasicPropConfig(t), this.propertyConfig.categories.appearance = this.getAppearanceConfig(t), this.getBehaviorConfig(), this.propertyConfig.categories.header = this.headerPropertyConfig(t), this.propertyConfig.categories.footer = this.footerPropertyConfig(t), this.propertyConfig.categories.eventsEditor = this.eventPropertyConfig(t), this.propertyConfig;
@@ -1066,11 +1123,11 @@ class kt extends Ne {
           visible: t.showHeader !== !1 && t.customHeader === !0
         }
       },
-      setPropertyRelates: (r, o) => {
-        if (r)
-          switch (r && r.propertyID) {
+      setPropertyRelates: (o, r) => {
+        if (o)
+          switch (o && o.propertyID) {
             case "title": {
-              r.needRefreshControlTree = !0;
+              o.needRefreshControlTree = !0;
               break;
             }
           }
@@ -1120,7 +1177,7 @@ class kt extends Ne {
         footerTemplate: {
           title: "页脚模板",
           type: "string",
-          description: "设置标题HTML模板，替代图标和标题文字区域",
+          description: "设置页脚HTML模板，替换页脚工具栏",
           editor: {
             type: "code-editor",
             language: "html"
@@ -1128,15 +1185,15 @@ class kt extends Ne {
           visible: t.footerContentType === "html" && t.showFooter !== !1
         }
       },
-      setPropertyRelates: (r, o) => {
-        if (r)
-          switch (r && r.propertyID) {
+      setPropertyRelates: (o, r) => {
+        if (o)
+          switch (o && o.propertyID) {
             case "showFooter": {
-              o.footerToolbar = { id: o.id + "_footer-toolbar", type: "response-toolbar", buttons: [] }, o.footerTemplate = "", o.footerContentType = "toolbar";
+              r.footerToolbar = { id: r.id + "_footer-toolbar", type: "drawer-toolbar", buttons: [] }, r.footerTemplate = "", r.footerContentType = "toolbar";
               break;
             }
             case "footerContentType": {
-              this.resetFooterContent(o, r.propertyValue);
+              this.resetFooterContent(r, o.propertyValue);
               break;
             }
           }
@@ -1189,257 +1246,449 @@ class kt extends Ne {
       }
     };
   }
-  resetFooterContent(t, r = "toolbar") {
-    switch (r) {
+  resetFooterContent(t, o = "toolbar") {
+    switch (o) {
       case "toolbar": {
         t.footerTemplate = "";
         break;
       }
       case "html": {
-        t.footerToolbar = { id: t.id + "_footer-toolbar", type: "response-toolbar", buttons: [] };
+        t.footerToolbar = { id: t.id + "_footer-toolbar", type: "drawer-toolbar", buttons: [] };
         break;
       }
     }
   }
   eventPropertyConfig(t) {
-    const r = this, o = [
+    const o = this, r = [
       {
         label: "beforeClose",
         name: "关闭前事件"
       }
-    ], v = r.eventsEditorUtils.formProperties(t, r.viewModelId, o);
+    ], g = o.eventsEditorUtils.formProperties(t, o.viewModelId, r);
     return {
       title: "事件",
       hideTitle: !0,
-      properties: r.createBaseEventProperty(v),
+      properties: o.createBaseEventProperty(g),
       // 这个属性，标记当属性变更得时候触发重新更新属性
       refreshPanelAfterChanged: !0,
       tabId: "commands",
       tabName: "交互",
-      setPropertyRelates(h, p) {
-        const F = h.propertyValue;
-        delete p[r.viewModelId], F && r.eventsEditorUtils.saveRelatedParameters(p, r.viewModelId, F.events, F);
-        const u = r.designViewModelUtils.getDgViewModel(r.viewModelId);
-        u && r.designViewModelField && u.changeField(r.designViewModelField.id, { valueChanging: p.fieldValueChanging, valueChanged: p.fieldValueChanged });
+      setPropertyRelates(T, m) {
+        const x = T.propertyValue;
+        delete m[o.viewModelId], x && o.eventsEditorUtils.saveRelatedParameters(m, o.viewModelId, x.events, x);
+        const f = o.designViewModelUtils.getDgViewModel(o.viewModelId);
+        f && o.designViewModelField && f.changeField(o.designViewModelField.id, { valueChanging: m.fieldValueChanging, valueChanged: m.fieldValueChanged });
       }
     };
   }
 }
-function Ft(e, t, r) {
-  const o = new Re();
-  function v(n) {
-    if (!Me().basalDragulaRuleForContainer(n, r))
+function It(e, t, o) {
+  const r = new Ie();
+  function g(n) {
+    if (!He().basalDragulaRuleForContainer(n, o))
       return !1;
-    const { canAccept: m } = o.getTemplateRule(e, r);
-    return m;
+    const { canAccept: u } = r.getTemplateRule(e, o);
+    return u;
   }
   function k() {
     return !1;
   }
-  function h() {
+  function T() {
     return !1;
   }
-  function p() {
+  function m() {
     return !0;
   }
-  function F() {
+  function x() {
     return "position: initial !important;border: none !important;left: 0;right: 0;padding: 0;";
   }
-  function u(n) {
-    const s = new kt(n, r), { schema: m } = e;
-    return s.getPropertyConfig(m);
+  function f(n) {
+    const l = new Ot(n, o), { schema: u } = e;
+    return l.getPropertyConfig(u);
   }
-  function g(n) {
+  function v(n) {
     return t;
   }
-  return { canAccepts: v, checkCanDeleteComponent: k, checkCanMoveComponent: h, hideNestedPaddingInDesginerView: p, getStyles: F, getPropsConfig: u, getDraggableDesignItemElement: g };
+  function s() {
+    e.designerItemElementRef.value && Me(() => {
+      Ne(t.value);
+    });
+  }
+  function c(n) {
+    if (!n)
+      return;
+    const { changeObject: l } = n;
+    l && ["width", "position"].includes(l.propertyID) && s();
+  }
+  function b(n, l, u) {
+    var h;
+    (h = n == null ? void 0 : n.buttons) != null && h.length && n.buttons.map((S) => {
+      var $;
+      u.set(S.id, {
+        componentTitle: S.text,
+        parentPathName: `${l} > ${S.text}`
+      }), ($ = S.children) != null && $.length && S.children.map((F) => {
+        u.set(F.id, {
+          componentTitle: F.text,
+          parentPathName: `${l} > ${F.text}`
+        });
+      });
+    });
+  }
+  function i() {
+    if (e && o) {
+      const { formSchemaUtils: n } = o, l = n.getControlBasicInfoMap(), { schema: u } = e, h = u.title || Be.drawer.name;
+      l.set(u.id, {
+        componentTitle: h,
+        parentPathName: h
+      }), b(u.headerToolbar, h, l), b(u.footerToolbar, h, l);
+    }
+  }
+  return {
+    canAccepts: g,
+    checkCanDeleteComponent: k,
+    checkCanMoveComponent: T,
+    hideNestedPaddingInDesginerView: m,
+    getStyles: x,
+    getPropsConfig: f,
+    getDraggableDesignItemElement: v,
+    onPropertyChanged: c,
+    setComponentBasicInfoMap: i
+  };
 }
-const ge = Object.assign({}, X, {
+const he = Object.assign({}, Q, {
   componentId: { type: String, default: "" },
   footerContentType: { type: String, default: "toolbar" },
-  customHeader: { type: Boolean, default: !1 }
-}), G = /* @__PURE__ */ te({
+  customHeader: { type: Boolean, default: !1 },
+  showWrapperInCanvas: { type: Boolean, default: !1 }
+}), Bt = "https://json-schema.org/draft/2020-12/schema", Ht = "https://farris-design.gitee.io/section-toolbar-item.schema.json", Nt = "drawer-toolbar-item", At = "A Farris Toolbar Item Component", Lt = "object", Vt = {
+  id: {
+    description: "The unique identifier for a Response Toolbar",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Response Toolbar",
+    type: "string",
+    default: "drawer-toolbar-item"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  text: {
+    description: "按钮",
+    type: "string",
+    default: "按钮"
+  },
+  icon: {
+    description: "图标",
+    type: "string",
+    default: ""
+  },
+  disabled: {
+    description: "禁用",
+    type: "boolean",
+    default: !1
+  },
+  visible: {
+    description: "是否可见",
+    type: "boolean",
+    default: !0
+  },
+  onClick: {
+    description: "点击事件",
+    type: "string",
+    default: ""
+  },
+  tipsEnable: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  tipsText: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  dropdownClass: {
+    description: "处于下拉菜单时的样式",
+    type: "string",
+    default: ""
+  },
+  split: {
+    description: "",
+    type: "boolean",
+    default: !1
+  }
+}, qt = [
+  "id",
+  "type",
+  "text"
+], zt = {
+  onClick: "点击事件"
+}, _t = {
+  $schema: Bt,
+  $id: Ht,
+  title: Nt,
+  description: At,
+  type: Lt,
+  properties: Vt,
+  required: qt,
+  events: zt
+}, Wt = "https://json-schema.org/draft/2020-12/schema", Ut = "https://farris-design.gitee.io/section-toolbar.schema.json", Gt = "drawer-toolbar", Zt = "A Farris Toolbar Component", Jt = "object", Qt = {
+  id: {
+    description: "The unique identifier for a Section Toolbar",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Section Toolbar",
+    type: "string",
+    default: "drawer-toolbar"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string",
+        default: ""
+      }
+    }
+  },
+  alignment: {
+    description: "The alignment of Section Toolbar Button.",
+    type: "string",
+    default: "right"
+  },
+  buttons: {
+    description: "The items of Section Toolbar.",
+    type: "array",
+    default: []
+  },
+  buttonSize: {
+    type: "string",
+    default: ""
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  }
+}, Xt = [
+  "id",
+  "type",
+  "buttons"
+], Yt = {
+  onClick: "点击事件"
+}, Kt = {
+  $schema: Wt,
+  $id: Ut,
+  title: Gt,
+  description: Zt,
+  type: Jt,
+  properties: Qt,
+  required: Xt,
+  events: Yt
+}, eo = Object.assign({}, Ve), to = J(eo, _t, void 0, le), oo = Object.assign({}, Oe, {
+  componentId: { type: String, default: "" }
+}), z = J(
+  oo,
+  Kt,
+  We,
+  le
+), U = /* @__PURE__ */ oe({
   name: "FDrawerDesign",
-  props: ge,
+  props: he,
   setup(e, t) {
-    const r = N(), o = N(), v = e.id + "_footer-toolbar", k = e.id + "_header-toolbar", h = Q("designer-host-service"), p = Q("design-item-context"), F = Ft(p, o, h), u = De(r, p, F);
-    p.schema.footerToolbar = p.schema.footerToolbar || {
-      id: v,
-      type: "response-toolbar",
+    const o = M(), r = M(), g = e.id + "_footer-toolbar", k = e.id + "_header-toolbar", T = G("designer-host-service"), m = G("design-item-context"), x = It(m, r, T), f = Ae(o, m, x);
+    m.schema.footerToolbar = m.schema.footerToolbar || {
+      id: g,
+      type: "drawer-toolbar",
       buttons: []
     };
-    const g = N(p.schema.footerToolbar), n = N(q(g.value));
-    z(() => p.schema.footerToolbar, () => {
-      g.value = p.schema.footerToolbar, n.value = q(g.value);
+    const v = M(m.schema.footerToolbar), s = M(z(v.value));
+    _(() => m.schema.footerToolbar, () => {
+      v.value = m.schema.footerToolbar, s.value = z(v.value);
     }, {
       deep: !0
     });
-    const s = Q("design-item-context"), m = R(() => [...n.value.items]);
-    p.schema.headerToolbar = p.schema.headerToolbar || {
+    const c = G("design-item-context"), b = D(() => [...s.value.items]);
+    m.schema.headerToolbar = m.schema.headerToolbar || {
       id: k,
-      type: "response-toolbar",
+      type: "drawer-toolbar",
       buttons: []
     };
-    const i = N(p.schema.headerToolbar), a = N(q(i.value));
-    z(() => p.schema.headerToolbar, () => {
-      i.value = p.schema.headerToolbar, a.value = q(i.value);
+    const i = M(m.schema.headerToolbar), n = M(z(i.value));
+    _(() => m.schema.headerToolbar, () => {
+      i.value = m.schema.headerToolbar, n.value = z(i.value);
     }, {
       deep: !0
     });
-    const c = R(() => [...a.value.items]);
-    Pe(() => {
-      r.value.componentInstance = u;
-    }), t.expose(u.value);
-    const b = N(e.modelValue);
-    z(() => e.modelValue, () => {
-      b.value = e.modelValue;
+    const l = D(() => [...n.value.items]);
+    Ee(() => {
+      o.value.componentInstance = f;
+    }), t.expose(f.value);
+    const u = M(e.modelValue || m.schema.showWrapperInCanvas);
+    _(() => e.modelValue, () => {
+      u.value = e.modelValue;
     });
-    const w = R(() => {
-      const S = ["f-drawer-wrapper", `f-drawer-wrapper-${e.position}`, e.wrapperClass];
-      return b.value || S.push("d-none"), S;
-    }), l = R(() => {
-      const S = e.width, x = e.height, $ = typeof S == "string" ? S : typeof S == "number" ? `${S}px` : "20%", O = typeof x == "string" ? x : typeof x == "number" ? `${x}px` : "20%";
+    const h = D(() => {
+      const C = ["f-drawer-wrapper", `f-drawer-wrapper-${e.position}`, e.wrapperClass];
+      return u.value || C.push("d-none"), C;
+    }), S = D(() => {
+      const C = e.width, P = e.height, I = typeof C == "string" ? C : typeof C == "number" ? `${C}px` : "20%", j = typeof P == "string" ? P : typeof P == "number" ? `${P}px` : "20%";
       return {
-        width: $,
-        height: O,
-        backgroundColor: e.backgroundColor
+        width: I,
+        height: j,
+        backgroundColor: e.backgroundColor,
+        maxWidth: "100%"
       };
-    }), y = R(() => ["f-drawer-entry", `f-drawer-entry-${e.position}`, e.entryClass]), P = R(() => `f-icon-arrow-chevron-${{
+    }), $ = D(() => ["f-drawer-entry", `f-drawer-entry-${e.position}`, e.entryClass]), F = D(() => `f-icon-arrow-chevron-${{
       left: "right",
       right: "left",
       top: "down",
       bottom: "up"
-    }[e.position] ?? "right"}`), C = R(() => `f-drawer-${e.position}`), T = () => {
-      b.value = !1;
-    }, D = () => {
-      b.value = !0;
-    }, d = () => f("div", {
-      class: y.value,
-      onClick: D
-    }, [t.slots.button ? t.slots.button() : f("div", {
+    }[e.position] ?? "right"}`), a = () => {
+      u.value = !1, m.schema.showWrapperInCanvas = !1;
+    }, y = () => {
+      u.value = !0, m.schema.showWrapperInCanvas = !0;
+    }, R = () => p("div", {
+      class: $.value,
+      onClick: y
+    }, [t.slots.button ? t.slots.button() : p("div", {
       class: "f-drawer-entry-icon"
-    }, [f("span", {
-      class: `f-icon ${P.value}`
-    }, null)])]), M = R(() => ({
+    }, [p("span", {
+      class: `f-icon ${F.value}`
+    }, null)])]), w = D(() => ({
       opacity: e.transparent ? 0 : 1
-    })), L = () => f(U, {
+    })), d = () => p(Z, {
       name: "f-drawer-mask",
       appear: !0
     }, {
-      default: () => [b.value && f("div", {
+      default: () => [u.value && p("div", {
         class: "f-drawer-mask",
-        style: M.value,
-        onClick: W(T, ["stop"])
+        style: w.value,
+        onClick: W(a, ["stop"])
       }, null)]
     });
-    function I(S, x, $, O) {
-      p && p.setupContext && p.setupContext.emit("selectionChange", S, x, $, O);
+    function B(C, P, I, j) {
+      m && m.setupContext && m.setupContext.emit("selectionChange", C, P, I, j);
     }
-    const B = (S, x, $) => f(Ee, {
-      modelValue: $,
-      "onUpdate:modelValue": (O) => $ = O,
+    const E = (C, P, I) => p(Le, {
+      modelValue: I,
+      "onUpdate:modelValue": (j) => I = j,
       canAdd: !1,
       class: "w-100 position-relative",
-      childType: "response-toolbar-item",
+      childType: "drawer-toolbar-item",
       childLabel: "按钮",
       contentKey: "buttons",
-      id: S,
+      id: C,
       componentId: e.componentId,
-      onSelectionChange: I
+      onSelectionChange: B
     }, {
-      default: () => [f(Oe, {
+      default: () => [p(ne, {
         customClass: "w-100",
-        items: x,
+        items: P,
         componentId: e.componentId
       }, null)]
-    }), j = () => f("div", {
+    }), N = () => p("div", {
       class: "f-drawer-close"
-    }, [f("span", {
+    }, [p("span", {
       class: "f-icon f-icon-close",
-      onClick: W(T, ["stop"])
-    }, null)]), V = () => e.showHeader ? f("div", {
+      onClick: W(a, ["stop"])
+    }, null)]), O = () => e.showHeader ? p("div", {
       class: "f-drawer-header align-items-center"
-    }, [e.customHeader ? f("div", {
+    }, [e.customHeader ? p("div", {
       class: "w-100 h-100",
       innerHTML: e.headerTemplate
-    }, null) : f(re, null, [f("div", {
+    }, null) : p(re, null, [p("div", {
       class: "f-drawer-title"
-    }, [t.slots.title ? t.slots.title() : e.title]), f("div", {
+    }, [t.slots.title ? t.slots.title() : e.title]), p("div", {
       class: "mx-2 col-7"
-    }, [B(k, c.value, i.value)]), f("div", {
+    }, [E(k, l.value, i.value)]), p("div", {
       class: "f-drawer-header-right"
-    }, [e.showClose && j()])])]) : null;
-    function A(S) {
-      S && (S.preventDefault(), S.stopPropagation()), u.value.onRemoveComponent(h);
-      const x = s == null ? void 0 : s.parent, $ = (O) => O.id === p.schema.id;
-      if (x && x.schema.contents) {
-        const O = x.schema.contents.findIndex($);
-        x.schema.contents.splice(O, 1), je.value++, t.emit("selectionChange");
+    }, [e.showClose && N()])])]) : null;
+    function L(C) {
+      C && (C.preventDefault(), C.stopPropagation()), f.value.onRemoveComponent(T);
+      const P = c == null ? void 0 : c.parent, I = (j) => j.id === m.schema.id;
+      if (P && P.schema.contents) {
+        const j = P.schema.contents.findIndex(I);
+        P.schema.contents.splice(j, 1), _e.value++, t.emit("selectionChange");
       }
     }
-    const _ = () => f("div", {
+    const A = () => p("div", {
       class: "component-btn-group"
-    }, [f("div", null, [f("div", {
+    }, [p("div", null, [p("div", {
       class: "btn component-settings-button",
       title: "删除",
-      onClick: A
-    }, [f("i", {
+      onClick: L
+    }, [p("i", {
       class: "f-icon f-icon-yxs_delete"
-    }, null)])])]), J = () => f(U, {
-      name: C.value,
-      appear: !0
-    }, {
-      default: () => {
-        var S, x;
-        return [f("div", {
-          class: w.value,
-          style: l.value
-        }, [f("div", {
-          class: "f-drawer-container position-relative",
-          ref: o
-        }, [_(), V(), f("div", {
-          class: "f-drawer-body drag-container",
-          "data-dragref": `${p.schema.id}-container`,
-          ref: r,
-          style: "overflow: auto;",
-          id: p.schema.id
-        }, [(x = (S = t.slots).default) == null ? void 0 : x.call(S)]), e.showFooter && f("div", {
-          class: "f-drawer-footer px-2 border-top",
-          style: {
-            height: e.footerHeight + "px"
-          }
-        }, [e.footerContentType === "toolbar" && B(v, m.value, g.value), e.footerContentType === "html" && f("div", {
-          class: "w-100 h-100",
-          innerHTML: e.footerTemplate
-        }, null)])])])];
-      }
-    }), E = () => f("div", {
+    }, null)]), p("div", {
+      class: "btn component-settings-button",
+      title: "关闭抽屉",
+      onClick: a
+    }, [p("i", {
+      class: "f-icon f-icon-close"
+    }, null)])])]), V = () => {
+      var C, P;
+      return p("div", {
+        class: h.value,
+        style: S.value
+      }, [p("div", {
+        class: "f-drawer-container position-relative",
+        ref: r
+      }, [A(), O(), p("div", {
+        class: "f-drawer-body drag-container d-block",
+        "data-dragref": `${m.schema.id}-container`,
+        ref: o,
+        style: "overflow: auto;",
+        id: m.schema.id
+      }, [(P = (C = t.slots).default) == null ? void 0 : P.call(C)]), e.showFooter && p("div", {
+        class: "f-drawer-footer px-2 border-top",
+        style: {
+          height: e.footerHeight + "px"
+        }
+      }, [e.footerContentType === "toolbar" && E(g, b.value, v.value), e.footerContentType === "html" && p("div", {
+        class: "w-100 h-100",
+        innerHTML: e.footerTemplate
+      }, null)])])]);
+    }, q = () => p("div", {
       class: "f-drawer f-drawer-inline"
-    }, [L(), J()]);
-    return () => f("div", null, [E(), d()]);
+    }, [d(), V()]);
+    return () => p("div", null, [q(), R()]);
   }
 });
-function St() {
-  function e(t, r) {
-    const o = {};
-    return o.beforeClose = (v) => r.call("beforeClose", t, [t]), o;
+function ro() {
+  function e(t, o) {
+    const r = {};
+    return r.beforeClose = (g) => o.call("beforeClose", t, [t]), r;
   }
   return {
     resolve: e
   };
 }
-const be = Ce(ge, ne, oe, ie), Pt = St();
-G.register = (e, t, r, o) => {
-  e.drawer = Tt, t.drawer = be, o.drawer = { eventHandlerResolver: wt, callbackResolver: Pt };
+const we = J(he, ae, ie, se), no = ro();
+U.register = (e, t, o, r) => {
+  e.drawer = jt, t.drawer = we, r.drawer = { eventHandlerResolver: Mt, callbackResolver: no };
 };
-G.registerDesigner = (e, t, r) => {
-  e.drawer = G, t.drawer = be;
+U.registerDesigner = (e, t, o) => {
+  e.drawer = U, t.drawer = we, e["drawer-toolbar-item"] = qe, t["drawer-toolbar-item"] = to, e["drawer-toolbar"] = ne, t["drawer-toolbar"] = z;
 };
-const Ht = Te(G);
+const go = Fe(U);
 export {
-  Pt as callbackResolver,
-  Ht as default,
-  X as drawerProps,
-  wt as eventHandlerResolver,
-  be as propsResolver
+  no as callbackResolver,
+  go as default,
+  Q as drawerProps,
+  Mt as eventHandlerResolver,
+  we as propsResolver
 };