@farris/ui-vue/designer/drawer/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { resolveAppearance as te, createPropsResolver as J } from "../../components/dynamic-resolver/index.esm.js";
import { getCustomStyle as xe, getMaxZIndex as Fe, withInstall as Pe } from "../../components/common/index.esm.js";
import { ref as E, computed as D, defineComponent as re, watch as _, onMounted as oe, watchEffect as $e, createVNode as m, Teleport as Re, Transition as Z, withModifiers as W, Fragment as ne, nextTick as De, inject as G } from "vue";
import Ee, { responseToolbarProps as Me } 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 je, DgControl as Oe, useDragulaCommonRule as Ie, setPositionOfButtonGroup as Be, useDesignerComponent as Ne, FDesignerInnerItem as He, canvasChanged as Le } from "../../components/designer-canvas/index.esm.js";
import { commonToolbarItemDesignProps as ze, FResponseToolbarDesign as ie, FResponseToolbarItemDesign as Ae } from "../response-toolbar/index.esm.js";
import { BaseControlProperty as qe } from "../../components/property-panel/index.esm.js";
const ae = /* @__PURE__ */ new Map([
  ["appearance", te]
]), Ve = /* @__PURE__ */ new Map([
  ["buttons", "items"],
  ["appearance", te]
]), _e = "https://json-schema.org/draft/2020-12/schema", We = "https://farris-design.gitee.io/drawer.schema.json", Ue = "drawer", Ge = "A Farris Component", Ze = "object", Je = {
  id: {
    description: "The unique identifier for drawer",
    type: "string"
  },
  type: {
    description: "The type string of drawer",
    type: "string",
    default: "drawer"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  title: {
    description: "",
    type: "string",
    default: "标题"
  },
  position: {
    description: "",
    type: "string",
    default: "right"
  },
  width: {
    description: "",
    type: "number",
    default: 500
  },
  showMask: {
    description: "",
    type: "boolean",
    default: !0
  },
  showHeader: {
    description: "",
    type: "boolean",
    default: !0
  },
  showClose: {
    description: "",
    type: "boolean",
    default: !0
  },
  customHeader: {
    description: "",
    type: "boolean",
    default: !1
  },
  headerTemplate: {
    description: "",
    type: "object"
  },
  headerToolbar: {
    description: "",
    type: "object",
    properties: {
      appearance: {
        description: "",
        type: "object",
        properties: {
          class: {
            type: "string",
            default: ""
          }
        }
      },
      id: {
        description: "",
        type: "string"
      },
      type: {
        description: "",
        type: "string",
        default: "drawer-toolbar"
      },
      alignment: {
        description: "The alignment of Response Toolbar Button.",
        type: "string",
        default: "right"
      },
      buttons: {
        description: "The items of Response Toolbar.",
        type: "array",
        default: []
      }
    }
  },
  showFooter: {
    description: "",
    type: "boolean",
    default: !0
  },
  showEntry: {
    description: "",
    type: "boolean",
    default: !1
  },
  footerToolbar: {
    description: "",
    type: "object",
    properties: {
      appearance: {
        description: "",
        type: "object",
        properties: {
          class: {
            type: "string",
            default: ""
          }
        }
      },
      id: {
        description: "",
        type: "string"
      },
      type: {
        description: "",
        type: "string",
        default: "drawer-toolbar"
      },
      alignment: {
        description: "The alignment of Response Toolbar Button.",
        type: "string",
        default: "right"
      },
      buttons: {
        description: "The items of Response Toolbar.",
        type: "array",
        default: []
      }
    }
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  footerTemplate: {
    description: "",
    type: "object"
  },
  footerContentType: {
    description: "",
    type: "string",
    default: "toolbar"
  },
  footerHeight: {
    description: "",
    type: "number",
    default: 60
  },
  allowClickMaskToClose: {
    description: "",
    type: "boolean",
    default: !0
  },
  transparent: {
    description: "遮罩层是否透明",
    type: "boolean",
    default: !1
  },
  host: {
    description: "",
    type: "string"
  }
}, Qe = [
  "id",
  "type",
  "contents"
], Xe = {
  beforeClose: "关闭前事件"
}, se = {
  $schema: _e,
  $id: We,
  title: Ue,
  description: Ge,
  type: Ze,
  properties: Je,
  required: Qe,
  events: Xe
};
function le(e, t, r) {
  return Object.assign(t, {
    title: "标题",
    headerToolbar: {
      id: t.id + "_header_toolbar",
      type: "drawer-toolbar",
      buttons: []
    },
    footerToolbar: {
      id: t.id + "_footer_toolbar",
      type: "drawer-toolbar",
      buttons: []
    }
  }), t;
}
function ce(e, t, r) {
  return t;
}
function ue(e, t) {
  let r;
  function o(a) {
    const { properties: u, title: v, ignore: i } = a, n = i && Array.isArray(i), s = Object.keys(u).reduce((d, h) => ((!n || !i.find((S) => S === h)) && (d[h] = u[h].type === "object" && u[h].properties ? o(u[h]) : K(u[h].default)), d), {});
    if (v && (!n || !i.find((d) => d === "id"))) {
      const d = v.toLowerCase().replace(/-/g, "_");
      s.id = `${d}_${Math.random().toString().slice(2, 6)}`;
    }
    return s;
  }
  function p(a) {
    const { properties: u, title: v, required: i } = a;
    if (i && Array.isArray(i)) {
      const n = i.reduce((s, d) => (s[d] = u[d].type === "object" && u[d].properties ? o(u[d]) : K(u[d].default), s), {});
      if (v && i.find((s) => s === "id")) {
        const s = v.toLowerCase().replace(/-/g, "_");
        n.id = `${s}_${Math.random().toString().slice(2, 6)}`;
      }
      return n;
    }
    return {
      type: v
    };
  }
  function k(a, u = {}, v) {
    const i = e[a];
    if (i) {
      let n = p(i);
      const s = t[a];
      return n = s ? s({ getSchemaByType: k }, n, u, v) : n, r != null && r.appendIdentifyForNewControl && r.appendIdentifyForNewControl(n), n;
    }
    return null;
  }
  function C(a, u) {
    const v = o(u);
    return Object.keys(v).reduce((i, n) => (Object.prototype.hasOwnProperty.call(a, n) && (i[n] && Y(i[n]) && Y(a[n] || !a[n]) ? Object.assign(i[n], a[n] || {}) : i[n] = a[n]), i), v), v;
  }
  function b(a, u) {
    return Object.keys(a).filter((i) => a[i] != null).reduce((i, n) => {
      if (u.has(n)) {
        const s = u.get(n);
        if (typeof s == "string")
          i[s] = a[n];
        else {
          const d = s(n, a[n], a);
          Object.assign(i, d);
        }
      } else
        i[n] = a[n];
      return i;
    }, {});
  }
  function x(a, u, v = /* @__PURE__ */ new Map()) {
    const i = C(a, u);
    return b(i, v);
  }
  function f(a) {
    var v;
    const u = a.type;
    if (u) {
      const i = e[u];
      if (!i)
        return a;
      const n = C(a, i), s = ((v = a.editor) == null ? void 0 : v.type) || "";
      if (s) {
        const d = e[s], h = C(a.editor, d);
        n.editor = h;
      }
      return n;
    }
    return a;
  }
  function y(a) {
    r = a;
  }
  return { getSchemaByType: k, resolveSchemaWithDefaultValue: f, resolveSchemaToProps: x, mappingSchemaToProps: b, setDesignerContext: y };
}
const de = {}, fe = {}, { resolveSchemaWithDefaultValue: Ye, resolveSchemaToProps: Ke, mappingSchemaToProps: et } = ue(de, fe);
function tt(e = {}) {
  function t(f, y, a, u) {
    if (typeof a == "number")
      return u[f].length === a;
    if (typeof a == "object") {
      const v = Object.keys(a)[0], i = a[v];
      if (v === "not")
        return Number(u[f].length) !== Number(i);
      if (v === "moreThan")
        return Number(u[f].length) >= Number(i);
      if (v === "lessThan")
        return Number(u[f].length) <= Number(i);
    }
    return !1;
  }
  function r(f, y, a, u) {
    return u[f] && u[f].propertyValue && String(u[f].propertyValue.value) === String(a);
  }
  const o = /* @__PURE__ */ new Map([
    ["length", t],
    ["getProperty", r]
  ]);
  Object.keys(e).reduce((f, y) => (f.set(y, e[y]), f), o);
  function p(f, y) {
    const a = f;
    return typeof y == "number" ? [{ target: a, operator: "length", param: null, value: Number(y) }] : typeof y == "boolean" ? [{ target: a, operator: "getProperty", param: f, value: !!y }] : typeof y == "object" ? Object.keys(y).map((u) => {
      if (u === "length")
        return { target: a, operator: "length", param: null, value: y[u] };
      const v = u, i = y[u];
      return { target: a, operator: "getProperty", param: v, value: i };
    }) : [];
  }
  function k(f) {
    return Object.keys(f).reduce((a, u) => {
      const v = p(u, f[u]);
      return a.push(...v), a;
    }, []);
  }
  function C(f, y) {
    if (o.has(f.operator)) {
      const a = o.get(f.operator);
      return a && a(f.target, f.param, f.value, y) || !1;
    }
    return !1;
  }
  function b(f, y) {
    return k(f).reduce((v, i) => v && C(i, y), !0);
  }
  function x(f, y) {
    const a = Object.keys(f), u = a.includes("allOf"), v = a.includes("anyOf"), i = u || v, d = (i ? f[i ? u ? "allOf" : "anyOf" : "allOf"] : [f]).map((S) => b(S, y));
    return u ? !d.includes(!1) : d.includes(!0);
  }
  return { parseValueSchema: x };
}
const rt = {
  convertTo: (e, t, r, o) => {
    e.appearance || (e.appearance = {}), e.appearance[t] = r;
  },
  convertFrom: (e, t, r) => e.appearance ? e.appearance[t] : e[t]
}, ot = {
  convertFrom: (e, t, r) => e.buttons && e.buttons.length ? `共 ${e.buttons.length} 项` : "无"
}, nt = {
  convertTo: (e, t, r, o) => {
    e.editor && (e.editor[t] = r);
  },
  convertFrom: (e, t, r) => e.editor && Object.prototype.hasOwnProperty.call(e.editor, t) ? e.editor[t] : e[t]
}, it = {
  button: { type: "button", name: "按钮" },
  "response-toolbar": { type: "response-toolbar", name: "工具栏" },
  "response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
  "content-container": { type: "content-container", name: "容器" },
  "input-group": { type: "input-group", name: "文本" },
  textarea: { type: "textarea", name: "多行文本" },
  lookup: { type: "lookup", name: "帮助" },
  "number-spinner": { type: "number-spinner", name: "数值" },
  "date-picker": { type: "date-picker", name: "日期" },
  switch: { type: "switch", name: "开关" },
  "radio-group": { type: "radio-group", name: "单选组" },
  "check-box": { type: "check-box", name: "复选框" },
  "check-group": { type: "check-group", name: "复选框组" },
  "combo-list": { type: "combo-list", name: "下拉列表" },
  "response-form": { type: "response-form", name: "卡片面板" },
  "response-layout": { type: "response-layout", name: "布局容器", icon: "response-layout-3" },
  "response-layout-item": { type: "response-layout-item", name: "布局", icon: "response-layout-1" },
  "tree-grid": { type: "tree-grid", name: "树表格" },
  "tree-grid-column": { type: "tree-grid-column", name: "树表格列" },
  "data-grid": { type: "data-grid", name: "表格" },
  "data-grid-column": { type: "data-grid-column", name: "表格列" },
  module: { type: "Module", name: "模块" },
  component: { type: "component", name: "组件" },
  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: "分组面板" },
  "section-toolbar": { type: "section-toolbar", name: "分组面板工具栏" },
  "section-toolbar-item": { type: "section-toolbar-item", name: "分组面板按钮" },
  splitter: { type: "splitter", name: "分栏面板" },
  "splitter-pane": { type: "splitter-pane", name: "分栏面板项", dependentParentControl: "Splitter" },
  "component-ref": { type: "component-ref", name: "组件引用节点" },
  uploader: { type: "uploader", name: "附件上传" },
  "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: "抽屉" },
  "external-container": { type: "external-container", name: "外部容器", icon: "content-container" },
  "list-nav": { type: "list-nav", name: "列表导航" },
  "list-view": { type: "list-view", name: "列表" },
  "filter-bar": { type: "filter-bar", name: "筛选条" },
  "language-textbox": { type: "language-textbox", name: "多语输入框" },
  image: { type: "image", name: "图像" },
  "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" },
  calendar: { type: "calendar", name: "日历", icon: "date-picker" },
  wizard: { type: "wizard", name: "向导", icon: "wizard" },
  "wizard-page": { type: "wizard-page", name: "向导页", icon: "wizard" },
  "wizard-page-detail": { type: "wizard-page-detail", name: "向导详情", icon: "wizard" },
  step: { type: "step", name: "步骤条", icon: "step" },
  "dynamic-form": { type: "dynamic-form", name: "动态表单" }
}, at = {
  convertFrom: (e, t, r) => {
    var p;
    const o = e.editor && e.editor[t] ? e.editor[t] : e[t];
    return ((p = it[o]) == null ? void 0 : p.name) || o;
  }
}, st = {
  convertTo: (e, t, r, o) => {
    e[t] = e[t];
  },
  convertFrom: (e, t, r) => e.editor ? r.getRealEditorType(e.editor.type) : ""
}, lt = {
  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, r) => {
    if (e.formatter) {
      if (t === "trueText")
        return e.formatter.trueText;
      if (t === "falseText")
        return e.formatter.falseText;
      if (t === "prefix")
        return e.formatter.prefix;
      if (t === "suffix")
        return e.formatter.suffix;
      if (t === "precision")
        return e.formatter.precision;
      if (t === "decimal")
        return e.formatter.decimal;
      if (t === "thousand")
        return e.formatter.thousand;
      if (t === "dateFormat")
        return e.formatter.dateFormat || "yyyy-MM-dd";
      if (t === "customFormat")
        return e.formatter.customFormat;
      if (t === "type")
        return e.formatter.type || "none";
      if (t === "customFormat")
        return e.formmater.customFormat;
    }
    return "none";
  }
}, ct = {
  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 = [
      {
        text: "编辑",
        type: "primary",
        command: "edit"
      },
      {
        text: "删除",
        type: "danger",
        command: "remove"
      }
    ]), t === "enableType" && r === "custom" && (e.command.enable = !0, e.command.commands = [
      {
        value: "add",
        text: "增加",
        type: "link"
      },
      {
        value: "edit",
        text: "编辑",
        type: "danger"
      },
      {
        value: "remove",
        text: "删除",
        type: "remove"
      }
    ]), t === "enableType" && r === "unable" && (e.command.enable = !1);
  },
  convertFrom: (e, t, r) => {
    var o, p;
    if (e.command) {
      if (t === "enableType") {
        const k = (p = (o = e.command) == null ? void 0 : o.commands) == null ? void 0 : p.find((C) => C.command === "edit" && C.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;
      if (t === "columnWidth")
        return e.command.columnWidth || 200;
    }
    return "";
  }
}, ut = {
  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"));
  },
  convertFrom: (e, t, r) => {
    if (e.column) {
      if (t === "fitColumns")
        return e.column.fitColumns;
      if (t === "fitMode")
        return e.column.fitMode;
    }
    return "";
  }
}, dt = {
  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,
      groupFields: []
    });
  },
  convertFrom: (e, t, r) => {
    var o, p;
    return t === "customSummaryStyle" ? e.summary.customSummaryStyle : t === "position" ? ((o = e.summary) == null ? void 0 : o[t]) || "bottom" : t === "customRender" ? ((p = e.summary) == null ? void 0 : p[t]) || "" : e.summary && t === "enable" ? e.summary.enable : e.type === "data-grid-column" ? e.enableSummary === void 0 ? !1 : e.enableSummary : "";
  }
}, ft = {
  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,
      groupFields: [],
      showSummary: !1,
      customRender: ""
    });
  },
  convertFrom: (e, t, r) => {
    if (e.group) {
      if (t === "enable")
        return e.group.enable;
      if (t === "showSummary")
        return e.group.showSummary;
      if (t === "customRender")
        return e.group.customRender;
      if (t === "groupFields")
        return e.group.groupFields;
    }
  }
}, mt = {
  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;
    }
  }
}, pt = {
  convertTo: (e, t, r, o) => {
    e.pagination || (e.pagination = {}), t === "sizeLimits" ? e.pagination.sizeLimits = r.split(",") : e.pagination[t] = r;
  },
  convertFrom: (e, t, r) => e.pagination ? t === "sizeLimits" ? e.pagination.sizeLimits.join(",") : e.pagination[t] : e[t]
}, gt = {
  convertTo: (e, t, r, o) => {
    e.rowNumber || (e.rowNumber = {}), e.rowNumber[t] = r;
  },
  convertFrom: (e, t, r) => e.rowNumber ? e.rowNumber[t] : e[t]
}, bt = {
  convertTo: (e, t, r, o) => {
    e.selection || (e.selection = {}), e.selection[t] = r;
  },
  convertFrom: (e, t, r) => {
    var o, p;
    return t === "showCheckbox" ? (o = e.selection) != null && o.multiSelect ? !0 : (p = e.selection) == null ? void 0 : p.showCheckbox : e.selection ? e.selection[t] : e[t];
  }
}, vt = {
  convertFrom: (e, t, r) => e[t] && e[t].length ? `共 ${e[t].length} 项` : ""
}, yt = {
  convertFrom: (e, t) => e[t] || "",
  convertTo: (e, t, r) => {
    e[t] = r;
  }
}, ht = {
  convertTo: (e, t, r, o) => {
    e.size || (e.size = {}), e.size[t] = r;
  },
  convertFrom: (e, t, r) => e.size ? e.size[t] : e[t]
}, wt = {
  convertFrom: (e, t, r) => {
    var o, p;
    return (o = e.formatter) != null && o.data && t === "formatterEnumData" && !e.formatterEnumData ? (p = e.formatter) == null ? void 0 : p.data : e.formatterEnumData;
  }
}, Ct = {
  convertTo: (e, t, r, o) => {
    e.sort || (e.sort = {}), e.sort[t] = r;
  },
  convertFrom: (e, t, r) => {
    var o, p;
    if (t === "mode")
      return ((o = e.sort) == null ? void 0 : o.mode) || "client";
    if (t === "multiSort")
      return !!((p = e.sort) != null && p.multiSort);
  }
}, Tt = {
  convertTo: (e, t, r, o) => {
    e.filter || (e.filter = {}), e.filter[t] = r;
  },
  convertFrom: (e, t, r) => {
    var o;
    if (t === "mode")
      return ((o = e.filter) == null ? void 0 : o.mode) || "client";
  }
}, kt = {
  convertTo: (e, t, r, o) => {
    e.rowOption ? e.rowOption[t] = r : e.rowOption = {
      [t]: r
    };
  },
  convertFrom: (e, t, r) => {
    if (e.rowOption) {
      if (t === "customRowStyle")
        return e.rowOption.customRowStyle;
      if (t === "customCellStyle")
        return e.rowOption.customCellStyle;
      if (t === "height")
        return e.rowOption.height;
    }
    return "";
  }
}, St = {
  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 = `
    <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 = ""));
  },
  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" : ""
};
function me(e, t, r) {
  const o = /* @__PURE__ */ new Map([
    ["/converter/appearance.converter", rt],
    ["/converter/buttons.converter", ot],
    ["/converter/property-editor.converter", nt],
    ["/converter/items-count.converter", vt],
    ["/converter/type.converter", at],
    ["/converter/change-editor.converter", st],
    ["/converter/change-formatter.converter", lt],
    ["/converter/column-command.converter", ct],
    ["/converter/column-option.converter", ut],
    ["/converter/summary.converter", dt],
    ["/converter/group.converter", ft],
    ["/converter/form-group-label.converter", yt],
    ["/converter/field-selector.converter", mt],
    ["/converter/pagination.converter", pt],
    ["/converter/row-number.converter", gt],
    ["/converter/grid-selection.converter", bt],
    ["/converter/size.converter", ht],
    ["/converter/change-formatter-enum.converter", wt],
    ["/converter/grid-sort.converter", Ct],
    ["/converter/grid-filter.converter", Tt],
    ["/converter/row-option.converter", kt],
    ["/converter/change-formatter-type.converter", St]
  ]), p = /* @__PURE__ */ new Map([
    ["string", { type: "input-group", enableClear: !1 }],
    ["boolean", {
      type: "combo-list",
      textField: "name",
      valueField: "value",
      idField: "value",
      enableClear: !1,
      editable: !1,
      data: [
        {
          value: !0,
          name: "是"
        },
        {
          value: !1,
          name: "否"
        }
      ]
    }],
    ["enum", { type: "combo-list", maxHeight: 128, enableClear: !1, editable: !1 }],
    ["array", { type: "button-edit" }],
    ["number", { type: "number-spinner", placeholder: "" }],
    ["events-editor", { type: "events-editor", hide: !0 }],
    ["multiLanguage", { type: "language-textbox" }]
  ]), k = tt();
  function C(i, n) {
    return () => k.parseValueSchema(i, n);
  }
  function b(i, n, s) {
    return i.includes("visible") && n.visible !== void 0 ? typeof n.visible == "boolean" ? () => !!n.visible : n.visible === void 0 ? !0 : C(n.visible, s) : () => !0;
  }
  function x(i, n, s) {
    return i.includes("readonly") && n.readonly !== void 0 ? typeof n.readonly == "boolean" ? () => !!n.readonly : C(n.readonly, s) : () => !1;
  }
  function f(i, n) {
    const s = i.$converter || n;
    return typeof s == "string" && s && o.has(s) ? o.get(s) || null : s || null;
  }
  function y(i, n, s, d, h, S = "", R = "") {
    return Object.keys(i).map((T) => {
      const M = E(1), l = T, c = i[T], g = Object.keys(c), O = c.title, F = c.type, B = p.get(F) || { type: "input-group", enableClear: !1 }, j = c.editor ? Object.assign({}, B, c.editor) : Object.assign({}, B), z = b(g, c, n), L = x(g, c, n);
      j.readonly = j.readonly === void 0 ? L() : j.readonly;
      const A = c.type === "cascade" ? y(c.properties, n, s, d, h, S, R) : [], q = !0;
      let w = f(c, R);
      const $ = D({
        get() {
          if (M.value) {
            if (["class", "style"].find((Se) => Se === l) && !w && (w = o.get("/converter/appearance.converter") || null), w && w.convertFrom)
              return w.convertFrom(s, T, h, S);
            const H = s[T];
            return Object.prototype.hasOwnProperty.call(c, "defaultValue") && (H === void 0 || typeof H == "string" && H === "") ? c.type === "boolean" ? c.defaultValue : c.defaultValue || "" : H;
          }
          return null;
        },
        set(H) {
          M.value += 1, w && w.convertTo ? (w.convertTo(d, T, H, h, S), w.convertTo(s, T, H, h, S)) : (d[T] = H, s[T] = H);
        }
      }), { refreshPanelAfterChanged: N, description: I, isExpand: Te, parentPropertyID: ke } = c, X = { propertyID: l, propertyName: O, propertyType: F, propertyValue: $, editor: j, visible: z, readonly: L, cascadeConfig: A, hideCascadeTitle: q, refreshPanelAfterChanged: N, description: I, isExpand: Te, parentPropertyID: ke };
      return n[l] = X, X;
    });
  }
  function a(i, n, s = {}) {
    const d = {}, h = e[i];
    return h && h.categories ? Object.keys(h.categories).map((R) => {
      const P = h.categories[R], T = P == null ? void 0 : P.title, M = y(P.properties || {}, d, {}, s, n);
      return { categoryId: R, categoryName: T, properties: M };
    }) : [];
  }
  function u(i, n, s, d, h = "") {
    const S = n.$ref.schema, R = n.$ref.converter, P = s[S], T = P.type, M = r(P), l = {}, c = e[T];
    if (c && c.categories) {
      const g = c.categories[i], O = g == null ? void 0 : g.title;
      R && Object.keys(g.properties).forEach((j) => {
        g.properties[j].$converter = R;
      });
      const F = (g == null ? void 0 : g.properties) || {}, B = y(F, l, M, P, d, h);
      return { categoryId: i, categoryName: O, properties: B };
    }
    return { categoryId: i, categoryName: "", properties: [] };
  }
  function v(i, n, s, d, h) {
    const S = i.type, R = r(i), P = {};
    let T = h || e[S];
    if (!(T && Object.keys(T).length > 0) && s && s.getPropConfig && (T = s.getPropConfig(d)), T && T.categories) {
      const l = [];
      return Object.keys(T.categories).map((c) => {
        const g = T.categories[c];
        if (g.$ref) {
          l.push(u(c, g, i, n, d));
          return;
        }
        const O = g == null ? void 0 : g.title, F = g == null ? void 0 : g.tabId, B = g == null ? void 0 : g.tabName, j = g == null ? void 0 : g.hide, z = g == null ? void 0 : g.hideTitle, L = y(g.properties || {}, P, R, i, n, d, g.$converter), { setPropertyRelates: A } = g, q = g == null ? void 0 : g.parentPropertyID;
        l.push({ categoryId: c, categoryName: O, tabId: F, tabName: B, hide: j, properties: L, hideTitle: z, setPropertyRelates: A, parentPropertyID: q });
      }), l;
    }
    return [];
  }
  return {
    getPropertyConfigBySchema: v,
    getPropertyConfigByType: a,
    propertyConverterMap: o
  };
}
const pe = {}, ge = {};
me(pe, ge, Ye);
const be = {}, ve = {}, { resolveSchemaWithDefaultValue: xt } = ue(be, ve), ye = {}, he = {};
me(ye, he, xt);
function Ft(e, t, r = /* @__PURE__ */ new Map(), o = (C, b, x, f) => b, p = {}, k = (C) => C) {
  return de[t.title] = t, fe[t.title] = o, pe[t.title] = p, ge[t.title] = k, be[t.title] = t, ve[t.title] = o, ye[t.title] = p, he[t.title] = k, (C = {}, b = !0) => {
    if (!b)
      return et(C, r);
    const x = Ke(C, t, r), f = Object.keys(e).reduce((y, a) => (y[a] = e[a].default, y), {});
    return Object.assign(f, x);
  };
}
function Pt(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((p) => p.id === t);
      if (o)
        return o;
    }
  }
  return null;
}
function $t() {
  function e(t, r) {
    const { footerToolbar: o, headerToolbar: p } = t, k = ((o == null ? void 0 : o.buttons) || []).concat((p == null ? void 0 : p.buttons) || []);
    if (!k || k.length < 1)
      return null;
    const [C, b] = r.payloads, x = Pt(k, b);
    return x ? x.onClick || x.click : null;
  }
  return {
    resolve: e
  };
}
const Q = {
  id: { type: String, required: !0 },
  /** 背景色 */
  backgroundColor: { type: String, default: "#fff" },
  /**
   * 关闭对话框前事件， 是个函数，返回true或者false
   */
  beforeClose: { type: Function, default: () => !0 },
  /**
   * 自定义抽屉样式 
   * @deprecated  请使用 customClass
   */
  class: { type: String, default: "" },
  /**
   * 自定义抽屉蒙层样式
   */
  modalClass: { type: String, default: "" },
  /** 高度 */
  height: { type: String, default: 300 },
  /** 打开关闭抽屉 */
  modelValue: { type: Boolean, default: !1 },
  /** 从哪个位置呼出 */
  position: { type: String, default: "right" },
  /** 抽屉插入位置 */
  appendTo: { type: String, default: "body" },
  /** 是否展示打开抽屉入口 */
  showEntry: { type: Boolean, default: !1 },
  /** 是否展示关闭按钮 */
  showClose: { type: Boolean, default: !0 },
  /** 是否展示遮罩层 */
  // showMask: { type: Boolean, default: true },
  /** 点击遮罩是否关闭抽屉 */
  allowClickMaskToClose: { type: Boolean, default: !0 },
  /** 抽屉是否透明 */
  transparent: { type: Boolean, default: !1 },
  /** 标题 */
  title: { type: String, default: "" },
  /** 宽度 */
  width: { type: String, default: 300 },
  /**
   * 渲染的DOM容器
   */
  host: { type: Object, default: "body" },
  showHeader: { type: Boolean, default: !0 },
  headerToolbar: { type: Object, default: {} },
  headerTemplate: { type: Object, default: null },
  showFooter: { type: Boolean, default: !0 },
  footerTemplate: { type: Object, default: null },
  footerToolbar: { type: Object, default: {} },
  footerHeight: { type: Number, default: 60 },
  buttons: { type: Array, default: [] },
  customClass: { type: String, default: "" },
  customStyle: { type: String, default: "" }
};
Ft(Q, se, ae, le);
const Rt = $t();
function Dt() {
  return { drawerLocale: {
    cancel: ee.getLocaleValue("drawer.cancel") || "取消",
    confirm: ee.getLocaleValue("drawer.confirm") || "确定"
  } };
}
const Et = /* @__PURE__ */ re({
  name: "FDrawer",
  props: Q,
  emits: ["afterClose", "update:modelValue", "click"],
  setup(e, t) {
    Dt();
    const r = E(e.modelValue), o = E(e.buttons), p = E(!1), k = 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
    })), C = D(() => ({
      opacity: e.transparent ? 0 : 1
    })), b = D(() => {
      const l = {};
      return e.maskClass && e.maskClass.split(" ").forEach((c) => {
        l[c] = !0;
      }), {
        "f-drawer-mask f-utils-absolute-all": !0,
        ...l
      };
    }), x = D(() => {
      const l = {};
      return e.customClass && e.customClass.split(" ").forEach((c) => {
        l[c] = !0;
      }), {
        "f-drawer-wrapper": !0,
        [`f-drawer-wrapper-${e.position}`]: !0,
        ...l
      };
    }), f = D(() => {
      const l = e.width;
      return typeof l == "string" ? l : typeof l == "number" ? `${l}px` : "20%";
    }), y = D(() => {
      const l = e.height;
      return typeof l == "string" ? l : typeof l == "number" ? `${l}px` : "20%";
    }), a = D(() => {
      let l = "-6px 0";
      switch (e.position) {
        case "left":
          l = "6px 0";
          break;
        case "right":
          l = "-6px 0";
          break;
        case "top":
          l = "0 6px";
          break;
        case "bottom":
          l = "0 -6px";
          break;
      }
      const c = {
        width: f.value,
        height: y.value,
        backgroundColor: e.backgroundColor,
        maxWidth: "100%"
      };
      return e.transparent && (c.boxShadow = `${l} 8px 0 rgba(31, 35, 41, .1)`), xe(c, e == null ? void 0 : e.customStyle);
    }), u = D(() => `f-drawer-${e.position}`), v = (l) => {
      Promise.resolve().then(() => {
        var c;
        return (c = e.beforeClose) == null ? void 0 : c.call(e);
      }).then((c) => {
        c && (r.value = !1, t.emit("update:modelValue", r.value), t.emit("afterClose"));
      });
    };
    _(() => e.modelValue, (l, c) => {
      l !== c && (r.value = l);
    });
    const i = (l, c) => {
      t.emit("click", l, c);
    }, n = {
      close: () => {
        r.value = !1;
      }
    };
    async function s(l, c) {
      l.handle && await l.handle(c, n) && t.emit("closed", c);
    }
    const d = (l, c) => m(Ee, {
      class: c,
      alignment: "right",
      items: l,
      onClick: i
    }, null);
    function h() {
      var l, c, g, O;
      if ((c = (l = e.footerToolbar) == null ? void 0 : l.buttons) != null && c.length && (e.footerToolbar.visible === void 0 || e.footerToolbar.visible)) {
        const F = {
          "f-utils-fill": !0
        };
        return (O = (g = e.footerToolbar) == null ? void 0 : g.appearance) != null && O.class && (F[e.footerToolbar.appearance.class] = !0), d(e.footerToolbar.buttons, F);
      }
      return o.value && !!o.value.length && o.value.map((F) => {
        const B = E(F.disabled);
        return m("button", {
          id: F.id,
          type: "button",
          disabled: B.value,
          class: F.class + (F.iconClass ? " btn-icontext" : ""),
          onClick: (j) => {
            s(F, j);
          }
        }, [!!F.iconClass && m("i", {
          class: F.iconClass
        }, null), F.text]);
      });
    }
    function S() {
      return e.footerTemplate && typeof e.footerTemplate == "function" ? e.footerTemplate() : t.slots.footerTemplate ? t.slots.footerTemplate() : h();
    }
    function R() {
      var c, g;
      const l = {
        "f-utils-fill": !0
      };
      return (g = (c = e.headerToolbar) == null ? void 0 : c.appearance) != null && g.class && (l[e.headerToolbar.appearance.class] = !0), e.headerTemplate && typeof e.headerTemplate == "function" ? e.headerTemplate() : t.slots.headerTemplate ? t.slots.headerTemplate() : m(ne, null, [m("div", {
        class: "f-drawer-title",
        title: e.title
      }, [e.title]), e.headerToolbar && (e.headerToolbar.visible === void 0 || e.headerToolbar.visible) && m("div", {
        class: "f-utils-fill-flex-row mx-2 col-7"
      }, [d(e.headerToolbar.buttons || [], l)]), e.showClose && m("div", {
        class: "f-drawer-close"
      }, [m("span", {
        class: "f-icon f-icon-close",
        onClick: W((O) => {
          v();
        }, ["stop"])
      }, null)])]);
    }
    const P = E({});
    function T() {
      const l = Fe();
      P.value = {
        zIndex: l < 1e3 ? 1e3 : l
      };
    }
    function M() {
      return p.value ? !0 : typeof e.host == "string" ? e.host === "body" ? !0 : !!document.querySelector(e.host) : !!e.host;
    }
    return p.value = M(), oe(() => {
      p.value = M();
    }), $e(() => {
      r.value && T();
    }), t.expose({
      open: () => {
        r.value = !0;
      },
      close: () => {
        v();
      }
    }), () => p.value ? m(Re, {
      to: e.host
    }, {
      default: () => [m("div", {
        class: k.value,
        id: e.id,
        style: P.value
      }, [m(Z, {
        name: "f-drawer-mask",
        appear: !0
      }, {
        default: () => [r.value && m("div", {
          class: b.value,
          style: C.value,
          onClick: W((l) => {
            e.allowClickMaskToClose && v();
          }, ["stop"])
        }, null)]
      }), m(Z, {
        name: u.value
      }, {
        default: () => {
          var l, c;
          return [r.value && m("div", {
            class: x.value,
            style: a.value
          }, [m("div", {
            class: "f-drawer-container"
          }, [e.showHeader && m("div", {
            class: "f-drawer-header align-items-center"
          }, [R()]), m("div", {
            class: "f-drawer-body f-utils-fill",
            style: "overflow: auto;"
          }, [(c = (l = t.slots).default) == null ? void 0 : c.call(l)]), e.showFooter && m("div", {
            class: "f-drawer-footer px-2",
            style: {
              height: e.footerHeight + "px"
            }
          }, [S()])])])];
        }
      })])]
    }) : null;
  }
});
class Mt extends qe {
  constructor(t, r) {
    super(t, r);
  }
  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;
  }
  headerPropertyConfig(t) {
    return {
      title: "页头",
      description: "Behavior",
      properties: {
        showHeader: {
          title: "显示页头",
          description: "是否显示页头",
          type: "boolean",
          refreshPanelAfterChanged: !0
        },
        customHeader: {
          title: "自定义页头",
          description: "是否自定义页头",
          type: "boolean",
          refreshPanelAfterChanged: !0,
          visible: t.showHeader !== !1
        },
        showClose: {
          title: "显示关闭按钮",
          description: "是否显示关闭按钮",
          type: "boolean",
          visible: t.showHeader !== !1 && !t.customHeader
        },
        title: {
          title: "标题",
          description: "标题",
          type: "string",
          visible: t.showHeader !== !1 && !t.customHeader
        },
        headerTemplate: {
          title: "页头模板",
          type: "string",
          description: "设置标题HTML模板，替代整个页头区域",
          editor: {
            type: "code-editor",
            language: "html"
          },
          visible: t.showHeader !== !1 && t.customHeader === !0
        }
      },
      setPropertyRelates: (r, o) => {
        if (r)
          switch (r && r.propertyID) {
            case "title": {
              r.needRefreshControlTree = !0;
              break;
            }
          }
      }
    };
  }
  footerPropertyConfig(t) {
    return {
      title: "页脚",
      description: "Behavior",
      properties: {
        showFooter: {
          title: "显示页脚",
          description: "是否显示页脚",
          type: "boolean",
          default: !0,
          refreshPanelAfterChanged: !0
        },
        footerHeight: {
          title: "页脚高度(px)",
          description: "页脚高度, 单位px; 最小30px, 最大1999px",
          type: "number",
          editor: {
            type: "number-spinner",
            useThousands: !1,
            min: 30,
            max: 1999,
            needValid: !0
          },
          visible: t.showFooter !== !1
        },
        footerContentType: {
          title: "页脚内容类型",
          description: "页脚内容类型",
          type: "select",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "combo-list",
            textField: "name",
            valueField: "value",
            idField: "value",
            editable: !1,
            data: [{ value: "toolbar", name: "工具栏" }, { value: "html", name: "自定义模板" }]
          },
          visible: t.showFooter !== !1
        },
        footerTemplate: {
          title: "页脚模板",
          type: "string",
          description: "设置页脚HTML模板，替换页脚工具栏",
          editor: {
            type: "code-editor",
            language: "html"
          },
          visible: t.footerContentType === "html" && t.showFooter !== !1
        }
      },
      setPropertyRelates: (r, o) => {
        if (r)
          switch (r && r.propertyID) {
            case "showFooter": {
              o.footerToolbar = { id: o.id + "_footer-toolbar", type: "drawer-toolbar", buttons: [] }, o.footerTemplate = "", o.footerContentType = "toolbar";
              break;
            }
            case "footerContentType": {
              this.resetFooterContent(o, r.propertyValue);
              break;
            }
          }
      }
    };
  }
  getBehaviorConfig() {
    this.propertyConfig.categories.behavior = {
      title: "行为",
      description: "Behavior",
      properties: {
        position: {
          title: "显示位置",
          description: "抽屉显示位置",
          type: "select",
          default: "right",
          editor: {
            type: "combo-list",
            textField: "name",
            valueField: "value",
            editable: !1,
            data: [
              { value: "left", name: "左侧" },
              { value: "right", name: "右侧" }
            ]
          }
        },
        width: {
          title: "宽度(px)",
          description: "抽屉宽度, 单位px; 最小200px, 最大1999px",
          type: "number",
          editor: {
            type: "number-spinner",
            useThousands: !1,
            min: 200,
            max: 1999,
            needValid: !0
          }
        },
        transparent: {
          title: "透明遮罩层",
          description: "透明遮罩层",
          type: "boolean"
        },
        allowClickMaskToClose: {
          title: "点击遮罩是否关闭",
          description: "点击抽屉以外区域是否关闭抽屉",
          type: "boolean"
        }
      }
    };
  }
  resetFooterContent(t, r = "toolbar") {
    switch (r) {
      case "toolbar": {
        t.footerTemplate = "";
        break;
      }
      case "html": {
        t.footerToolbar = { id: t.id + "_footer-toolbar", type: "drawer-toolbar", buttons: [] };
        break;
      }
    }
  }
  eventPropertyConfig(t) {
    const r = this, o = [
      {
        label: "beforeClose",
        name: "关闭前事件"
      }
    ], p = r.eventsEditorUtils.formProperties(t, r.viewModelId, o);
    return {
      title: "事件",
      hideTitle: !0,
      properties: r.createBaseEventProperty(p),
      // 这个属性，标记当属性变更得时候触发重新更新属性
      refreshPanelAfterChanged: !0,
      tabId: "commands",
      tabName: "交互",
      setPropertyRelates(C, b) {
        const x = C.propertyValue;
        delete b[r.viewModelId], x && r.eventsEditorUtils.saveRelatedParameters(b, r.viewModelId, x.events, x);
        const f = r.designViewModelUtils.getDgViewModel(r.viewModelId);
        f && r.designViewModelField && f.changeField(r.designViewModelField.id, { valueChanging: b.fieldValueChanging, valueChanged: b.fieldValueChanged });
      }
    };
  }
}
function jt(e, t, r) {
  const o = new je();
  function p(n) {
    if (!Ie().basalDragulaRuleForContainer(n, r))
      return !1;
    const { canAccept: d } = o.getTemplateRule(e, r);
    return d;
  }
  function k() {
    return !1;
  }
  function C() {
    return !1;
  }
  function b() {
    return !0;
  }
  function x() {
    return "position: initial !important;border: none !important;left: 0;right: 0;padding: 0;";
  }
  function f(n) {
    const s = new Mt(n, r), { schema: d } = e;
    return s.getPropertyConfig(d);
  }
  function y(n) {
    return t;
  }
  function a() {
    e.designerItemElementRef.value && De(() => {
      Be(t.value);
    });
  }
  function u(n) {
    if (!n)
      return;
    const { changeObject: s } = n;
    s && ["width", "position"].includes(s.propertyID) && a();
  }
  function v(n, s, d) {
    var h;
    (h = n == null ? void 0 : n.buttons) != null && h.length && n.buttons.map((S) => {
      var R;
      d.set(S.id, {
        componentTitle: S.text,
        parentPathName: `${s} > ${S.text}`
      }), (R = S.children) != null && R.length && S.children.map((P) => {
        d.set(P.id, {
          componentTitle: P.text,
          parentPathName: `${s} > ${P.text}`
        });
      });
    });
  }
  function i() {
    if (e && r) {
      const { formSchemaUtils: n } = r, s = n.getControlBasicInfoMap(), { schema: d } = e, h = d.title || Oe.drawer.name;
      s.set(d.id, {
        componentTitle: h,
        parentPathName: h
      }), v(d.headerToolbar, h, s), v(d.footerToolbar, h, s);
    }
  }
  return {
    canAccepts: p,
    checkCanDeleteComponent: k,
    checkCanMoveComponent: C,
    hideNestedPaddingInDesginerView: b,
    getStyles: x,
    getPropsConfig: f,
    getDraggableDesignItemElement: y,
    onPropertyChanged: u,
    setComponentBasicInfoMap: i
  };
}
const we = Object.assign({}, Q, {
  componentId: { type: String, default: "" },
  footerContentType: { type: String, default: "toolbar" },
  customHeader: { type: Boolean, default: !1 },
  showWrapperInCanvas: { type: Boolean, default: !1 }
}), Ot = "https://json-schema.org/draft/2020-12/schema", It = "https://farris-design.gitee.io/section-toolbar-item.schema.json", Bt = "drawer-toolbar-item", Nt = "A Farris Toolbar Item Component", Ht = "object", Lt = {
  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
  }
}, zt = [
  "id",
  "type",
  "text"
], At = {
  onClick: "点击事件"
}, qt = {
  $schema: Ot,
  $id: It,
  title: Bt,
  description: Nt,
  type: Ht,
  properties: Lt,
  required: zt,
  events: At
}, Vt = "https://json-schema.org/draft/2020-12/schema", _t = "https://farris-design.gitee.io/section-toolbar.schema.json", Wt = "drawer-toolbar", Ut = "A Farris Toolbar Component", Gt = "object", Zt = {
  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
  }
}, Jt = [
  "id",
  "type",
  "buttons"
], Qt = {
  onClick: "点击事件"
}, Xt = {
  $schema: Vt,
  $id: _t,
  title: Wt,
  description: Ut,
  type: Gt,
  properties: Zt,
  required: Jt,
  events: Qt
}, Yt = Object.assign({}, ze), Kt = J(Yt, qt, void 0, ce), er = Object.assign({}, Me, {
  componentId: { type: String, default: "" }
}), V = J(
  er,
  Xt,
  Ve,
  ce
), U = /* @__PURE__ */ re({
  name: "FDrawerDesign",
  props: we,
  setup(e, t) {
    const r = E(), o = E(), p = e.id + "_footer-toolbar", k = e.id + "_header-toolbar", C = G("designer-host-service"), b = G("design-item-context"), x = jt(b, o, C), f = Ne(r, b, x);
    b.schema.footerToolbar = b.schema.footerToolbar || {
      id: p,
      type: "drawer-toolbar",
      buttons: []
    };
    const y = E(b.schema.footerToolbar), a = E(V(y.value));
    _(() => b.schema.footerToolbar, () => {
      y.value = b.schema.footerToolbar, a.value = V(y.value);
    }, {
      deep: !0
    });
    const u = G("design-item-context"), v = D(() => [...a.value.items]);
    b.schema.headerToolbar = b.schema.headerToolbar || {
      id: k,
      type: "drawer-toolbar",
      buttons: []
    };
    const i = E(b.schema.headerToolbar), n = E(V(i.value));
    _(() => b.schema.headerToolbar, () => {
      i.value = b.schema.headerToolbar, n.value = V(i.value);
    }, {
      deep: !0
    });
    const s = D(() => [...n.value.items]);
    oe(() => {
      r.value.componentInstance = f;
    }), t.expose(f.value);
    const d = E(e.modelValue || b.schema.showWrapperInCanvas);
    _(() => e.modelValue, () => {
      d.value = e.modelValue;
    });
    const h = D(() => {
      const w = ["f-drawer-wrapper", `f-drawer-wrapper-${e.position}`, e.wrapperClass];
      return d.value || w.push("d-none"), w;
    }), S = D(() => {
      const w = e.width, $ = e.height, N = typeof w == "string" ? w : typeof w == "number" ? `${w}px` : "20%", I = typeof $ == "string" ? $ : typeof $ == "number" ? `${$}px` : "20%";
      return {
        width: N,
        height: I,
        backgroundColor: e.backgroundColor,
        maxWidth: "100%"
      };
    }), R = D(() => ["f-drawer-entry", `f-drawer-entry-${e.position}`, e.entryClass]), P = D(() => `f-icon-arrow-chevron-${{
      left: "right",
      right: "left",
      top: "down",
      bottom: "up"
    }[e.position] ?? "right"}`), T = () => {
      d.value = !1, b.schema.showWrapperInCanvas = !1;
    }, M = () => {
      d.value = !0, b.schema.showWrapperInCanvas = !0;
    }, l = () => m("div", {
      class: R.value,
      onClick: M
    }, [t.slots.button ? t.slots.button() : m("div", {
      class: "f-drawer-entry-icon"
    }, [m("span", {
      c