ranui/dist/tab-D4CbIKei.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { T as l, _ as v, i as d, p } from "./factory-WDxu11V0.js";
import { t as u } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { a as c, i as g, l as b, n as f, o as y, t as _ } from "./utils-U-9uH7EX.js";
import { a as A, n as x } from "./ssr-BzykYefm.js";
var w = '.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:var(--ran-tab-panel-padding, var(--ran-space-3, 12px));flex-shrink:0;overflow:auto;text-align:start}.ran-tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.ran-tab-header-nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--ran-tab-active-color, var(--ran-color-primary, #006bff))}.ran-tab-header-line{position:absolute;width:0;margin-top:var(--ran-tab-line-margin-top, -2px);height:var(--ran-tab-line-height, 2px);border-radius:var(--ran-tab-line-border-radius, 2px);background:var(--ran-tab-line-color, var(--ran-color-primary, #006bff));transition:var(--ran-tab-line-transition, left .2s, width .2s, transform .2s)}.ran-tab-content{overflow:hidden;box-sizing:border-box;margin-top:var(--ran-tab-content-margin-top, var(--ran-space-2, 8px));border:var(--ran-tab-content-border, 1px solid var(--ran-color-border, #eaeaea));border-radius:var(--ran-tab-content-border-radius, var(--ran-radius-md, 12px));background:var(--ran-tab-content-background, var(--ran-color-bg-elevated, #fff))}.ran-tab-content-wrap{display:flex;align-items:flex-start;width:100%;height:100%;transition:var(--ran-tab-content-transition, transform .2s)}:host([type="line"]) .ran-tab-header-nav-item{border:solid 1px transparent}:host([type="line"]) .ran-tab-header-nav .active{color:var(--ran-tab-line-color, var(--ran-color-primary, #006bff));border:solid 1px transparent;border-color:var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2))) var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2))) transparent;border-radius:var(--ran-tab-border-radius, var(--ran-radius-sm, .25em)) var(--ran-tab-border-radius, var(--ran-radius-sm, .25em)) 0 0}:host([type="line"]) .ran-tab-header-line{transition:none;visibility:hidden}:host([type="line"]) .ran-tab-header-line:after,:host([type="line"]) .ran-tab-header-line:before{content:"";position:absolute;visibility:visible;width:9999px;height:1px;bottom:0;background:var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2)))}:host([type="line"]) .ran-tab-header-line:after{left:100%}:host([type="line"]) .ran-tab-header-line:before{right:100%}:host([align="center"]) .ran-tab-header-nav{justify-content:center}:host([align="center"]) .ran-tab-header-line{left:50%}:host([align="end"]) .ran-tab-header-nav{justify-content:flex-end}', m = 0, k = class extends x {
  static get observedAttributes() {
    return [
      "active",
      "type",
      "align",
      "effect",
      "sheet"
    ];
  }
  _events = new u();
  _container;
  _header;
  _nav;
  _line;
  _content;
  _wrap;
  _slot;
  _shadowDom;
  _tabsId;
  tabHeaderKeyMapIndex;
  _navResizeObserver;
  constructor() {
    super(), this._tabsId = ++m, this._shadowDom = _(this, w), this.tabHeaderKeyMapIndex = {};
    const t = l(), i = l(), e = l(), a = l(), r = l(), n = l(), s = d().class("ran-tab").part("tabs").children(d().class("ran-tab-header").ref(t).part("header").children(d().class("ran-tab-header-nav").ref(i).part("nav"), d().class("ran-tab-header-line").ref(e).part("indicator")), d().class("ran-tab-content").ref(a).part("content").children(d().class("ran-tab-content-wrap").ref(r).part("content-wrap").children(p().ref(n)))).build();
    this._shadowDom.appendChild(s), this._container = s, this._header = c(t, "header"), this._nav = c(i, "header nav"), this._line = c(e, "header line"), this._content = c(a, "content"), this._wrap = c(r, "content wrap"), this._slot = c(n, "slot"), this._nav.setAttribute("role", "tablist");
  }
  get align() {
    return f(this, "align", "start");
  }
  set align(t) {
    this.setAttribute("align", t);
  }
  get type() {
    return f(this, "type", "flat");
  }
  set type(t) {
    this.setAttribute("type", t);
  }
  get active() {
    return this.getAttribute("active");
  }
  set active(t) {
    t ? (this.setAttribute("active", t), this.setTabLine(t), this.setTabContent(t), this.syncTabsAria()) : this.removeAttribute("active");
  }
  get effect() {
    return this.getAttribute("effect");
  }
  set effect(t) {
    !t || t === "false" ? this.removeAttribute("effect") : this.setAttribute("effect", t);
  }
  get sheet() {
    return f(this, "sheet");
  }
  set sheet(t) {
    g(this, "sheet", t);
  }
  handlerExternalCss = () => {
    y(this, this._shadowDom, "sheet", null, this.sheet);
  };
  initTabHeaderKeyMapIndex = (t, i) => {
    if (this.tabHeaderKeyMapIndex[t]) throw new Error("tab 组件的 key 值存在重复，或者某个 tab 组件缺少 key 属性");
    this.tabHeaderKeyMapIndex[t] = i;
  };
  createTabHeader(t, i) {
    const e = t.getAttribute("label") || "", a = t.getAttribute("icon") || "", r = t.getAttribute("iconSize") || "", n = t.getAttribute("r-key") || `${i}`, s = t.getAttribute("type") || "text";
    this.initTabHeaderKeyMapIndex(n, i);
    const o = v("r-button").class("tab-header-nav-item").attr("type", s).attr("r-key", n).text(e);
    return a && o.attr("icon", a), r && o.attr("iconSize", r), b(t) && o.attr("disabled", ""), this.effect && (t.setAttribute("effect", this.effect), this._line.style.setProperty("display", "none")), t.setAttribute("r-key", n), o.build();
  }
  initTabLineAlignCenter = () => {
    const { length: t } = this._nav.children;
    let i = 0;
    for (let e = 0; e < t; e++) {
      const { width: a = 0 } = this._nav.children[e].getBoundingClientRect();
      i += a;
    }
    this._line.style.setProperty("left", `calc(50% - ${i / 2}px)`);
  };
  initTabLineAlignEnd = () => {
    const { length: t } = this._nav.children;
    let i = 0;
    for (let e = 0; e < t; e++) {
      const { width: a = 0 } = this._nav.children[e].getBoundingClientRect();
      i += a;
    }
    this._line.style.setProperty("left", `calc(100% - ${i}px)`);
  };
  setTabLine = (t) => {
    if (t) {
      const i = this.tabHeaderKeyMapIndex[t], { width: e = 0 } = this._nav.children[i].getBoundingClientRect();
      this._line.style.setProperty("width", `${e}px`);
      let a = 0;
      for (let r = 0; r < i; r++) {
        const { width: n = 0 } = this._nav.children[r].getBoundingClientRect();
        a += n;
      }
      this._line.style.setProperty("transform", `translateX(${a}px)`);
    }
  };
  _onNavResize = () => {
    this.active && this.setTabLine(this.active);
  };
  _attachNavResizeObserver = () => {
    this._navResizeObserver || typeof ResizeObserver > "u" || (this._navResizeObserver = new ResizeObserver(this._onNavResize), this._navResizeObserver.observe(this._nav));
  };
  setTabContent = (t) => {
    if (t) {
      const i = this.tabHeaderKeyMapIndex[t];
      this._wrap.style.setProperty("transform", `translateX(${i * -100}%)`);
    }
  };
  clickTabHead = (t) => {
    const i = t.currentTarget ?? t.target, e = i.getAttribute("r-key");
    !b(i) && e && this.activateKey(e);
  };
  activateKey = (t) => {
    this.setAttribute("active", t), this.setTabLine(t), this.setTabContent(t), this._nav.querySelectorAll(".active").forEach((e) => e.classList.remove("active"));
    const i = this.tabHeaderKeyMapIndex[t];
    this._nav.children[i]?.classList.add("active"), this.syncTabsAria();
  };
  tabFocusable = (t) => t._btn ?? t;
  tabIdFor = (t) => `ran-tab-${this._tabsId}-${t}`;
  panelIdFor = (t) => `ran-tabpanel-${this._tabsId}-${t}`;
  syncTabsAria = () => {
    const t = this.active, i = this._slot?.assignedElements?.() ?? [];
    [...this._nav.children].forEach((e, a) => {
      const r = e.getAttribute("r-key") ?? `${a}`, n = r === t, s = b(e), o = this.tabFocusable(e);
      o.setAttribute("role", "tab"), o.id = this.tabIdFor(r), o.setAttribute("aria-controls", this.panelIdFor(r)), o.setAttribute("aria-selected", n ? "true" : "false"), o.tabIndex = n && !s ? 0 : -1;
      const h = i[a];
      h && (h.setAttribute("role", "tabpanel"), h.id = this.panelIdFor(r), h.setAttribute("aria-labelledby", this.tabIdFor(r)), h.setAttribute("tabindex", n ? "0" : "-1"), n ? h.removeAttribute("aria-hidden") : h.setAttribute("aria-hidden", "true"));
    });
  };
  onNavKeydown = (t) => {
    if (![
      "ArrowRight",
      "ArrowLeft",
      "ArrowDown",
      "ArrowUp",
      "Home",
      "End"
    ].includes(t.key)) return;
    const i = [...this._nav.children].filter((s) => !b(s));
    if (!i.length) return;
    const e = t.target?.closest?.(".tab-header-nav-item") ?? t.target;
    let a = i.findIndex((s) => s === e);
    a < 0 && (a = i.findIndex((s) => s.getAttribute("r-key") === this.active)), a < 0 && (a = 0);
    let r = a;
    t.key === "ArrowRight" || t.key === "ArrowDown" ? r = (a + 1) % i.length : t.key === "ArrowLeft" || t.key === "ArrowUp" ? r = (a - 1 + i.length) % i.length : t.key === "Home" ? r = 0 : t.key === "End" && (r = i.length - 1), t.preventDefault();
    const n = i[r].getAttribute("r-key");
    n && (this.activateKey(n), this.tabFocusable(i[r]).focus());
  };
  updateAttribute = (t, i, e = "") => {
    const a = this.tabHeaderKeyMapIndex[t];
    t && e && this._nav.children[a] ? this._nav.children[a]?.setAttribute(i, e) : this._nav.children[a]?.removeAttribute(i);
  };
  initActive = () => {
    const t = [...this._nav.children], i = t.filter((n) => !b(n));
    let e;
    if (this.active != null && (e = i.find((n) => n.getAttribute("r-key") === this.active), e?.setAttribute("r-key", this.active)), e || (e = i.shift()), !e) return;
    const a = t.findIndex((n) => n === e), r = e?.getAttribute("r-key") || `${a}`;
    r != null && (this.setAttribute("active", `${r}`), e.classList.add("active"), this.setTabContent(r), setTimeout(() => {
      this.setTabLine(r);
    }, 200));
  };
  listenSlotChange = () => {
    this._slot.assignedElements().forEach((t, i) => {
      const e = this.createTabHeader(t, i);
      this._nav.appendChild(e), e.addEventListener("click", this.clickTabHead);
    }), this.initActive(), this.syncTabsAria(), this.align && (this.align === "center" && this.initTabLineAlignCenter(), this.align === "end" && this.initTabLineAlignEnd());
  };
  connectedCallback() {
    this.handlerExternalCss(), this._events.on(this._slot, "slotchange", this.listenSlotChange), this._events.on(this._nav, "keydown", this.onNavKeydown), this._attachNavResizeObserver();
  }
  disconnectedCallback() {
    this._events.abort(), this._navResizeObserver?.disconnect(), this._navResizeObserver = void 0;
  }
  attributeChangedCallback(t, i, e) {
    i !== e && (this.dispatchEvent(new CustomEvent("change", { detail: { active: this.active } })), t === "align" && (e === "center" && this.initTabLineAlignCenter(), e === "end" && this.initTabLineAlignEnd()), t === "effect" && [...this._nav.children].forEach((a) => {
      !this.effect || this.effect === "false" ? a.removeAttribute("effect") : a.setAttribute("effect", e);
    }), t === "active" && this.setAttribute(t, e), t === "sheet" && this.handlerExternalCss());
  }
};
A("r-tabs", k);
export {
  k as t
};