@muibook/components 20.0.0 → 20.1.0

package/dist/esm/components/mui-table/row/index.js

@@ -45,16 +45,12 @@ class a extends HTMLElement {
       (i) => i.tagName.toLowerCase() === "mui-cell"
     ), r = o[o.length - 1];
     if (!r) return;
-    const s = o.some(
-      (i) => i.hasAttribute("action")
-    );
+    const s = o.some((i) => i.hasAttribute("action"));
     if (!e || s) {
       this.clearActionPlaceholderStyles(r);
       return;
     }
-    const n = Array.from(r.children).some(
-      (i) => i.nodeType === Node.ELEMENT_NODE
-    ), l = (r.textContent || "").trim();
+    const n = Array.from(r.children).some((i) => i.nodeType === Node.ELEMENT_NODE), l = (r.textContent || "").trim();
     if (!(!n && l.length === 0)) {
       this.clearActionPlaceholderStyles(r);
       return;

package/dist/esm/components/mui-table/table/index.js

@@ -1,21 +1,164 @@
-class t extends HTMLElement {
+class n extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
+    super(), this.hoverRow = null, this.handlePointerOver = (t) => {
+      if (!this.isHoverHighlightEnabled()) return;
+      const e = this.getEventRow(t);
+      if (!e || !this.isBodyRow(e)) {
+        this.hoverRow && (this.hoverRow = null, this.scheduleHighlightUpdate());
+        return;
+      }
+      this.hoverRow !== e && (this.hoverRow = e, this.scheduleHighlightUpdate());
+    }, this.handlePointerLeave = () => {
+      this.hoverRow && (this.hoverRow = null, this.scheduleHighlightUpdate());
+    }, this.handleRowClick = (t) => {
+      if (!this.hasHighlightMode("select")) return;
+      const e = this.getEventRow(t);
+      if (!e || !this.isBodyRow(e)) return;
+      const i = e.getAttribute("row-id"), r = this.getBodyRows().indexOf(e);
+      i ? (this.setAttribute("highlight-row", i), this.removeAttribute("highlight-row-index")) : r >= 0 && (this.setAttribute("highlight-row-index", String(r)), this.removeAttribute("highlight-row")), this.dispatchEvent(
+        new CustomEvent("row-highlight-change", {
+          detail: { row: e, rowId: i, rowIndex: r, source: "select" },
+          bubbles: !0
+        })
+      );
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["highlight", "highlight-row", "highlight-row-index"];
   }
   connectedCallback() {
-    this.setAttribute("role", "table"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    this.setAttribute("role", "table"), this.render(), this.addEventListener("pointerover", this.handlePointerOver), this.addEventListener("pointerleave", this.handlePointerLeave), this.addEventListener("click", this.handleRowClick), this.syncHighlightTracking(), this.scheduleHighlightUpdate();
+  }
+  disconnectedCallback() {
+    this.removeEventListener("pointerover", this.handlePointerOver), this.removeEventListener("pointerleave", this.handlePointerLeave), this.removeEventListener("click", this.handleRowClick), this.disconnectLayoutObservers(), this.animationFrame && cancelAnimationFrame(this.animationFrame);
+  }
+  attributeChangedCallback() {
+    this.syncHighlightTracking(), this.scheduleHighlightUpdate();
+  }
+  hasHighlightTarget() {
+    return this.hasAttribute("highlight-row") || this.hasAttribute("highlight-row-index");
+  }
+  get highlightModes() {
+    return (this.getAttribute("highlight") || "").split(/\s+/).map((t) => t.trim().toLowerCase()).filter(Boolean);
+  }
+  hasHighlightMode(t) {
+    return this.highlightModes.includes(t);
+  }
+  isHoverHighlightEnabled() {
+    return this.hasHighlightMode("hover") && !this.hasHighlightMode("select");
+  }
+  hasHighlightBehavior() {
+    return this.hasHighlightTarget() || this.highlightModes.length > 0;
+  }
+  getBodyRows() {
+    return Array.from(this.querySelectorAll("mui-row-group:not([heading]) > mui-row"));
+  }
+  getEventRow(t) {
+    return t.composedPath().find((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "mui-row");
+  }
+  isBodyRow(t) {
+    return this.getBodyRows().includes(t);
+  }
+  getHighlightRow() {
+    if (this.hoverRow && this.isHoverHighlightEnabled())
+      return this.hoverRow;
+    const t = this.getAttribute("highlight-row");
+    if (t)
+      return this.querySelector(`mui-row[row-id="${CSS.escape(t)}"]`);
+    const e = this.getAttribute("highlight-row-index");
+    if (e === null) return null;
+    const i = Number.parseInt(e, 10);
+    return !Number.isFinite(i) || i < 0 ? null : this.getBodyRows()[i] || null;
+  }
+  observeLayout() {
+    var t, e;
+    (t = this.resizeObserver) == null || t.disconnect(), (e = this.mutationObserver) == null || e.disconnect(), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => this.scheduleHighlightUpdate()), this.resizeObserver.observe(this)), this.mutationObserver = new MutationObserver(() => this.scheduleHighlightUpdate()), this.mutationObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["row-id", "hidden", "style", "columns", "size"]
+    });
+  }
+  disconnectLayoutObservers() {
+    var t, e;
+    (t = this.resizeObserver) == null || t.disconnect(), (e = this.mutationObserver) == null || e.disconnect(), this.resizeObserver = void 0, this.mutationObserver = void 0;
+  }
+  syncHighlightTracking() {
+    this.hasHighlightBehavior() ? this.observeLayout() : this.disconnectLayoutObservers();
+  }
+  scheduleHighlightUpdate() {
+    this.animationFrame && cancelAnimationFrame(this.animationFrame), this.animationFrame = requestAnimationFrame(() => {
+      this.animationFrame = void 0, this.updateHighlight();
+    });
+  }
+  updateHighlight() {
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".row-highlight");
+    if (!t) return;
+    const e = this.getHighlightRow();
+    if (!e) {
+      t.removeAttribute("data-visible"), t.removeAttribute("data-last-row");
+      return;
+    }
+    const i = this.getBodyRows(), r = this.getBoundingClientRect(), s = e.getBoundingClientRect(), a = s.top - r.top, h = t.hasAttribute("data-visible");
+    h || t.setAttribute("data-positioning", ""), t.style.transform = `translate3d(0, ${a}px, 0)`, t.style.height = `${s.height}px`, t.toggleAttribute("data-last-row", i.at(-1) === e), t.setAttribute("data-visible", ""), h || requestAnimationFrame(() => {
+      t.removeAttribute("data-positioning");
+    });
+  }
+  render() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-    <style>
-      :host {
-        display: block;
-        box-sizing: border-box;
-        text-indent: initial;
-        width: 100%;
-        margin: var(--space-000);
-      }
-    </style>
-    <slot></slot>
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          text-indent: initial;
+          width: 100%;
+          margin: var(--space-000);
+          position: relative;
+        }
+        :host([card-slot]) {
+          --table-row-highlight-background: var(--surface-elevated-200);
+        }
+        :host([card-slot]) .row-highlight[data-last-row] {
+          border-bottom-left-radius: var(--card-radius);
+          border-bottom-right-radius: var(--card-radius);
+        }
+        .row-highlight {
+          position: absolute;
+          inset-block-start: 0;
+          inset-inline: 0;
+          height: 0;
+          border-radius: var(--table-row-highlight-radius, var(--radius-000));
+          background: var(--table-row-highlight-background, var(--surface-elevated-100));
+          box-shadow: var(--table-row-highlight-shadow, none);
+          opacity: 0;
+          pointer-events: none;
+          transform: translate3d(0, 0, 0);
+          transition:
+            transform var(--table-row-highlight-speed, var(--speed-200)) var(--table-row-highlight-easing, ease),
+            height var(--table-row-highlight-speed, var(--speed-200)) var(--table-row-highlight-easing, ease),
+            opacity var(--speed-100) ease;
+          z-index: 0;
+        }
+        .row-highlight[data-visible] {
+          opacity: 1;
+        }
+        .row-highlight[data-positioning] {
+          transition: opacity var(--speed-100) ease;
+        }
+        slot {
+          position: relative;
+          z-index: 1;
+        }
+        ::slotted(mui-row-group) {
+          position: relative;
+          z-index: 1;
+        }
+      </style>
+      <div class="row-highlight" aria-hidden="true"></div>
+      <slot></slot>
     `);
   }
 }
-customElements.get("mui-table") || customElements.define("mui-table", t);
+customElements.get("mui-table") || customElements.define("mui-table", n);

package/dist/esm/components/mui-textarea/index.js

@@ -1,4 +1,4 @@
-class p extends HTMLElement {
+class f extends HTMLElement {
   static get observedAttributes() {
     return [
       "name",
@@ -18,57 +18,70 @@ class p extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
+  get value() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("textarea");
+    return (e == null ? void 0 : e.value) ?? this.getAttribute("value") ?? "";
+  }
+  set value(e) {
+    this.setAttribute("value", e ?? "");
+  }
+  focus(e) {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("textarea");
+    t ? t.focus(e) : super.focus(e);
+  }
   connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(e, a, r) {
+  attributeChangedCallback(e, t, r) {
     var o;
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("textarea");
-    if (t) {
+    const a = (o = this.shadowRoot) == null ? void 0 : o.querySelector("textarea");
+    if (a) {
       if (e === "value") {
-        t.value = r ?? "", this.updateCharacterCount();
+        a.value = r ?? "", this.updateCharacterCount();
         return;
       }
       if (e === "disabled") {
-        r === null || r === "false" ? t.removeAttribute("disabled") : t.setAttribute("disabled", "");
+        r === null || r === "false" ? a.removeAttribute("disabled") : a.setAttribute("disabled", "");
         return;
       }
       if (e === "rows") {
-        r && t.setAttribute("rows", r);
+        r && a.setAttribute("rows", r);
         return;
       }
       ["placeholder", "label", "hide-label", "variant", "optional", "max-length", "size"].includes(e) && (this.render(), this.setupListener());
     }
   }
   cleanupListeners() {
-    var a;
-    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("textarea");
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("textarea");
     e && this._changeHandler && (e.removeEventListener("change", this._changeHandler), e.removeEventListener("input", this._changeHandler));
   }
   setupListener() {
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("textarea");
-    e && (this.cleanupListeners(), this._changeHandler = (a) => {
-      const r = a.target;
+    e && (this.cleanupListeners(), this._changeHandler = (t) => {
+      const r = t.target;
       this.setAttribute("value", r.value);
-      const t = {
+      const a = {
         detail: { value: r.value },
         bubbles: !0,
         composed: !0
       };
-      this.dispatchEvent(new CustomEvent("change", t)), this.dispatchEvent(new CustomEvent("input", t)), this.updateCharacterCount();
+      this.dispatchEvent(new CustomEvent("change", a)), this.dispatchEvent(new CustomEvent("input", a)), this.updateCharacterCount();
     }, e.addEventListener("change", this._changeHandler), e.addEventListener("input", this._changeHandler), this.updateCharacterCount());
   }
   updateCharacterCount() {
-    var r, t;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("textarea"), a = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".char-count");
-    !e || !a || e.maxLength <= 0 || (a.textContent = `${e.value.length}/${e.maxLength}`);
+    var r, a;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("textarea"), t = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".char-count");
+    !e || !t || e.maxLength <= 0 || (t.textContent = `${e.value.length}/${e.maxLength}`);
   }
   render() {
-    const e = this.getAttribute("name") || "", a = this.getAttribute("value") || "", r = this.getAttribute("placeholder") || "", t = this.getAttribute("id") || `mui-textarea-${Math.random().toString(36).substr(2, 9)}`, o = this.getAttribute("label") || "", d = this.hasAttribute("optional"), n = this.hasAttribute("hide-label"), x = this.hasAttribute("disabled"), l = this.getAttribute("rows") || "4", i = this.getAttribute("max-length"), s = i && Number(i) > 0 ? String(Number(i)) : "", c = this.getAttribute("size") || "medium", u = ["x-small", "small", "medium", "large"].includes(c) ? c : "medium", v = n && o ? `aria-label="${o}"` : "", h = this.getAttribute("variant") || "", g = h || "", b = (
+    const e = this.getAttribute("name") || "", t = this.getAttribute("value") || "", r = this.getAttribute("placeholder") || "", a = this.getAttribute("id") || `mui-textarea-${Math.random().toString(36).substr(2, 9)}`, o = this.getAttribute("label") || "", d = this.hasAttribute("optional"), l = this.hasAttribute("hide-label"), u = this.hasAttribute("disabled"), n = this.getAttribute("rows") || "4", i = this.getAttribute("max-length"), s = i && Number(i) > 0 ? String(Number(i)) : "", c = this.getAttribute("size") || "medium", x = ["x-small", "small", "medium", "large"].includes(c) ? c : "medium", v = l && o ? `aria-label="${o}"` : "", h = this.getAttribute("variant") || "", g = h || "", b = (
       /*html*/
       `
       <style>
