@vielzeug/refine 2.4.0 → 3.0.0

package/dist/datagrid.cjs

@@ -1,26 +1,26 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/table-base.css.cjs");require("./_dev.cjs");const t=require("./shared/prop-bundles.cjs"),n=require("./inputs/datagrid/datagrid.css.cjs"),r=require("./inputs/datagrid/datagrid-column.cjs"),i=require("./inputs/datagrid/datagrid-model.cjs"),a=require("./inputs/datagrid/datagrid-nav.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple"),c=require("@vielzeug/arsenal/function");var l={activeFilters:e=>`${e} active filter${e===1?``:`s`}`,addFilter:`Add filter…`,ascending:`A → Z`,clearAllFilters:`Clear all filters`,clearFiltersAndSearch:`Clear all filters & search`,clearSort:`Clear sort`,closeSearch:`Close search`,collapseRow:`Collapse row`,columnOptions:`Column options`,columnVisibility:`Column visibility`,comfortableDensity:`Density: Comfortable`,compactDensity:`Density: Compact`,contains:`Contains`,cozyDensity:`Density: Cozy`,data:`Data`,descending:`Z → A`,emptyValue:`(empty)`,equals:`Equals`,expandRow:`Expand row`,filter:`Filter`,filterBy:`Filter by`,filterOperator:e=>`${e} operator`,greaterThan:`Greater than`,hiddenColumns:e=>`${e} hidden column${e===1?``:`s`}`,lessThan:`Less than`,nextPage:`Next page`,numericAscending:`0 → 9`,numericDescending:`9 → 0`,pageNavigation:`Page navigation`,pagination:`Pagination`,previousPage:`Previous page`,property:`Property`,range:(e,t,n)=>`${e} to ${t} of ${n}`,removeFilter:`Remove filter`,resetColumns:`Reset`,rowDetails:`Row details`,rows:e=>`${e} row${e===1?``:`s`}`,rowsPerPage:`Rows per page`,search:`Search`,selectAllRows:`Select all rows on this page`,selectRow:`Select row`,sort:`Sort`,sortBy:`Sort by`,views:`Views`,visibleColumns:(e,t)=>`${e} of ${t} visible`};function u(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function d(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}function f(e){let t=e.detail;return Array.isArray(t?.values)?t.values:(e.target.value??``).split(`,`).filter(Boolean)}var p=`ore-datagrid`;(0,o.define)(p,{props:{activeView:o.prop.string(),density:o.prop.string(),...t.disablableBundle,...t.loadableBundle,columns:o.prop.data(),emptyText:o.prop.string(`No data`),expandable:o.prop.bool(!1),filterOptions:o.prop.data(),fullwidth:o.prop.bool(!1),getRowKey:o.prop.data(),label:o.prop.string(),labels:o.prop.data(),pageSize:o.prop.number(10),pageSizeOptions:o.prop.data(),rows:o.prop.data(),searchLabel:o.prop.data(),searchPlaceholder:o.prop.string(),selectedKeys:o.prop.data(),selectionMode:o.prop.string(`none`),sortMode:o.prop.string(`client`),source:o.prop.data(),striped:o.prop.bool(!1),views:o.prop.data()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),p=(0,o.useSlots)(),m=(0,s.computed)(()=>({...l,...e.labels.value})),h=(0,s.computed)(()=>e.disabled.value===!0),g=(0,s.computed)(()=>e.selectionMode.value??`none`),_=(0,s.signal)(new Set),v=(0,s.computed)(()=>e.expandable.value===!0&&S.value.some(e=>typeof e.renderExpanded==`function`)),y=(0,s.computed)(()=>+(g.value===`multi`)),b=(0,s.signal)(e.pageSize.value??10);(0,s.watch)(e.pageSize,e=>{e!=null&&(b.value=e)});let x=(0,s.signal)([]);(0,o.onMounted)(()=>{x.value=r.parseColumnChildren(t);let e=new MutationObserver(()=>{x.value=r.parseColumnChildren(t)});return e.observe(t,{attributeFilter:r.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let S=(0,s.computed)(()=>{let t=e.columns.value;return t===void 0?x.value:t}),C=(0,s.computed)(()=>{let t=S.value.map(e=>({label:e.label,value:e.key})),n=new Set(t.map(e=>e.value));for(let r of e.filterOptions.value??[])n.has(r.key)||t.push({label:r.label,value:r.key});return t}),w=t=>{let n=e.getRowKey.value;if(n)return n(t);let r=t.id;return r==null?`__missing_${Math.random().toString(36).slice(2)}`:String(r)},T=(0,s.computed)(()=>e.source.value!=null),E=(0,s.signal)([]),D=(0,s.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:b.value,totalItems:0}),O=null;(0,o.onCleanup)(()=>{O?.(),O=null}),(0,s.watch)(e.source,e=>{if(O?.(),O=null,!e){E.value=[],D.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:b.value,totalItems:0};return}let t=(t=e.snapshot)=>{E.value=t.data,D.value={error:t.error,isLoading:t.isFetching,pageCount:t.pagination.count,pageNumber:t.pagination.index,pageSize:t.pagination.size,totalItems:t.pagination.total}};t(),O=e.subscribe(t)},{immediate:!0});let k=i.createDataGridModel({activeView:(0,s.computed)(()=>(e.views.value??[]).find(t=>t.id===e.activeView.value)),clientSide:(0,s.computed)(()=>!T.value),columns:S,emptyValueLabel:(0,s.computed)(()=>m.value.emptyValue),filterOperators:(0,s.computed)(()=>[{label:m.value.contains,value:`contains`},{label:m.value.equals,value:`equals`},{label:m.value.greaterThan,value:`gt`},{label:m.value.lessThan,value:`lt`}]),filterOptions:e.filterOptions,getRowKey:w,items:(0,s.computed)(()=>T.value?E.value:e.rows.value??[]),onSelectionChange:e=>{n(`selection-change`,{keys:[...e],rows:k.selectedRows.value})},onSortChange:e=>{n(`sort-change`,e)},pageSize:(0,s.computed)(()=>T.value?0:b.value),selectionMode:g,sortMode:(0,s.computed)(()=>e.sortMode.value??`client`)}),A=(0,s.computed)(()=>{let e=S.value.find(e=>e.key===k.sortState.value.key);if(e?.sortType)return e.sortType;let t=k.filteredRows.value.find(t=>t[e?.key??``]!=null);return t&&typeof t[e?.key??``]==`number`?`number`:`text`}),j=(0,s.computed)(()=>A.value===`number`?[{label:m.value.numericAscending,value:`asc`},{label:m.value.numericDescending,value:`desc`}]:[{label:m.value.ascending,value:`asc`},{label:m.value.descending,value:`desc`}]),M=(0,c.debounce)(t=>{let n=e.source.value;n?.setQuery?n.setQuery({search:t}):k.setSearchQuery(t)},250);(0,s.watch)(e.selectedKeys,e=>{Array.isArray(e)&&k.setSelection(new Set(e))},{immediate:!0});let N=(0,s.signal)({}),P=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{N.value={...N.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},F=k.visibleColumns,I=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};function L(t){let r=e.source.value;if(r){t===`prev`?r.page?.previous():r.page?.next();return}t===`prev`?k.prevPage():k.nextPage(),n(`page-change`,{pageIndex:k.pageIndex.value,pageSize:b.value})}let R=(0,s.computed)(()=>{let e=k.currentPageItems.value;return!e.length||k.isAllSelected()?!1:e.some(e=>k.selectedKeys.value.has(w(e)))}),z=(0,s.computed)(()=>F.value.length+ +(g.value===`multi`)+ +!!v.value),B=(0,s.computed)(()=>T.value?D.value.pageCount>1:b.value>0),V=(0,s.computed)(()=>{if(T.value){let{pageNumber:e,pageSize:t,totalItems:n}=D.value,r=Math.max(1,t);if(!B.value)return m.value.rows(n);if(n===0)return m.value.range(0,0,0);let i=(e-1)*r+1,a=Math.min(i+r-1,n);return m.value.range(i,a,n)}let e=k.totalItems.value;if(!B.value)return m.value.rows(e);if(e===0)return m.value.range(0,0,0);let t=k.pageIndex.value*b.value+1,n=Math.min(t+b.value-1,e);return m.value.range(t,n,e)}),H=(0,s.computed)(()=>e.loading.value===!0||T.value&&D.value.isLoading),U=(0,s.computed)(()=>T.value?D.value.pageNumber>1:k.hasPrevPage.value),W=(0,s.computed)(()=>T.value?D.value.pageNumber<D.value.pageCount:k.hasNextPage.value),G=(0,s.computed)(()=>T.value?D.value.totalItems===0?`0 / 0`:`${D.value.pageNumber} / ${D.value.pageCount}`:`${k.pageIndex.value+1} / ${k.pageCount.value}`),K=[`compact`,`cozy`,`comfortable`],q={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},J=(0,s.computed)(()=>({comfortable:m.value.comfortableDensity,compact:m.value.compactDensity,cozy:m.value.cozyDensity})),Y=(0,s.signal)(e.density.value??`cozy`);(0,s.watch)(e.density,e=>{e&&(Y.value=e)});let X=()=>{let e=K.indexOf(Y.value),r=K[(e+1)%K.length];Y.value=r,t.setAttribute(`density`,r),n(`density-change`,{density:r})},Z=e=>{let t=new Set(_.value),r=!t.has(e);r?t.add(e):t.delete(e),_.value=t,n(`row-expand`,{expanded:r,key:e})},Q={activeCell:(0,s.signal)({col:0,row:0}),focusCell:()=>{}};(0,o.onMounted)(()=>{let e=t.shadowRoot,n=e.querySelector(`.dg-table`);if(!n)return;let{cleanup:r,handle:i}=a.createGridNav(n,e);return Q=i,r}),t.focusCell=e=>Q.focusCell(e);let $=()=>{let t=e.views.value??[],r=e.activeView.value;return o.html`
+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("./inputs/datagrid/datagrid.css.cjs"),i=require("./inputs/datagrid/datagrid-column.cjs"),a=require("./inputs/datagrid/datagrid-model.cjs"),o=require("./inputs/datagrid/datagrid-nav.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple"),l=require("@vielzeug/arsenal");var ee={activeFilters:e=>`${e} active filter${e===1?``:`s`}`,addFilter:`Add filter…`,ascending:`A → Z`,clearAllFilters:`Clear all filters`,clearFiltersAndSearch:`Clear all filters & search`,clearSort:`Clear sort`,closeSearch:`Close search`,collapseRow:`Collapse row`,columnOptions:`Column options`,columnVisibility:`Column visibility`,comfortableDensity:`Density: Comfortable`,compactDensity:`Density: Compact`,contains:`Contains`,cozyDensity:`Density: Cozy`,data:`Data`,descending:`Z → A`,emptyValue:`(empty)`,equals:`Equals`,expandRow:`Expand row`,filter:`Filter`,filterBy:`Filter by`,filterOperator:e=>`${e} operator`,greaterThan:`Greater than`,hiddenColumns:e=>`${e} hidden column${e===1?``:`s`}`,lessThan:`Less than`,nextPage:`Next page`,numericAscending:`0 → 9`,numericDescending:`9 → 0`,pageNavigation:`Page navigation`,pagination:`Pagination`,previousPage:`Previous page`,property:`Property`,range:(e,t,n)=>`${e} to ${t} of ${n}`,removeFilter:`Remove filter`,resetColumns:`Reset`,rowDetails:`Row details`,rows:e=>`${e} row${e===1?``:`s`}`,rowsPerPage:`Rows per page`,search:`Search`,selectAllRows:`Select all rows on this page`,selectRow:`Select row`,sort:`Sort`,sortBy:`Sort by`,views:`Views`,visibleColumns:(e,t)=>`${e} of ${t} visible`};function u(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function d(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}function f(e){let t=e.detail;return Array.isArray(t?.values)?t.values:(e.target.value??``).split(`,`).filter(Boolean)}var p=`ore-datagrid`;(0,s.define)(p,{props:{activeView:s.prop.string(),density:s.prop.string(),...n.disablableBundle,...n.loadableBundle,columns:s.prop.data(),emptyText:s.prop.string(`No data`),expandable:s.prop.bool(!1),filterOptions:s.prop.data(),fullwidth:s.prop.bool(!1),getRowKey:s.prop.data(),label:s.prop.string(),labels:s.prop.data(),pageSize:s.prop.number(10),pageSizeOptions:s.prop.data(),rows:s.prop.data(),searchLabel:s.prop.data(),searchPlaceholder:s.prop.string(),selectedKeys:s.prop.data(),selectionMode:s.prop.string(`none`),sortMode:s.prop.string(`client`),source:s.prop.data(),striped:s.prop.bool(!1),views:s.prop.data()},setup(e){let n=(0,s.getHost)(),r=(0,s.useEmit)(),p=(0,s.useSlots)(),m=(0,c.computed)(()=>({...ee,...e.labels.value})),h=(0,c.computed)(()=>e.disabled.value===!0),g=(0,c.computed)(()=>e.selectionMode.value??`none`),_=(0,c.signal)(new Set),v=(0,c.computed)(()=>e.expandable.value===!0&&S.value.some(e=>typeof e.renderExpanded==`function`)),y=(0,c.computed)(()=>+(g.value===`multi`)),b=(0,c.signal)(e.pageSize.value??10);(0,c.watch)(e.pageSize,e=>{e!=null&&(b.value=e)});let x=(0,c.signal)([]);(0,s.onMounted)(()=>{x.value=i.parseColumnChildren(n);let e=new MutationObserver(()=>{x.value=i.parseColumnChildren(n)});return e.observe(n,{attributeFilter:i.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let S=(0,c.computed)(()=>{let t=e.columns.value;return t===void 0?x.value:t}),C=(0,c.computed)(()=>{let t=S.value.map(e=>({label:e.label,value:e.key})),n=new Set(t.map(e=>e.value));for(let r of e.filterOptions.value??[])n.has(r.key)||t.push({label:r.label,value:r.key});return t}),w=t=>{let n=e.getRowKey.value;if(n)return n(t);let r=t.id;return r==null?`__missing_${Math.random().toString(36).slice(2)}`:String(r)},T=(0,c.computed)(()=>e.source.value!=null),E=(0,c.signal)([]),D=(0,c.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:b.value,totalItems:0}),O=null;(0,s.onCleanup)(()=>{O?.(),O=null}),(0,c.watch)(e.source,e=>{if(O?.(),O=null,!e){E.value=[],D.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:b.value,totalItems:0};return}let t=(t=e.state)=>{E.value=t.items,D.value={error:t.error,isLoading:t.loading,pageCount:t.pagination.pageCount,pageNumber:t.pagination.page,pageSize:t.pagination.pageSize,totalItems:t.pagination.totalItems}};t(),O=e.subscribe(t)},{immediate:!0});let k=a.createDataGridModel({activeView:(0,c.computed)(()=>(e.views.value??[]).find(t=>t.id===e.activeView.value)),clientSide:(0,c.computed)(()=>!T.value),columns:S,emptyValueLabel:(0,c.computed)(()=>m.value.emptyValue),filterOperators:(0,c.computed)(()=>[{label:m.value.contains,value:`contains`},{label:m.value.equals,value:`equals`},{label:m.value.greaterThan,value:`gt`},{label:m.value.lessThan,value:`lt`}]),filterOptions:e.filterOptions,getRowKey:w,items:(0,c.computed)(()=>T.value?E.value:e.rows.value??[]),onSelectionChange:e=>{r(`selection-change`,{keys:[...e],rows:k.selectedRows.value})},onSortChange:e=>{r(`sort-change`,e)},pageSize:(0,c.computed)(()=>T.value?0:b.value),selectionMode:g,sortMode:(0,c.computed)(()=>e.sortMode.value??`client`)}),A=(0,c.computed)(()=>{let e=S.value.find(e=>e.key===k.sortState.value.key);if(e?.sortType)return e.sortType;let t=k.filteredRows.value.find(t=>t[e?.key??``]!=null);return t&&typeof t[e?.key??``]==`number`?`number`:`text`}),j=(0,c.computed)(()=>A.value===`number`?[{label:m.value.numericAscending,value:`asc`},{label:m.value.numericDescending,value:`desc`}]:[{label:m.value.ascending,value:`asc`},{label:m.value.descending,value:`desc`}]),M=e=>{e&&e.catch(e=>t.warn(`ore-datagrid: source command failed: ${String(e)}`))},N=t=>{M(e.source.value?.setParams?.(t))},P=(0,l.debounce)(t=>{e.source.value?.setParams?N(t):k.setSearchQuery(t)},250);(0,s.onCleanup)(P.cancel),(0,c.watch)(e.selectedKeys,e=>{Array.isArray(e)&&k.setSelection(new Set(e))},{immediate:!0});let F=(0,c.signal)({}),I=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{F.value={...F.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},L=k.visibleColumns,te=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};function R(t){let n=e.source.value;if(n){M(t===`prev`?n.previous():n.next());return}t===`prev`?k.prevPage():k.nextPage(),r(`page-change`,{pageIndex:k.pageIndex.value,pageSize:b.value})}let z=(0,c.computed)(()=>{let e=k.currentPageItems.value;return!e.length||k.isAllSelected()?!1:e.some(e=>k.selectedKeys.value.has(w(e)))}),B=(0,c.computed)(()=>L.value.length+ +(g.value===`multi`)+ +!!v.value),V=(0,c.computed)(()=>T.value?D.value.pageCount>1:b.value>0),H=(0,c.computed)(()=>{if(T.value){let{pageNumber:e,pageSize:t,totalItems:n}=D.value,r=Math.max(1,t);if(!V.value)return m.value.rows(n);if(n===0)return m.value.range(0,0,0);let i=(e-1)*r+1,a=Math.min(i+r-1,n);return m.value.range(i,a,n)}let e=k.totalItems.value;if(!V.value)return m.value.rows(e);if(e===0)return m.value.range(0,0,0);let t=k.pageIndex.value*b.value+1,n=Math.min(t+b.value-1,e);return m.value.range(t,n,e)}),U=(0,c.computed)(()=>e.loading.value===!0||T.value&&D.value.isLoading),W=(0,c.computed)(()=>T.value?D.value.pageNumber>1:k.hasPrevPage.value),G=(0,c.computed)(()=>T.value?D.value.pageNumber<D.value.pageCount:k.hasNextPage.value),K=(0,c.computed)(()=>T.value?D.value.totalItems===0?`0 / 0`:`${D.value.pageNumber} / ${D.value.pageCount}`:`${k.pageIndex.value+1} / ${k.pageCount.value}`),q=[`compact`,`cozy`,`comfortable`],J={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},Y=(0,c.computed)(()=>({comfortable:m.value.comfortableDensity,compact:m.value.compactDensity,cozy:m.value.cozyDensity})),X=(0,c.signal)(e.density.value??`cozy`);(0,c.watch)(e.density,e=>{e&&(X.value=e)});let Z=()=>{let e=q.indexOf(X.value),t=q[(e+1)%q.length];X.value=t,n.setAttribute(`density`,t),r(`density-change`,{density:t})},Q=e=>{let t=new Set(_.value),n=!t.has(e);n?t.add(e):t.delete(e),_.value=t,r(`row-expand`,{expanded:n,key:e})},$={activeCell:(0,c.signal)({col:0,row:0}),focusCell:()=>{}};(0,s.onMounted)(()=>{let e=n.shadowRoot,t=e.querySelector(`.dg-table`);if(!t)return;let{cleanup:r,handle:i}=o.createGridNav(t,e);return $=i,r}),n.focusCell=e=>$.focusCell(e);let ne=()=>{let t=e.views.value??[],n=e.activeView.value;return s.html`
         <div
           class="dg-tabs"
           role="tablist"
           aria-label="${()=>m.value.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()}}}">
-          ${t.map(e=>o.html`
+          ${t.map(e=>s.html`
               <ore-button
-                class="${()=>`dg-tab${r===e.id?` dg-tab--active`:``}`}"
+                class="${()=>`dg-tab${n===e.id?` dg-tab--active`:``}`}"
                 role="tab"
                 variant="ghost"
                 rounded="full"
                 size="sm"
-                tabindex="${()=>r===e.id?`0`:`-1`}"
-                aria-selected="${()=>String(r===e.id)}"
+                tabindex="${()=>n===e.id?`0`:`-1`}"
+                aria-selected="${()=>String(n===e.id)}"
                 aria-controls="dg-tabpanel"
-                @click="${()=>{n(`view-change`,{id:e.id,label:e.label})}}">
+                @click="${()=>{r(`view-change`,{id:e.id,label:e.label})}}">
                 ${e.label}
               </ore-button>
             `)}
         </div>
-      `},ee=()=>o.html`
+      `},re=()=>s.html`
       <ore-popover class="dg-action-popover" placement="bottom-end" label="${()=>m.value.sort}" style="--popover-min-width:18rem;--popover-overflow:visible">
         <ore-button
           class="dg-icon-btn dg-state-trigger"
@@ -34,7 +34,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <div slot="content" class="dg-pop-sort">
           <div class="dg-pop-header">
             <span class="dg-pop-title">${()=>m.value.sortBy}</span>
-            ${()=>k.sortState.value.direction===`none`?o.html``:o.html`
+            ${()=>k.sortState.value.direction===`none`?s.html``:s.html`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
@@ -74,7 +74,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </div>
         </div>
       </ore-popover>
-    `,te=()=>o.html`
+    `,ie=()=>s.html`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
@@ -92,7 +92,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <div slot="content" class="dg-pop-filter">
           <div class="dg-pop-header">
             <span class="dg-pop-title">${()=>m.value.filterBy}</span>
-            ${()=>k.filterDefs.value.length?o.html`
+            ${()=>k.filterDefs.value.length?s.html`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
@@ -102,7 +102,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       @click="${()=>k.clearAllFilters()}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
-                  `:o.html``}
+                  `:s.html``}
           </div>
 
           <!-- Always-visible field picker: select columns to add filter rules -->
@@ -123,7 +123,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="${()=>!k.filterDefs.value.length}">
-            ${()=>k.filterDefs.value.map(e=>o.html`
+            ${()=>k.filterDefs.value.map(e=>s.html`
                   <div class="dg-pop-filter-rule">
                     <div class="dg-pop-filter-rule-header">
                       <span class="dg-pop-filter-field">${e.label}</span>
@@ -166,7 +166,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </div>
         </div>
       </ore-popover>
-    `,ne=()=>o.html`
+    `,ae=()=>s.html`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
@@ -184,7 +184,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <div slot="content" class="dg-pop-col">
           <div class="dg-pop-header">
             <span class="dg-pop-heading"><strong class="dg-pop-title">${()=>m.value.columnVisibility}</strong><small>${()=>m.value.visibleColumns(k.visibleColumns.value.length,S.value.length)}</small></span>
-            ${()=>k.hiddenColumns.value.size?o.html`
+            ${()=>k.hiddenColumns.value.size?s.html`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
@@ -194,10 +194,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       @click="${()=>k.resetColumnVisibility()}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
-                  `:o.html``}
+                  `:s.html``}
           </div>
           <div class="dg-pop-col-list" role="group" aria-label="${()=>m.value.columnVisibility}">
-            ${()=>S.value.map(e=>o.html`
+            ${()=>S.value.map(e=>s.html`
                   <ore-checkbox
                     class="dg-pop-col-item"
                     checked="${()=>!k.hiddenColumns.value.has(e.key)}"
@@ -207,15 +207,15 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </div>
         </div>
       </ore-popover>
-    `;return o.html`
+    `;return s.html`
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
-        ${()=>$()}
+        ${()=>ne()}
 
         <!-- Right: Action bar -->
         <div class="dg-actions">
-          ${()=>ee()} ${()=>te()} ${()=>ne()}
+          ${()=>re()} ${()=>ie()} ${()=>ae()}
 
           <!-- Density toggle -->
           <ore-button
@@ -223,10 +223,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             variant="ghost"
             size="sm"
             icon-only
-            label="${()=>J.value[Y.value]}"
-            @click="${X}">
+            label="${()=>Y.value[X.value]}"
+            @click="${Z}">
             <ore-icon
-              name="${()=>q[Y.value]}"
+              name="${()=>J[X.value]}"
               size="15"
               stroke-width="1.75"
               aria-hidden="true"></ore-icon>
@@ -238,7 +238,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
 
           <!-- Search toggle: rightmost, expands in-place -->
           <div class="${()=>`dg-search${k.searchActive.value?` dg-search--open`:``}`}">
-            ${()=>k.searchActive.value?o.html`
+            ${()=>k.searchActive.value?s.html`
                     <ore-input
                       class="dg-search-input"
                       type="search"
@@ -249,17 +249,17 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       placeholder="${()=>e.searchPlaceholder.value??`${m.value.search}…`}"
                       disabled="${()=>h.value||void 0}"
                       ref="${e=>{e&&requestAnimationFrame(()=>e.focus())}}"
-                      @input="${e=>{M(e.currentTarget.value)}}"
-                      @keydown="${t=>{if(t.key===`Escape`){let t=e.source.value;t?.setQuery&&t.setQuery({search:``}),k.toggleSearch()}}}">
+                      @input="${e=>{P(e.currentTarget.value)}}"
+                      @keydown="${t=>{t.key===`Escape`&&(e.source.value?.setParams&&N(``),k.toggleSearch())}}">
                       <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-input>
-                  `:o.html``}
+                  `:s.html``}
             <ore-button
               variant="ghost"
               size="sm"
               icon-only
               label="${()=>{let[t,n]=e.searchLabel.value??[m.value.search,m.value.closeSearch];return k.searchActive.value?n:t}}"
-              @click="${()=>{let t=e.source.value;t?.setQuery&&k.searchActive.value&&t.setQuery({search:``}),k.toggleSearch()}}">
+              @click="${()=>{e.source.value?.setParams&&k.searchActive.value&&N(``),k.toggleSearch()}}">
               <ore-icon
                 name="${()=>k.searchActive.value?`x`:`search`}"
                 size="15"
@@ -279,38 +279,38 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           part="table"
           role="grid"
           aria-label="${()=>e.label.value??void 0}"
-          aria-busy="${()=>H.value?`true`:null}"
+          aria-busy="${()=>U.value?`true`:null}"
           aria-disabled="${()=>h.value?`true`:null}">
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${()=>g.value===`multi`?o.html`
+              ${()=>g.value===`multi`?s.html`
                       <th
                         class="dg-th dg-th-check"
                         role="columnheader"
                         scope="col"
-                        tabindex="${()=>Q.activeCell.value.row===0&&Q.activeCell.value.col===0&&y.value>=1?`0`:`-1`}">
+                        tabindex="${()=>$.activeCell.value.row===0&&$.activeCell.value.col===0&&y.value>=1?`0`:`-1`}">
                         <ore-checkbox
                           class="dg-check"
                           checked="${()=>k.isAllSelected()}"
-                          indeterminate="${R}"
+                          indeterminate="${z}"
                           ?disabled="${h}"
                           aria-label="${()=>m.value.selectAllRows}"
                           @change="${()=>{h.value||k.selectAll()}}"></ore-checkbox>
                       </th>
-                    `:o.html``}
-              ${()=>F.value.map((e,t)=>{let n=t===F.value.length-1;return o.html`
+                    `:s.html``}
+              ${()=>L.value.map((e,t)=>{let n=t===L.value.length-1;return s.html`
                     <th
                       class="${`dg-th${n&&v.value?` dg-th-last`:``}`}"
                       role="columnheader"
                       scope="col"
-                      tabindex="${()=>{let e=Q.activeCell.value;return e.row===0&&e.col===t+y.value?`0`:`-1`}}"
+                      tabindex="${()=>{let e=$.activeCell.value;return e.row===0&&e.col===t+y.value?`0`:`-1`}}"
                       data-align="${e.align??`left`}"
                       aria-sort="${()=>e.sortable?d(k.sortState.value,e.key):void 0}"
                       aria-label="${e.sortable?void 0:e.headerLabel??e.label}"
-                      style="${()=>{let t=N.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
+                      style="${()=>{let t=F.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
                       <div class="dg-th-inner">
-                        ${()=>e.sortable?o.html`
+                        ${()=>e.sortable?s.html`
                                 <ore-button
                                   class="dg-sort-btn"
                                   variant="text"
@@ -328,34 +328,34 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                     stroke-width="2"></ore-icon>
                                 </ore-button>
                               `:e.label}
-                        ${e.resizable?o.html`
+                        ${e.resizable?s.html`
                                 <span
                                   class="dg-col-resize"
                                   aria-hidden="true"
-                                  ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,P(e.key,n))}}"></span>
-                              `:o.html``}
+                                  ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,I(e.key,n))}}"></span>
+                              `:s.html``}
                       </div>
                     </th>
                   `})}
-              ${()=>v.value?o.html`
+              ${()=>v.value?s.html`
                       <th
                         class="dg-th dg-th-expand"
                         role="columnheader"
                         scope="col"
                         aria-label="${()=>m.value.rowDetails}"
                         tabindex="-1"></th>
-                    `:o.html``}
+                    `:s.html``}
             </tr>
           </thead>
 
           <!-- Body -->
           <tbody class="dg-body" part="tbody">
-            ${()=>k.currentPageItems.value.length===0?o.html`
+            ${()=>k.currentPageItems.value.length===0?s.html`
                     <tr role="row">
-                      <td class="dg-empty" role="gridcell" colspan="${()=>String(z.value)}">
+                      <td class="dg-empty" role="gridcell" colspan="${()=>String(B.value)}">
                         <div class="dg-empty-content">
                           ${()=>e.emptyText.value??`No data`}
-                          ${()=>k.searchQuery.value||k.filterValues.value.size?o.html`
+                          ${()=>k.searchQuery.value||k.filterValues.value.size?s.html`
                                   <div class="dg-empty-actions">
                                     <ore-button
                                       variant="text"
@@ -364,11 +364,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                       ${()=>m.value.clearFiltersAndSearch}
                                     </ore-button>
                                   </div>
-                                `:o.html``}
+                                `:s.html``}
                         </div>
                       </td>
                     </tr>
-                  `:k.currentPageItems.value.map((e,t)=>{let n=w(e),r=g.value!==`none`&&!h.value,i=t+1;return o.html`
+                  `:k.currentPageItems.value.map((e,t)=>{let n=w(e),r=g.value!==`none`&&!h.value,i=t+1;return s.html`
                       <tr
                         class="dg-tr"
                         part="row"
@@ -379,11 +379,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                         ?data-disabled="${h}"
                         @click="${()=>{r&&g.value===`single`&&k.toggleRow(n)}}"
                         @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&r&&g.value===`single`&&(e.preventDefault(),k.toggleRow(n))}}">
-                        ${()=>g.value===`multi`?o.html`
+                        ${()=>g.value===`multi`?s.html`
                                 <td
                                   class="dg-td dg-td-check"
                                   role="gridcell"
-                                  tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===0?`0`:`-1`}}"
+                                  tabindex="${()=>{let e=$.activeCell.value;return e.row===i&&e.col===0?`0`:`-1`}}"
                                   @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),h.value||k.toggleRow(n))}}">
                                   <ore-checkbox
                                     class="dg-check"
@@ -394,24 +394,24 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                     @click="${e=>e.stopPropagation()}"
                                     @change="${()=>{h.value||k.toggleRow(n)}}"></ore-checkbox>
                                 </td>
-                              `:o.html``}
-                        ${F.value.map((t,n)=>{let r=e,a=I(t,r),s=t.renderCell?.(r)??a,c=n===F.value.length-1;return o.html`
+                              `:s.html``}
+                        ${L.value.map((t,n)=>{let r=e,a=te(t,r),o=t.renderCell?.(r)??a,c=n===L.value.length-1;return s.html`
                             <td
                               class="${`dg-td${c&&v.value?` dg-td-last`:``}`}"
                               part="cell"
                               role="gridcell"
                               data-align="${t.align??`left`}"
-                              tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===n+y.value?`0`:`-1`}}"
+                              tabindex="${()=>{let e=$.activeCell.value;return e.row===i&&e.col===n+y.value?`0`:`-1`}}"
                               title="${a}">
