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

Farris Vue, a Farris Design based Vue3 component library.

var Jt = Object.defineProperty;
var Kt = (t, e, n) => e in t ? Jt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
var Y = (t, e, n) => Kt(t, typeof e != "symbol" ? e + "" : e, n);
import { ref as j, watch as pe, nextTick as se, computed as R, createVNode as C, onMounted as me, withDirectives as en, vModelText as tn, createTextVNode as lt, Fragment as nn, defineComponent as he, shallowRef as Se, provide as De, inject as ne, onUnmounted as Ae, isVNode as ct, onBeforeUnmount as on, withModifiers as rn } from "vue";
import { cloneDeep as _e, isPlainObject as st } from "lodash-es";
import an from "../capsule/index.esm.js";
import ut from "../response-toolbar/index.esm.js";
import { useResizeObserver as sn } from "@vueuse/core";
import { createPropsResolver as ln } from "../dynamic-resolver/index.esm.js";
import cn from "../section/index.esm.js";
import { useDesignerInnerComponent as un, useDesignerComponent as dn } from "../designer-canvas/index.esm.js";
import { getCustomClass as Ne } from "../common/index.esm.js";
import "bignumber.js";
const dt = {}, ft = {};
function We(t) {
  const { properties: e, title: n, ignore: r } = t, a = r && Array.isArray(r), o = Object.keys(e).reduce((i, u) => ((!a || !r.find((s) => s === u)) && (i[u] = e[u].type === "object" && e[u].properties ? We(e[u]) : _e(e[u].default)), i), {});
  if (n && (!a || !r.find((i) => i === "id"))) {
    const i = n.toLowerCase().replace(/-/g, "_");
    o.id = `${i}_${Math.random().toString().slice(2, 6)}`;
  }
  return o;
}
function fn(t) {
  const { properties: e, title: n, required: r } = t;
  if (r && Array.isArray(r)) {
    const a = r.reduce((o, i) => (o[i] = e[i].type === "object" && e[i].properties ? We(e[i]) : _e(e[i].default), o), {});
    if (n && r.find((o) => o === "id")) {
      const o = n.toLowerCase().replace(/-/g, "_");
      a.id = `${o}_${Math.random().toString().slice(2, 6)}`;
    }
    return a;
  }
  return {
    type: n
  };
}
function ye(t, e = {}, n) {
  const r = dt[t];
  if (r) {
    let a = fn(r);
    const o = ft[t];
    return a = o ? o({ getSchemaByType: ye }, a, e, n) : a, a;
  }
  return null;
}
function pn(t, e) {
  const n = We(e);
  return Object.keys(n).reduce((r, a) => (Object.prototype.hasOwnProperty.call(t, a) && (r[a] && st(r[a]) && st(t[a] || !t[a]) ? Object.assign(r[a], t[a] || {}) : r[a] = t[a]), r), n), n;
}
function pt(t, e) {
  return Object.keys(t).filter((r) => t[r] != null).reduce((r, a) => {
    if (e.has(a)) {
      const o = e.get(a);
      if (typeof o == "string")
        r[o] = t[a];
      else {
        const i = o(a, t[a], t);
        Object.assign(r, i);
      }
    } else
      r[a] = t[a];
    return r;
  }, {});
}
function mn(t, e, n = /* @__PURE__ */ new Map()) {
  const r = pn(t, e);
  return pt(r, n);
}
function vn(t = {}) {
  function e(l, f, d, p) {
    if (typeof d == "number")
      return p[l].length === d;
    if (typeof d == "object") {
      const c = Object.keys(d)[0], v = d[c];
      if (c === "not")
        return Number(p[l].length) !== Number(v);
      if (c === "moreThan")
        return Number(p[l].length) >= Number(v);
      if (c === "lessThan")
        return Number(p[l].length) <= Number(v);
    }
    return !1;
  }
  function n(l, f, d, p) {
    return p[l] && p[l].propertyValue && String(p[l].propertyValue.value) === String(d);
  }
  const r = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", n]
  ]);
  Object.keys(t).reduce((l, f) => (l.set(f, t[f]), l), r);
  function a(l, f) {
    const d = l;
    return typeof f == "number" ? [{ target: d, operator: "length", param: null, value: Number(f) }] : typeof f == "boolean" ? [{ target: d, operator: "getProperty", param: l, value: !!f }] : typeof f == "object" ? Object.keys(f).map((p) => {
      if (p === "length")
        return { target: d, operator: "length", param: null, value: f[p] };
      const c = p, v = f[p];
      return { target: d, operator: "getProperty", param: c, value: v };
    }) : [];
  }
  function o(l) {
    return Object.keys(l).reduce((d, p) => {
      const c = a(p, l[p]);
      return d.push(...c), d;
    }, []);
  }
  function i(l, f) {
    if (r.has(l.operator)) {
      const d = r.get(l.operator);
      return d && d(l.target, l.param, l.value, f) || !1;
    }
    return !1;
  }
  function u(l, f) {
    return o(l).reduce((c, v) => c && i(v, f), !0);
  }
  function s(l, f) {
    const d = Object.keys(l), p = d.includes("allOf"), c = d.includes("anyOf"), v = p || c, T = (v ? l[v ? p ? "allOf" : "anyOf" : "allOf"] : [l]).map((w) => u(w, f));
    return p ? !T.includes(!1) : T.includes(!0);
  }
  return { parseValueSchema: s };
}
const re = {
  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: "标签页工具栏按钮" },
  "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: "抽屉" }
}, bn = {}, gn = {};
vn();
function we(t, e, n = /* @__PURE__ */ new Map(), r = (i, u, s, l) => u, a = {}, o = (i) => i) {
  return dt[e.title] = e, ft[e.title] = r, bn[e.title] = a, gn[e.title] = o, (i = {}, u = !0) => {
    if (!u)
      return pt(i, n);
    const s = mn(i, e, n), l = Object.keys(t).reduce((f, d) => (f[d] = t[d].default, f), {});
    return Object.assign(l, s);
  };
}
function Ee(t, e) {
  return { customClass: e.class, customStyle: e.style };
}
function hn() {
  function t(e, n) {
    const r = e.contents;
    if (!r || r.length < 1)
      return null;
    const a = r.reduce((s, l) => {
      const f = l.toolbar && l.toolbar.buttons || [];
      return s.push(...f), s;
    }, []);
    if (!a || a.length < 1)
      return;
    const [o, i] = n.payloads, u = a.find((s) => s.id === i);
    return u ? u.onClick || u.click : null;
  }
  return {
    resolve: t
  };
}
const Ue = /* @__PURE__ */ new Map([
  ["appearance", Ee]
]);
function yn(t, e) {
  const n = Math.random().toString().slice(2, 6), r = e.parentComponentInstance, a = t.getSchemaByType("tab-page");
  a.id = `tab-page-${n}`, a.title = "标题";
  const o = t.getSchemaByType("tabs");
  Object.assign(o, {
    id: `tabs-${n}`,
    appearance: {
      class: "f-component-tabs f-tabs-has-grid"
    },
    contents: [a],
    activeId: a.id
  });
  const i = t.getSchemaByType("section");
  Object.assign(i, {
    id: `section-${n}`,
    appearance: {
      class: "f-section-tabs f-section-in-mainsubcard"
    },
    fill: !1,
    showHeader: !1,
    contents: [o]
  });
  const u = t.getSchemaByType("content-container");
  Object.assign(u, {
    id: `container-${n}`,
    appearance: {
      class: "f-struct-wrapper"
    },
    contents: [i]
  });
  const s = r.schema;
  switch (s && s.type) {
    case re["splitter-pane"].type: {
      i.appearance.class = "f-section-tabs f-section-in-main", o.appearance.class = "f-component-tabs";
      break;
    }
  }
  const l = r.elementRef, f = window.getComputedStyle(l);
  return f && f.display === "flex" && (u.appearance.class += " d-block"), u;
}
function mt(t, e, n) {
  if (n.parentComponentInstance)
    return yn(t, n);
  {
    const a = t.getSchemaByType("tab-page");
    return e.contents = [a], e;
  }
}
function Cn(t, e, n) {
  return e;
}
const Tn = "https://json-schema.org/draft/2020-12/schema", wn = "https://farris-design.gitee.io/tabs.schema.json", Sn = "tabs", Pn = "A Farris Container Component", In = "object", Dn = {
  id: {
    description: "The unique identifier for a Tabs",
    type: "string"
  },
  type: {
    description: "The type string of Tabs component",
    type: "string",
    default: "tabs"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  autoTitleWidth: {
    description: "",
    type: "boolean",
    default: !1
  },
  titleWidth: {
    description: "",
    type: "number",
    default: 0
  },
  titleLength: {
    description: "",
    type: "number",
    default: 7
  },
  fill: {
    description: "",
    type: "boolean",
    default: !1
  }
}, Bn = [
  "id",
  "type",
  "contents"
], vt = {
  $schema: Tn,
  $id: wn,
  title: Sn,
  description: Pn,
  type: In,
  properties: Dn,
  required: Bn
}, ze = {
  /** 标签页头部区域的展示类型 */
  tabType: { type: String, default: "default" },
  autoTitleWidth: { type: Boolean, default: !1 },
  titleLength: { type: Number, default: 7 },
  position: { type: String, default: "top" },
  showDropdown: { type: Boolean, default: !0 },
  scrollStep: { type: Number, default: 10 },
  autoResize: { type: Boolean, default: !1 },
  selectedTab: { type: String, default: "" },
  width: { type: Number },
  height: { type: Number },
  searchBoxVisible: { type: Boolean, default: !0 },
  titleWidth: { type: Number, default: 0 },
  customClass: { type: String, default: "" },
  /** 同上selectedTab属性 */
  activeId: { type: String },
  /** 标签页内容区域是否填充 */
  fill: { type: Boolean, default: !1 },
  justifyContent: { type: String, default: "left" }
}, An = we(ze, vt, Ue, mt), bt = Object.assign({}, ze, {
  componentId: { type: String, default: "" }
}), En = we(bt, vt, Ue, mt), xn = hn();
function Mn(t, e, n) {
  const r = j([]), a = j(t.activeId || ""), o = j(!0), i = j([]), u = j(0);
  function s(T) {
    const h = T.findIndex((w) => w.props.show !== !1 && !a.value && !w.props.disabled);
    if (i.value = [], !a.value && h !== -1) {
      a.value = T[h].props.id;
      const w = T[h];
      w && w.props.toolbar && w.props.toolbar.buttons && w.props.toolbar.buttons.length && (i.value = [...w.props.toolbar.buttons]);
    }
  }
  function l(T) {
    let h = !1;
    const w = r.value.find((M) => M.props.id === T);
    h = !w || w.props.show === !1 || w.props.disabled === !1, h ? s(r.value) : a.value = T;
  }
  pe(() => t.activeId, (T, h) => {
    T !== h && l(T);
  });
  function f(T) {
    var w;
    if (t.autoTitleWidth)
      return;
    const h = (w = T.value) == null ? void 0 : w.querySelectorAll(".st-tab-text");
    if (h)
      for (let M = 0; M < h.length; M++) {
        const I = h[M].parentNode;
        h[M].scrollWidth > I.offsetWidth ? h[M].classList.contains("farris-title-text-custom") || h[M].classList.add("farris-title-text-custom") : h[M].classList.remove("farris-title-text-custom");
      }
  }
  const d = (T) => {
    T.preventDefault(), T.stopPropagation();
  };
  function p(T, h, w = !1) {
    const M = r.value.findIndex((I) => I.props.id === h);
    r.value = r.value.filter((I) => I.props.id !== h), a.value === h && (a.value = "", s(r.value)), d(T), se(() => {
      u.value++, f(n), w && (o.value = !0), e.emit("tabRemove", {
        removeIndex: M,
        removeId: h,
        activeId: a.value
      });
    });
  }
  function c(T) {
    const h = a.value;
    a.value = T;
    const w = r.value.find((M) => M.props.id === T);
    i.value = [], w && w.props.toolbar && w.props.toolbar.buttons && w.props.toolbar.buttons.length && (i.value = [...w.props.toolbar.buttons]), e.emit("update:activeId", T), e.emit("tabChange", {
      prevId: h,
      nextId: a.value
    });
  }
  function v(T) {
    c(T);
  }
  function y(T) {
    r.value.findIndex((w) => w.props.id === T.props.id) === -1 && r.value.push(T), u.value++;
  }
  function L(T) {
    r.value.findIndex((w) => w.props.id === T.props.id) !== -1 && (r.value.forEach((w) => {
      w.props.id === T.props.id && (w = T);
    }), se(() => {
      u.value++, f(n);
    }));
  }
  return {
    activeId: a,
    addTab: y,
    changeTitleStyle: f,
    removeTab: p,
    selectTab: v,
    selectTabByTabId: c,
    tabPages: r,
    updateTab: L,
    toolbarItems: i,
    needUpdateNavigationLayout: u,
    checkActiveId: l
  };
}
function kn(t, e, n, r, a) {
  const {
    activeId: o,
    removeTab: i,
    selectTab: u
  } = a, s = R(() => ({
    "st-tab-text": !0,
    "text-truncate": !0,
    "farris-title-auto": t.autoTitleWidth
  })), l = R(() => ({
    "nav-item": !0,
    "d-none": e.show !== void 0 ? !e.show : !1,
    "f-state-active": e.id === o.value,
    "f-state-disabled": e.disabled
  })), f = R(() => ({
    width: `${e.tabWidth}px`
  })), d = R(() => ({
    "nav-link": !0,
    "tabs-text-truncate": !0,
    active: e.id === o.value,
    disabled: e.disabled
  }));
  function p(h) {
    return C("span", {
      class: s.value,
      title: h.title
    }, [h.title]);
  }
  function c(h) {
    return h.slots.title ? h.slots.title : p;
  }
  const v = c(n), y = j(e.removeable);
  function L() {
    return C("span", {
      class: "st-drop-close",
      onClick: (h) => i(h, e.id)
    }, [C("i", {
      class: "f-icon f-icon-close"
    }, null)]);
  }
  function T(h) {
    u(e.id), t.tabType === "one-page" && r.scrollToByPaggId(e.id);
  }
  return C("li", {
    class: l.value,
    style: f.value
  }, [C("a", {
    class: d.value,
    onClick: T
  }, [v(e), y.value && L()])]);
}
function jn(t, e, n, r, a) {
  const {
    shouldShowNavigationButtons: o
  } = n, {
    tabPages: i
  } = a, u = R(() => ({
    spacer: !0,
    "f-utils-fill": !0,
    "spacer-sides-dropdown": o.value
  })), s = R(() => ({
    width: "100%",
    "justify-content": t.justifyContent
  })), l = R(() => ({
    nav: !0,
    "farris-nav-tabs": !0,
    "flex-nowrap": !0,
    "nav-fill": t.tabType === "fill",
    "nav-pills": t.tabType === "pills",
    "flex-row": t.position === "top" || t.position === "bottom",
    "flex-column": t.position === "left" || t.position === "right"
  }));
  return () => C("div", {
    class: u.value,
    style: s.value
  }, [C("ul", {
    class: l.value,
    ref: e
  }, [i.value.map((f) => kn(t, f.props, f, r, a))])]);
}
function gt(t, e, n, r, a) {
  const o = j(), {
    shouldShowNavigationButtons: i
  } = n, {
    activeId: u,
    tabPages: s,
    selectTab: l
  } = a, f = j(u.value), d = R(() => s.value.map((y) => ({
    name: y.props.title,
    value: y.props.id,
    show: y.props.show,
    disabled: y.props.disabled
  }))), p = R(() => ({
    spacer: !0,
    "f-utils-fill": !0,
    "spacer-sides-dropdown": i.value
  })), c = R(() => ({
    width: "100%",
    display: "flex",
    "justify-content": t.justifyContent
  }));
  me(() => {
    o.value && (e.value = o.value.$el);
  });
  function v(y) {
    l(y);
  }
  return pe(() => u.value, (y) => {
    y !== f.value && (f.value = y);
  }, {
    immediate: !0
  }), () => C("div", {
    class: p.value,
    style: c.value
  }, [C(an, {
    items: d.value,
    modelValue: f.value,
    "onUpdate:modelValue": (y) => f.value = y,
    onChange: v,
    ref: o
  }, null)]);
}
function On(t, e, n, r) {
  const {
    activeId: a,
    removeTab: o,
    tabPages: i
  } = r, {
    selectAndScrollToTab: u
  } = n, {
    hideDropDown: s,
    searchTabText: l
  } = e, f = 600;
  let d = null;
  const p = j("auto"), c = R(() => {
    var S, H;
    let m = [];
    return t.searchBoxVisible ? m = (S = i.value) == null ? void 0 : S.filter((N) => N.props.title.includes(l.value)) : m = (H = i.value) == null ? void 0 : H.slice(), m;
  }), v = R(() => ({
    "dropdown-menu": !0,
    "tabs-pt28": t.searchBoxVisible,
    show: !s.value
  }));
  function y(m) {
    return {
      "dropdown-item": !0,
      "text-truncate": !0,
      "px-2": !0,
      disabled: m.props.disabled,
      active: m.props.id === a.value,
      "d-none": m.props.show !== !0
    };
  }
  function L(m) {
    m.preventDefault(), m.stopPropagation();
  }
  const T = () => ({
    width: p.value
  });
  function h() {
    d && clearTimeout(d);
  }
  function w() {
    s.value || (d = setTimeout(() => {
      s.value = !0;
    }, f));
  }
  function M(m, S) {
    m.stopPropagation(), u(m, S), s.value = !0;
  }
  function I(m, S) {
    m.stopPropagation(), o(m, S, !0);
  }
  function A() {
    return C("div", {
      class: v.value,
      onMouseenter: () => h(),
      onMouseleave: () => w()
    }, [t.searchBoxVisible && C("div", {
      onClick: (m) => L(m),
      class: "pb-1 tabs-li-absolute"
    }, [en(C("input", {
      type: "text",
      class: "form-control k-textbox",
      "onUpdate:modelValue": (m) => l.value = m
    }, null), [[tn, l.value]]), C("span", {
      class: "f-icon f-icon-page-title-query tabs-icon-search"
    }, null)]), c.value.length ? C("ul", {
      class: "tab-dropdown-menu--items",
      style: T()
    }, [c.value.map((m) => C("li", {
      class: y(m),
      onClick: (S) => M(S, m.props)
    }, [m.props.removeable && C("span", {
      class: "float-right st-drop-close",
      onClick: (S) => I(S, m.props.id)
    }, [C("i", {
      class: "f-icon f-icon-close"
    }, null)]), C("a", {
      class: "dropdown-title",
      title: m.props.title
    }, [m.props.title])]))]) : C("div", {
      class: "dropdown-no-data"
    }, [lt("没有相关数据")])]);
  }
  return {
    renderDropdownMenu: A
  };
}
function $n(t, e, n, r) {
  const {
    hideDropDown: a
  } = e, {
    renderDropdownMenu: o
  } = On(t, e, n, r), i = j(t.showDropdown);
  function u() {
    return i.value && C(nn, null, [C("button", {
      class: "btn dropdown-toggle-split dropdown-toggle",
      onClick: () => {
        a.value = !1;
      }
    }, null), o()]);
  }
  return {
    renderMorePagesButtton: u
  };
}
function ht(t, e, n, r) {
  const a = j(!1), { selectTabByTabId: o, tabPages: i, needUpdateNavigationLayout: u } = r, s = 4;
  function l() {
    var h;
    const L = e.value, T = (h = e.value) == null ? void 0 : h.parentElement;
    a.value = T && L && T.offsetWidth < L.scrollWidth - s;
  }
  const f = R(() => ({
    btn: !0,
    "sc-nav-btn": !0,
    "px-1": !0,
    "sc-nav-lr": !0,
    "d-none": !a.value
  })), d = R(() => ({
    "btn-group": !0,
    "sc-nav-btn": !0,
    dropdown: !0,
    "d-none": !a.value
  })), p = R(() => ({
    btn: !0,
    "sc-nav-rg": !0,
    "d-none": !a.value
  }));
  function c(L, T) {
    if (!e.value)
      return;
    const h = e.value.scrollLeft, w = e.value.scrollWidth - e.value.offsetWidth;
    if (T > 0) {
      if (e.value.scrollLeft >= w)
        return;
      e.value.scrollLeft = h + t.scrollStep + L;
    } else if (T < 0) {
      if (e.value.scrollLeft <= 0)
        return;
      e.value.scrollLeft = h - t.scrollStep - L;
    }
  }
  function v(L) {
    if (!a.value || !e.value)
      return;
    const T = t.tabType === "pills" ? ".f-capsule-item" : ".nav-item", h = e.value.querySelectorAll(T), { parentElement: w } = e.value, M = h[L];
    if (M && w) {
      const I = w.getBoundingClientRect().left, A = w.getBoundingClientRect().right, m = M.getBoundingClientRect().left, S = M.getBoundingClientRect().right;
      m < I ? c(I - m, -1) : A < S && c(S - A, 1), t.tabType === "one-page" && n.scrollTo(L);
    }
  }
  function y(L, T) {
    if (T.disabled)
      return;
    o(T.id);
    const h = i.value.findIndex((w) => w.props.id === T.id);
    se(() => {
      v(h);
    });
  }
  return pe(u, () => {
    l();
  }), {
    previousButtonClass: f,
    nextButtonGroupClass: d,
    nextButtonClass: p,
    scrollTab: c,
    selectAndScrollToTab: y,
    shouldShowNavigationButtons: a,
    updateNavigationLayout: l
  };
}
function yt(t, e) {
  const { tabPages: n } = e, r = j(""), a = j(!0), o = R(() => t.searchBoxVisible), i = R(() => o.value ? n.value.filter((s) => s.props.title.includes(r.value)) : n.value.slice());
  return {
    searchTabText: r,
    hideDropDown: a,
    shouldShowSearchBox: o,
    tabsInDropdownMenu: i
  };
}
function Ct(t, e, n) {
  const r = ".farris-tab-page", { tabPages: a } = n;
  function o(u) {
    const s = e.value;
    if (s) {
      const l = e.value.querySelectorAll(r);
      if (l.length > 0) {
        const f = l[u], { offsetTop: d } = f, p = d - 32 > 0 ? d - 32 : 0;
        s.scrollTop = p;
      }
    }
  }
  function i(u) {
    const s = a.value.findIndex((l) => l.props.id === u);
    s > -1 && o(s);
  }
  return { scrollTo: o, scrollToByPaggId: i };
}
const Ce = /* @__PURE__ */ he({
  name: "FTabs",
  props: ze,
  emits: ["tabChange", "tabRemove", "update:activeId", "Click"],
  setup(t, e) {
    const n = j(t.tabType), r = Se(), a = j(t.customClass), o = Se(), i = Se(), u = j(), s = Mn(t, e, o), {
      activeId: l,
      changeTitleStyle: f,
      tabPages: d,
      addTab: p,
      updateTab: c,
      selectTabByTabId: v,
      toolbarItems: y,
      checkActiveId: L
    } = s, T = Ct(t, i, s), h = ht(t, o, T, s), {
      previousButtonClass: w,
      nextButtonClass: M,
      nextButtonGroupClass: I,
      scrollTab: A,
      updateNavigationLayout: m
    } = h, S = yt(t, s), H = jn(t, o, h, T, s), N = H, g = gt(t, o, h, T, s), X = /* @__PURE__ */ new Map([["default", H], ["one-page", N], ["pills", g]]);
    R(() => {
      const G = d.value.find((F) => F.props.id === l.value);
      return G == null ? void 0 : G.slots;
    });
    const $ = R(() => {
      const G = d.value.find((x) => x.props.id === l.value);
      return (G == null ? void 0 : G.props.toolbarPosition) === "inHead";
    }), B = R(() => t.fill);
    De("tabs", {
      activeId: l,
      addTab: p,
      updateTab: c,
      tabPages: d,
      tabType: n,
      shouldFillParentContaner: B
    });
    const W = R(() => ({
      "farris-tabs-header": !0,
      "farris-tabs-inHead": $.value,
      "farris-tabs-inContent": !$.value,
      "farris-tabs-nav-fill": t.tabType === "fill",
      "farris-tabs-nav-pills": t.tabType === "pills"
    })), _ = R(() => {
      const G = {
        width: $.value && t.titleWidth ? `${t.titleWidth}%` : ""
      };
      return G.width && (G.flex = "unset"), G;
    }), ee = R(() => {
      const G = {
        "farris-tabs": !0,
        "f-utils-fill-flex-column": B.value,
        "flex-column": t.position === "top",
        "flex-column-reverse": t.position === "bottom",
        "flex-row": t.position === "left",
        "flex-row-reverse": t.position === "right",
        "one-page": t.tabType === "one-page"
      };
      return a.value && a.value.split(" ").reduce((F, x) => (F[x] = !0, F), G), G;
    });
    me(() => {
      d.value.length && (L(t.activeId || d.value[0].props.id), v(l.value)), se(() => {
        m();
      }), f(o), sn(u.value, () => {
        m();
      });
    });
    function ae() {
      return C("button", {
        title: "向左",
        type: "button",
        class: w.value,
        onClick: () => {
          A(0, -1);
        }
      }, null);
    }
    function P() {
      return C("button", {
        title: "向右",
        type: "button",
        class: M.value,
        onClick: () => {
          A(0, 1);
        }
      }, null);
    }
    const {
      renderMorePagesButtton: k
    } = $n(t, S, h, s), D = (G, F) => {
      e.emit("Click", G, F, l.value);
    };
    function q() {
      return y.value.length ? C(ut, {
        class: "f-utils-fill",
        items: y.value,
        onClick: D
      }, null) : null;
    }
    const J = X.get(t.tabType) || X.get("default");
    function K() {
      var G, F, x, z;
      return C("div", {
        class: W.value
      }, [C("div", {
        class: "farris-tabs-header-pre"
      }, [(F = (G = e.slots).headerPrefix) == null ? void 0 : F.call(G)]), C("div", {
        class: "farris-tabs-title scroll-tabs",
        style: _.value,
        ref: u
      }, [ae(), J && J(), C("div", {
        class: I.value
      }, [P(), k()])]), q(), C("div", {
        class: "farris-tabs-header-post"
      }, [(z = (x = e.slots).headerSuffix) == null ? void 0 : z.call(x)])]);
    }
    const U = R(() => ({
      "farris-tabs-content": !0,
      "f-utils-fill-flex-column": B.value
    }));
    function ce() {
      var G, F;
      return C("div", {
        class: U.value,
        ref: i
      }, [(F = (G = e.slots).default) == null ? void 0 : F.call(G)]);
    }
    return () => C("div", {
      class: ee.value,
      ref: r
    }, [K(), ce()]);
  }
});
function Rn(t, e, n) {
  return e && e.contents && e.contents.length && (e.contents.forEach((r) => {
    r.title && (r.text = r.title);
  }), e.buttons = e.contents, delete e.contents), { toolbar: e };
}
const Ln = /* @__PURE__ */ new Map([
  ["appearance", Ee],
  ["toolbar", Rn]
]), Fn = "https://json-schema.org/draft/2020-12/schema", Hn = "https://farris-design.gitee.io/tab-page.schema.json", Nn = "tab-page", Vn = "A Farris Container Component", qn = "object", _n = {
  id: {
    description: "The unique identifier for a tab-page Item",
    type: "string"
  },
  type: {
    description: "The type string of tab-page Item component",
    type: "string",
    default: "tab-page"
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  title: {
    description: "",
    type: "string",
    default: "标题"
  },
  disabled: {
    description: "",
    type: "boolean",
    default: !1
  },
  removeable: {
    description: "",
    type: "boolean",
    default: !1
  },
  show: {
    description: "",
    type: "boolean",
    default: !0
  },
  toolbar: {
    description: "",
    type: "object"
  }
}, Wn = [
  "id",
  "type",
  "contents"
], Un = {
  $schema: Fn,
  $id: Hn,
  title: Nn,
  description: Vn,
  type: qn,
  properties: _n,
  required: Wn
}, Xe = {
  tabWidth: { type: Number, default: -1 },
  id: { type: String, default: "" },
  customTitleClass: { type: String, default: "" },
  titleOverflow: { type: Boolean, default: !1 },
  title: { type: String, default: "" },
  selected: { type: Boolean, default: !1 },
  disabled: { type: Boolean, default: !1 },
  removeable: { type: Boolean, default: !1 },
  show: { type: Boolean, default: !0 },
  toolbar: { type: Object, default: {} },
  toolbarPosition: { type: String, default: "inHead" }
}, Tt = ln(Xe, Un, Ln);
function zn(t) {
  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !ct(t);
}
const Ve = /* @__PURE__ */ he({
  name: "FTabPage",
  props: Xe,
  emits: [],
  setup(t, e) {
    const n = ne("tabs"), r = j(t.show), a = {
      slots: e.slots,
      props: t
    }, o = j((n == null ? void 0 : n.tabType.value) || "default");
    me(() => {
      const c = n == null ? void 0 : n.tabPages.value.findIndex((v) => v.props.id === t.id);
      !c || c === -1 ? n == null || n.addTab(a) : c > -1 && (r.value = !1, console.warn(`已经存在id为${t.id}的页签啦`));
    }), Ae(() => {
    });
    const i = R(() => (t == null ? void 0 : t.id) === (n == null ? void 0 : n.activeId.value)), u = R(() => ({
      display: i.value ? "" : "none"
    }));
    pe(() => t, (c) => {
      n == null || n.updateTab({
        props: c,
        slots: e.slots
      });
    }, {
      immediate: !0,
      deep: !0
    });
    function s() {
      var v, y;
      const c = (y = (v = e.slots).default) == null ? void 0 : y.call(v);
      return C(cn, {
        "main-title": t.title,
        class: "farris-tab-page"
      }, zn(c) ? c : {
        default: () => [c]
      });
    }
    const l = R(() => {
      var v;
      return {
        "farris-tab-page": !0,
        "f-utils-fill-flex-column": i.value && n && ((v = n.shouldFillParentContaner) == null ? void 0 : v.value)
      };
    });
    function f() {
      var v, y;
      const c = (y = (v = e.slots).default) == null ? void 0 : y.call(v);
      return C("div", {
        class: l.value,
        style: u.value
      }, [c]);
    }
    const p = (/* @__PURE__ */ new Map([["default", f], ["one-page", s]])).get(o.value) || f;
    return () => r.value ? p() : null;
  }
});
function Xn(t, e, n, r, a, o) {
  const {
    activeId: i,
    selectTab: u,
    removeDesignTab: s,
    selectDesignTab: l,
    addTabPageToolbar: f
  } = a, d = R(() => ({
    "st-tab-text": !0,
    "farris-title-auto": t.autoTitleWidth
  })), p = R(() => {
    const g = {
      "farris-component": !0,
      "nav-item": !0,
      "f-state-active": e.id === i.value,
      "f-state-disabled": e.disabled
    };
    return g[`${e.id}-design-item`] = !0, g;
  }), c = R(() => ({
    width: `${e.tabWidth}px`
  })), v = R(() => ({
    "nav-link": !0,
    "tabs-text-truncate": !0,
    active: e.id === i.value
  }));
  function y(g) {
    return C("span", {
      class: d.value,
      title: g.title
    }, [g.title]);
  }
  function L(g) {
    return g.slots.title ? g.slots.title : y;
  }
  const T = L(n), h = j(e.removeable);
  function w() {
    return C("span", {
      class: "st-drop-close",
      style: {
        opacity: 0.6
      }
    }, [C("i", {
      class: "f-icon f-icon-close"
    }, null)]);
  }
  function M(g) {
    u(e.id), t.tabType === "one-page" && r.scrollToByPaggId(e.id);
  }
  function I(g) {
    g && (g.stopPropagation(), g.preventDefault()), l(g, e.id, o.value);
  }
  function A(g) {
    s(g, e.id);
  }
  function m(g) {
    f(g, e.id);
  }
  function S() {
    return C("div", {
      role: "button",
      class: "btn component-settings-button",
      title: "删除",
      ref: "removeComponent",
      onClick: (g) => A(g)
    }, [C("i", {
      class: "f-icon f-icon-yxs_delete"
    }, null)]);
  }
  function H() {
    return C("div", {
      role: "button",
      class: "btn component-settings-button",
      title: "新增按钮",
      ref: "addComponent",
      onClick: (g) => m(g)
    }, [C("i", {
      class: "f-icon f-icon-plus-circle"
    }, null)]);
  }
  function N() {
    return C("div", {
      class: "component-btn-group",
      "data-noattach": "true"
    }, [C("div", null, [S(), !e.toolbar || !e.toolbar.buttons || !e.toolbar.buttons.length ? H() : ""])]);
  }
  return C("li", {
    onClick: (g) => I(g),
    class: p.value,
    style: c.value,
    pageId: `${e.id}-design-item`
  }, [N(), C("a", {
    class: v.value,
    onClick: M,
    id: `${e.id}-design-item`
  }, [T(e), h.value && w()])]);
}
function Yn(t, e, n, r, a, o, i) {
  const {
    tabPages: u
  } = a, s = R(() => ({
    spacer: !0,
    "f-utils-fill": !0
  })), l = R(() => ({
    width: "100%",
    "justify-content": t.justifyContent
  })), f = R(() => ({
    nav: !0,
    "farris-nav-tabs": !0,
    "flex-nowrap": !0,
    "nav-fill": t.tabType === "fill",
    "nav-pills": t.tabType === "pills",
    "flex-row": t.position === "top" || t.position === "bottom",
    "flex-column": t.position === "left" || t.position === "right"
  })), d = R(() => ({
    overflow: "auto"
  })), p = function(c) {
    var L;
    const v = ye("tab-page");
    v.id = `tab_page_${Math.random().toString().slice(2, 6)}`, v.title = "标题", v.toolbar = {
      buttons: []
    }, (L = o.value.schema.contents) == null || L.push(v);
    const {
      selectTabByTabId: y
    } = a;
    y(v.id);
  };
  return () => C("div", {
    class: s.value,
    style: l.value
  }, [C("ul", {
    class: f.value,
    style: d.value,
    ref: e
  }, [u.value.map((c) => Xn(t, c.props, c, r, a, o)), C("li", {
    class: "nav-item no-drag"
  }, [C("a", {
    class: "nav-link tabs-text-truncate",
    title: "添加页签",
    onClick: (c) => p()
  }, [C("i", {
    class: "f-icon f-icon-plus",
    style: "font-size: 20px;margin: 0 auto;line-height: 24px;"
  }, null)])])])]);
}
function wt(t, e, n) {
  var A;
  const r = n && n.getStyles && n.getStyles() || "", a = n && n.getDesignerClass && n.getDesignerClass() || "", o = j();
  function i() {
    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : n && n.checkCanMoveComponent ? n.checkCanMoveComponent() : !0;
  }
  function u() {
    return !1;
  }
  function s() {
    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : n && n.checkCanDeleteComponent ? n.checkCanDeleteComponent() : !0;
  }
  function l() {
    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : n && n.hideNestedPaddingInDesginerView ? n.hideNestedPaddingInDesginerView() : !1;
  }
  function f(m) {
    if (!m || !m.value)
      return null;
    if (m.value.schema && m.value.schema.type === "component")
      return m.value;
    const S = j(m == null ? void 0 : m.value.parent), H = f(S);
    return H || null;
  }
  function d(m = e) {
    var g;
    if (n != null && n.getDraggableDesignItemElement)
      return n.getDraggableDesignItemElement(m);
    const { componentInstance: S, designerItemElementRef: H } = m;
    if (!S || !S.value)
      return null;
    const { getCustomButtons: N } = S.value;
    return S.value.canMove || N && ((g = N()) != null && g.length) ? H : d(m.parent);
  }
  function p(m) {
    return !!n && n.canAccepts(m);
  }
  function c() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function v() {
  }
  function y(m, S) {
    var H;
    !m || !S || (n != null && n.onAcceptMovedChildElement && n.onAcceptMovedChildElement(m, S), (H = e == null ? void 0 : e.setupContext) == null || H.emit("dragEnd"));
  }
  function L(m, S) {
    const { componentType: H } = m;
    let N = ye(H, m, S);
    n && n.onResolveNewComponentSchema && (N = n.onResolveNewComponentSchema(m, N));
    const g = H.toLowerCase().replace(/-/g, "_");
    return N && !N.id && N.type === H && (N.id = `${g}_${Math.random().toString().slice(2, 6)}`), N;
  }
  function T(m) {
    m && n != null && n.onChildElementMovedOut && n.onChildElementMovedOut(m);
  }
  function h(...m) {
    if (n && n.getPropsConfig)
      return n.getPropsConfig(...m);
  }
  function w() {
    n && n.onRemoveComponent && n.onRemoveComponent(), e != null && e.schema.contents && e.schema.contents.map((m) => {
      let S = m.id;
      m.type === "component-ref" && (S = m.component);
      const H = t.value.querySelectorAll(`#${S}-design-item`);
      H != null && H.length && Array.from(H).map((N) => {
        var g;
        (g = N == null ? void 0 : N.componentInstance) != null && g.value.onRemoveComponent && N.componentInstance.value.onRemoveComponent();
      });
    });
  }
  function M() {
    if (n && n.getCustomButtons)
      return n.getCustomButtons();
  }
  function I(m) {
    if (n && n.onPropertyChanged)
      return n.onPropertyChanged(m);
  }
  return o.value = {
    canMove: i(),
    canSelectParent: u(),
    canDelete: s(),
    canNested: !l(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: t,
    parent: (A = e == null ? void 0 : e.parent) == null ? void 0 : A.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: r,
    designerClass: a,
    canAccepts: p,
    getBelongedComponentInstance: f,
    getDraggableDesignItemElement: d,
    getDraggingDisplayText: c,
    getPropConfig: h,
    getDragScopeElement: v,
    onAcceptMovedChildElement: y,
    onChildElementMovedOut: T,
    addNewChildComponentSchema: L,
    triggerBelongedComponentToMoveWhenMoved: !!n && n.triggerBelongedComponentToMoveWhenMoved || j(!1),
    triggerBelongedComponentToDeleteWhenDeleted: !!n && n.triggerBelongedComponentToDeleteWhenDeleted || j(!1),
    onRemoveComponent: w,
    getCustomButtons: M,
    onPropertyChanged: I
  }, o;
}
class St {
  getTemplateRule(e, n) {
    const r = n == null ? void 0 : n.formSchemaUtils, a = r == null ? void 0 : r.getFormTemplateRule(), o = { canAccept: !0, canDelete: !0, canMove: !0 };
    if (!a)
      return o;
    const i = this.getComponentContext(e), { componentClassList: u } = i;
    return u.forEach((s) => {
      if (!s || !a[s])
        return;
      const { canMove: l, canDelete: f, canAccept: d } = a[s];
      o.canMove = o.canMove && this.resolveRuleValue(l, i), o.canDelete = o.canDelete && this.resolveRuleValue(f, i), o.canAccept = o.canAccept && this.resolveRuleValue(d, i);
    }), o;
  }
  resolveRuleValue(e, n) {
    return typeof e == "boolean" ? e : this.parseRuleValueSchema(e, n);
  }
  parseRuleValueSchema(e, n) {
    const r = e.invalidContext || [];
    let a = !0;
    for (const o of r) {
      if (o.firstLevelChild) {
        if (o.firstLevelChild.class) {
          const { firstLevelChildClassList: i } = n;
          if (i && !i.includes(o.firstLevelChild.class)) {
            a = !1;
            continue;
          }
        }
        if (o.firstLevelChild.type) {
          const { firstLevelChildSchema: i } = n;
          if (!i || i.type !== o.firstLevelChild.type) {
            a = !1;
            continue;
          }
        }
      }
      if (o.secondLevelChild) {
        if (o.secondLevelChild.class) {
          const { secondLevelChildClassList: i } = n;
          if (i && !i.includes(o.secondLevelChild.class)) {
            a = !1;
            continue;
          }
        }
        if (o.secondLevelChild.type) {
          const { secondLevelChildSchema: i } = n;
          if (!i || i.type !== o.secondLevelChild.type) {
            a = !1;
            continue;
          }
        }
      }
      if (o.parent) {
        if (o.parent.class) {
          const { parentClassList: i } = n;
          if (i && !i.includes(o.parent.class)) {
            a = !1;
            continue;
          }
        }
        if (o.parent.type) {
          const { parentSchema: i } = n;
          if (i && i.type !== o.parent.type) {
            a = !1;
            continue;
          }
        }
      }
      a = !0;
      break;
    }
    return !a;
  }
  getComponentContext(e) {
    var y, L, T, h;
    const n = e.schema, r = n.appearance && n.appearance.class || "", a = r.split(" ") || [], o = n.contents || [], i = o.length ? o[0] : null, u = i && i.appearance ? i.appearance.class : "", s = u ? u.split(" ") : [], l = (y = i == null ? void 0 : i.contents) != null && y.length ? i == null ? void 0 : i.contents[0] : null, f = l && l.appearance ? l.appearance.class : "", d = f ? f.split(" ") : [], p = n.type === "component" ? (T = (L = e.parent) == null ? void 0 : L.parent) == null ? void 0 : T.schema : (h = e.parent) == null ? void 0 : h.schema, c = p && p.appearance && p.appearance.class || "", v = c ? c.split(" ") : [];
    return {
      componentClass: r,
      componentClassList: a,
      childContents: o,
      firstLevelChildSchema: i,
      firstLevelChildClass: u,
      firstLevelChildClassList: s,
      secondLevelChildSchema: l,
      secondLevelChildClass: f,
      secondLevelChildClassList: d,
      parentSchema: p,
      parentClass: c,
      parentClassList: v
    };
  }
}
const Gn = j(0);
function Qn() {
  Gn.value++;
}
const Te = j(0);
function Zn(t, e) {
  const n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), a = r.top >= n.top, o = r.top <= n.bottom;
  return a && o;
}
function qe(t) {
  const e = t.querySelector(".component-btn-group");
  if (!e)
    return;
  e.style.display = "";
  const n = e.getBoundingClientRect();
  if (!(n.top === 0 && n.left === 0)) {
    const r = e.querySelector("div");
    if (r) {
      const a = r.getBoundingClientRect();
      r.style.top = n.top + "px";
      let o = n.left - a.width;
      const i = document.querySelector(".editorDiv");
      if (i) {
        const u = i.getBoundingClientRect();
        o < u.left && ({ left: o } = t.getBoundingClientRect());
      }
      r.style.left = o + "px";
    }
  }
}
function Jn(t) {
  if (!window.scrollContainerList)
    return;
  const e = Array.from(window.scrollContainerList);
  if (e.length && e.length === 1) {
    const n = e[0], r = document.querySelector(`[id=${n}]`);
    if (r && r.contains(t))
      return r;
  }
}
function Pt(t) {
  if (!t)
    return;
  const e = t.getBoundingClientRect();
  if (e.width === 0 && e.height === 0)
    return;
  const n = t.querySelector(".component-btn-group");
  if (n) {
    let r = !0;
    const a = Jn(t);
    if (a && (r = Zn(t, a)), !r) {
      n.style.display = "none";
      return;
    }
    qe(t);
  }
}
function Kn(t) {
  if (!t)
    return;
  let e;
  t.className.includes("dgComponentSelected") ? e = t : e = t.querySelector(".dgComponentSelected"), e && Pt(e);
}
class Pe {
  constructor(e, n) {
    Y(this, "componentId");
    Y(this, "viewModelId");
    Y(this, "eventsEditorUtils");
    Y(this, "formSchemaUtils");
    Y(this, "formMetadataConverter");
    Y(this, "designViewModelUtils");
    Y(this, "designViewModelField");
    Y(this, "controlCreatorUtils");
    Y(this, "designerHostService");
    Y(this, "schemaService", null);
    Y(this, "metadataService", null);
    Y(this, "propertyConfig", {
      type: "object",
      categories: {}
    });
    var r;
    this.componentId = e, this.designerHostService = n, this.eventsEditorUtils = n.eventsEditorUtils, this.formSchemaUtils = n.formSchemaUtils, this.formMetadataConverter = n.formMetadataConverter, this.viewModelId = ((r = this.formSchemaUtils) == null ? void 0 : r.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = n.designViewModelUtils, this.controlCreatorUtils = n.controlCreatorUtils, this.metadataService = n.metadataService, this.schemaService = n.schemaService;
  }
  getTableInfo() {
    var e;
    return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
  }
  setDesignViewModelField(e) {
    var r;
    const n = e.binding && e.binding.type === "Form" && e.binding.field;
    if (n) {
      if (!this.designViewModelField) {
        const a = this.designViewModelUtils.getDgViewModel(this.viewModelId);
        this.designViewModelField = a.fields.find((o) => o.id === n);
      }
      e.updateOn = (r = this.designViewModelField) == null ? void 0 : r.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",
            editable: !1,
            data: [{ value: e.type, name: re[e.type].name }]
          }
        }
      }
    };
  }
  getAppearanceConfig(e = null) {
    return {
      title: "外观",
      description: "Appearance",
      properties: {
        class: {
          title: "class样式",
          type: "string",
          description: "组件的CSS样式",
          $converter: "/converter/appearance.converter"
        },
        style: {
          title: "style样式",
          type: "string",
          description: "组件的样式",
          $converter: "/converter/appearance.converter"
        }
      },
      setPropertyRelates(n, r) {
        if (n)
          switch (n && n.propertyID) {
            case "class":
            case "style": {
              Te.value++;
              break;
            }
          }
      }
    };
  }
  /**
  * 
  * @param propertyId 
  * @param componentInstance 
  * @returns 
  */
  updateElementByParentContainer(e, n) {
    const r = n && n.parent && n.parent.schema;
    if (!r)
      return;
    const a = r.contents.findIndex((i) => i.id === e), o = _e(r.contents[a]);
    r.contents.splice(a, 1), r.contents.splice(a, 0, o), Qn();
  }
}
class eo extends Pe {
  constructor(e, n) {
    super(e, n);
  }
  getPropertyConfig(e) {
    return this.getBasicPropConfig(e), this.getBehaviorProperties(e), this.propertyConfig;
  }
  getBehaviorProperties(e) {
    this.propertyConfig.categories.behavior = {
      description: "",
      title: "行为",
      properties: {
        removeable: {
          description: "是否可移除",
          type: "boolean",
          title: "是否可移除"
        },
        disabled: {
          description: "是否禁用",
          type: "boolean",
          title: "是否禁用"
        },
        show: {
          description: "是否可见",
          type: "boolean",
          title: "是否可见"
        }
      }
    };
  }
  getBasicPropConfig(e) {
    this.propertyConfig.categories.basic = {
      description: "Basic Infomation",
      title: "基本信息",
      properties: {
        id: {
          description: "标签页项的标识",
          title: "标识",
          type: "string",
          readonly: !0
        },
        title: {
          description: "标签页项的标题",
          title: "标题",
          type: "string"
        }
      },
      setPropertyRelates(n, r) {
        if (n)
          switch (n && n.propertyID) {
            case "title": {
              n.needRefreshControlTree = !0;
              break;
            }
          }
      }
    };
  }
}
class to extends Pe {
  constructor(e, n) {
    super(e, n);
  }
  getPropertyConfig(e) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.appearance = this.getAppearanceProperties(e), this.propertyConfig;
  }
  getAppearanceProperties(e) {
    return {
      title: "外观",
      description: "Appearance",
      properties: {
        class: {
          title: "class样式",
          type: "string",
          description: ""
        },
        titleWidth: {
          description: "标题区域宽度占页面比",
          type: "number",
          title: "标题区域宽度（%）",
          min: 0,
          decimals: 0,
          max: 100
        },
        autoTitleWidth: {
          description: "开启，则显示全部字符；关闭，最多显示7个字符",
          type: "boolean",
          title: "标题自适应宽度",
          defaultValue: !1,
          visible: !1
        },
        fill: {
          description: "flex布局下，填充满剩余部分",
          type: "boolean",
          title: "填充"
        }
      }
    };
  }
}
function no(t, e) {
  const n = t.schema, r = new St(), { canMove: a, canAccept: o, canDelete: i } = r.getTemplateRule(t, e);
  function u(v) {
    return o;
  }
  function s() {
    return i;
  }
  function l() {
    return a;
  }
  function f() {
    return !a && !i;
  }
  function d(v) {
    var T;
    return (((T = document.querySelector(".dgComponentFocused")) == null ? void 0 : T.id) === `${n.id}-design-item` ? new to(v, e) : new eo(v, e)).getPropertyConfig(n);
  }
  function p() {
    t.designerItemElementRef.value && se(() => {
      const v = t.designerItemElementRef.value.querySelector(".dgComponentSelected");
      v != null && v.className.includes("dgComponentSelected") && v.click();
    });
  }
  function c(v) {
    if (!v)
      return;
    const { changeObject: y } = v;
    y && y.propertyID === "title" && p();
  }
  return {
    canAccepts: u,
    checkCanDeleteComponent: s,
    checkCanMoveComponent: l,
    getPropsConfig: d,
    hideNestedPaddingInDesginerView: f,
    onPropertyChanged: c
  };
}
function oo(t, e, n, r) {
  const a = j([]), o = j(t.activeId || ""), i = j(!0), u = j(), s = j([]), l = j(0);
  function f(P) {
    const k = P.value.findIndex((D) => D.props.show !== !1 && !o.value);
    if (s.value = [], !o.value && k !== -1) {
      o.value = P.value[k].props.id;
      const D = P.value[k];
      D && D.props.toolbar && D.props.toolbar.buttons && D.props.toolbar.buttons.length && (s.value = [...D.props.toolbar.buttons]);
    }
  }
  function d(P) {
    o.value = P;
  }
  function p(P, k) {
    P.classList.contains(k) || P.classList.add(k);
  }
  function c(P, k) {
    P.classList.remove(k);
  }
  function v(P) {
    const { parentElement: k } = P;
    k && (P.scrollWidth > k.offsetWidth ? p(P, "farris-title-text-custom") : c(P, "farris-title-text-custom"));
  }
  function y(P) {
    var D;
    if (t.autoTitleWidth)
      return;
    const k = (D = P.value) == null ? void 0 : D.querySelectorAll(".st-tab-text");
    k && k.forEach((q) => v(q));
  }
  const L = (P) => {
    P.preventDefault(), P.stopPropagation();
  };
  function T(P) {
    a.value = a.value.filter((k) => k.props.id !== P), o.value === P && (o.value = "", f(a));
  }
  function h(P, k, D = !1) {
    const q = a.value.findIndex((J) => J.props.id === k);
    T(k), L(P), se(() => {
      l.value++, y(n), D && (i.value = !0), e.emit("tabRemove", {
        removeIndex: q,
        removeId: k,
        activeId: o.value
      });
    });
  }
  function w() {
    const P = a.value.find((q) => q.props.id === o.value);
    if (s.value = [], P && P.props.toolbar) {
      const q = Object.prototype.hasOwnProperty.call(P.props.toolbar, "contents") ? "contents" : "buttons";
      P.props.toolbar[q] &&