@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 D, reactive as fe, createVNode as f, withDirectives as Z, resolveDirective as ve, onMounted as U, vModelText as be, Fragment as pe, defineComponent as ee, shallowRef as q, provide as he, inject as me, onUnmounted as ge, isVNode as ye } from "vue";
import { FNotifyService as Te } from "../notify/index.esm.js";
import { getCustomClass as we, isMobilePhone as Ce, EVENT_PROPERTY_TAB_IDS as Se } from "../common/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 "bignumber.js";
import "lodash-es";
import J from "../section/index.esm.js";
import { BaseControlProperty as xe } from "../property-panel/index.esm.js";
const Pe = {
  /** 标签页头部区域的展示类型 */
  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 },
  showHeader: { type: Boolean, default: !0 },
  /** 标签页选中前事件 */
  beforeTabSelect: { type: Function, default: null }
};
function Xe() {
  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 Te(), i = I([]), o = I(e.activeId || "");
  let d = "";
  const h = I(!0), v = I([]), m = 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 H(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;
      v.value = [];
      const g = n[r];
      g && g.props.toolbar && g.props.toolbar.buttons && g.props.toolbar.buttons.length && (v.value = [...g.props.toolbar.buttons], m.value = g.props.toolbarVisible);
    }
  }
  function a(n) {
    o.value = n;
    const u = i.value.find((r) => r.props.id === n);
    v.value = [], u && u.props.toolbar && u.props.toolbar.buttons && u.props.toolbar.buttons.length && (v.value = [...u.props.toolbar.buttons], m.value = u.props.toolbarVisible), t.emit("update:activeId", n), t.emit("tabChange", {
      prevId: d,
      nextId: o.value
    });
  }
  async function y(n, u, r, g) {
    var L;
    const P = await ((L = e.beforeTabSelect) == null ? void 0 : L.call(e, {
      prevId: n,
      nextId: u
    }));
    (typeof P == "boolean" ? P : (P == null ? void 0 : P.canSelect) ?? !0) ? r && r() : (g && g(), typeof P != "boolean" && P.message && (c == null || c.warning({ message: P.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;
      d = o.value;
    }
    x(n, !1), y(d, o.value, () => {
      a(o.value), C && C();
    }, () => {
      o.value = d;
    });
  }
  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, () => {
        d = r, o.value = n, a(o.value), C && C();
      }, () => {
        o.value = r, t.emit("update:activeId", r);
      });
    } else
      a(o.value);
  }
  A(() => e.activeId, (n, u) => {
    n !== u && e.activeId !== o.value && p(n);
  });
  function O(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 P = u[g].parentNode;
        u[g].scrollWidth > P.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 j = (n) => {
    n.preventDefault(), n.stopPropagation();
  };
  function M(n, u, r = !1) {
    const g = i.value.findIndex((P) => P.props.id === u);
    i.value = i.value.filter((P) => P.props.id !== u), o.value === u && (d = u, o.value = "", x(i.value)), j(n), D(() => {
      b.value++, O(l), r && (h.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 = "", d = n, p("")) : r.props.show === !0 && !o.value && B(i.value), D(() => {
      b.value++, u && (h.value = !0);
    }));
  }
  function R(n) {
    o.value !== n && y(d, n, () => {
      d = o.value, a(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 s(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, D(() => {
      b.value++, O(l);
    }));
  }
  return {
    activeId: o,
    addTab: F,
    changeTitleStyle: O,
    removeTab: M,
    selectTab: R,
    tabPages: i,
    updateTab: s,
    toolbarItems: v,
    needUpdateNavigationLayout: b,
    checkActiveIdAndSelect: p,
    toggleShowTab: V,
    hasInHeadClass: w,
    setScrollToSelectedTabFunction: H,
    toolbarVisible: m
  };
}
function Oe(e, t, l, c, i) {
  const {
    activeId: o,
    removeTab: d,
    selectTab: h
  } = i, v = T(() => {
    const p = {
      "st-tab-text": !0,
      "text-truncate": e.tabType === "pill" && !e.autoTitleWidth,
      "farris-title-auto": e.autoTitleWidth
    };
    return we(p, t.customTitleClass);
  }), m = 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 = fe({
    content: t.title,
    overflowShown: !0
  });
  function H() {
    return e.tabType !== "pill" && !e.autoTitleWidth ? Z(f("span", {
      class: v.value,
      "data-tabid": t.id
    }, [t.title]), [[ve("tooltip"), C]]) : f("span", {
      class: v.value,
      "data-tabid": t.id,
      title: t.title
    }, [t.title]);
  }
  const x = I(t.removeable);
  function a() {
    return x.value ? f("span", {
      class: "st-drop-close",
      onClick: (p) => d(p, t.id)
    }, [f("i", {
      class: "f-icon f-icon-close"
    }, null)]) : "";
  }
  function y(p) {
    h(t.id), e.tabType === "one-page" && c.scrollToByPaggId(t.id);
  }
  function B() {
    return l.slots.title ? f("a", {
      class: w.value,
      onClick: y,
      id: `${t.id}-tab-title`
    }, [l.slots.title(l), a()]) : t.titleRenderFunction ? f("a", {
      class: w.value,
      onClick: y,
      id: `${t.id}-tab-title`
    }, [t.titleRenderFunction(), a()]) : f("a", {
      class: w.value,
      onClick: y,
      id: `${t.id}-tab-title`
    }, [H(), a()]);
  }
  return f("li", {
    class: m.value,
    style: b.value
  }, [B()]);
}
function je(e, t, l, c, i) {
  const {
    shouldShowNavigationButtons: o
  } = l, {
    tabPages: d
  } = i, h = T(() => ({
    spacer: !0,
    "f-utils-fill": !0,
    "spacer-sides-dropdown": o.value
  })), v = T(() => ({
    width: "100%",
    "justify-content": e.justifyContent
  })), m = 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 () => f("div", {
    class: h.value,
    style: v.value
  }, [f("ul", {
    class: m.value,
    ref: t
  }, [d.value.map((b) => Oe(e, b.props, b, c, i))])]);
}
function ke(e, t, l, c, i) {
  const o = I(), {
    shouldShowNavigationButtons: d
  } = l, {
    activeId: h,
    tabPages: v,
    selectTab: m
  } = i, b = I(h.value), w = T(() => v.value.map((a) => ({
    name: a.props.title,
    value: a.props.id,
    show: a.props.show,
    disabled: a.props.disabled
  }))), C = T(() => ({
    spacer: !0,
    "f-utils-fill": !0,
    "spacer-sides-dropdown": d.value
  })), H = T(() => ({
    width: "100%",
    display: "flex",
    "justify-content": e.justifyContent
  }));
  U(() => {
    o.value && (t.value = o.value.$el);
  });
  function x(a) {
    m(a);
  }
  return A(() => h.value, (a) => {
    a !== b.value && (b.value = a);
  }, {
    immediate: !0
  }), () => f("div", {
    class: C.value,
    style: H.value
  }, [f(Be, {
    items: w.value,
    modelValue: b.value,
    "onUpdate:modelValue": (a) => b.value = a,
    onChange: x,
    ref: o
  }, null)]);
}
function Me(e, t, l, c) {
  const i = I(), {
    activeId: o,
    removeTab: d,
    tabPages: h,
    selectTab: v
  } = c, {
    hideDropDown: m,
    searchTabText: b
  } = t, w = 600;
  let C = null;
  const H = T(() => {
    var n, u;
    let s = [];
    return e.searchBoxVisible ? s = (n = h.value) == null ? void 0 : n.filter((r) => r.props.title.includes(b.value)) : s = (u = h.value) == null ? void 0 : u.slice(), s;
  }), x = T(() => ({
    "dropdown-menu": !0,
    "tabs-pt28": e.searchBoxVisible,
    // 未看到样式定义
    show: !m.value,
    "d-none": m.value
  }));
  let a;
  function y(s) {
    a = s;
  }
  A(m, (s) => {
    if (a.value)
      if (s)
        i.value.style.width = null;
      else {
        const n = a.value.querySelector(".farris-tabs-header"), u = a.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", D(() => {
          const {
            width: P
          } = i.value.getClientRects()[0];
          i.value.style.width = P ? P + "px" : null;
        });
      }
  });
  function B(s) {
    return {
      "dropdown-item": !0,
      "text-truncate": !0,
      "px-2": !0,
      disabled: s.props.disabled,
      active: s.props.id === o.value,
      "d-none": s.props.show !== !0
    };
  }
  function p(s) {
    s.preventDefault(), s.stopPropagation();
  }
  function O() {
    C && clearTimeout(C);
  }
  function j() {
    m.value || (C = setTimeout(() => {
      m.value = !0;
    }, w));
  }
  function M(s, n) {
    s.stopPropagation(), n.disabled || v(n.id), m.value = !0;
  }
  function V(s, n) {
    s.stopPropagation(), d(s, n, !0);
  }
  function R(s) {
    return s.slots.title ? f("a", {
      class: "dropdown-title",
      id: `${s.props.id}-dropdown-item`
    }, [s.slots.title(s)]) : s.props.titleRenderFunction ? f("a", {
      class: "dropdown-title",
      id: `${s.props.id}-dropdown-item`
    }, [s.props.titleRenderFunction()]) : f("a", {
      class: "dropdown-title",
      id: `${s.props.id}-dropdown-item`
    }, [s.props.title]);
  }
  function F() {
    return f("div", {
      ref: i,
      class: x.value,
      onMouseenter: () => O(),
      onMouseleave: () => j()
    }, [e.searchBoxVisible && f("div", {
      onClick: (s) => p(s),
      class: "pb-1 tabs-li-absolute"
    }, [Z(f("input", {
      type: "text",
      class: "form-control",
      "onUpdate:modelValue": (s) => b.value = s
    }, null), [[be, b.value]]), f("span", {
      class: "f-icon f-icon-page-title-query tabs-icon-search"
    }, null)]), H.value.length ? f("ul", {
      class: "tab-dropdown-menu--items flex-fill"
    }, [H.value.map((s) => f("li", {
      class: B(s),
      onClick: (n) => M(n, s.props)
    }, [s.props.removeable && s.props.disabled !== !0 && f("span", {
      class: "float-right st-drop-close",
      onClick: (n) => V(n, s.props.id)
    }, [f("i", {
      class: "f-icon f-icon-close"
    }, null)]), R(s)]))]) : f("div", {
      class: "dropdown-no-data"
    }, [$.getLocaleValue("tabs.noData")])]);
  }
  return {
    renderDropdownMenu: F,
    setTabsRef: y
  };
}
function Re(e, t, l, c) {
  const {
    hideDropDown: i
  } = t, {
    renderDropdownMenu: o,
    setTabsRef: d
  } = Me(e, t, l, c), h = I(e.showDropdown);
  function v() {
    return h.value && f(pe, null, [f("button", {
      class: "btn dropdown-toggle-split dropdown-toggle",
      onClick: () => {
        i.value = !1;
      }
    }, null), o()]);
  }
  return {
    renderMorePagesButtton: v,
    setTabsRef: d
  };
}
function Ae(e, t, l, c) {
  const i = I(!1), { selectTab: o, tabPages: d, needUpdateNavigationLayout: h, activeId: v } = c, m = 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 H(p, O) {
    if (!t.value)
      return;
    const j = t.value.scrollLeft, M = t.value.scrollWidth - t.value.offsetWidth;
    if (O > 0) {
      if (t.value.scrollLeft >= M)
        return;
      t.value.scrollLeft = j + e.scrollStep + p;
    } else if (O < 0) {
      if (t.value.scrollLeft <= 0)
        return;
      t.value.scrollLeft = j - e.scrollStep - p;
    }
  }
  function x(p = -1) {
    if (!i.value || !t.value)
      return;
    p < 0 && (p = d.value.findIndex((R) => R.props.id === v.value));
    const O = e.tabType === "pills" ? ".f-capsule-item" : ".nav-item", j = t.value.querySelectorAll(O), { parentElement: M } = t.value, V = j[p];
    if (V && M) {
      const R = M.getBoundingClientRect().left, F = M.getBoundingClientRect().right, s = V.getBoundingClientRect().left, n = V.getBoundingClientRect().right;
      s < R ? H(R - s, -1) : F < n && H(n - F, 1), e.tabType === "one-page" && l.scrollTo(p);
    }
  }
  function a() {
    var j;
    if (!t.value)
      return;
    const p = t.value, O = (j = t.value) == null ? void 0 : j.parentElement;
    i.value = O && p && O.offsetWidth < p.scrollWidth - m, i.value && D(() => {
      x();
    });
  }
  function y(p) {
    p.disabled || o(p.id);
  }
  function B() {
    ["default", "one-page"].indexOf(e.tabType) > -1 && D(() => {
      x();
    });
  }
  return A(h, () => {
    a();
  }), {
    previousButtonClass: b,
    nextButtonGroupClass: w,
    nextButtonClass: C,
    scrollTab: H,
    selectAndScrollToTab: y,
    shouldShowNavigationButtons: i,
    updateNavigationLayout: a,
    scrollToSelectedTab: B
  };
}
function Ve(e, t) {
  const { tabPages: l } = t, c = I(""), i = I(!0), o = T(() => e.searchBoxVisible), d = T(() => o.value ? l.value.filter((v) => v.props.title.includes(c.value)) : l.value.slice());
  return A(i, (h) => {
    h || (c.value = "");
  }), {
    searchTabText: c,
    hideDropDown: i,
    shouldShowSearchBox: o,
    tabsInDropdownMenu: d
  };
}
function Fe(e, t, l) {
  const c = ".farris-tab-page", { tabPages: i } = l;
  let o = -1;
  function d() {
    if (o < 0) {
      const m = document.querySelector(".farris-tabs-header");
      m && (o = m.clientHeight);
    }
    return o;
  }
  function h(m) {
    const b = t.value;
    if (b) {
      const w = t.value.querySelectorAll(c);
      if (w.length > 0) {
        const C = w[m], { offsetTop: H } = C, x = H - d();
        b.scrollTop = x > 0 ? x : 0;
      }
    }
  }
  function v(m) {
    const b = i.value.findIndex((w) => w.props.id === m);
    b > -1 && h(b);
  }
  return { scrollTo: h, scrollToByPaggId: v };
}
const De = ["moz", "ms", "webkit"];
function Le() {
  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 We() {
  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`] : Le();
}
We();
I("");
function Ee() {
  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 h of l)
    if (h.test(e))
      return !1;
  for (const h of t)
    if (h.test(e))
      return !0;
  const c = "ontouchstart" in window || navigator.maxTouchPoints > 0, i = screen.width, o = screen.height, d = Math.min(i, o);
  return !!(c && d <= 768);
}
const N = /* @__PURE__ */ ee({
  name: "FTabs",
  props: Pe,
  emits: ["tabChange", "tabRemove", "update:activeId", "Click"],
  setup(e, t) {
    const l = I(e.tabType), c = q(), i = Ee(), o = I(e.customClass), d = q();
    q();
    const h = I(), v = He(e, t, d), {
      activeId: m,
      changeTitleStyle: b,
      tabPages: w,
      addTab: C,
      updateTab: H,
      toolbarItems: x,
      checkActiveIdAndSelect: a,
      toggleShowTab: y,
      hasInHeadClass: B,
      toolbarVisible: p
    } = v, O = Fe(e, c, v), j = Ae(e, d, O, v), {
      previousButtonClass: M,
      nextButtonClass: V,
      nextButtonGroupClass: R,
      scrollTab: F,
      updateNavigationLayout: s,
      scrollToSelectedTab: n
    } = j;
    v.setScrollToSelectedTabFunction(n);
    const u = Ve(e, v), r = je(e, d, j, O, v), g = r, P = ke(e, d, j, O, v), E = /* @__PURE__ */ new Map([["default", r], ["one-page", g], ["pills", P]]);
    T(() => {
      const S = w.value.find((k) => k.props.id === m.value);
      return S == null ? void 0 : S.slots;
    });
    const L = T(() => e.fill), _ = (S, k) => {
      t.emit("Click", S, k, m.value);
    };
    he("tabs", {
      activeId: m,
      addTab: C,
      updateTab: H,
      tabPages: w,
      tabType: l,
      shouldFillParentContaner: L,
      toggleShowTab: y,
      toolbarVisible: p,
      clickToolbarItemHandler: _
    });
    let z = !1;
    const te = 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
    })), ne = T(() => {
      const S = {
        width: B.value && e.titleWidth ? `${e.titleWidth}%` : ""
      };
      return S.width && (S.flex = "unset"), S;
    }), le = T(() => {
      const S = {
        "farris-tabs": !0,
        "f-tabs-content-fill": L.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((k, W) => (k[W] = !0, k), S), S;
    }), oe = new ResizeObserver((S) => {
      S.length && s();
    });
    function G() {
      h.value && !z && (oe.observe(h.value), z = !0);
    }
    A(() => e.visible, (S) => {
      D(() => {
        w.value.length && a(e.activeId || w.value[0].props.id), s(), b(d), G();
      });
    }), A(() => e.autoTitleWidth, (S) => {
      D(() => {
        s(), b(d);
      });
    }), U(() => {
      e.visible && (w.value.length && a(e.activeId || w.value[0].props.id), D(() => {
        s(), b(d);
      }), G());
    });
    function ie() {
      return f("button", {
        title: $.getLocaleValue("tabs.leftButton"),
        type: "button",
        class: M.value,
        onClick: () => {
          F(0, -1);
        }
      }, null);
    }
    function ae() {
      return f("button", {
        title: $.getLocaleValue("tabs.rightButton"),
        type: "button",
        class: V.value,
        onClick: () => {
          F(0, 1);
        }
      }, null);
    }
    const {
      renderMorePagesButtton: se,
      setTabsRef: re
    } = Re(e, u, j, v);
    re(c);
    function ue() {
      return x.value.length ? f("div", {
        class: {
          "farris-tabs-toolbar": !0,
          "d-none": !p.value
        }
      }, [f(Ie, {
        class: "f-utils-fill",
        alignment: B.value ? "right" : "left",
        items: x.value,
        visible: p.value,
        onClick: _
      }, null)]) : null;
    }
    const K = E.get(e.tabType) || E.get("default");
    function ce() {
      var S, k, W, Y;
      return f("div", {
        class: te.value
      }, [f("div", {
        class: "farris-tabs-header-pre"
      }, [(k = (S = t.slots).headerPrefix) == null ? void 0 : k.call(S)]), f("div", {
        class: "farris-tabs-title scroll-tabs",
        style: ne.value,
        ref: h
      }, [!i && ie(), K && K(), f("div", {
        hidden: i,
        class: R.value
      }, [ae(), se()])]), ue(), f("div", {
        class: "farris-tabs-header-post"
      }, [(Y = (W = t.slots).headerSuffix) == null ? void 0 : Y.call(W)])]);
    }
    T(() => ({
      "farris-tabs-content": !0,
      "f-utils-fill-flex-column": L.value
    }));
    function de() {
      var S, k;
      return (
        // <div class={tabsContentClass.value} ref={tabContentElementRef}>
        (k = (S = t.slots).default) == null ? void 0 : k.call(S)
      );
    }
    return () => e.visible ? f("div", {
      class: le.value,
      ref: c
    }, [ce(), de()]) : 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 Q(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ye(e);
}
const X = /* @__PURE__ */ ee({
  name: "FTabPage",
  props: qe,
  emits: [],
  setup(e, t) {
    const l = me("tabs");
    Ce();
    const c = I(e.show), i = {
      slots: t.slots,
      props: e
    }, o = I((l == null ? void 0 : l.tabType.value) || "default");
    U(() => {
      const a = l == null ? void 0 : l.tabPages.value.findIndex((y) => y.props.id === e.id);
      (!a || a === -1) && (l == null || l.addTab(i));
    }), ge(() => {
    });
    const d = T(() => (e == null ? void 0 : e.id) === (l == null ? void 0 : l.activeId.value)), h = T(() => ({
      display: d.value ? "" : "none"
    }));
    A(() => e, (a) => {
      l == null || l.updateTab({
        props: a,
        slots: t.slots
      });
    }, {
      immediate: !0,
      deep: !0
    }), A(() => e.show, (a) => {
      c.value = a, l == null || l.toggleShowTab(e.id);
    }), A(() => e.toolbarVisible, (a) => {
      d.value && l && (l.toolbarVisible.value = a);
    });
    function v() {
      var y, B;
      const a = (B = (y = t.slots).default) == null ? void 0 : B.call(y);
      return f(J, {
        "main-title": e.title,
        class: ["farris-tab-page", c.value ? "" : "f-tab-d-none"]
      }, Q(a) ? a : {
        default: () => [a]
      });
    }
    function m(a, y) {
      l && (l.activeId.value = e.id, l.clickToolbarItemHandler && l.clickToolbarItemHandler(a, y));
    }
    function b() {
      var y, B;
      const a = (B = (y = t.slots).default) == null ? void 0 : B.call(y);
      return f(J, {
        customClass: "section-in-tab is-mobile",
        onClick: m,
        visible: e.show,
        "main-title": e.title,
        buttons: e.toolbar.buttons,
        "button-position": e.toolbar.position || e.toolbarPosition,
        "buttons-visible": e.toolbarVisible
      }, Q(a) ? a : {
        default: () => [a]
      });
    }
    const w = T(() => {
      var y;
      return {
        "farris-tab-page": !0,
        "f-tab-d-none": !c.value,
        "f-tab-active": d.value && l && ((y = l.shouldFillParentContaner) == null ? void 0 : y.value)
      };
    });
    function C() {
      var y, B;
      const a = (B = (y = t.slots).default) == null ? void 0 : B.call(y);
      return f("div", {
        class: w.value,
        style: h.value
      }, [a]);
    }
    const x = (/* @__PURE__ */ new Map([["default", C], ["one-page", v], ["mobile", b]])).get(o.value) || C;
    return () => x();
  }
});
class Ze extends xe {
  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: "按钮禁用状态",
        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: Se,
      tabName: "交互",
      setPropertyRelates(d, h) {
        const v = d.propertyValue;
        delete t[c.viewModelId], v && (v.setPropertyRelates = this.setPropertyRelates, c.eventsEditorUtils.saveRelatedParameters(t, c.viewModelId, v.events, v));
      }
    };
  }
}
N.install = (e) => {
  e.component(N.name, N), e.component(X.name, X);
};
export {
  X as FTabPage,
  N as FTabs,
  Ze as TabToolbarItemProperty,
  Xe as createTabsCallbackResolver,
  N as default,
  qe as tabPageProps,
  Pe as tabsProps
};