-                              ${s}
+                              ${o}
                             </td>
                           `})}
-                        ${()=>v.value?o.html`
+                        ${()=>v.value?s.html`
                                 <td
                                   class="dg-td dg-td-expand"
                                   role="gridcell"
-                                  tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===z.value-1?`0`:`-1`}}"
-                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),h.value||Z(n))}}">
+                                  tabindex="${()=>{let e=$.activeCell.value;return e.row===i&&e.col===B.value-1?`0`:`-1`}}"
+                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),h.value||Q(n))}}">
                                   <ore-button
                                     class="dg-expand-btn"
                                     variant="ghost"
@@ -421,7 +421,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                     label="${()=>_.value.has(n)?m.value.collapseRow:m.value.expandRow}"
                                     aria-expanded="${()=>String(_.value.has(n))}"
                                     disabled="${()=>h.value||void 0}"
-                                    @click="${e=>{e.stopPropagation(),h.value||Z(n)}}">
+                                    @click="${e=>{e.stopPropagation(),h.value||Q(n)}}">
                                     <ore-icon
                                       name="${()=>_.value.has(n)?`chevron-up`:`chevron-down`}"
                                       size="14"
@@ -429,31 +429,31 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                       aria-hidden="true"></ore-icon>
                                   </ore-button>
                                 </td>
-                              `:o.html``}
+                              `:s.html``}
                       </tr>
-                      ${()=>v.value&&_.value.has(n)?o.html`
+                      ${()=>v.value&&_.value.has(n)?s.html`
                               <tr class="dg-tr-expanded" role="row">
                                 <td
                                   class="dg-td-expanded"
                                   role="gridcell"
-                                  colspan="${()=>String(z.value)}">
-                                  ${(0,o.unsafeHtml)(()=>S.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
+                                  colspan="${()=>String(B.value)}">
+                                  ${(0,s.unsafeHtml)(()=>S.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
                                 </td>
                               </tr>
-                            `:o.html``}
+                            `:s.html``}
                     `})}
           </tbody>
         </table>
       </div>
 
       <!-- Footer / Pagination -->
