@editora/ui-core 0.1.19 → 0.1.21

package/dist/tree-Dx_kv_ih.js

@@ -0,0 +1,39 @@
+"use strict";const v=require("./ElementBase-EV6mVBUV.js"),p=require("./collection-qv8A8rq4.js"),f=require("./tree-item.cjs.js");function x(l,t){const e=[],i=t.getExpanded||(()=>!1),r=t.getDisabled||(()=>!1),s=(d,n,o)=>{d.forEach(a=>{const u=t.getChildren(a)||[],c={item:a,id:t.getId(a),label:t.getLabel(a),level:n,parentId:o,disabled:r(a),expanded:i(a),hasChildren:u.length>0};e.push(c),s(u,n+1,c.id)})};return s(l,1,null),e}function g(l,t){const e=[],i=t.getExpanded||(()=>!1),r=t.getDisabled||(()=>!1),s=(d,n,o)=>{d.forEach(a=>{const u=t.getChildren(a)||[],c=i(a),h={item:a,id:t.getId(a),label:t.getLabel(a),level:n,parentId:o,disabled:r(a),expanded:c,hasChildren:u.length>0};e.push(h),h.hasChildren&&c&&s(u,n+1,h.id)})};return s(l,1,null),e}function b(l,t){return l.findIndex(e=>e.id===t)}function _(l,t){const e=l[t];return e?.parentId?l.findIndex(i=>i.id===e.parentId):-1}function y(l,t,e=-1){const i=p.normalizeCollectionText(t);if(!i)return-1;for(let r=1;r<=l.length;r+=1){const s=(e+r+l.length)%l.length,d=l[s];if(!d.disabled&&p.normalizeCollectionText(d.label).startsWith(i))return s}return-1}const T=`
+  :host {
+    --ui-tree-indent: 16px;
+    --ui-tree-radius: 14px;
+    --ui-tree-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent);
+    --ui-tree-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-tree-text: var(--ui-color-text, #0f172a);
+    --ui-tree-muted: var(--ui-color-muted, #64748b);
+    display: block;
+    min-inline-size: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .tree {
+    min-inline-size: 0;
+    display: grid;
+    gap: 4px;
+    padding: 10px;
+    border: 1px solid var(--ui-tree-border);
+    border-radius: var(--ui-tree-radius);
+    background: var(--ui-tree-bg);
+    color: var(--ui-tree-text);
+  }
+
+  @media (forced-colors: active) {
+    .tree {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+  }
+`;class m extends v.ElementBase{constructor(){super(),this._observer=null,this._focusedValue=null,this._typeaheadBuffer="",this._typeaheadTimer=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onMutation=this._onMutation.bind(this)}static get observedAttributes(){return["value","indent-size"]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(this._onMutation),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["expanded","selected","disabled","label","value"]}),queueMicrotask(()=>this._syncTree())}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._observer?.disconnect(),this._observer=null,this._typeaheadTimer!=null&&window.clearTimeout(this._typeaheadTimer),super.disconnectedCallback()}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}expand(t){const e=this._findByValue(t);!e||e.childItems.length===0||(e.setAttribute("expanded",""),this._emitToggle(e,!0),this._syncTree())}collapse(t){const e=this._findByValue(t);!e||e.childItems.length===0||(e.removeAttribute("expanded"),this._emitToggle(e,!1),this._syncTree())}toggle(t){const e=this._findByValue(t);if(!e||e.childItems.length===0)return;const i=!e.hasAttribute("expanded");e.toggleAttribute("expanded",i),this._emitToggle(e,i),this._syncTree()}select(t){const e=this._findByValue(t);!e||e.hasAttribute("disabled")||(this.value=t,this._focusedValue=t,this._emitSelect(e),this._syncTree())}focusValue(t){const e=this._findByValue(t);e&&(this._focusedValue=t,this._syncTree(),e.focusRow({preventScroll:!0}))}_onMutation(){this._syncTree()}_allItems(){return Array.from(this.querySelectorAll("ui-tree-item")).filter(t=>t instanceof f.UITreeItem&&t.closest("ui-tree")===this)}_rootItems(){return Array.from(this.children).filter(t=>t instanceof f.UITreeItem)}_visibleRecords(){const t=this._rootItems();return g(t,{getId:e=>e.value,getLabel:e=>e.label,getChildren:e=>e.childItems,getExpanded:e=>e.hasAttribute("expanded"),getDisabled:e=>e.hasAttribute("disabled")}).map(e=>({...e,item:e.item}))}_findByValue(t){return this._allItems().find(e=>e.value===t)||null}_syncTree(){const t=this._allItems(),e=this._visibleRecords(),i=this.value||e.find(n=>!n.disabled)?.id||"",r=this._focusedValue&&e.some(n=>n.id===this._focusedValue)?this._focusedValue:i;this._focusedValue=r||null;const s=new Set(e.map(n=>n.id)),d=new Map(e.map(n=>[n.id,n]));t.forEach(n=>{const o=d.get(n.value);n.style.setProperty("--ui-tree-indent",this.getAttribute("indent-size")||"16px"),n.applyTreeState({level:o?.level||1,hasChildren:n.childItems.length>0,expanded:n.hasAttribute("expanded"),selected:n.value===i,active:n.value===r,hidden:!s.has(n.value)})})}_moveFocus(t){const e=this._visibleRecords();if(!e.length)return;const i=b(e,this._focusedValue||this.value||""),r=i>=0?i:-1;for(let s=1;s<=e.length;s+=1){const d=(r+t*s+e.length)%e.length,n=e[d];if(!n.disabled){this.focusValue(n.id);return}}}_emitSelect(t){this.dispatchEvent(new CustomEvent("select",{detail:{value:t.value,label:t.label},bubbles:!0,composed:!0}))}_emitToggle(t,e){this.dispatchEvent(new CustomEvent("expanded-change",{detail:{value:t.value,expanded:e},bubbles:!0,composed:!0}))}_onClick(t){const e=t.composedPath(),i=e.find(s=>s instanceof f.UITreeItem);if(!i||i.hasAttribute("disabled"))return;const r=e.find(s=>s instanceof HTMLElement&&s.getAttribute("data-action")==="toggle");if(this._focusedValue=i.value,r&&i.childItems.length>0){this.toggle(i.value);return}this.select(i.value)}_onKeyDown(t){const e=this._visibleRecords();if(!e.length)return;const i=b(e,this._focusedValue||this.value||""),r=i>=0?e[i]:e[0];if(r){if(t.key==="ArrowDown"){t.preventDefault(),this._moveFocus(1);return}if(t.key==="ArrowUp"){t.preventDefault(),this._moveFocus(-1);return}if(t.key==="Home"){t.preventDefault(),this.focusValue(e[0].id);return}if(t.key==="End"){t.preventDefault(),this.focusValue(e[e.length-1].id);return}if(t.key==="ArrowRight"){if(t.preventDefault(),r.hasChildren&&!r.expanded){this.expand(r.id);return}if(r.hasChildren&&r.expanded){const s=e[i+1];s?.parentId===r.id&&this.focusValue(s.id)}return}if(t.key==="ArrowLeft"){if(t.preventDefault(),r.hasChildren&&r.expanded){this.collapse(r.id);return}const s=_(e,i);s>=0&&this.focusValue(e[s].id);return}if(t.key==="Enter"||t.key===" "){t.preventDefault(),this.select(r.id);return}if(t.key.length===1&&/\S/.test(t.key)){this._typeaheadBuffer=`${this._typeaheadBuffer}${t.key.toLowerCase()}`.slice(0,24),this._typeaheadTimer!=null&&window.clearTimeout(this._typeaheadTimer),this._typeaheadTimer=window.setTimeout(()=>{this._typeaheadBuffer="",this._typeaheadTimer=null},420);const s=y(e,this._typeaheadBuffer,i);s>=0&&(t.preventDefault(),this.focusValue(e[s].id))}}}shouldRenderOnAttributeChange(t){return t==="indent-size"}render(){this.setContent(`
+      <style>${T}</style>
+      <div class="tree" part="tree" role="tree">
+        <slot></slot>
+      </div>
+    `),queueMicrotask(()=>this._syncTree())}}typeof customElements<"u"&&!customElements.get("ui-tree")&&customElements.define("ui-tree",m);exports.UITree=m;exports.findParentTreeRecordIndex=_;exports.findTreeRecordIndexById=b;exports.findTreeTypeaheadMatch=y;exports.flattenTree=x;exports.flattenVisibleTree=g;

