easy-component-ui 3.0.13 → 3.0.14

package/dist/components/ea-tabs.js

@@ -1,501 +0,0 @@
-var K = Object.defineProperty;
-var j = (i) => {
-  throw TypeError(i);
-};
-var Q = (i, o, t) => o in i ? K(i, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[o] = t;
-var q = (i, o, t) => Q(i, typeof o != "symbol" ? o + "" : o, t), F = (i, o, t) => o.has(i) || j("Cannot " + t);
-var e = (i, o, t) => (F(i, o, "read from private field"), t ? t.call(i) : o.get(i)), a = (i, o, t) => o.has(i) ? j("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(i) : o.set(i, t), h = (i, o, t, s) => (F(i, o, "write to private field"), s ? s.call(i, t) : o.set(i, t), t);
-import { B as U } from "./Base.js";
-import { s as X } from "../css/ea-tab.style.js";
-import { s as Y } from "../css/ea-tabs.style.js";
-import { t as G } from "../utils/timeout.js";
-import { s as Z } from "../css/ea-tab-panel.style.js";
-var d, f, _, S, p, x;
-class V extends U {
-  constructor() {
-    super();
-    a(this, d);
-    /** @type {HTMLElement} */
-    a(this, _);
-    /** @type {HTMLElement} */
-    a(this, S);
-    /** @type {AbortController} */
-    a(this, p, new AbortController());
-    q(this, "state", this.properties({
-      panel: {
-        type: String,
-        default: "",
-        observer: () => {
-        }
-      },
-      type: {
-        type: ["", "card", "border-card"],
-        default: () => {
-          var t;
-          return ((t = e(this, d, f)) == null ? void 0 : t.getAttribute("type")) || "";
-        },
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      active: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      "tab-position": {
-        type: ["", "card", "border-card"],
-        default: () => {
-          var t;
-          return ((t = e(this, d, f)) == null ? void 0 : t.getAttribute("tab-position")) || "top";
-        },
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      editable: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      closable: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 关闭事件，为了避免click事件优先触发。
-     * @param {MouseEvent} e
-     */
-    a(this, x, (t) => {
-      t.preventDefault(), t.stopImmediatePropagation(), this.emit("ea-tab-close-icon-click", {
-        detail: {
-          panel: this.panel
-        },
-        bubbles: !0
-      });
-    });
-    this.stylesheet = X, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "panel",
-      "type",
-      "disabled",
-      "active",
-      "tab-position",
-      "editable",
-      "closable"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    var l, n, c;
-    let t = (l = e(this, d, f)) == null ? void 0 : l.querySelectorAll("ea-tab");
-    t = (t == null ? void 0 : t.length) > 0 ? [...t] : [];
-    const s = this.computedClasslist(
-      "ea-tab",
-      {
-        ["--" + this.type]: this.type === ((n = e(this, d, f)) == null ? void 0 : n.getAttribute("type")) || "",
-        ["--" + this["tab-position"]]: this["tab-position"] === ((c = e(this, d, f)) == null ? void 0 : c.getAttribute("tab-position")) || "top"
-      },
-      {
-        disabled: this.disabled,
-        active: this.active,
-        last: t.slice(-1)[0] === this,
-        first: t.slice(0)[0] === this,
-        closable: this.closable ? this.closable : this.editable
-      }
-    );
-    return e(this, _).className = s, s;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-tab' part='container'>
-        <slot></slot>
-        <ea-icon class="ea-tab__close-icon" name="xmark" part="close-icon"></ea-icon>
-      </div>
-    `, h(this, _, this.shadowRoot.querySelector(".ea-tab")), h(this, S, this.shadowRoot.querySelector(".ea-tab__close-icon")), this.updateContainerClasslist();
-  }
-  connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = e(this, p)) == null || t.abort(), h(this, p, new AbortController()), e(this, S).addEventListener("click", e(this, x), {
-      signal: e(this, p).signal
-    });
-  }
-  $beforeUnmounted() {
-    e(this, p).abort();
-  }
-}
-d = new WeakSet(), f = function() {
-  try {
-    return this.closest("ea-tabs");
-  } catch {
-    return null;
-  }
-}, _ = new WeakMap(), S = new WeakMap(), p = new WeakMap(), x = new WeakMap();
-window.customElements.get("ea-tab") || window.customElements.define("ea-tab", V);
-var E, u, v, r, m, g, L, k, y, b, C, $, N, A, B, H, w, P, I, W, O;
-class tt extends U {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    a(this, E);
-    /** @type {HTMLElement} */
-    a(this, u);
-    /** @type {HTMLElement} */
-    a(this, v);
-    /** @type {HTMLElement} */
-    a(this, r);
-    /** @type {HTMLSlotElement} */
-    a(this, m);
-    /** @type {HTMLElement} */
-    a(this, g);
-    /** @type {HTMLElement} */
-    a(this, L);
-    /** @type {HTMLElement} */
-    a(this, k);
-    /** @type {HTMLSlotElement} */
-    a(this, y);
-    /** @type {AbortController} */
-    a(this, b, new AbortController());
-    /** @type {ResizeObserver} */
-    a(this, C);
-    q(this, "state", this.properties({
-      type: {
-        type: ["", "card", "border-card"],
-        default: "",
-        observer: (t) => {
-          this.updateContainerClasslist(), [...e(this, y).assignedElements()].filter(
-            (s) => s.tagName.toLowerCase() === "ea-tab-panel" || s.tagName.toLowerCase() === "ea-tab"
-          ).forEach((s) => s.setAttribute("type", t));
-        }
-      },
-      active: {
-        type: String,
-        default: () => {
-          const t = this.getAttribute("active");
-          if (t)
-            return t;
-          {
-            const s = this.querySelector("ea-tab");
-            return s ? s.getAttribute("panel") : "";
-          }
-        },
-        observer: (t) => {
-          e(this, A).call(this, t), this.emit("tabs-change", {
-            name: t
-          });
-        }
-      },
-      "tab-position": {
-        type: ["top", "bottom", "left", "right"],
-        default: "top",
-        observer: (t) => {
-          this.updateContainerClasslist(), e(this, H).call(this, t), e(this, A).call(this, this.active), [...e(this, m).assignedElements()].filter(
-            (s) => s.tagName.toLowerCase() === "ea-tab-panel" || s.tagName.toLowerCase() === "ea-tab"
-          ).forEach((s) => s.setAttribute("tab-position", t));
-        }
-      },
-      editable: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-        }
-      }
-    }));
-    /**
-     * 更新指示器位置
-     * @param {HTMLElement} tabEl
-     * @param {HTMLElement} lineEl
-     * @param {HTMLElement} tabPosition
-     */
-    a(this, $, (t, s = e(this, g), l = this["tab-position"]) => {
-      const n = l === "top" || l === "bottom", c = t.getBoundingClientRect(), T = s.getBoundingClientRect();
-      this.style.setProperty(
-        "--ea-tabs-indicator-size",
-        `${n ? t.offsetWidth : t.offsetHeight}px`
-      ), this.style.setProperty(
-        "--ea-tabs-indicator-x",
-        `${n ? c.x - T.x : c.y - T.y}px`
-      );
-    });
-    /**
-     * 更新指示器位置
-     * @param {HTMLElement} tabEl
-     * @param {HTMLElement} [lineEl]
-     * @param {HTMLElement} [tabPosition]
-     */
-    a(this, N, (t, s = e(this, g), l = this["tab-position"]) => {
-      const n = t.getBoundingClientRect();
-      e(this, r).scrollTo({
-        left: t.offsetLeft + n.width,
-        top: t.offsetTop + n.height,
-        behavior: "smooth"
-      });
-    });
-    /**
-     * 更新 tab 激活状态
-     * @param {String} activeName
-     */
-    a(this, A, (t = this.active) => {
-      const s = [...this.querySelectorAll("ea-tab-panel")];
-      [...this.querySelectorAll("ea-tab")].forEach((n) => {
-        const c = n.getAttribute("panel") === t;
-        n.toggleAttribute("active", c), c && this.type === "" && e(this, $).call(this, n), c && e(this, N).call(this, n);
-      }), s.forEach((n) => {
-        n.toggleAttribute(
-          "active",
-          t === n.getAttribute("name")
-        );
-      });
-    });
-    /**
-     * 更新 tab 是否为可编辑状态
-     * @param {Boolean} isEditable
-     */
-    a(this, B, (t = this.editable) => {
-      this.querySelectorAll("ea-tab").forEach((s) => {
-        s.toggleAttribute("editable", t);
-      });
-    });
-    /**
-     * @param {"top" | "bottom" | "left" | "right"} tabPosition
-     */
-    a(this, H, (t = this["tab-position"]) => {
-      t === "left" || t === "right" ? (e(this, u).setAttribute("name", "arrow-left"), e(this, v).setAttribute("name", "arrow-right")) : (t === "top" || t === "bottom") && (e(this, u).setAttribute("name", "arrow-up"), e(this, v).setAttribute("name", "arrow-down"));
-    });
-    /**
-     * 当 tab slot 内容变化时触发
-     * @param {Event} e
-     */
-    a(this, w, () => {
-      [...this.querySelectorAll("ea-tab")].forEach((s) => {
-        s.setAttribute("slot", "nav");
-        try {
-          s.updateContainerClasslist();
-        } catch {
-        }
-      }), e(this, A).call(this, this.active), e(this, B).call(this, this.editable), this.updateContainerClasslist(), G(() => {
-        const s = [...this.querySelectorAll("ea-tab")].find(
-          (n) => n.hasAttribute("active")
-        ), l = s.getBoundingClientRect();
-        e(this, r).scrollTo({
-          left: s.offsetLeft + l.width,
-          top: s.offsetTop + l.height,
-          behavior: "smooth"
-        });
-      }, 0);
-    });
-    /**
-     * 标签切换事件
-     * @param {MouseEvent} e
-     */
-    a(this, P, (t) => {
-      const s = t.target.closest("ea-tab");
-      if (!s || s != null && s.hasAttribute("disabled")) return;
-      const l = s.getAttribute("panel");
-      this.active = l, this.emit("tab-click", {
-        detail: {
-          name: l,
-          panel: this.querySelector(`ea-tab-panel[name="${l}"]`)
-        },
-        bubbles: !0
-      });
-    });
-    /**
-     * 滚动至上一视口
-     */
-    a(this, I, () => {
-      e(this, r).scrollTo({
-        left: e(this, r).scrollLeft - e(this, r).offsetWidth,
-        top: e(this, r).scrollTop - e(this, r).offsetHeight,
-        behavior: "smooth"
-      });
-    });
-    /**
-     * 滚动至下一视口
-     */
-    a(this, W, () => {
-      e(this, r).scrollTo({
-        left: e(this, r).scrollLeft + e(this, r).offsetWidth,
-        top: e(this, r).scrollTop + e(this, r).offsetHeight,
-        behavior: "smooth"
-      });
-    });
-    /**
-     * 删除标签
-     * @param {CustomEvent} e
-     */
-    a(this, O, (t) => {
-      t.preventDefault(), t.stopImmediatePropagation();
-      const s = t.detail.panel, l = [...this.querySelectorAll("ea-tab")], n = t.target, c = l.indexOf(n), T = this.querySelector(`ea-tab-panel[name="${s}"]`), D = [...this.querySelectorAll("ea-tab")][c - 1 < 0 ? 0 : c - 1].getAttribute("panel");
-      this.setAttribute("active", D), T.remove(), n.remove(), this.emit("tab-remove", {
-        detail: {
-          name: D
-        }
-      });
-    });
-    this.stylesheet = Y, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "type",
-      "active",
-      "tab-position",
-      "editable"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = e(this, r).scrollWidth > e(this, r).clientWidth || e(this, r).scrollHeight > e(this, r).clientHeight, s = this.computedClasslist(
-      "ea-tabs",
-      {
-        ["--" + this.type]: this.type,
-        ["--" + this["tab-position"]]: this["tab-position"]
-      },
-      {
-        overflow: t
-      }
-    );
-    return e(this, E).className = s, s;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-tabs' part='container'>
-        <nav class='ea-tabs__nav' part='nav'>
-            <ea-icon name="angle-left" class="ea-tabs__prev ea-tabs__scroll" part='prev'></ea-icon>
-            <slot name='nav'></slot>
-            <ea-icon name="angle-right" class="ea-tabs__next ea-tabs__scroll" part='next'></ea-icon>
-        </nav>
-        <div class="ea-tabs__line" part="line" tabindex="-1">
-            <span class="ea-tabs__indicator" part="indicator"></span>
-        </div>
-        <main class='ea-tabs__content' part='content'>
-          <slot></slot>
-        </main>
-      </div>
-    `, h(this, E, this.shadowRoot.querySelector(".ea-tabs")), h(this, u, this.shadowRoot.querySelector(".ea-tabs__prev")), h(this, v, this.shadowRoot.querySelector(".ea-tabs__next")), h(this, r, this.shadowRoot.querySelector(".ea-tabs__nav")), h(this, m, this.shadowRoot.querySelector(
-      ".ea-tabs__nav > slot[name=nav]"
-    )), h(this, g, this.shadowRoot.querySelector(".ea-tabs__line")), h(this, L, this.shadowRoot.querySelector(".ea-tabs__indicator")), h(this, k, this.shadowRoot.querySelector(".ea-tabs__content")), h(this, y, this.shadowRoot.querySelector(
-      ".ea-tabs__content > slot"
-    )), e(this, w).call(this);
-  }
-  connectedCallback() {
-    var t, s;
-    super.connectedCallback(), (t = e(this, b)) == null || t.abort(), h(this, b, new AbortController()), (s = e(this, C)) == null || s.unobserve(), e(this, r).addEventListener("click", e(this, P), {
-      signal: e(this, b).signal
-    }), e(this, m).addEventListener("slotchange", e(this, w), {
-      signal: e(this, b).signal
-    }), e(this, y).addEventListener("slotchange", e(this, w), {
-      signal: e(this, b).signal
-    }), e(this, u).addEventListener("click", e(this, I), {
-      signal: e(this, b).signal
-    }), e(this, v).addEventListener("click", e(this, W), {
-      signal: e(this, b).signal
-    }), this.addEventListener("ea-tab-close-icon-click", e(this, O), {
-      signal: e(this, b).signal
-    }), h(this, C, new ResizeObserver(() => {
-      this.updateContainerClasslist();
-    }).observe(e(this, r))), G(() => {
-      this.updateContainerClasslist();
-    }, 100);
-  }
-  $beforeUnmounted() {
-    var t, s;
-    (t = e(this, b)) == null || t.abort(), (s = e(this, C)) == null || s.unobserve();
-  }
-}
-E = new WeakMap(), u = new WeakMap(), v = new WeakMap(), r = new WeakMap(), m = new WeakMap(), g = new WeakMap(), L = new WeakMap(), k = new WeakMap(), y = new WeakMap(), b = new WeakMap(), C = new WeakMap(), $ = new WeakMap(), N = new WeakMap(), A = new WeakMap(), B = new WeakMap(), H = new WeakMap(), w = new WeakMap(), P = new WeakMap(), I = new WeakMap(), W = new WeakMap(), O = new WeakMap();
-window.customElements.get("ea-tabs") || window.customElements.define("ea-tabs", tt);
-var z, J, R, M;
-class et extends U {
-  constructor() {
-    super();
-    a(this, z);
-    /** @type {HTMLElement} */
-    a(this, R);
-    /** @type {AbortController} */
-    a(this, M, new AbortController());
-    q(this, "state", this.properties({
-      name: {
-        type: String,
-        default: "",
-        observer: () => {
-        }
-      },
-      type: {
-        type: ["", "card", "border-card"],
-        default: () => {
-          var t;
-          return ((t = e(this, z, J)) == null ? void 0 : t.getAttribute("type")) || "";
-        },
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    this.stylesheet = Z, this.$render();
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "name", "type"];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = this.computedClasslist("ea-tab-panel", {
-      ["--" + this.type]: this.type
-    });
-    return e(this, R).className = t, t;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-tab-panel' part='container'>
-        <slot></slot>
-      </div>
-    `, h(this, R, this.shadowRoot.querySelector(".ea-tab-panel"));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  $beforeUnmounted() {
-    e(this, M).abort();
-  }
-}
-z = new WeakSet(), J = function() {
-  try {
-    return this.closest("ea-tabs");
-  } catch {
-    return null;
-  }
-}, R = new WeakMap(), M = new WeakMap();
-window.customElements.get("ea-tab-panel") || window.customElements.define("ea-tab-panel", et);
-export {
-  V as EaTab,
-  et as EaTabPanel,
-  tt as EaTabs
-};