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

Farris Vue, a Farris Design based Vue3 component library.

import { ref as I, computed as T, watch as A, nextTick as L, reactive as ve, createVNode as v, withDirectives as Z, resolveDirective as be, onMounted as _, vModelText as pe, Fragment as he, defineComponent as ee, shallowRef as N, provide as me, inject as ge, onUnmounted as ye, isVNode as Te } from "vue";
import { FNotifyService as we } from "../notify/index.esm.js";
import { getCustomClass as Ce, isMobilePhone as Se, EVENT_PROPERTY_TAB_IDS as Be } from "../common/index.esm.js";
import Ie from "../capsule/index.esm.js";
import { LocaleService as $ } from "../locale/index.esm.js";
import xe from "../response-toolbar/index.esm.js";
import "bignumber.js";
import "lodash-es";
import Y from "../section/index.esm.js";
import { BaseControlProperty as Oe } from "../property-panel/index.esm.js";
const Pe = {
  /**
   * 标签页显示样式
   * @default 'default'
   */
  tabType: { type: String, default: "default" },
  /**
   * 是否自动调整标题宽度，为true，则标题显示全部字符；为false，标题最多显示 20 个字符
   * @default false
   */
  autoTitleWidth: { type: Boolean, default: !1 },
  /**
   * 标题宽度
   * @default 7
   */
  titleLength: { type: Number, default: 7 },
  /**
   * 显示页签的位置
   * @default 'top'
   */
  position: { type: String, default: "top" },
  showDropdown: { type: Boolean, default: !0 },
  /**
   * 通过滚动鼠标切换页签的步长，默认是 10px
   * @default 10
   */
  scrollStep: { type: Number, default: 10 },
  /**
   * 是否允许自动调整页签高度
   * @default false
   */
  autoResize: { type: Boolean, default: !1 },
  /**
   * 组件宽度
   */
  width: { type: Number },
  /**
   * 组件高度
   */
  height: { type: Number },
  /**
   * 是否显示页签搜索框
   * @default true
   */
  searchBoxVisible: { type: Boolean, default: !0 },
  /**
   * 标题宽度
   */
  titleWidth: { type: Number, default: 0 },
  /**
   * 标签自定义样式
   */
  customClass: { type: String, default: "" },
  /**
   * 指定选中的页签（值为页签标识）
   */
  activeId: { type: String },
  /**
   * 是否启用填充占满外层容器,默认false不填充
   * @default false
   */
  fill: { type: Boolean, default: !1 },
  /**
   * left 左对齐，center 居中对齐，right 右对齐,默认左对齐
   * @default left
   */
  justifyContent: { type: String, default: "left" },
  /**
   * 标签页是否可见
   * @default true
   */
  visible: { type: Boolean, default: !0 },
  showHeader: { type: Boolean, default: !0 },
  /**
   * 标签页选中前事件
   */
  beforeTabSelect: { type: Function, default: null }
};
function Ze() {
  function e(t, l, c) {
    const i = {};
    return i.beforeTabSelect = (o) => l.call("beforeTabSelect", t, [o, t], c), i;
  }
  return {
    resolve: e
  };
}
function He(e, t, l) {
  const c = new we(), i = I([]), o = I(e.activeId || "");
  let f = "";
  const m = I(!0), d = I([]), h = I(!0), b = I(0), w = T(() => {
    const n = i.value.find((r) => r.props.id === o.value);
    return (n == null ? void 0 : n.props.toolbarPosition) === "inHead";
  });
  let C;
  function P(n) {
    C = n;
  }
  function x(n, u = !0) {
    const r = n.findIndex((g) => g.props.show !== !1 && !g.props.disabled);
    if (r !== -1) {
      if (o.value = n[r].props.id, !u)
        return;
      d.value = [];
      const g = n[r];
      g && g.props.toolbar && g.props.toolbar.buttons && g.props.toolbar.buttons.length && (d.value = [...g.props.toolbar.buttons], h.value = g.props.toolbarVisible);
    }
  }
  function s(n) {
    o.value = n;
    const u = i.value.find((r) => r.props.id === n);
    d.value = [], u && u.props.toolbar && u.props.toolbar.buttons && u.props.toolbar.buttons.length && (d.value = [...u.props.toolbar.buttons], h.value = u.props.toolbarVisible), t.emit("update:activeId", n), t.emit("tabChange", {
      prevId: f,
      nextId: o.value
    });
  }
  async function y(n, u, r, g) {
    var D;
    const O = await ((D = e.beforeTabSelect) == null ? void 0 : D.call(e, {
      prevId: n,
      nextId: u
    }));
    (typeof O == "boolean" ? O : (O == null ? void 0 : O.canSelect) ?? !0) ? r && r() : (g && g(), typeof O != "boolean" && O.message && (c == null || c.warning({ message: O.message, position: "top-center" })));
  }
  function B(n) {
    let u = -1;
    if (!o.value) {
      if (u = n.findIndex((r) => o.value === r.props.id && r.props.show !== !1 && !r.props.disabled), u > -1)
        return;
      f = o.value;
    }
    x(n, !1), y(f, o.value, () => {
      s(o.value), C && C();
    }, () => {
      o.value = f;
    });
  }
  function p(n) {
    let u = !1;
    if (n) {
      const r = i.value.find((g) => g.props.id === n);
      u = !r || r.props.show === !1 || r.props.disabled === !0;
    }
    if (u)
      B(i.value);
    else if (o.value !== n) {
      const r = o.value;
      y(r, n, () => {
        f = r, o.value = n, s(o.value), C && C();
      }, () => {
        o.value = r, t.emit("update:activeId", r);
      });
    } else
      s(o.value);
  }
  A(() => e.activeId, (n, u) => {
    n !== u && e.activeId !== o.value && p(n);
  });
  function H(n) {
    var r;
    if (e.autoTitleWidth)
      return;
    const u = (r = n.value) == null ? void 0 : r.querySelectorAll(".st-tab-text");
    if (!(!u || e.tabType === "pill"))
      for (let g = 0; g < u.length; g++) {
        const O = u[g].parentNode;
        u[g].scrollWidth > O.offsetWidth ? u[g].classList.contains("farris-title-text-custom") || u[g].classList.add("farris-title-text-custom") : u[g].classList.remove("farris-title-text-custom");
      }
  }
  const M = (n) => {
    n.preventDefault(), n.stopPropagation();
  };
  function k(n, u, r = !1) {
    const g = i.value.findIndex((O) => O.props.id === u);
    i.value = i.value.filter((O) => O.props.id !== u), o.value === u && (f = u, o.value = "", x(i.value)), M(n), L(() => {
      b.value++, H(l), r && (m.value = !0), t.emit("tabRemove", {
        removeIndex: g,
        removeId: u,
        activeId: o.value
      });
    });
  }
  function V(n, u = !0) {
    const r = i.value.find((g) => g.props.id === n);
    r && (r.props.show === !1 && o.value === n ? (o.value = "", f = n, p("")) : r.props.show === !0 && !o.value && B(i.value), L(() => {
      b.value++, u && (m.value = !0);
    }));
  }
  function R(n) {
    o.value !== n && y(f, n, () => {
      f = o.value, s(n), C && C();
    }, null);
  }
  function F(n) {
    i.value.findIndex((r) => r.props.id === n.props.id) === -1 && i.value.push(n), b.value++;
  }
  function a(n) {
    i.value.findIndex((r) => r.props.id === n.props.id) !== -1 && (i.value.forEach((r) => {
      r.props.id === n.props.id && (r = n);
    }), n.props.id === o.value && w.value, L(() => {
      b.value++, H(l);
    }));
  }
  return {
    activeId: o,
    addTab: F,
    changeTitleStyle: H,
    removeTab: k,
    selectTab: R,
    tabPages: i,
    updateTab: a,
    toolbarItems: d,
    needUpdateNavigationLayout: b,
    checkActiveIdAndSelect: p,
    toggleShowTab: V,
    hasInHeadClass: w,
    setScrollToSelectedTabFunction: P,
    toolbarVisible: h
  };
}
function Me(e, t, l, c, i) {
  const {
    activeId: o,
    removeTab: f,
    selectTab: m
  } = i, d = T(() => {
    const p = {
      "st-tab-text": !0,
      "text-truncate": e.tabType === "pill" && !e.autoTitleWidth,
      "farris-title-auto": e.autoTitleWidth
    };
    return Ce(p, t.customTitleClass);
  }), h = T(() => ({
    "nav-item": !0,
    "d-none": t.show !== void 0 ? !t.show : !1,
    "f-state-active": t.id === o.value,
    "f-state-disabled": t.disabled
  })), b = T(() => ({
    width: `${t.tabWidth}px`
  })), w = T(() => ({
    "nav-link": !0,
    "tabs-text-truncate": !0,
    active: t.id === o.value,
    disabled: t.disabled
  })), C = ve({
    content: t.title,
    overflowShown: !0
  });
  function P() {
    return e.tabType !== "pill" && !e.autoTitleWidth ? Z(v("span", {
      class: d.value,
      "data-tabid": t.id
    }, [t.title]), [[be("tooltip"), C]]) : v("span", {
      class: d.value,
      "data-tabid": t.id,
      title: t.title
    }, [t.title]);
  }
  const x = I(t.removeable);
  function s() {
    return x.value ? v("span", {
      class: "st-drop-close",
      onClick: (p) => f(p, t.id)
    }, [v("i", {
      class: "f-icon f-icon-close"
    }, null)]) : "";
  }
  function y(p) {
    m(t.id), e.tabType === "one-page" && c.scrollToByPaggId(t.id);
  }
  function B() {
    return l.slots.title ? v("a", {
      class: w.value,
      onClick: y,
      id: `${t.id}-tab-title`
    }, [l.slots.title(l), s()]) : t.titleRenderFunction ? v("a", {
      class: w.value,
      onClick: y,
      id: `${t.id}-tab-title`
    }, [t.titleRenderFunction(), s()]) : v("a", {
      class: w.value,
      onClick: y,
      id: `${t.id}-tab-title`
    }, [P(), s()]);
  }
  return v("li", {
    class: h.value,
    style: b.value
  }, [B()]);
}
function je(e, t, l, c, i) {
  const {
    shouldShowNavigationButtons: o
  } = l, {
    tabPages: f
  } = i, m = T(() => ({
    spacer: !0,
    "f-utils-fill": !0,
    "spacer-sides-dropdown": o.value
  })), d = T(() => ({
    width: "100%",
    "justify-content": e.justifyContent
  })), h = T(() => ({
    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 () => v("div", {
    class: m.value,
    style: d.value
  }, [v("ul", {
    class: h.value,
    ref: t
  }, [f.value.map((b) => Me(e, b.props, b, c, i))])]);
}
function ke(e, t, l, c, i) {
  const o = I(), {
    shouldShowNavigationButtons: f
  } = l, {
    activeId: m,
    tabPages: d,
    selectTab: h
  } = i, b = I(m.value), w = T(() => d.value.map((s) => ({
    name: s.props.title,
    value: s.props.id,
    show: s.props.show,
    disabled: s.props.disabled
  }))), C = T(() => ({
    spacer: !0,
    "f-utils-fill": !0,
    "spacer-sides-dropdown": f.value
  })), P = T(() => ({
    width: "100%",
    display: "flex",
    "justify-content": e.justifyContent
  }));
  _(() => {
    o.value && (t.value = o.value.$el);
  });
  function x(s) {
    h(s);
  }
  return A(() => m.value, (s) => {
    s !== b.value && (b.value = s);
  }, {
    immediate: !0
  }), () => v("div", {
    class: C.value,
    style: P.value
  }, [v(Ie, {
    items: w.value,
    modelValue: b.value,
    "onUpdate:modelValue": (s) => b.value = s,
    onChange: x,
    ref: o
  }, null)]);
}
function Re(e, t, l, c) {
  const i = I(), {
    activeId: o,
    removeTab: f,
    tabPages: m,
    selectTab: d
  } = c, {
    hideDropDown: h,
    searchTabText: b
  } = t, w = 600;
  let C = null;
  const P = T(() => {
    var n, u;
    let a = [];
    return e.searchBoxVisible ? a = (n = m.value) == null ? void 0 : n.filter((r) => r.props.title.includes(b.value)) : a = (u = m.value) == null ? void 0 : u.slice(), a;
  }), x = T(() => ({
    "dropdown-menu": !0,
    "tabs-pt28": e.searchBoxVisible,
    // 未看到样式定义
    show: !h.value,
    "d-none": h.value
  }));
  let s;
  function y(a) {
    s = a;
  }
  A(h, (a) => {
    if (s.value)
      if (a)
        i.value.style.width = null;
      else {
        const n = s.value.querySelector(".farris-tabs-header"), u = s.value.clientHeight - n.clientHeight - 20, g = n.querySelector(".farris-tabs-title").clientWidth - 20;
        i.value.style.maxWidth = g + "px", i.value.style.maxHeight = u + "px", L(() => {
          const {
            width: O
          } = i.value.getClientRects()[0];
          i.value.style.width = O ? O + "px" : null;
        });
      }
  });
  function B(a) {
    return {
      "dropdown-item": !0,
      "text-truncate": !0,
      "px-2": !0,
      disabled: a.props.disabled,
      active: a.props.id === o.value,
      "d-none": a.props.show !== !0
    };
  }
  function p(a) {
    a.preventDefault(), a.stopPropagation();
  }
  function H() {
    C && clearTimeout(C);
  }
  function M() {
    h.value || (C = setTimeout(() => {
      h.value = !0;
    }, w));
  }
  function k(a, n) {
    a.stopPropagation(), n.disabled || d(n.id), h.value = !0;
  }
  function V(a, n) {
    a.stopPropagation(), f(a, n, !0);
  }
  function R(a) {
    return a.slots.title ? v("a", {
      class: "dropdown-title",
      id: `${a.props.id}-dropdown-item`
    }, [a.slots.title(a)]) : a.props.titleRenderFunction ? v("a", {
      class: "dropdown-title",
      id: `${a.props.id}-dropdown-item`
    }, [a.props.titleRenderFunction()]) : v("a", {
      class: "dropdown-title",
      id: `${a.props.id}-dropdown-item`
    }, [a.props.title]);
  }
  function F() {
    return v("div", {
      ref: i,
      class: x.value,
      onMouseenter: () => H(),
      onMouseleave: () => M()
    }, [e.searchBoxVisible && v("div", {
      onClick: (a) => p(a),
      class: "pb-1 tabs-li-absolute"
    }, [Z(v("input", {
      type: "text",
      class: "form-control",
      "onUpdate:modelValue": (a) => b.value = a
    }, null), [[pe, b.value]]), v("span", {
      class: "f-icon f-icon-page-title-query tabs-icon-search"
    }, null)]), P.value.length ? v("ul", {
      class: "tab-dropdown-menu--items flex-fill"
    }, [P.value.map((a) => v("li", {
      class: B(a),
      onClick: (n) => k(n, a.props)
    }, [a.props.removeable && a.props.disabled !== !0 && v("span", {
      class: "float-right st-drop-close",
      onClick: (n) => V(n, a.props.id)
    }, [v("i", {
      class: "f-icon f-icon-close"
    }, null)]), R(a)]))]) : v("div", {
      class: "dropdown-no-data"
    }, [$.getLocaleValue("tabs.noData")])]);
  }
  return {
    renderDropdownMenu: F,
    setTabsRef: y
  };
}
function Ae(e, t, l, c) {
  const {
    hideDropDown: i
  } = t, {
    renderDropdownMenu: o,
    setTabsRef: f
  } = Re(e, t, l, c), m = I(e.showDropdown);
  function d() {
    return m.value && v(he, null, [v("button", {
      class: "btn dropdown-toggle-split dropdown-toggle",
      onClick: () => {
        i.value = !1;
      }
    }, null), o()]);
  }
  return {
    renderMorePagesButtton: d,
    setTabsRef: f
  };
}
function Ve(e, t, l, c) {
  const i = I(!1), { selectTab: o, tabPages: f, needUpdateNavigationLayout: m, activeId: d } = c, h = 4, b = T(() => ({
    btn: !0,
    "sc-nav-btn": !0,
    "px-1": !0,
    "sc-nav-lr": !0,
    "d-none": !i.value
  })), w = T(() => ({
    "btn-group": !0,
    "sc-nav-btn": !0,
    dropdown: !0,
    "d-none": !i.value
  })), C = T(() => ({
    btn: !0,
    "sc-nav-rg": !0,
    "d-none": !i.value
  }));
  function P(p, H) {
    if (!t.value)
      return;
    const M = t.value.scrollLeft, k = t.value.scrollWidth - t.value.offsetWidth;
    if (H > 0) {
      if (t.value.scrollLeft >= k)
        return;
      t.value.scrollLeft = M + e.scrollStep + p;
    } else if (H < 0) {
      if (t.value.scrollLeft <= 0)
        return;
      t.value.scrollLeft = M - e.scrollStep - p;
    }
  }
  function x(p = -1) {
    if (!i.value || !t.value)
      return;
    p < 0 && (p = f.value.findIndex((R) => R.props.id === d.value));
    const H = e.tabType === "pills" ? ".f-capsule-item" : ".nav-item", M = t.value.querySelectorAll(H), { parentElement: k } = t.value, V = M[p];
    if (V && k) {
      const R = k.getBoundingClientRect().left, F = k.getBoundingClientRect().right, a = V.getBoundingClientRect().left, n = V.getBoundingClientRect().right;
      a < R ? P(R - a, -1) : F < n && P(n - F, 1), e.tabType === "one-page" && l.scrollTo(p);
    }
  }
  function s() {
    var M;
    if (!t.value)
      return;
    const p = t.value, H = (M = t.value) == null ? void 0 : M.parentElement;
    i.value = H && p && H.offsetWidth < p.scrollWidth - h, i.value && L(() => {
      x();
    });
  }
  function y(p) {
    p.disabled || o(p.id);
  }
  function B() {
    ["default", "one-page"].indexOf(e.tabType) > -1 && L(() => {
      x();
    });
  }
  return A(m, () => {
    s();
  }), {
    previousButtonClass: b,
    nextButtonGroupClass: w,
    nextButtonClass: C,
    scrollTab: P,
    selectAndScrollToTab: y,
    shouldShowNavigationButtons: i,
    updateNavigationLayout: s,
    scrollToSelectedTab: B
  };
}
function Fe(e, t) {
  const { tabPages: l } = t, c = I(""), i = I(!0), o = T(() => e.searchBoxVisible), f = T(() => o.value ? l.value.filter((d) => d.props.title.includes(c.value)) : l.value.slice());
  return A(i, (m) => {
    m || (c.value = "");
  }), {
    searchTabText: c,
    hideDropDown: i,
    shouldShowSearchBox: o,
    tabsInDropdownMenu: f
  };
}
function Le(e, t, l) {
  const c = ".farris-tab-page", { tabPages: i } = l;
  let o = -1;
  function f() {
    if (o < 0) {
      const h = document.querySelector(".farris-tabs-header");
      h && (o = h.clientHeight);
    }
    return o;
  }
  function m(h) {
    const b = t.value;
    if (b) {
      const w = t.value.querySelectorAll(c);
      if (w.length > 0) {
        const C = w[h], { offsetTop: P } = C, x = P - f();
        b.scrollTop = x > 0 ? x : 0;
      }
    }
  }
  function d(h) {
    const b = i.value.findIndex((w) => w.props.id === h);
    b > -1 && m(b);
  }
  return { scrollTo: m, scrollToByPaggId: d };
}
const De = ["moz", "ms", "webkit"];
function We() {
  let e = 0;
  return (t) => {
    const l = (/* @__PURE__ */ new Date()).getTime(), c = Math.max(0, 16 - (l - e)), i = setTimeout(() => {
      t(l + c);
    }, c);
    return e = l + c, i;
  };
}
function Ee() {
  if (typeof window > "u")
    return () => 0;
  if (window.requestAnimationFrame)
    return window.requestAnimationFrame.bind(window);
  const e = De.filter((t) => `${t}RequestAnimationFrame` in window)[0];
  return e ? window[`${e}RequestAnimationFrame`] : We();
}
Ee();
I("");
function te() {
  if (typeof window > "u" || typeof navigator > "u")
    return !1;
  const e = navigator.userAgent || navigator.vendor || window.opera, t = [
    /iPhone/i,
    /iPod/i,
    /Android.*Mobile/i,
    // Android 手机通常包含 "Mobile" 字样，而平板不包含
    /webOS/i,
    /BlackBerry/i,
    /IEMobile/i,
    /Opera Mini/i,
    /Harmony/i
  ], l = [
    /iPad/i,
    /Android(?!.*Mobile)/i,
    // Android 平板通常不含 "Mobile"
    /Tablet/i,
    /PlayBook/i,
    /Kindle/i,
    /Silk/i
  ];
  for (const d of l)
    if (d.test(e))
      return !1;
  for (const d of t)
    if (d.test(e))
      return !0;
  if (typeof screen > "u")
    return !1;
  const c = "ontouchstart" in window || navigator.maxTouchPoints > 0, i = screen.width, o = screen.height, f = Math.min(i, o);
  return !!(c && f <= 768);
}
function Ne() {
  const e = te();
  return e && document.body.classList.add("f-mobile"), e;
}
typeof document < "u" && Ne();
const q = /* @__PURE__ */ ee({
  name: "FTabs",
  props: Pe,
  emits: ["tabChange", "tabRemove", "update:activeId", "Click"],
  setup(e, t) {
    const l = I(e.tabType), c = N(), i = te(), o = I(e.customClass), f = N();
    N();
    const m = I(), d = He(e, t, f), {
      activeId: h,
      changeTitleStyle: b,
      tabPages: w,
      addTab: C,
      updateTab: P,
      toolbarItems: x,
      checkActiveIdAndSelect: s,
      toggleShowTab: y,
      hasInHeadClass: B,
      toolbarVisible: p
    } = d, H = Le(e, c, d), M = Ve(e, f, H, d), {
      previousButtonClass: k,
      nextButtonClass: V,
      nextButtonGroupClass: R,
      scrollTab: F,
      updateNavigationLayout: a,
      scrollToSelectedTab: n
    } = M;
    d.setScrollToSelectedTabFunction(n);
    const u = Fe(e, d), r = je(e, f, M, H, d), g = r, O = ke(e, f, M, H, d), E = /* @__PURE__ */ new Map([["default", r], ["one-page", g], ["pills", O]]);
    T(() => {
      const S = w.value.find((j) => j.props.id === h.value);
      return S == null ? void 0 : S.slots;
    });
    const D = T(() => e.fill), U = (S, j) => {
      t.emit("Click", S, j, h.value);
    };
    me("tabs", {
      activeId: h,
      addTab: C,
      updateTab: P,
      tabPages: w,
      tabType: l,
      shouldFillParentContaner: D,
      toggleShowTab: y,
      toolbarVisible: p,
      clickToolbarItemHandler: U
    });
    let z = !1;
    const ne = T(() => ({
      "farris-tabs-header": !0,
      "farris-tabs-inHead": B.value,
      "farris-tabs-inContent": !B.value,
      "farris-tabs-nav-fill": e.tabType === "fill",
      "farris-tabs-nav-pills": e.tabType === "pills",
      "d-none": e.showHeader === !1
    })), le = T(() => {
      const S = {
        width: B.value && e.titleWidth ? `${e.titleWidth}%` : ""
      };
      return S.width && (S.flex = "unset"), S;
    }), oe = T(() => {
      const S = {
        "farris-tabs": !0,
        "f-tabs-content-fill": D.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 o.value && o.value.split(" ").reduce((j, W) => (j[W] = !0, j), S), S;
    }), ie = new ResizeObserver((S) => {
      S.length && a();
    });
    function G() {
      m.value && !z && (ie.observe(m.value), z = !0);
    }
    A(() => e.visible, (S) => {
      L(() => {
        w.value.length && s(e.activeId || w.value[0].props.id), a(), b(f), G();
      });
    }), A(() => e.autoTitleWidth, (S) => {
      L(() => {
        a(), b(f);
      });
    }), _(() => {
      e.visible && (w.value.length && s(e.activeId || w.value[0].props.id), L(() => {
        a(), b(f);
      }), G());
    });
    function se() {
      return v("button", {
        title: $.getLocaleValue("tabs.leftButton"),
        type: "button",
        class: k.value,
        onClick: () => {
          F(0, -1);
        }
      }, null);
    }
    function ae() {
      return v("button", {
        title: $.getLocaleValue("tabs.rightButton"),
        type: "button",
        class: V.value,
        onClick: () => {
          F(0, 1);
        }
      }, null);
    }
    const {
      renderMorePagesButtton: re,
      setTabsRef: ue
    } = Ae(e, u, M, d);
    ue(c);
    function ce() {
      return x.value.length ? v("div", {
        class: {
          "farris-tabs-toolbar": !0,
          "d-none": !p.value
        }
      }, [v(xe, {
        class: "f-utils-fill",
        alignment: B.value ? "right" : "left",
        items: x.value,
        visible: p.value,
        onClick: U
      }, null)]) : null;
    }
    const X = E.get(e.tabType) || E.get("default");
    function de() {
      var S, j, W, K;
      return v("div", {
        class: ne.value
      }, [v("div", {
        class: "farris-tabs-header-pre"
      }, [(j = (S = t.slots).headerPrefix) == null ? void 0 : j.call(S)]), v("div", {
        class: "farris-tabs-title scroll-tabs",
        style: le.value,
        ref: m
      }, [!i && se(), X && X(), v("div", {
        hidden: i,
        class: R.value
      }, [ae(), re()])]), ce(), v("div", {
        class: "farris-tabs-header-post"
      }, [(K = (W = t.slots).headerSuffix) == null ? void 0 : K.call(W)])]);
    }
    T(() => ({
      "farris-tabs-content": !0,
      "f-utils-fill-flex-column": D.value
    }));
    function fe() {
      var S, j;
      return (
        // <div class={tabsContentClass.value} ref={tabContentElementRef}>
        (j = (S = t.slots).default) == null ? void 0 : j.call(S)
      );
    }
    return () => e.visible ? v("div", {
      class: oe.value,
      ref: c
    }, [de(), fe()]) : null;
  }
}), qe = {
  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 J(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Te(e);
}
const Q = /* @__PURE__ */ ee({
  name: "FTabPage",
  props: qe,
  emits: [],
  setup(e, t) {
    const l = ge("tabs");
    Se();
    const c = I(e.show), i = {
      slots: t.slots,
      props: e
    }, o = I((l == null ? void 0 : l.tabType.value) || "default");
    _(() => {
      const s = l == null ? void 0 : l.tabPages.value.findIndex((y) => y.props.id === e.id);
      (!s || s === -1) && (l == null || l.addTab(i));
    }), ye(() => {
    });
    const f = T(() => (e == null ? void 0 : e.id) === (l == null ? void 0 : l.activeId.value)), m = T(() => ({
      display: f.value ? "" : "none"
    }));
    A(() => e, (s) => {
      l == null || l.updateTab({
        props: s,
        slots: t.slots
      });
    }, {
      immediate: !0,
      deep: !0
    }), A(() => e.show, (s) => {
      c.value = s, l == null || l.toggleShowTab(e.id);
    }), A(() => e.toolbarVisible, (s) => {
      f.value && l && (l.toolbarVisible.value = s);
    });
    function d() {
      var y, B;
      const s = (B = (y = t.slots).default) == null ? void 0 : B.call(y);
      return v(Y, {
        "main-title": e.title,
        class: ["farris-tab-page", c.value ? "" : "f-tab-d-none"]
      }, J(s) ? s : {
        default: () => [s]
      });
    }
    function h(s, y) {
      l && (l.activeId.value = e.id, l.clickToolbarItemHandler && l.clickToolbarItemHandler(s, y));
    }
    function b() {
      var y, B;
      const s = (B = (y = t.slots).default) == null ? void 0 : B.call(y);
      return v(Y, {
        customClass: "section-in-tab is-mobile",
        onClick: h,
        visible: e.show,
        "main-title": e.title,
        buttons: e.toolbar.buttons,
        "button-position": e.toolbar.position || e.toolbarPosition,
        "buttons-visible": e.toolbarVisible
      }, J(s) ? s : {
        default: () => [s]
      });
    }
    const w = T(() => {
      var y;
      return {
        "farris-tab-page": !0,
        "f-tab-d-none": !c.value,
        "f-tab-active": f.value && l && ((y = l.shouldFillParentContaner) == null ? void 0 : y.value)
      };
    });
    function C() {
      var y, B;
      const s = (B = (y = t.slots).default) == null ? void 0 : B.call(y);
      return v("div", {
        class: w.value,
        style: m.value
      }, [s]);
    }
    const x = (/* @__PURE__ */ new Map([["default", C], ["one-page", d], ["mobile", b]])).get(o.value) || C;
    return () => x();
  }
});
class et extends Oe {
  constructor(t, l) {
    super(t, l);
  }
  getPropertyConfig(t, l = !1) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(t), this.propertyConfig.categories.basic.properties.text = {
      title: "文本",
      type: "string",
      description: "",
      refreshPanelAfterChanged: !0
    }, this.getAppearanceProperties(t, l), this.getbBehaviorConfig(t), this.getEventPropConfig(t), this.propertyConfig;
  }
  getAppearanceProperties(t, l = !1) {
    this.propertyConfig.categories.appearance = {
      title: "外观",
      properties: {
        class: {
          description: "组件的CSS样式",
          title: "class样式",
          visible: !l
        },
        icon: {
          title: "图标",
          type: "string",
          description: ""
        },
        split: {
          title: "下拉按钮分离",
          type: "boolean",
          description: "启用下拉按钮分离，可以单独点击按钮。单独点击下拉按钮展开下拉面板",
          visible: !!(t.children && t.children.length > 0)
        }
      }
    };
  }
  getbBehaviorConfig(t) {
    const l = this.getPropertyEditorParams(t, ["Const", "Variable", "StateMachine", "Custom", "Expression"], "disabled");
    this.propertyConfig.categories.behavior = this.getBehaviorConfig(t, "", {
      disabled: {
        title: "禁用",
        type: "boolean",
        description: "按钮禁用状态",
        refreshPanelAfterChanged: !0,
        editor: l
      }
    });
  }
  getEventPropConfig(t) {
    const l = [
      {
        label: "onClick",
        name: "点击事件"
      }
    ], c = this, i = c.eventsEditorUtils.formProperties(t, c.viewModelId, l), o = c.createBaseEventProperty(i);
    this.propertyConfig.categories.eventsEditor = {
      title: "事件",
      hideTitle: !0,
      properties: o,
      // 这个属性，标记当属性变更得时候触发重新更新属性
      refreshPanelAfterChanged: !0,
      tabId: Be,
      tabName: "交互",
      setPropertyRelates(f, m) {
        const d = f.propertyValue;
        delete t[c.viewModelId], d && (d.setPropertyRelates = this.setPropertyRelates, c.eventsEditorUtils.saveRelatedParameters(t, c.viewModelId, d.events, d));
      }
    };
  }
}
q.install = (e) => {
  e.component(q.name, q), e.component(Q.name, Q);
};
export {
  Q as FTabPage,
  q as FTabs,
  et as TabToolbarItemProperty,
  Ze as createTabsCallbackResolver,
  q as default,
  qe as tabPageProps,
  Pe as tabsProps
};