@editora/ui-core 0.2.2 → 0.3.0

package/dist/breadcrumb.esm.js

@@ -1,5 +1,7 @@
-import { E as y } from "./ElementBase-BeZT54Hj.mjs";
-const _ = `
+import { E as y } from "./ElementBase-D5QsC5Vw.mjs";
+import { n as A } from "./number-attribute-BAF07JrU.mjs";
+import { r as _ } from "./navigate-CXebafwF.mjs";
+const k = `
   :host {
     display: block;
     --ui-breadcrumb-gap: var(--base-breadcrumb-gap, 8px);
@@ -272,32 +274,32 @@ const _ = `
     }
   }
 `;
-function v(n) {
-  if (!n) return "";
-  const e = n.trim().toLowerCase();
-  return e ? e === "none" ? "0px" : e === "sm" ? "8px" : e === "md" ? "12px" : e === "lg" ? "16px" : e === "full" ? "9999px" : /^\d+(\.\d+)?$/.test(e) ? `${e}px` : n : "";
+function v(u) {
+  if (!u) return "";
+  const e = u.trim().toLowerCase();
+  return e ? e === "none" ? "0px" : e === "sm" ? "8px" : e === "md" ? "12px" : e === "lg" ? "16px" : e === "full" ? "9999px" : /^\d+(\.\d+)?$/.test(e) ? `${e}px` : u : "";
 }
-function A(n) {
-  if (!n) return "";
-  const e = n.trim().toLowerCase();
+function C(u) {
+  if (!u) return "";
+  const e = u.trim().toLowerCase();
   return e === "1" ? "sm" : e === "2" ? "md" : e === "3" ? "lg" : e === "sm" || e === "md" || e === "lg" ? e : "";
 }
-function b(n) {
-  return String(n).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function b(u) {
+  return String(u).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function h(n) {
-  if (n == null) return !1;
-  const e = n.trim().toLowerCase();
+function h(u) {
+  if (u == null) return !1;
+  const e = u.trim().toLowerCase();
   return e === "" || e === "true" || e === "1" || e === "yes";
 }
-function k(n) {
-  return h(n.getAttribute("disabled")) || h(n.getAttribute("data-disabled")) || n.getAttribute("aria-disabled") === "true";
+function S(u) {
+  return h(u.getAttribute("disabled")) || h(u.getAttribute("data-disabled")) || u.getAttribute("aria-disabled") === "true";
 }
-function C(n) {
-  const e = n.getAttribute("aria-current");
-  return e && e !== "false" ? !0 : h(n.getAttribute("current")) || h(n.getAttribute("data-current"));
+function w(u) {
+  const e = u.getAttribute("aria-current");
+  return e && e !== "false" ? !0 : h(u.getAttribute("current")) || h(u.getAttribute("data-current"));
 }
-class S extends y {
+class I extends y {
   constructor() {
     super(), this._slots = [], this._onRootClick = this._onRootClick.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
   }
@@ -325,13 +327,13 @@ class S extends y {
   disconnectedCallback() {
     this.root.removeEventListener("click", this._onRootClick), this.root.removeEventListener("keydown", this._onRootKeyDown), this._detachSlotListeners(), super.disconnectedCallback();
   }
-  attributeChangedCallback(e, i, r) {
-    if (i !== r) {
+  attributeChangedCallback(e, i, t) {
+    if (i !== t) {
       if (e === "state" && this._syncBusyState(), e === "disabled" && this._syncDisabledState(), e === "size" && this._syncSizeState(), e === "radius") {
-        const t = v(r);
-        t ? this.style.setProperty("--ui-breadcrumb-radius", t) : this.style.removeProperty("--ui-breadcrumb-radius");
+        const r = v(t);
+        r ? this.style.setProperty("--ui-breadcrumb-radius", r) : this.style.removeProperty("--ui-breadcrumb-radius");
       }
-      this.isConnected && this.shouldRenderOnAttributeChange(e, i, r) && this.requestRender();
+      this.isConnected && this.shouldRenderOnAttributeChange(e, i, t) && this.requestRender();
     }
   }
   get headless() {
@@ -347,7 +349,7 @@ class S extends y {
     this.hasAttribute("disabled") ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
   }
   _syncSizeState() {
-    const e = A(this.getAttribute("size"));
+    const e = C(this.getAttribute("size"));
     if (e === "sm") {
       this.style.setProperty("--ui-breadcrumb-gap", "6px"), this.style.setProperty("--ui-breadcrumb-font-size", "13px"), this.style.setProperty("--ui-breadcrumb-item-padding-block", "3px"), this.style.setProperty("--ui-breadcrumb-item-padding-inline", "7px");
       return;
@@ -370,131 +372,138 @@ class S extends y {
   _direction() {
     const e = this.getAttribute("dir");
     if (e === "rtl" || e === "ltr") return e;
-    const r = this.closest("[dir]")?.getAttribute("dir");
-    return r === "rtl" || r === "ltr" ? r : getComputedStyle(this).direction === "rtl" ? "rtl" : "ltr";
+    const t = this.closest("[dir]")?.getAttribute("dir");
+    return t === "rtl" || t === "ltr" ? t : getComputedStyle(this).direction === "rtl" ? "rtl" : "ltr";
   }
   _getSourceItems() {
     const e = Array.from(this.querySelectorAll('[slot="item"]'));
     return e.length > 0 ? e : Array.from(this.children).filter((i) => i instanceof HTMLElement);
   }
   _maxItems() {
-    const e = Number(this.getAttribute("max-items"));
+    const e = A(this.getAttribute("max-items"), Number.POSITIVE_INFINITY);
     return Number.isFinite(e) ? Math.max(3, Math.floor(e)) : Number.POSITIVE_INFINITY;
   }
   _currentIndex(e) {
     const i = this.getAttribute("current-index");
     if (i != null && i !== "") {
-      const t = Number(i);
-      if (Number.isFinite(t)) {
-        const a = Math.floor(t);
+      const r = Number(i);
+      if (Number.isFinite(r)) {
+        const a = Math.floor(r);
         if (a >= 0 && a < e.length) return a;
       }
     }
-    const r = e.findIndex((t) => C(t));
-    return r >= 0 ? r : e.length > 0 ? e.length - 1 : -1;
+    const t = e.findIndex((r) => w(r));
+    return t >= 0 ? t : e.length > 0 ? e.length - 1 : -1;
   }
   _visibleIndices(e, i) {
-    const r = this._maxItems();
-    if (!Number.isFinite(r) || e.length <= r)
+    const t = this._maxItems();
+    if (!Number.isFinite(t) || e.length <= t)
       return e.map((c, l) => l);
-    const t = e.length - 1, a = i >= 0 ? i : t, s = /* @__PURE__ */ new Set([0, t, a]);
-    let o = a - 1, u = a + 1;
-    for (; s.size < r && (o > 0 || u < t) && !(o > 0 && (s.add(o), s.size >= r)); )
-      u < t && s.add(u), o -= 1, u += 1;
-    for (let c = 1; s.size < r && c < t; c += 1)
+    const r = e.length - 1, a = i >= 0 ? i : r, s = /* @__PURE__ */ new Set([0, r, a]);
+    let n = a - 1, o = a + 1;
+    for (; s.size < t && (n > 0 || o < r) && !(n > 0 && (s.add(n), s.size >= t)); )
+      o < r && s.add(o), n -= 1, o += 1;
+    for (let c = 1; s.size < t && c < r; c += 1)
       s.add(c);
     return Array.from(s).sort((c, l) => c - l);
   }
   _getDisplayTokens(e) {
-    const i = this._currentIndex(e), r = this._visibleIndices(e, i), t = [];
+    const i = this._currentIndex(e), t = this._visibleIndices(e, i), r = [];
     let a = null;
-    return r.forEach((s) => {
-      a != null && s - a > 1 && t.push({ kind: "ellipsis", key: `ellipsis-${a}-${s}` });
-      const o = e[s];
-      t.push({
+    return t.forEach((s) => {
+      a != null && s - a > 1 && r.push({ kind: "ellipsis", key: `ellipsis-${a}-${s}` });
+      const n = e[s];
+      r.push({
         kind: "item",
-        item: o,
+        item: n,
         sourceIndex: s,
         current: s === i,
-        disabled: k(o)
+        disabled: S(n)
       }), a = s;
-    }), t;
+    }), r;
   }
   _renderLabel(e) {
     const i = e.getAttribute("data-label");
     if (i) return b(i);
-    const r = (e.innerHTML || "").trim();
-    return r || b((e.textContent || "").trim());
+    const t = (e.innerHTML || "").trim();
+    return t || b((e.textContent || "").trim());
   }
   _emitSelect(e, i) {
-    const t = this._getSourceItems()[e];
-    if (!t) return null;
-    const a = (t.getAttribute("data-label") || t.textContent || "").trim(), s = t.getAttribute("href") || void 0, o = { index: e, label: a, href: s, source: i }, u = new CustomEvent("select", {
-      detail: o,
+    const r = this._getSourceItems()[e];
+    if (!r) return null;
+    const a = (r.getAttribute("data-label") || r.textContent || "").trim(), s = r.getAttribute("href") || r.getAttribute("data-href") || void 0, n = { index: e, label: a, href: s, source: i }, o = new CustomEvent("select", {
+      detail: n,
       bubbles: !0,
       cancelable: !0,
       composed: !0
     });
-    return this.dispatchEvent(u), this.dispatchEvent(new CustomEvent("ui-select", { detail: o, bubbles: !0, composed: !0 })), u;
+    return this.dispatchEvent(o), this.dispatchEvent(new CustomEvent("ui-select", { detail: n, bubbles: !0, composed: !0 })), o;
   }
   _onRootClick(e) {
-    const r = e.target.closest(".crumb-action");
-    if (!r) return;
-    if (this.hasAttribute("disabled") || r.getAttribute("aria-disabled") === "true") {
+    const t = e.target.closest(".crumb-action");
+    if (!t) return;
+    if (this.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true") {
       e.preventDefault();
       return;
     }
-    const t = Number(r.getAttribute("data-source-index"));
-    if (Number.isNaN(t)) return;
-    this._emitSelect(t, "click")?.defaultPrevented && e.preventDefault();
+    const r = Number(t.getAttribute("data-source-index"));
+    if (Number.isNaN(r)) return;
+    if (this._emitSelect(r, "click")?.defaultPrevented) {
+      e.preventDefault();
+      return;
+    }
+    if (t.tagName.toLowerCase() === "a") {
+      const s = t.getAttribute("href") || "", n = this._getSourceItems()[r], o = (n?.getAttribute("data-label") || n?.textContent || "").trim();
+      _(this, { index: r, label: o, href: s }, e, t.getAttribute("target") || "") && e.preventDefault();
+    }
   }
   _onRootKeyDown(e) {
-    const r = e.target.closest(".crumb-action");
-    if (!r || this.hasAttribute("disabled")) return;
-    if (e.key === " " && r.tagName.toLowerCase() === "a") {
+    const t = e.target.closest(".crumb-action");
+    if (!t || this.hasAttribute("disabled")) return;
+    if (e.key === " " && t.tagName.toLowerCase() === "a") {
       e.preventDefault();
-      const u = Number(r.getAttribute("data-source-index"));
-      if (!Number.isNaN(u) && this._emitSelect(u, "keyboard")?.defaultPrevented)
+      const o = Number(t.getAttribute("data-source-index"));
+      if (!Number.isNaN(o) && this._emitSelect(o, "keyboard")?.defaultPrevented)
         return;
     }
     if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key)) return;
-    const t = Array.from(this.root.querySelectorAll('.crumb-action:not([aria-disabled="true"])'));
-    if (t.length === 0) return;
-    const a = t.indexOf(r);
+    const r = Array.from(this.root.querySelectorAll('.crumb-action:not([aria-disabled="true"])'));
+    if (r.length === 0) return;
+    const a = r.indexOf(t);
     if (a < 0) return;
     const s = this._direction() === "rtl";
-    let o = a;
-    e.key === "ArrowRight" && (o = s ? a - 1 : a + 1), e.key === "ArrowLeft" && (o = s ? a + 1 : a - 1), e.key === "Home" && (o = 0), e.key === "End" && (o = t.length - 1), o = (o + t.length) % t.length, t[o].focus(), e.preventDefault();
+    let n = a;
+    e.key === "ArrowRight" && (n = s ? a - 1 : a + 1), e.key === "ArrowLeft" && (n = s ? a + 1 : a - 1), e.key === "Home" && (n = 0), e.key === "End" && (n = r.length - 1), n = (n + r.length) % r.length, r[n].focus(), e.preventDefault();
   }
   render() {
-    const e = this._getSourceItems(), i = b(this.getAttribute("separator") || "/"), r = b(this.getAttribute("aria-label") || "Breadcrumb"), t = this._getDisplayTokens(e), a = this.hasAttribute("disabled"), s = this.getAttribute("state") === "loading", o = t.map((u, c) => {
-      const l = c === t.length - 1;
+    const e = this._getSourceItems(), i = b(this.getAttribute("separator") || "/"), t = b(this.getAttribute("aria-label") || "Breadcrumb"), r = this._getDisplayTokens(e), a = this.hasAttribute("disabled"), s = this.getAttribute("state") === "loading", n = r.map((o, c) => {
+      const l = c === r.length - 1;
       let d = "";
-      if (u.kind === "ellipsis")
+      if (o.kind === "ellipsis")
         d = '<span class="crumb-ellipsis" aria-hidden="true">…</span>';
       else {
-        const m = this._renderLabel(u.item), f = u.item.getAttribute("href"), g = u.item.getAttribute("rel"), p = u.item.getAttribute("target");
-        u.current ? d = `<span class="crumb-current" aria-current="page">${m}</span>` : a || u.disabled || s ? d = `<span class="crumb-disabled" aria-disabled="true">${m}</span>` : f ? d = `<a class="crumb-action crumb-link" data-source-index="${u.sourceIndex}" href="${b(f)}"${p ? ` target="${b(p)}"` : ""}${g ? ` rel="${b(g)}"` : ""}>${m}</a>` : d = `<button type="button" class="crumb-action crumb-btn" data-source-index="${u.sourceIndex}">${m}</button>`;
+        const m = this._renderLabel(o.item), f = o.item.getAttribute("href") || o.item.getAttribute("data-href"), g = o.item.getAttribute("rel"), p = o.item.getAttribute("target");
+        o.current ? d = `<span class="crumb-current" aria-current="page">${m}</span>` : a || o.disabled || s ? d = `<span class="crumb-disabled" aria-disabled="true">${m}</span>` : f ? d = `<a class="crumb-action crumb-link" data-source-index="${o.sourceIndex}" href="${b(f)}"${p ? ` target="${b(p)}"` : ""}${g ? ` rel="${b(g)}"` : ""}>${m}</a>` : d = `<button type="button" class="crumb-action crumb-btn" data-source-index="${o.sourceIndex}">${m}</button>`;
       }
       const x = l ? "" : `<span class="separator" aria-hidden="true" title="${i}">${i}</span>`;
       return `<li part="item">${d}${x}</li>`;
     }).join("");
     this.setContent(`
-      <style>${_}</style>
-      <nav role="navigation" aria-label="${r}">
+      <style>${k}</style>
+      <nav role="navigation" aria-label="${t}">
         <ol part="list">
-          ${o}
+          ${n}
         </ol>
       </nav>
       <slot id="slot-item" name="item" hidden></slot>
       <slot id="slot-default" hidden></slot>
     `), this._attachSlotListeners(), this._syncBusyState(), this._syncDisabledState();
   }
-  shouldRenderOnAttributeChange(e, i, r) {
-    return i === r ? !1 : !["size", "variant", "radius", "elevation", "tone", "state", "disabled"].includes(e);
+  shouldRenderOnAttributeChange(e, i, t) {
+    return i === t ? !1 : !["size", "variant", "radius", "elevation", "tone", "state", "disabled"].includes(e);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-breadcrumb") && customElements.define("ui-breadcrumb", S);
+typeof customElements < "u" && !customElements.get("ui-breadcrumb") && customElements.define("ui-breadcrumb", I);
 export {
-  S as UIBreadcrumb
+  I as UIBreadcrumb
 };