easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-card.js

@@ -0,0 +1,85 @@
+var p = Object.defineProperty;
+var h = (e) => {
+  throw TypeError(e);
+};
+var f = (e, s, t) => s in e ? p(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var l = (e, s, t) => f(e, typeof s != "symbol" ? s + "" : s, t), u = (e, s, t) => s.has(e) || h("Cannot " + t);
+var d = (e, s, t) => (u(e, s, "read from private field"), t ? t.call(e) : s.get(e)), i = (e, s, t) => s.has(e) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), n = (e, s, t, c) => (u(e, s, "write to private field"), c ? c.call(e, t) : s.set(e, t), t);
+import { B as m } from "./Base.js";
+import { s as v } from "../css/ea-card.style.js";
+var a, r, o;
+class w extends m {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    i(this, a);
+    /** @type {HTMLElement} */
+    i(this, r);
+    /** @type {HTMLElement} */
+    i(this, o);
+    l(this, "state", this.properties({
+      shadow: {
+        type: ["always", "never", "hover"],
+        default: "always",
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      header: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          d(this, r).innerText = t;
+        }
+      },
+      footer: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          d(this, o).innerText = t;
+        }
+      }
+    }));
+    this.stylesheet = v, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "shadow", "header", "footer"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const t = this.computedClasslist("ea-card", {
+      [`--${this.shadow}-shadow`]: this.shadow
+    });
+    return d(this, a).className = t, t;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class="ea-card" part="container">
+        <div class="ea-card__header" part="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="ea-card__content" part="content">
+          <slot></slot>
+        </div>
+        <div class="ea-card__footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `, n(this, a, this.shadowRoot.querySelector(".ea-card")), n(this, r, this.shadowRoot.querySelector(
+      ".ea-card__header > slot[name='header']"
+    )), n(this, o, this.shadowRoot.querySelector(
+      ".ea-card__footer > slot[name='footer']"
+    ));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+a = new WeakMap(), r = new WeakMap(), o = new WeakMap();
+window.customElements.get("ea-card") || window.customElements.define("ea-card", w);
+export {
+  w as EaCard
+};

package/dist/components/ea-carousel.js

