easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-skeleton.js

@@ -1,66 +1,54 @@
-var N = Object.defineProperty;
-var y = (t) => {
-  throw TypeError(t);
+var q = Object.defineProperty;
+var E = (e) => {
+  throw TypeError(e);
 };
-var S = (t, s, e) => s in t ? N(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var v = (t, s, e) => S(t, typeof s != "symbol" ? s + "" : s, e), w = (t, s, e) => s.has(t) || y("Cannot " + e);
-var a = (t, s, e) => (w(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), c = (t, s, e, i) => (w(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
-import { B as E } from "./Base.js";
-import { s as T } from "../css/ea-skeleton.style.js";
-import { E as k } from "../utils/Utils.js";
-import { s as A } from "../css/ea-skeleton-item.style.js";
-var u, f, r, h, l, g, p;
-class M extends E {
+var x = (e, a, t) => a in e ? q(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
+var w = (e, a, t) => x(e, typeof a != "symbol" ? a + "" : a, t), k = (e, a, t) => a.has(e) || E("Cannot " + t);
+var s = (e, a, t) => (k(e, a, "read from private field"), t ? t.call(e) : a.get(e)), r = (e, a, t) => a.has(e) ? E("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), u = (e, a, t, i) => (k(e, a, "write to private field"), i ? i.call(e, t) : a.set(e, t), t), c = (e, a, t) => (k(e, a, "access private method"), t);
+import { B as S } from "./Base.js";
+import { s as H } from "../css/ea-skeleton.style.js";
+import { E as N } from "../utils/Utils.js";
+import { s as $ } from "../css/ea-skeleton-item.style.js";
+var f, C, h, m, n, l, v, T, A, L, y, p;
+class B extends S {
   constructor() {
     super();
+    r(this, l);
     /** @type {HTMLElement} */
-    o(this, u);
-    /** @type {HTMLElement} */
-    o(this, f);
-    /** @type {HTMLElement} */
-    o(this, r);
+    r(this, f);
+    /** @type {HTMLSlotElement} */
+    r(this, C);
+    /** @type {HTMLSlotElement} */
+    r(this, h);
     /** @type {AbortController} */
-    o(this, h);
-    o(this, l, {
+    r(this, m);
+    r(this, n, {
       isChildrenReady: !1,
       templateNode: null,
       loadingThrottle: null
     });
-    v(this, "state", this.properties({
+    w(this, "state", this.properties({
       rows: {
         type: Number,
         default: 4,
-        observer: () => {
+        observer: async (t) => {
+          await c(this, l, v).call(this), s(this, y).call(this, t), s(this, p).call(this, this.animated);
         }
       },
       animated: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          a(this, p).call(this, e);
+        observer: async (t) => {
+          await c(this, l, v).call(this), s(this, p).call(this, t);
         }
       },
       count: {
         type: Number,
         default: 1,
-        observer: async (e) => {
-          var C;
-          a(this, l).isChildrenReady || (await customElements.whenDefined("ea-skeleton-item"), a(this, l).isChildrenReady = !0);
-          let i = [...this.querySelectorAll("[slot='template']")];
-          if (i.length || (i = [a(this, r)]), !a(this, l).templateNode) {
-            const n = document.createDocumentFragment();
-            i.forEach((b) => {
-              n.appendChild(b.cloneNode(!0));
-            }), a(this, l).templateNode = n;
-          }
-          const d = document.createDocumentFragment();
-          for (let n = 0; n < e; n++) {
-            const b = a(this, l).templateNode.cloneNode(!0);
-            d.appendChild(b);
-          }
-          i.length > 1 ? (i.forEach((n) => {
-            n.remove();
-          }), this.appendChild(d)) : i.length === 1 && i[0].tagName === "EA-SKELETON-ITEM" ? ((C = i[0]) == null || C.remove(), this.appendChild(d)) : (i[0].innerHTML = "", i[0].appendChild(d));
+        observer: async (t) => {
+          await c(this, l, v).call(this);
+          const i = c(this, l, T).call(this), o = c(this, l, L).call(this, t, i), [d] = i, b = i.length > 1, M = (d == null ? void 0 : d.tagName) === "EA-SKELETON-ITEM";
+          b || M ? (i.forEach((R) => R.remove()), this.appendChild(o)) : (d.innerHTML = "", d.appendChild(o));
         }
       },
       "throttle-leading": {
@@ -78,17 +66,17 @@ class M extends E {
       loading: {
         type: Boolean,
         default: !0,
-        observer: (e) => {
+        observer: (t) => {
           if (this["throttle-trailing"] || this["throttle-leading"])
             try {
-              clearTimeout(a(this, l).loadingThrottle), a(this, l).loadingThrottle = null;
+              clearTimeout(s(this, n).loadingThrottle), s(this, n).loadingThrottle = null;
             } catch {
             }
-          a(this, l).loadingThrottle = k.timeout(
+          s(this, n).loadingThrottle = N.timeout(
             () => {
               this.updateContainerClasslist();
             },
-            (e ? this["throttle-trailing"] : this["throttle-leading"]) || 0
+            (t ? this["throttle-trailing"] : this["throttle-leading"]) || 0
           );
         }
       }
@@ -98,23 +86,23 @@ class M extends E {
      * @param {Number} rows
      * @returns
      */
-    o(this, g, (e = this.rows) => {
-      this.querySelectorAll("ea-skeleton-item").length || (a(this, r).innerHTML = `
-      ${Array.from({ length: e }).map(
-        () => k.EaElement.h("ea-skeleton-item", null, {
+    r(this, y, (t = this.rows) => {
+      this.querySelectorAll("ea-skeleton-item").length || (s(this, h).innerHTML = this.html(`
+      ${Array.from({ length: t }).map(
+        () => N.EaElement.h("ea-skeleton-item", null, {
           variant: "p",
           animated: this.animated
         })
-      ).join("")}`);
+      ).join("")}`));
     });
     /**
      * 更新动画状态
      * @param {boolean} isAnimated
      */
-    o(this, p, (e) => {
-      [...this.querySelectorAll("ea-skeleton-item")].forEach((d) => d.toggleAttribute("animated", e));
+    r(this, p, (t) => {
+      s(this, h).assignedElements().filter((o) => o.tagName.toLocaleLowerCase() === "ea-skeleton-item").concat([...s(this, h).querySelectorAll("ea-skeleton-item")]).forEach((o) => o.toggleAttribute("animated", t));
     });
-    this.stylesheet = T, this.$render();
+    this.stylesheet = H, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -133,41 +121,70 @@ class M extends E {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
+    const t = this.computedClasslist(
       "ea-skeleton",
       {},
       {
         loading: this.loading
       }
     );
-    return a(this, u).className = e, e;
+    return s(this, f).className = t, t;
   }
   async $render() {
     this.shadowRoot.innerHTML = `
       <div class='ea-skeleton' part='container'>
-        <slot id="default"></slot>
-        <slot id="template" name="template"></slot>
+        <slot id="default" part="default-slot"></slot>
+        <slot id="template" name="template" part="template-slot"></slot>
       </div>
-    `, c(this, u, this.shadowRoot.querySelector(".ea-skeleton")), c(this, f, this.shadowRoot.querySelector("#default")), c(this, r, this.shadowRoot.querySelector("#template")), this.updateContainerClasslist();
+    `, u(this, f, this.shadowRoot.querySelector(".ea-skeleton")), u(this, C, this.shadowRoot.querySelector("#default")), u(this, h, this.shadowRoot.querySelector("#template")), this.updateContainerClasslist();
   }
   async connectedCallback() {
     var i;
-    super.connectedCallback(), (i = a(this, h)) == null || i.abort(), c(this, h, new AbortController());
-    const e = () => {
-      a(this, p).call(this, this.animated);
+    super.connectedCallback(), (i = s(this, m)) == null || i.abort(), u(this, m, new AbortController());
+    const t = () => {
+      s(this, p).call(this, this.animated);
     };
-    a(this, g).call(this), a(this, r).addEventListener("slotchange", e, {
-      signal: a(this, h).signal
+    s(this, y).call(this), s(this, h).addEventListener("slotchange", t, {
+      signal: s(this, m).signal
     });
   }
   $beforeUnmounted() {
-    var e;
-    (e = a(this, h)) == null || e.abort();
+    var t;
+    (t = s(this, m)) == null || t.abort();
   }
 }
-u = new WeakMap(), f = new WeakMap(), r = new WeakMap(), h = new WeakMap(), l = new WeakMap(), g = new WeakMap(), p = new WeakMap();
-window.customElements.get("ea-skeleton") || window.customElements.define("ea-skeleton", M);
-const L = `
+f = new WeakMap(), C = new WeakMap(), h = new WeakMap(), m = new WeakMap(), n = new WeakMap(), l = new WeakSet(), v = async function() {
+  s(this, n).isChildrenReady || (await customElements.whenDefined("ea-skeleton-item"), s(this, n).isChildrenReady = !0);
+}, /**
+ * 获取模板元素
+ * @returns {HTMLElement[]}
+ */
+T = function() {
+  const t = [...this.querySelectorAll("[slot='template']")];
+  return t.length ? t : [s(this, h)];
+}, /**
+ * 克隆模板元素
+ * @param {HTMLElement[]} elements
+ * @returns {DocumentFragment}
+ */
+A = function(t) {
+  if (s(this, n).templateNode) return s(this, n).templateNode;
+  const i = document.createDocumentFragment();
+  return t.forEach((o) => i.appendChild(o.cloneNode(!0))), s(this, n).templateNode = i, i;
+}, /**
+ * 渲染模板元素
+ * @param {number} count
+ * @param {HTMLElement[]} elements
+ * @returns {DocumentFragment}
+ */
+L = function(t, i) {
+  const o = c(this, l, A).call(this, i), d = document.createDocumentFragment();
+  for (let b = 0; b < t; b++)
+    d.appendChild(o.cloneNode(!0));
+  return d;
+}, y = new WeakMap(), p = new WeakMap();
+window.customElements.get("ea-skeleton") || window.customElements.define("ea-skeleton", B);
+const I = `
     <svg id="skeletonImagePlaceholder" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" part="image-svg">
         <path fill="#c0c4cc" d="M0 0h100v100H0z" />
         <path fill="#fff" d="M15 20h70v60H15z" />
@@ -176,13 +193,13 @@ const L = `
         <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />
     </svg>
 `;
-var m;
-class R extends E {
+var g;
+class z extends S {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    o(this, m);
-    v(this, "state", this.properties({
+    r(this, g);
+    w(this, "state", this.properties({
       variant: {
         type: [
           "p",
@@ -196,8 +213,8 @@ class R extends E {
           "rect"
         ],
         default: "p",
-        observer: (e) => {
-          e === "image" && (a(this, m).innerHTML = L), this.updateContainerClasslist();
+        observer: (t) => {
+          t === "image" && (s(this, g).innerHTML = I), this.updateContainerClasslist();
         }
       },
       animated: {
@@ -208,7 +225,7 @@ class R extends E {
         }
       }
     }));
-    this.stylesheet = A, this.$render();
+    this.stylesheet = $, this.$render();
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "variant", "animated"];
@@ -218,7 +235,7 @@ class R extends E {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
+    const t = this.computedClasslist(
       "ea-skeleton-item",
       {
         ["--" + this.variant]: this.variant
@@ -227,20 +244,20 @@ class R extends E {
         animated: this.animated
       }
     );
-    return a(this, m).className = e, e;
+    return s(this, g).className = t, t;
   }
   $render() {
     this.shadowRoot.innerHTML = `
       <div class='ea-skeleton-item' part='container'></div>
-    `, c(this, m, this.shadowRoot.querySelector(".ea-skeleton-item"));
+    `, u(this, g, this.shadowRoot.querySelector(".ea-skeleton-item"));
   }
   connectedCallback() {
     super.connectedCallback();
   }
 }
-m = new WeakMap();
-window.customElements.get("ea-skeleton-item") || window.customElements.define("ea-skeleton-item", R);
+g = new WeakMap();
+window.customElements.get("ea-skeleton-item") || window.customElements.define("ea-skeleton-item", z);
 export {
-  M as EaSkeleton,
-  R as EaSkeletonItem
+  B as EaSkeleton,
+  z as EaSkeletonItem
 };