@vielzeug/refine 1.5.1 → 1.5.2

package/dist/datagrid.cjs

@@ -1,10 +1,10 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/raw.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/table-base.css.cjs"),n=require("./_dev.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./headless/ore.cjs"),a=require("./headless/datagrid.cjs"),o=require("./inputs/datagrid/datagrid-column.cjs"),s=require("./inputs/datagrid/datagrid-controls.cjs"),c=require("./inputs/datagrid/datagrid-nav.cjs"),l=require("./inputs/datagrid/datagrid.css.cjs");let u=require("@vielzeug/ore"),d=require("@vielzeug/ripple"),f=require("@vielzeug/arsenal");function p(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function m(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}var h=`ore-datagrid`;(0,u.define)(h,{props:{activeView:u.prop.string(),density:u.prop.string(),...r.disablableBundle,...r.loadableBundle,columns:u.prop.data(),emptyText:u.prop.string(`No data`),expandable:u.prop.bool(!1),filterOptions:u.prop.data(),fullwidth:u.prop.bool(!1),getRowKey:u.prop.data(),label:u.prop.string(),pageSize:u.prop.number(10),pageSizeOptions:u.prop.data(),rows:u.prop.data(),searchLabel:u.prop.data(),searchPlaceholder:u.prop.string(`Search…`),selectedKeys:u.prop.data(),selectionMode:u.prop.string(`none`),sortMode:u.prop.string(`client`),source:u.prop.data(),striped:u.prop.bool(!1),views:u.prop.data()},setup(t){let r=(0,u.getHost)(),l=(0,u.useEmit)(),h=(0,u.useSlots)(),g=(0,d.computed)(()=>t.disabled.value===!0),_=(0,d.computed)(()=>t.selectionMode.value??`none`),v=(0,d.signal)(new Set),y=(0,d.computed)(()=>t.expandable.value===!0&&C.value.some(e=>typeof e.renderExpanded==`function`)),b=(0,d.computed)(()=>+(_.value===`multi`)),x=(0,d.signal)(t.pageSize.value??10);(0,d.watch)(t.pageSize,e=>{e!=null&&(x.value=e)});let S=(0,d.signal)([]);(0,u.onMounted)(()=>{S.value=o.parseColumnChildren(r);let e=new MutationObserver(()=>{S.value=o.parseColumnChildren(r)});return e.observe(r,{attributeFilter:o.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let C=(0,d.computed)(()=>{let e=t.columns.value;return e===void 0?S.value:e}),w=e=>{let r=t.getRowKey.value;if(r)return r(e);let i=e.id;return i==null?(n.warn("ore-datagrid: row missing `id` — keys will collide. Provide `getRowKey` or add a unique `id` field."),`__missing_${Math.random().toString(36).slice(2)}`):String(i)},T=s.createDataGridControls({columns:C,filterOptions:t.filterOptions,rows:(0,d.computed)(()=>t.rows.value??[])}),E=(0,f.debounce)(e=>{let n=e,r=t.source.value;r?.search?r.search(n):T.setSearchQuery(n)},250),D=(0,d.computed)(()=>t.source.value!=null),O=(0,d.signal)([]),k=(0,d.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:x.value,totalItems:0}),A=null;(0,u.onCleanup)(()=>{A?.(),A=null}),(0,d.watch)(t.source,e=>{if(A?.(),A=null,!e){O.value=[],k.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:x.value,totalItems:0};return}let t=()=>{O.value=e.current,k.value=e.meta};t(),A=e.subscribe(t)},{immediate:!0});let j=a.createDataGridControl({columns:()=>C.value,getRowKey:w,items:(0,d.computed)(()=>D.value?O.value:T.filteredRows.value),onSelectionChange:e=>{l(`selection-change`,{keys:[...e],rows:j.selectedRows.value})},onSortChange:e=>{l(`sort-change`,e)},pageSize:()=>D.value?0:x.value,selectionMode:()=>_.value,signal:i.lifecycleSignal(u.onCleanup)});(0,d.watch)(t.selectedKeys,e=>{Array.isArray(e)&&j.setSelection(new Set(e))},{immediate:!0});let M=(0,d.signal)({}),N=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{M.value={...M.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},P=(0,d.computed)(()=>C.value.filter(e=>!T.hiddenColumns.value.has(e.key))),F=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};(0,d.watch)(T.filteredRows,()=>j.goToPage(0),{immediate:!1});function I(e){let n=t.source.value;if(n){e===`prev`?n.prev?.():n.next?.();return}e===`prev`?j.prevPage():j.nextPage(),l(`page-change`,{pageIndex:j.pageIndex.value,pageSize:x.value})}let L=(0,d.computed)(()=>{let e=j.currentPageItems.value;return!e.length||j.isAllSelected()?!1:e.some(e=>j.selectedKeys.value.has(w(e)))}),R=(0,d.computed)(()=>P.value.length+ +(_.value===`multi`)+ +!!y.value),z=(0,d.computed)(()=>D.value?k.value.pageCount>1:x.value>0),B=(0,d.computed)(()=>{if(D.value){let{pageNumber:e,pageSize:t,totalItems:n}=k.value,r=Math.max(1,t);if(!z.value)return`${n} row${n===1?``:`s`}`;if(n===0)return`0 to 0 of 0`;let i=(e-1)*r+1;return`${i} to ${Math.min(i+r-1,n)} of ${n}`}let e=j.totalItems.value;if(!z.value)return`${e} row${e===1?``:`s`}`;if(e===0)return`0 to 0 of 0`;let t=j.pageIndex.value*x.value+1;return`${t} to ${Math.min(t+x.value-1,e)} of ${e}`}),V=(0,d.computed)(()=>t.loading.value===!0||D.value&&k.value.isLoading),H=(0,d.computed)(()=>D.value?k.value.pageNumber>1:j.hasPrevPage.value),U=(0,d.computed)(()=>D.value?k.value.pageNumber<k.value.pageCount:j.hasNextPage.value),W=(0,d.computed)(()=>D.value?k.value.totalItems===0?`0 / 0`:`${k.value.pageNumber} / ${k.value.pageCount}`:`${j.pageIndex.value+1} / ${j.pageCount.value}`),G=[`compact`,`cozy`,`comfortable`],K={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},q={comfortable:`Density: Comfortable`,compact:`Density: Compact`,cozy:`Density: Cozy`},J=(0,d.signal)(t.density.value??`cozy`);(0,d.watch)(t.density,e=>{e&&(J.value=e)});let Y=()=>{let e=G.indexOf(J.value),t=G[(e+1)%G.length];J.value=t,r.setAttribute(`density`,t),l(`density-change`,{density:t})},X=(0,d.signal)(!1),Z=e=>{let t=new Set(v.value),n=!t.has(e);n?t.add(e):t.delete(e),v.value=t,l(`row-expand`,{expanded:n,key:e})},Q={activeCell:(0,d.signal)({col:0,row:0}),focusCell:()=>{}};(0,u.onMounted)(()=>{let e=r.shadowRoot,t=e.querySelector(`.dg-table`);if(!t)return;let{cleanup:n,handle:i}=c.createGridNav(t,e);return Q=i,n}),r.focusCell=e=>Q.focusCell(e);let $=()=>{let e=t.views.value??[],n=t.activeView.value;return u.html`<div
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/table-base.css.cjs"),t=require("./_dev.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./headless/ore.cjs"),i=require("./headless/datagrid.cjs"),a=require("./inputs/datagrid/datagrid-column.cjs"),o=require("./inputs/datagrid/datagrid-controls.cjs"),s=require("./inputs/datagrid/datagrid-nav.cjs"),c=require("./inputs/datagrid/datagrid.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ore/directives"),d=require("@vielzeug/ripple"),f=require("@vielzeug/arsenal");function p(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function m(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}var h=`ore-datagrid`;(0,l.define)(h,{props:{activeView:l.prop.string(),density:l.prop.string(),...n.disablableBundle,...n.loadableBundle,columns:l.prop.data(),emptyText:l.prop.string(`No data`),expandable:l.prop.bool(!1),filterOptions:l.prop.data(),fullwidth:l.prop.bool(!1),getRowKey:l.prop.data(),label:l.prop.string(),pageSize:l.prop.number(10),pageSizeOptions:l.prop.data(),rows:l.prop.data(),searchLabel:l.prop.data(),searchPlaceholder:l.prop.string(`Search…`),selectedKeys:l.prop.data(),selectionMode:l.prop.string(`none`),sortMode:l.prop.string(`client`),source:l.prop.data(),striped:l.prop.bool(!1),views:l.prop.data()},setup(e){let n=(0,l.getHost)(),c=(0,l.useEmit)(),h=(0,l.useSlots)(),g=(0,d.computed)(()=>e.disabled.value===!0),_=(0,d.computed)(()=>e.selectionMode.value??`none`),v=(0,d.signal)(new Set),y=(0,d.computed)(()=>e.expandable.value===!0&&C.value.some(e=>typeof e.renderExpanded==`function`)),b=(0,d.computed)(()=>+(_.value===`multi`)),x=(0,d.signal)(e.pageSize.value??10);(0,d.watch)(e.pageSize,e=>{e!=null&&(x.value=e)});let S=(0,d.signal)([]);(0,l.onMounted)(()=>{S.value=a.parseColumnChildren(n);let e=new MutationObserver(()=>{S.value=a.parseColumnChildren(n)});return e.observe(n,{attributeFilter:a.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let C=(0,d.computed)(()=>{let t=e.columns.value;return t===void 0?S.value:t}),w=n=>{let r=e.getRowKey.value;if(r)return r(n);let i=n.id;return i==null?(t.warn("ore-datagrid: row missing `id` — keys will collide. Provide `getRowKey` or add a unique `id` field."),`__missing_${Math.random().toString(36).slice(2)}`):String(i)},T=o.createDataGridControls({columns:C,filterOptions:e.filterOptions,rows:(0,d.computed)(()=>e.rows.value??[])}),E=(0,f.debounce)(t=>{let n=t,r=e.source.value;r?.search?r.search(n):T.setSearchQuery(n)},250),D=(0,d.computed)(()=>e.source.value!=null),O=(0,d.signal)([]),k=(0,d.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:x.value,totalItems:0}),A=null;(0,l.onCleanup)(()=>{A?.(),A=null}),(0,d.watch)(e.source,e=>{if(A?.(),A=null,!e){O.value=[],k.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:x.value,totalItems:0};return}let t=()=>{O.value=e.current,k.value=e.meta};t(),A=e.subscribe(t)},{immediate:!0});let j=i.createDataGridControl({columns:()=>C.value,getRowKey:w,items:(0,d.computed)(()=>D.value?O.value:T.filteredRows.value),onSelectionChange:e=>{c(`selection-change`,{keys:[...e],rows:j.selectedRows.value})},onSortChange:e=>{c(`sort-change`,e)},pageSize:()=>D.value?0:x.value,selectionMode:()=>_.value,signal:r.lifecycleSignal(l.onCleanup)});(0,d.watch)(e.selectedKeys,e=>{Array.isArray(e)&&j.setSelection(new Set(e))},{immediate:!0});let M=(0,d.signal)({}),N=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{M.value={...M.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},P=(0,d.computed)(()=>C.value.filter(e=>!T.hiddenColumns.value.has(e.key))),F=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};(0,d.watch)(T.filteredRows,()=>j.goToPage(0),{immediate:!1});function I(t){let n=e.source.value;if(n){t===`prev`?n.prev?.():n.next?.();return}t===`prev`?j.prevPage():j.nextPage(),c(`page-change`,{pageIndex:j.pageIndex.value,pageSize:x.value})}let L=(0,d.computed)(()=>{let e=j.currentPageItems.value;return!e.length||j.isAllSelected()?!1:e.some(e=>j.selectedKeys.value.has(w(e)))}),R=(0,d.computed)(()=>P.value.length+ +(_.value===`multi`)+ +!!y.value),z=(0,d.computed)(()=>D.value?k.value.pageCount>1:x.value>0),B=(0,d.computed)(()=>{if(D.value){let{pageNumber:e,pageSize:t,totalItems:n}=k.value,r=Math.max(1,t);if(!z.value)return`${n} row${n===1?``:`s`}`;if(n===0)return`0 to 0 of 0`;let i=(e-1)*r+1;return`${i} to ${Math.min(i+r-1,n)} of ${n}`}let e=j.totalItems.value;if(!z.value)return`${e} row${e===1?``:`s`}`;if(e===0)return`0 to 0 of 0`;let t=j.pageIndex.value*x.value+1;return`${t} to ${Math.min(t+x.value-1,e)} of ${e}`}),V=(0,d.computed)(()=>e.loading.value===!0||D.value&&k.value.isLoading),H=(0,d.computed)(()=>D.value?k.value.pageNumber>1:j.hasPrevPage.value),U=(0,d.computed)(()=>D.value?k.value.pageNumber<k.value.pageCount:j.hasNextPage.value),W=(0,d.computed)(()=>D.value?k.value.totalItems===0?`0 / 0`:`${k.value.pageNumber} / ${k.value.pageCount}`:`${j.pageIndex.value+1} / ${j.pageCount.value}`),G=[`compact`,`cozy`,`comfortable`],K={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},q={comfortable:`Density: Comfortable`,compact:`Density: Compact`,cozy:`Density: Cozy`},J=(0,d.signal)(e.density.value??`cozy`);(0,d.watch)(e.density,e=>{e&&(J.value=e)});let Y=()=>{let e=G.indexOf(J.value),t=G[(e+1)%G.length];J.value=t,n.setAttribute(`density`,t),c(`density-change`,{density:t})},X=(0,d.signal)(!1),Z=e=>{let t=new Set(v.value),n=!t.has(e);n?t.add(e):t.delete(e),v.value=t,c(`row-expand`,{expanded:n,key:e})},Q={activeCell:(0,d.signal)({col:0,row:0}),focusCell:()=>{}};(0,l.onMounted)(()=>{let e=n.shadowRoot,t=e.querySelector(`.dg-table`);if(!t)return;let{cleanup:r,handle:i}=s.createGridNav(t,e);return Q=i,r}),n.focusCell=e=>Q.focusCell(e);let $=()=>{let t=e.views.value??[],n=e.activeView.value;return l.html`<div
         class="dg-tabs"
         role="tablist"
         aria-label="Views"
         aria-controls="dg-tabpanel"
         @keydown="${e=>{if(![`ArrowLeft`,`ArrowRight`,`Home`,`End`].includes(e.key))return;let t=Array.from(e.currentTarget.querySelectorAll(`.dg-tab`)),n=t.findIndex(e=>e.classList.contains(`dg-tab--active`)),r=n;if(e.key===`ArrowLeft`?r=Math.max(0,n-1):e.key===`ArrowRight`?r=Math.min(t.length-1,n+1):e.key===`Home`?r=0:e.key===`End`&&(r=t.length-1),r!==n){e.preventDefault();let n=t[r];n.focus(),n.click()}}}">
