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

Farris Vue, a Farris Design based Vue3 component library.

var oe = Object.defineProperty;
var ae = (o, e, t) => e in o ? oe(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
var z = (o, e, t) => ae(o, typeof e != "symbol" ? e + "" : e, t);
import { ref as b, computed as V, defineComponent as F, provide as _, createVNode as O, inject as x, onMounted as X } from "vue";
import { isPlainObject as W, cloneDeep as $ } from "lodash-es";
import { getCustomClass as j, getCustomStyle as L } from "../common/index.esm.js";
const Y = {}, G = {};
function H(o) {
  const { properties: e, title: t, ignore: n } = o, i = n && Array.isArray(n), r = Object.keys(e).reduce((s, u) => ((!i || !n.find((l) => l === u)) && (s[u] = e[u].type === "object" && e[u].properties ? H(e[u]) : $(e[u].default)), s), {});
  if (t && (!i || !n.find((s) => s === "id"))) {
    const s = t.toLowerCase().replace(/-/g, "_");
    r.id = `${s}_${Math.random().toString().slice(2, 6)}`;
  }
  return r;
}
function le(o) {
  const { properties: e, title: t, required: n } = o;
  if (n && Array.isArray(n)) {
    const i = n.reduce((r, s) => (r[s] = e[s].type === "object" && e[s].properties ? H(e[s]) : $(e[s].default), r), {});
    if (t && n.find((r) => r === "id")) {
      const r = t.toLowerCase().replace(/-/g, "_");
      i.id = `${r}_${Math.random().toString().slice(2, 6)}`;
    }
    return i;
  }
  return {
    type: t
  };
}
function J(o, e = {}, t) {
  const n = Y[o];
  if (n) {
    let i = le(n);
    const r = G[o];
    return i = r ? r({ getSchemaByType: J }, i, e, t) : i, i;
  }
  return null;
}
function ce(o, e) {
  const t = H(e);
  return Object.keys(t).reduce((n, i) => (Object.prototype.hasOwnProperty.call(o, i) && (n[i] && W(n[i]) && W(o[i] || !o[i]) ? Object.assign(n[i], o[i] || {}) : n[i] = o[i]), n), t), t;
}
function Q(o, e) {
  return Object.keys(o).filter((n) => o[n] != null).reduce((n, i) => {
    if (e.has(i)) {
      const r = e.get(i);
      if (typeof r == "string")
        n[r] = o[i];
      else {
        const s = r(i, o[i], o);
        Object.assign(n, s);
      }
    } else
      n[i] = o[i];
    return n;
  }, {});
}
function ue(o, e, t = /* @__PURE__ */ new Map()) {
  const n = ce(o, e);
  return Q(n, t);
}
function pe(o = {}) {
  function e(a, c, d, p) {
    if (typeof d == "number")
      return p[a].length === d;
    if (typeof d == "object") {
      const m = Object.keys(d)[0], f = d[m];
      if (m === "not")
        return Number(p[a].length) !== Number(f);
      if (m === "moreThan")
        return Number(p[a].length) >= Number(f);
      if (m === "lessThan")
        return Number(p[a].length) <= Number(f);
    }
    return !1;
  }
  function t(a, c, d, p) {
    return p[a] && p[a].propertyValue && String(p[a].propertyValue.value) === String(d);
  }
  const n = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", t]
  ]);
  Object.keys(o).reduce((a, c) => (a.set(c, o[c]), a), n);
  function i(a, c) {
    const d = a;
    return typeof c == "number" ? [{ target: d, operator: "length", param: null, value: Number(c) }] : typeof c == "boolean" ? [{ target: d, operator: "getProperty", param: a, value: !!c }] : typeof c == "object" ? Object.keys(c).map((p) => {
      if (p === "length")
        return { target: d, operator: "length", param: null, value: c[p] };
      const m = p, f = c[p];
      return { target: d, operator: "getProperty", param: m, value: f };
    }) : [];
  }
  function r(a) {
    return Object.keys(a).reduce((d, p) => {
      const m = i(p, a[p]);
      return d.push(...m), d;
    }, []);
  }
  function s(a, c) {
    if (n.has(a.operator)) {
      const d = n.get(a.operator);
      return d && d(a.target, a.param, a.value, c) || !1;
    }
    return !1;
  }
  function u(a, c) {
    return r(a).reduce((m, f) => m && s(f, c), !0);
  }
  function l(a, c) {
    const d = Object.keys(a), p = d.includes("allOf"), m = d.includes("anyOf"), f = p || m, k = (f ? a[f ? p ? "allOf" : "anyOf" : "allOf"] : [a]).map((h) => u(h, c));
    return p ? !k.includes(!1) : k.includes(!0);
  }
  return { parseValueSchema: l };
}
const T = {
  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: "标签页工具栏按钮" },
  "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: "标签页工具栏" },
  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: "列表导航" },
  "filter-bar": { type: "filter-bar", name: "筛选条" }
}, de = {}, fe = {};
pe();
function Z(o, e, t = /* @__PURE__ */ new Map(), n = (s, u, l, a) => u, i = {}, r = (s) => s) {
  return Y[e.title] = e, G[e.title] = n, de[e.title] = i, fe[e.title] = r, (s = {}, u = !0) => {
    if (!u)
      return Q(s, t);
    const l = ue(s, e, t), a = Object.keys(o).reduce((c, d) => (c[d] = o[d].default, c), {});
    return Object.assign(a, l);
  };
}
function K(o, e) {
  return { customClass: e.class, customStyle: e.style };
}
const me = /* @__PURE__ */ new Map([
  ["appearance", K]
]);
function he(o, e, t) {
  const n = o.getSchemaByType("splitter-pane");
  return n.appearance = {
    class: "f-col-w6 f-page-content-nav"
  }, n.position = "left", e.contents.unshift(n), e;
}
function ye(o, e, t) {
  const n = o.getSchemaByType("splitter-pane");
  return n.appearance = {
    class: "f-page-content-main"
  }, n.position = "main", e.contents.push(n), e;
}
function ge(o, e, t) {
  const n = t.parentComponentInstance;
  return String(n.schema.appearance.class || "").split(" ").includes("f-page-main") && (e.appearance = { class: "f-page-content" }), he(o, e), ye(o, e), e;
}
function ve(o, e, t) {
  return e;
}
const be = "https://json-schema.org/draft/2020-12/schema", Ce = "https://farris-design.gitee.io/splitter.schema.json", Pe = "splitter", we = "A Farris Container Component", Se = "object", Ee = {
  id: {
    description: "The unique identifier for a splitter",
    type: "string"
  },
  type: {
    description: "The type string of splitter component",
    type: "string",
    default: "splitter"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  direction: {
    description: "",
    type: "string",
    default: "row",
    enum: [
      "column",
      "row"
    ]
  }
}, Me = [
  "id",
  "type",
  "contents"
], ze = {
  $schema: be,
  $id: Ce,
  title: Pe,
  description: we,
  type: Se,
  properties: Ee,
  required: Me
}, Ve = "splitter", Oe = "A Farris Container Component", ke = "object", Be = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "combo-list",
          textField: "value",
          valueField: "key",
          data: [
            {
              key: "splitter",
              value: "分栏面板"
            }
          ],
          editable: !1
        }
      }
    }
  },
  appearance: {
    description: "",
    title: "外观",
    properties: {
      class: {
        description: "组件的CSS样式",
        title: "class样式"
      },
      style: {
        description: "组件的内容样式",
        title: "style样式"
      }
    }
  }
}, Te = {
  title: Ve,
  description: Oe,
  type: ke,
  categories: Be
}, A = {
  customStyle: { type: String, default: "" },
  customClass: { type: String, default: "" },
  direction: { Type: String, default: "row" }
}, ee = Z(A, ze, me, ge, Te);
function te(o) {
  const e = b(-1), t = b(-1), n = b(0), i = b(0), r = b(!1), s = b(!1), u = V(() => ({
    display: r.value ? "block" : "none",
    left: `${n.value}px`
  })), l = V(() => ({
    display: s.value ? "block" : "none",
    top: `${i.value}px`
  })), a = V(() => ({
    display: s.value || r.value ? "block" : "none"
  }));
  function c(p) {
    const m = o.value;
    if (m) {
      const { left: f } = m.getBoundingClientRect();
      n.value = p.clientX - f;
    }
  }
  function d(p) {
    const m = o.value;
    if (m) {
      const { top: f } = m.getBoundingClientRect();
      i.value = p.clientY - f;
    }
  }
  return {
    horizontalResizeHandleStyle: u,
    verticalResizeHandleStyle: l,
    resizeOverlayStyle: a,
    showHorizontalResizeHandle: r,
    showVerticalResizeHandle: s,
    horizontalResizeBarPosition: e,
    verticalResizeBarPosition: t,
    verticalResizeHandleOffset: i,
    horizontalResizeHandleOffset: n,
    draggingHorizontalResizeHandle: c,
    draggingVerticalResizeHandle: d
  };
}
const N = /* @__PURE__ */ F({
  name: "FSplitter",
  props: A,
  emits: [],
  setup(o, e) {
    const t = b(), n = te(t), {
      horizontalResizeHandleStyle: i,
      verticalResizeHandleStyle: r,
      resizeOverlayStyle: s
    } = n;
    _("splitter", {
      useResizeHandleComposition: n
    });
    const u = V(() => j({
      "f-splitter": !0
    }, o == null ? void 0 : o.customClass)), l = V(() => {
      const a = {
        "flex-direction": o.direction === "row" ? "row" : "column"
      };
      return L(a, o == null ? void 0 : o.customStyle);
    });
    return () => O("div", {
      class: u.value,
      ref: t,
      style: l.value
    }, [e.slots.default && e.slots.default(), O("div", {
      class: "f-splitter-resize-overlay",
      style: s.value
    }, null), O("div", {
      class: "f-splitter-horizontal-resize-proxy",
      style: i.value
    }, null), O("div", {
      class: "f-splitter-vertical-resize-proxy",
      style: r.value
    }, null)]);
  }
}), Re = /* @__PURE__ */ new Map([
  ["appearance", K]
]), xe = "https://json-schema.org/draft/2020-12/schema", Ne = "https://farris-design.gitee.io/splitter-pane.schema.json", Fe = "splitter-pane", je = "A Farris Container Component", Le = "object", De = {
  id: {
    description: "The unique identifier for a splitter",
    type: "string"
  },
  type: {
    description: "The type string of splitter component",
    type: "string",
    default: "splitter-pane"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  size: {
    description: "",
    type: "object",
    properties: {
      width: {
        type: "number"
      },
      height: {
        type: "strnumbering"
      }
    },
    default: {}
  },
  collapsable: {
    description: "",
    type: "boolean",
    default: !1
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  minHeight: {
    description: "",
    type: "number"
  },
  minWidth: {
    description: "",
    type: "number"
  },
  position: {
    description: "",
    type: "string",
    default: "left",
    enum: [
      "left",
      "center",
      "right",
      "top",
      "bottom"
    ]
  },
  resizable: {
    description: "",
    type: "boolean",
    default: !1
  },
  visible: {
    description: "",
    type: "number",
    default: !0
  }
}, $e = [
  "id",
  "type",
  "contents"
], He = {
  $schema: xe,
  $id: Ne,
  title: Fe,
  description: je,
  type: Le,
  properties: De,
  required: $e
}, U = {
  customClass: { type: String, defaut: "" },
  customStyle: { type: String, default: "" },
  width: { type: Number },
  /** 记录原始定义高度 */
  height: { type: Number },
  /** 面板位置 */
  position: { type: String, default: "left" },
  /** 是否显示 */
  visible: { type: Boolean, default: !0 },
  /** True to allow the pane can be resized. */
  resizable: { type: Boolean, default: !1 },
  /** 指定拖拽的方向，可以指定多个方向，e向东,n向北,s向南,w向西 
   * 因为位置在右侧，不一定就是w方向可拖拽的
  */
  resizeHandle: { type: String, default: "" },
  /** True to allow the pane can be collapsed. */
  collapsable: { type: Boolean, default: !1 },
  /** 面板最小宽度 */
  minWidth: { type: Number, default: 0 },
  /** 面板最小高度 */
  minHeight: { type: Number, default: 0 }
}, ne = Z(
  U,
  He,
  Re,
  ve
);
function se(o, e) {
  const t = b(o.width), n = b(o.height), {
    horizontalResizeBarPosition: i,
    horizontalResizeHandleOffset: r,
    showHorizontalResizeHandle: s,
    showVerticalResizeHandle: u,
    verticalResizeBarPosition: l,
    verticalResizeHandleOffset: a,
    draggingHorizontalResizeHandle: c,
    draggingVerticalResizeHandle: d
  } = e;
  let p = "", m, f;
  function C(v) {
    if ((p === "left" || p === "right") && f) {
      const { left: h } = f.getBoundingClientRect(), { width: g } = m.getBoundingClientRect(), B = v.clientX - h, M = p === "left" ? (g || 0) + (B - i.value) : (g || 0) - (B - i.value);
      t.value = o.minWidth > 0 ? Math.max(o.minWidth, M) : M;
    }
    if ((p === "top" || p === "bottom") && f) {
      const { top: h } = f.getBoundingClientRect(), { height: g } = m.getBoundingClientRect(), B = v.clientY - h, M = p === "top" ? (g || 0) + (B - l.value) : (g || 0) - (B - l.value);
      n.value = o.minHeight > 0 ? Math.max(o.minHeight, M) : M;
    }
    r.value = 0, a.value = 0, i.value = -1, l.value = -1, s.value = !1, u.value = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", C), document.body.style.userSelect = "", p = "", m = null, f = null;
  }
  function P(v, h, g) {
    if (p = h, m = g, s.value = !0, f = v.composedPath().find((M) => M.className.split(" ")[0] === "f-splitter"), f) {
      const { left: M } = f.getBoundingClientRect();
      r.value = v.clientX - M, i.value = v.clientX - M, document.addEventListener("mousemove", c), document.addEventListener("mouseup", C), document.body.style.userSelect = "none";
    }
  }
  function k(v, h, g) {
    if (p = h, m = g, u.value = !0, f = v.composedPath().find((M) => M.className.split(" ")[0] === "f-splitter"), f) {
      const { top: M } = f.getBoundingClientRect();
      a.value = v.clientY - M, l.value = v.clientY - M, document.addEventListener("mousemove", d), document.addEventListener("mouseup", C), document.body.style.userSelect = "none";
    }
  }
  return {
    actualWidth: t,
    actualHeight: n,
    onClickSplitterHorizontalResizeBar: P,
    onClickSplitterVerticalResizeBar: k
  };
}
const D = /* @__PURE__ */ F({
  name: "FSplitterPane",
  props: U,
  emits: [],
  setup(o, e) {
    const t = b(), n = x("splitter"), {
      useResizeHandleComposition: i
    } = n, r = se(o, i), {
      actualHeight: s,
      actualWidth: u,
      onClickSplitterHorizontalResizeBar: l,
      onClickSplitterVerticalResizeBar: a
    } = r, c = b(o.position), d = V(() => {
      const h = {
        "f-splitter-pane": !0,
        "f-splitter-pane-main": c.value === "center",
        "has-resize-bar": o.resizable
      };
      return h["f-splitter-pane-" + c.value] = !0, j(h, o == null ? void 0 : o.customClass);
    }), p = V(() => o.resizeHandle ? o.resizeHandle.split(",").filter((h) => ["e", "n", "s", "w"].find((g) => g === h)) : []), m = V(() => {
      const h = {};
      return (u.value || u.value === 0) && (c.value === "left" || c.value === "right" || p.value.find((g) => g === "e") || p.value.find((g) => g === "w")) && (h.width = `${u.value}px`), (s.value || s.value === 0) && (c.value === "bottom" || c.value === "top" || p.value.find((g) => g === "s") || p.value.find((g) => g === "n")) && (h.height = `${s.value}px`), L(h, o == null ? void 0 : o.customStyle);
    }), f = V(() => ({
      "f-splitter-resize-bar": !0,
      "f-splitter-resize-bar-e": c.value === "left",
      "f-splitter-resize-bar-n": c.value === "bottom",
      "f-splitter-resize-bar-s": c.value === "top",
      "f-splitter-resize-bar-w": c.value === "right"
    }));
    function C(h) {
      return {
        e: "left",
        w: "right",
        s: "top",
        n: "bottom"
      }[h] || h;
    }
    function P(h, g) {
      g = C(g), ["left", "right"].find((B) => B === g) && l(h, g, t.value), ["top", "bottom"].find((B) => B === g) && a(h, g, t.value);
    }
    function k() {
      return p.value.length > 0 ? p.value.map((h) => O("span", {
        class: "f-splitter-resize-bar f-splitter-resize-bar-" + h,
        onMousedown: (g) => P(g, h)
      }, null)) : O("span", {
        class: f.value,
        onMousedown: (h) => P(h, c.value)
      }, null);
    }
    function v() {
      u.value = o.width, s.value = o.height, m.value;
    }
    return e.expose({
      reset: v
    }), () => O("div", {
      ref: t,
      class: d.value,
      style: m.value
    }, [e.slots.default && e.slots.default(), o.resizable && k()]);
  }
});
function ie(o, e, t) {
  var q;
  const n = t && t.getStyles && t.getStyles() || "", i = t && t.getDesignerClass && t.getDesignerClass() || "", r = b();
  function s() {
    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanMoveComponent ? t.checkCanMoveComponent() : !0;
  }
  function u() {
    return !1;
  }
  function l() {
    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanDeleteComponent ? t.checkCanDeleteComponent() : !0;
  }
  function a() {
    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : t && t.hideNestedPaddingInDesginerView ? t.hideNestedPaddingInDesginerView() : !1;
  }
  function c(y) {
    if (!y || !y.value)
      return null;
    if (y.value.schema && y.value.schema.type === "component")
      return y.value;
    const w = b(y == null ? void 0 : y.value.parent), S = c(w);
    return S || null;
  }
  function d(y = e) {
    var R;
    if (t != null && t.getDraggableDesignItemElement)
      return t.getDraggableDesignItemElement(y);
    const { componentInstance: w, designerItemElementRef: S } = y;
    if (!w || !w.value)
      return null;
    const { getCustomButtons: E } = w.value;
    return w.value.canMove || E && ((R = E()) != null && R.length) ? S : d(y.parent);
  }
  function p(y) {
    return !!t && t.canAccepts(y);
  }
  function m() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function f() {
  }
  function C(y, w) {
    var S;
    !y || !w || (t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(y, w), (S = e == null ? void 0 : e.setupContext) == null || S.emit("dragEnd"));
  }
  function P(y, w) {
    const { componentType: S } = y;
    let E = J(S, y, w);
    t && t.onResolveNewComponentSchema && (E = t.onResolveNewComponentSchema(y, E));
    const R = S.toLowerCase().replace(/-/g, "_");
    return E && !E.id && E.type === S && (E.id = `${R}_${Math.random().toString().slice(2, 6)}`), E;
  }
  function k(y) {
    y && t != null && t.onChildElementMovedOut && t.onChildElementMovedOut(y);
  }
  function v(...y) {
    if (t && t.getPropsConfig)
      return t.getPropsConfig(...y);
  }
  function h(y) {
    if (!y)
      return;
    const w = e == null ? void 0 : e.schema, { formSchemaUtils: S } = y;
    if (w && S.getExpressions().length) {
      const E = S.getExpressions().findIndex((R) => R.target === w.id);
      E > -1 && S.getExpressions().splice(E, 1);
    }
  }
  function g(y) {
    t && t.onRemoveComponent && t.onRemoveComponent(), h(y), e != null && e.schema.contents && e.schema.contents.map((w) => {
      let S = w.id;
      w.type === "component-ref" && (S = w.component);
      const E = o.value.querySelectorAll(`#${S}-design-item`);
      E != null && E.length && Array.from(E).map((R) => {
        var I;
        (I = R == null ? void 0 : R.componentInstance) != null && I.value.onRemoveComponent && R.componentInstance.value.onRemoveComponent(y);
      });
    });
  }
  function B() {
    if (t && t.getCustomButtons)
      return t.getCustomButtons();
  }
  function M(y) {
    if (t && t.onPropertyChanged)
      return t.onPropertyChanged(y);
  }
  return r.value = {
    canMove: s(),
    canSelectParent: u(),
    canDelete: l(),
    canNested: !a(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: o,
    parent: (q = e == null ? void 0 : e.parent) == null ? void 0 : q.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: n,
    designerClass: i,
    canAccepts: p,
    getBelongedComponentInstance: c,
    getDraggableDesignItemElement: d,
    getDraggingDisplayText: m,
    getPropConfig: v,
    getDragScopeElement: f,
    onAcceptMovedChildElement: C,
    onChildElementMovedOut: k,
    addNewChildComponentSchema: P,
    triggerBelongedComponentToMoveWhenMoved: !!t && t.triggerBelongedComponentToMoveWhenMoved || b(!1),
    triggerBelongedComponentToDeleteWhenDeleted: !!t && t.triggerBelongedComponentToDeleteWhenDeleted || b(!1),
    onRemoveComponent: g,
    getCustomButtons: B,
    onPropertyChanged: M
  }, r;
}
class re {
  getTemplateRule(e, t) {
    const n = t == null ? void 0 : t.formSchemaUtils, i = n == null ? void 0 : n.getFormTemplateRule(), r = { canAccept: !0, canDelete: !0, canMove: !0 };
    if (!i)
      return r;
    const s = this.getComponentContext(e), { componentClassList: u } = s;
    return u.forEach((l) => {
      if (!l || !i[l])
        return;
      const { canMove: a, canDelete: c, canAccept: d } = i[l];
      r.canMove = r.canMove && this.resolveRuleValue(a, s), r.canDelete = r.canDelete && this.resolveRuleValue(c, s), r.canAccept = r.canAccept && this.resolveRuleValue(d, s);
    }), r;
  }
  resolveRuleValue(e, t) {
    return typeof e == "boolean" ? e : this.parseRuleValueSchema(e, t);
  }
  parseRuleValueSchema(e, t) {
    const n = e.invalidContext || [];
    let i = !0;
    for (const r of n) {
      if (r.firstLevelChild) {
        if (r.firstLevelChild.class) {
          const { firstLevelChildClassList: s } = t;
          if (s && !s.includes(r.firstLevelChild.class)) {
            i = !1;
            continue;
          }
        }
        if (r.firstLevelChild.type) {
          const { firstLevelChildSchema: s } = t;
          if (!s || s.type !== r.firstLevelChild.type) {
            i = !1;
            continue;
          }
        }
      }
      if (r.secondLevelChild) {
        if (r.secondLevelChild.class) {
          const { secondLevelChildClassList: s } = t;
          if (s && !s.includes(r.secondLevelChild.class)) {
            i = !1;
            continue;
          }
        }
        if (r.secondLevelChild.type) {
          const { secondLevelChildSchema: s } = t;
          if (!s || s.type !== r.secondLevelChild.type) {
            i = !1;
            continue;
          }
        }
      }
      if (r.parent) {
        if (r.parent.class) {
          const { parentClassList: s } = t;
          if (s && !s.includes(r.parent.class)) {
            i = !1;
            continue;
          }
        }
        if (r.parent.type) {
          const { parentSchema: s } = t;
          if (s && s.type !== r.parent.type) {
            i = !1;
            continue;
          }
        }
      }
      i = !0;
      break;
    }
    return !i;
  }
  getComponentContext(e) {
    var C, P, k, v;
    const t = e.schema, n = t.appearance && t.appearance.class || "", i = n.split(" ") || [], r = t.contents || [], s = r.length ? r[0] : null, u = s && s.appearance ? s.appearance.class : "", l = u ? u.split(" ") : [], a = (C = s == null ? void 0 : s.contents) != null && C.length ? s == null ? void 0 : s.contents[0] : null, c = a && a.appearance ? a.appearance.class : "", d = c ? c.split(" ") : [], p = t.type === "component" ? (k = (P = e.parent) == null ? void 0 : P.parent) == null ? void 0 : k.schema : (v = e.parent) == null ? void 0 : v.schema, m = p && p.appearance && p.appearance.class || "", f = m ? m.split(" ") : [];
    return {
      componentClass: n,
      componentClassList: i,
      childContents: r,
      firstLevelChildSchema: s,
      firstLevelChildClass: u,
      firstLevelChildClassList: l,
      secondLevelChildSchema: a,
      secondLevelChildClass: c,
      secondLevelChildClassList: d,
      parentSchema: p,
      parentClass: m,
      parentClassList: f
    };
  }
}
function Ae(o, e) {
  const t = new re(), { canMove: n, canDelete: i } = t.getTemplateRule(o, e);
  function r() {
    return !1;
  }
  function s() {
    return i;
  }
  function u() {
    return n;
  }
  function l() {
    return !0;
  }
  return { canAccepts: r, checkCanDeleteComponent: s, checkCanMoveComponent: u, hideNestedPaddingInDesginerView: l };
}
const Ue = /* @__PURE__ */ F({
  name: "FSplitterDesign",
  props: A,
  emits: [],
  setup(o, e) {
    const t = b(), n = x("designer-host-service"), i = x("design-item-context"), r = Ae(i, n), s = ie(t, i, r);
    s.value.canNested = !1;
    const u = te(t), {
      horizontalResizeHandleStyle: l,
      verticalResizeHandleStyle: a,
      resizeOverlayStyle: c
    } = u;
    _("splitter", {
      useResizeHandleComposition: u
    });
    const d = V(() => j({
      "f-splitter": !0
    }, o == null ? void 0 : o.customClass)), p = V(() => {
      const m = {
        "flex-direction": o.direction === "row" ? "row" : "column"
      };
      return L(m, o == null ? void 0 : o.customStyle);
    });
    return X(() => {
      t.value.componentInstance = s;
    }), e.expose(s.value), () => O("div", {
      class: d.value,
      ref: t,
      style: p.value
    }, [e.slots.default && e.slots.default(), O("div", {
      class: "f-splitter-resize-overlay",
      style: c.value
    }, null), O("div", {
      class: "f-splitter-horizontal-resize-proxy",
      style: l.value
    }, null), O("div", {
      class: "f-splitter-vertical-resize-proxy",
      style: a.value
    }, null)]);
  }
});
function qe() {
  function o(e, t) {
    var s;
    if (!e)
      return !1;
    const n = ((s = e.targetContainer) == null ? void 0 : s.componentInstance) && e.targetContainer.componentInstance.value;
    if (!n)
      return !1;
    const i = n.schema.type, r = t == null ? void 0 : t.formSchemaUtils.getComponentById(n.belongedComponentId);
    return !((e.componentCategory === "input" || e.componentType === "form-group") && ![T["response-layout-item"].type, T["response-form"].type, T.fieldset.type].includes(i) || (e.componentType === T.tabs.type || e.componentType === T.section.type) && ((r == null ? void 0 : r.componentType) !== "frame" || ![T["content-container"].type, T["splitter-pane"].type, T["response-layout-item"].type].includes(i)) || e.componentType === T["query-solution"].type || e.componentType === T.fieldset.type && i !== T["response-form"].type);
  }
  return {
    basalDragulaRuleForContainer: o
  };
}
const Ie = b(0);
function We() {
  Ie.value++;
}
const _e = b(0);
function Xe(o) {
  const { formSchemaUtils: e, formStateMachineUtils: t } = o;
  function n(l, a = "") {
    return {
      path: a + l.code,
      field: l.id,
      fullPath: l.code
    };
  }
  function i(l, a = "") {
    return e.getViewModelById(l).states.map((d) => n(d, a));
  }
  function r(l) {
    const a = e.getRootViewModelId(), c = i(l);
    if (l === a)
      return c;
    const d = i(a, "root-component.");
    return [...c, ...d];
  }
  function s(l) {
    return l.binding && l.binding.path || l.id || "";
  }
  function u() {
    return t && t.getRenderStates() || [];
  }
  return { getVariables: r, getControlName: s, getStateMachines: u };
}
class Ye {
  constructor(e) {
    z(this, "sessionVariables", [
      {
        key: "CurrentSysOrgName",
        name: "当前组织Name",
        description: "当前组织Name"
      },
      //   {
      //     key: "CurrentSysOrgCode",
      //     name: "当前组织Code",
      //     description: "当前组织Code"
      //   },
      {
        key: "CurrentSysOrgId",
        name: "当前组织Id",
        description: "当前组织Id"
      },
      {
        key: "CurrentUserName",
        name: "当前用户Name",
        description: "当前用户Name"
      },
      {
        key: "CurrentUserCode",
        name: "当前用户Code",
        description: "当前用户Code"
      },
      {
        key: "CurrentUserId",
        name: "当前用户Id",
        description: "当前用户Id"
      },
      {
        key: "CurrentLanguage",
        name: "当前语言编号",
        description: "当前登录的语言编号，例如简体中文返回'zh-CHS'，英文返回'en'，繁体中文'zh-CHT'"
      }
    ]);
    z(this, "expressionNames", {
      compute: "计算表达式",
      dependency: "依赖表达式",
      validate: "验证表达式",
      dataPicking: "帮助前表达式",
      visible: "可见表达式",
      readonly: "只读表达式",
      required: "必填表达式"
    });
    z(this, "getExpressionConverter", (e, t) => ({
      convertFrom: (n, i, r, s) => {
        const u = r.getExpressionRuleValue(e, t || i);
        return u && u.value || "";
      },
      convertTo: (n, i, r, s, u) => {
        var l;
        if (i === "dataPicking" && (r != null && r.target)) {
          const a = `${r.target}_dataPicking`;
          ((l = r.rules) == null ? void 0 : l.some(
            (d) => d.id === a && d.value
          )) ? n.dictPickingExpressionId = a : delete n.dictPickingExpressionId;
        }
        s.updateExpression(r);
      }
    }));
    this.formSchemaService = e;
  }
  getExpressionRule(e, t) {
    const n = this.formSchemaService.getExpressions();
    if (!n)
      return "";
    const i = n.find((s) => s.target === e);
    if (!i)
      return "";
    const r = i.rules.find((s) => s.type === t);
    return r || "";
  }
  // 获取上下文表单变量
  getContextFormVariables() {
    const { module: e } = this.formSchemaService.getFormSchema();
    if (!e.viewmodels || e.viewmodels.length === 0)
      return [];
    const t = this.formSchemaService.getRootViewModelId(), n = this.formSchemaService.getViewModelById(t);
    if (!n || !n.states || n.states.length === 0)
      return [];
    const i = [];
    return n.states.forEach((r) => {
      i.push({
        key: r.code,
        name: r.name,
        description: r.name,
        category: r.category
      });
    }), i;
  }
  createTreeNode(e, t, n = "label") {
    return {
      id: e.id,
      name: e.name,
      bindingPath: e[n],
      parents: t
    };
  }
  buildEntityFieldsTreeData(e = null, t) {
    const n = [];
    return e == null || e.forEach((i) => {
      var u;
      const r = this.createTreeNode(i, t);
      let s = [];
      (u = i.type) != null && u.fields && (s = this.buildEntityFieldsTreeData(i.type.fields, [...t, i.label])), n.push({
        data: r,
        children: s,
        expanded: !0
      });
    }), n;
  }
  buildChildEntityTreeData(e = null, t) {
    const n = [];
    return e == null || e.forEach((i) => {
      var l, a;
      const r = this.createTreeNode(i, t), s = this.buildEntityFieldsTreeData((l = i.type) == null ? void 0 : l.fields, [...t, i.label]), u = this.buildChildEntityTreeData((a = i.type) == null ? void 0 : a.entities, [...t, i.label]);
      u != null && u.length && (s == null || s.push(...u)), n.push({
        data: r,
        children: s || [],
        // 空值回退
        expanded: !0
      });
    }), n;
  }
  getEntitiesTreeData() {
    const e = this.formSchemaService.getSchemaEntities();
    if (!(e != null && e.length))
      return [];
    const t = e[0];
    if (!(t != null && t.type))
      return [];
    const n = this.buildEntityFieldsTreeData(t.type.fields, [t.code]), i = this.buildChildEntityTreeData(t.type.entities, [t.code]);
    return i != null && i.length && (n == null || n.push(...i)), {
      entityCode: t.code,
      fields: [{
        data: this.createTreeNode(t, [], "code"),
        children: n || []
      }]
    };
  }
  getEntitiesAndVariables() {
    return {
      entities: this.getEntitiesTreeData(),
      variables: {
        session: {
          name: "系统变量",
          items: this.sessionVariables,
          visible: !1
        },
        forms: {
          name: "表单变量",
          items: this.getContextFormVariables(),
          visible: !0
        }
      }
    };
  }
  onBeforeOpenExpression(e, t, n) {
    const i = n === "Field" ? e.binding.field : e.id, r = this.getExpressionRule(i, t), s = this.getEntitiesAndVariables(), u = {
      message: ["validate", "required", "dataPicking"].includes(t) && r ? r.message : "",
      ...s
    };
    return r.messageType != null && (u.messageType = r.messageType), u;
  }
  buildRule(e, t, n, i) {
    const { expression: r, message: s, messageType: u } = t, l = {
      id: `${e}_${n}`,
      type: n,
      value: r
    };
    return (n === "validate" || n === "dataPicking" || n === "required") && (l.message = s), n === "dataPicking" && (l.messageType = u), n === "validate" && i && (l.elementId = i), l;
  }
  getExpressionData() {
    const { expressions: e } = this.formSchemaService.getFormSchema().module;
    return e || [];
  }
  updateExpression(e, t, n, i) {
    const r = t === "Field" ? e.binding.field : e.id, s = this.buildRule(r, n, i, e.type === "form-group" ? e.id : "");
    let l = this.getExpressionData().find((c) => c.targetType === t && c.target === r);
    const a = (c) => c.value.trim() === "";
    if (l) {
      const c = l.rules.find((d) => d.id === s.id);
      if (c)
        a(s) ? l.rules = l.rules.filter((d) => d.id !== s.id) : (Object.assign(c, s), i === "validate" && e.type === "form-group" && (c.elementId = e.id));
      else {
        if (a(s))
          return null;
        l.rules = l.rules || [], l.rules.push(s);
      }
    } else {
      if (a(s))
        return null;
      l = {
        target: `${r}`,
        rules: [s],
        targetType: t
      };
    }
    return l;
  }
  getExpressionEditorOptions(e, t, n, i) {
    return n.reduce((r, s) => {
      var l, a;
      const u = t === "Field" ? (l = e == null ? void 0 : e.binding) == null ? void 0 : l.field : e.id;
      return r[s] = {
        hide: t === "Field" ? !!((a = e == null ? void 0 : e.binding) != null && a.field) : !1,
        description: "",
        title: this.expressionNames[s],
        type: "string",
        $converter: this.getExpressionConverter(u),
        editor: {
          type: "expression-editor",
          singleExpand: !1,
          dialogTitle: `${this.expressionNames[s]}编辑器`,
          showMessage: s === "validate" || s === "dataPicking" || s === "required",
          showMessageType: s === "dataPicking",
          beforeOpen: () => this.onBeforeOpenExpression(e, s, t),
          onSubmitModal: (c) => {
            const d = this.updateExpression(e, t, c, s);
            if (i) {
              const p = this.buildRule(u, c, s);
              i(p);
            }
            return d;
          }
        }
      }, r;
    }, {});
  }
  getExpressionInfo(e, t, n) {
    const i = t === "Field" ? e.binding.field : e.id, r = this.getExpressionRule(i, n), s = {
      value: r && r.value,
      targetId: i,
      targetType: t,
      expressionType: n
    };
    return r && r.message && (s.message = r.message), s;
  }
  getExpressionConfig(e, t, n = ["compute", "dependency", "validate"], i) {
    return {
      description: "表达式",
      title: "表达式",
      properties: {
        ...this.getExpressionEditorOptions(e, t, n, i)
      }
    };
  }
  getExpressionOptions(e, t, n) {
    const i = this.getExpressionInfo(e, t, n);
    return {
      dialogTitle: `${this.expressionNames[n]}编辑器`,
      singleExpand: !1,
      showMessage: n === "required",
      beforeOpen: () => this.onBeforeOpenExpression(e, n, t),
      expressionInfo: i
    };
  }
}
class Ge {
  constructor(e, t) {
    z(this, "componentId");
    z(this, "viewModelId");
    z(this, "eventsEditorUtils");
    z(this, "formSchemaUtils");
    z(this, "formMetadataConverter");
    z(this, "designViewModelUtils");
    z(this, "designViewModelField");
    z(this, "controlCreatorUtils");
    z(this, "designerHostService");
    z(this, "schemaService", null);
    z(this, "metadataService", null);
    z(this, "propertyConfig", {
      type: "object",
      categories: {}
    });
    var n;
    this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((n = this.formSchemaUtils) == null ? void 0 : n.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService;
  }
  getTableInfo() {
    var e;
    return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
  }
  setDesignViewModelField(e) {
    var n;
    const t = e.binding && e.binding.type === "Form" && e.binding.field;
    if (t) {
      if (!this.designViewModelField) {
        const i = this.designViewModelUtils.getDgViewModel(this.viewModelId);
        this.designViewModelField = i.fields.find((r) => r.id === t);
      }
      e.updateOn = (n = this.designViewModelField) == null ? void 0 : n.updateOn;
    }
  }
  getBasicPropConfig(e) {
    return {
      description: "Basic Information",
      title: "基本信息",
      properties: {
        id: {
          description: "组件标识",
          title: "标识",
          type: "string",
          readonly: !0
        },
        type: {
          description: "组件类型",
          title: "控件类型",
          type: "select",
          editor: {
            type: "combo-list",
            textField: "name",
            valueField: "value",
            idField: "value",
            editable: !1,
            data: [{ value: e.type, name: T[e.type].name }]
          }
        }
      }
    };
  }
  getAppearanceConfig(e = null, t = {}, n) {
    const i = {
      title: "外观",
      description: "Appearance"
    }, r = {
      class: {
        title: "class样式",
        type: "string",
        description: "组件的CSS样式",
        $converter: "/converter/appearance.converter"
      },
      style: {
        title: "style样式",
        type: "string",
        description: "组件的样式",
        $converter: "/converter/appearance.converter"
      }
    };
    for (const s in t)
      r[s] = Object.assign(r[s] || {}, t[s]);
    return {
      ...i,
      properties: { ...r },
      setPropertyRelates(s, u) {
        if (s) {
          switch (s && s.propertyID) {
            case "class":
            case "style": {
              _e.value++;
              break;
            }
          }
          n && n(s, e, u);
        }
      }
    };
  }
  getPropertyEditorParams(e, t = [], n = "visible", i = {}, r = {}) {
    const { getVariables: s, getControlName: u, getStateMachines: l } = Xe(this.designerHostService), a = this.getRealTargetType(e), c = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], d = {
      type: "property-editor",
      propertyTypes: c
    };
    return c.map((p) => {
      switch (p) {
        case "Const":
          Object.assign(d, {
            constType: "enum",
            constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
          }, i);
          break;
        case "Expression":
          d.expressionConfig = this.getExpressionOptions(e, a, n);
          break;
        case "StateMachine":
          d.stateMachines = l();
          break;
        case "Variable":
          Object.assign(d, {
            controlName: u(e),
            newVariablePrefix: "is",
            newVariableType: "Boolean",
            variables: s(this.viewModelId),
            onBeforeOpenVariables: (m) => {
              m.value = s(this.viewModelId);
            }
          }, r);
          break;
      }
    }), d;
  }
  getVisibleProperty(e, t = "") {
    return {
      visible: {
        title: "是否可见",
        type: "boolean",
        description: "运行时组件是否可见",
        editor: this.getPropertyEditorParams(e, t === "gridFieldEditor" ? ["Const", "Expression"] : ["Const", "Variable", "StateMachine", "Expression"], "visible")
      }
    };
  }
  /**
   * 获取行为
   * @param propertyData 
   * @param viewModelId 
   * @returns 
   */
  getBehaviorConfig(e, t = "", n = {}, i) {
    const r = {
      title: "行为",
      description: ""
    }, s = this.getVisibleProperty(e, t);
    for (const l in n)
      s[l] = Object.assign(s[l] || {}, n[l]);
    const u = this;
    return {
      ...r,
      properties: { ...s },
      setPropertyRelates(l, a) {
        if (l) {
          switch (l.propertyID) {
            case "disabled":
            case "readonly":
            case "visible":
              u.afterMutilEditorChanged(e, l);
              break;
          }
          i && i(l, a);
        }
      }
    };
  }
  /**
   * 当多值编辑器变更时
   * @param propertyData 
   * @param changeObject 
   */
  afterMutilEditorChanged(e, t) {
    this.addNewVariableToViewModel(t, this.viewModelId), this.updateExpressionValue(t), this.clearExpression(t, e);
  }
  /**
   * 
   * @param propertyId 
   * @param componentInstance 
   * @returns 
   */
  updateElementByParentContainer(e, t) {
    const n = t && t.parent && t.parent.schema;
    if (!n)
      return;
    const i = n.contents.findIndex((s) => s.id === e), r = $(n.contents[i]);
    n.contents.splice(i, 1), n.contents.splice(i, 0, r), We();
  }
  /**
   * 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中
   * @param changeObject 
   * @param viewModelId 
   * @returns 
   */
  addNewVariableToViewModel(e, t) {
    const n = e.propertyValue;
    if (!(n && typeof n == "object") || !(n.type === "Variable" && n.isNewVariable))
      return;
    const s = {
      id: n.field,
      category: "locale",
      code: n.fullPath,
      name: n.fullPath,
      type: n.newVariableType || "String"
    };
    delete n.newVariableType, delete n.isNewVariable, this.formSchemaUtils.getVariableByCode(s.code) || this.formSchemaUtils.getViewModelById(t).states.push(s);
  }
  /**
   * 更新表达式到expressions节点
   * @param changeObject 
   */
  updateExpressionValue(e) {
    const t = e.propertyValue;
    if (!((t && t.type) === "Expression" && t.expressionInfo))
      return;
    const { expressionId: r, expressionInfo: s } = t, { targetId: u, targetType: l, expressionType: a, value: c, message: d } = s, p = this.formSchemaUtils.getModule();
    p.expressions ?? (p.expressions = []);
    const { expressions: m } = p;
    let f = m.find((P) => P.target === u);
    f || (f = { target: u, rules: [], targetType: l }, m.push(f));
    const C = f.rules.find((P) => P.type === a);
    if (C)
      C.value = c, C.message = d;
    else {
      const P = { id: r, type: a, value: c, message: d };
      f.rules.push(P);
    }
    delete t.expressionInfo;
  }
  /**
   * 属性类型切换为非表达式后，清除原表达式
   * @param changeObject 
   * @param propertyData 
   * @returns 
   */
  clearExpression(e, t) {
    const n = e.propertyValue;
    if (n && n.type === "Expression")
      return;
    const r = e.propertyID, s = this.formSchemaUtils.getExpressions(), u = t.binding ? t.binding.field : t.id, l = s.find((a) => a.target === u);
    !l || !l.rules || (l.rules = l.rules.filter((a) => a.type !== r));
  }
  getExpressionOptions(e, t, n) {
    return new Ye(this.formSchemaUtils).getExpressionOptions(e, t, n);
  }
  getRealTargetType(e) {
    return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item"].indexOf(e.type) > -1 ? "Button" : e.binding && e.binding.field ? "Field" : "Container";
  }
}
class Je extends Ge {
  constructor(e, t) {
    super(e, t);
  }
  getPropertyConfig(e) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.appearance = this.getAppearanceProperties(e), this.propertyConfig.categories.behavior = this.getBehaviorProperties(e), this.propertyConfig;
  }
  getAppearanceProperties(e) {
    return {
      description: "",
      title: "外观",
      properties: {
        class: {
          description: "组件的CSS样式",
          title: "class样式"
        },
        style: {
          description: "组件的内容样式",
          title: "style样式"
        },
        minWidth: {
          description: "面板最小宽度",
          title: "最小宽度（px）",
          type: "number",
          editor: {
            nullable: !0
          },
          visible: {
            resizable: !0
          }
        }
      }
    };
  }
  getBehaviorProperties(e) {
    return {
      hide: !0,
      description: "",
      title: "行为",
      properties: {
        position: {
          description: "",
          title: "位置",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "combo-list",
            idField: "value",
            valueField: "value",
            data: [
              {
                value: "left",
                name: "左侧"
              },
              {
                value: "center",
                name: "居中"
              },
              {
                value: "right",
                name: "右侧"
              },
              {
                value: "top",
                name: "顶部"
              },
              {
                value: "bottom",
                name: "底部"
              }
            ]
          }
        },
        resizable: {
          description: "",
          title: "允许拖拽",
          type: "boolean",
          visible: e.position !== "center"
        }
      }
    };
  }
}
function Qe(o, e) {
  const t = new re(), n = o.schema, { canAccept: i } = t.getTemplateRule(o, e);
  function r(a) {
    return qe().basalDragulaRuleForContainer(a, e) ? i : !1;
  }
  function s(a) {
    return new Je(a, e).getPropertyConfig(n);
  }
  function u() {
    return !1;
  }
  function l() {
    return !1;
  }
  return {
    canAccepts: r,
    getPropsConfig: s,
    checkCanMoveComponent: u,
    checkCanDeleteComponent: l
  };
}
const Ze = /* @__PURE__ */ F({
  name: "FSplitterPaneDesign",
  props: U,
  emits: [],
  setup(o, e) {
    const t = b(), n = x("designer-host-service"), i = x("design-item-context"), r = Qe(i, n), s = ie(t, i, r);
    s.value.styles = "padding:0;box-shadow:none;", s.value.canNested = !1, s.value.canMove = !1, s.value.canDelete = !1, X(() => {
      t.value.componentInstance = s;
    }), e.expose(s.value);
    const u = x("splitter"), {
      useResizeHandleComposition: l
    } = u, a = se(o, l), {
      actualHeight: c,
      actualWidth: d
    } = a, p = b(o.position), m = V(() => {
      const v = {
        "f-splitter-pane": !0,
        "f-splitter-pane-main": p.value === "center",
        "has-resize-bar": o.resizable,
        "f-component-splitter-pane": !0,
        "drag-container": !0
      };
      return v["f-splitter-pane-" + p.value] = !0, j(v, o == null ? void 0 : o.customClass);
    }), f = V(() => o.resizeHandle ? o.resizeHandle.split(",").filter((v) => ["e", "n", "s", "w"].find((h) => h === v)) : []), C = V(() => {
      const v = {};
      return (d.value && p.value === "left" || p.value === "right" || f.value.find((h) => h === "e") || f.value.find((h) => h === "w")) && (v.width = `${d.value}px`), (c.value && p.value === "bottom" || p.value === "top" || f.value.find((h) => h === "s") || f.value.find((h) => h === "n")) && (v.height = `${c.value}px`), L(v, o == null ? void 0 : o.customStyle);
    }), P = V(() => ({
      "no-drag": !0,
      "f-splitter-resize-bar": !0,
      "f-splitter-resize-bar-e": p.value === "left",
      "f-splitter-resize-bar-n": p.value === "bottom",
      "f-splitter-resize-bar-s": p.value === "top",
      "f-splitter-resize-bar-w": p.value === "right"
    }));
    function k() {
      return f.value.length > 0 ? f.value.map((v) => O("span", {
        class: "f-splitter-resize-bar f-splitter-resize-bar-" + v
      }, null)) : O("span", {
        class: P.value
      }, null);
    }
    return () => O("div", {
      ref: t,
      "data-dragref": `${i.schema.id}-container`,
      class: m.value,
      style: C.value
    }, [e.slots.default && e.slots.default(), o.resizable && k()]);
  }
});
N.install = (o) => {
  o.component(N.name, N), o.component(D.name, D);
};
N.register = (o, e, t, n) => {
  o.splitter = N, e.splitter = ee, o["splitter-pane"] = D