@@ -114,7 +127,7 @@ class p extends HTMLElement {
           padding-inline: var(--textarea-padding-inline-current);
           box-sizing: border-box;
           font-size: var(--textarea-font-size-current);
-          border-radius: var(--radius-100);
+          border-radius: var(--form-radius-medium);
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
           color: var(--form-default-text-color);
@@ -131,24 +144,28 @@ class p extends HTMLElement {
           --textarea-line-height-current: var(--text-line-height-xs);
           --textarea-padding-block-current: var(--space-050);
           --textarea-padding-inline-current: var(--space-200);
+          border-radius: var(--form-radius-x-small);
         }
         textarea.size-small {
           --textarea-font-size-current: var(--text-font-size-s);
           --textarea-line-height-current: var(--text-line-height-s);
           --textarea-padding-block-current: calc(var(--space-100) - (var(--stroke-size-100) / 2));
           --textarea-padding-inline-current: var(--space-300);
+          border-radius: var(--form-radius-small);
         }
         textarea.size-medium {
           --textarea-font-size-current: var(--text-font-size);
           --textarea-line-height-current: var(--text-line-height);
           --textarea-padding-block-current: var(--space-200);
           --textarea-padding-inline-current: var(--space-300);
+          border-radius: var(--form-radius-medium);
         }
         textarea.size-large {
           --textarea-font-size-current: var(--text-font-size-l);
           --textarea-line-height-current: var(--text-line-height-l);
           --textarea-padding-block-current: var(--space-300);
           --textarea-padding-inline-current: var(--space-400);
+          border-radius: var(--form-radius-large);
         }
 
         textarea:hover {
@@ -278,23 +295,23 @@ class p extends HTMLElement {
         }
       </style>
 
-      ${o ? `<label for="${t}" class="${n ? "vh" : ""}">${o}${d ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
+      ${o ? `<label for="${a}" class="${l ? "vh" : ""}">${o}${d ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
 
       <textarea
-        id="${t}"
+        id="${a}"
         name="${e}"
-        class="${[g, `size-${u}`].filter(Boolean).join(" ")}"
-        style="--textarea-rows: ${l};"
-        rows="${l}"
+        class="${[g, `size-${x}`].filter(Boolean).join(" ")}"
+        style="--textarea-rows: ${n};"
+        rows="${n}"
         placeholder="${r}"
         ${s ? `maxlength="${s}"` : ""}
-        ${x ? "disabled" : ""}
+        ${u ? "disabled" : ""}
         ${v}
-      >${a}</textarea>
+      >${t}</textarea>
       ${s ? '<div class="meta"><span class="char-count"></span></div>' : ""}
     `
     );
     this.shadowRoot.innerHTML = b, o || console.warn("mui-textarea: Missing required 'label' attribute for accessibility.");
   }
 }
-customElements.get("mui-textarea") || customElements.define("mui-textarea", p);
+customElements.get("mui-textarea") || customElements.define("mui-textarea", f);