@farris/ui-vue 1.8.0-alpha.0 → 1.8.0-beta.1

package/components/tabs/index.esm.js

@@ -1,13 +1,14 @@
-import { ref as S, computed as y, watch as R, nextTick as V, reactive as be, createVNode as u, withDirectives as Z, resolveDirective as pe, onMounted as N, vModelText as he, Fragment as me, defineComponent as ee, shallowRef as E, provide as ge, inject as ye, onUnmounted as Te, isVNode as we } from "vue";
-import { getCustomClass as Ce, isMobilePhone as Se } from "../common/index.esm.js";
-import xe from "../capsule/index.esm.js";
+import { ref as S, computed as y, watch as R, nextTick as V, reactive as be, createVNode as c, withDirectives as Z, resolveDirective as pe, onMounted as N, vModelText as he, Fragment as me, defineComponent as ee, shallowRef as E, provide as ge, inject as ye, onUnmounted as Te, isVNode as we } from "vue";
+import { FNotifyService as Ce } from "../notify/index.esm.js";
+import { getCustomClass as Se, isMobilePhone as xe } from "../common/index.esm.js";
+import Be from "../capsule/index.esm.js";
 import { LocaleService as $ } from "../locale/index.esm.js";
-import Be from "../response-toolbar/index.esm.js";
+import Ie from "../response-toolbar/index.esm.js";
 import "bignumber.js";
 import "lodash-es";
 import Q from "../section/index.esm.js";