-        ${e.map(e=>u.html`<ore-button
+        ${t.map(e=>l.html`<ore-button
               class="${()=>`dg-tab${n===e.id?` dg-tab--active`:``}`}"
               role="tab"
               variant="ghost"
@@ -13,10 +13,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               :tabindex="${()=>n===e.id?`0`:`-1`}"
               :aria-selected="${()=>String(n===e.id)}"
               aria-controls="dg-tabpanel"
-              @click="${()=>{l(`view-change`,{id:e.id,label:e.label})}}">
+              @click="${()=>{c(`view-change`,{id:e.id,label:e.label})}}">
               ${e.label}
             </ore-button>`)}
-      </div>`},ee=()=>u.html`<ore-popover class="dg-action-popover" placement="bottom-end" label="Sort" style="--popover-min-width:18rem">
+      </div>`},ee=()=>l.html`<ore-popover class="dg-action-popover" placement="bottom-end" label="Sort" style="--popover-min-width:18rem">
         <ore-button variant="ghost" size="sm" icon-only label="Sort">
           <ore-icon name="arrow-up-down" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
@@ -57,12 +57,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               @change="${e=>{j.sortState.value.key&&j.sortTo(j.sortState.value.key,e.detail.values[0]??`asc`)}}"></ore-select>
           </div>
         </div>
-      </ore-popover>`,te=()=>u.html`<ore-popover
+      </ore-popover>`,te=()=>l.html`<ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Filter"
         style="--popover-min-width:16rem;--popover-max-height:min(90vh,48rem)">
-        ${()=>T.filterDefs.value.length?u.html`<ore-badge
+        ${()=>T.filterDefs.value.length?l.html`<ore-badge
                 anchor="top-end"
                 color="primary"
                 size="xs"
@@ -77,13 +77,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                 <ore-button slot="target" variant="ghost" size="sm" icon-only label="Filter">
                   <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
                 </ore-button>
-              </ore-badge>`:u.html`<ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Filter">
+              </ore-badge>`:l.html`<ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Filter">
                 <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
               </ore-button>`}
         <div slot="content" class="dg-pop-filter">
           <div class="dg-pop-header">
             <span class="dg-pop-title">Filter by</span>
