@editora/ui-core 0.1.9 → 0.1.10

package/dist/collection.esm.js

@@ -0,0 +1,136 @@
+import { b as d, d as b } from "./collection-a1aac0c6.mjs";
+function c(i) {
+  if (!i.isConnected || i.hidden)
+    return !1;
+  const e = window.getComputedStyle(i);
+  return !(e.display === "none" || e.visibility === "hidden");
+}
+function o(i) {
+  const e = i.getAttribute("aria-disabled");
+  return i.hasAttribute("disabled") || e === "true" || i.disabled === !0;
+}
+function u(i) {
+  return i.getAttribute("aria-label") || i.textContent || "";
+}
+function a(i) {
+  return Array.from(i);
+}
+class h extends HTMLElement {
+  constructor() {
+    super(...arguments), this._container = null, this._items = null, this._observer = null;
+  }
+  static get observedAttributes() {
+    return ["item-selector", "direct-item-selector", "item-role"];
+  }
+  connectedCallback() {
+    this.refresh(), this._syncObserver();
+  }
+  disconnectedCallback() {
+    this._disconnectObserver();
+  }
+  attributeChangedCallback(e, r, t) {
+    r !== t && (e === "item-selector" || e === "direct-item-selector" || e === "item-role") && (this.refresh(), this._syncObserver());
+  }
+  get container() {
+    return this._container;
+  }
+  set container(e) {
+    this._container !== e && (this._container = e, this.refresh(), this._syncObserver());
+  }
+  get itemSelector() {
+    return this.getAttribute("item-selector") || '[data-collection-item], .menuitem, [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+  }
+  set itemSelector(e) {
+    this.setAttribute("item-selector", e);
+  }
+  get directItemSelector() {
+    return this.getAttribute("direct-item-selector") || "";
+  }
+  set directItemSelector(e) {
+    e ? this.setAttribute("direct-item-selector", e) : this.removeAttribute("direct-item-selector");
+  }
+  get itemRole() {
+    return this.getAttribute("item-role") || "";
+  }
+  set itemRole(e) {
+    e ? this.setAttribute("item-role", e) : this.removeAttribute("item-role");
+  }
+  get items() {
+    return this._items;
+  }
+  set items(e) {
+    this._items = e ? [...e] : null, this.refresh();
+  }
+  refresh() {
+    const e = this.queryItems();
+    return this.syncItemSemantics(), e;
+  }
+  queryItems(e = {}) {
+    if (this._items) {
+      const s = [...this._items];
+      return e.includeHidden ? s : s.filter((l) => c(l));
+    }
+    const r = this._queryRoot(e.container);
+    if (!r)
+      return [];
+    const t = this.directItemSelector.trim();
+    let n = t ? a(r.querySelectorAll(t)) : [];
+    return n.length || (n = a(r.querySelectorAll(this.itemSelector))), e.includeHidden ? n : n.filter((s) => c(s));
+  }
+  queryEnabledItems(e = {}) {
+    return this.queryItems(e).filter((r) => !o(r));
+  }
+  indexOf(e, r = {}) {
+    return e ? this.queryItems(r).indexOf(e) : -1;
+  }
+  findByValue(e, r = {}) {
+    const t = this.queryItems(r), n = d(t, e, (s) => s.getAttribute("data-value") || s.getAttribute("value") || "");
+    return n >= 0 ? t[n] : null;
+  }
+  findTypeaheadMatch(e, r = {}) {
+    const t = this.queryEnabledItems({ container: r.container }), n = typeof r.startIndex == "number" ? r.startIndex : -1, s = b(t, e, {
+      startIndex: n,
+      getLabel: r.getLabel || u,
+      getDisabled: r.getDisabled || o
+    });
+    return s >= 0 ? t[s] : null;
+  }
+  syncItemSemantics(e = {}) {
+    const r = this.itemRole;
+    this.queryItems({ ...e, includeHidden: !0 }).forEach((t, n) => {
+      r && !t.getAttribute("role") && t.setAttribute("role", r), t.hasAttribute("tabindex") || t.setAttribute("tabindex", "-1"), t.setAttribute("data-collection-index", String(n));
+      const s = o(t);
+      t.getAttribute("aria-disabled") !== (s ? "true" : "false") && t.setAttribute("aria-disabled", s ? "true" : "false");
+      const l = t.getAttribute("role");
+      (l === "menuitemcheckbox" || l === "menuitemradio") && !t.hasAttribute("aria-checked") && t.setAttribute("aria-checked", "false");
+    });
+  }
+  isItemDisabled(e) {
+    return o(e);
+  }
+  getItemLabel(e) {
+    return u(e);
+  }
+  _queryRoot(e) {
+    return e || this._container || this;
+  }
+  _disconnectObserver() {
+    var e;
+    (e = this._observer) == null || e.disconnect(), this._observer = null;
+  }
+  _syncObserver() {
+    const e = this._queryRoot();
+    this._disconnectObserver(), (e instanceof HTMLElement || e instanceof ShadowRoot || e instanceof DocumentFragment) && (this._observer = new MutationObserver(() => {
+      this.syncItemSemantics(), this.dispatchEvent(new CustomEvent("collection-change", { bubbles: !0, composed: !0 }));
+    }), this._observer.observe(e, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["hidden", "disabled", "aria-disabled", "role", "value", "data-value", "aria-label"]
+    }));
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-collection") && customElements.define("ui-collection", h);
+export {
+  h as UICollection
+};