-      ${()=>B.value?o.html`
+      ${()=>V.value?s.html`
               <div class="dg-footer" part="footer" role="navigation" aria-label="${()=>m.value.pagination}">
                 <div class="dg-footer-start">
                   <span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true">
-                    ${V}
+                    ${H}
                   </span>
-                  ${()=>{let t=e.pageSizeOptions.value??[];return t.length?o.html`
+                  ${()=>{let t=e.pageSizeOptions.value??[];return t.length?s.html`
                           <div class="dg-page-size-wrap">
                             <ore-select
                               class="dg-page-size-select"
@@ -463,9 +463,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                               value="${()=>String(b.value)}"
                               options="${()=>t.map(e=>({label:String(e),value:String(e)}))}"
                               disabled="${()=>h.value||void 0}"
-                              @change="${e=>{let t=parseInt(f(e)[0]??``,10);Number.isNaN(t)||(b.value=t,k.goToPage(0),n(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
+                              @change="${e=>{let t=parseInt(f(e)[0]??``,10);Number.isNaN(t)||(b.value=t,k.goToPage(0),r(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
                           </div>
-                        `:o.html``}}
+                        `:s.html``}}
                 </div>
                 <div class="dg-pagination" role="group" aria-label="${()=>m.value.pageNavigation}">
                     <ore-button
@@ -474,8 +474,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       size="sm"
                       icon-only
                       label="${()=>m.value.previousPage}"
-                      disabled="${()=>!U.value||h.value}"
-                      @click="${()=>L(`prev`)}">
+                      disabled="${()=>!W.value||h.value}"
+                      @click="${()=>R(`prev`)}">
                       <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                     </ore-button>
                     <span
@@ -485,7 +485,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       role="status"
                       aria-live="polite"
                       aria-atomic="true">
-                      ${()=>G.value}
+                      ${()=>K.value}
                     </span>
                     <ore-button
                       class="dg-page-btn"
@@ -493,12 +493,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       size="sm"
                       icon-only
                       label="${()=>m.value.nextPage}"
-                      disabled="${()=>!W.value||h.value}"
-                      @click="${()=>L(`next`)}">
+                      disabled="${()=>!G.value||h.value}"
+                      @click="${()=>R(`next`)}">
                       <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                     </ore-button>
                 </div>
               </div>
-            `:o.html``}
-    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),n.default]}),exports.COLUMN_TAG=r.COLUMN_TAG,exports.DATAGRID_TAG=p,exports.ariaSortValue=d,exports.sortIconName=u;
+            `:s.html``}
+    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),r.default]}),exports.COLUMN_TAG=i.COLUMN_TAG,exports.DATAGRID_TAG=p,exports.ariaSortValue=d,exports.sortIconName=u;
 //# sourceMappingURL=datagrid.cjs.map