-import { BaseControlProperty as Ie } from "../property-panel/index.esm.js";
-const Pe = {
+import { BaseControlProperty as Pe } from "../property-panel/index.esm.js";
+const Oe = {
   /** 标签页头部区域的展示类型 */
   tabType: { type: String, default: "default" },
   /** 标题自适应宽度 */
@@ -28,198 +29,217 @@ const Pe = {
   fill: { type: Boolean, default: !1 },
   justifyContent: { type: String, default: "left" },
   /** 控制是否可见 */
-  visible: { type: Boolean, default: !0 }
+  visible: { type: Boolean, default: !0 },
+  showHeader: { type: Boolean, default: !0 },
+  /** 标签页选中前事件 */
+  beforeTabSelect: { type: Function, default: null }
 };
-function Oe(e, t, l) {
-  const r = S([]), o = S(e.activeId || "");
-  let c = "";
-  const b = S(!0), d = S([]), v = S(!0), f = S(0), h = y(() => {
-    const s = r.value.find((a) => a.props.id === o.value);
-    return (s == null ? void 0 : s.props.toolbarPosition) === "inHead";
+function Ze() {
+  function e(t, l, r) {
+    const s = {};
+    return s.beforeTabSelect = (a) => l.call("beforeTabSelect", t, [a, t], r), s;
+  }
+  return {
+    resolve: e
+  };
+}
+function je(e, t, l) {
+  const r = new Ce(), s = S([]), a = S(e.activeId || "");
+  let u = "";
+  const b = S(!0), f = S([]), v = S(!0), h = S(0), C = y(() => {
+    const n = s.value.find((d) => d.props.id === a.value);
+    return (n == null ? void 0 : n.props.toolbarPosition) === "inHead";
   });
-  function C(s, n = !0) {
-    const a = s.findIndex((g) => g.props.show !== !1 && !g.props.disabled);
-    if (d.value = [], a !== -1) {
-      if (o.value = s[a].props.id, !n)
+  function T(n, o = !0) {
+    const d = n.findIndex((g) => g.props.show !== !1 && !g.props.disabled);
+    if (d !== -1) {
+      if (a.value = n[d].props.id, !o)
         return;
-      const g = s[a];
-      g && g.props.toolbar && g.props.toolbar.buttons && g.props.toolbar.buttons.length && (d.value = [...g.props.toolbar.buttons], v.value = g.props.toolbarVisible);
+      f.value = [];
+      const g = n[d];
+      g && g.props.toolbar && g.props.toolbar.buttons && g.props.toolbar.buttons.length && (f.value = [...g.props.toolbar.buttons], v.value = g.props.toolbarVisible);
     }
   }
-  function T(s) {
-    o.value = s;
-    const n = r.value.find((a) => a.props.id === s);
-    d.value = [], n && n.props.toolbar && n.props.toolbar.buttons && n.props.toolbar.buttons.length && (d.value = [...n.props.toolbar.buttons], v.value = n.props.toolbarVisible), t.emit("update:activeId", s), t.emit("tabChange", {
-      prevId: c,
-      nextId: o.value
+  function B(n) {
+    a.value = n;
+    const o = s.value.find((d) => d.props.id === n);
+    f.value = [], o && o.props.toolbar && o.props.toolbar.buttons && o.props.toolbar.buttons.length && (f.value = [...o.props.toolbar.buttons], v.value = o.props.toolbarVisible), t.emit("update:activeId", n), t.emit("tabChange", {
+      prevId: u,
+      nextId: a.value
     });
   }
-  function P(s) {
-    let n = -1;
-    if (!o.value) {
-      if (n = s.findIndex((a) => o.value === a.props.id && a.props.show !== !1 && !a.props.disabled), n > -1)
+  async function O(n) {
+    var H;
+    let o = -1;
+    if (!a.value) {
+      if (o = n.findIndex((L) => a.value === L.props.id && L.props.show !== !1 && !L.props.disabled), o > -1)
         return;
-      c = o.value;
+      u = a.value;
     }
-    C(s, !1), T(o.value);
+    T(n, !1);
+    const d = await ((H = e.beforeTabSelect) == null ? void 0 : H.call(e, {
+      prevId: u,
+      nextId: a.value
+    }));
+    (typeof d == "boolean" ? d : (d == null ? void 0 : d.canSelect) ?? !0) ? B(a.value) : (a.value = u, typeof d != "boolean" && d.message && (r == null || r.warning({ message: d.message, position: "top-center" })));
   }
-  function I(s) {
-    let n = !1;
-    if (s) {
-      const a = r.value.find((g) => g.props.id === s);
-      n = !a || a.props.show === !1 || a.props.disabled === !0;
+  function i(n) {
+    let o = !1;
+    if (n) {
+      const d = s.value.find((g) => g.props.id === n);
+      o = !d || d.props.show === !1 || d.props.disabled === !0;
     }
-    n ? P(r.value) : (o.value !== s && (c = o.value, o.value = s), T(o.value));
+    o ? O(s.value) : (a.value !== n && (u = a.value, a.value = n), B(a.value));
   }
-  R(() => e.activeId, (s, n) => {
-    s !== n && e.activeId !== o.value && I(s);
+  R(() => e.activeId, (n, o) => {
+    n !== o && e.activeId !== a.value && i(n);
   });
-  function i(s) {
-    var a;
+  function m(n) {
+    var d;
     if (e.autoTitleWidth)
       return;
-    const n = (a = s.value) == null ? void 0 : a.querySelectorAll(".st-tab-text");
-    if (!(!n || e.tabType === "pill"))
-      for (let g = 0; g < n.length; g++) {
-        const k = n[g].parentNode;
-        n[g].scrollWidth > k.offsetWidth ? n[g].classList.contains("farris-title-text-custom") || n[g].classList.add("farris-title-text-custom") : n[g].classList.remove("farris-title-text-custom");
+    const o = (d = n.value) == null ? void 0 : d.querySelectorAll(".st-tab-text");
+    if (!(!o || e.tabType === "pill"))
+      for (let g = 0; g < o.length; g++) {
+        const H = o[g].parentNode;
+        o[g].scrollWidth > H.offsetWidth ? o[g].classList.contains("farris-title-text-custom") || o[g].classList.add("farris-title-text-custom") : o[g].classList.remove("farris-title-text-custom");
       }
   }
-  const m = (s) => {
-    s.preventDefault(), s.stopPropagation();
+  const x = (n) => {
+    n.preventDefault(), n.stopPropagation();
   };
-  function x(s, n, a = !1) {
-    const g = r.value.findIndex((k) => k.props.id === n);
-    r.value = r.value.filter((k) => k.props.id !== n), o.value === n && (c = n, o.value = "", C(r.value)), m(s), V(() => {
-      f.value++, i(l), a && (b.value = !0), t.emit("tabRemove", {
+  function p(n, o, d = !1) {
+    const g = s.value.findIndex((H) => H.props.id === o);
+    s.value = s.value.filter((H) => H.props.id !== o), a.value === o && (u = o, a.value = "", T(s.value)), x(n), V(() => {
+      h.value++, m(l), d && (b.value = !0), t.emit("tabRemove", {
         removeIndex: g,
-        removeId: n,
-        activeId: o.value
+        removeId: o,
+        activeId: a.value
       });
     });
   }
-  function p(s, n = !0) {
-    o.value === s && (o.value = "", c = s, I("")), V(() => {
-      f.value++, n && (b.value = !0);
+  function P(n, o = !0) {
+    a.value === n && (a.value = "", u = n, i("")), V(() => {
+      h.value++, o && (b.value = !0);
     });
   }
-  let B;
-  function O(s) {
-    B = s;
+  let I;
+  function j(n) {
+    I = n;
   }
-  function j(s) {
-    o.value !== s && (c = o.value, T(s), B && B());
+  function A(n) {
+    a.value !== n && (u = a.value, B(n), I && I());
   }
-  function A(s) {
-    r.value.findIndex((a) => a.props.id === s.props.id) === -1 && r.value.push(s), f.value++;
+  function M(n) {
+    s.value.findIndex((d) => d.props.id === n.props.id) === -1 && s.value.push(n), h.value++;
   }
-  function M(s) {
-    r.value.findIndex((a) => a.props.id === s.props.id) !== -1 && (r.value.forEach((a) => {
-      a.props.id === s.props.id && (a = s);
-    }), s.props.id === o.value && h.value, V(() => {
-      f.value++, i(l);
+  function F(n) {
+    s.value.findIndex((d) => d.props.id === n.props.id) !== -1 && (s.value.forEach((d) => {
+      d.props.id === n.props.id && (d = n);
+    }), n.props.id === a.value && C.value, V(() => {
+      h.value++, m(l);
     }));
   }
   return {
-    activeId: o,
-    addTab: A,
-    changeTitleStyle: i,
-    removeTab: x,
-    selectTab: j,
-    tabPages: r,
-    updateTab: M,
-    toolbarItems: d,
-    needUpdateNavigationLayout: f,
-    checkActiveIdAndSelect: I,
-    toggleShowTab: p,
-    hasInHeadClass: h,
-    setScrollToSelectedTabFunction: O,
+    activeId: a,
+    addTab: M,
+    changeTitleStyle: m,
+    removeTab: p,
+    selectTab: A,
+    tabPages: s,
+    updateTab: F,
+    toolbarItems: f,
+    needUpdateNavigationLayout: h,
+    checkActiveIdAndSelect: i,
+    toggleShowTab: P,
+    hasInHeadClass: C,
+    setScrollToSelectedTabFunction: j,
     toolbarVisible: v
   };
 }
-function je(e, t, l, r, o) {
+function He(e, t, l, r, s) {
   const {
-    activeId: c,
-    removeTab: b,
-    selectTab: d
-  } = o, v = y(() => {
+    activeId: a,
+    removeTab: u,
+    selectTab: b
+  } = s, f = y(() => {
     const p = {
       "st-tab-text": !0,
       "text-truncate": e.tabType === "pill" && !e.autoTitleWidth,
       "farris-title-auto": e.autoTitleWidth
     };
-    return Ce(p, t.customTitleClass);
-  }), f = y(() => ({
+    return Se(p, t.customTitleClass);
+  }), v = y(() => ({
     "nav-item": !0,
     "d-none": t.show !== void 0 ? !t.show : !1,
-    "f-state-active": t.id === c.value,
+    "f-state-active": t.id === a.value,
     "f-state-disabled": t.disabled
   })), h = y(() => ({
     width: `${t.tabWidth}px`
   })), C = y(() => ({
     "nav-link": !0,
     "tabs-text-truncate": !0,
-    active: t.id === c.value,
+    active: t.id === a.value,
     disabled: t.disabled
   })), T = be({
     content: t.title,
     overflowShown: !0
   });
-  function P() {
-    return e.tabType !== "pill" && !e.autoTitleWidth ? Z(u("span", {
-      class: v.value,
+  function B() {
+    return e.tabType !== "pill" && !e.autoTitleWidth ? Z(c("span", {
+      class: f.value,
       "data-tabid": t.id
-    }, [t.title]), [[pe("tooltip"), T]]) : u("span", {
-      class: v.value,
+    }, [t.title]), [[pe("tooltip"), T]]) : c("span", {
+      class: f.value,
       "data-tabid": t.id,
       title: t.title
     }, [t.title]);
   }
-  const I = S(t.removeable);
+  const O = S(t.removeable);
   function i() {
-    return I.value ? u("span", {
+    return O.value ? c("span", {
       class: "st-drop-close",
-      onClick: (p) => b(p, t.id)
-    }, [u("i", {
+      onClick: (p) => u(p, t.id)
+    }, [c("i", {
       class: "f-icon f-icon-close"
     }, null)]) : "";
   }
   function m(p) {
-    d(t.id), e.tabType === "one-page" && r.scrollToByPaggId(t.id);
+    b(t.id), e.tabType === "one-page" && r.scrollToByPaggId(t.id);
   }
   function x() {
-    return l.slots.title ? u("a", {
+    return l.slots.title ? c("a", {
       class: C.value,
       onClick: m,
       id: `${t.id}-design-item`
-    }, [l.slots.title(l), i()]) : t.titleRenderFunction ? u("a", {
+    }, [l.slots.title(l), i()]) : t.titleRenderFunction ? c("a", {
       class: C.value,
       onClick: m,
       id: `${t.id}-design-item`
-    }, [t.titleRenderFunction(), i()]) : u("a", {
+    }, [t.titleRenderFunction(), i()]) : c("a", {
       class: C.value,
       onClick: m,
       id: `${t.id}-design-item`
-    }, [P(), i()]);
+    }, [B(), i()]);
   }
-  return u("li", {
-    class: f.value,
+  return c("li", {
+    class: v.value,
     style: h.value
   }, [x()]);
 }
-function He(e, t, l, r, o) {
+function ke(e, t, l, r, s) {
   const {
-    shouldShowNavigationButtons: c
+    shouldShowNavigationButtons: a
   } = l, {
-    tabPages: b
-  } = o, d = y(() => ({
+    tabPages: u
+  } = s, b = y(() => ({
     spacer: !0,
     "f-utils-fill": !0,
-    "spacer-sides-dropdown": c.value
-  })), v = y(() => ({
+    "spacer-sides-dropdown": a.value
+  })), f = y(() => ({
     width: "100%",
     "justify-content": e.justifyContent
-  })), f = y(() => ({
+  })), v = y(() => ({
     nav: !0,
     "farris-nav-tabs": !0,
     "flex-nowrap": !0,
@@ -228,22 +248,22 @@ function He(e, t, l, r, o) {
     "flex-row": e.position === "top" || e.position === "bottom",
     "flex-column": e.position === "left" || e.position === "right"
   }));
-  return () => u("div", {
-    class: d.value,
-    style: v.value
-  }, [u("ul", {
-    class: f.value,
+  return () => c("div", {
+    class: b.value,
+    style: f.value
+  }, [c("ul", {
+    class: v.value,
     ref: t
-  }, [b.value.map((h) => je(e, h.props, h, r, o))])]);
+  }, [u.value.map((h) => He(e, h.props, h, r, s))])]);
 }
-function Me(e, t, l, r, o) {
-  const c = S(), {
-    shouldShowNavigationButtons: b
+function Me(e, t, l, r, s) {
+  const a = S(), {
+    shouldShowNavigationButtons: u
   } = l, {
-    activeId: d,
-    tabPages: v,
-    selectTab: f
-  } = o, h = S(d.value), C = y(() => v.value.map((i) => ({
+    activeId: b,
+    tabPages: f,
+    selectTab: v
+  } = s, h = S(b.value), C = y(() => f.value.map((i) => ({
     name: i.props.title,
     value: i.props.id,
     show: i.props.show,
@@ -251,70 +271,70 @@ function Me(e, t, l, r, o) {
   }))), T = y(() => ({
     spacer: !0,
     "f-utils-fill": !0,
-    "spacer-sides-dropdown": b.value
-  })), P = y(() => ({
+    "spacer-sides-dropdown": u.value
+  })), B = y(() => ({
     width: "100%",
     display: "flex",
     "justify-content": e.justifyContent
   }));
   N(() => {
-    c.value && (t.value = c.value.$el);
+    a.value && (t.value = a.value.$el);
   });
-  function I(i) {
-    f(i);
+  function O(i) {
+    v(i);
   }
-  return R(() => d.value, (i) => {
+  return R(() => b.value, (i) => {
     i !== h.value && (h.value = i);
   }, {
     immediate: !0
-  }), () => u("div", {
+  }), () => c("div", {
     class: T.value,
-    style: P.value
-  }, [u(xe, {
+    style: B.value
+  }, [c(Be, {
     items: C.value,
     modelValue: h.value,
     "onUpdate:modelValue": (i) => h.value = i,
-    onChange: I,
-    ref: c
+    onChange: O,
+    ref: a
   }, null)]);
 }
-function ke(e, t, l, r) {
-  const o = S(), {
-    activeId: c,
-    removeTab: b,
-    tabPages: d,
-    selectTab: v
+function Re(e, t, l, r) {
+  const s = S(), {
+    activeId: a,
+    removeTab: u,
+    tabPages: b,
+    selectTab: f
   } = r, {
-    hideDropDown: f,
+    hideDropDown: v,
     searchTabText: h
   } = t, C = 600;
   let T = null;
-  const P = y(() => {
-    var a, g;
+  const B = y(() => {
+    var o, d;
     let n = [];
-    return e.searchBoxVisible ? n = (a = d.value) == null ? void 0 : a.filter((k) => k.props.title.includes(h.value)) : n = (g = d.value) == null ? void 0 : g.slice(), n;
-  }), I = y(() => ({
+    return e.searchBoxVisible ? n = (o = b.value) == null ? void 0 : o.filter((g) => g.props.title.includes(h.value)) : n = (d = b.value) == null ? void 0 : d.slice(), n;
+  }), O = y(() => ({
     "dropdown-menu": !0,
     "tabs-pt28": e.searchBoxVisible,
     // 未看到样式定义
-    show: !f.value,
-    "d-none": f.value
+    show: !v.value,
+    "d-none": v.value
   }));
   let i;
   function m(n) {
     i = n;
   }
-  R(f, (n) => {
+  R(v, (n) => {
     if (i.value)
       if (n)
-        o.value.style.width = null;
+        s.value.style.width = null;
       else {
-        const a = i.value.querySelector(".farris-tabs-header"), g = i.value.clientHeight - a.clientHeight - 20, F = a.querySelector(".farris-tabs-title").clientWidth - 20;
-        o.value.style.maxWidth = F + "px", o.value.style.maxHeight = g + "px", V(() => {
+        const o = i.value.querySelector(".farris-tabs-header"), d = i.value.clientHeight - o.clientHeight - 20, H = o.querySelector(".farris-tabs-title").clientWidth - 20;
+        s.value.style.maxWidth = H + "px", s.value.style.maxHeight = d + "px", V(() => {
           const {
             width: L
-          } = o.value.getClientRects()[0];
-          o.value.style.width = L ? L + "px" : null;
+          } = s.value.getClientRects()[0];
+          s.value.style.width = L ? L + "px" : null;
         });
       }
   });
@@ -324,213 +344,213 @@ function ke(e, t, l, r) {
       "text-truncate": !0,
       "px-2": !0,
       disabled: n.props.disabled,
-      active: n.props.id === c.value,
+      active: n.props.id === a.value,
       "d-none": n.props.show !== !0
     };
   }
   function p(n) {
     n.preventDefault(), n.stopPropagation();
   }
-  function B() {
+  function P() {
     T && clearTimeout(T);
   }
-  function O() {
-    f.value || (T = setTimeout(() => {
-      f.value = !0;
+  function I() {
+    v.value || (T = setTimeout(() => {
+      v.value = !0;
     }, C));
   }
-  function j(n, a) {
-    n.stopPropagation(), a.disabled || v(a.id), f.value = !0;
+  function j(n, o) {
+    n.stopPropagation(), o.disabled || f(o.id), v.value = !0;
   }
-  function A(n, a) {
-    n.stopPropagation(), b(n, a, !0);
+  function A(n, o) {
+    n.stopPropagation(), u(n, o, !0);
   }
   function M(n) {
-    return n.slots.title ? u("a", {
+    return n.slots.title ? c("a", {
       class: "dropdown-title",
       id: `${n.props.id}-dropdown-item`
-    }, [n.slots.title(n)]) : n.props.titleRenderFunction ? u("a", {
+    }, [n.slots.title(n)]) : n.props.titleRenderFunction ? c("a", {
       class: "dropdown-title",
       id: `${n.props.id}-dropdown-item`
-    }, [n.props.titleRenderFunction()]) : u("a", {
+    }, [n.props.titleRenderFunction()]) : c("a", {
       class: "dropdown-title",
       id: `${n.props.id}-dropdown-item`
     }, [n.props.title]);
   }
-  function s() {
-    return u("div", {
-      ref: o,
-      class: I.value,
-      onMouseenter: () => B(),
-      onMouseleave: () => O()
-    }, [e.searchBoxVisible && u("div", {
+  function F() {
+    return c("div", {
+      ref: s,
+      class: O.value,
+      onMouseenter: () => P(),
+      onMouseleave: () => I()
+    }, [e.searchBoxVisible && c("div", {
       onClick: (n) => p(n),
       class: "pb-1 tabs-li-absolute"
-    }, [Z(u("input", {
+    }, [Z(c("input", {
       type: "text",
       class: "form-control",
       "onUpdate:modelValue": (n) => h.value = n
-    }, null), [[he, h.value]]), u("span", {
+    }, null), [[he, h.value]]), c("span", {
       class: "f-icon f-icon-page-title-query tabs-icon-search"
-    }, null)]), P.value.length ? u("ul", {
+    }, null)]), B.value.length ? c("ul", {
       class: "tab-dropdown-menu--items flex-fill"
-    }, [P.value.map((n) => u("li", {
+    }, [B.value.map((n) => c("li", {
       class: x(n),
-      onClick: (a) => j(a, n.props)
-    }, [n.props.removeable && n.props.disabled !== !0 && u("span", {
+      onClick: (o) => j(o, n.props)
+    }, [n.props.removeable && n.props.disabled !== !0 && c("span", {
       class: "float-right st-drop-close",
-      onClick: (a) => A(a, n.props.id)
-    }, [u("i", {
+      onClick: (o) => A(o, n.props.id)
+    }, [c("i", {
       class: "f-icon f-icon-close"
-    }, null)]), M(n)]))]) : u("div", {
+    }, null)]), M(n)]))]) : c("div", {
       class: "dropdown-no-data"
     }, [$.getLocaleValue("tabs.noData")])]);
   }
   return {
-    renderDropdownMenu: s,
+    renderDropdownMenu: F,
     setTabsRef: m
   };
 }
-function Re(e, t, l, r) {
+function Ae(e, t, l, r) {
   const {
-    hideDropDown: o
+    hideDropDown: s
   } = t, {
-    renderDropdownMenu: c,
-    setTabsRef: b
-  } = ke(e, t, l, r), d = S(e.showDropdown);
-  function v() {
-    return d.value && u(me, null, [u("button", {
+    renderDropdownMenu: a,
+    setTabsRef: u
+  } = Re(e, t, l, r), b = S(e.showDropdown);
+  function f() {
+    return b.value && c(me, null, [c("button", {
       class: "btn dropdown-toggle-split dropdown-toggle",
       onClick: () => {
-        o.value = !1;
+        s.value = !1;
       }
-    }, null), c()]);
+    }, null), a()]);
   }
   return {
-    renderMorePagesButtton: v,
-    setTabsRef: b
+    renderMorePagesButtton: f,
+    setTabsRef: u
   };
 }
-function Ae(e, t, l, r) {
-  const o = S(!1), { selectTab: c, tabPages: b, needUpdateNavigationLayout: d, activeId: v } = r, f = 4, h = y(() => ({
+function Ve(e, t, l, r) {
+  const s = S(!1), { selectTab: a, tabPages: u, needUpdateNavigationLayout: b, activeId: f } = r, v = 4, h = y(() => ({
     btn: !0,
     "sc-nav-btn": !0,
     "px-1": !0,
     "sc-nav-lr": !0,
-    "d-none": !o.value
+    "d-none": !s.value
   })), C = y(() => ({
     "btn-group": !0,
     "sc-nav-btn": !0,
     dropdown: !0,
-    "d-none": !o.value
+    "d-none": !s.value
   })), T = y(() => ({
     btn: !0,
     "sc-nav-rg": !0,
-    "d-none": !o.value
+    "d-none": !s.value
   }));
-  function P(p, B) {
+  function B(p, P) {
     if (!t.value)
       return;
-    const O = t.value.scrollLeft, j = t.value.scrollWidth - t.value.offsetWidth;
-    if (B > 0) {
+    const I = t.value.scrollLeft, j = t.value.scrollWidth - t.value.offsetWidth;
+    if (P > 0) {
       if (t.value.scrollLeft >= j)
         return;
-      t.value.scrollLeft = O + e.scrollStep + p;
-    } else if (B < 0) {
+      t.value.scrollLeft = I + e.scrollStep + p;
+    } else if (P < 0) {
       if (t.value.scrollLeft <= 0)
         return;
-      t.value.scrollLeft = O - e.scrollStep - p;
+      t.value.scrollLeft = I - e.scrollStep - p;
     }
   }
-  function I(p = -1) {
-    if (!o.value || !t.value)
+  function O(p = -1) {
+    if (!s.value || !t.value)
       return;
-    p < 0 && (p = b.value.findIndex((M) => M.props.id === v.value));
-    const B = e.tabType === "pills" ? ".f-capsule-item" : ".nav-item", O = t.value.querySelectorAll(B), { parentElement: j } = t.value, A = O[p];
+    p < 0 && (p = u.value.findIndex((M) => M.props.id === f.value));
+    const P = e.tabType === "pills" ? ".f-capsule-item" : ".nav-item", I = t.value.querySelectorAll(P), { parentElement: j } = t.value, A = I[p];
     if (A && j) {
-      const M = j.getBoundingClientRect().left, s = j.getBoundingClientRect().right, n = A.getBoundingClientRect().left, a = A.getBoundingClientRect().right;
-      n < M ? P(M - n, -1) : s < a && P(a - s, 1), e.tabType === "one-page" && l.scrollTo(p);
+      const M = j.getBoundingClientRect().left, F = j.getBoundingClientRect().right, n = A.getBoundingClientRect().left, o = A.getBoundingClientRect().right;
+      n < M ? B(M - n, -1) : F < o && B(o - F, 1), e.tabType === "one-page" && l.scrollTo(p);
     }
   }
   function i() {
-    var O;
+    var I;
     if (!t.value)
       return;
-    const p = t.value, B = (O = t.value) == null ? void 0 : O.parentElement;
-    o.value = B && p && B.offsetWidth < p.scrollWidth - f, o.value && V(() => {
-      I();
+    const p = t.value, P = (I = t.value) == null ? void 0 : I.parentElement;
+    s.value = P && p && P.offsetWidth < p.scrollWidth - v, s.value && V(() => {
+      O();
     });
   }
   function m(p) {
-    p.disabled || c(p.id);
+    p.disabled || a(p.id);
   }
   function x() {
     ["default", "one-page"].indexOf(e.tabType) > -1 && V(() => {
-      I();
+      O();
     });
   }
-  return R(d, () => {
+  return R(b, () => {
     i();
   }), {
     previousButtonClass: h,
     nextButtonGroupClass: C,
     nextButtonClass: T,
-    scrollTab: P,
+    scrollTab: B,
     selectAndScrollToTab: m,
-    shouldShowNavigationButtons: o,
+    shouldShowNavigationButtons: s,
     updateNavigationLayout: i,
     scrollToSelectedTab: x
   };
 }
-function Ve(e, t) {
-  const { tabPages: l } = t, r = S(""), o = S(!0), c = y(() => e.searchBoxVisible), b = y(() => c.value ? l.value.filter((v) => v.props.title.includes(r.value)) : l.value.slice());
-  return R(o, (d) => {
-    d || (r.value = "");
+function Fe(e, t) {
+  const { tabPages: l } = t, r = S(""), s = S(!0), a = y(() => e.searchBoxVisible), u = y(() => a.value ? l.value.filter((f) => f.props.title.includes(r.value)) : l.value.slice());
+  return R(s, (b) => {
+    b || (r.value = "");
   }), {
     searchTabText: r,
-    hideDropDown: o,
-    shouldShowSearchBox: c,
-    tabsInDropdownMenu: b
+    hideDropDown: s,
+    shouldShowSearchBox: a,
+    tabsInDropdownMenu: u
   };
 }
-function Fe(e, t, l) {
-  const r = ".farris-tab-page", { tabPages: o } = l;
-  function c(d) {
-    const v = t.value;
-    if (v) {
-      const f = t.value.querySelectorAll(r);
-      if (f.length > 0) {
-        const h = f[d], { offsetTop: C } = h, T = C - 32 > 0 ? C - 32 : 0;
-        v.scrollTop = T;
+function Le(e, t, l) {
+  const r = ".farris-tab-page", { tabPages: s } = l;
+  function a(b) {
+    const f = t.value;
+    if (f) {
+      const v = t.value.querySelectorAll(r);
+      if (v.length > 0) {
+        const h = v[b], { offsetTop: C } = h, T = C - 32 > 0 ? C - 32 : 0;
+        f.scrollTop = T;
       }
     }
   }
-  function b(d) {
-    const v = o.value.findIndex((f) => f.props.id === d);
-    v > -1 && c(v);
+  function u(b) {
+    const f = s.value.findIndex((v) => v.props.id === b);
+    f > -1 && a(f);
   }
-  return { scrollTo: c, scrollToByPaggId: b };
+  return { scrollTo: a, scrollToByPaggId: u };
 }
-const Le = ["moz", "ms", "webkit"];
-function De() {
+const De = ["moz", "ms", "webkit"];
+function We() {
   let e = 0;
   return (t) => {
-    const l = (/* @__PURE__ */ new Date()).getTime(), r = Math.max(0, 16 - (l - e)), o = setTimeout(() => {
+    const l = (/* @__PURE__ */ new Date()).getTime(), r = Math.max(0, 16 - (l - e)), s = setTimeout(() => {
       t(l + r);
     }, r);
-    return e = l + r, o;
+    return e = l + r, s;
   };
 }
-function We() {
+function Ee() {
   if (typeof window > "u")
     return () => 0;
   if (window.requestAnimationFrame)
     return window.requestAnimationFrame.bind(window);
-  const e = Le.filter((t) => `${t}RequestAnimationFrame` in window)[0];
-  return e ? window[`${e}RequestAnimationFrame`] : De();
+  const e = De.filter((t) => `${t}RequestAnimationFrame` in window)[0];
+  return e ? window[`${e}RequestAnimationFrame`] : We();
 }
-We();
-function Ee() {
+Ee();
+function qe() {
   const e = navigator.userAgent || navigator.vendor || window.opera, t = [
     /iPhone/i,
     /iPod/i,
@@ -550,57 +570,57 @@ function Ee() {
     /Kindle/i,
     /Silk/i
   ];
-  for (const d of l)
-    if (d.test(e))
+  for (const b of l)
+    if (b.test(e))
       return !1;
-  for (const d of t)
-    if (d.test(e))
+  for (const b of t)
+    if (b.test(e))
       return !0;
-  const r = "ontouchstart" in window || navigator.maxTouchPoints > 0, o = screen.width, c = screen.height, b = Math.min(o, c);
-  return !!(r && b <= 768);
+  const r = "ontouchstart" in window || navigator.maxTouchPoints > 0, s = screen.width, a = screen.height, u = Math.min(s, a);
+  return !!(r && u <= 768);
 }
 const q = /* @__PURE__ */ ee({
   name: "FTabs",
-  props: Pe,
+  props: Oe,
   emits: ["tabChange", "tabRemove", "update:activeId", "Click"],
   setup(e, t) {
-    const l = S(e.tabType), r = E(), o = Ee(), c = S(e.customClass), b = E(), d = E(), v = S(), f = Oe(e, t, b), {
+    const l = S(e.tabType), r = E(), s = qe(), a = S(e.customClass), u = E(), b = E(), f = S(), v = je(e, t, u), {
       activeId: h,
       changeTitleStyle: C,
       tabPages: T,
-      addTab: P,
-      updateTab: I,
+      addTab: B,
+      updateTab: O,
       toolbarItems: i,
       checkActiveIdAndSelect: m,
       toggleShowTab: x,
       hasInHeadClass: p,
-      toolbarVisible: B
-    } = f, O = Fe(e, d, f), j = Ae(e, b, O, f), {
+      toolbarVisible: P
+    } = v, I = Le(e, b, v), j = Ve(e, u, I, v), {
       previousButtonClass: A,
       nextButtonClass: M,
-      nextButtonGroupClass: s,
+      nextButtonGroupClass: F,
       scrollTab: n,
-      updateNavigationLayout: a,
-      scrollToSelectedTab: g
+      updateNavigationLayout: o,
+      scrollToSelectedTab: d
     } = j;
-    f.setScrollToSelectedTabFunction(g);
-    const k = Ve(e, f), F = He(e, b, j, O, f), L = F, te = Me(e, b, j, O, f), U = /* @__PURE__ */ new Map([["default", F], ["one-page", L], ["pills", te]]);
+    v.setScrollToSelectedTabFunction(d);
+    const g = Fe(e, v), H = ke(e, u, j, I, v), L = H, te = Me(e, u, j, I, v), U = /* @__PURE__ */ new Map([["default", H], ["one-page", L], ["pills", te]]);
     y(() => {
-      const w = T.value.find((H) => H.props.id === h.value);
+      const w = T.value.find((k) => k.props.id === h.value);
       return w == null ? void 0 : w.slots;
     });
-    const W = y(() => e.fill), z = (w, H) => {
-      t.emit("Click", w, H, h.value);
+    const W = y(() => e.fill), z = (w, k) => {
+      t.emit("Click", w, k, h.value);
     };
     ge("tabs", {
       activeId: h,
-      addTab: P,
-      updateTab: I,
+      addTab: B,
+      updateTab: O,
       tabPages: T,
       tabType: l,
       shouldFillParentContaner: W,
       toggleShowTab: x,
-      toolbarVisible: B,
+      toolbarVisible: P,
       clickToolbarItemHandler: z
     });
     let G = !1;
@@ -609,7 +629,8 @@ const q = /* @__PURE__ */ ee({
       "farris-tabs-inHead": p.value,
       "farris-tabs-inContent": !p.value,
       "farris-tabs-nav-fill": e.tabType === "fill",
-      "farris-tabs-nav-pills": e.tabType === "pills"
+      "farris-tabs-nav-pills": e.tabType === "pills",
+      "d-none": e.showHeader === !1
     })), le = y(() => {
       const w = {
         width: p.value && e.titleWidth ? `${e.titleWidth}%` : ""
@@ -625,28 +646,28 @@ const q = /* @__PURE__ */ ee({
         "flex-row-reverse": e.position === "right",
         "one-page": e.tabType === "one-page"
       };
-      return c.value && c.value.split(" ").reduce((H, D) => (H[D] = !0, H), w), w;
-    }), ie = new ResizeObserver((w) => {
-      w.length && a();
+      return a.value && a.value.split(" ").reduce((k, D) => (k[D] = !0, k), w), w;
+    }), se = new ResizeObserver((w) => {
+      w.length && o();
     });
     function _() {
-      v.value && !G && (ie.observe(v.value), G = !0);
+      f.value && !G && (se.observe(f.value), G = !0);
     }
     R(() => e.visible, (w) => {
       V(() => {
-        T.value.length && m(e.activeId || T.value[0].props.id), a(), C(b), _();
+        T.value.length && m(e.activeId || T.value[0].props.id), o(), C(u), _();
       });
     }), R(() => e.autoTitleWidth, (w) => {
       V(() => {
-        a(), C(b);
+        o(), C(u);
       });
     }), N(() => {
       e.visible && (T.value.length && m(e.activeId || T.value[0].props.id), V(() => {
-        a(), C(b);
+        o(), C(u);
       }), _());
     });
-    function se() {
-      return u("button", {
+    function ae() {
+      return c("button", {
         title: $.getLocaleValue("tabs.leftButton"),
         type: "button",
         class: A.value,
@@ -655,8 +676,8 @@ const q = /* @__PURE__ */ ee({
         }
       }, null);
     }
-    function ae() {
-      return u("button", {
+    function ie() {
+      return c("button", {
         title: $.getLocaleValue("tabs.rightButton"),
         type: "button",
         class: M.value,
@@ -668,37 +689,37 @@ const q = /* @__PURE__ */ ee({
     const {
       renderMorePagesButtton: re,
       setTabsRef: ue
-    } = Re(e, k, j, f);
+    } = Ae(e, g, j, v);
     ue(r);
     function ce() {
-      return i.value.length ? u("div", {
+      return i.value.length ? c("div", {
         class: {
           "farris-tabs-toolbar": !0,
-          "d-none": !B.value
+          "d-none": !P.value
         }
-      }, [u(Be, {
+      }, [c(Ie, {
         class: "f-utils-fill",
         alignment: p.value ? "right" : "left",
         items: i.value,
-        visible: B.value,
+        visible: P.value,
         onClick: z
       }, null)]) : null;
     }
     const K = U.get(e.tabType) || U.get("default");
     function de() {
-      var w, H, D, J;
-      return u("div", {
+      var w, k, D, J;
+      return c("div", {
         class: ne.value
-      }, [u("div", {
+      }, [c("div", {
         class: "farris-tabs-header-pre"
-      }, [(H = (w = t.slots).headerPrefix) == null ? void 0 : H.call(w)]), u("div", {
+      }, [(k = (w = t.slots).headerPrefix) == null ? void 0 : k.call(w)]), c("div", {
         class: "farris-tabs-title scroll-tabs",
         style: le.value,
-        ref: v
-      }, [!o && se(), K && K(), u("div", {
-        hidden: o,
-        class: s.value
-      }, [ae(), re()])]), ce(), u("div", {
+        ref: f
+      }, [!s && ae(), K && K(), c("div", {
+        hidden: s,
+        class: F.value
+      }, [ie(), re()])]), ce(), c("div", {
         class: "farris-tabs-header-post"
       }, [(J = (D = t.slots).headerSuffix) == null ? void 0 : J.call(D)])]);
     }
@@ -707,18 +728,18 @@ const q = /* @__PURE__ */ ee({
       "f-utils-fill-flex-column": W.value
     }));
     function ve() {
-      var w, H;
-      return u("div", {
+      var w, k;
+      return c("div", {
         class: fe.value,
-        ref: d
-      }, [(H = (w = t.slots).default) == null ? void 0 : H.call(w)]);
+        ref: b
+      }, [(k = (w = t.slots).default) == null ? void 0 : k.call(w)]);
     }
-    return () => e.visible ? u("div", {
+    return () => e.visible ? c("div", {
       class: oe.value,
       ref: r
     }, [de(), ve()]) : null;
   }
-}), qe = {
+}), $e = {
   tabWidth: { type: Number },
   id: { type: String, default: "" },
   customTitleClass: { type: String, default: "" },
@@ -746,22 +767,22 @@ function X(e) {
 }
 const Y = /* @__PURE__ */ ee({
   name: "FTabPage",
-  props: qe,
+  props: $e,
   emits: [],
   setup(e, t) {
     const l = ye("tabs");
-    Se();
-    const r = S(e.show), o = {
+    xe();
+    const r = S(e.show), s = {
       slots: t.slots,
       props: e
-    }, c = S((l == null ? void 0 : l.tabType.value) || "default");
+    }, a = S((l == null ? void 0 : l.tabType.value) || "default");
     N(() => {
       const i = l == null ? void 0 : l.tabPages.value.findIndex((m) => m.props.id === e.id);
-      (!i || i === -1) && (l == null || l.addTab(o));
+      (!i || i === -1) && (l == null || l.addTab(s));
     }), Te(() => {
     });
-    const b = y(() => (e == null ? void 0 : e.id) === (l == null ? void 0 : l.activeId.value)), d = y(() => ({
-      display: b.value ? "" : "none"
+    const u = y(() => (e == null ? void 0 : e.id) === (l == null ? void 0 : l.activeId.value)), b = y(() => ({
+      display: u.value ? "" : "none"
     }));
     R(() => e, (i) => {
       l == null || l.updateTab({
@@ -774,27 +795,27 @@ const Y = /* @__PURE__ */ ee({
     }), R(() => e.show, (i) => {
       l == null || l.toggleShowTab(e.id);
     }), R(() => e.toolbarVisible, (i) => {
-      b.value && l && (l.toolbarVisible.value = i);
+      u.value && l && (l.toolbarVisible.value = i);
     });
-    function v() {
+    function f() {
       var m, x;
       const i = (x = (m = t.slots).default) == null ? void 0 : x.call(m);
-      return u(Q, {
+      return c(Q, {
         "main-title": e.title,
         class: ["farris-tab-page", r.value ? "" : "f-tab-d-none"]
       }, X(i) ? i : {
         default: () => [i]
       });
     }
-    function f(i, m) {
+    function v(i, m) {
       l && (l.activeId.value = e.id, l.clickToolbarItemHandler && l.clickToolbarItemHandler(i, m));
     }
     function h() {
       var m, x;
       const i = (x = (m = t.slots).default) == null ? void 0 : x.call(m);
-      return u(Q, {
+      return c(Q, {
         customClass: "section-in-tab is-mobile",
-        onClick: f,
+        onClick: v,
         visible: e.show,
         "main-title": e.title,
         buttons: e.toolbar.buttons,
@@ -809,22 +830,22 @@ const Y = /* @__PURE__ */ ee({
       return {
         "farris-tab-page": !0,
         "f-tab-d-none": !r.value,
-        "f-tab-active": b.value && l && ((m = l.shouldFillParentContaner) == null ? void 0 : m.value)
+        "f-tab-active": u.value && l && ((m = l.shouldFillParentContaner) == null ? void 0 : m.value)
       };
     });
     function T() {
       var m, x;
       const i = (x = (m = t.slots).default) == null ? void 0 : x.call(m);
-      return u("div", {
+      return c("div", {
         class: C.value,
-        style: d.value
+        style: b.value
       }, [i]);
     }
-    const I = (/* @__PURE__ */ new Map([["default", T], ["one-page", v], ["mobile", h]])).get(c.value) || T;
-    return () => I();
+    const O = (/* @__PURE__ */ new Map([["default", T], ["one-page", f], ["mobile", h]])).get(a.value) || T;
+    return () => O();
   }
 });
-class Xe extends Ie {
+class et extends Pe {
   constructor(t, l) {
     super(t, l);
   }
@@ -877,18 +898,18 @@ class Xe extends Ie {
         label: "onClick",
         name: "点击事件"
       }
-    ], r = this, o = r.eventsEditorUtils.formProperties(t, r.viewModelId, l), c = r.createBaseEventProperty(o);
+    ], r = this, s = r.eventsEditorUtils.formProperties(t, r.viewModelId, l), a = r.createBaseEventProperty(s);
     this.propertyConfig.categories.eventsEditor = {
       title: "事件",
       hideTitle: !0,
-      properties: c,
+      properties: a,
       // 这个属性，标记当属性变更得时候触发重新更新属性
       refreshPanelAfterChanged: !0,
       tabId: "commands",
       tabName: "交互",
-      setPropertyRelates(b, d) {
-        const v = b.propertyValue;
-        delete t[r.viewModelId], v && (v.setPropertyRelates = this.setPropertyRelates, r.eventsEditorUtils.saveRelatedParameters(t, r.viewModelId, v.events, v));
+      setPropertyRelates(u, b) {
+        const f = u.propertyValue;
+        delete t[r.viewModelId], f && (f.setPropertyRelates = this.setPropertyRelates, r.eventsEditorUtils.saveRelatedParameters(t, r.viewModelId, f.events, f));
       }
     };
   }
@@ -899,8 +920,9 @@ q.install = (e) => {
 export {
   Y as FTabPage,
   q as FTabs,
-  Xe as TabToolbarItemProperty,
+  et as TabToolbarItemProperty,
+  Ze as createTabsCallbackResolver,
   q as default,
-  qe as tabPageProps,
-  Pe as tabsProps
+  $e as tabPageProps,
+  Oe as tabsProps
 };