@farris/ui-vue 1.7.1 → 1.7.2-beta.1

package/components/tabs/index.esm.js

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