package/dist/tree-item.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-1b301e7f.js"),i=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-EV6mVBUV.js"),i=`
   :host {
     --ui-tree-indent: 16px;
     --ui-tree-level: 1;
@@ -89,7 +89,7 @@
       transition: none !important;
     }
   }
-`;class t extends r.ElementBase{constructor(){super(...arguments),this._row=null,this._children=null,this._twist=null}static get observedAttributes(){return["expanded","selected","disabled","hidden"]}get value(){return this.getAttribute("value")||this.id||""}get label(){var e;return this.getAttribute("label")||((e=this.textContent)==null?void 0:e.trim())||""}get childItems(){return Array.from(this.children).filter(e=>e instanceof t)}focusRow(e){if(this._row)try{this._row.focus(e)}catch{this._row.focus()}}applyTreeState(e){this.hidden=e.hidden,this.style.setProperty("--ui-tree-level",String(e.level)),this.toggleAttribute("expanded",e.expanded),this.toggleAttribute("selected",e.selected),!(!this._row||!this._children||!this._twist)&&(this._row.tabIndex=e.active?0:-1,this._row.setAttribute("aria-level",String(e.level)),this._row.setAttribute("aria-selected",e.selected?"true":"false"),this._row.setAttribute("aria-expanded",e.hasChildren?String(e.expanded):"false"),this._twist.setAttribute("data-has-children",e.hasChildren?"true":"false"),this._children.hidden=!e.hasChildren||!e.expanded)}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+`;class t extends r.ElementBase{constructor(){super(...arguments),this._row=null,this._children=null,this._twist=null}static get observedAttributes(){return["expanded","selected","disabled","hidden"]}get value(){return this.getAttribute("value")||this.id||""}get label(){return this.getAttribute("label")||this.textContent?.trim()||""}get childItems(){return Array.from(this.children).filter(e=>e instanceof t)}focusRow(e){if(this._row)try{this._row.focus(e)}catch{this._row.focus()}}applyTreeState(e){this.hidden=e.hidden,this.style.setProperty("--ui-tree-level",String(e.level)),this.toggleAttribute("expanded",e.expanded),this.toggleAttribute("selected",e.selected),!(!this._row||!this._children||!this._twist)&&(this._row.tabIndex=e.active?0:-1,this._row.setAttribute("aria-level",String(e.level)),this._row.setAttribute("aria-selected",e.selected?"true":"false"),this._row.setAttribute("aria-expanded",e.hasChildren?String(e.expanded):"false"),this._twist.setAttribute("data-has-children",e.hasChildren?"true":"false"),this._children.hidden=!e.hasChildren||!e.expanded)}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
       <style>${i}</style>
       <div class="row" part="row" role="treeitem" tabindex="-1">
         <span class="twist" part="twist" data-action="toggle">▸</span>

package/dist/tree-item.esm.js

@@ -1,4 +1,4 @@
-import { E as r } from "./ElementBase-909688f3.mjs";
+import { E as r } from "./ElementBase-YlTLMsGk.mjs";
 const i = `
   :host {
     --ui-tree-indent: 16px;
@@ -102,8 +102,7 @@ class t extends r {
     return this.getAttribute("value") || this.id || "";
   }
   get label() {
-    var e;
-    return this.getAttribute("label") || ((e = this.textContent) == null ? void 0 : e.trim()) || "";
+    return this.getAttribute("label") || this.textContent?.trim() || "";
   }
   get childItems() {
     return Array.from(this.children).filter((e) => e instanceof t);

package/dist/tree.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tree-0a7a8d05.js");require("./ElementBase-1b301e7f.js");require("./collection-a2969ad2.js");require("./tree-item.cjs.js");exports.UITree=e.UITree;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tree-Dx_kv_ih.js");exports.UITree=e.UITree;

package/dist/tree.esm.js

@@ -1,7 +1,4 @@
-import { U as e } from "./tree-dcd74a4a.mjs";
-import "./ElementBase-909688f3.mjs";
-import "./collection-a1aac0c6.mjs";
-import "./tree-item.esm.js";
+import { U as o } from "./tree-B3kE8ESs.mjs";
 export {
-  e as UITree
+  o as UITree
 };