-            ${()=>T.filterDefs.value.length?u.html`<ore-button
+            ${()=>T.filterDefs.value.length?l.html`<ore-button
                     class="dg-icon-btn"
                     variant="ghost"
                     size="sm"
@@ -91,7 +91,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     label="Clear all filters"
                     @click="${()=>T.clearAllFilters()}">
                     <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                  </ore-button>`:u.html``}
+                  </ore-button>`:l.html``}
           </div>
 
           <!-- Always-visible field picker: select columns to add filter rules -->
@@ -109,7 +109,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
 
           <!-- Active filter rules (appear below the field picker as rules are added) -->
           <div class="dg-pop-filter-rules" ?hidden="${()=>!T.filterDefs.value.length}">
-            ${()=>T.filterDefs.value.map(e=>u.html`
+            ${()=>T.filterDefs.value.map(e=>l.html`
                   <div class="dg-pop-filter-rule">
                     <div class="dg-pop-filter-rule-header">
                       <span class="dg-pop-filter-field">${e.label}</span>
@@ -145,7 +145,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                 `)}
           </div>
         </div>
-      </ore-popover>`,ne=()=>u.html`<ore-popover
+      </ore-popover>`,ne=()=>l.html`<ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Column options"
@@ -154,7 +154,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <ore-icon name="columns-2" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
         <div slot="content" class="dg-pop-col-list" role="menu" aria-label="Column visibility">
-          ${()=>C.value.map(e=>u.html`<ore-button
+          ${()=>C.value.map(e=>l.html`<ore-button
                   class="dg-pop-col-item"
                   role="menuitemcheckbox"
                   variant="ghost"
@@ -170,7 +170,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                   ${e.label}
                 </ore-button>`)}
         </div>
-      </ore-popover>`;return u.html`
+      </ore-popover>`;return l.html`
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
@@ -201,25 +201,25 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
 
           <!-- Search toggle: rightmost, expands in-place -->
           <div class="${()=>`dg-search${T.searchActive.value?` dg-search--open`:``}`}">
-            ${()=>T.searchActive.value?u.html`<ore-input
+            ${()=>T.searchActive.value?l.html`<ore-input
                     class="dg-search-input"
                     type="search"
                     variant="flat"
                     size="sm"
                     rounded="full"
-                    :placeholder="${()=>t.searchPlaceholder.value??`Search…`}"
+                    :placeholder="${()=>e.searchPlaceholder.value??`Search…`}"
                     :disabled="${()=>g.value||void 0}"
                     ref="${e=>{e&&requestAnimationFrame(()=>e.focus())}}"
                     @input="${e=>{E(e.detail.value)}}"
-                    @keydown="${e=>{if(e.key===`Escape`){let e=t.source.value;e?.search&&e.search(``),T.toggleSearch()}}}">
+                    @keydown="${t=>{if(t.key===`Escape`){let t=e.source.value;t?.search&&t.search(``),T.toggleSearch()}}}">
                     <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                  </ore-input>`:u.html``}
+                  </ore-input>`:l.html``}
             <ore-button
               variant="ghost"
               size="sm"
               icon-only
-              :label="${()=>{let[e,n]=t.searchLabel.value??[`Search`,`Close search`];return T.searchActive.value?n:e}}"
-              @click="${()=>{let e=t.source.value;e?.search&&T.searchActive.value&&e.search(``),T.toggleSearch()}}">
+              :label="${()=>{let[t,n]=e.searchLabel.value??[`Search`,`Close search`];return T.searchActive.value?n:t}}"
+              @click="${()=>{let t=e.source.value;t?.search&&T.searchActive.value&&t.search(``),T.toggleSearch()}}">
               <ore-icon
                 :name="${()=>T.searchActive.value?`x`:`search`}"
                 size="15"
@@ -238,13 +238,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           class="dg-table"
           part="table"
           role="grid"
-          :aria-label="${()=>t.label.value??void 0}"
+          :aria-label="${()=>e.label.value??void 0}"
           :aria-busy="${()=>V.value?`true`:null}"
           :aria-disabled="${()=>g.value?`true`:null}">
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${()=>_.value===`multi`?u.html`<th
+              ${()=>_.value===`multi`?l.html`<th
                       class="dg-th dg-th-check"
                       role="columnheader"
                       scope="col"
@@ -256,8 +256,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                         ?disabled="${g}"
                         aria-label="Select all rows on this page"
                         @change="${()=>{g.value||j.selectAll()}}"></ore-checkbox>
-                    </th>`:u.html``}
-              ${()=>P.value.map((e,t)=>u.html`<th
+                    </th>`:l.html``}
+              ${()=>P.value.map((e,t)=>l.html`<th
                     class="${`dg-th${t===P.value.length-1&&y.value?` dg-th-last`:``}`}"
                     role="columnheader"
                     scope="col"
@@ -267,7 +267,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     :aria-label="${e.sortable?void 0:e.headerLabel??e.label}"
                     :style="${()=>{let t=M.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
                     <div class="dg-th-inner">
-                      ${()=>e.sortable?u.html`<ore-button
+                      ${()=>e.sortable?l.html`<ore-button
                               class="dg-sort-btn"
                               variant="text"
                               size="sm"
@@ -283,121 +283,121 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                 size="14"
                                 stroke-width="2"></ore-icon>
                             </ore-button>`:e.label}
-                      ${e.resizable?u.html`<span
+                      ${e.resizable?l.html`<span
                               class="dg-col-resize"
                               aria-hidden="true"
-                              ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,N(e.key,n))}}"></span>`:u.html``}
+                              ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,N(e.key,n))}}"></span>`:l.html``}
                     </div>
                   </th>`)}
-              ${()=>y.value?u.html`<th
+              ${()=>y.value?l.html`<th
                       class="dg-th dg-th-expand"
                       role="columnheader"
                       scope="col"
                       aria-label="Row details"
-                      tabindex="-1"></th>`:u.html``}
+                      tabindex="-1"></th>`:l.html``}
             </tr>
           </thead>
 
           <!-- Body -->
           <tbody class="dg-body" part="tbody">
-            ${()=>j.currentPageItems.value.length===0?u.html`<tr role="row">
+            ${()=>j.currentPageItems.value.length===0?l.html`<tr role="row">
                     <td class="dg-empty" role="gridcell" :colspan="${()=>String(R.value)}">
                       <div class="dg-empty-content">
-                        ${()=>t.emptyText.value??`No data`}
-                        ${()=>T.searchQuery.value||T.filterValues.value.size?u.html`<div class="dg-empty-actions">
+                        ${()=>e.emptyText.value??`No data`}
+                        ${()=>T.searchQuery.value||T.filterValues.value.size?l.html`<div class="dg-empty-actions">
                                 <ore-button
                                   variant="text"
                                   size="sm"
                                   @click="${()=>{T.resetSearch(),T.resetFilters()}}">
                                   Clear all filters & search
                                 </ore-button>
-                              </div>`:u.html``}
+                              </div>`:l.html``}
                       </div>
                     </td>
-                  </tr>`:j.currentPageItems.value.map((t,n)=>{let r=w(t),i=_.value!==`none`&&!g.value,a=n+1;return u.html`<tr
+                  </tr>`:j.currentPageItems.value.map((e,t)=>{let n=w(e),r=_.value!==`none`&&!g.value,i=t+1;return l.html`<tr
                         class="dg-tr"
                         part="row"
                         role="row"
-                        :aria-selected="${()=>_.value===`none`?null:String(j.selectedKeys.value.has(r))}"
-                        :aria-expanded="${()=>y.value?String(v.value.has(r)):null}"
-                        ?data-selectable="${i}"
+                        :aria-selected="${()=>_.value===`none`?null:String(j.selectedKeys.value.has(n))}"
+                        :aria-expanded="${()=>y.value?String(v.value.has(n)):null}"
+                        ?data-selectable="${r}"
                         ?data-disabled="${g}"
-                        @click="${()=>{i&&_.value===`single`&&j.toggleRow(r)}}"
-                        @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&i&&_.value===`single`&&(e.preventDefault(),j.toggleRow(r))}}">
-                        ${()=>_.value===`multi`?u.html`<td
+                        @click="${()=>{r&&_.value===`single`&&j.toggleRow(n)}}"
+                        @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&r&&_.value===`single`&&(e.preventDefault(),j.toggleRow(n))}}">
+                        ${()=>_.value===`multi`?l.html`<td
                                 class="dg-td dg-td-check"
                                 role="gridcell"
-                                :tabindex="${()=>{let e=Q.activeCell.value;return e.row===a&&e.col===0?`0`:`-1`}}"
-                                @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),g.value||j.toggleRow(r))}}">
+                                :tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===0?`0`:`-1`}}"
+                                @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),g.value||j.toggleRow(n))}}">
                                 <ore-checkbox
                                   class="dg-check"
-                                  :checked="${()=>j.selectedKeys.value.has(r)}"
+                                  :checked="${()=>j.selectedKeys.value.has(n)}"
                                   ?disabled="${g}"
                                   aria-label="Select row"
                                   tabindex="-1"
                                   @click="${e=>e.stopPropagation()}"
-                                  @change="${()=>{g.value||j.toggleRow(r)}}"></ore-checkbox>
-                              </td>`:u.html``}
-                        ${P.value.map((e,n)=>{let r=F(e,t);return u.html`<td
+                                  @change="${()=>{g.value||j.toggleRow(n)}}"></ore-checkbox>
+                              </td>`:l.html``}
+                        ${P.value.map((t,n)=>{let r=F(t,e);return l.html`<td
                             class="${`dg-td${n===P.value.length-1&&y.value?` dg-td-last`:``}`}"
                             part="cell"
                             role="gridcell"
-                            data-align="${e.align??`left`}"
-                            :tabindex="${()=>{let e=Q.activeCell.value;return e.row===a&&e.col===n+b.value?`0`:`-1`}}"
+                            data-align="${t.align??`left`}"
+                            :tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===n+b.value?`0`:`-1`}}"
                             :title="${r}">
                             ${r}
                           </td>`})}
-                        ${()=>y.value?u.html`<td
+                        ${()=>y.value?l.html`<td
                                 class="dg-td dg-td-expand"
                                 role="gridcell"
-                                :tabindex="${()=>{let e=Q.activeCell.value;return e.row===a&&e.col===R.value-1?`0`:`-1`}}"
-                                @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),g.value||Z(r))}}">
+                                :tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===R.value-1?`0`:`-1`}}"
+                                @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),g.value||Z(n))}}">
                                 <ore-button
                                   class="dg-expand-btn"
                                   variant="ghost"
                                   size="sm"
                                   icon-only
                                   tabindex="-1"