@@ -0,0 +1,374 @@
+var B = Object.defineProperty;
+var $ = (s) => {
+  throw TypeError(s);
+};
+var P = (s, r, e) => r in s ? B(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
+var k = (s, r, e) => P(s, typeof r != "symbol" ? r + "" : r, e), H = (s, r, e) => r.has(s) || $("Cannot " + e);
+var t = (s, r, e) => (H(s, r, "read from private field"), e ? e.call(s) : r.get(s)), n = (s, r, e) => r.has(s) ? $("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, e), v = (s, r, e, i) => (H(s, r, "write to private field"), i ? i.call(s, e) : r.set(s, e), e), p = (s, r, e) => (H(s, r, "access private method"), e);
+import { B as N } from "./Base.js";
+import { s as O } from "../css/ea-carousel-item.style.js";
+import { s as U } from "../css/ea-carousel.style.js";
+class j extends N {
+  static get observedAttributes() {
+    return [...super.observedAttributes];
+  }
+  constructor() {
+    super(), this.stylesheet = O, this.$render();
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-carousel-item' part='container'>
+        <slot></slot>
+      </div>
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+window.customElements.get("ea-carousel-item") || window.customElements.define("ea-carousel-item", j);
+var f, w, C, y, g, d, h, c, o, E, _, l, z, b, R, M, m, A, x, L, S, T, I;
+class W extends N {
+  constructor() {
+    super();
+    n(this, l);
+    /** @type {HTMLElement} */
+    n(this, f);
+    /** @type {HTMLElement} */
+    n(this, w);
+    /** @type {HTMLElement} */
+    n(this, C);
+    /** @type {HTMLElement} */
+    n(this, y);
+    /** @type {HTMLElement} */
+    n(this, g);
+    /** @type {HTMLElement[]} */
+    n(this, d, []);
+    /** @type {AbortController} */
+    n(this, h);
+    n(this, c, {
+      triggerAbortControllers: new AbortController()
+    });
+    n(this, o, {
+      prevIndex: 0,
+      originLength: 0,
+      timer: null,
+      pause: !1,
+      isMouseEnter: !1,
+      isEnd: !1
+    });
+    k(this, "state", this.properties({
+      height: {
+        type: String,
+        default: "100%",
+        observer: (e) => {
+          this.style.setProperty("--ea-carousel-height", e);
+        }
+      },
+      direction: {
+        type: ["horizontal", "vertical"],
+        default: "horizontal",
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      index: {
+        type: Number,
+        default: 0,
+        observer: (e, i) => {
+          if (t(this, b).call(this, e), t(this, o).isEnd) return t(this, o).isEnd = !1;
+          e < 0 ? (e = t(this, d).length - 1, i = 0, t(this, o).isEnd = !0) : e > t(this, d).length - 1 && (i = t(this, d).length - 1, e = 0, t(this, o).isEnd = !0), t(this, o).prevIndex = i, this.emit("change", {
+            detail: {
+              current: e,
+              prev: i
+            }
+          });
+        }
+      },
+      trigger: {
+        type: ["click", "hover"],
+        default: "hover",
+        /** @param {'click' | 'hover'} newVal */
+        observer: (e) => {
+          var i;
+          (i = t(this, c).triggerAbortControllers) == null || i.abort(), t(this, c).triggerAbortControllers = new AbortController(), t(this, g).addEventListener(
+            e === "hover" ? "mouseover" : "click",
+            t(this, L),
+            {
+              signal: t(this, c).triggerAbortControllers.signal
+            }
+          );
+        }
+      },
+      interval: {
+        type: Number,
+        default: 3e3,
+        observer: () => {
+        }
+      },
+      arrow: {
+        type: ["never", "always", "hover"],
+        default: "hover",
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      autoplay: {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          e ? p(this, l, m).call(this) : p(this, l, M).call(this);
+        }
+      },
+      loop: {
+        type: Boolean,
+        default: !0,
+        observer: () => {
+        }
+      },
+      "pause-on-hover": {
+        type: Boolean,
+        default: !0,
+        observer: () => {
+        }
+      },
+      "indicator-position": {
+        type: ["", "none", "outside"],
+        default: "",
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 处理 index 溢出的情况
+     * @return {number}
+     */
+    n(this, E, () => this.index === t(this, d).length ? 0 : this.index === -1 ? t(this, d).length - 1 : this.index);
+    /**
+     * 渲染 轮播图指示器，为了避免vue组件缓存，所以在初始化和组件挂载时都进行渲染
+     */
+    n(this, _, () => {
+      const e = Array.from(
+        this.querySelectorAll("ea-carousel-item"),
+        (i, a) => `<button class='ea-carousel__indicator' part='indicator' tabindex="1" data-index="${a}"></button>`
+      ).join("");
+      t(this, g).innerHTML = e, v(this, d, [
+        ...t(this, g).querySelectorAll(".ea-carousel__indicator")
+      ]);
+    });
+    /**
+     * 更新轮播图位置
+     * @param {number} index
+     */
+    n(this, b, (e = 0) => {
+      const { width: i, height: a } = t(this, f).getBoundingClientRect(), u = this.direction === "horizontal" ? "X" : "Y", q = this.direction === "horizontal" ? i : a;
+      this.style.setProperty(
+        "--ea-carousel-transform",
+        `translate${u}(-${(e + 1) * q}px)`
+      ), t(this, R).call(this);
+    });
+    /**
+     * 更新指示器位置
+     */
+    n(this, R, () => {
+      t(this, d).forEach((e, i) => {
+        e.classList.toggle("is-active", i === t(this, E).call(this));
+      });
+    });
+    /**
+     * 开启轮播图过渡属性
+     */
+    n(this, A, () => {
+      this.clientHeight, this.style.removeProperty("--ea-carousel-transition");
+    });
+    /**
+     * 关闭轮播图过渡属性
+     */
+    n(this, x, () => {
+      this.style.setProperty("--ea-carousel-transition", "none"), this.clientHeight;
+    });
+    /**
+     * 指示器 处理事件，需要按照 `this.trigger` 来确定事件名
+     * @param {MouseEvent} e
+     */
+    n(this, L, (e) => {
+      const i = t(this, g).querySelectorAll(
+        ".ea-carousel__indicator"
+      ), a = e.target.closest(".ea-carousel__indicator");
+      a && i.forEach((u, q) => {
+        u.classList.toggle("is-active", u === a), u === a && (this.index = q);
+      });
+    });
+    /**
+     * 轮播图切换结束事件，即能确保轮播图在视觉上连续
+     */
+    n(this, S, () => {
+      t(this, x).call(this), this.autoplay && !t(this, o).isMouseEnter && p(this, l, M).call(this), this.index = t(this, E).call(this), this.autoplay && !t(this, o).isMouseEnter && p(this, l, m).call(this), t(this, A).call(this), t(this, o).pause = !1;
+    });
+    /**
+     * 箭头显示事件
+     */
+    n(this, T, () => {
+      const e = () => {
+        t(this, o).isMouseEnter = !1, this["pause-on-hover"] && p(this, l, m).call(this), this.updateContainerClasslist();
+      };
+      t(this, o).isMouseEnter = !0, this["pause-on-hover"] && p(this, l, M).call(this), this.updateContainerClasslist(), t(this, f).addEventListener("mouseleave", e, {
+        signal: t(this, h).signal,
+        once: !0
+      });
+    });
+    /**
+     * 当窗口大小变化时，更新轮播图位置
+     */
+    n(this, I, () => {
+      let e = null;
+      return {
+        listener: () => {
+          clearTimeout(e), e = null, e = setTimeout(() => {
+            t(this, b).call(this, this.index);
+          }, 100);
+        },
+        unsetHandler: () => {
+          clearTimeout(e), e = null;
+        }
+      };
+    });
+    /**
+     * 上一张轮播图
+     */
+    k(this, "prev", () => {
+      t(this, o).pause || (this.index--, t(this, o).pause = !0);
+    });
+    /**
+     * 下一张轮播图
+     */
+    k(this, "next", () => {
+      t(this, o).pause || (this.index++, t(this, o).pause = !0);
+    });
+    this.stylesheet = U, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "height",
+      "index",
+      "trigger",
+      "autoplay",
+      "interval",
+      "indicator-position",
+      "arrow",
+      // "type",
+      // "card-scale",
+      "loop",
+      "direction",
+      "pause-on-hover"
+      // "motion-blur",
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-carousel",
+      {
+        ["--" + this.direction]: this.direction
+      },
+      {
+        ["arrow-" + this.arrow]: this.arrow === "always" || this.arrow === "never" || t(this, o).isMouseEnter,
+        [this["indicator-position"] + "-indicator"]: this["indicator-position"]
+      }
+    );
+    return t(this, f).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-carousel' part='container'>
+        <button class="ea-carousel__arrow arrow-left" part="arrow-left">
+          <ea-icon icon="icon-angle-left" part="arrow-left-icon"></ea-icon>
+        </button>
+        <button class="ea-carousel__arrow arrow-right" part="arrow-right">
+          <ea-icon icon="icon-angle-right" part="arrow-right-icon"></ea-icon>
+        </button>
+        <ul class="ea-carousel__content" part="content">
+            <slot></slot>
+        </ul>
+        <footer class="ea-carousel__indicator-wrap" part="indicator-wrap">
+          
+        </footer>
+      </div>
+    `, v(this, f, this.shadowRoot.querySelector(".ea-carousel")), v(this, w, this.shadowRoot.querySelector(".ea-carousel__content")), v(this, g, this.shadowRoot.querySelector(
+      ".ea-carousel__indicator-wrap"
+    )), v(this, C, this.shadowRoot.querySelector(
+      ".ea-carousel__arrow.arrow-left"
+    )), v(this, y, this.shadowRoot.querySelector(
+      ".ea-carousel__arrow.arrow-right"
+    )), t(this, _).call(this), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    var e, i;
+    super.connectedCallback(), (e = t(this, h)) == null || e.abort(), v(this, h, new AbortController());
+    for (const a in t(this, c))
+      (i = t(this, c)[a]) == null || i.abort(), t(this, c)[a] = new AbortController();
+    t(this, x).call(this), t(this, _).call(this), p(this, l, z).call(this), this.autoplay && p(this, l, m).call(this), t(this, g).addEventListener(
+      this.trigger === "hover" ? "mouseover" : "click",
+      t(this, L),
+      {
+        signal: t(this, c).triggerAbortControllers.signal
+      }
+    ), t(this, w).addEventListener(
+      "transitionend",
+      t(this, S),
+      { signal: t(this, h).signal }
+    ), this.arrow !== "never" && this.direction !== "vertical" && (t(this, C).addEventListener("click", this.prev, {
+      signal: t(this, h).signal
+    }), t(this, y).addEventListener("click", this.next, {
+      signal: t(this, h).signal
+    })), t(this, f).addEventListener("mouseenter", t(this, T), {
+      signal: t(this, h).signal
+    }), window.addEventListener("resize", t(this, I).call(this).listener, {
+      signal: t(this, h).signal
+    }), queueMicrotask(() => {
+      t(this, A).call(this);
+    });
+  }
+  $beforeUnmounted() {
+    var e, i, a;
+    (e = t(this, h)) == null || e.abort();
+    for (const u in t(this, c))
+      (i = t(this, c)[u]) == null || i.abort();
+    (a = t(this, I).call(this)) == null || a.unsetHandler();
+  }
+}
+f = new WeakMap(), w = new WeakMap(), C = new WeakMap(), y = new WeakMap(), g = new WeakMap(), d = new WeakMap(), h = new WeakMap(), c = new WeakMap(), o = new WeakMap(), E = new WeakMap(), _ = new WeakMap(), l = new WeakSet(), /**
+ * 初始化 `轮播图元素` 结构
+ */
+z = function() {
+  try {
+    this.childNodes.forEach((u) => {
+      u.tagName !== "EA-CAROUSEL-ITEM" && u.remove();
+    });
+    const e = this.children, i = e[0].cloneNode(!0), a = e[e.length - 1].cloneNode(!0);
+    t(this, o).originLength = e.length, this.insertBefore(a, this.firstChild), this.appendChild(i), queueMicrotask(() => {
+      t(this, b).call(this);
+    });
+  } catch {
+  }
+}, b = new WeakMap(), R = new WeakMap(), /**
+ * 清除轮播图自动播放
+ */
+M = function() {
+  t(this, o).timer && (clearInterval(t(this, o).timer), t(this, o).timer = null);
+}, /**
+ * 处理轮播图自动播放
+ */
+m = function() {
+  this.autoplay && (t(this, o).timer = setInterval(this.next, this.interval));
+}, A = new WeakMap(), x = new WeakMap(), L = new WeakMap(), S = new WeakMap(), T = new WeakMap(), I = new WeakMap();
+window.customElements.get("ea-carousel") || window.customElements.define("ea-carousel", W);
+export {
+  W as EaCarousel,
+  j as EaCarouselItem
+};