easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-tabs.js

@@ -0,0 +1,501 @@
+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), c = (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, h;
+    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"] === ((h = e(this, d, f)) == null ? void 0 : h.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" icon="icon-cancel" part="close-icon"></ea-icon>
+      </div>
+    `, c(this, _, this.shadowRoot.querySelector(".ea-tab")), c(this, S, this.shadowRoot.querySelector(".ea-tab__close-icon")), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    var t;
+    super.connectedCallback(), (t = e(this, p)) == null || t.abort(), c(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, g, m, L, $, y, b, C, k, 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, g);
+    /** @type {HTMLElement} */
+    a(this, m);
+    /** @type {HTMLElement} */
+    a(this, L);
+    /** @type {HTMLElement} */
+    a(this, $);
+    /** @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, g).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, k, (t, s = e(this, m), l = this["tab-position"]) => {
+      const n = l === "top" || l === "bottom", h = 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 ? h.x - T.x : h.y - T.y}px`
+      );
+    });
+    /**
+     * 更新指示器位置
+     * @param {HTMLElement} tabEl
+     * @param {HTMLElement} [lineEl]
+     * @param {HTMLElement} [tabPosition]
+     */
+    a(this, N, (t, s = e(this, m), 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 h = n.getAttribute("panel") === t;
+        n.toggleAttribute("active", h), h && this.type === "" && e(this, k).call(this, n), h && 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("icon", "icon-arrow-left"), e(this, v).setAttribute("icon", "icon-arrow-right")) : (t === "top" || t === "bottom") && (e(this, u).setAttribute("icon", "icon-arrow-up"), e(this, v).setAttribute("icon", "icon-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, h = l.indexOf(n), T = this.querySelector(`ea-tab-panel[name="${s}"]`), D = [...this.querySelectorAll("ea-tab")][h - 1 < 0 ? 0 : h - 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 icon="icon-angle-left" class="ea-tabs__prev ea-tabs__scroll" part='prev'></ea-icon>
+            <slot name='nav'></slot>
+            <ea-icon icon="icon-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>
+    `, c(this, E, this.shadowRoot.querySelector(".ea-tabs")), c(this, u, this.shadowRoot.querySelector(".ea-tabs__prev")), c(this, v, this.shadowRoot.querySelector(".ea-tabs__next")), c(this, r, this.shadowRoot.querySelector(".ea-tabs__nav")), c(this, g, this.shadowRoot.querySelector(
+      ".ea-tabs__nav > slot[name=nav]"
+    )), c(this, m, this.shadowRoot.querySelector(".ea-tabs__line")), c(this, L, this.shadowRoot.querySelector(".ea-tabs__indicator")), c(this, $, this.shadowRoot.querySelector(".ea-tabs__content")), c(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(), c(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, g).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
+    }), c(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(), g = new WeakMap(), m = new WeakMap(), L = new WeakMap(), $ = new WeakMap(), y = new WeakMap(), b = new WeakMap(), C = new WeakMap(), k = 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>
+    `, c(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
+};