@farris/ui-vue 1.7.0-beta.4 → 1.7.0

package/components/tabs/index.esm.js

@@ -1,11 +1,10 @@
-import { ref as x, computed as y, watch as k, nextTick as L, reactive as de, createVNode as c, withDirectives as Q, resolveDirective as fe, onMounted as U, vModelText as ve, Fragment as pe, defineComponent as X, shallowRef as E, provide as be, inject as he, onUnmounted as me, isVNode as ge } from "vue";
-import { getCustomClass as ye } from "../common/index.esm.js";
-import Te from "../capsule/index.esm.js";
-import { LocaleService as $ } from "../locale/index.esm.js";
-import Ce from "../response-toolbar/index.esm.js";
-import we from "../section/index.esm.js";
-import { BaseControlProperty as Se } from "../property-panel/index.esm.js";
-const xe = {
+import { ref as x, computed as T, watch as D, nextTick as L, reactive as pe, createVNode as u, withDirectives as Z, resolveDirective as he, onMounted as U, vModelText as me, Fragment as ye, defineComponent as ee, shallowRef as N, provide as Te, inject as ge, onUnmounted as we, isVNode as Ce } from "vue";
+import { getCustomClass as Se, isMobilePhone as te } from "../common/index.esm.js";
+import xe from "../capsule/index.esm.js";
+import { LocaleService as q } from "../locale/index.esm.js";
+import Ie from "../response-toolbar/index.esm.js";
+import Q from "../section/index.esm.js";
+const Be = {
   /** 标签页头部区域的展示类型 */
   tabType: { type: String, default: "default" },
   /** 标题自适应宽度 */
@@ -28,196 +27,196 @@ const xe = {
   /** 控制是否可见 */
   visible: { type: Boolean, default: !0 }
 };
-function Be(e, t, s) {
-  const i = x([]), n = x(e.activeId || "");
-  let u = "";
-  const g = x(!0), f = x([]), r = x(!0), p = x(0), b = y(() => {
-    const o = i.value.find((a) => a.props.id === n.value);
+function Oe(e, l, s) {
+  const c = x([]), n = x(e.activeId || "");
+  let b = "";
+  const m = x(!0), v = x([]), p = x(!0), r = x(0), h = T(() => {
+    const o = c.value.find((a) => a.props.id === n.value);
     return (o == null ? void 0 : o.props.toolbarPosition) === "inHead";
   });
-  function C(o, l = !0) {
-    const a = o.findIndex((m) => m.props.show !== !1 && !m.props.disabled);
-    if (f.value = [], a !== -1) {
-      if (n.value = o[a].props.id, !l)
+  function S(o, t = !0) {
+    const a = o.findIndex((y) => y.props.show !== !1 && !y.props.disabled);
+    if (v.value = [], a !== -1) {
+      if (n.value = o[a].props.id, !t)
         return;
-      const m = o[a];
-      m && m.props.toolbar && m.props.toolbar.buttons && m.props.toolbar.buttons.length && (f.value = [...m.props.toolbar.buttons], r.value = m.props.toolbarVisible);
+      const y = o[a];
+      y && y.props.toolbar && y.props.toolbar.buttons && y.props.toolbar.buttons.length && (v.value = [...y.props.toolbar.buttons], p.value = y.props.toolbarVisible);
     }
   }
-  function S(o) {
+  function w(o) {
     n.value = o;
-    const l = i.value.find((a) => a.props.id === o);
-    f.value = [], l && l.props.toolbar && l.props.toolbar.buttons && l.props.toolbar.buttons.length && (f.value = [...l.props.toolbar.buttons], r.value = l.props.toolbarVisible), t.emit("update:activeId", o), t.emit("tabChange", {
-      prevId: u,
+    const t = c.value.find((a) => a.props.id === o);
+    v.value = [], t && t.props.toolbar && t.props.toolbar.buttons && t.props.toolbar.buttons.length && (v.value = [...t.props.toolbar.buttons], p.value = t.props.toolbarVisible), l.emit("update:activeId", o), l.emit("tabChange", {
+      prevId: b,
       nextId: n.value
     });
   }
-  function h(o) {
-    let l = -1;
+  function I(o) {
+    let t = -1;
     if (!n.value) {
-      if (l = o.findIndex((a) => n.value === a.props.id && a.props.show !== !1 && !a.props.disabled), l > -1)
+      if (t = o.findIndex((a) => n.value === a.props.id && a.props.show !== !1 && !a.props.disabled), t > -1)
         return;
-      u = n.value;
+      b = n.value;
     }
-    C(o, !1), S(n.value);
+    S(o, !1), w(n.value);
   }
-  function T(o) {
-    let l = !1;
+  function O(o) {
+    let t = !1;
     if (o) {
-      const a = i.value.find((m) => m.props.id === o);
-      l = !a || a.props.show === !1 || a.props.disabled === !0;
+      const a = c.value.find((y) => y.props.id === o);
+      t = !a || a.props.show === !1 || a.props.disabled === !0;
     }
-    l ? h(i.value) : (n.value !== o && (u = n.value, n.value = o), S(n.value));
+    t ? I(c.value) : (n.value !== o && (b = n.value, n.value = o), w(n.value));
   }
-  k(() => e.activeId, (o, l) => {
-    o !== l && T(o);
+  D(() => e.activeId, (o, t) => {
+    o !== t && e.activeId !== n.value && O(o);
   });
   function d(o) {
     var a;
     if (e.autoTitleWidth)
       return;
-    const l = (a = o.value) == null ? void 0 : a.querySelectorAll(".st-tab-text");
-    if (!(!l || e.tabType === "pill"))
-      for (let m = 0; m < l.length; m++) {
-        const R = l[m].parentNode;
-        l[m].scrollWidth > R.offsetWidth ? l[m].classList.contains("farris-title-text-custom") || l[m].classList.add("farris-title-text-custom") : l[m].classList.remove("farris-title-text-custom");
+    const t = (a = o.value) == null ? void 0 : a.querySelectorAll(".st-tab-text");
+    if (!(!t || e.tabType === "pill"))
+      for (let y = 0; y < t.length; y++) {
+        const V = t[y].parentNode;
+        t[y].scrollWidth > V.offsetWidth ? t[y].classList.contains("farris-title-text-custom") || t[y].classList.add("farris-title-text-custom") : t[y].classList.remove("farris-title-text-custom");
       }
   }
-  const H = (o) => {
+  const f = (o) => {
     o.preventDefault(), o.stopPropagation();
   };
-  function O(o, l, a = !1) {
-    const m = i.value.findIndex((R) => R.props.id === l);
-    i.value = i.value.filter((R) => R.props.id !== l), n.value === l && (u = l, n.value = "", C(i.value)), H(o), L(() => {
-      p.value++, d(s), a && (g.value = !0), t.emit("tabRemove", {
-        removeIndex: m,
-        removeId: l,
+  function g(o, t, a = !1) {
+    const y = c.value.findIndex((V) => V.props.id === t);
+    c.value = c.value.filter((V) => V.props.id !== t), n.value === t && (b = t, n.value = "", S(c.value)), f(o), L(() => {
+      r.value++, d(s), a && (m.value = !0), l.emit("tabRemove", {
+        removeIndex: y,
+        removeId: t,
         activeId: n.value
       });
     });
   }
-  function v(o, l = !0) {
-    n.value === o && (n.value = "", u = o, T("")), L(() => {
-      p.value++, l && (g.value = !0);
+  function i(o, t = !0) {
+    n.value === o && (n.value = "", b = o, O("")), L(() => {
+      r.value++, t && (m.value = !0);
     });
   }
   let B;
-  function I(o) {
+  function j(o) {
     B = o;
   }
-  function P(o) {
-    n.value !== o && (u = n.value, S(o), B && B());
+  function H(o) {
+    n.value !== o && (b = n.value, w(o), B && B());
   }
   function M(o) {
-    i.value.findIndex((a) => a.props.id === o.props.id) === -1 && i.value.push(o), p.value++;
+    c.value.findIndex((a) => a.props.id === o.props.id) === -1 && c.value.push(o), r.value++;
   }
-  function V(o) {
-    i.value.findIndex((a) => a.props.id === o.props.id) !== -1 && (i.value.forEach((a) => {
+  function R(o) {
+    c.value.findIndex((a) => a.props.id === o.props.id) !== -1 && (c.value.forEach((a) => {
       a.props.id === o.props.id && (a = o);
-    }), o.props.id === n.value && b.value, L(() => {
-      p.value++, d(s);
+    }), o.props.id === n.value && h.value, L(() => {
+      r.value++, d(s);
     }));
   }
   return {
     activeId: n,
     addTab: M,
     changeTitleStyle: d,
-    removeTab: O,
-    selectTab: P,
-    tabPages: i,
-    updateTab: V,
-    toolbarItems: f,
-    needUpdateNavigationLayout: p,
-    checkActiveIdAndSelect: T,
-    toggleShowTab: v,
-    hasInHeadClass: b,
-    setScrollToSelectedTabFunction: I,
-    toolbarVisible: r
+    removeTab: g,
+    selectTab: H,
+    tabPages: c,
+    updateTab: R,
+    toolbarItems: v,
+    needUpdateNavigationLayout: r,
+    checkActiveIdAndSelect: O,
+    toggleShowTab: i,
+    hasInHeadClass: h,
+    setScrollToSelectedTabFunction: j,
+    toolbarVisible: p
   };
 }
-function Ie(e, t, s, i, n) {
+function je(e, l, s, c, n) {
   const {
-    activeId: u,
-    removeTab: g,
-    selectTab: f
-  } = n, r = y(() => {
-    const v = {
+    activeId: b,
+    removeTab: m,
+    selectTab: v
+  } = n, p = T(() => {
+    const i = {
       "st-tab-text": !0,
       "text-truncate": e.tabType === "pill" && !e.autoTitleWidth,
       "farris-title-auto": e.autoTitleWidth
     };
-    return ye(v, t.customTitleClass);
-  }), p = y(() => ({
+    return Se(i, l.customTitleClass);
+  }), r = T(() => ({
     "nav-item": !0,
-    "d-none": t.show !== void 0 ? !t.show : !1,
-    "f-state-active": t.id === u.value,
-    "f-state-disabled": t.disabled
-  })), b = y(() => ({
-    width: `${t.tabWidth}px`
-  })), C = y(() => ({
+    "d-none": l.show !== void 0 ? !l.show : !1,
+    "f-state-active": l.id === b.value,
+    "f-state-disabled": l.disabled
+  })), h = T(() => ({
+    width: `${l.tabWidth}px`
+  })), S = T(() => ({
     "nav-link": !0,
     "tabs-text-truncate": !0,
-    active: t.id === u.value,
-    disabled: t.disabled
-  })), S = de({
-    content: t.title,
+    active: l.id === b.value,
+    disabled: l.disabled
+  })), w = pe({
+    content: l.title,
     overflowShown: !0
   });
-  function h() {
-    return e.tabType !== "pill" && !e.autoTitleWidth ? Q(c("span", {
-      class: r.value,
-      "data-tabid": t.id
-    }, [t.title]), [[fe("tooltip"), S]]) : c("span", {
-      class: r.value,
-      "data-tabid": t.id,
-      title: t.title
-    }, [t.title]);
-  }
-  const T = x(t.removeable);
+  function I() {
+    return e.tabType !== "pill" && !e.autoTitleWidth ? Z(u("span", {
+      class: p.value,
+      "data-tabid": l.id
+    }, [l.title]), [[he("tooltip"), w]]) : u("span", {
+      class: p.value,
+      "data-tabid": l.id,
+      title: l.title
+    }, [l.title]);
+  }
+  const O = x(l.removeable);
   function d() {
-    return T.value ? c("span", {
+    return O.value ? u("span", {
       class: "st-drop-close",
-      onClick: (v) => g(v, t.id)
-    }, [c("i", {
+      onClick: (i) => m(i, l.id)
+    }, [u("i", {
       class: "f-icon f-icon-close"
     }, null)]) : "";
   }
-  function H(v) {
-    f(t.id), e.tabType === "one-page" && i.scrollToByPaggId(t.id);
-  }
-  function O() {
-    return s.slots.title ? c("a", {
-      class: C.value,
-      onClick: H,
-      id: `${t.id}-design-item`
-    }, [s.slots.title(s), d()]) : t.titleRenderFunction ? c("a", {
-      class: C.value,
-      onClick: H,
-      id: `${t.id}-design-item`
-    }, [t.titleRenderFunction(), d()]) : c("a", {
-      class: C.value,
-      onClick: H,
-      id: `${t.id}-design-item`
-    }, [h(), d()]);
-  }
-  return c("li", {
-    class: p.value,
-    style: b.value
-  }, [O()]);
+  function f(i) {
+    v(l.id), e.tabType === "one-page" && c.scrollToByPaggId(l.id);
+  }
+  function g() {
+    return s.slots.title ? u("a", {
+      class: S.value,
+      onClick: f,
+      id: `${l.id}-design-item`
+    }, [s.slots.title(s), d()]) : l.titleRenderFunction ? u("a", {
+      class: S.value,
+      onClick: f,
+      id: `${l.id}-design-item`
+    }, [l.titleRenderFunction(), d()]) : u("a", {
+      class: S.value,
+      onClick: f,
+      id: `${l.id}-design-item`
+    }, [I(), d()]);
+  }
+  return u("li", {
+    class: r.value,
+    style: h.value
+  }, [g()]);
 }
-function Oe(e, t, s, i, n) {
+function He(e, l, s, c, n) {
   const {
-    shouldShowNavigationButtons: u
+    shouldShowNavigationButtons: b
   } = s, {
-    tabPages: g
-  } = n, f = y(() => ({
+    tabPages: m
+  } = n, v = T(() => ({
     spacer: !0,
     "f-utils-fill": !0,
-    "spacer-sides-dropdown": u.value
-  })), r = y(() => ({
+    "spacer-sides-dropdown": b.value
+  })), p = T(() => ({
     width: "100%",
     "justify-content": e.justifyContent
-  })), p = y(() => ({
+  })), r = T(() => ({
     nav: !0,
     "farris-nav-tabs": !0,
     "flex-nowrap": !0,
@@ -226,344 +225,347 @@ function Oe(e, t, s, i, n) {
     "flex-row": e.position === "top" || e.position === "bottom",
     "flex-column": e.position === "left" || e.position === "right"
   }));
-  return () => c("div", {
-    class: f.value,
-    style: r.value
-  }, [c("ul", {
-    class: p.value,
-    ref: t
-  }, [g.value.map((b) => Ie(e, b.props, b, i, n))])]);
+  return () => u("div", {
+    class: v.value,
+    style: p.value
+  }, [u("ul", {
+    class: r.value,
+    ref: l
+  }, [m.value.map((h) => je(e, h.props, h, c, n))])]);
 }
-function je(e, t, s, i, n) {
-  const u = x(), {
-    shouldShowNavigationButtons: g
+function ke(e, l, s, c, n) {
+  const b = x(), {
+    shouldShowNavigationButtons: m
   } = s, {
-    activeId: f,
-    tabPages: r,
-    selectTab: p
-  } = n, b = x(f.value), C = y(() => r.value.map((d) => ({
+    activeId: v,
+    tabPages: p,
+    selectTab: r
+  } = n, h = x(v.value), S = T(() => p.value.map((d) => ({
     name: d.props.title,
     value: d.props.id,
     show: d.props.show,
     disabled: d.props.disabled
-  }))), S = y(() => ({
+  }))), w = T(() => ({
     spacer: !0,
     "f-utils-fill": !0,
-    "spacer-sides-dropdown": g.value
-  })), h = y(() => ({
+    "spacer-sides-dropdown": m.value
+  })), I = T(() => ({
     width: "100%",
     display: "flex",
     "justify-content": e.justifyContent
   }));
   U(() => {
-    u.value && (t.value = u.value.$el);
+    b.value && (l.value = b.value.$el);
   });
-  function T(d) {
-    p(d);
+  function O(d) {
+    r(d);
   }
-  return k(() => f.value, (d) => {
-    d !== b.value && (b.value = d);
+  return D(() => v.value, (d) => {
+    d !== h.value && (h.value = d);
   }, {
     immediate: !0
-  }), () => c("div", {
-    class: S.value,
-    style: h.value
-  }, [c(Te, {
-    items: C.value,
-    modelValue: b.value,
-    "onUpdate:modelValue": (d) => b.value = d,
-    onChange: T,
-    ref: u
+  }), () => u("div", {
+    class: w.value,
+    style: I.value
+  }, [u(xe, {
+    items: S.value,
+    modelValue: h.value,
+    "onUpdate:modelValue": (d) => h.value = d,
+    onChange: O,
+    ref: b
   }, null)]);
 }
-function He(e, t, s, i) {
+function Re(e, l, s, c) {
   const n = x(), {
-    activeId: u,
-    removeTab: g,
-    tabPages: f,
-    selectTab: r
-  } = i, {
-    hideDropDown: p,
-    searchTabText: b
-  } = t, C = 600;
-  let S = null;
-  const h = y(() => {
-    var a, m;
-    let l = [];
-    return e.searchBoxVisible ? l = (a = f.value) == null ? void 0 : a.filter((R) => R.props.title.includes(b.value)) : l = (m = f.value) == null ? void 0 : m.slice(), l;
-  }), T = y(() => ({
+    activeId: b,
+    removeTab: m,
+    tabPages: v,
+    selectTab: p
+  } = c, {
+    hideDropDown: r,
+    searchTabText: h
+  } = l, S = 600;
+  let w = null;
+  const I = T(() => {
+    var a, y;
+    let t = [];
+    return e.searchBoxVisible ? t = (a = v.value) == null ? void 0 : a.filter((V) => V.props.title.includes(h.value)) : t = (y = v.value) == null ? void 0 : y.slice(), t;
+  }), O = T(() => ({
     "dropdown-menu": !0,
     "tabs-pt28": e.searchBoxVisible,
     // 未看到样式定义
-    show: !p.value,
-    "d-none": p.value
+    show: !r.value,
+    "d-none": r.value
   }));
   let d;
-  function H(l) {
-    d = l;
+  function f(t) {
+    d = t;
   }
-  k(p, (l) => {
+  D(r, (t) => {
     if (d.value)
-      if (l)
+      if (t)
         n.value.style.width = null;
       else {
-        const a = d.value.querySelector(".farris-tabs-header"), m = d.value.clientHeight - a.clientHeight - 20, F = a.querySelector(".farris-tabs-title").clientWidth - 20;
-        n.value.style.maxWidth = F + "px", n.value.style.maxHeight = m + "px", L(() => {
+        const a = d.value.querySelector(".farris-tabs-header"), y = d.value.clientHeight - a.clientHeight - 20, W = a.querySelector(".farris-tabs-title").clientWidth - 20;
+        n.value.style.maxWidth = W + "px", n.value.style.maxHeight = y + "px", L(() => {
           const {
-            width: W
+            width: F
           } = n.value.getClientRects()[0];
-          n.value.style.width = W ? W + "px" : null;
+          n.value.style.width = F ? F + "px" : null;
         });
       }
   });
-  function O(l) {
+  function g(t) {
     return {
       "dropdown-item": !0,
       "text-truncate": !0,
       "px-2": !0,
-      disabled: l.props.disabled,
-      active: l.props.id === u.value,
-      "d-none": l.props.show !== !0
+      disabled: t.props.disabled,
+      active: t.props.id === b.value,
+      "d-none": t.props.show !== !0
     };
   }
-  function v(l) {
-    l.preventDefault(), l.stopPropagation();
+  function i(t) {
+    t.preventDefault(), t.stopPropagation();
   }
   function B() {
-    S && clearTimeout(S);
+    w && clearTimeout(w);
   }
-  function I() {
-    p.value || (S = setTimeout(() => {
-      p.value = !0;
-    }, C));
+  function j() {
+    r.value || (w = setTimeout(() => {
+      r.value = !0;
+    }, S));
   }
-  function P(l, a) {
-    l.stopPropagation(), a.disabled || r(a.id), p.value = !0;
+  function H(t, a) {
+    t.stopPropagation(), a.disabled || p(a.id), r.value = !0;
   }
-  function M(l, a) {
-    l.stopPropagation(), g(l, a, !0);
+  function M(t, a) {
+    t.stopPropagation(), m(t, a, !0);
   }
-  function V(l) {
-    return l.slots.title ? c("a", {
+  function R(t) {
+    return t.slots.title ? u("a", {
       class: "dropdown-title",
-      id: `${l.props.id}-dropdown-item`
-    }, [l.slots.title(l)]) : l.props.titleRenderFunction ? c("a", {
+      id: `${t.props.id}-dropdown-item`
+    }, [t.slots.title(t)]) : t.props.titleRenderFunction ? u("a", {
       class: "dropdown-title",
-      id: `${l.props.id}-dropdown-item`
-    }, [l.props.titleRenderFunction()]) : c("a", {
+      id: `${t.props.id}-dropdown-item`
+    }, [t.props.titleRenderFunction()]) : u("a", {
       class: "dropdown-title",
-      id: `${l.props.id}-dropdown-item`
-    }, [l.props.title]);
+      id: `${t.props.id}-dropdown-item`
+    }, [t.props.title]);
   }
   function o() {
-    return c("div", {
+    return u("div", {
       ref: n,
-      class: T.value,
+      class: O.value,
       onMouseenter: () => B(),
-      onMouseleave: () => I()
-    }, [e.searchBoxVisible && c("div", {
-      onClick: (l) => v(l),
+      onMouseleave: () => j()
+    }, [e.searchBoxVisible && u("div", {
+      onClick: (t) => i(t),
       class: "pb-1 tabs-li-absolute"
-    }, [Q(c("input", {
+    }, [Z(u("input", {
       type: "text",
       class: "form-control",
-      "onUpdate:modelValue": (l) => b.value = l
-    }, null), [[ve, b.value]]), c("span", {
+      "onUpdate:modelValue": (t) => h.value = t
+    }, null), [[me, h.value]]), u("span", {
       class: "f-icon f-icon-page-title-query tabs-icon-search"
-    }, null)]), h.value.length ? c("ul", {
+    }, null)]), I.value.length ? u("ul", {
       class: "tab-dropdown-menu--items flex-fill"
-    }, [h.value.map((l) => c("li", {
-      class: O(l),
-      onClick: (a) => P(a, l.props)
-    }, [l.props.removeable && l.props.disabled !== !0 && c("span", {
+    }, [I.value.map((t) => u("li", {
+      class: g(t),
+      onClick: (a) => H(a, t.props)
+    }, [t.props.removeable && t.props.disabled !== !0 && u("span", {
       class: "float-right st-drop-close",
-      onClick: (a) => M(a, l.props.id)
-    }, [c("i", {
+      onClick: (a) => M(a, t.props.id)
+    }, [u("i", {
       class: "f-icon f-icon-close"
-    }, null)]), V(l)]))]) : c("div", {
+    }, null)]), R(t)]))]) : u("div", {
       class: "dropdown-no-data"
-    }, [$.getLocaleValue("tabs.noData")])]);
+    }, [q.getLocaleValue("tabs.noData")])]);
   }
   return {
     renderDropdownMenu: o,
-    setTabsRef: H
+    setTabsRef: f
   };
 }
-function Pe(e, t, s, i) {
+function Ve(e, l, s, c) {
   const {
     hideDropDown: n
-  } = t, {
-    renderDropdownMenu: u,
-    setTabsRef: g
-  } = He(e, t, s, i), f = x(e.showDropdown);
-  function r() {
-    return f.value && c(pe, null, [c("button", {
+  } = l, {
+    renderDropdownMenu: b,
+    setTabsRef: m
+  } = Re(e, l, s, c), v = x(e.showDropdown);
+  function p() {
+    return v.value && u(ye, null, [u("button", {
       class: "btn dropdown-toggle-split dropdown-toggle",
       onClick: () => {
         n.value = !1;
       }
-    }, null), u()]);
+    }, null), b()]);
   }
   return {
-    renderMorePagesButtton: r,
-    setTabsRef: g
+    renderMorePagesButtton: p,
+    setTabsRef: m
   };
 }
-function Re(e, t, s, i) {
-  const n = x(!1), { selectTab: u, tabPages: g, needUpdateNavigationLayout: f, activeId: r } = i, p = 4, b = y(() => ({
+function De(e, l, s, c) {
+  const n = x(!1), { selectTab: b, tabPages: m, needUpdateNavigationLayout: v, activeId: p } = c, r = 4, h = T(() => ({
     btn: !0,
     "sc-nav-btn": !0,
     "px-1": !0,
     "sc-nav-lr": !0,
     "d-none": !n.value
-  })), C = y(() => ({
+  })), S = T(() => ({
     "btn-group": !0,
     "sc-nav-btn": !0,
     dropdown: !0,
     "d-none": !n.value
-  })), S = y(() => ({
+  })), w = T(() => ({
     btn: !0,
     "sc-nav-rg": !0,
     "d-none": !n.value
   }));
-  function h(v, B) {
-    if (!t.value)
+  function I(i, B) {
+    if (!l.value)
       return;
-    const I = t.value.scrollLeft, P = t.value.scrollWidth - t.value.offsetWidth;
+    const j = l.value.scrollLeft, H = l.value.scrollWidth - l.value.offsetWidth;
     if (B > 0) {
-      if (t.value.scrollLeft >= P)
+      if (l.value.scrollLeft >= H)
         return;
-      t.value.scrollLeft = I + e.scrollStep + v;
+      l.value.scrollLeft = j + e.scrollStep + i;
     } else if (B < 0) {
-      if (t.value.scrollLeft <= 0)
+      if (l.value.scrollLeft <= 0)
         return;
-      t.value.scrollLeft = I - e.scrollStep - v;
+      l.value.scrollLeft = j - e.scrollStep - i;
     }
   }
-  function T(v = -1) {
-    if (!n.value || !t.value)
+  function O(i = -1) {
+    if (!n.value || !l.value)
       return;
-    v < 0 && (v = g.value.findIndex((V) => V.props.id === r.value));
-    const B = e.tabType === "pills" ? ".f-capsule-item" : ".nav-item", I = t.value.querySelectorAll(B), { parentElement: P } = t.value, M = I[v];
-    if (M && P) {
-      const V = P.getBoundingClientRect().left, o = P.getBoundingClientRect().right, l = M.getBoundingClientRect().left, a = M.getBoundingClientRect().right;
-      l < V ? h(V - l, -1) : o < a && h(a - o, 1), e.tabType === "one-page" && s.scrollTo(v);
+    i < 0 && (i = m.value.findIndex((R) => R.props.id === p.value));
+    const B = e.tabType === "pills" ? ".f-capsule-item" : ".nav-item", j = l.value.querySelectorAll(B), { parentElement: H } = l.value, M = j[i];
+    if (M && H) {
+      const R = H.getBoundingClientRect().left, o = H.getBoundingClientRect().right, t = M.getBoundingClientRect().left, a = M.getBoundingClientRect().right;
+      t < R ? I(R - t, -1) : o < a && I(a - o, 1), e.tabType === "one-page" && s.scrollTo(i);
     }
   }
   function d() {
-    var I;
-    if (!t.value)
+    var j;
+    if (!l.value)
       return;
-    const v = t.value, B = (I = t.value) == null ? void 0 : I.parentElement;
-    n.value = B && v && B.offsetWidth < v.scrollWidth - p, n.value && L(() => {
-      T();
+    const i = l.value, B = (j = l.value) == null ? void 0 : j.parentElement;
+    n.value = B && i && B.offsetWidth < i.scrollWidth - r, n.value && L(() => {
+      O();
     });
   }
-  function H(v) {
-    v.disabled || u(v.id);
+  function f(i) {
+    i.disabled || b(i.id);
   }
-  function O() {
+  function g() {
     ["default", "one-page"].indexOf(e.tabType) > -1 && L(() => {
-      T();
+      O();
     });
   }
-  return k(f, () => {
+  return D(v, () => {
     d();
   }), {
-    previousButtonClass: b,
-    nextButtonGroupClass: C,
-    nextButtonClass: S,
-    scrollTab: h,
-    selectAndScrollToTab: H,
+    previousButtonClass: h,
+    nextButtonGroupClass: S,
+    nextButtonClass: w,
+    scrollTab: I,
+    selectAndScrollToTab: f,
     shouldShowNavigationButtons: n,
     updateNavigationLayout: d,
-    scrollToSelectedTab: O
+    scrollToSelectedTab: g
   };
 }
-function Ve(e, t) {
-  const { tabPages: s } = t, i = x(""), n = x(!0), u = y(() => e.searchBoxVisible), g = y(() => u.value ? s.value.filter((r) => r.props.title.includes(i.value)) : s.value.slice());
-  return k(n, (f) => {
-    f || (i.value = "");
+function Me(e, l) {
+  const { tabPages: s } = l, c = x(""), n = x(!0), b = T(() => e.searchBoxVisible), m = T(() => b.value ? s.value.filter((p) => p.props.title.includes(c.value)) : s.value.slice());
+  return D(n, (v) => {
+    v || (c.value = "");
   }), {
-    searchTabText: i,
+    searchTabText: c,
     hideDropDown: n,
-    shouldShowSearchBox: u,
-    tabsInDropdownMenu: g
+    shouldShowSearchBox: b,
+    tabsInDropdownMenu: m
   };
 }
-function ke(e, t, s) {
-  const i = ".farris-tab-page", { tabPages: n } = s;
-  function u(f) {
-    const r = t.value;
-    if (r) {
-      const p = t.value.querySelectorAll(i);
-      if (p.length > 0) {
-        const b = p[f], { offsetTop: C } = b, S = C - 32 > 0 ? C - 32 : 0;
-        r.scrollTop = S;
+function Le(e, l, s) {
+  const c = ".farris-tab-page", { tabPages: n } = s;
+  function b(v) {
+    const p = l.value;
+    if (p) {
+      const r = l.value.querySelectorAll(c);
+      if (r.length > 0) {
+        const h = r[v], { offsetTop: S } = h, w = S - 32 > 0 ? S - 32 : 0;
+        p.scrollTop = w;
       }
     }
   }
-  function g(f) {
-    const r = n.value.findIndex((p) => p.props.id === f);
-    r > -1 && u(r);
+  function m(v) {
+    const p = n.value.findIndex((r) => r.props.id === v);
+    p > -1 && b(p);
   }
-  return { scrollTo: u, scrollToByPaggId: g };
+  return { scrollTo: b, scrollToByPaggId: m };
 }
-const N = /* @__PURE__ */ X({
+const $ = /* @__PURE__ */ ee({
   name: "FTabs",
-  props: xe,
+  props: Be,
   emits: ["tabChange", "tabRemove", "update:activeId", "Click"],
-  setup(e, t) {
-    const s = x(e.tabType), i = E(), n = x(e.customClass), u = E(), g = E(), f = x(), r = Be(e, t, u), {
-      activeId: p,
-      changeTitleStyle: b,
-      tabPages: C,
-      addTab: S,
-      updateTab: h,
-      toolbarItems: T,
-      checkActiveIdAndSelect: d,
-      toggleShowTab: H,
-      hasInHeadClass: O,
-      toolbarVisible: v
-    } = r, B = ke(e, g, r), I = Re(e, u, B, r), {
-      previousButtonClass: P,
-      nextButtonClass: M,
-      nextButtonGroupClass: V,
-      scrollTab: o,
-      updateNavigationLayout: l,
-      scrollToSelectedTab: a
-    } = I;
-    r.setScrollToSelectedTabFunction(a);
-    const m = Ve(e, r), R = Oe(e, u, I, B, r), F = R, W = je(e, u, I, B, r), q = /* @__PURE__ */ new Map([["default", R], ["one-page", F], ["pills", W]]);
-    y(() => {
-      const w = C.value.find((j) => j.props.id === p.value);
-      return w == null ? void 0 : w.slots;
+  setup(e, l) {
+    const s = x(e.tabType), c = N(), n = te(), b = x(e.customClass), m = N(), v = N(), p = x(), r = Oe(e, l, m), {
+      activeId: h,
+      changeTitleStyle: S,
+      tabPages: w,
+      addTab: I,
+      updateTab: O,
+      toolbarItems: d,
+      checkActiveIdAndSelect: f,
+      toggleShowTab: g,
+      hasInHeadClass: i,
+      toolbarVisible: B
+    } = r, j = Le(e, v, r), H = De(e, m, j, r), {
+      previousButtonClass: M,
+      nextButtonClass: R,
+      nextButtonGroupClass: o,
+      scrollTab: t,
+      updateNavigationLayout: a,
+      scrollToSelectedTab: y
+    } = H;
+    r.setScrollToSelectedTabFunction(y);
+    const V = Me(e, r), W = He(e, m, H, j, r), F = W, le = ke(e, m, H, j, r), E = /* @__PURE__ */ new Map([["default", W], ["one-page", F], ["pills", le]]);
+    T(() => {
+      const C = w.value.find((k) => k.props.id === h.value);
+      return C == null ? void 0 : C.slots;
     });
-    const A = y(() => e.fill);
-    be("tabs", {
-      activeId: p,
-      addTab: S,
-      updateTab: h,
-      tabPages: C,
+    const A = T(() => e.fill), z = (C, k) => {
+      l.emit("Click", C, k, h.value);
+    };
+    Te("tabs", {
+      activeId: h,
+      addTab: I,
+      updateTab: O,
+      tabPages: w,
       tabType: s,
       shouldFillParentContaner: A,
-      toggleShowTab: H,
-      toolbarVisible: v
+      toggleShowTab: g,
+      toolbarVisible: B,
+      clickToolbarItemHandler: z
     });
-    let z = !1;
-    const Y = y(() => ({
+    let G = !1;
+    const ne = T(() => ({
       "farris-tabs-header": !0,
-      "farris-tabs-inHead": O.value,
-      "farris-tabs-inContent": !O.value,
+      "farris-tabs-inHead": i.value,
+      "farris-tabs-inContent": !i.value,
       "farris-tabs-nav-fill": e.tabType === "fill",
       "farris-tabs-nav-pills": e.tabType === "pills"
-    })), Z = y(() => {
-      const w = {
-        width: O.value && e.titleWidth ? `${e.titleWidth}%` : ""
+    })), oe = T(() => {
+      const C = {
+        width: i.value && e.titleWidth ? `${e.titleWidth}%` : ""
       };
-      return w.width && (w.flex = "unset"), w;
-    }), ee = y(() => {
-      const w = {
+      return C.width && (C.flex = "unset"), C;
+    }), ae = T(() => {
+      const C = {
         "farris-tabs": !0,
         "f-tabs-content-fill": A.value,
         "flex-column": e.position === "top",
@@ -572,102 +574,99 @@ const N = /* @__PURE__ */ X({
         "flex-row-reverse": e.position === "right",
         "one-page": e.tabType === "one-page"
       };
-      return n.value && n.value.split(" ").reduce((j, D) => (j[D] = !0, j), w), w;
-    }), te = new ResizeObserver((w) => {
-      w.length && l();
+      return b.value && b.value.split(" ").reduce((k, P) => (k[P] = !0, k), C), C;
+    }), se = new ResizeObserver((C) => {
+      C.length && a();
     });
-    function G() {
-      f.value && !z && (te.observe(f.value), z = !0);
+    function _() {
+      p.value && !G && (se.observe(p.value), G = !0);
     }
-    k(() => e.visible, (w) => {
+    D(() => e.visible, (C) => {
       L(() => {
-        C.value.length && d(e.activeId || C.value[0].props.id), l(), b(u), G();
+        w.value.length && f(e.activeId || w.value[0].props.id), a(), S(m), _();
       });
-    }), k(() => e.autoTitleWidth, (w) => {
+    }), D(() => e.autoTitleWidth, (C) => {
       L(() => {
-        l(), b(u);
+        a(), S(m);
       });
     }), U(() => {
-      e.visible && (C.value.length && d(e.activeId || C.value[0].props.id), L(() => {
-        l(), b(u);
-      }), G());
+      e.visible && (w.value.length && f(e.activeId || w.value[0].props.id), L(() => {
+        a(), S(m);
+      }), _());
     });
-    function le() {
-      return c("button", {
-        title: $.getLocaleValue("tabs.leftButton"),
+    function ie() {
+      return u("button", {
+        title: q.getLocaleValue("tabs.leftButton"),
         type: "button",
-        class: P.value,
+        class: M.value,
         onClick: () => {
-          o(0, -1);
+          t(0, -1);
         }
       }, null);
     }
-    function ne() {
-      return c("button", {
-        title: $.getLocaleValue("tabs.rightButton"),
+    function ue() {
+      return u("button", {
+        title: q.getLocaleValue("tabs.rightButton"),
         type: "button",
-        class: M.value,
+        class: R.value,
         onClick: () => {
-          o(0, 1);
+          t(0, 1);
         }
       }, null);
     }
     const {
-      renderMorePagesButtton: se,
-      setTabsRef: oe
-    } = Pe(e, m, I, r);
-    oe(i);
-    const ae = (w, j) => {
-      t.emit("Click", w, j, p.value);
-    };
-    function ie() {
-      return T.value.length ? c("div", {
+      renderMorePagesButtton: re,
+      setTabsRef: ce
+    } = Ve(e, V, H, r);
+    ce(c);
+    function de() {
+      return d.value.length ? u("div", {
         class: {
           "farris-tabs-toolbar": !0,
-          "d-none": !v.value
+          "d-none": !B.value
         }
-      }, [c(Ce, {
+      }, [u(Ie, {
         class: "f-utils-fill",
-        alignment: O.value ? "right" : "left",
-        items: T.value,
-        visible: v.value,
-        onClick: ae
+        alignment: i.value ? "right" : "left",
+        items: d.value,
+        visible: B.value,
+        onClick: z
       }, null)]) : null;
     }
-    const _ = q.get(e.tabType) || q.get("default");
-    function re() {
-      var w, j, D, J;
-      return c("div", {
-        class: Y.value
-      }, [c("div", {
+    const J = E.get(e.tabType) || E.get("default");
+    function fe() {
+      var C, k, P, K;
+      return !n && u("div", {
+        class: ne.value
+      }, [u("div", {
         class: "farris-tabs-header-pre"
-      }, [(j = (w = t.slots).headerPrefix) == null ? void 0 : j.call(w)]), c("div", {
+      }, [(k = (C = l.slots).headerPrefix) == null ? void 0 : k.call(C)]), u("div", {
         class: "farris-tabs-title scroll-tabs",
-        style: Z.value,
-        ref: f
-      }, [le(), _ && _(), c("div", {
-        class: V.value
-      }, [ne(), se()])]), ie(), c("div", {
+        style: oe.value,
+        ref: p
+      }, [ie(), J && J(), u("div", {
+        class: o.value
+      }, [ue(), re()])]), de(), u("div", {
         class: "farris-tabs-header-post"
-      }, [(J = (D = t.slots).headerSuffix) == null ? void 0 : J.call(D)])]);
+      }, [(K = (P = l.slots).headerSuffix) == null ? void 0 : K.call(P)])]);
     }
-    const ue = y(() => ({
+    const ve = T(() => ({
       "farris-tabs-content": !0,
       "f-utils-fill-flex-column": A.value
     }));
-    function ce() {
-      var w, j;
-      return c("div", {
-        class: ue.value,
-        ref: g
-      }, [(j = (w = t.slots).default) == null ? void 0 : j.call(w)]);
+    function be() {
+      var C, k;
+      return u("div", {
+        class: ve.value,
+        ref: v
+      }, [(k = (C = l.slots).default) == null ? void 0 : k.call(C)]);
     }
-    return () => e.visible ? c("div", {
-      class: ee.value,
-      ref: i
-    }, [re(), ce()]) : null;
+    return () => e.visible ? u("div", {
+      class: ae.value,
+      ref: c
+    }, [fe(), be()]) : null;
   }
-}), Me = {
+}), We = {
   tabWidth: { type: Number },
   id: { type: String, default: "" },
   customTitleClass: { type: String, default: "" },
@@ -690,146 +689,94 @@ const N = /* @__PURE__ */ X({
   /** 标题 */
   titleRenderFunction: { type: Function }
 };
-function Le(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ge(e);
+function X(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Ce(e);
 }
-const K = /* @__PURE__ */ X({
+const Y = /* @__PURE__ */ ee({
   name: "FTabPage",
-  props: Me,
+  props: We,
   emits: [],
-  setup(e, t) {
-    const s = he("tabs"), i = x(e.show), n = {
-      slots: t.slots,
+  setup(e, l) {
+    const s = ge("tabs"), c = te(), n = x(e.show), b = {
+      slots: l.slots,
       props: e
-    }, u = x((s == null ? void 0 : s.tabType.value) || "default");
+    }, m = x((s == null ? void 0 : s.tabType.value) || "default");
     U(() => {
-      const h = s == null ? void 0 : s.tabPages.value.findIndex((T) => T.props.id === e.id);
-      (!h || h === -1) && (s == null || s.addTab(n));
-    }), me(() => {
+      const f = s == null ? void 0 : s.tabPages.value.findIndex((g) => g.props.id === e.id);
+      (!f || f === -1) && (s == null || s.addTab(b));
+    }), we(() => {
     });
-    const g = y(() => (e == null ? void 0 : e.id) === (s == null ? void 0 : s.activeId.value)), f = y(() => ({
-      display: g.value ? "" : "none"
+    const v = T(() => (e == null ? void 0 : e.id) === (s == null ? void 0 : s.activeId.value)), p = T(() => ({
+      display: v.value ? "" : "none"
     }));
-    k(() => e, (h) => {
+    D(() => e, (f) => {
       s == null || s.updateTab({
-        props: h,
-        slots: t.slots
+        props: f,
+        slots: l.slots
       });
     }, {
       immediate: !0,
       deep: !0
-    }), k(() => e.show, (h) => {
+    }), D(() => e.show, (f) => {
       s == null || s.toggleShowTab(e.id);
-    }), k(() => e.toolbarVisible, (h) => {
-      g.value && s && (s.toolbarVisible.value = h);
+    }), D(() => e.toolbarVisible, (f) => {
+      v.value && s && (s.toolbarVisible.value = f);
     });
     function r() {
-      var T, d;
-      const h = (d = (T = t.slots).default) == null ? void 0 : d.call(T);
-      return c(we, {
+      var g, i;
+      const f = (i = (g = l.slots).default) == null ? void 0 : i.call(g);
+      return u(Q, {
+        "main-title": e.title,
+        class: ["farris-tab-page", n.value ? "" : "f-tab-d-none"]
+      }, X(f) ? f : {
+        default: () => [f]
+      });
+    }
+    function h(f, g) {
+      s && (s.activeId.value = e.id, s.clickToolbarItemHandler && s.clickToolbarItemHandler(f, g));
+    }
+    function S() {
+      var g, i;
+      const f = (i = (g = l.slots).default) == null ? void 0 : i.call(g);
+      return u(Q, {
+        customClass: "section-in-tab is-mobile",
+        onClick: h,
+        visible: e.show,
         "main-title": e.title,
-        class: ["farris-tab-page", i.value ? "" : "f-tab-d-none"]
-      }, Le(h) ? h : {
-        default: () => [h]
+        buttons: e.toolbar.buttons,
+        "button-position": e.toolbar.position || e.toolbarPosition,
+        "buttons-visible": e.toolbarVisible
+      }, X(f) ? f : {
+        default: () => [f]
       });
     }
-    const p = y(() => {
-      var T;
+    const w = T(() => {
+      var g;
       return {
         "farris-tab-page": !0,
-        "f-tab-d-none": !i.value,
-        "f-tab-active": g.value && s && ((T = s.shouldFillParentContaner) == null ? void 0 : T.value)
+        "f-tab-d-none": !n.value,
+        "f-tab-active": v.value && s && ((g = s.shouldFillParentContaner) == null ? void 0 : g.value)
       };
     });
-    function b() {
-      var T, d;
-      const h = (d = (T = t.slots).default) == null ? void 0 : d.call(T);
-      return c("div", {
-        class: p.value,
-        style: f.value
-      }, [h]);
+    function I() {
+      var g, i;
+      const f = (i = (g = l.slots).default) == null ? void 0 : i.call(g);
+      return u("div", {
+        class: w.value,
+        style: p.value
+      }, [f]);
     }
-    const S = (/* @__PURE__ */ new Map([["default", b], ["one-page", r]])).get(u.value) || b;
-    return () => S();
+    const d = c ? S : (/* @__PURE__ */ new Map([["default", I], ["one-page", r], ["mobile", S]])).get(m.value) || I;
+    return () => d();
   }
 });
-class Ue extends Se {
-  constructor(t, s) {
-    super(t, s);
-  }
-  getPropertyConfig(t, s = !1) {
-    return this.propertyConfig.categories.basic = this.getBasicPropConfig(t), this.propertyConfig.categories.basic.properties.text = {
-      title: "文本",
-      type: "string",
-      description: "",
-      refreshPanelAfterChanged: !0
-    }, this.getAppearanceProperties(t, s), this.getbBehaviorConfig(t), this.getEventPropConfig(t), this.propertyConfig;
-  }
-  getAppearanceProperties(t, s = !1) {
-    this.propertyConfig.categories.appearance = {
-      title: "外观",
-      properties: {
-        class: {
-          description: "组件的CSS样式",
-          title: "class样式",
-          visible: !s
-        },
-        icon: {
-          title: "图标",
-          type: "string",
-          description: ""
-        },
-        split: {
-          title: "下拉按钮分离",
-          type: "boolean",
-          description: "启用下拉按钮分离，可以单独点击按钮。单独点击下拉按钮展开下拉面板",
-          visible: !!(t.children && t.children.length > 0)
-        }
-      }
-    };
-  }
-  getbBehaviorConfig(t) {
-    const s = this.getPropertyEditorParams(t, ["Const", "Variable", "StateMachine", "Expression"], "disabled");
-    this.propertyConfig.categories.behavior = this.getBehaviorConfig(t, "", {
-      disabled: {
-        title: "禁用",
-        type: "boolean",
-        description: "按钮禁用状态",
-        refreshPanelAfterChanged: !0,
-        editor: s
-      }
-    });
-  }
-  getEventPropConfig(t) {
-    const s = [
-      {
-        label: "onClick",
-        name: "点击事件"
-      }
-    ], i = this, n = i.eventsEditorUtils.formProperties(t, i.viewModelId, s), u = i.createBaseEventProperty(n);
-    this.propertyConfig.categories.eventsEditor = {
-      title: "事件",
-      hideTitle: !0,
-      properties: u,
-      // 这个属性，标记当属性变更得时候触发重新更新属性
-      refreshPanelAfterChanged: !0,
-      tabId: "commands",
-      tabName: "交互",
-      setPropertyRelates(g, f) {
-        const r = g.propertyValue;
-        delete t[i.viewModelId], r && (r.setPropertyRelates = this.setPropertyRelates, i.eventsEditorUtils.saveRelatedParameters(t, i.viewModelId, r.events, r));
-      }
-    };
-  }
-}
-N.install = (e) => {
-  e.component(N.name, N), e.component(K.name, K);
+$.install = (e) => {
+  e.component($.name, $), e.component(Y.name, Y);
 };
 export {
-  K as FTabPage,
-  N as FTabs,
-  Ue as TabToolbarItemProperty,
-  N as default,
-  Me as tabPageProps,
-  xe as tabsProps
+  Y as FTabPage,
+  $ as FTabs,
+  $ as default,
+  We as tabPageProps,
+  Be as tabsProps
 };