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

Farris Vue, a Farris Design based Vue3 component library.

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