-                                  :label="${()=>v.value.has(r)?`Collapse row`:`Expand row`}"
-                                  :aria-expanded="${()=>String(v.value.has(r))}"
+                                  :label="${()=>v.value.has(n)?`Collapse row`:`Expand row`}"
+                                  :aria-expanded="${()=>String(v.value.has(n))}"
                                   :disabled="${()=>g.value||void 0}"
-                                  @click="${e=>{e.stopPropagation(),g.value||Z(r)}}">
+                                  @click="${e=>{e.stopPropagation(),g.value||Z(n)}}">
                                   <ore-icon
-                                    :name="${()=>v.value.has(r)?`chevron-up`:`chevron-down`}"
+                                    :name="${()=>v.value.has(n)?`chevron-up`:`chevron-down`}"
                                     size="14"
                                     stroke-width="2"
                                     aria-hidden="true"></ore-icon>
                                 </ore-button>
-                              </td>`:u.html``}
+                              </td>`:l.html``}
                       </tr>
-                      ${()=>y.value&&v.value.has(r)?u.html`<tr class="dg-tr-expanded" role="row">
+                      ${()=>y.value&&v.value.has(n)?l.html`<tr class="dg-tr-expanded" role="row">
                               <td
                                 class="dg-td-expanded"
                                 role="gridcell"
                                 :colspan="${()=>String(R.value)}">
-                                ${e.raw(()=>C.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(t)??``)}
+                                ${(0,u.raw)(()=>C.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
                               </td>
-                            </tr>`:u.html``} `})}
+                            </tr>`:l.html``} `})}
           </tbody>
         </table>
       </div>
 
       <!-- Footer / Pagination -->
