@farris/ui-vue 1.0.0-beta.5 → 1.0.0

package/tabs/index.esm.js

@@ -1,5 +1,91 @@
-import { defineComponent as H, shallowRef as D, ref as w, computed as p, provide as ne, onMounted as M, nextTick as S, createVNode as s, Fragment as oe, withDirectives as ie, vModelText as ue, createTextVNode as re, inject as de, getCurrentInstance as ce, onUnmounted as fe, watch as ve } from "vue";
-const pe = {
+var Pe = Object.defineProperty;
+var Ae = (e, t, n) => t in e ? Pe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var M = (e, t, n) => (Ae(e, typeof t != "symbol" ? t + "" : t, n), n);
+import { ref as j, nextTick as q, computed as g, createVNode as d, defineComponent as L, watch as z, onMounted as _, withDirectives as Re, vModelText as He, createTextVNode as $e, Fragment as Ee, onUnmounted as ae, shallowRef as U, provide as be, inject as Y, isVNode as ve } from "vue";
+const he = {};
+function le(e) {
+  const { properties: t } = e;
+  return Object.keys(t).reduce((s, o) => (s[o] = t[o].type === "object" && t[o].properties ? le(t[o]) : t[o].default, s), {});
+}
+function Ne(e) {
+  const t = he[e];
+  return t ? le(t) : null;
+}
+function We(e, t) {
+  const n = le(t);
+  return Object.keys(e).reduce((s, o) => (s[o] = e[o], s), n), n;
+}
+function Le(e, t) {
+  return Object.keys(e).filter((s) => e[s] != null).reduce((s, o) => {
+    if (t.has(o)) {
+      const b = t.get(o);
+      if (typeof b == "string")
+        s[b] = e[o];
+      else {
+        const i = b(o, e[o]);
+        Object.assign(s, i);
+      }
+    } else
+      s[o] = e[o];
+    return s;
+  }, {});
+}
+function _e(e, t, n = /* @__PURE__ */ new Map()) {
+  const s = We(e, t);
+  return Le(s, n);
+}
+function re(e, t, n = /* @__PURE__ */ new Map()) {
+  return he[t.title] = t, (s) => {
+    const o = _e(s, t, n), b = Object.keys(e).reduce((i, y) => (i[y] = e[y].default, i), {});
+    return Object.assign(b, o);
+  };
+}
+function ge(e, t) {
+  return { customClass: t.class };
+}
+const ye = /* @__PURE__ */ new Map([
+  ["appearance", ge]
+]), Ve = "https://json-schema.org/draft/2020-12/schema", Fe = "https://farris-design.gitee.io/tabs.schema.json", qe = "tabs", ze = "A Farris Container Component", Ge = "object", Ue = {
+  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: []
+  }
+}, Je = [
+  "id",
+  "type",
+  "contents"
+], Qe = {
+  $schema: Ve,
+  $id: Fe,
+  title: qe,
+  description: ze,
+  type: Ge,
+  properties: Ue,
+  required: Je
+}, ie = {
   tabType: { type: String, default: "default" },
   autoTitleWidth: { type: Boolean, default: !1 },
   titleLength: { type: Number, default: 7 },
@@ -16,312 +102,1016 @@ const pe = {
   titleWidth: { type: Number, default: 0 },
   customClass: { type: String, default: "" },
   activeId: { type: String },
-  fill: { type: Boolean, default: !1 }
-};
-function be(t, m, o) {
-  function i(u) {
-    const f = u.value.findIndex((g) => g.props.show !== !1 && !o.value && !g.props.disabled);
-    !o.value && f !== -1 && (o.value = u.value[f].props.id);
+  fill: { type: Boolean, default: !1 },
+  justifyContent: { type: String, default: "left" }
+}, de = re(ie, Qe, ye);
+function me(e, t, n) {
+  const s = j([]), o = j(e.activeId || ""), b = j(!0), i = j([]);
+  function y(p) {
+    const c = p.value.findIndex((u) => u.props.show !== !1 && !o.value && !u.props.disabled);
+    !o.value && c !== -1 && (o.value = p.value[c].props.id);
   }
-  function b(u) {
-    return { width: `${u.tabWidth}px` };
+  function C(p) {
+    var u;
+    if (e.autoTitleWidth)
+      return;
+    const c = (u = p.value) == null ? void 0 : u.querySelectorAll(".st-tab-text");
+    if (c)
+      for (let h = 0; h < c.length; h++) {
+        const x = c[h].parentNode;
+        c[h].scrollWidth > x.offsetWidth ? c[h].classList.contains("farris-title-text-custom") || c[h].classList.add("farris-title-text-custom") : c[h].classList.remove("farris-title-text-custom");
+      }
   }
-  function h(u) {
-    return {
-      "nav-item": !0,
-      "d-none": u.show !== void 0 ? !u.show : !1,
-      "f-state-active": u.id === o.value,
-      "f-state-disable": u.disabled
-    };
+  const r = (p) => {
+    p.preventDefault(), p.stopPropagation();
+  };
+  function l(p, c, u = !1) {
+    s.value.findIndex((h) => h.props.id === c), s.value = s.value.filter((h) => h.props.id !== c), o.value === c && (o.value = "", y(s)), r(p), q(() => {
+      C(n), u && (b.value = !0);
+      const h = s.value.findIndex((x) => x.props.id === o.value);
+      t.emit("tabRemove", {
+        removeIndex: h,
+        removeId: c,
+        activeId: o.value
+      });
+    });
   }
-  function a(u) {
-    return {
-      "nav-link": !0,
-      "tabs-text-truncate": !0,
-      active: u.id === o.value,
-      disabled: u.disabled
-    };
+  function a(p) {
+    const c = o.value;
+    o.value = p;
+    const u = s.value.find((h) => h.props.id === p);
+    u && u.props.toolbar && u.props.toolbar.contents && u.props.toolbar.contents.length && (i.value = [...u.props.toolbar.contents]), t.emit("tabChange", {
+      prevId: c,
+      nextId: o.value
+    });
+  }
+  function v(p) {
+    a(p);
+  }
+  function f(p) {
+    s.value.findIndex((u) => u.props.id === p.props.id) === -1 && s.value.push(p);
+  }
+  function T(p) {
+    s.value.findIndex((u) => u.props.id === p.props.id) !== -1 && (s.value.forEach((u) => {
+      u.props.id === p.props.id && (u = p);
+    }), q(() => {
+      C(n);
+    }));
+  }
+  return {
+    activeId: o,
+    addTab: f,
+    changeTitleStyle: C,
+    removeTab: l,
+    selectTab: v,
+    selectTabByTabId: a,
+    tabPages: s,
+    updateTab: T,
+    toolbarItems: i
+  };
+}
+function Xe(e, t, n, s, o) {
+  const {
+    activeId: b,
+    removeTab: i,
+    selectTab: y
+  } = o, C = g(() => ({
+    "st-tab-text": !0,
+    "farris-title-auto": e.autoTitleWidth
+  })), r = g(() => ({
+    "nav-item": !0,
+    "d-none": t.show !== void 0 ? !t.show : !1,
+    "f-state-active": t.id === b.value,
+    "f-state-disable": t.disabled
+  })), l = g(() => ({
+    width: `${t.tabWidth}px`
+  })), a = g(() => ({
+    "nav-link": !0,
+    "tabs-text-truncate": !0,
+    active: t.id === b.value,
+    disabled: t.disabled
+  }));
+  function v(h) {
+    return d("span", {
+      class: C.value,
+      title: h.title
+    }, [h.title]);
+  }
+  function f(h) {
+    return h.slots.title ? h.slots.title : v;
   }
-  function c(u) {
+  const T = f(n), p = j(t.removeable);
+  function c() {
+    return d("span", {
+      class: "st-drop-close",
+      onClick: (h) => i(h, t.id)
+    }, [d("i", {
+      class: "f-icon f-icon-close"
+    }, null)]);
+  }
+  function u(h) {
+    y(t.id), e.tabType === "one-page" && s.scrollToByPaggId(t.id);
+  }
+  return d("li", {
+    class: r.value,
+    style: l.value
+  }, [d("a", {
+    class: a.value,
+    onClick: u
+  }, [T(t), p.value && c()])]);
+}
+function Ce(e, t, n, s, o) {
+  const {
+    shouldShowNavigationButtons: b
+  } = n, {
+    tabPages: i
+  } = o, y = g(() => ({
+    spacer: !0,
+    "f-utils-fill": !0,
+    "spacer-sides-dropdown": b.value
+  })), C = g(() => ({
+    width: "100%",
+    display: "flex",
+    "justify-content": e.justifyContent
+  })), r = g(() => ({
+    nav: !0,
+    "farris-nav-tabs": !0,
+    "flex-nowrap": !0,
+    "nav-fill": e.fill || e.tabType === "fill",
+    "nav-pills": e.tabType === "pills",
+    "flex-row": e.position === "top" || e.position === "bottom",
+    "flex-column": e.position === "left" || e.position === "right"
+  }));
+  return () => d("div", {
+    class: y.value,
+    style: C.value
+  }, [d("ul", {
+    class: r.value,
+    ref: t
+  }, [i.value.map((l) => Xe(e, l.props, l, s, o))])]);
+}
+const Ye = {
+  items: { Type: Array, default: [] },
+  /**
+   * 组件值
+   */
+  modelValue: { type: String, default: "" },
+  type: { type: String, default: "primary" }
+}, Ze = {
+  name: { type: String, default: "" },
+  value: { type: String, default: "" },
+  isActive: { type: Boolean, default: !1 },
+  icon: { type: String, default: "" },
+  index: { type: Number, default: 0 }
+};
+const Ke = /* @__PURE__ */ L({
+  name: "FCapsuleItem",
+  props: Ze,
+  emits: ["mounted", "active"],
+  setup(e, t) {
+    const n = j(), s = j(e.isActive);
+    z(() => e.isActive, (i) => {
+      s.value = i;
+    });
+    const o = g(() => ({
+      "f-capsule-item": !0,
+      "f-capsule-active-item": s.value
+    }));
+    _(() => {
+      t.emit("mounted", n, e.value);
+    });
+    function b(i) {
+      t.emit("active", i, {
+        name: e.name,
+        value: e.value
+      });
+    }
+    return () => d("div", {
+      ref: n,
+      class: o.value,
+      onClick: (i) => b(i)
+    }, [e.icon && d("i", {
+      class: e.icon
+    }, null), e.name]);
+  }
+}), et = /* @__PURE__ */ L({
+  name: "FCapsule",
+  props: Ye,
+  emits: ["change", "update:modelValue"],
+  setup(e, t) {
+    const n = j(e.items), s = j(), o = 2, b = j(e.modelValue), i = j("none"), y = j(e.type), C = g(() => {
+      const w = {
+        "f-capsule-container": !0
+      };
+      return y.value && (w[y.value] = !0), w;
+    }), r = g(() => ({})), l = g(() => ({
+      "f-capsule": !0
+    })), a = j(o), v = j(0), f = j(0), T = g(() => ({
+      left: `${a.value}px`,
+      width: `${v.value}px`,
+      transition: i.value
+    })), p = g(() => ({
+      width: `${f.value}px`
+    })), c = /* @__PURE__ */ new Map();
+    function u(w) {
+      var S;
+      if (c.has(w.value)) {
+        const B = (S = c.get(w.value)) == null ? void 0 : S.value;
+        if (B) {
+          const P = B.getBoundingClientRect(), E = s.value.getBoundingClientRect();
+          a.value = P.left - E.left + o + s.value.scrollLeft, v.value = P.width - 2 * o;
+        }
+      }
+    }
+    function h(w, S) {
+      const B = w.value;
+      b.value = B, t.emit("update:modelValue", B), u(w), S && t.emit("change", B);
+    }
+    function x(w) {
+      const S = n.value.findIndex((B) => B.value === w);
+      S > -1 && h(n.value[S], !1);
+    }
+    z(() => e.modelValue, (w) => {
+      b.value = w, x(b.value);
+    }), z(() => e.items, async (w) => {
+      n.value = w, await q(), x(b.value), f.value = Array.from(c.values()).reduce((S, B) => (S += B.value.clientWidth, S), 0);
+    }), _(async () => {
+      x(b.value), await q(), i.value = "0.1s ease-out all", f.value = Array.from(c.values()).reduce((w, S) => (w += S.value.clientWidth, w), 0);
+    });
+    function D(w, S) {
+      h(S, !0);
+    }
+    function R(w, S) {
+      c.set(S, w);
+    }
+    function m(w, S) {
+      return d(Ke, {
+        name: w.name,
+        value: w.value,
+        isActive: w.value === b.value,
+        index: S,
+        onMounted: R,
+        onActive: D
+      }, null);
+    }
+    return () => d("span", {
+      ref: s,
+      class: C.value,
+      style: r.value
+    }, [d("span", {
+      class: "f-capsule-pane"
+    }, [n.value.map((w, S) => m(w, S))]), d("small", {
+      class: l.value,
+      style: T.value
+    }, null), d("div", {
+      class: "f-capsule-board",
+      style: p.value
+    }, null)]);
+  }
+});
+function we(e, t, n, s, o) {
+  const b = j(), {
+    shouldShowNavigationButtons: i
+  } = n, {
+    activeId: y,
+    tabPages: C
+  } = o, r = g(() => C.value.map((f) => ({
+    name: f.props.title,
+    value: f.props.id
+  }))), l = g(() => ({
+    spacer: !0,
+    "f-utils-fill": !0,
+    "spacer-sides-dropdown": i.value
+  })), a = g(() => ({
+    width: "100%",
+    display: "flex",
+    "justify-content": e.justifyContent
+  }));
+  _(() => {
+    b.value && (t.value = b.value.$el);
+  });
+  function v() {
+  }
+  return () => d("div", {
+    class: l.value,
+    style: a.value
+  }, [d(et, {
+    items: r.value,
+    modelValue: y.value,
+    "onUpdate:modelValue": (f) => y.value = f,
+    onChange: v,
+    ref: b
+  }, null)]);
+}
+function tt(e, t, n, s) {
+  const {
+    activeId: o,
+    removeTab: b,
+    tabPages: i
+  } = s, {
+    selectAndScrollToTab: y
+  } = n, {
+    hideDropDown: C,
+    searchTabText: r
+  } = t, l = j("auto"), a = g(() => {
+    var h, x;
+    let u = [];
+    return e.searchBoxVisible ? u = (h = i.value) == null ? void 0 : h.filter((D) => D.props.title.includes(r.value)) : u = (x = i.value) == null ? void 0 : x.slice(), u;
+  }), v = g(() => ({
+    "dropdown-menu": !0,
+    "tabs-pt28": e.searchBoxVisible,
+    show: !C.value
+  }));
+  function f(u) {
     return {
-      "st-tab-text": !0,
-      "farris-title-auto": t.autoTitleWidth
+      "dropdown-item": !0,
+      "text-truncate": !0,
+      "px-2": !0,
+      disabled: u.props.disabled,
+      active: u.props.id === o.value,
+      "d-none": u.props.show !== !0
     };
   }
   function T(u) {
-    var g;
-    if (t.autoTitleWidth)
-      return;
-    const f = (g = u.value) == null ? void 0 : g.querySelectorAll(".st-tab-text");
-    if (!!f)
-      for (let y = 0; y < f.length; y++) {
-        const k = f[y].parentNode;
-        f[y].scrollWidth > k.offsetWidth ? f[y].classList.contains("farris-title-text-custom") || f[y].classList.add("farris-title-text-custom") : f[y].classList.remove("farris-title-text-custom");
-      }
+    u.preventDefault(), u.stopPropagation();
   }
-  function B(u, f) {
-    const g = o.value;
-    o.value = f, m.emit("tabChange", {
-      prevId: g,
-      nextId: o.value
-    }), u.preventDefault(), u.stopPropagation();
+  const p = () => ({
+    width: l.value
+  });
+  function c() {
+    return d("div", {
+      class: v.value
+    }, [e.searchBoxVisible && d("div", {
+      onClick: (u) => T(u),
+      class: "pb-1 tabs-li-absolute"
+    }, [Re(d("input", {
+      title: "search-box",
+      type: "text",
+      class: "form-control k-textbox",
+      "onUpdate:modelValue": (u) => r.value = u
+    }, null), [[He, r.value]]), d("span", {
+      class: "f-icon f-icon-page-title-query tabs-icon-search"
+    }, null)]), a.value.length ? d("ul", {
+      class: "tab-dropdown-menu--items",
+      style: p()
+    }, [a.value.map((u) => d("li", {
+      class: f(u),
+      onClick: (h) => y(h, u.props)
+    }, [u.props.removeable && d("span", {
+      class: "float-right st-drop-close",
+      onClick: (h) => b(h, u.props.id, !0)
+    }, [d("i", {
+      class: "f-icon f-icon-close"
+    }, null)]), d("a", {
+      class: "dropdown-title"
+    }, [u.props.title])]))]) : d("div", {
+      class: "dropdown-no-data"
+    }, [$e("没有相关数据")])]);
   }
   return {
-    setActiveId: i,
-    getTabStyle: b,
-    getTabClass: h,
-    getTabNavLinkClass: a,
-    getTabTextClass: c,
-    changeTitleStyle: T,
-    selectTabByTabId: B
+    renderDropdownMenu: c
   };
 }
-const V = H({
-  name: "FTabs",
-  props: pe,
-  emits: ["tabChange", "tabRemove"],
-  setup(t, m) {
-    const o = D(), i = D(), b = w(!0), h = w(!0), a = w([]), c = w(t.activeId), T = p(() => {
-      const e = a.value.find((l) => l.props.id === c.value);
-      return e == null ? void 0 : e.slots;
-    }), B = p(() => {
-      const e = a.value.find((n) => n.props.id === c.value);
-      return (e == null ? void 0 : e.props.toolbarPosition) === "inHead";
-    }), u = w("atuo"), f = w(""), {
-      setActiveId: g,
-      getTabStyle: y,
-      getTabClass: k,
-      getTabNavLinkClass: U,
-      getTabTextClass: q,
-      changeTitleStyle: E,
-      selectTabByTabId: I
-    } = be(t, m, c), x = () => {
-      var l;
-      const e = (l = i.value) == null ? void 0 : l.parentElement;
-      !e || !i.value || (e.offsetWidth < i.value.scrollWidth ? b.value = !1 : b.value = !0);
-    }, N = (e) => {
-      e.preventDefault(), e.stopPropagation();
-    }, W = (e, l) => {
-      if (!i.value)
-        return;
-      const n = i.value.scrollLeft, r = i.value.scrollWidth - i.value.offsetWidth;
-      if (l > 0) {
-        if (i.value.scrollLeft >= r)
-          return;
-        i.value.scrollLeft = n + t.scrollStep + e;
-      } else if (l < 0) {
-        if (i.value.scrollLeft <= 0)
-          return;
-        i.value.scrollLeft = n - t.scrollStep - e;
+function Te(e, t, n, s) {
+  const {
+    hideDropDown: o
+  } = t, {
+    renderDropdownMenu: b
+  } = tt(e, t, n, s);
+  function i() {
+    return d(Ee, null, [d("button", {
+      title: "toggle-button",
+      class: "btn dropdown-toggle-split dropdown-toggle",
+      onClick: () => {
+        o.value = !1;
       }
-    }, P = (e) => {
-      if (b.value || !i.value)
+    }, null), b()]);
+  }
+  return {
+    renderMorePagesButtton: i
+  };
+}
+function Se(e, t, n, s) {
+  const o = j(!1), { selectTabByTabId: b, tabPages: i } = s, y = 4;
+  function C() {
+    var u;
+    const p = t.value, c = (u = t.value) == null ? void 0 : u.parentElement;
+    o.value = c && p && c.offsetWidth < p.scrollWidth - y;
+  }
+  const r = g(() => ({
+    btn: !0,
+    "sc-nav-btn": !0,
+    "px-1": !0,
+    "sc-nav-lr": !0,
+    "d-none": !o.value
+  })), l = g(() => ({
+    "btn-group": !0,
+    "sc-nav-btn": !0,
+    dropdown: !0,
+    "d-none": !o.value
+  })), a = g(() => ({
+    btn: !0,
+    "sc-nav-rg": !0,
+    "d-none": !o.value
+  }));
+  function v(p, c) {
+    if (!t.value)
+      return;
+    const u = t.value.scrollLeft, h = t.value.scrollWidth - t.value.offsetWidth;
+    if (c > 0) {
+      if (t.value.scrollLeft >= h)
+        return;
+      t.value.scrollLeft = u + e.scrollStep + p;
+    } else if (c < 0) {
+      if (t.value.scrollLeft <= 0)
         return;
-      const l = i.value.querySelectorAll(".nav-item"), {
-        parentElement: n
-      } = i.value, r = l[e];
-      if (r && n) {
-        const d = n.getBoundingClientRect().left, v = n.getBoundingClientRect().right, L = r.getBoundingClientRect().left, C = r.getBoundingClientRect().right;
-        L < d ? W(d - L, -1) : v < C && W(C - v, 1);
+      t.value.scrollLeft = u - e.scrollStep - p;
+    }
+  }
+  function f(p) {
+    if (!o.value || !t.value)
+      return;
+    const c = e.tabType === "pills" ? ".f-capsule-item" : ".nav-item", u = t.value.querySelectorAll(c), { parentElement: h } = t.value, x = u[p];
+    if (x && h) {
+      const D = h.getBoundingClientRect().left, R = h.getBoundingClientRect().right, m = x.getBoundingClientRect().left, w = x.getBoundingClientRect().right;
+      m < D ? v(D - m, -1) : R < w && v(w - R, 1), e.tabType === "one-page" && n.scrollTo(p);
+    }
+  }
+  function T(p, c) {
+    if (c.disabled)
+      return;
+    b(c.id);
+    const u = i.value.findIndex((h) => h.props.id === c.id);
+    q(() => {
+      f(u);
+    });
+  }
+  return {
+    previousButtonClass: r,
+    nextButtonGroupClass: l,
+    nextButtonClass: a,
+    scrollTab: v,
+    selectAndScrollToTab: T,
+    shouldShowNavigationButtons: o,
+    updateNavigationLayout: C
+  };
+}
+function xe(e, t) {
+  const { tabPages: n } = t, s = j(""), o = j(!0), b = g(() => e.searchBoxVisible), i = g(() => b.value ? n.value.filter((C) => C.props.title.includes(s.value)) : n.value.slice());
+  return {
+    searchTabText: s,
+    hideDropDown: o,
+    shouldShowSearchBox: b,
+    tabsInDropdownMenu: i
+  };
+}
+function je(e, t, n) {
+  const s = ".farris-tab-page", { tabPages: o } = n;
+  function b(y) {
+    const C = t.value;
+    if (C) {
+      const r = t.value.querySelectorAll(s);
+      if (r.length > 0) {
+        const l = r[y], { offsetTop: a } = l, v = a - 32 > 0 ? a - 32 : 0;
+        C.scrollTop = v;
       }
-    }, j = (e) => {
-      a.value.findIndex((n) => n.props.id === e.props.id) === -1 && a.value.push(e), S(() => {
-        x();
-      });
-    }, z = (e) => {
-      a.value.findIndex((n) => n.props.id === e.props.id) !== -1 && (a.value.forEach((n) => {
-        n.props.id === e.props.id && (n = e);
-      }), S(() => {
-        E(i), x();
-      }));
-    };
-    function R(e, l, n = !1) {
-      a.value.findIndex((r) => r.props.id === l), a.value = a.value.filter((r) => r.props.id !== l), c.value === l && (c.value = "", g(a)), N(e), S(() => {
-        E(i), x(), n && (h.value = !0);
-        const r = a.value.findIndex((d) => d.props.id === c.value);
-        P(r), m.emit("tabRemove", {
-          removeIndex: r,
-          removeId: l,
-          activeId: c.value
-        });
-      });
     }
-    ne("tabs", {
-      activeId: c,
-      addTab: j,
-      updateTab: z,
-      tabs: a
+  }
+  function i(y) {
+    const C = o.value.findIndex((r) => r.props.id === y);
+    C > -1 && b(C);
+  }
+  return { scrollTo: b, scrollToByPaggId: i };
+}
+const nt = {
+  alignment: { Type: String, default: "right" },
+  items: { Type: Array, default: [] }
+};
+class Be {
+  constructor(t) {
+    /** 工具栏项标识 */
+    M(this, "id", "");
+    /** 工具栏项自定义样式 */
+    M(this, "class", "btn-secondary");
+    /** 图标 */
+    M(this, "icon", "");
+    /** 所属分组 */
+    M(this, "groupId", "");
+    /** 收藏顺序 */
+    M(this, "order", -1);
+    /** 是否作为下拉菜单的顶层按钮 */
+    M(this, "asDropDownTop", !1);
+    /** 文本 */
+    M(this, "text", "");
+    /** 是否可见 */
+    M(this, "visible", !0);
+    M(this, "responsed", !1);
+    /** 是否启用提示消息 */
+    M(this, "tipsEnable", !1);
+    /** 提示消息内容 */
+    M(this, "tipsText", "");
+    /** 记录宽度 */
+    M(this, "width", 0);
+    M(this, "onClick", () => {
     });
-    const O = p(() => t.fill || t.tabType === "fill"), _ = p(() => t.tabType === "pills"), $ = p(() => ({
-      "farris-tabs-header": !0,
-      "farris-tabs-inHead": B.value,
-      "farris-tabs-inContent": !B.value,
-      "farris-tabs-nav-fill": O.value,
-      "farris-tabs-nav-pills": _.value
-    })), G = p(() => ({
-      width: B.value && t.titleWidth ? `${t.titleWidth}%` : ""
-    })), J = p(() => ({
-      btn: !0,
-      "sc-nav-btn": !0,
-      "px-1": !0,
-      "sc-nav-lr": !0,
-      "d-none": b.value
-    })), K = p(() => ({
+    M(this, "options");
+    this.options = t;
+    const n = [
+      "id",
+      "class",
+      "icon",
+      "groupId",
+      "order",
+      "asDropDownTop",
+      "text",
+      "isDP",
+      "visible",
+      "responsed",
+      "width",
+      "tipsEnable",
+      "tipsText",
+      "onClick"
+    ];
+    Object.keys(t).filter((s) => n.indexOf(s) > -1).forEach((s) => {
+      this[s] = t[s];
+    });
+  }
+  /** 是否可用 */
+  get enable() {
+    return Object.keys(this.options).indexOf("enable") > -1 ? this.options.enable : g(() => !0);
+  }
+  /** 设置宽度 */
+  setWidth(t) {
+    this.width = parseInt(t, 10);
+  }
+  /** 获取宽度 */
+  getWidth() {
+    return this.visible ? this.width : !1;
+  }
+}
+class st extends Be {
+  constructor(t) {
+    super(t);
+  }
+}
+function Ie() {
+  function e(t) {
+    const n = [];
+    return t.reduce((s, o) => (o.children && o.children.length > 0 ? s.push(new oe(o)) : s.push(new st(o)), s), n), n;
+  }
+  return { buildResponseToolbarItems: e };
+}
+const { buildResponseToolbarItems: ot } = Ie();
+class oe extends Be {
+  constructor(n) {
+    super(n);
+    M(this, "placement", "");
+    // 下拉位置
+    /** 下拉class */
+    M(this, "dropdownClass", "");
+    /** 下拉菜单class */
+    M(this, "menuClass", "");
+    /** 是否用分开的下拉按钮 */
+    M(this, "split", !1);
+    M(this, "children", []);
+    M(this, "expanded", !1);
+    const s = ["isDP", "class", "dropdownClass", "menuClass", "placement", "split", "expanded"];
+    Object.keys(n).filter((o) => s.indexOf(o) > -1).forEach((o) => {
+      this[o] = n[o];
+    }), n.children && n.children.length && (this.children = ot(n.children));
+  }
+}
+function at() {
+  function e(r) {
+    const l = {
+      "dropdown-menu": !0
+    };
+    if (r.class) {
+      const a = r.menuClass.split(" ");
+      a && a.length && a.reduce((v, f) => (v[f] = !0, v), l);
+    }
+    return l;
+  }
+  function t(r) {
+    const l = {
+      disabled: !r.enable,
+      "dropdown-submenu": !0,
+      "f-rt-dropdown": !0
+    }, a = r.dropdownClass.split(" ");
+    return a && a.length && a.reduce((v, f) => (v[f] = !0, v), l), l;
+  }
+  function n(r) {
+    const l = {
+      disabled: !r.enable,
+      "dropdown-item": !0,
+      "f-rt-btn": !0
+    }, a = r.class.split(" ");
+    return a && a.length && a.reduce((v, f) => (v[f] = !0, v), l), l;
+  }
+  let s;
+  const o = /* @__PURE__ */ new Map();
+  function b(r, l, a) {
+    var f;
+    ((f = r.target) == null ? void 0 : f.id) === l.id && r.stopPropagation();
+    const v = a ? a.id : "__top_item__";
+    if (l.children && l.children.length && (l.expanded = !l.expanded, l.expanded ? o.set(v, l) : o.delete(v)), o.has(v) && o.get(v) !== l) {
+      const T = o.get(v);
+      T && (T.expanded = !1);
+    }
+  }
+  function i(r) {
+    return r.children.map((l) => l.children && l.children.length ? d("li", {
+      class: t(l),
+      id: l.id,
+      onClick: (a) => l.enable && b(a, l, r)
+    }, [d("span", {
+      id: l.id,
+      class: n(l),
+      onMouseover: (a) => l.enable && b(a, l, r)
+    }, [l.text, d("i", {
+      class: "f-icon f-icon-arrow-chevron-right",
+      style: "display: inline-block;float: right;line-height: 1.25rem;"
+    }, null)]), s(l, r)]) : d("li", {
+      class: n(l),
+      id: l.id,
+      onClick: (a) => l.enable && l.onClick(a, l.id),
+      onMouseover: (a) => l.enable && b(a, l, r)
+    }, [l.text]));
+  }
+  function y(r, l) {
+    const a = {
+      display: r.expanded ? "block" : "none"
+    }, v = document.getElementsByTagName("body")[0].getClientRects()[0].width, f = document.getElementById(r.id), T = f == null ? void 0 : f.getClientRects();
+    if (f && T && T.length) {
+      const p = T[0].x;
+      v - p <= 160 && (a.right = 0, a.left = "unset");
+    }
+    return l && (a.top = 0, a.right = "160px", a.left = "unset"), a;
+  }
+  s = function(r, l) {
+    return d("ul", {
+      class: e(r),
+      style: y(r, l),
+      id: r.id + "_menu"
+    }, [i(r)]);
+  };
+  function C() {
+    o.forEach((r) => {
+      r.expanded = !1;
+    }), o.clear();
+  }
+  return {
+    renderDropdownMenu: s,
+    clearAllDropDownMenu: C
+  };
+}
+function lt(e, t) {
+  const n = j(e.alignment), {
+    renderDropdownMenu: s,
+    clearAllDropDownMenu: o
+  } = at();
+  function b(l) {
+    const a = {
       "btn-group": !0,
-      "sc-nav-btn": !0,
-      dropdown: !0,
-      "d-none": b.value
-    })), Q = p(() => ({
-      "dropdown-menu": !0,
-      "tabs-pt28": t.searchBoxVisible,
-      show: !h.value
-    })), X = p(() => ({
+      "f-rt-dropdown": !0,
+      "f-btn-ml": n.value === "right",
+      "f-btn-mr": n.value === "left"
+    }, v = l.dropdownClass.split(" ");
+    return v && v.length && v.reduce((f, T) => (f[T] = !0, f), a), a;
+  }
+  function i(l) {
+    const a = {
       btn: !0,
-      "sc-nav-rg": !0,
-      "d-none": b.value
-    })), Y = () => ({
-      width: u.value
-    }), Z = (e) => ({
-      "dropdown-item": !0,
-      "text-truncate": !0,
-      "px-2": !0,
-      disabled: e.props.disabled,
-      active: e.props.id === c.value,
-      "d-none": e.props.show !== !0
-    }), ee = (e, l) => {
-      if (l.disabled)
-        return;
-      I(e, l.id);
-      const n = a.value.findIndex((r) => r.props.id === l.id);
-      h.value = !0, S(() => {
-        x(), P(n);
-      });
-    }, A = p(() => {
-      var l, n;
-      let e = [];
-      return t.searchBoxVisible ? e = (l = a.value) == null ? void 0 : l.filter((r) => r.props.title.includes(f.value)) : e = (n = a.value) == null ? void 0 : n.slice(), e;
-    }), te = p(() => ({
-      spacer: !0,
-      "f-utils-fill": !0,
-      "spacer-sides-dropdown": !b.value
-    })), le = p(() => ({
-      nav: !0,
-      "farris-nav-tabs": !0,
+      disabled: !l.enable,
+      "f-rt-btn": !0,
+      "btn-icontext": !!(l.icon && l.icon.trim())
+    };
+    if (l.class) {
+      const v = l.class.split(" ");
+      v && v.length && v.reduce((f, T) => (f[T] = !0, f), a);
+    }
+    return a;
+  }
+  function y(l, a) {
+    l.stopPropagation(), a.expanded = !a.expanded;
+  }
+  function C(l) {
+    return d("div", {
+      id: l.id,
+      class: b(l)
+    }, [d("div", {
+      class: i(l),
+      style: "display: flex;padding-right: 0.1rem;",
+      onClick: (a) => l.enable && y(a, l)
+    }, [t.shouldShowIcon(l) && d("i", {
+      class: t.iconClass(l)
+    }, null), d("span", null, [l.text]), d("i", {
+      class: "f-icon f-icon-arrow-chevron-down",
+      style: "display: inline-block;float: right;line-height: 1.25rem;margin-left: .25rem;margin-right: .25rem;"
+    }, null)]), s(l)]);
+  }
+  function r() {
+    o();
+  }
+  return {
+    renderToolbarDropdown: C,
+    clearAllDropDown: r
+  };
+}
+function rt() {
+  function e(n) {
+    const s = {
+      "f-icon": !0
+    };
+    if (n.icon) {
+      const o = n.icon.trim().split(" ");
+      o && o.length && o.reduce((b, i) => (b[i] = !0, b), s);
+    }
+    return s;
+  }
+  function t(n) {
+    return !!(n.icon && n.icon.trim());
+  }
+  return { iconClass: e, shouldShowIcon: t };
+}
+const {
+  buildResponseToolbarItems: fe
+} = Ie(), Oe = /* @__PURE__ */ L({
+  name: "FResponseToolbar",
+  props: nt,
+  emits: ["Click"],
+  setup(e) {
+    const t = j(fe(e.items)), n = j(), s = j(), o = j(e.alignment), b = {
+      id: "__more_buttons__",
+      text: "More"
+    }, i = j(new oe(b)), y = rt(), C = g(() => i.value.children.length > 0), r = g(() => ({
+      "f-toolbar": !0,
+      "f-response-toolbar": !0,
+      "position-relative": !0
+    })), l = g(() => ({
+      "d-flex": !0,
       "flex-nowrap": !0,
-      "nav-fill": t.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"
-    })), se = p(() => ({
+      "justify-content-end": o.value === "right",
+      "justify-content-start": o.value === "left"
+    })), {
+      renderToolbarDropdown: a,
+      clearAllDropDown: v
+    } = lt(e, y);
+    function f() {
+      t.value.filter((m) => m.children && m.children.length > 0).forEach((m) => {
+        m.expanded = !1;
+      }), i.value.expanded = !1, v();
+    }
+    function T(m) {
+      const w = {
+        "f-icon": !0
+      };
+      if (m.icon) {
+        const S = m.icon.trim().split(" ");
+        S && S.length && S.reduce((B, P) => (B[P] = !0, B), w);
+      }
+      return w;
+    }
+    function p(m) {
+      return !!(m.icon && m.icon.trim());
+    }
+    function c(m) {
+      const w = {
+        btn: !0,
+        "f-rt-btn": !0,
+        "f-btn-ml": o.value === "right",
+        "f-btn-mr": o.value === "left",
+        "btn-icontext": !!(m.icon && m.icon.trim())
+      };
+      if (m.class) {
+        const S = m.class.split(" ");
+        S && S.length && S.reduce((B, P) => (B[P] = !0, B), w);
+      }
+      return w;
+    }
+    function u(m) {
+      return d("button", {
+        type: "button",
+        class: c(m),
+        id: m.id,
+        disabled: !m.enable,
+        onClick: (w) => m.onClick(w, m.id)
+      }, [p(m) && d("i", {
+        class: T(m)
+      }, null), m.text]);
+    }
+    const h = /* @__PURE__ */ new Map(), x = [];
+    function D(m) {
+      const w = s.value;
+      let S = m;
+      const B = Array.from(w.children), P = B[B.length - 1].id === "__more_buttons__" ? B[B.length - 1] : null;
+      if (P) {
+        const I = P.computedStyleMap().get("margin-left"), A = P.computedStyleMap().get("margin-right"), W = (I ? I.value : 0) + P.getBoundingClientRect().width + (A ? A.value : 0);
+        S -= W;
+      }
+      const E = B.filter((I) => I.id !== "__more_buttons__");
+      for (const I of E) {
+        const A = I.computedStyleMap().get("margin-left"), W = I.computedStyleMap().get("margin-right"), F = (A ? A.value : 0) + I.getBoundingClientRect().width + (W ? W.value : 0);
+        S < F ? (h.set(I.id, !0), x.push({
+          id: I.id,
+          width: F
+        })) : S -= F;
+      }
+      if (x.length)
+        for (let I = x.length - 1; I >= 0; I--) {
+          const A = x[I].width;
+          if (S >= A)
+            S -= A, h.delete(x[I].id), x.pop();
+          else
+            break;
+        }
+      const V = Object.assign({}, i.value);
+      V.children = [];
+      const N = new oe(V), G = t.value.reduce((I, A) => (h.has(A.id) && N.children.push(A), A.visible = !h.has(A.id), I.push(A), I), []);
+      i.value = N, t.value = G;
+    }
+    const R = new ResizeObserver((m) => {
+      if (m.length) {
+        const S = m[0].contentRect.width, P = s.value.getBoundingClientRect().width;
+        (S < P || x.length) && D(S);
+      }
+    });
+    return _(() => {
+      const m = n.value;
+      R.observe(m), document.body.addEventListener("click", f);
+    }), ae(() => {
+      R.disconnect(), document.body.removeEventListener("click", f);
+    }), z(() => e.items, () => {
+      t.value = fe(e.items);
+    }), () => d("div", {
+      class: r.value
+    }, [d("div", {
+      ref: n,
+      class: l.value
+    }, [d("div", {
+      ref: s,
+      class: "d-inline-block f-response-content",
+      style: "white-space: nowrap;"
+    }, [t.value.filter((m) => m.visible).map((m) => m.children && m.children.length > 0 ? a(m) : u(m)), C.value && a(i.value)])])]);
+  }
+}), ne = /* @__PURE__ */ L({
+  name: "FTabs",
+  props: ie,
+  emits: ["tabChange", "tabRemove"],
+  setup(e, t) {
+    const n = j(e.tabType), s = U(), o = U(), b = U(), i = me(e, t, o), {
+      activeId: y,
+      changeTitleStyle: C,
+      tabPages: r,
+      addTab: l,
+      updateTab: a,
+      selectTabByTabId: v,
+      toolbarItems: f
+    } = i, T = je(e, b, i), p = Se(e, o, T, i), {
+      previousButtonClass: c,
+      nextButtonClass: u,
+      nextButtonGroupClass: h,
+      scrollTab: x,
+      updateNavigationLayout: D
+    } = p, R = xe(e, i), {
+      hideDropDown: m
+    } = R, w = Ce(e, o, p, T, i), S = w, B = we(e, o, p, T, i), P = /* @__PURE__ */ new Map([["default", w], ["one-page", S], ["pills", B]]);
+    g(() => {
+      const k = r.value.find(($) => $.props.id === y.value);
+      return k == null ? void 0 : k.slots;
+    });
+    const E = g(() => {
+      const k = r.value.find((O) => O.props.id === y.value);
+      return (k == null ? void 0 : k.props.toolbarPosition) === "inHead";
+    });
+    be("tabs", {
+      activeId: y,
+      addTab: l,
+      updateTab: a,
+      tabPages: r,
+      tabType: n
+    });
+    const V = g(() => e.fill || e.tabType === "fill"), N = g(() => e.tabType === "pills"), G = g(() => ({
+      "farris-tabs-header": !0,
+      "farris-tabs-inHead": E.value,
+      "farris-tabs-inContent": !E.value,
+      "farris-tabs-nav-fill": V.value,
+      "farris-tabs-nav-pills": N.value
+    })), I = g(() => ({
+      width: E.value && e.titleWidth ? `${e.titleWidth}%` : ""
+    })), A = g(() => ({
       "farris-tabs": !0,
-      "flex-column": t.position === "top",
-      "flex-column-reverse": t.position === "bottom",
-      "flex-row": t.position === "left",
-      "flex-row-reverse": t.position === "right"
-    })), ae = (e, l) => {
-      I(e, l), S(() => {
-        x();
-      });
-    };
-    return M(() => {
-      S(() => {
-        E(i), window.addEventListener("click", (e) => {
-          var l;
-          h.value || (l = o.value) != null && l.contains(e.target) || (h.value = !0);
-        }), window.addEventListener("resize", (e) => {
-          x();
-        });
+      "flex-column": e.position === "top",
+      "flex-column-reverse": e.position === "bottom",
+      "flex-row": e.position === "left",
+      "flex-row-reverse": e.position === "right",
+      "one-page": e.tabType === "one-page"
+    }));
+    _(() => {
+      r.value.length && (y.value = e.activeId || r.value[0].props.id, v(y.value)), q(() => {
+        D();
+      }), C(o), window.addEventListener("click", (k) => {
+        var $;
+        m.value || ($ = s.value) != null && $.contains(k.target) || (m.value = !0);
+      }), window.addEventListener("resize", () => {
+        D();
       });
-    }), () => {
-      var e, l, n, r;
-      return s(oe, null, [s("div", {
-        class: se.value,
-        ref: o
-      }, [s("div", {
-        class: $.value
-      }, [s("div", {
-        class: "farris-tabs-title scroll-tabs",
-        style: G.value
-      }, [s("button", {
+    });
+    function W() {
+      return d("button", {
         title: "left-arrow-button",
         type: "button",
-        class: J.value,
+        class: c.value,
         onClick: () => {
-          W(0, -1);
+          x(0, -1);
         }
-      }, null), s("div", {
-        class: te.value,
-        style: "width:100%"
-      }, [s("ul", {
-        class: le.value,
-        ref: i
-      }, [a.value.map((d) => {
-        const v = d.props, L = d.slots.title;
-        return s("li", {
-          class: k(v),
-          style: y(v)
-        }, [s("a", {
-          class: U(v),
-          onClick: (C) => ae(C, v.id)
-        }, [L ? L() : s("span", {
-          class: q(v),
-          title: v.title
-        }, [v.title]), v.removeable && s("span", {
-          class: "st-drop-close",
-          onClick: (C) => R(C, v.id)
-        }, [s("i", {
-          class: "f-icon f-icon-close"
-        }, null)])])]);
-      })])]), s("div", {
-        class: K.value
-      }, [s("button", {
+      }, null);
+    }
+    function F() {
+      return d("button", {
         title: "right-arrow-button",
         type: "button",
-        class: X.value,
-        onClick: () => {
-          W(0, 1);
-        }
-      }, null), s("button", {
-        title: "toggle-button",
-        class: "btn dropdown-toggle-split dropdown-toggle",
+        class: u.value,
         onClick: () => {
-          h.value = !1;
+          x(0, 1);
         }
-      }, null), s("div", {
-        class: Q.value
-      }, [t.searchBoxVisible && s("div", {
-        onClick: (d) => N(d),
-        class: "pb-1 tabs-li-absolute"
-      }, [ie(s("input", {
-        title: "search-box",
-        type: "text",
-        class: "form-control k-textbox",
-        "onUpdate:modelValue": (d) => f.value = d
-      }, null), [[ue, f.value]]), s("span", {
-        class: "f-icon f-icon-page-title-query tabs-icon-search"
-      }, null)]), A.value.length ? s("ul", {
-        class: "tab-dropdown-menu--items",
-        style: Y()
-      }, [A.value.map((d) => s("li", {
-        class: Z(d),
-        onClick: (v) => ee(v, d.props)
-      }, [d.props.removeable && s("span", {
-        class: "float-right st-drop-close",
-        onClick: (v) => R(v, d.props.id, !0)
-      }, [s("i", {
-        class: "f-icon f-icon-close"
-      }, null)]), s("a", {
-        class: "dropdown-title"
-      }, [d.props.title])]))]) : s("div", {
-        class: "dropdown-no-data"
-      }, [re("\u6CA1\u6709\u76F8\u5173\u6570\u636E")])])])]), T.value && s("div", {
-        class: "farris-tabs-toolbar"
-      }, [(l = (e = T.value) == null ? void 0 : e.toolbarExtra) == null ? void 0 : l.call(e)])]), s("div", {
-        class: "farris-tabs-content"
-      }, [(r = (n = m.slots).default) == null ? void 0 : r.call(n)])])]);
+      }, null);
+    }
+    const {
+      renderMorePagesButtton: Z
+    } = Te(e, R, p, i), K = (k) => {
+      t.emit("Click", k);
     };
+    function ee() {
+      return !!f.value.length && d(Oe, {
+        items: f.value,
+        onClick: K
+      }, null);
+    }
+    const J = P.get(e.tabType) || P.get("default");
+    function te() {
+      var k, $, O, H;
+      return d("div", {
+        class: G.value
+      }, [d("div", {
+        class: "farris-tabs-header-pre"
+      }, [($ = (k = t.slots).headerPrefix) == null ? void 0 : $.call(k)]), d("div", {
+        class: "farris-tabs-title scroll-tabs",
+        style: I.value
+      }, [W(), J && J(), d("div", {
+        class: h.value
+      }, [F(), Z()])]), ee(), d("div", {
+        class: "farris-tabs-header-post"
+      }, [(H = (O = t.slots).headerSuffix) == null ? void 0 : H.call(O)])]);
+    }
+    function Q() {
+      var k, $;
+      return d("div", {
+        class: "farris-tabs-content",
+        ref: b
+      }, [($ = (k = t.slots).default) == null ? void 0 : $.call(k)]);
+    }
+    return () => d("div", {
+      class: A.value,
+      ref: s
+    }, [te(), Q()]);
+  }
+}), it = "https://json-schema.org/draft/2020-12/schema", ct = "https://farris-design.gitee.io/accordion-item.schema.json", ut = "AccordionItem", dt = "A Farris Container Component", ft = "object", pt = {
+  id: {
+    description: "The unique identifier for a Accordion Item",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Accordion Item component",
+    type: "string"
+  },
+  contents: {
+    description: "",
+    type: "array",
+    default: []
+  },
+  title: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  toolbar: {
+    description: "",
+    type: "object"
   }
-}), he = {
+}, bt = [
+  "id",
+  "type",
+  "contents"
+], vt = {
+  $schema: it,
+  $id: ct,
+  title: ut,
+  description: dt,
+  type: ft,
+  properties: pt,
+  required: bt
+}, ce = {
   tabWidth: { type: Number, default: -1 },
   id: { type: String, default: "" },
   customTitleClass: { type: String, default: "" },
@@ -331,55 +1121,518 @@ const V = H({
   disabled: { type: Boolean, default: !1 },
   removeable: { type: Boolean, default: !1 },
   show: { type: Boolean, default: !0 },
-  toolbar: { type: Object },
+  toolbar: { type: Object, default: {} },
   toolbarPosition: { type: String, default: "inContent" }
-}, F = H({
-  name: "FTabPage",
-  props: he,
+}, pe = re(ce, vt, ye), ht = /* @__PURE__ */ new Map([
+  ["appearance", ge],
+  ["expanded", "expandStatus"],
+  ["title", (e, t) => ({ mainTitle: t })]
+]), gt = "https://json-schema.org/draft/2020-12/schema", yt = "https://farris-design.gitee.io/section.schema.json", mt = "section", Ct = "A Farris Container Component", wt = "object", Tt = {
+  id: {
+    description: "The unique identifier for a Section",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Section component",
+    type: "string",
+    default: "section"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  contentClass: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  contents: {
+    description: "",
+    type: "array",
+    default: []
+  },
+  enableAccordion: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  enableCollapse: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  enableMaximize: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  expanded: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  fill: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  headerClass: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  size: {
+    description: "",
+    type: "object",
+    properties: {
+      width: {
+        type: "number"
+      },
+      height: {
+        type: "number"
+      }
+    },
+    default: null
+  },
+  subTitle: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  title: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  titleClass: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  toolbarClass: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  }
+}, St = [
+  "id",
+  "type",
+  "contents"
+], xt = {
+  $schema: gt,
+  $id: yt,
+  title: mt,
+  description: Ct,
+  type: wt,
+  properties: Tt,
+  required: St
+}, De = {
+  clickThrottleTime: { type: Number, default: 350 },
+  contentClass: { type: String, default: "" },
+  context: { type: Object },
+  customClass: { type: String, default: "" },
+  enableAccordion: { type: Boolean, default: !1 },
+  enableCollapse: { type: Boolean, default: !0 },
+  enableMaximize: { type: Boolean, default: !1 },
+  expandStatus: { type: Boolean, default: !0 },
+  fill: { type: Boolean, default: !1 },
+  headerClass: { type: String, default: "" },
+  index: { type: Number },
+  maxStatus: { type: Boolean, default: !1 },
+  mainTitle: { type: String, default: "" },
+  showHeader: { type: Boolean, default: !0 },
+  showToolbarMoreButton: { type: Boolean, default: !0 },
+  subTitle: { type: String, default: "" },
+  toolbarPosition: { type: String, default: "" },
+  toolbarButtons: { type: Array, default: [] },
+  toolbar: { type: Object, default: {} }
+};
+re(De, xt, ht);
+const Me = /* @__PURE__ */ L({
+  name: "FSection",
+  props: De,
   emits: [],
-  setup(t, m) {
-    const o = de("tabs");
-    ce();
-    const i = w(!0), b = {
-      slots: m.slots,
-      props: t
-    };
-    M(() => {
-      const a = o == null ? void 0 : o.tabs.value.findIndex((c) => c.props.id === t.id);
-      !a || a === -1 ? o == null || o.addTab(b) : a > -1 && (i.value = !1, console.warn(`\u5DF2\u7ECF\u5B58\u5728id\u4E3A${t.id}\u7684\u9875\u7B7E\u5566`));
-    }), fe(() => {
+  setup(e, t) {
+    const n = j(e.customClass), s = g(() => e.showHeader && (!!e.mainTitle || !!e.subTitle)), o = g(() => !!e.mainTitle || !!e.subTitle), b = g(() => !!e.subTitle);
+    g(() => !1), g(() => !1), g(() => !1), g(() => !1), j([]);
+    const i = g(() => {
+      const f = {
+        "f-section": !0
+      };
+      return n.value && n.value.split(" ").reduce((T, p) => (T[p] = !0, T), f), f;
+    }), y = g(() => {
+      const f = e.headerClass.split(" "), T = {
+        "f-section-header": !0
+      };
+      return f.reduce((p, c) => (p[c] = !0, p), T), T;
     });
-    function h() {
-      return {
-        display: (t == null ? void 0 : t.id) === (o == null ? void 0 : o.activeId.value) ? "" : "none"
+    g(() => ({
+      "f-section-extend": !0
+    }));
+    const C = g(() => {
+      const f = e.contentClass.split(" "), T = {
+        "f-section-content": !0
       };
+      return f.reduce((p, c) => (p[c] = !0, p), T), T;
+    }), r = j(e.mainTitle), l = j(e.subTitle);
+    function a() {
+      return s.value && d("div", {
+        class: y.value
+      }, [o.value && d("div", {
+        class: "f-title"
+      }, [d("h4", {
+        class: "f-title-text"
+      }, [r.value]), b.value && d("span", null, [l.value])])]);
     }
-    return ve(() => t, (a) => {
-      o == null || o.updateTab({
+    function v() {
+      return d("div", {
+        class: C.value
+      }, [t.slots.default && t.slots.default()]);
+    }
+    return () => d("div", {
+      class: i.value
+    }, [a(), v()]);
+  }
+});
+function jt(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ve(e);
+}
+const se = /* @__PURE__ */ L({
+  name: "FTabPage",
+  props: ce,
+  emits: [],
+  setup(e, t) {
+    const n = Y("tabs"), s = j(!0), o = {
+      slots: t.slots,
+      props: e
+    }, b = j((n == null ? void 0 : n.tabType.value) || "default");
+    _(() => {
+      const a = n == null ? void 0 : n.tabPages.value.findIndex((v) => v.props.id === e.id);
+      !a || a === -1 ? n == null || n.addTab(o) : a > -1 && (s.value = !1, console.warn(`已经存在id为${e.id}的页签啦`));
+    }), ae(() => {
+    });
+    const i = g(() => ({
+      display: (e == null ? void 0 : e.id) === (n == null ? void 0 : n.activeId.value) ? "" : "none"
+    }));
+    z(() => e, (a) => {
+      n == null || n.updateTab({
         props: a,
-        slots: m.slots
+        slots: t.slots
       });
     }, {
       immediate: !0,
       deep: !0
-    }), () => {
-      var c, T;
-      const a = (T = (c = m.slots).default) == null ? void 0 : T.call(c);
-      return i.value ? s("div", {
+    });
+    function y() {
+      var v, f;
+      const a = (f = (v = t.slots).default) == null ? void 0 : f.call(v);
+      return d(Me, {
+        "main-title": e.title,
+        class: "farris-tab-page"
+      }, jt(a) ? a : {
+        default: () => [a]
+      });
+    }
+    function C() {
+      var v, f;
+      const a = (f = (v = t.slots).default) == null ? void 0 : f.call(v);
+      return d("div", {
         class: "farris-tab-page",
-        style: h()
-      }, [a]) : null;
+        style: i.value
+      }, [a]);
+    }
+    const l = (/* @__PURE__ */ new Map([["default", C], ["one-page", y]])).get(b.value) || C;
+    return () => s.value ? l() : null;
+  }
+});
+function ke(e, t, n) {
+  var h;
+  const s = n == null ? void 0 : n.checkIsInFixedContextRules(), o = n && n.getStyles && n.getStyles() || "";
+  function b() {
+    return !(t.schema.componentType || s);
+  }
+  function i() {
+    return !1;
+  }
+  function y() {
+    return !(t.schema.componentType || s);
+  }
+  function C() {
+    return !!s;
+  }
+  function r(x) {
+    if (!x)
+      return null;
+    if (x.schema.type === "Component")
+      return x;
+    const D = r(x.parent);
+    return D || null;
+  }
+  function l(x, D, R) {
+    return !!n && n.canAccepts();
+  }
+  function a() {
+    return t.schema.label || t.schema.title || t.schema.name;
+  }
+  function v() {
+  }
+  function f(x, D) {
+    D && (n == null || n.onAcceptMovedChildElement(D));
+  }
+  function T(x, D) {
+    const R = String(x.getAttribute("data-controltype"));
+    return Ne(R);
+  }
+  function p(x) {
+    return x.contents ? x.contents.length : -1;
+  }
+  function c(x) {
+  }
+  const u = {
+    canMove: b(),
+    canSelectParent: i(),
+    canDelete: y(),
+    canNested: !C(),
+    contents: t.schema.contents,
+    elementRef: e,
+    parent: (h = t.parent) == null ? void 0 : h.componentInstance.value,
+    schema: t.schema,
+    styles: o,
+    canAccepts: l,
+    getBelongedComponentInstance: r,
+    getDraggingDisplayText: a,
+    getDragScopeElement: v,
+    onAcceptMovedChildElement: f,
+    onAcceptNewChildElement: T,
+    onAddNewChildElement: p,
+    onChildElementMovedOut: c,
+    triggerBelongedComponentToMoveWhenMoved: !!n && n.triggerBelongedComponentToMoveWhenMoved
+  };
+  return j(u);
+}
+const Bt = /* @__PURE__ */ L({
+  name: "FTabsDesign",
+  props: ie,
+  emits: ["tabChange", "tabRemove"],
+  setup(e, t) {
+    const n = j(), s = Y("design-item-context"), o = ke(n, s), b = j(e.tabType), i = U(), y = U(), C = me(e, t, i), {
+      activeId: r,
+      changeTitleStyle: l,
+      tabPages: a,
+      addTab: v,
+      updateTab: f,
+      selectTabByTabId: T,
+      toolbarItems: p
+    } = C, c = je(e, y, C), u = Se(e, i, c, C), {
+      previousButtonClass: h,
+      nextButtonClass: x,
+      nextButtonGroupClass: D,
+      scrollTab: R,
+      updateNavigationLayout: m
+    } = u, w = xe(e, C), {
+      hideDropDown: S
+    } = w, B = Ce(e, i, u, c, C), P = B, E = we(e, i, u, c, C), V = /* @__PURE__ */ new Map([["default", B], ["one-page", P], ["pills", E]]);
+    g(() => {
+      const O = a.value.find((H) => H.props.id === r.value);
+      return O == null ? void 0 : O.slots;
+    });
+    const N = g(() => {
+      const O = a.value.find((X) => X.props.id === r.value);
+      return (O == null ? void 0 : O.props.toolbarPosition) === "inHead";
+    });
+    be("tabs", {
+      activeId: r,
+      addTab: v,
+      updateTab: f,
+      tabPages: a,
+      tabType: b
+    });
+    const G = g(() => e.fill || e.tabType === "fill"), I = g(() => e.tabType === "pills"), A = g(() => ({
+      "farris-tabs-header": !0,
+      "farris-tabs-inHead": N.value,
+      "farris-tabs-inContent": !N.value,
+      "farris-tabs-nav-fill": G.value,
+      "farris-tabs-nav-pills": I.value
+    })), W = g(() => ({
+      width: N.value && e.titleWidth ? `${e.titleWidth}%` : ""
+    })), F = g(() => ({
+      "farris-tabs": !0,
+      "flex-column": e.position === "top",
+      "flex-column-reverse": e.position === "bottom",
+      "flex-row": e.position === "left",
+      "flex-row-reverse": e.position === "right",
+      "one-page": e.tabType === "one-page"
+    }));
+    _(() => {
+      a.value.length && (r.value = e.activeId || a.value[0].props.id, T(r.value)), q(() => {
+        m();
+      }), l(i), window.addEventListener("click", (O) => {
+        var H;
+        S.value || (H = n.value) != null && H.contains(O.target) || (S.value = !0);
+      }), window.addEventListener("resize", () => {
+        m();
+      }), n.value.componentInstance = o;
+    });
+    function Z() {
+      return d("button", {
+        title: "left-arrow-button",
+        type: "button",
+        class: h.value,
+        onClick: () => {
+          R(0, -1);
+        }
+      }, null);
+    }
+    function K() {
+      return d("button", {
+        title: "right-arrow-button",
+        type: "button",
+        class: x.value,
+        onClick: () => {
+          R(0, 1);
+        }
+      }, null);
+    }
+    const {
+      renderMorePagesButtton: ee
+    } = Te(e, w, u, C), J = (O) => {
+      t.emit("Click", O);
     };
+    function te() {
+      return !!p.value.length && d(Oe, {
+        items: p.value,
+        onClick: J
+      }, null);
+    }
+    const Q = V.get(e.tabType) || V.get("default");
+    function k() {
+      var O, H, X, ue;
+      return d("div", {
+        class: A.value
+      }, [d("div", {
+        class: "farris-tabs-header-pre"
+      }, [(H = (O = t.slots).headerPrefix) == null ? void 0 : H.call(O)]), d("div", {
+        class: "farris-tabs-title scroll-tabs",
+        style: W.value
+      }, [Z(), Q && Q(), d("div", {
+        class: D.value
+      }, [K(), ee()])]), te(), d("div", {
+        class: "farris-tabs-header-post"
+      }, [(ue = (X = t.slots).headerSuffix) == null ? void 0 : ue.call(X)])]);
+    }
+    function $() {
+      var O, H;
+      return d("div", {
+        class: "farris-tabs-content",
+        ref: y
+      }, [(H = (O = t.slots).default) == null ? void 0 : H.call(O)]);
+    }
+    return t.expose(o.value), () => d("div", {
+      class: F.value,
+      ref: n
+    }, [k(), $()]);
+  }
+});
+function It(e, t) {
+  let s = !0;
+  function o() {
+    return !!s;
+  }
+  function b() {
+    const y = e, C = y.appearance && y.appearance.class || "", r = C ? C.split(" ") : [], l = y.contents || [], a = l.length ? l[0] : null, v = a && a.appearance && a.appearance.class || "", f = v ? v.split(" ") : [], T = t, p = T && T.appearance && T.appearance.class || "", c = p ? p.split(" ") : [];
+    return r.includes("f-section-form") && (T == null ? void 0 : T.type) === "content-container" && f.includes("f-form-layout") || r.includes("f-section-tabs") && c.includes("f-struct-wrapper") && f.includes("f-component-tabs") || r.includes("f-section-grid") && c.includes("f-struct-wrapper") && (f.includes("f-component-grid") || f.includes("f-filter-container")) || r.includes("f-section-treegrid") && c.includes("f-struct-wrapper") && f.includes("f-component-treetable") || r.includes("f-section-oa-table") && c.includes("f-struct-wrapper") && f.includes("f-form-is-table") || r.includes("f-section-card-table") && c.includes("f-struct-wrapper") && f.includes("f-form-is-table") || r.includes("f-section-scheme") && a && a.type === "query-solution" || (r.includes("f-section-in-main") || r.includes("f-section-in-mainsubcard")) && c.includes("f-struct-wrapper") && a && a.type === "content-container" || (r.includes("f-section-in-main") || r.includes("f-section-in-mainsubcard")) && c.includes("f-struct-wrapper") && a && a.type === "file-upload-preview" ? (s = !1, !0) : a && (a.type === "approval-comments" || a.type === "approval-comments") ? (s = !1, !1) : r.includes("f-section-grid") && c.includes("f-struct-wrapper") && f.includes("f-component-appointment-calendar") ? (s = !1, !0) : !1;
+  }
+  function i(y) {
+  }
+  return { canAccepts: o, checkIsInFixedContextRules: b, onAcceptMovedChildElement: i, triggerBelongedComponentToMoveWhenMoved: !1 };
+}
+function Ot(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ve(e);
+}
+const Dt = /* @__PURE__ */ L({
+  name: "FTabPageDesign",
+  props: ce,
+  emits: [],
+  setup(e, t) {
+    var p;
+    const n = j(), s = Y("design-item-context"), o = It(s.schema, (p = s.parent) == null ? void 0 : p.schema), b = ke(n, s, o);
+    b.value.canNested = !1, t.expose(b.value);
+    const i = Y("tabs"), y = j(!0), C = {
+      slots: t.slots,
+      props: e
+    }, r = j((i == null ? void 0 : i.tabType.value) || "default");
+    _(() => {
+      n.value.componentInstance = b;
+      const c = i == null ? void 0 : i.tabPages.value.findIndex((u) => u.props.id === e.id);
+      !c || c === -1 ? i == null || i.addTab(C) : c > -1 && (y.value = !1, console.warn(`已经存在id为${e.id}的页签啦`));
+    }), ae(() => {
+    });
+    const l = g(() => ({
+      display: (e == null ? void 0 : e.id) === (i == null ? void 0 : i.activeId.value) ? "" : "none"
+    }));
+    z(() => e, (c) => {
+      i == null || i.updateTab({
+        props: c,
+        slots: t.slots
+      });
+    }, {
+      immediate: !0,
+      deep: !0
+    });
+    function a() {
+      var u, h;
+      const c = (h = (u = t.slots).default) == null ? void 0 : h.call(u);
+      return d(Me, {
+        "main-title": e.title,
+        class: "farris-tab-page"
+      }, Ot(c) ? c : {
+        default: () => [c]
+      });
+    }
+    function v() {
+      var u, h;
+      const c = (h = (u = t.slots).default) == null ? void 0 : h.call(u);
+      return d("div", {
+        ref: n,
+        class: "farris-tab-page drag-container",
+        dragref: `${s.schema.id}-container`,
+        style: l.value
+      }, [c]);
+    }
+    const T = (/* @__PURE__ */ new Map([["default", v], ["one-page", a]])).get(r.value) || v;
+    return () => y.value ? T() : null;
   }
-}), ge = {
-  install(t) {
-    t.component(V.name, V), t.component(F.name, F);
+}), Pt = {
+  install(e) {
+    e.component(ne.name, ne), e.component(se.name, se);
+  },
+  register(e, t) {
+    e.tabs = ne, e["tab-page"] = se, t.tabs = de, t["tab-page"] = pe;
+  },
+  registerDesigner(e, t) {
+    e.tabs = Bt, e["tab-page"] = Dt, t.tabs = de, t["tab-page"] = pe;
   }
 };
 export {
-  F as TabPage,
-  V as Tabs,
-  ge as default,
-  he as tabPageProps,
-  pe as tabsProps
+  se as TabPage,
+  ne as Tabs,
+  Pt as default,
+  ce as tabPageProps,
+  pe as tabPagePropsResolver,
+  ie as tabsProps,
+  de as tabsPropsResolver
 };