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

Farris Vue, a Farris Design based Vue3 component library.

import { ref as w, computed as L, defineComponent as U, provide as I, createVNode as A, watch as Pe, inject as Y, onMounted as K } from "vue";
import { cloneDeep as Z, isPlainObject as x } from "lodash-es";
import { getCustomClass as Te, getCustomStyle as Ce } from "../common/index.esm.js";
import { getSchemaByTypeForDesigner as Me } from "../dynamic-resolver/index.esm.js";
function ee(e, t) {
  let n;
  function r(a) {
    const { properties: u, title: g, ignore: l } = a, o = l && Array.isArray(l), i = Object.keys(u).reduce((c, f) => ((!o || !l.find((d) => d === f)) && (c[f] = u[f].type === "object" && u[f].properties ? r(u[f]) : Z(u[f].default)), c), {});
    if (g && (!o || !l.find((c) => c === "id"))) {
      const c = g.toLowerCase().replace(/-/g, "_");
      i.id = `${c}_${Math.random().toString().slice(2, 6)}`;
    }
    return i;
  }
  function S(a) {
    const { properties: u, title: g, required: l } = a;
    if (l && Array.isArray(l)) {
      const o = l.reduce((i, c) => (i[c] = u[c].type === "object" && u[c].properties ? r(u[c]) : Z(u[c].default), i), {});
      if (g && l.find((i) => i === "id")) {
        const i = g.toLowerCase().replace(/-/g, "_");
        o.id = `${i}_${Math.random().toString().slice(2, 6)}`;
      }
      return o;
    }
    return {
      type: g
    };
  }
  function z(a, u = {}, g) {
    const l = e[a];
    if (l) {
      let o = S(l);
      const i = t[a];
      return o = i ? i({ getSchemaByType: z }, o, u, g) : o, n != null && n.appendIdentifyForNewControl && n.appendIdentifyForNewControl(o), o;
    }
    return null;
  }
  function b(a, u) {
    const g = r(u);
    return Object.keys(g).reduce((l, o) => (Object.prototype.hasOwnProperty.call(a, o) && (l[o] && x(l[o]) && x(a[o] || !a[o]) ? Object.assign(l[o], a[o] || {}) : l[o] = a[o]), l), g), g;
  }
  function F(a, u) {
    return Object.keys(a).filter((l) => a[l] != null).reduce((l, o) => {
      if (u.has(o)) {
        const i = u.get(o);
        if (typeof i == "string")
          l[i] = a[o];
        else {
          const c = i(o, a[o], a);
          Object.assign(l, c);
        }
      } else
        l[o] = a[o];
      return l;
    }, {});
  }
  function j(a, u, g = /* @__PURE__ */ new Map()) {
    const l = b(a, u);
    return F(l, g);
  }
  function s(a) {
    var g;
    const u = a.type;
    if (u) {
      const l = e[u];
      if (!l)
        return a;
      const o = b(a, l), i = ((g = a.editor) == null ? void 0 : g.type) || "";
      if (i) {
        const c = e[i], f = b(a.editor, c);
        o.editor = f;
      }
      return o;
    }
    return a;
  }
  function h(a) {
    n = a;
  }
  return { getSchemaByType: z, resolveSchemaWithDefaultValue: s, resolveSchemaToProps: j, mappingSchemaToProps: F, setDesignerContext: h };
}
const te = {}, ne = {}, { getSchemaByType: kt, resolveSchemaWithDefaultValue: Oe, resolveSchemaToProps: Fe, mappingSchemaToProps: we, setDesignerContext: Ht } = ee(te, ne);
function De(e = {}) {
  function t(s, h, a, u) {
    if (typeof a == "number")
      return u[s].length === a;
    if (typeof a == "object") {
      const g = Object.keys(a)[0], l = a[g];
      if (g === "not")
        return Number(u[s].length) !== Number(l);
      if (g === "moreThan")
        return Number(u[s].length) >= Number(l);
      if (g === "lessThan")
        return Number(u[s].length) <= Number(l);
    }
    return !1;
  }
  function n(s, h, a, u) {
    return u[s] && u[s].propertyValue && String(u[s].propertyValue.value) === String(a);
  }
  const r = /* @__PURE__ */ new Map([
    ["length", t],
    ["getProperty", n]
  ]);
  Object.keys(e).reduce((s, h) => (s.set(h, e[h]), s), r);
  function S(s, h) {
    const a = s;
    return typeof h == "number" ? [{ target: a, operator: "length", param: null, value: Number(h) }] : typeof h == "boolean" ? [{ target: a, operator: "getProperty", param: s, value: !!h }] : typeof h == "object" ? Object.keys(h).map((u) => {
      if (u === "length")
        return { target: a, operator: "length", param: null, value: h[u] };
      const g = u, l = h[u];
      return { target: a, operator: "getProperty", param: g, value: l };
    }) : [];
  }
  function z(s) {
    return Object.keys(s).reduce((a, u) => {
      const g = S(u, s[u]);
      return a.push(...g), a;
    }, []);
  }
  function b(s, h) {
    if (r.has(s.operator)) {
      const a = r.get(s.operator);
      return a && a(s.target, s.param, s.value, h) || !1;
    }
    return !1;
  }
  function F(s, h) {
    return z(s).reduce((g, l) => g && b(l, h), !0);
  }
  function j(s, h) {
    const a = Object.keys(s), u = a.includes("allOf"), g = a.includes("anyOf"), l = u || g, c = (l ? s[l ? u ? "allOf" : "anyOf" : "allOf"] : [s]).map((d) => F(d, h));
    return u ? !c.includes(!1) : c.includes(!0);
  }
  return { parseValueSchema: j };
}
const Be = {
  convertTo: (e, t, n, r) => {
    e.appearance || (e.appearance = {}), e.appearance[t] = n;
  },
  convertFrom: (e, t, n) => e.appearance ? e.appearance[t] : e[t]
}, je = {
  convertFrom: (e, t, n) => e.buttons && e.buttons.length ? `共 ${e.buttons.length} 项` : "无"
}, Ee = {
  convertTo: (e, t, n, r) => {
    e.editor && (e.editor[t] = n);
  },
  convertFrom: (e, t, n) => e.editor && Object.prototype.hasOwnProperty.call(e.editor, t) ? e.editor[t] : e[t]
}, H = {
  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: "列表导航" },
  "list-view": { type: "list-view", name: "列表" },
  "filter-bar": { type: "filter-bar", name: "筛选条" },
  "language-textbox": { type: "language-textbox", name: "多语输入框" }
}, $e = {
  convertFrom: (e, t, n) => {
    var S;
    const r = e.editor && e.editor[t] ? e.editor[t] : e[t];
    return ((S = H[r]) == null ? void 0 : S.name) || r;
  }
}, ke = {
  convertTo: (e, t, n, r) => {
    e[t] = e[t];
  },
  convertFrom: (e, t, n) => e.editor ? n.getRealEditorType(e.editor.type) : ""
}, He = {
  convertTo: (e, t, n, r) => {
    (e.type === "data-grid-column" || e.type === "tree-grid-column") && (e.formatter ? e.formatter[t] = n : e.formatter = {
      [t]: n
    });
  },
  convertFrom: (e, t, n) => {
    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 === "tempDateFormat")
        return e.formatter.dateFormat === "yyyy年MM月dd日" ? "yearMonthDay" : e.formatter.dateFormat === "yyyy-MM-dd HH:mm:ss" ? "yyyy-MM-ddTHH:mm:ss" : e.formatter.dateFormat === "yyyy/MM/dd HH:mm:ss" ? "yyyy/MM/ddTHH:mm:ss" : e.formatter.dateFormat === "yyyy年MM月dd日 HH时mm分ss秒" ? "yearMonthDayHourMinuteSecond" : e.formatter.tempDateFormat || e.formatter.dateFormat || "yyyy-MM-dd";
      if (t === "customFormat")
        return e.formatter.customFormat;
      if (t === "type")
        return e.formatter.type || "none";
    }
    return "none";
  }
}, Ne = {
  convertTo: (e, t, n, r) => {
    e.command ? e.command[t] = n : e.command = {
      [t]: n
    }, t === "enable" && n && (e.command.commands || (e.command.commands = [
      {
        text: "编辑",
        type: "primary",
        command: "edit"
      },
      {
        text: "删除",
        type: "danger",
        command: "remove"
      }
    ]));
  },
  convertFrom: (e, t, n) => e.command && t === "enable" ? e.command.enable : ""
}, Le = {
  convertTo: (e, t, n, r) => {
    e.column ? e.column[t] = n : e.column = {
      [t]: n
    }, t === "fitColumns" && n && (e.column.fitMode || (e.column.fitMode = "average"));
  },
  convertFrom: (e, t, n) => {
    if (e.column) {
      if (t === "fitColumns")
        return e.column.fitColumns;
      if (t === "fitMode")
        return e.column.fitMode;
    }
    return "";
  }
}, Ae = {
  convertTo: (e, t, n, r) => {
    e.summary ? e.summary[t] = n : e.summary = {
      [t]: n
    }, t === "enable" && n && (e.summary ? e.summary.groupFields || (e.summary.groupFields = []) : e.summary = {
      enable: n,
      groupFields: []
    });
  },
  convertFrom: (e, t, n) => e.summary && t === "enable" ? e.summary.enable : e.type === "data-grid-column" ? e.enableSummary === void 0 ? !1 : e.enableSummary : ""
}, Re = {
  convertTo: (e, t, n, r) => {
    e.group ? e.group[t] = n : e.group = {
      [t]: n
    }, t === "enable" && n && (e.group ? e.group.groupFields || (e.group.groupFields = []) : e.group = {
      enable: n,
      groupFields: [],
      showSummary: !1
    });
  },
  convertFrom: (e, t, n) => {
    if (e.group) {
      if (t === "enable")
        return e.group.enable;
      if (t === "showSummary")
        return e.group.showSummary;
    }
  }
}, We = {
  convertFrom: (e, t) => e.binding ? e.binding.path : "",
  convertTo: (e, t, n) => {
    if (n && n.length > 0) {
      const r = n[0];
      e.binding || (e.binding = {}), e.binding.type = "Form", e.binding.path = r.bindingField, e.binding.field = r.id, e.binding.fullPath = r.path, e.path = r.bindingPath;
    }
  }
}, qe = {
  convertTo: (e, t, n, r) => {
    e.pagination || (e.pagination = {}), e.pagination[t] = n;
  },
  convertFrom: (e, t, n) => e.pagination ? e.pagination[t] : e[t]
}, Ve = {
  convertTo: (e, t, n, r) => {
    e.rowNumber || (e.rowNumber = {}), e.rowNumber[t] = n;
  },
  convertFrom: (e, t, n) => e.rowNumber ? e.rowNumber[t] : e[t]
}, _e = {
  convertTo: (e, t, n, r) => {
    e.selection || (e.selection = {}), e.selection[t] = n;
  },
  convertFrom: (e, t, n) => e.selection ? e.selection[t] : e[t]
}, Ye = {
  convertFrom: (e, t, n) => e[t] && e[t].length ? `共 ${e[t].length} 项` : ""
}, Ue = {
  convertFrom: (e, t) => e[t] || "",
  convertTo: (e, t, n) => {
    e[t] = n;
  }
}, Xe = {
  convertTo: (e, t, n, r) => {
    e.size || (e.size = {}), e.size[t] = n;
  },
  convertFrom: (e, t, n) => e.size ? e.size[t] : e[t]
}, Ge = {
  convertFrom: (e, t, n) => {
    var r, S;
    return (r = e.formatter) != null && r.data && t === "formatterEnumData" && !e.formatterEnumData ? (S = e.formatter) == null ? void 0 : S.data : e.formatterEnumData;
  }
}, Je = {
  convertTo: (e, t, n, r) => {
    e.sort || (e.sort = {}), e.sort[t] = n;
  },
  convertFrom: (e, t, n) => {
    var r, S;
    if (t === "mode")
      return ((r = e.sort) == null ? void 0 : r.mode) || "client";
    if (t === "multiSort")
      return !!((S = e.sort) != null && S.multiSort);
  }
}, Qe = {
  convertTo: (e, t, n, r) => {
    e.filter || (e.filter = {}), e.filter[t] = n;
  },
  convertFrom: (e, t, n) => {
    var r;
    if (t === "mode")
      return ((r = e.filter) == null ? void 0 : r.mode) || "client";
  }
}, Ze = {
  convertTo: (e, t, n, r) => {
    e.rowOption ? e.rowOption[t] = n : e.rowOption = {
      [t]: n
    };
  },
  convertFrom: (e, t, n) => {
    if (e.rowOption) {
      if (t === "customRowStyle")
        return e.rowOption.customRowStyle;
      if (t === "customCellStyle")
        return e.rowOption.customCellStyle;
    }
    return "";
  }
};
function oe(e, t, n) {
  const r = /* @__PURE__ */ new Map([
    ["/converter/appearance.converter", Be],
    ["/converter/buttons.converter", je],
    ["/converter/property-editor.converter", Ee],
    ["/converter/items-count.converter", Ye],
    ["/converter/type.converter", $e],
    ["/converter/change-editor.converter", ke],
    ["/converter/change-formatter.converter", He],
    ["/converter/column-command.converter", Ne],
    ["/converter/column-option.converter", Le],
    ["/converter/summary.converter", Ae],
    ["/converter/group.converter", Re],
    ["/converter/form-group-label.converter", Ue],
    ["/converter/field-selector.converter", We],
    ["/converter/pagination.converter", qe],
    ["/converter/row-number.converter", Ve],
    ["/converter/grid-selection.converter", _e],
    ["/converter/size.converter", Xe],
    ["/converter/change-formatter-enum.converter", Ge],
    ["/converter/grid-sort.converter", Je],
    ["/converter/grid-filter.converter", Qe],
    ["/converter/row-option.converter", Ze]
  ]), S = /* @__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 }]
  ]), z = De();
  function b(l, o) {
    return () => z.parseValueSchema(l, o);
  }
  function F(l, o, i) {
    return l.includes("visible") && o.visible !== void 0 ? typeof o.visible == "boolean" ? () => !!o.visible : o.visible === void 0 ? !0 : b(o.visible, i) : () => !0;
  }
  function j(l, o, i) {
    return l.includes("readonly") && o.readonly !== void 0 ? typeof o.readonly == "boolean" ? () => !!o.readonly : b(o.readonly, i) : () => !1;
  }
  function s(l, o) {
    const i = l.$converter || o;
    return typeof i == "string" && i && r.has(i) ? r.get(i) || null : i || null;
  }
  function h(l, o, i, c, f, d = "", O = "") {
    return Object.keys(l).map((v) => {
      const D = w(1), P = v, y = l[v], T = Object.keys(y), E = y.title, p = y.type, C = S.get(p) || { type: "input-group", enableClear: !1 }, M = y.editor ? Object.assign({}, C, y.editor) : Object.assign({}, C), B = F(T, y, o), $ = j(T, y, o);
      M.readonly = M.readonly === void 0 ? $() : M.readonly;
      const N = y.type === "cascade" ? h(y.properties, o, i, c, f, d, O) : [], q = !0;
      let k = s(y, O);
      const R = L({
        get() {
          if (D.value) {
            if (["class", "style"].find((ze) => ze === P) && !k && (k = r.get("/converter/appearance.converter") || null), k && k.convertFrom)
              return k.convertFrom(i, v, f, d);
            const W = i[v];
            return Object.prototype.hasOwnProperty.call(y, "defaultValue") && (W === void 0 || typeof W == "string" && W === "") ? y.type === "boolean" ? y.defaultValue : y.defaultValue || "" : W;
          }
          return null;
        },
        set(W) {
          D.value += 1, k && k.convertTo ? (k.convertTo(c, v, W, f, d), k.convertTo(i, v, W, f, d)) : (c[v] = W, i[v] = W);
        }
      }), { refreshPanelAfterChanged: V, description: he, isExpand: ge, parentPropertyID: Se } = y, Q = { propertyID: P, propertyName: E, propertyType: p, propertyValue: R, editor: M, visible: B, readonly: $, cascadeConfig: N, hideCascadeTitle: q, refreshPanelAfterChanged: V, description: he, isExpand: ge, parentPropertyID: Se };
      return o[P] = Q, Q;
    });
  }
  function a(l, o, i = {}) {
    const c = {}, f = e[l];
    return f && f.categories ? Object.keys(f.categories).map((O) => {
      const m = f.categories[O], v = m == null ? void 0 : m.title, D = h(m.properties || {}, c, {}, i, o);
      return { categoryId: O, categoryName: v, properties: D };
    }) : [];
  }
  function u(l, o, i, c, f = "") {
    const d = o.$ref.schema, O = o.$ref.converter, m = i[d], v = m.type, D = n(m), P = {}, y = e[v];
    if (y && y.categories) {
      const T = y.categories[l], E = T == null ? void 0 : T.title;
      O && Object.keys(T.properties).forEach((M) => {
        T.properties[M].$converter = O;
      });
      const p = (T == null ? void 0 : T.properties) || {}, C = h(p, P, D, m, c, f);
      return { categoryId: l, categoryName: E, properties: C };
    }
    return { categoryId: l, categoryName: "", properties: [] };
  }
  function g(l, o, i, c, f) {
    const d = l.type, O = n(l), m = {};
    let v = f || e[d];
    if (v && Object.keys(v).length === 0 && i && i.getPropConfig && (v = i.getPropConfig(c)), v && v.categories) {
      const D = [];
      return Object.keys(v.categories).map((P) => {
        const y = v.categories[P];
        if (y.$ref) {
          D.push(u(P, y, l, o, c));
          return;
        }
        const T = y == null ? void 0 : y.title, E = y == null ? void 0 : y.tabId, p = y == null ? void 0 : y.tabName, C = y == null ? void 0 : y.hide, M = y == null ? void 0 : y.hideTitle, B = h(y.properties || {}, m, O, l, o, c, y.$converter), { setPropertyRelates: $ } = y, N = y == null ? void 0 : y.parentPropertyID;
        D.push({ categoryId: P, categoryName: T, tabId: E, tabName: p, hide: C, properties: B, hideTitle: M, setPropertyRelates: $, parentPropertyID: N });
      }), D;
    }
    return [];
  }
  return {
    getPropertyConfigBySchema: g,
    getPropertyConfigByType: a,
    propertyConverterMap: r
  };
}
const re = {}, ae = {};
oe(re, ae, Oe);
const ie = {}, le = {}, { getSchemaByType: Nt, resolveSchemaWithDefaultValue: xe, resolveSchemaToProps: Lt, mappingSchemaToProps: At, setDesignerContext: Rt } = ee(ie, le), ce = {}, se = {};
oe(ce, se, xe);
function ue(e, t, n = /* @__PURE__ */ new Map(), r = (b, F, j, s) => F, S = {}, z = (b) => b) {
  return te[t.title] = t, ne[t.title] = r, re[t.title] = S, ae[t.title] = z, ie[t.title] = t, le[t.title] = r, ce[t.title] = S, se[t.title] = z, (b = {}, F = !0) => {
    if (!F)
      return we(b, n);
    const j = Fe(b, t, n), s = Object.keys(e).reduce((h, a) => (h[a] = e[a].default, h), {});
    return Object.assign(s, j);
  };
}
function Ie(e, t) {
  return { customClass: t.class, customStyle: t.style };
}
const fe = /* @__PURE__ */ new Map([
  ["appearance", Ie]
]);
function pe(e, t, n) {
  return t;
}
const Ke = "https://json-schema.org/draft/2020-12/schema", et = "https://farris-design.gitee.io/layout.schema.json", tt = "layout", nt = "A Farris Container Component", ot = "object", rt = {
  id: {
    description: "The unique identifier for layout component",
    type: "string"
  },
  type: {
    description: "The type string of layout component",
    type: "string",
    default: "layout"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  collapsable: {
    description: "",
    type: "boolean",
    default: !1
  },
  resizable: {
    description: "",
    type: "boolean",
    default: !0
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  }
}, at = [
  "id",
  "type",
  "contents"
], it = {
  $schema: Ke,
  $id: et,
  title: tt,
  description: nt,
  type: ot,
  properties: rt,
  required: at
}, lt = "layout", ct = "A Farris Component", st = "object", ut = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "类型",
        title: "类型",
        type: "string",
        readonly: !0
      }
    }
  },
  behavior: {
    description: "Basic Infomation",
    title: "行为",
    properties: {
      collapsable: {
        description: "",
        title: "可收折",
        type: "boolean"
      },
      resizable: {
        description: "",
        title: "可调整尺寸",
        type: "boolean"
      }
    }
  }
}, ft = {
  title: lt,
  description: ct,
  type: st,
  categories: ut
}, G = {
  customStyle: { type: String, defaut: "" },
  customClass: { type: String, defaut: "" }
}, me = ue(G, it, fe, pe, ft);
function ve(e) {
  const t = w(-1), n = w(-1), r = w(0), S = w(0), z = w(!1), b = w(!1), F = L(() => ({
    display: z.value ? "block" : "none",
    left: `${r.value}px`,
    cursor: "e-resize"
  })), j = L(() => ({
    display: b.value ? "block" : "none",
    top: `${S.value}px`,
    cursor: "n-resize"
  })), s = L(() => {
    const i = {
      display: b.value || z.value ? "block" : "none"
    };
    return S.value > 0 && (i.cursor = "n-resize"), i;
  });
  function h(i, c, f, d) {
    const O = e.value;
    if (O) {
      const { left: m, right: v, width: D } = O.getBoundingClientRect();
      let P = i.clientX - m;
      d === "right" && (P = v - i.clientX), P > c && (P = c), P < f && (P = f), d === "right" && (P = D - P), r.value = P;
    }
  }
  function a(i, c, f, d) {
    const O = e.value;
    if (O) {
      const { top: m, bottom: v, height: D } = O.getBoundingClientRect();
      let P = i.clientY - m;
      d === "bottom" && (P = v - i.clientY), P > c && (P = c), P < f && (P = f), d === "bottom" && (P = D - P), S.value = P;
    }
  }
  function u() {
    const i = e.value;
    if (i) {
      const { width: c, height: f } = i.getBoundingClientRect();
      return { width: c, height: f };
    }
    return null;
  }
  function g() {
    const i = e.value;
    return i ? Array.from(i.querySelectorAll("[data-position]")).reduce((c, f) => {
      const d = f.getAttribute("data-position");
      return c = Object.assign(c, { [d]: f }), c;
    }, {}) : null;
  }
  function l(i, c) {
    const f = u(), d = g();
    if (f && d) {
      const O = d == null ? void 0 : d.right, m = d == null ? void 0 : d.left;
      if (i === "left" && m)
        return O ? f.width - O.clientWidth - c : f.width - c;
      if (i === "right" && O)
        return m ? f.width - m.clientWidth - c : f.width - c;
    }
  }
  function o(i, c) {
    const f = u(), d = g();
    if (f && d) {
      const O = d == null ? void 0 : d.bottom, m = d == null ? void 0 : d.top;
      if (i === "top" && m)
        return O ? f.height - O.clientHeight - c : f.height - c;
      if (i === "bottom" && O)
        return m ? f.height - m.clientHeight - c : f.height - c;
    }
  }
  return {
    horizontalResizeHandleStyle: F,
    verticalResizeHandleStyle: j,
    resizeOverlayStyle: s,
    showHorizontalResizeHandle: z,
    showVerticalResizeHandle: b,
    horizontalResizeBarPosition: t,
    verticalResizeBarPosition: n,
    verticalResizeHandleOffset: S,
    horizontalResizeHandleOffset: r,
    draggingHorizontalResizeHandle: h,
    draggingVerticalResizeHandle: a,
    getPanelMaxHeight: o,
    getPanelMaxWidth: l
  };
}
const _ = /* @__PURE__ */ U({
  name: "FLayout",
  props: G,
  emits: [],
  setup(e, t) {
    const n = w(), r = ve(n), {
      horizontalResizeHandleStyle: S,
      verticalResizeHandleStyle: z,
      resizeOverlayStyle: b
    } = r;
    I("layout", {
      useResizeHandleComposition: r
    });
    const F = L(() => Te({
      "f-layout": !0
    }, e == null ? void 0 : e.customClass)), j = L(() => Ce({}, e == null ? void 0 : e.customStyle));
    return () => A("div", {
      class: F.value,
      style: j.value,
      ref: n
    }, [t.slots.default && t.slots.default(), A("div", {
      class: "f-layout-resize-overlay",
      style: b.value
    }, null), A("div", {
      class: "f-layout-horizontal-resize-proxy",
      style: S.value
    }, null), A("div", {
      class: "f-layout-vertical-resize-proxy",
      style: z.value
    }, null)]);
  }
}), pt = "https://json-schema.org/draft/2020-12/schema", mt = "https://farris-design.gitee.io/layout-pane.schema.json", vt = "layout-pane", yt = "A Farris Container Component", dt = "object", bt = {
  id: {
    description: "The unique identifier for a layout pane",
    type: "string"
  },
  type: {
    description: "The type string of layout paney",
    type: "string",
    default: "layout-pane"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  collapsable: {
    description: "",
    type: "boolean",
    default: !1
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  height: {
    description: "",
    type: "number"
  },
  position: {
    description: "",
    type: "string",
    default: "left",
    enum: [
      "left",
      "center",
      "right",
      "top",
      "bottom"
    ]
  },
  resizeable: {
    description: "",
    type: "boolean",
    default: !0
  },
  width: {
    description: "",
    type: "number"
  },
  visible: {
    description: "",
    type: "number",
    default: !0
  }
}, ht = [
  "id",
  "type",
  "contents"
], gt = {
  $schema: pt,
  $id: mt,
  title: vt,
  description: yt,
  type: dt,
  properties: bt,
  required: ht
}, St = "layout-pane", zt = "A Farris Container Component", Pt = "object", Tt = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "enum"
      },
      width: {
        description: "",
        type: "number",
        title: "宽度"
      },
      height: {
        description: "",
        type: "number",
        title: "高度"
      }
    }
  },
  appearance: {
    title: "样式",
    description: "Appearance",
    properties: {
      class: {
        title: "class样式",
        type: "string",
        description: ""
      },
      style: {
        title: "style",
        type: "string",
        description: ""
      }
    }
  },
  behavior: {
    description: "",
    title: "行为",
    properties: {
      collapsable: {
        description: "",
        type: "boolean",
        title: "允许收折"
      },
      position: {
        description: "",
        type: "enum",
        title: "位置",
        editor: {
          type: "combo-list",
          data: [
            {
              id: "left",
              name: "左侧"
            },
            {
              id: "center",
              name: "居中"
            },
            {
              id: "right",
              name: "右侧"
            },
            {
              id: "top",
              name: "顶部"
            },
            {
              id: "bottom",
              name: "底部"
            }
          ]
        }
      },
      resizeable: {
        description: "",
        type: "boolean",
        title: "允许调整尺寸"
      },
      visible: {
        description: "运行时组件是否可见",
        type: "boolean",
        title: "是否可见"
      }
    }
  }
}, Ct = {
  title: St,
  description: zt,
  type: Pt,
  categories: Tt
}, J = {
  customClass: { type: String, defaut: "" },
  customStyle: { type: String, defaut: "" },
  /** 记录原始定义宽度 */
  width: { type: Number, default: -1 },
  /** 记录原始定义高度 */
  height: { type: Number, default: -1 },
  /** 面板位置 */
  position: { type: String, default: "left" },
  /** 是否显示 */
  visible: { type: Boolean, default: !0 },
  /** True to allow the pane can be resized. */
  resizable: { type: Boolean, default: !0 },
  /** True to allow the pane can be collapsed. */
  collapsable: { type: Boolean, default: !1 },
  /** 面板最小宽度 */
  minWidth: { type: Number, default: 100 },
  /** 面板最小高度 */
  minHeight: { type: Number, default: 100 }
}, ye = ue(J, gt, fe, pe, Ct);
function de(e, t, n, r, S) {
  const {
    horizontalResizeBarPosition: z,
    horizontalResizeHandleOffset: b,
    showHorizontalResizeHandle: F,
    showVerticalResizeHandle: j,
    verticalResizeBarPosition: s,
    verticalResizeHandleOffset: h,
    draggingHorizontalResizeHandle: a,
    draggingVerticalResizeHandle: u,
    getPanelMaxHeight: g,
    getPanelMaxWidth: l
  } = S;
  let o = "", i, c, f;
  function d(v) {
    if ((o === "left" || o === "right") && c) {
      const { left: D } = c.getBoundingClientRect(), { width: P } = i.getBoundingClientRect(), y = v.clientX - D;
      let T = o === "left" ? (P || 0) + (y - z.value) : (P || 0) - (y - z.value);
      T = n.value > 0 ? Math.max(n.value, T) : T;
      const E = l(o, n.value);
      E != null && (T = E > T ? T : E), e.value = T;
    }
    if ((o === "top" || o === "bottom") && c) {
      const { top: D } = c.getBoundingClientRect(), { height: P } = i.getBoundingClientRect(), y = v.clientY - D;
      let T = o === "top" ? (P || 0) + (y - s.value) : (P || 0) - (y - s.value);
      T = r.value > 0 ? Math.max(r.value, T) : T;
      const E = g(o, r.value);
      E != null && (T = E > T ? T : E), t.value = T;
    }
    b.value = 0, h.value = 0, z.value = -1, s.value = -1, F.value = !1, j.value = !1, document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", d), document.body.style.userSelect = "", o = "", i = null, c = null;
  }
  function O(v, D, P) {
    if (o = D, i = P, F.value = !0, c = v.composedPath().find((T) => (T.className || "").split(" ")[0] === "f-layout"), c) {
      const { left: T } = c.getBoundingClientRect(), E = v.clientX - T;
      b.value = E, z.value = E;
      const p = l(o, n.value) || 0;
      f = (C) => a(C, p, n.value, o), document.addEventListener("mousemove", f), document.addEventListener("mouseup", d), document.body.style.userSelect = "none";
    }
  }
  function m(v, D, P) {
    if (o = D, i = P, j.value = !0, c = v.composedPath().find((T) => (T.className || "").split(" ")[0] === "f-layout"), c) {
      const { top: T } = c.getBoundingClientRect();
      h.value = v.clientY - T, s.value = v.clientY - T;
      const E = g(o, r.value) || 0;
      f = (p) => u(p, E, r.value, o), document.addEventListener("mousemove", f), document.addEventListener("mouseup", d), document.body.style.userSelect = "none";
    }
  }
  return { onClickHorizontalResizeBar: O, onClickVerticalResizeBar: m };
}
const X = /* @__PURE__ */ U({
  name: "FLayoutPane",
  props: J,
  emits: [],
  setup(e, t) {
    const n = w(e.minHeight <= 0 ? 100 : e.minHeight), r = w(e.minWidth <= 0 ? 100 : e.minWidth), S = w(e.width <= 0 ? 100 : e.width), z = w(e.height <= 0 ? 100 : e.height), b = w(Math.max(n.value, z.value)), F = w(Math.max(r.value, S.value)), j = w(), s = w(e.position), h = w(e.resizable);
    Pe(() => e.resizable, (m) => {
      h.value = m;
    });
    const a = Y("layout"), {
      useResizeHandleComposition: u
    } = a, g = de(F, b, r, n, u), {
      onClickHorizontalResizeBar: l,
      onClickVerticalResizeBar: o
    } = g, i = L(() => ({
      "f-layout-resize-bar": !0,
      "f-layout-resize-bar-e": s.value === "left",
      "f-layout-resize-bar-n": s.value === "bottom",
      "f-layout-resize-bar-s": s.value === "top",
      "f-layout-resize-bar-w": s.value === "right"
    })), c = L(() => s.value !== "center" && h.value);
    function f(m, v) {
      (v === "left" || v === "right") && l(m, v, j.value), (v === "top" || v === "bottom") && o(m, v, j.value);
    }
    const d = L(() => {
      const m = {
        "f-layout-pane": !0,
        "f-page-content-nav": s.value === "left" || s.value === "right",
        "f-page-content-main": s.value === "center"
      };
      return e.customClass && String(e.customClass).split(" ").reduce((v, D) => (v[D] = !0, v), m), m;
    }), O = L(() => {
      const m = {};
      return (F.value && s.value === "left" || s.value === "right") && (m.width = `${F.value}px`), (b.value && s.value === "bottom" || s.value === "top") && (m.height = `${b.value}px`), e.visible || (m.display = "none"), m;
    });
    return () => A("div", {
      ref: j,
      class: d.value,
      style: O.value,
      "data-position": s.value
    }, [t.slots.default && t.slots.default(), c.value && A("span", {
      class: i.value,
      onMousedown: (m) => f(m, s.value)
    }, null)]);
  }
});
function Mt(e, t) {
  function n() {
    return !1;
  }
  return { canAccepts: n };
}
function be(e, t, n) {
  var E;
  const r = n && n.getStyles && n.getStyles() || "", S = n && n.getDesignerClass && n.getDesignerClass() || "", z = w();
  let b;
  function F() {
    return (t == null ? void 0 : t.schema.componentType) === "frame" ? !1 : n && n.checkCanMoveComponent ? n.checkCanMoveComponent() : !0;
  }
  function j() {
    return !1;
  }
  function s() {
    return (t == null ? void 0 : t.schema.componentType) === "frame" ? !1 : n && n.checkCanDeleteComponent ? n.checkCanDeleteComponent() : !0;
  }
  function h() {
    return (t == null ? void 0 : t.schema.componentType) === "frame" ? !0 : n && n.hideNestedPaddingInDesginerView ? n.hideNestedPaddingInDesginerView() : !1;
  }
  function a(p) {
    if (!p || !p.value)
      return null;
    if (p.value.schema && p.value.schema.type === "component")
      return p.value;
    const C = w(p == null ? void 0 : p.value.parent), M = a(C);
    return M || null;
  }
  function u(p = t) {
    var $;
    if (n != null && n.getDraggableDesignItemElement)
      return n.getDraggableDesignItemElement(p);
    const { componentInstance: C, designerItemElementRef: M } = p;
    if (!C || !C.value)
      return null;
    const { getCustomButtons: B } = C.value;
    return C.value.canMove || B && (($ = B()) != null && $.length) ? M : u(p.parent);
  }
  function g(p) {
    return !!n && n.canAccepts(p);
  }
  function l() {
    return (t == null ? void 0 : t.schema.label) || (t == null ? void 0 : t.schema.title) || (t == null ? void 0 : t.schema.name);
  }
  function o() {
  }
  function i(p, C) {
    var M;
    !p || !C || (n != null && n.onAcceptMovedChildElement && n.onAcceptMovedChildElement(p, C), (M = t == null ? void 0 : t.setupContext) == null || M.emit("dragEnd"));
  }
  function c(p, C) {
    const { componentType: M } = p;
    let B = Me(M, p, C);
    n && n.onResolveNewComponentSchema && (B = n.onResolveNewComponentSchema(p, B));
    const $ = M.toLowerCase().replace(/-/g, "_");
    return B && !B.id && B.type === M && (B.id = `${$}_${Math.random().toString().slice(2, 6)}`), B;
  }
  function f(p) {
    p && n != null && n.onChildElementMovedOut && n.onChildElementMovedOut(p);
  }
  function d(...p) {
    if (n && n.getPropsConfig)
      return n.getPropsConfig(...p);
  }
  function O(p) {
    if (!p)
      return;
    const C = t == null ? void 0 : t.schema, { formSchemaUtils: M } = p;
    if (C && M.getExpressions().length) {
      const B = M.getExpressions().findIndex(($) => $.target === C.id);
      B > -1 && M.getExpressions().splice(B, 1);
    }
  }
  function m(p) {
    if (!p || !(t != null && t.schema))
      return;
    const C = t.schema, { formSchemaUtils: M } = p;
    M.removeCommunicationInComponent(C);
  }
  function v(p) {
    n && n.onRemoveComponent && n.onRemoveComponent(), O(p), m(p), t != null && t.schema.contents && t.schema.contents.map((C) => {
      let M = C.id;
      C.type === "component-ref" && (M = C.component);
      const B = e.value.querySelectorAll(`#${M}-design-item`);
      B != null && B.length && Array.from(B).map(($) => {
        var N;
        (N = $ == null ? void 0 : $.componentInstance) != null && N.value.onRemoveComponent && $.componentInstance.value.onRemoveComponent(p);
      });
    });
  }
  function D() {
    if (n && n.getCustomButtons)
      return n.getCustomButtons();
  }
  function P(p) {
    var M, B;
    if (!((M = t == null ? void 0 : t.schema) != null && M.id))
      return;
    if (!b && p && (b = p.formSchemaUtils), n != null && n.setComponentBasicInfoMap) {
      n.setComponentBasicInfoMap();
      return;
    }
    let C = "";
    if (n != null && n.getComponentTitle)
      C = n.getComponentTitle();
    else {
      const { text: $, title: N, label: q, mainTitle: k, name: R, type: V } = t.schema;
      C = $ || N || q || k || R || ((B = H[V]) == null ? void 0 : B.name);
    }
    C && b.getControlBasicInfoMap().set(t.schema.id, {
      componentTitle: C,
      parentPathName: C
    });
  }
  function y(p) {
    var $;
    const { changeObject: C } = p, { propertyID: M, propertyValue: B } = C;
    if (["text", "title", "label", "name", "mainTitle"].includes(($ = p == null ? void 0 : p.changeObject) == null ? void 0 : $.propertyID) && M && B && (P(), b)) {
      const N = b.getControlBasicInfoMap(), q = N.keys().toArray().filter((k) => {
        var R, V;
        return ((R = N.get(k)) == null ? void 0 : R.reliedComponentId) === ((V = t == null ? void 0 : t.schema) == null ? void 0 : V.id);
      });
      q != null && q.length && q.forEach((k) => {
        const R = N.get(k).parentPathName.split(" > ");
        R[0] = B, N.get(k).parentPathName = R.join(" > ");
      });
    }
  }
  function T(p) {
    if (y(p), n && n.onPropertyChanged)
      return n.onPropertyChanged(p);
  }
  return z.value = {
    canMove: F(),
    canSelectParent: j(),
    canDelete: s(),
    canNested: !h(),
    contents: t == null ? void 0 : t.schema.contents,
    elementRef: e,
    parent: (E = t == null ? void 0 : t.parent) == null ? void 0 : E.componentInstance,
    schema: t == null ? void 0 : t.schema,
    styles: r,
    designerClass: S,
    canAccepts: g,
    getBelongedComponentInstance: a,
    getDraggableDesignItemElement: u,
    getDraggingDisplayText: l,
    getPropConfig: d,
    getDragScopeElement: o,
    onAcceptMovedChildElement: i,
    onChildElementMovedOut: f,
    addNewChildComponentSchema: c,
    triggerBelongedComponentToMoveWhenMoved: !!n && n.triggerBelongedComponentToMoveWhenMoved || w(!1),
    triggerBelongedComponentToDeleteWhenDeleted: !!n && n.triggerBelongedComponentToDeleteWhenDeleted || w(!1),
    onRemoveComponent: v,
    getCustomButtons: D,
    onPropertyChanged: T,
    setComponentBasicInfoMap: P,
    updateContextSchema: t == null ? void 0 : t.updateContextSchema
  }, z;
}
const Ot = /* @__PURE__ */ U({
  name: "FLayoutDesign",
  props: G,
  emits: [],
  setup(e, t) {
    var h;
    const n = w(), r = Y("design-item-context"), S = Mt(r.schema, (h = r.parent) == null ? void 0 : h.schema), z = be(n, r, S);
    z.value.canNested = !1;
    const b = ve(n), {
      horizontalResizeHandleStyle: F,
      verticalResizeHandleStyle: j,
      resizeOverlayStyle: s
    } = b;
    return I("layout", {
      useResizeHandleComposition: b
    }), K(() => {
      n.value.componentInstance = z;
    }), t.expose(z.value), () => A("div", {
      class: "f-layout f-page-content",
      ref: n
    }, [t.slots.default && t.slots.default(), A("div", {
      class: "f-layout-resize-overlay",
      style: s.value
    }, null), A("div", {
      class: "f-layout-horizontal-resize-proxy",
      style: F.value
    }, null), A("div", {
      class: "f-layout-vertical-resize-proxy",
      style: j.value
    }, null)]);
  }
});
function Ft() {
  function e(t, n) {
    var b;
    if (!t)
      return !1;
    const r = ((b = t.targetContainer) == null ? void 0 : b.componentInstance) && t.targetContainer.componentInstance.value;
    if (!r)
      return !1;
    const S = r.schema.type, z = n == null ? void 0 : n.formSchemaUtils.getComponentById(r.belongedComponentId);
    return !((t.componentCategory === "input" || t.componentType === "form-group") && ![H["response-layout-item"].type, H["response-form"].type, H.fieldset.type].includes(S) || (t.componentType === H.tabs.type || t.componentType === H.section.type) && ((z == null ? void 0 : z.componentType) !== "frame" || ![H["content-container"].type, H["splitter-pane"].type, H["response-layout-item"].type].includes(S)) || [H["query-solution"].type, H["filter-bar"].type].includes(t.componentType) || t.componentType === H.fieldset.type && S !== H["response-form"].type);
  }
  return {
    basalDragulaRuleForContainer: e
  };
}
function wt(e, t) {
  const n = e.schema;
  function r(z) {
    return !!Ft().basalDragulaRuleForContainer(z);
  }
  function S() {
    const z = ["f-layout-pane"];
    return (n.position === "left" || n.position === "right") && z.push("f-page-content-nav"), n.position === "center" && z.push("f-page-content-main"), z.join(" ");
  }
  return { canAccepts: r, getDesignerClass: S };
}
const Dt = /* @__PURE__ */ U({
  name: "FLayoutPaneDesign",
  props: J,
  emits: [],
  setup(e, t) {
    const n = w(), r = w();
    Y("designer-host-service");
    const S = Y("design-item-context"), z = wt(S), b = be(r, S, z);
    b.value.canNested = !1, b.value.canMove = !1, b.value.canDelete = !1, K(() => {
      r.value.componentInstance = b;
    }), t.expose(b.value);
    const F = w(Math.max(e.minHeight, e.height)), j = w(Math.max(e.minWidth, e.width)), s = w(e.minHeight), h = w(e.minWidth), a = w(e.position), u = Y("layout"), {
      useResizeHandleComposition: g
    } = u, l = de(j, F, h, s, g), {
      onClickHorizontalResizeBar: o,
      onClickVerticalResizeBar: i
    } = l, c = L(() => ({
      "f-layout-resize-bar": !0,
      "f-layout-resize-bar-e": a.value === "left",
      "f-layout-resize-bar-n": a.value === "bottom",
      "f-layout-resize-bar-s": a.value === "top",
      "f-layout-resize-bar-w": a.value === "right"
    }));
    function f(m, v) {
      (v === "left" || v === "right") && o(m, v, n.value), (v === "top" || v === "bottom") && i(m, v, n.value);
    }
    const d = L(() => {
      const m = {
        "f-layout-pane": !0,
        "f-page-content-nav": a.value === "left" || a.value === "right",
        "f-page-content-main": a.value === "center"
      };
      return e.customClass && String(e.customClass).split(" ").reduce((v, D) => (v[D] = !0, v), m), m;
    }), O = L(() => {
      const m = {
        flex: "1"
      };
      return (j.value && a.value === "left" || a.value === "right") && (m.width = `${j.value}px`), (F.value && a.value === "bottom" || a.value === "top") && (m.height = `${F.value}px`), m;
    });
    return () => A("div", {
      ref: n,
      class: d.value,
      style: O.value
    }, [A("div", {
      ref: r,
      class: "drag-container",
      "data-dragref": `${S.schema.id}-container`
    }, [t.slots.default && t.slots.default()]), A("span", {
      class: c.value,
      onMousedown: (m) => f(m, a.value)
    }, null)]);
  }
});
_.install = (e) => {
  e.component(_.name, _), e.component(X.name, X);
};
_.register = (e, t, n, r) => {
  e.layout = _, t.layout = me, e["layout-pane"] = X, t["layout-pane"] = ye;
};
_.registerDesigner = (e, t, n) => {
  e.layout = Ot, t.layout = me, e["layout-pane"] = Dt, t["layout-pane"] = ye;
};
export {
  _ as FLayout,
  X as FLayoutPane,
  _ as default,
  G as layoutProps,
  me as layoutPropsResolver
};