-      ${()=>z.value?u.html`<div class="dg-footer" part="footer" role="navigation" aria-label="Pagination">
-              ${()=>(t.pageSizeOptions.value??[]).length?u.html``:u.html`<span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true"
+      ${()=>z.value?l.html`<div class="dg-footer" part="footer" role="navigation" aria-label="Pagination">
+              ${()=>(e.pageSizeOptions.value??[]).length?l.html``:l.html`<span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true"
                       >${B}</span
                     >`}
               <div class="dg-footer-end">
-                ${()=>{let e=t.pageSizeOptions.value??[];return e.length?u.html`<div class="dg-page-size-wrap">
+                ${()=>{let t=e.pageSizeOptions.value??[];return t.length?l.html`<div class="dg-page-size-wrap">
                         <ore-select
                           class="dg-page-size-select"
                           fullwidth
                           aria-label="Rows per page"
                           :value="${()=>String(x.value)}"
-                          :options="${()=>e.map(e=>({label:String(e),value:String(e)}))}"
+                          :options="${()=>t.map(e=>({label:String(e),value:String(e)}))}"
                           :disabled="${()=>g.value||void 0}"
-                          @change="${e=>{let t=parseInt(e.detail.values[0],10);isNaN(t)||(x.value=t,j.goToPage(0),l(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
-                      </div>`:u.html``}}
+                          @change="${e=>{let t=parseInt(e.detail.values[0],10);isNaN(t)||(x.value=t,j.goToPage(0),c(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
+                      </div>`:l.html``}}
                 <div class="dg-pagination" role="group" aria-label="Page navigation">
                   <ore-button
                     class="dg-page-btn"
@@ -430,6 +430,6 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                   </ore-button>
                 </div>
               </div>
-            </div>`:u.html``}
-    `},shadow:{delegatesFocus:!0},styles:[t.tableBaseMixin(`datagrid`),l.default]}),exports.COLUMN_TAG=o.COLUMN_TAG,exports.DATAGRID_TAG=h,exports.ariaSortValue=m,exports.sortIconName=p;
+            </div>`:l.html``}
+    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),c.default]}),exports.COLUMN_TAG=a.COLUMN_TAG,exports.DATAGRID_TAG=h,exports.ariaSortValue=m,exports.sortIconName=p;
 //# sourceMappingURL=datagrid.cjs.map