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

Farris Vue, a Farris Design based Vue3 component library.

var X = Object.defineProperty;
var Y = (r, e, t) => e in r ? X(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
var b = (r, e, t) => Y(r, typeof e != "symbol" ? e + "" : e, t);
import { ref as x, computed as w, defineComponent as M, provide as F, createVNode as S, inject as R, onMounted as N } from "vue";
import { resolveAppearance as U, createPropsResolver as $ } from "../dynamic-resolver/index.esm.js";
import { getCustomClass as I, getCustomStyle as H } from "../common/index.esm.js";
import { DgControl as T, canvasChanged as G, refreshCanvas as J, UseTemplateDragAndDropRules as j, useDesignerComponent as A, useDragulaCommonRule as K } from "../designer-canvas/index.esm.js";
import { cloneDeep as Q } from "lodash-es";
import { FNotifyService as Z } from "../notify/index.esm.js";
const ee = /* @__PURE__ */ new Map([
  ["appearance", U]
]);
function te(r, e, t) {
  const i = r.getSchemaByType("splitter-pane");
  return i.appearance = {
    class: "f-col-w6 f-page-content-nav"
  }, i.position = "left", e.contents.unshift(i), e;
}
function ie(r, e, t) {
  const i = r.getSchemaByType("splitter-pane");
  return i.appearance = {
    class: "f-page-content-main"
  }, i.position = "main", e.contents.push(i), e;
}
function se(r, e, t) {
  const i = t.parentComponentInstance;
  return String(i.schema.appearance.class || "").split(" ").includes("f-page-main") && (e.appearance = { class: "f-page-content" }), te(r, e), ie(r, e), e;
}
function ne(r, e, t) {
  return e;
}
const re = "https://json-schema.org/draft/2020-12/schema", oe = "https://farris-design.gitee.io/splitter.schema.json", le = "splitter", ae = "A Farris Container Component", ce = "object", de = {
  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"
    ]
  }
}, ue = [
  "id",
  "type",
  "contents"
], pe = {
  $schema: re,
  $id: oe,
  title: le,
  description: ae,
  type: ce,
  properties: de,
  required: ue
}, O = {
  customStyle: { type: String, default: "" },
  customClass: { type: String, default: "" },
  direction: { Type: String, default: "row" }
}, W = $(O, pe, ee, se);
function D(r) {
  const e = x(-1), t = x(-1), i = x(0), s = x(0), o = x(!1), n = x(!1), c = w(() => ({
    display: o.value ? "block" : "none",
    left: `${i.value}px`
  })), l = w(() => ({
    display: n.value ? "block" : "none",
    top: `${s.value}px`
  })), d = w(() => ({
    display: n.value || o.value ? "block" : "none"
  }));
  function a(u) {
    const h = r.value;
    if (h) {
      const { left: m } = h.getBoundingClientRect();
      i.value = u.clientX - m;
    }
  }
  function f(u) {
    const h = r.value;
    if (h) {
      const { top: m } = h.getBoundingClientRect();
      s.value = u.clientY - m;
    }
  }
  return {
    horizontalResizeHandleStyle: c,
    verticalResizeHandleStyle: l,
    resizeOverlayStyle: d,
    showHorizontalResizeHandle: o,
    showVerticalResizeHandle: n,
    horizontalResizeBarPosition: e,
    verticalResizeBarPosition: t,
    verticalResizeHandleOffset: s,
    horizontalResizeHandleOffset: i,
    draggingHorizontalResizeHandle: a,
    draggingVerticalResizeHandle: f
  };
}
const E = /* @__PURE__ */ M({
  name: "FSplitter",
  props: O,
  emits: [],
  setup(r, e) {
    const t = x(), i = D(t), {
      horizontalResizeHandleStyle: s,
      verticalResizeHandleStyle: o,
      resizeOverlayStyle: n
    } = i;
    F("splitter", {
      useResizeHandleComposition: i
    });
    const c = w(() => I({
      "f-splitter": !0
    }, r == null ? void 0 : r.customClass)), l = w(() => {
      const d = {
        "flex-direction": r.direction === "row" ? "row" : "column"
      };
      return H(d, r == null ? void 0 : r.customStyle);
    });
    return () => S("div", {
      class: c.value,
      ref: t,
      style: l.value
    }, [e.slots.default && e.slots.default(), S("div", {
      class: "f-splitter-resize-overlay",
      style: n.value
    }, null), S("div", {
      class: "f-splitter-horizontal-resize-proxy",
      style: s.value
    }, null), S("div", {
      class: "f-splitter-vertical-resize-proxy",
      style: o.value
    }, null)]);
  }
}), fe = /* @__PURE__ */ new Map([
  ["appearance", U]
]), me = "https://json-schema.org/draft/2020-12/schema", ge = "https://farris-design.gitee.io/splitter-pane.schema.json", he = "splitter-pane", ve = "A Farris Container Component", be = "object", ye = {
  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
  },
  resizeHandle: {
    description: "",
    type: "string",
    default: ""
  },
  visible: {
    description: "",
    type: "number",
    default: !0
  }
}, Ce = [
  "id",
  "type",
  "contents"
], we = {
  $schema: me,
  $id: ge,
  title: he,
  description: ve,
  type: be,
  properties: ye,
  required: Ce
}, k = {
  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 }
}, q = $(
  k,
  we,
  fe,
  ne
);
function L(r, e) {
  const t = x(r.width), i = x(r.height), {
    horizontalResizeBarPosition: s,
    horizontalResizeHandleOffset: o,
    showHorizontalResizeHandle: n,
    showVerticalResizeHandle: c,
    verticalResizeBarPosition: l,
    verticalResizeHandleOffset: d,
    draggingHorizontalResizeHandle: a,
    draggingVerticalResizeHandle: f
  } = e;
  let u = "", h, m;
  function y(v) {
    if ((u === "left" || u === "right") && m) {
      const { left: p } = m.getBoundingClientRect(), { width: g } = h.getBoundingClientRect(), P = v.clientX - p, C = u === "left" ? (g || 0) + (P - s.value) : (g || 0) - (P - s.value);
      t.value = r.minWidth > 0 ? Math.max(r.minWidth, C) : C;
    }
    if ((u === "top" || u === "bottom") && m) {
      const { top: p } = m.getBoundingClientRect(), { height: g } = h.getBoundingClientRect(), P = v.clientY - p, C = u === "top" ? (g || 0) + (P - l.value) : (g || 0) - (P - l.value);
      i.value = r.minHeight > 0 ? Math.max(r.minHeight, C) : C;
    }
    o.value = 0, d.value = 0, s.value = -1, l.value = -1, n.value = !1, c.value = !1, document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", y), document.body.style.userSelect = "", u = "", h = null, m = null;
  }
  function z(v, p, g) {
    if (u = p, h = g, n.value = !0, m = v.composedPath().find((C) => C.className.split(" ")[0] === "f-splitter"), m) {
      const { left: C } = m.getBoundingClientRect();
      o.value = v.clientX - C, s.value = v.clientX - C, document.addEventListener("mousemove", a), document.addEventListener("mouseup", y), document.body.style.userSelect = "none";
    }
  }
  function V(v, p, g) {
    if (u = p, h = g, c.value = !0, m = v.composedPath().find((C) => C.className.split(" ")[0] === "f-splitter"), m) {
      const { top: C } = m.getBoundingClientRect();
      d.value = v.clientY - C, l.value = v.clientY - C, document.addEventListener("mousemove", f), document.addEventListener("mouseup", y), document.body.style.userSelect = "none";
    }
  }
  return {
    actualWidth: t,
    actualHeight: i,
    onClickSplitterHorizontalResizeBar: z,
    onClickSplitterVerticalResizeBar: V
  };
}
const B = /* @__PURE__ */ M({
  name: "FSplitterPane",
  props: k,
  emits: [],
  setup(r, e) {
    const t = x(), i = R("splitter"), {
      useResizeHandleComposition: s
    } = i, o = L(r, s), {
      actualHeight: n,
      actualWidth: c,
      onClickSplitterHorizontalResizeBar: l,
      onClickSplitterVerticalResizeBar: d
    } = o, a = x(r.position), f = w(() => {
      const p = {
        "f-splitter-pane": !0,
        "f-splitter-pane-main": a.value === "center",
        "has-resize-bar": r.resizable
      };
      return p["f-splitter-pane-" + a.value] = !0, I(p, r == null ? void 0 : r.customClass);
    }), u = w(() => r.resizeHandle ? r.resizeHandle.split(",").filter((p) => ["e", "n", "s", "w"].find((g) => g === p)) : []), h = w(() => {
      const p = {};
      return (c.value || c.value === 0) && (a.value === "left" || a.value === "right" || u.value.find((g) => g === "e") || u.value.find((g) => g === "w")) && (p.width = `${c.value}px`), (n.value || n.value === 0) && (a.value === "bottom" || a.value === "top" || u.value.find((g) => g === "s") || u.value.find((g) => g === "n")) && (p.height = `${n.value}px`), H(p, r == null ? void 0 : r.customStyle);
    }), m = w(() => ({
      "f-splitter-resize-bar": !0,
      "f-splitter-resize-bar-e": a.value === "left",
      "f-splitter-resize-bar-n": a.value === "bottom",
      "f-splitter-resize-bar-s": a.value === "top",
      "f-splitter-resize-bar-w": a.value === "right"
    }));
    function y(p) {
      return {
        e: "left",
        w: "right",
        s: "top",
        n: "bottom"
      }[p] || p;
    }
    function z(p, g) {
      g = y(g), ["left", "right"].find((P) => P === g) && l(p, g, t.value), ["top", "bottom"].find((P) => P === g) && d(p, g, t.value);
    }
    function V() {
      return u.value.length > 0 ? u.value.map((p) => S("span", {
        class: "f-splitter-resize-bar f-splitter-resize-bar-" + p,
        onMousedown: (g) => z(g, p)
      }, null)) : S("span", {
        class: m.value,
        onMousedown: (p) => z(p, a.value)
      }, null);
    }
    function v() {
      c.value = r.width, n.value = r.height, h.value;
    }
    return e.expose({
      reset: v
    }), () => S("div", {
      ref: t,
      class: f.value,
      style: h.value
    }, [e.slots.default && e.slots.default(), r.resizable && V()]);
  }
});
function xe(r) {
  const { formSchemaUtils: e, formStateMachineUtils: t } = r;
  function i(l, d = "") {
    return {
      path: d + l.code,
      field: l.id,
      fullPath: l.code
    };
  }
  function s(l, d = "") {
    const a = e.getViewModelById(l);
    return a ? a.states.map((f) => i(f, d)) : [];
  }
  function o(l) {
    const d = e.getRootViewModelId(), a = s(l);
    if (l === d)
      return a;
    const f = s(d, "root-component.");
    return [...a, ...f];
  }
  function n(l) {
    return l.binding && l.binding.path || l.id || "";
  }
  function c() {
    return t && t.getRenderStates() || [];
  }
  return { getVariables: o, getControlName: n, getStateMachines: c };
}
class Se {
  constructor(e) {
    b(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'"
      }
    ]);
    b(this, "expressionNames", {
      compute: "计算表达式",
      dependency: "依赖表达式",
      validate: "验证表达式",
      dataPicking: "帮助前表达式",
      visible: "可见表达式",
      readonly: "只读表达式",
      required: "必填表达式"
    });
    b(this, "getExpressionConverter", (e, t) => ({
      convertFrom: (i, s, o, n) => {
        const c = o.getExpressionRuleValue(e, t || s);
        return c && c.value || "";
      },
      convertTo: (i, s, o, n, c) => {
        var l;
        if (s === "dataPicking" && (o != null && o.target)) {
          const d = `${o.target}_dataPicking`;
          ((l = o.rules) == null ? void 0 : l.some(
            (f) => f.id === d && f.value
          )) ? i.dictPickingExpressionId = d : delete i.dictPickingExpressionId;
        }
        n.updateExpression(o);
      }
    }));
    this.formSchemaService = e;
  }
  getExpressionRule(e, t) {
    const i = this.getExpressionData();
    if (!i)
      return "";
    const s = i.find((n) => n.target === e);
    if (!s)
      return "";
    const o = s.rules.find((n) => n.type === t);
    return o || "";
  }
  // 获取上下文表单变量
  getContextFormVariables() {
    const { module: e } = this.formSchemaService.getFormSchema();
    if (!e.viewmodels || e.viewmodels.length === 0)
      return [];
    const t = this.formSchemaService.getRootViewModelId(), i = this.formSchemaService.getViewModelById(t);
    if (!i || !i.states || i.states.length === 0)
      return [];
    const s = [];
    return i.states.filter((o) => o.category === "remote").forEach((o) => {
      s.push({
        key: o.code,
        name: o.name,
        description: o.name,
        category: o.category
      });
    }), s;
  }
  createTreeNode(e, t, i = "label") {
    return {
      id: e.id,
      name: e.name,
      bindingPath: e[i],
      parents: t,
      type: "field"
    };
  }
  buildEntityFieldsTreeData(e = null, t) {
    const i = [];
    return e == null || e.forEach((s) => {
      var c;
      const o = this.createTreeNode(s, t);
      let n = [];
      (c = s.type) != null && c.fields && (n = this.buildEntityFieldsTreeData(s.type.fields, [...t, s.label])), i.push({
        data: o,
        children: n,
        expanded: !0
      });
    }), i;
  }
  buildChildEntityTreeData(e = null, t) {
    const i = [];
    return e == null || e.forEach((s) => {
      var l, d;
      const o = this.createTreeNode(s, t);
      o.type = "entity";
      const n = this.buildEntityFieldsTreeData((l = s.type) == null ? void 0 : l.fields, [...t, s.label]), c = this.buildChildEntityTreeData((d = s.type) == null ? void 0 : d.entities, [...t, s.label]);
      c != null && c.length && (n == null || n.push(...c)), i.push({
        data: o,
        children: n || [],
        // 空值回退
        expanded: !0
      });
    }), i;
  }
  getEntitiesTreeData() {
    const e = this.formSchemaService.getSchemaEntities();
    if (!(e != null && e.length))
      return [];
    const t = e[0];
    if (!(t != null && t.type))
      return [];
    const i = this.buildEntityFieldsTreeData(t.type.fields, [t.code]), s = this.buildChildEntityTreeData(t.type.entities, [t.code]);
    return s != null && s.length && (i == null || i.push(...s)), {
      entityCode: t.code,
      fields: [{
        data: this.createTreeNode(t, [], "code"),
        children: i || []
      }]
    };
  }
  getEntitiesAndVariables() {
    return {
      entities: this.getEntitiesTreeData(),
      variables: {
        session: {
          name: "系统变量",
          items: this.sessionVariables,
          visible: !1
        },
        forms: {
          name: "表单变量",
          items: this.getContextFormVariables(),
          visible: !0
        }
      }
    };
  }
  onBeforeOpenExpression(e, t, i) {
    const s = i === "Field" ? e.binding.field : e.id, o = this.getExpressionRule(s, t), n = this.getEntitiesAndVariables(), c = {
      message: ["validate", "required", "dataPicking"].includes(t) && o ? o.message : "",
      ...n
    };
    return o.messageType != null && (c.messageType = o.messageType), c;
  }
  buildRule(e, t, i, s) {
    const { expression: o, message: n, messageType: c } = t, l = {
      id: `${e}_${i}`,
      type: i,
      value: o
    };
    return (i === "validate" || i === "dataPicking" || i === "required") && (l.message = n), i === "dataPicking" && (l.messageType = c), i === "validate" && s && (l.elementId = s), l;
  }
  getExpressionData() {
    const { expressions: e } = this.formSchemaService.getFormSchema().module;
    return e || [];
  }
  updateExpression(e, t, i, s) {
    const o = t === "Field" ? e.binding.field : e.id, n = this.buildRule(o, i, s, e.type === "form-group" ? e.id : "");
    let l = this.getExpressionData().find((a) => a.targetType === t && a.target === o);
    const d = (a) => a.value.trim() === "";
    if (l) {
      const a = l.rules.find((f) => f.id === n.id);
      if (a)
        d(n) ? l.rules = l.rules.filter((f) => f.id !== n.id) : (Object.assign(a, n), s === "validate" && e.type === "form-group" && (a.elementId = e.id));
      else {
        if (d(n))
          return null;
        l.rules = l.rules || [], l.rules.push(n);
      }
    } else {
      if (d(n))
        return null;
      l = {
        target: `${o}`,
        rules: [n],
        targetType: t
      };
    }
    return l;
  }
  getExpressionEditorOptions(e, t, i, s) {
    return i.reduce((o, n) => {
      var l, d;
      const c = t === "Field" ? (l = e == null ? void 0 : e.binding) == null ? void 0 : l.field : e.id;
      return o[n] = {
        hide: t === "Field" ? !!((d = e == null ? void 0 : e.binding) != null && d.field) : !1,
        description: "",
        title: this.expressionNames[n],
        type: "string",
        $converter: this.getExpressionConverter(c),
        refreshPanelAfterChanged: !0,
        editor: {
          type: "expression-editor",
          singleExpand: !1,
          dialogTitle: `${this.expressionNames[n]}编辑器`,
          showMessage: n === "validate" || n === "dataPicking" || n === "required",
          showMessageType: n === "dataPicking",
          beforeOpen: () => this.onBeforeOpenExpression(e, n, t),
          onSubmitModal: (a) => {
            const f = this.updateExpression(e, t, a, n);
            if (s) {
              const u = this.buildRule(c, a, n);
              s(u);
            }
            return f;
          }
        }
      }, o;
    }, {});
  }
  getExpressionInfo(e, t, i) {
    const s = t === "Field" ? e.binding.field : e.id, o = this.getExpressionRule(s, i), n = {
      value: o && o.value,
      targetId: s,
      targetType: t,
      expressionType: i
    };
    return o && o.message && (n.message = o.message), n;
  }
  getExpressionConfig(e, t, i = ["compute", "dependency", "validate"], s) {
    return {
      description: "表达式",
      title: "表达式",
      hide: !e.binding,
      properties: {
        ...this.getExpressionEditorOptions(e, t, i, s)
      }
    };
  }
  getExpressionOptions(e, t, i) {
    const s = this.getExpressionInfo(e, t, i);
    return {
      dialogTitle: `${this.expressionNames[i] || "表达式"}编辑器`,
      singleExpand: !1,
      showMessage: i === "required",
      beforeOpen: () => this.onBeforeOpenExpression(e, i, t),
      expressionInfo: s
    };
  }
}
class _ {
  constructor(e, t) {
    b(this, "componentId");
    b(this, "viewModelId");
    b(this, "eventsEditorUtils");
    b(this, "formSchemaUtils");
    b(this, "formMetadataConverter");
    b(this, "designViewModelUtils");
    b(this, "designViewModelField");
    b(this, "controlCreatorUtils");
    b(this, "designerHostService");
    b(this, "designerContext");
    b(this, "modalService", null);
    /** 表单规则 */
    b(this, "formRule", null);
    b(this, "schemaService", null);
    b(this, "metadataService", null);
    b(this, "propertyConfig", {
      type: "object",
      categories: {}
    });
    b(this, "expressionProperty");
    var i;
    this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((i = this.formSchemaUtils) == null ? void 0 : i.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService, this.designerContext = t.designerContext, this.modalService = t.modalService, this.expressionProperty = new Se(this.formSchemaUtils);
  }
  getFormDesignerInstance() {
    var e, t;
    return (t = (e = this.designerContext) == null ? void 0 : e.instances) == null ? void 0 : t.formDesigner.value;
  }
  getTableInfo() {
    var e;
    return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
  }
  setDesignViewModelField(e) {
    var i;
    const t = e.binding && e.binding.type === "Form" && e.binding.field;
    if (t) {
      if (!this.designViewModelField) {
        const s = this.designViewModelUtils.getDgViewModel(this.viewModelId);
        this.designViewModelField = s.fields.find((o) => o.id === t);
      }
      e.updateOn = (i = this.designViewModelField) == null ? void 0 : i.updateOn;
    }
  }
  getBasicPropConfig(e) {
    return {
      description: "Basic Information",
      title: "基本信息",
      properties: {
        id: {
          description: "组件标识",
          title: "标识",
          type: "string",
          readonly: !0
        },
        type: {
          description: "组件类型",
          title: "控件类型",
          type: "select",
          editor: {
            type: "combo-list",
            textField: "name",
            valueField: "value",
            idField: "value",
            editable: !1,
            data: [{ value: e.type, name: T[e.type] && T[e.type].name }]
          }
        }
      }
    };
  }
  getAppearanceConfig(e = null, t = {}, i) {
    const s = {
      title: "外观",
      description: "Appearance"
    }, o = {
      class: {
        title: "class样式",
        type: "string",
        description: "组件的CSS样式",
        $converter: "/converter/appearance.converter",
        parentPropertyID: "appearance"
      },
      style: {
        title: "style样式",
        type: "string",
        description: "组件的样式",
        $converter: "/converter/appearance.converter",
        parentPropertyID: "appearance"
      }
    };
    for (const n in t)
      o[n] = Object.assign(o[n] || {}, t[n]);
    return {
      ...s,
      properties: { ...o },
      setPropertyRelates(n, c) {
        if (n) {
          switch (n && n.propertyID) {
            case "class":
            case "style": {
              G.value++;
              break;
            }
          }
          i && i(n, e, c);
        }
      }
    };
  }
  /**
   * 
   * @param propertyData 
   * @param propertyTypes 
   * @param propertyName 
   * @param constInfos 
   * @param variableInfos 
   * @param expressionType 指定表达式类型，存在属性和表达式类型不一致的情况
   * @returns 
   */
  getPropertyEditorParams(e, t = [], i = "visible", s = {}, o = {}, n = "") {
    const { getVariables: c, getControlName: l, getStateMachines: d } = xe(this.designerHostService), a = this.getRealTargetType(e), f = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], u = {
      type: "property-editor",
      propertyTypes: f
    };
    return f.map((h) => {
      switch (h) {
        case "Const":
          Object.assign(u, {
            constType: "enum",
            constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
          }, s);
          break;
        case "Expression":
          u.expressionConfig = this.getExpressionOptions(e, a, n || i);
          break;
        case "StateMachine":
          u.stateMachines = d();
          break;
        case "Variable":
          Object.assign(u, {
            controlName: l(e),
            newVariablePrefix: "is",
            newVariableType: "Boolean",
            variables: c(this.viewModelId),
            parentComponentId: this.componentId === "root-component" ? "" : "root-component",
            onBeforeOpenVariables: (m) => {
              m.value = c(this.viewModelId);
            }
          }, o), this.designerContext.designerMode === "PC_RTC" && (u.newVariablePrefix = "ext_" + u.newVariablePrefix);
          break;
      }
    }), u;
  }
  getVisibleProperty(e, t = "") {
    var o;
    let i = ["Const", "Variable", "StateMachine", "Expression"];
    return t === "gridFieldEditor" ? i = ["Const", "Expression"] : t === "form-group" && !((o = e.binding) != null && o.field) && (i = ["Const", "Variable", "StateMachine"]), {
      visible: {
        title: "是否可见",
        type: "boolean",
        description: "运行时组件是否可见",
        editor: this.getPropertyEditorParams(e, i, "visible")
      }
    };
  }
  /**
   * 获取行为
   * @param propertyData 
   * @param viewModelId 
   * @returns 
   */
  getBehaviorConfig(e, t = "", i = {}, s) {
    const o = {
      title: "行为",
      description: ""
    }, n = this.getVisibleProperty(e, t);
    for (const l in i)
      n[l] = Object.assign(n[l] || {}, i[l]);
    const c = this;
    return {
      ...o,
      properties: { ...n },
      setPropertyRelates(l, d) {
        if (l) {
          switch (l.propertyID) {
            case "disabled":
            case "readonly":
            case "visible":
              c.afterMutilEditorChanged(e, l);
              break;
          }
          s && s(l, d);
        }
      }
    };
  }
  /**
   * 当多值编辑器变更时
   * @param propertyData 
   * @param changeObject 
   */
  afterMutilEditorChanged(e, t) {
    this.addNewVariableToViewModel(t, this.viewModelId), this.updateExpressionValue(t, e), this.clearExpression(t, e);
  }
  /**
   * 
   * @param propertyId 
   * @param componentInstance 
   * @returns 
   */
  updateElementByParentContainer(e, t) {
    const i = t && t.parent && t.parent.schema;
    if (!i)
      return;
    const s = i.contents.findIndex((n) => n.id === e), o = Q(i.contents[s]);
    i.contents.splice(s, 1), i.contents.splice(s, 0, o), J();
  }
  /**
   * 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中
   * @param changeObject 
   * @param viewModelId 
   * @returns 
   */
  addNewVariableToViewModel(e, t) {
    const i = e.propertyValue;
    if (!(i && typeof i == "object") || !(i.type === "Variable" && i.isNewVariable))
      return;
    const n = {
      id: i.field,
      category: "locale",
      code: i.fullPath,
      name: i.fullPath,
      type: i.newVariableType || "String",
      isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
    };
    delete i.newVariableType, delete i.isNewVariable, this.formSchemaUtils.getVariableByCode(n.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(n);
  }
  getExpressions() {
    let e = [];
    return this.formRule ? (this.formRule.expressions = this.formRule.expressions || [], e = this.formRule.expressions || []) : e = this.formSchemaUtils.getExpressions(), e;
  }
  /**
   * 更新表达式到expressions节点
   * @param changeObject 
   */
  updateExpressionValue(e, t) {
    const i = e.propertyValue;
    if (!((i && i.type) === "Expression" && i.expressionInfo))
      return;
    const { expressionId: n, expressionInfo: c } = i, { targetId: l, targetType: d, expressionType: a, value: f, message: u } = c, h = this.getExpressions();
    let m = h.find((z) => z.target === l);
    m || (m = { target: l, rules: [], targetType: d }, h.push(m));
    const y = m.rules.find((z) => z.type === a);
    if (y)
      y.value = f, y.message = u, (a === "minDate" || a === "maxDate" || a === "defaultTime") && (y.elementId = t.id);
    else {
      const z = { id: n, type: a, value: f, message: u, elementId: t.id };
      m.rules.push(z);
    }
    delete i.expressionInfo;
  }
  /**
   * 属性类型切换为非表达式后，清除原表达式
   * @param changeObject 
   * @param propertyData 
   * @returns 
   */
  clearExpression(e, t) {
    const i = e.propertyValue;
    if (i && i.type === "Expression")
      return;
    const o = e.propertyID, n = this.getExpressions(), c = t.binding ? t.binding.field : t.id, l = n.find((d) => d.target === c);
    !l || !l.rules || (l.rules = l.rules.filter((d) => d.type !== o));
  }
  getExpressionOptions(e, t, i) {
    return this.expressionProperty.getExpressionOptions(e, t, i);
  }
  getRealTargetType(e) {
    return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item", "drawer-toolbar-item"].indexOf(e.type) > -1 ? "Button" : e.binding && e.binding.field ? "Field" : "Container";
  }
  createBaseEventProperty(e) {
    const t = {};
    return t[this.viewModelId] = {
      type: "events-editor",
      editor: {
        initialData: e,
        viewSourceHandle: (i) => {
          var s;
          ((s = i.controller) == null ? void 0 : s.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(i);
        }
      }
    }, t;
  }
}
class ze extends _ {
  constructor(e, t) {
    super(e, t);
  }
  getPropertyConfig(e) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.appearance = this.getAppearanceConfig(e), this.propertyConfig;
  }
  getBehaviorProperties(e) {
    return {
      description: "",
      title: "行为",
      properties: {
        direction: {
          title: "布局方向",
          description: "指定内部分栏面板的布局方向",
          type: "string",
          editor: {
            type: "combo-list",
            data: [
              {
                id: "row",
                name: "横向排列"
              },
              {
                id: "column",
                name: "上下排列"
              }
            ]
          }
        }
      },
      setPropertyRelates(t, i) {
        if (t && t.propertyID === "direction") {
          const s = t.propertyValue !== "column", o = s ? "f-col-h" : "f-col-w", n = s ? "f-col-w" : "f-col-h", c = s ? ["s", "n"] : ["e", "w"];
          e == null || e.contents.forEach((l, d) => {
            var a;
            (a = l.appearance) != null && a.class && (l.appearance.class = l.appearance.class.replaceAll(o, n)), l.resizable === !0 && l.resizeHandle && c.findIndex((f) => f === l.resizeHandle) > -1 && d === 0 && (l.resizeHandle = s ? "e" : "s"), s && l.minHeight && (l.minHeight = null), !s && l.minWidth && (l.minWidth = null);
          });
        }
      }
    };
  }
}
function Pe(r, e) {
  const t = new j(), { canMove: i, canDelete: s } = t.getTemplateRule(r, e), o = r.schema;
  function n() {
    return !1;
  }
  function c() {
    return s;
  }
  function l() {
    return i;
  }
  function d() {
    return !0;
  }
  function a(f) {
    return new ze(f, e).getPropertyConfig(o);
  }
  return { canAccepts: n, checkCanDeleteComponent: c, checkCanMoveComponent: l, hideNestedPaddingInDesginerView: d, getPropsConfig: a };
}
const Re = /* @__PURE__ */ M({
  name: "FSplitterDesign",
  props: O,
  emits: [],
  setup(r, e) {
    const t = x(), i = R("designer-host-service"), s = R("design-item-context"), o = Pe(s, i), n = A(t, s, o);
    n.value.canNested = !1;
    const c = D(t), {
      horizontalResizeHandleStyle: l,
      verticalResizeHandleStyle: d,
      resizeOverlayStyle: a
    } = c;
    F("splitter", {
      useResizeHandleComposition: c
    });
    const f = w(() => I({
      "f-splitter": !0
    }, r == null ? void 0 : r.customClass)), u = w(() => {
      const h = {
        "flex-direction": r.direction === "row" ? "row" : "column"
      };
      return H(h, r == null ? void 0 : r.customStyle);
    });
    return N(() => {
      t.value.componentInstance = n;
    }), e.expose(n.value), () => S("div", {
      class: f.value,
      ref: t,
      style: u.value
    }, [e.slots.default && e.slots.default(), S("div", {
      class: "f-splitter-resize-overlay",
      style: a.value
    }, null), S("div", {
      class: "f-splitter-horizontal-resize-proxy",
      style: l.value
    }, null), S("div", {
      class: "f-splitter-vertical-resize-proxy",
      style: d.value
    }, null)]);
  }
});
class Ee extends _ {
  constructor(t, i) {
    super(t, i);
    //  父级指定的方向是否是横向
    b(this, "parentSplitterDirectionIsRow", !0);
    // 记录在父中位置
    b(this, "positionIndex", -1);
    b(this, "notifyService");
    b(this, "designItemContext", null);
    this.notifyService = new Z();
  }
  // parentSplitterDirectionIsRow
  getPropertyConfig(t, i, s = !0, o = 0) {
    return this.parentSplitterDirectionIsRow = s, this.designItemContext = i, this.positionIndex = o, this.propertyConfig.categories.basic = this.getBasicPropConfig(t), this.propertyConfig.categories.appearance = this.getAppearanceProperties(t), this.propertyConfig;
  }
  getAppearanceProperties(t) {
    const i = this, s = i.parentSplitterDirectionIsRow && t.resizable === !0, o = !i.parentSplitterDirectionIsRow && t.resizable === !0;
    return {
      description: "",
      title: "外观",
      properties: {
        class: {
          description: "组件的CSS样式",
          title: "class样式"
        },
        style: {
          description: "组件的内容样式",
          title: "style样式"
        },
        minWidth: {
          description: "面板最小宽度",
          title: "最小宽度（px）",
          type: "number",
          editor: {
            nullable: !0
          },
          visible: s
        },
        minHeight: {
          description: "面板最小高度",
          title: "最小高度（px）",
          type: "number",
          editor: {
            nullable: !0
          },
          visible: o
        }
      }
    };
  }
  getBehaviorProperties(t) {
    const i = [{ id: "e", name: "左侧" }, { id: "w", name: "右侧" }], s = [{ id: "n", name: "上方" }, { id: "s", name: "下方" }], o = this;
    return {
      description: "",
      title: "行为",
      properties: {
        resizable: {
          description: "规则：两列布局只有一个元素启用拖拽，多列布局可以有多个元素启用拖拽。",
          title: "允许拖拽",
          type: "boolean",
          refreshPanelAfterChanged: !0
        },
        resizeHandle: {
          description: "指定拖拽条的位置",
          title: "指定拖拽条的位置",
          type: "string",
          visible: t.resizable === !0,
          defaultValue: t.resizeHandle || "",
          editor: {
            type: "combo-list",
            data: this.parentSplitterDirectionIsRow ? i : s
          }
        }
      },
      setPropertyRelates(n, c) {
        var l, d, a;
        if (n)
          switch (n && n.propertyID) {
            case "resizable": {
              n.propertyValue && (((a = (d = (l = o.designItemContext) == null ? void 0 : l.parent) == null ? void 0 : d.schema) == null ? void 0 : a.contents) || []).find((u) => u.id !== t.id && t.resizable) && o.notifyService.warning({ message: "相邻元素已启用拖拽功能", position: "top-center" });
              break;
            }
          }
      }
    };
  }
}
function Ve(r, e) {
  const t = new j(), i = r.schema, { canAccept: s } = t.getTemplateRule(r, e);
  function o(d) {
    return K().basalDragulaRuleForContainer(d, e) ? s : !1;
  }
  function n(d) {
    var h, m;
    const a = new Ee(d, e), f = (((h = r == null ? void 0 : r.parent) == null ? void 0 : h.schema.direction) || "row") === "row", u = (((m = r == null ? void 0 : r.parent) == null ? void 0 : m.schema.contents) || []).findIndex((y) => i.id === (y == null ? void 0 : y.id));
    return u === 0 && !i.resizeHandle && i.resizable && (i.resizeHandle = f ? "e" : "s"), a.getPropertyConfig(i, r, f, u);
  }
  function c() {
    return !1;
  }
  function l() {
    return !1;
  }
  return {
    canAccepts: o,
    getPropsConfig: n,
    checkCanMoveComponent: c,
    checkCanDeleteComponent: l
  };
}
const Me = /* @__PURE__ */ M({
  name: "FSplitterPaneDesign",
  props: k,
  emits: [],
  setup(r, e) {
    const t = x(), i = R("designer-host-service"), s = R("design-item-context"), o = Ve(s, i), n = A(t, s, o);
    n.value.styles = "padding:0;box-shadow:none;", n.value.canNested = !1, n.value.canMove = !1, n.value.canDelete = !1, N(() => {
      t.value.componentInstance = n;
    }), e.expose(n.value);
    const c = R("splitter"), {
      useResizeHandleComposition: l
    } = c, d = L(r, l), {
      actualHeight: a,
      actualWidth: f
    } = d, u = x(r.position), h = w(() => {
      const v = {
        "f-splitter-pane": !0,
        "f-splitter-pane-main": u.value === "center",
        "has-resize-bar": r.resizable,
        "f-component-splitter-pane": !0,
        "drag-container": !0
      };
      return v["f-splitter-pane-" + u.value] = !0, I(v, r == null ? void 0 : r.customClass);
    }), m = w(() => r.resizeHandle ? r.resizeHandle.split(",").filter((v) => ["e", "n", "s", "w"].find((p) => p === v)) : []), y = w(() => {
      const v = {};
      return (f.value && u.value === "left" || u.value === "right" || m.value.find((p) => p === "e") || m.value.find((p) => p === "w")) && (v.width = `${f.value}px`), (a.value && u.value === "bottom" || u.value === "top" || m.value.find((p) => p === "s") || m.value.find((p) => p === "n")) && (v.height = `${a.value}px`), H(v, r == null ? void 0 : r.customStyle);
    }), z = w(() => ({
      "no-drag": !0,
      "f-splitter-resize-bar": !0,
      "f-splitter-resize-bar-e": u.value === "left",
      "f-splitter-resize-bar-n": u.value === "bottom",
      "f-splitter-resize-bar-s": u.value === "top",
      "f-splitter-resize-bar-w": u.value === "right"
    }));
    function V() {
      return m.value.length > 0 ? m.value.map((v) => S("span", {
        class: "f-splitter-resize-bar f-splitter-resize-bar-" + v
      }, null)) : S("span", {
        class: z.value
      }, null);
    }
    return () => S("div", {
      ref: t,
      "data-dragref": `${s.schema.id}-container`,
      class: h.value,
      style: y.value
    }, [e.slots.default && e.slots.default(), r.resizable && V()]);
  }
});
E.install = (r) => {
  r.component(E.name, E), r.component(B.name, B);
};
E.register = (r, e, t, i) => {
  r.splitter = E, e.splitter = W, r["splitter-pane"] = B, e["splitter-pane"] = q;
};
E.registerDesigner = (r, e, t) => {
  r.splitter = Re, e.splitter = W, r["splitter-pane"] = Me, e["splitter-pane"] = q;
};
export {
  E as FSplitter,
  B as FSplitterPane,
  E as default,
  O as splitterProps,
  W as splitterPropsResolver
};