wj-elements 0.0.11 → 0.0.13

package/dist/wj-list.js

@@ -1,30 +1,35 @@
-var o = Object.defineProperty;
-var a = (e, t, s) => t in e ? o(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
-var n = (e, t, s) => (a(e, typeof t != "symbol" ? t + "" : t, s), s);
-import l from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-const d = `:host{--wj-list-inset-padding: 1rem;--wj-list-border-radius: 8px;--wj-list-background: var(--wj-background);margin:0;padding:0;display:block;contain:content;list-style-type:none}:host(.wj-inset){background:var(--wj-list-background);transform:translateZ(0);overflow:hidden;padding:var(--wj-list-inset-padding);border-radius:var(--wj-list-border-radius)}:host(.wj-lines-none) ::slotted(wj-item){--wj-border-width: 0 !important}
-`;
-class c extends l {
+const styles = "/*\n[ WJ List ]\n*/\n:host {\n  --wj-list-inset-padding: 1rem;\n  --wj-list-border-radius: 8px;\n  --wj-list-background: var(--wj-background);\n  margin: 0;\n  padding: 0;\n  display: block;\n  contain: content;\n  list-style-type: none;\n}\n\n:host(.wj-inset) {\n  background: var(--wj-list-background);\n  transform: translateZ(0);\n  overflow: hidden;\n  padding: var(--wj-list-inset-padding);\n  border-radius: var(--wj-list-border-radius);\n}\n\n:host(.wj-lines-none) ::slotted(wj-item) {\n  --wj-border-width: 0 !important;\n}";
+class List extends WJElement {
   constructor() {
     super();
-    n(this, "className", "List");
+    __publicField(this, "className", "List");
   }
   static get cssStyleSheet() {
-    return d;
+    return styles;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(s, m, w) {
-    let i = document.createDocumentFragment(), r = document.createElement("slot");
-    return i.appendChild(r), i;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
   }
   afterDraw() {
-    this.classList.toggle("wj-lines-" + this.lines, this.hasAttribute("lines")), this.classList.toggle("wj-inset", this.hasAttribute("inset"));
+    this.classList.toggle("wj-lines-" + this.lines, this.hasAttribute("lines"));
+    this.classList.toggle("wj-inset", this.hasAttribute("inset"));
   }
 }
-customElements.get("wj-list") || window.customElements.define("wj-list", c);
+customElements.get("wj-list") || window.customElements.define("wj-list", List);
 export {
-  c as List
+  List
 };

package/dist/wj-main.js

@@ -1,17 +1,19 @@
-var a = Object.defineProperty;
-var i = (t, e, s) => e in t ? a(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
-var o = (t, e, s) => (i(t, typeof e != "symbol" ? e + "" : e, s), s);
-import m from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-const c = `:host{display:block;flex:1;flex-basis:auto;padding:1.5rem;box-sizing:border-box}
-`;
-class l extends m {
+const styles = "/*\n[ WJ Main ]\n*/\n:host {\n  display: block;\n  flex: 1;\n  flex-basis: auto;\n  padding: 1.5rem;\n  box-sizing: border-box;\n}";
+class Main extends WJElement {
   constructor() {
     super();
-    o(this, "className", "Main");
+    __publicField(this, "className", "Main");
   }
   static get cssStyleSheet() {
-    return c;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -19,12 +21,14 @@ class l extends m {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(s, d, u) {
-    let n = document.createDocumentFragment(), r = document.createElement("slot");
-    return n.appendChild(r), n;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
   }
 }
-customElements.get("wj-main") || window.customElements.define("wj-main", l);
+customElements.get("wj-main") || window.customElements.define("wj-main", Main);
 export {
-  l as Main
+  Main
 };

package/dist/wj-masonry.js

@@ -1,133 +1,190 @@
-var f = Object.defineProperty;
-var p = (o, s, t) => s in o ? f(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
-var r = (o, s, t) => (p(o, typeof s != "symbol" ? s + "" : s, t), t);
-import w from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-const b = 500, A = 300, C = "--wj-masonry-layout-col-count", E = "--wj-masonry-layout-gap", d = 1, m = /* @__PURE__ */ new Map();
-function c(o, s, t) {
-  const e = parseFloat(o.getAttribute(s) || "");
-  return isNaN(e) ? t : e;
+const DEFAULT_MAX_COL_WIDTH = 500;
+const DEFAULT_DEBOUNCE_MS = 300;
+const COL_COUNT_CSS_VAR_NAME = `--wj-masonry-layout-col-count`;
+const GAP_CSS_VAR_NAME = `--wj-masonry-layout-gap`;
+const ELEMENT_NODE_TYPE = 1;
+const DEBOUNCE_MAP = /* @__PURE__ */ new Map();
+function getNumberAttribute($elem, name, defaultValue) {
+  const value = parseFloat($elem.getAttribute(name) || "");
+  return isNaN(value) ? defaultValue : value;
 }
-function g(o, s, t) {
-  return isNaN(s) ? Math.max(1, Math.ceil(o / t)) : s;
+function getColCount(totalWidth, cols, maxColWidth) {
+  return isNaN(cols) ? Math.max(1, Math.ceil(totalWidth / maxColWidth)) : cols;
 }
-function x(o, s, t) {
-  const e = m.get(t);
-  e != null && window.clearTimeout(e), m.set(t, window.setTimeout(o, s));
+function debounce(cb, ms, id) {
+  const existingTimeout = DEBOUNCE_MAP.get(id);
+  if (existingTimeout != null)
+    window.clearTimeout(existingTimeout);
+  DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));
 }
-function v(o) {
-  let s = 0, t = 1 / 0;
-  return o.forEach((e, n) => {
-    e < t && (t = e, s = n);
-  }), s;
+function findSmallestColIndex(colHeights) {
+  let smallestIndex = 0;
+  let smallestHeight = Infinity;
+  colHeights.forEach((height, i) => {
+    if (height < smallestHeight) {
+      smallestHeight = height;
+      smallestIndex = i;
+    }
+  });
+  return smallestIndex;
 }
-const S = `:host{display:flex;align-items:flex-start;justify-content:stretch;width:100%}.column{max-width:calc(100% / var(--wj-masonry-layout-col-count, 1) - var(--wj-masonry-layout-gap, 1rem) * (var(--wj-masonry-layout-col-count, 1) - 1) / var(--wj-masonry-layout-col-count, 1));width:100%;flex:1;display:flex;flex-direction:column}.column:not(:last-child){margin-inline-end:var(--wj-masonry-layout-gap, 1rem)}.column ::slotted(*){margin-block-end:var(--wj-masonry-layout-gap, 1rem);box-sizing:border-box;width:100%}#unset-items{opacity:0;position:absolute;pointer-events:none}
-`;
-class N extends w {
+const styles = "/*\n[ WJ Masonry ]\n*/\n:host {\n  display: flex;\n  align-items: flex-start;\n  justify-content: stretch;\n  width: 100%;\n}\n\n.column {\n  max-width: calc(100% / var(--wj-masonry-layout-col-count, 1) - var(--wj-masonry-layout-gap, 1rem) * (var(--wj-masonry-layout-col-count, 1) - 1) / var(--wj-masonry-layout-col-count, 1));\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.column:not(:last-child) {\n  margin-inline-end: var(--wj-masonry-layout-gap, 1rem);\n}\n\n.column ::slotted(*) {\n  margin-block-end: var(--wj-masonry-layout-gap, 1rem);\n  box-sizing: border-box;\n  width: 100%;\n}\n\n/* Hide the items that has not yet found the correct slot */\n#unset-items {\n  opacity: 0;\n  position: absolute;\n  pointer-events: none;\n}";
+class Masonry extends WJElement {
   constructor() {
     super();
-    r(this, "debounceId", `layout_${Math.random()}`);
-    r(this, "ro");
-    r(this, "className", "Masonry");
-    r(this, "onSlotChange", () => {
-      (this.unsetSlot.assignedNodes() || []).filter((e) => e.nodeType === d).length > 0 && this.layout();
+    __publicField(this, "debounceId", `layout_${Math.random()}`);
+    __publicField(this, "ro");
+    __publicField(this, "className", "Masonry");
+    __publicField(this, "onSlotChange", () => {
+      const $unsetElements = (this.unsetSlot.assignedNodes() || []).filter((node) => node.nodeType === ELEMENT_NODE_TYPE);
+      if ($unsetElements.length > 0) {
+        this.layout();
+      }
     });
-    r(this, "onResize", (t) => {
-      const { width: e } = t != null && Array.isArray(t) && t.length > 0 ? t[0].contentRect : { width: this.offsetWidth };
-      g(e, this.cols, this.maxColWidth) !== this.columns.length && this.scheduleLayout();
+    __publicField(this, "onResize", (entries) => {
+      const { width } = entries != null && Array.isArray(entries) && entries.length > 0 ? entries[0].contentRect : { width: this.offsetWidth };
+      const colCount = getColCount(width, this.cols, this.maxColWidth);
+      if (colCount !== this.columns.length) {
+        this.scheduleLayout();
+      }
     });
-    r(this, "layout", () => {
-      this.currentRequestAnimationFrameCallback != null && window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback), this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
-        const t = this.gap, e = Array.from(this.children).filter((a) => a.nodeType === d), n = g(this.offsetWidth, this.cols, this.maxColWidth), l = Array(n).fill(0), i = [];
-        for (const a of e) {
-          const y = a.getBoundingClientRect().height;
-          let u = v(l);
-          l[u] += y + +t;
-          const h = u;
-          a.slot !== h && i.push(() => a.slot = h);
+    __publicField(this, "layout", () => {
+      if (this.currentRequestAnimationFrameCallback != null) {
+        window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);
+      }
+      this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
+        const gap = this.gap;
+        const $elements = Array.from(this.children).filter((node) => node.nodeType === ELEMENT_NODE_TYPE);
+        const colCount = getColCount(this.offsetWidth, this.cols, this.maxColWidth);
+        const colHeights = Array(colCount).fill(0);
+        const writes = [];
+        for (const elem of $elements) {
+          const height = elem.getBoundingClientRect().height;
+          let smallestColIndex = findSmallestColIndex(colHeights);
+          colHeights[smallestColIndex] += height + +gap;
+          const newSlot = smallestColIndex;
+          if (elem.slot !== newSlot) {
+            writes.push(() => elem.slot = newSlot);
+          }
+        }
+        for (const write of writes) {
+          write();
         }
-        for (const a of i)
-          a();
-        this.renderCols(n);
+        this.renderCols(colCount);
       });
     });
-    this.debounceId = `layout_${Math.random()}`, this.ro = void 0, this.currentRequestAnimationFrameCallback = void 0, this.unsetSlot = void 0;
+    this.debounceId = `layout_${Math.random()}`;
+    this.ro = void 0;
+    this.currentRequestAnimationFrameCallback = void 0;
+    this.unsetSlot = void 0;
   }
-  set maxColWidth(t) {
-    this.setAttribute("max-col-width", t);
+  set maxColWidth(value) {
+    this.setAttribute("max-col-width", value);
   }
   get maxColWidth() {
-    return this.hasAttribute("max-col-width") ? +this.getAttribute("max-col-width") : +b;
+    return this.hasAttribute("max-col-width") ? +this.getAttribute("max-col-width") : +DEFAULT_MAX_COL_WIDTH;
   }
-  set cols(t) {
-    this.hasAttribute("cols") && this.setAttribute("cols", t);
+  set cols(value) {
+    this.hasAttribute("cols") ? this.setAttribute("cols", value) : "auto";
   }
   get cols() {
-    return c(this, "cols", "auto");
+    return getNumberAttribute(this, "cols", "auto");
   }
-  set gap(t) {
-    this.setAttribute("gap", t);
+  set gap(value) {
+    this.setAttribute("gap", value);
   }
   get gap() {
-    return c(this, "gap", "24");
+    return getNumberAttribute(this, "gap", "24");
   }
-  set debounce(t) {
-    this.setAttribute("debounce", t);
+  set debounce(value) {
+    this.setAttribute("debounce", value);
   }
   get debounce() {
-    return c(this, "debounce", A);
+    return getNumberAttribute(this, "debounce", DEFAULT_DEBOUNCE_MS);
   }
   get columns() {
-    return Array.from(this.shadowRoot.querySelectorAll(".column"));
+    return Array.from(this.shadowRoot.querySelectorAll(`.column`));
   }
   static get cssStyleSheet() {
-    return S;
+    return styles;
   }
   static get observedAttributes() {
     return ["max-col-width", "gap", "cols"];
   }
-  attributeChangedCallback(t, e, n) {
-    switch (t) {
+  attributeChangedCallback(name, old, newName) {
+    switch (name) {
       case "gap":
-        this.style.setProperty(E, `${this.gap}px`);
+        this.style.setProperty(GAP_CSS_VAR_NAME, `${this.gap}px`);
         break;
     }
     this.scheduleLayout();
   }
   disconnectedCallback() {
-    this.unsetSlot.removeEventListener("slotchange", this.onSlotChange), window.removeEventListener("resize", this.onResize), this.ro != null && this.ro.unobserve(this);
+    this.unsetSlot.removeEventListener("slotchange", this.onSlotChange);
+    window.removeEventListener("resize", this.onResize);
+    if (this.ro != null) {
+      this.ro.unobserve(this);
+    }
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, n) {
-    let l = document.createDocumentFragment(), i = document.createElement("div");
-    i.setAttribute("id", "unset-items"), i.setAttribute("part", "native");
-    let a = document.createElement("slot");
-    return i.appendChild(a), this.unsetSlot = a, this.native = i, l.appendChild(i), l;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.setAttribute("id", "unset-items");
+    native.setAttribute("part", "native");
+    let unsetSlot = document.createElement("slot");
+    native.appendChild(unsetSlot);
+    this.unsetSlot = unsetSlot;
+    this.native = native;
+    fragment.appendChild(native);
+    return fragment;
   }
   afterDraw() {
-    this.onSlotChange(), this.onResize(), this.layout(), this.unsetSlot.addEventListener("slotchange", this.onSlotChange), "ResizeObserver" in window ? (this.ro = new ResizeObserver(this.onResize), this.ro.observe(this)) : window.addEventListener("resize", this.onResize);
-  }
-  renderCols(t) {
-    const e = this.columns;
-    if (e.length !== t) {
-      for (const n of e)
-        n.parentNode && n.parentNode.removeChild(n);
-      for (let n = 0; n < t; n++) {
-        const l = document.createElement("div");
-        l.classList.add("column"), l.setAttribute("part", `column column-${n}`);
-        const i = document.createElement("slot");
-        i.setAttribute("name", n), l.appendChild(i), this.context.appendChild(l);
-      }
-      this.style.setProperty(C, t);
+    this.onSlotChange();
+    this.onResize();
+    this.layout();
+    this.unsetSlot.addEventListener("slotchange", this.onSlotChange);
+    if ("ResizeObserver" in window) {
+      this.ro = new ResizeObserver(this.onResize);
+      this.ro.observe(this);
+    } else {
+      window.addEventListener("resize", this.onResize);
+    }
+  }
+  renderCols(colCount) {
+    const columns = this.columns;
+    if (columns.length === colCount) {
+      return;
+    }
+    for (const column of columns) {
+      column.parentNode && column.parentNode.removeChild(column);
+    }
+    for (let i = 0; i < colCount; i++) {
+      const column = document.createElement("div");
+      column.classList.add("column");
+      column.setAttribute("part", `column column-${i}`);
+      const slot = document.createElement("slot");
+      slot.setAttribute("name", i);
+      column.appendChild(slot);
+      this.context.appendChild(column);
     }
+    this.style.setProperty(COL_COUNT_CSS_VAR_NAME, colCount);
   }
-  scheduleLayout(t = this.debounce) {
-    x(this.layout, t, this.debounceId);
+  scheduleLayout(ms = this.debounce) {
+    debounce(this.layout, ms, this.debounceId);
   }
 }
-customElements.get("wj-masonry") || window.customElements.define("wj-masonry", N);
+customElements.get("wj-masonry") || window.customElements.define("wj-masonry", Masonry);
 export {
-  N as Masonry
+  Masonry
 };