@vielzeug/refine 1.1.3 → 1.3.0

package/dist/datagrid.cjs

@@ -1,4 +1,4 @@
-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?inline.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,{el:r,emit:l,onCleanup:h,onMounted:g,slots:_}){let v=(0,d.computed)(()=>t.disabled.value===!0),y=(0,d.computed)(()=>t.selectionMode.value??`none`),b=(0,d.signal)(new Set),x=(0,d.computed)(()=>t.expandable.value===!0&&T.value.some(e=>typeof e.renderExpanded==`function`)),S=(0,d.computed)(()=>+(y.value===`multi`)),C=(0,d.signal)(t.pageSize.value??10);(0,d.watch)(t.pageSize,e=>{e!=null&&(C.value=e)});let w=(0,d.signal)([]);g(()=>{w.value=o.parseColumnChildren(r);let e=new MutationObserver(()=>{w.value=o.parseColumnChildren(r)});return e.observe(r,{attributeFilter:o.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let T=(0,d.computed)(()=>{let e=t.columns.value;return e===void 0?w.value:e}),E=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)},D=s.createDataGridControls({columns:T,filterOptions:t.filterOptions,rows:(0,d.computed)(()=>t.rows.value??[])}),O=(0,f.debounce)(e=>{let n=e,r=t.source.value;r?.search?r.search(n):D.setSearchQuery(n)},250),k=(0,d.computed)(()=>t.source.value!=null),A=(0,d.signal)([]),j=(0,d.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:C.value,totalItems:0}),M=null;h(()=>{M?.(),M=null}),(0,d.watch)(t.source,e=>{if(M?.(),M=null,!e){A.value=[],j.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:C.value,totalItems:0};return}let t=()=>{A.value=e.current,j.value=e.meta};t(),M=e.subscribe(t)},{immediate:!0});let N=a.createDataGridControl({columns:()=>T.value,getRowKey:E,items:(0,d.computed)(()=>k.value?A.value:D.filteredRows.value),onSelectionChange:e=>{l(`selection-change`,{keys:[...e],rows:N.selectedRows.value})},onSortChange:e=>{l(`sort-change`,e)},pageSize:()=>k.value?0:C.value,selectionMode:()=>y.value,signal:i.lifecycleSignal(h)});(0,d.watch)(t.selectedKeys,e=>{Array.isArray(e)&&N.setSelection(new Set(e))},{immediate:!0});let P=(0,d.signal)({}),F=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{P.value={...P.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},I=(0,d.computed)(()=>T.value.filter(e=>!D.hiddenColumns.value.has(e.key))),L=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};(0,d.watch)(D.filteredRows,()=>N.goToPage(0),{immediate:!1});function R(e){let n=t.source.value;if(n){e===`prev`?n.prev?.():n.next?.();return}e===`prev`?N.prevPage():N.nextPage(),l(`page-change`,{pageIndex:N.pageIndex.value,pageSize:C.value})}let ee=(0,d.computed)(()=>{let e=N.currentPageItems.value;return!e.length||N.isAllSelected()?!1:e.some(e=>N.selectedKeys.value.has(E(e)))}),z=(0,d.computed)(()=>I.value.length+ +(y.value===`multi`)+ +!!x.value),B=(0,d.computed)(()=>k.value?j.value.pageCount>1:C.value>0),V=(0,d.computed)(()=>{if(k.value){let{pageNumber:e,pageSize:t,totalItems:n}=j.value,r=Math.max(1,t);if(!B.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=N.totalItems.value;if(!B.value)return`${e} row${e===1?``:`s`}`;if(e===0)return`0 to 0 of 0`;let t=N.pageIndex.value*C.value+1;return`${t} to ${Math.min(t+C.value-1,e)} of ${e}`}),H=(0,d.computed)(()=>t.loading.value===!0||k.value&&j.value.isLoading),U=(0,d.computed)(()=>k.value?j.value.pageNumber>1:N.hasPrevPage.value),W=(0,d.computed)(()=>k.value?j.value.pageNumber<j.value.pageCount:N.hasNextPage.value),G=(0,d.computed)(()=>k.value?j.value.totalItems===0?`0 / 0`:`${j.value.pageNumber} / ${j.value.pageCount}`:`${N.pageIndex.value+1} / ${N.pageCount.value}`),K=[`compact`,`cozy`,`comfortable`],q={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},J={comfortable:`Density: Comfortable`,compact:`Density: Compact`,cozy:`Density: Cozy`},Y=(0,d.signal)(t.density.value??`cozy`);(0,d.watch)(t.density,e=>{e&&(Y.value=e)});let X=()=>{let e=K.indexOf(Y.value),t=K[(e+1)%K.length];Y.value=t,r.setAttribute(`density`,t),l(`density-change`,{density:t})},Z=(0,d.signal)(!1),Q=e=>{let t=new Set(b.value),n=!t.has(e);n?t.add(e):t.delete(e),b.value=t,l(`row-expand`,{expanded:n,key:e})},$={activeCell:(0,d.signal)({col:0,row:0}),focusCell:()=>{}};g(()=>{let e=r.shadowRoot,t=e.querySelector(`.dg-table`);if(!t)return;let{cleanup:n,handle:i}=c.createGridNav(t,e);return $=i,n}),r.focusCell=e=>$.focusCell(e);let te=()=>{let e=t.views.value??[],n=t.activeView.value;return u.html`<div
+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
         class="dg-tabs"
         role="tablist"
         aria-label="Views"
@@ -16,7 +16,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               @click="${()=>{l(`view-change`,{id:e.id,label:e.label})}}">
               ${e.label}
             </ore-button>`)}
-      </div>`},ne=()=>u.html`<ore-popover class="dg-action-popover" placement="bottom-end" label="Sort" style="--popover-min-width:18rem">
+      </div>`},ee=()=>u.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>
@@ -29,8 +29,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               size="sm"
               icon-only
               label="Clear sort"
-              :disabled="${()=>N.sortState.value.direction===`none`||void 0}"
-              @click="${()=>N.sortTo(``,`none`)}">
+              :disabled="${()=>j.sortState.value.direction===`none`||void 0}"
+              @click="${()=>j.sortTo(``,`none`)}">
               <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
             </ore-button>
           </div>
@@ -42,38 +42,38 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               rounded="lg"
               placeholder="Property"
               fullwidth
-              :value="${()=>N.sortState.value.key}"
-              :options="${()=>T.value.map(e=>({label:e.label,value:e.key}))}"
-              @change="${e=>{let t=e.detail.values[0]??``,n=N.sortState.value.direction===`none`?`asc`:N.sortState.value.direction;N.sortTo(t,n)}}"></ore-select>
+              :value="${()=>j.sortState.value.key}"
+              :options="${()=>C.value.map(e=>({label:e.label,value:e.key}))}"
+              @change="${e=>{let t=e.detail.values[0]??``,n=j.sortState.value.direction===`none`?`asc`:j.sortState.value.direction;j.sortTo(t,n)}}"></ore-select>
             <ore-select
               class="dg-pop-dir-select"
               variant="flat"
               size="sm"
               rounded="lg"
               fullwidth
-              :disabled="${()=>!N.sortState.value.key||void 0}"
-              :value="${()=>N.sortState.value.direction===`none`?`asc`:N.sortState.value.direction}"
+              :disabled="${()=>!j.sortState.value.key||void 0}"
+              :value="${()=>j.sortState.value.direction===`none`?`asc`:j.sortState.value.direction}"
               :options="${()=>[{label:`A → Z`,value:`asc`},{label:`Z → A`,value:`desc`}]}"
-              @change="${e=>{N.sortState.value.key&&N.sortTo(N.sortState.value.key,e.detail.values[0]??`asc`)}}"></ore-select>
+              @change="${e=>{j.sortState.value.key&&j.sortTo(j.sortState.value.key,e.detail.values[0]??`asc`)}}"></ore-select>
           </div>
         </div>
-      </ore-popover>`,re=()=>u.html`<ore-popover
+      </ore-popover>`,te=()=>u.html`<ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Filter"
         style="--popover-min-width:16rem;--popover-max-height:min(90vh,48rem)">
-        ${()=>D.filterDefs.value.length?u.html`<ore-badge
+        ${()=>T.filterDefs.value.length?u.html`<ore-badge
                 anchor="top-end"
                 color="primary"
                 size="xs"
-                :count="${()=>Z.value?D.filterDefs.value.length:void 0}"
-                :dot="${()=>!Z.value||void 0}"
-                :label="${()=>`${D.filterDefs.value.length} active filter${D.filterDefs.value.length>1?`s`:``}`}"
+                :count="${()=>X.value?T.filterDefs.value.length:void 0}"
+                :dot="${()=>!X.value||void 0}"
+                :label="${()=>`${T.filterDefs.value.length} active filter${T.filterDefs.value.length>1?`s`:``}`}"
                 aria-hidden="true"
-                @mouseenter="${()=>Z.value=!0}"
-                @mouseleave="${()=>Z.value=!1}"
-                @focusin="${()=>Z.value=!0}"
-                @focusout="${()=>Z.value=!1}">
+                @mouseenter="${()=>X.value=!0}"
+                @mouseleave="${()=>X.value=!1}"
+                @focusin="${()=>X.value=!0}"
+                @focusout="${()=>X.value=!1}">
                 <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>
@@ -83,13 +83,13 @@ 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">Filter by</span>
-            ${()=>D.filterDefs.value.length?u.html`<ore-button
+            ${()=>T.filterDefs.value.length?u.html`<ore-button
                     class="dg-icon-btn"
                     variant="ghost"
                     size="sm"
                     icon-only
                     label="Clear all filters"
-                    @click="${()=>D.clearAllFilters()}">
+                    @click="${()=>T.clearAllFilters()}">
                     <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                   </ore-button>`:u.html``}
           </div>
@@ -101,15 +101,15 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               multiple
               fullwidth
               autoclose
-              :options="${()=>T.value.map(e=>({label:e.label,value:e.key}))}"
-              :value="${()=>D.filterDefs.value.map(e=>e.key)}"
-              @change="${e=>{D.setActiveFilterKeys(e.detail.values)}}">
+              :options="${()=>C.value.map(e=>({label:e.label,value:e.key}))}"
+              :value="${()=>T.filterDefs.value.map(e=>e.key)}"
+              @change="${e=>{T.setActiveFilterKeys(e.detail.values)}}">
             </ore-combobox>
           </div>
 
           <!-- Active filter rules (appear below the field picker as rules are added) -->
-          <div class="dg-pop-filter-rules" ?hidden="${()=>!D.filterDefs.value.length}">
-            ${()=>D.filterDefs.value.map(e=>u.html`
+          <div class="dg-pop-filter-rules" ?hidden="${()=>!T.filterDefs.value.length}">
+            ${()=>T.filterDefs.value.map(e=>u.html`
                   <div class="dg-pop-filter-rule">
                     <div class="dg-pop-filter-rule-header">
                       <span class="dg-pop-filter-field">${e.label}</span>
@@ -118,16 +118,16 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                         variant="ghost"
                         size="sm"
                         fullwidth
-                        :value="${()=>D.filterValues.value.get(e.key)?.operator??`contains`}"
+                        :value="${()=>T.filterValues.value.get(e.key)?.operator??`contains`}"
                         :options="${()=>e.operators??[]}"
-                        @change="${t=>{D.setFilterOperator(e.key,t.detail.values[0])}}"></ore-select>
+                        @change="${t=>{T.setFilterOperator(e.key,t.detail.values[0])}}"></ore-select>
                       <ore-button
                         class="dg-icon-btn"
                         variant="ghost"
                         size="sm"
                         icon-only
                         label="Remove filter"
-                        @click="${()=>D.removeFilter(e.key)}">
+                        @click="${()=>T.removeFilter(e.key)}">
                         <ore-icon name="trash-2" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                       </ore-button>
                     </div>
@@ -135,17 +135,17 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       class="dg-filter"
                       :placeholder="${()=>e.label}"
                       :options="${()=>e.options}"
-                      :value="${()=>[...D.filterValues.value.get(e.key)?.values??[]]}"
-                      :disabled="${()=>v.value||void 0}"
+                      :value="${()=>[...T.filterValues.value.get(e.key)?.values??[]]}"
+                      :disabled="${()=>g.value||void 0}"
                       multiple
                       fullwidth
                       autoclose
-                      @change="${t=>{D.setFilter(e.key,t.detail.values)}}"></ore-combobox>
+                      @change="${t=>{T.setFilter(e.key,t.detail.values)}}"></ore-combobox>
                   </div>
                 `)}
           </div>
         </div>
-      </ore-popover>`,ie=()=>u.html`<ore-popover
+      </ore-popover>`,ne=()=>u.html`<ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Column options"
@@ -154,16 +154,16 @@ 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">
-          ${()=>T.value.map(e=>u.html`<ore-button
+          ${()=>C.value.map(e=>u.html`<ore-button
                   class="dg-pop-col-item"
                   role="menuitemcheckbox"
                   variant="ghost"
                   size="sm"
-                  :aria-checked="${()=>String(!D.hiddenColumns.value.has(e.key))}"
-                  @click="${()=>D.toggleColumnVisibility(e.key)}">
+                  :aria-checked="${()=>String(!T.hiddenColumns.value.has(e.key))}"
+                  @click="${()=>T.toggleColumnVisibility(e.key)}">
                   <ore-icon
                     slot="prefix"
-                    :name="${()=>D.hiddenColumns.value.has(e.key)?`eye-off`:`eye`}"
+                    :name="${()=>T.hiddenColumns.value.has(e.key)?`eye-off`:`eye`}"
                     size="13"
                     stroke-width="2"
                     aria-hidden="true"></ore-icon>
@@ -174,11 +174,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
-        ${()=>te()}
+        ${()=>$()}
 
         <!-- Right: Action bar -->
         <div class="dg-actions">
-          ${()=>ne()} ${()=>re()} ${()=>ie()}
+          ${()=>ee()} ${()=>te()} ${()=>ne()}
 
           <!-- Density toggle -->
           <ore-button
@@ -186,42 +186,42 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             variant="ghost"
             size="sm"
             icon-only
-            :label="${()=>J[Y.value]}"
-            @click="${X}">
+            :label="${()=>q[J.value]}"
+            @click="${Y}">
             <ore-icon
-              :name="${()=>q[Y.value]}"
+              :name="${()=>K[J.value]}"
               size="15"
               stroke-width="1.75"
               aria-hidden="true"></ore-icon>
           </ore-button>
 
-          <span class="dg-action-divider" aria-hidden="true" ?hidden="${()=>!_.has(`actions`).value}"></span>
+          <span class="dg-action-divider" aria-hidden="true" ?hidden="${()=>!h.has(`actions`).value}"></span>
 
           <slot name="actions"></slot>
 
           <!-- Search toggle: rightmost, expands in-place -->
-          <div class="${()=>`dg-search${D.searchActive.value?` dg-search--open`:``}`}">
-            ${()=>D.searchActive.value?u.html`<ore-input
+          <div class="${()=>`dg-search${T.searchActive.value?` dg-search--open`:``}`}">
+            ${()=>T.searchActive.value?u.html`<ore-input
                     class="dg-search-input"
                     type="search"
                     variant="flat"
                     size="sm"
                     rounded="full"
                     :placeholder="${()=>t.searchPlaceholder.value??`Search…`}"
-                    :disabled="${()=>v.value||void 0}"
+                    :disabled="${()=>g.value||void 0}"
                     ref="${e=>{e&&requestAnimationFrame(()=>e.focus())}}"
-                    @input="${e=>{O(e.detail.value)}}"
-                    @keydown="${e=>{if(e.key===`Escape`){let e=t.source.value;e?.search&&e.search(``),D.toggleSearch()}}}">
+                    @input="${e=>{E(e.detail.value)}}"
+                    @keydown="${e=>{if(e.key===`Escape`){let e=t.source.value;e?.search&&e.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-button
               variant="ghost"
               size="sm"
               icon-only
-              :label="${()=>{let[e,n]=t.searchLabel.value??[`Search`,`Close search`];return D.searchActive.value?n:e}}"
-              @click="${()=>{let e=t.source.value;e?.search&&D.searchActive.value&&e.search(``),D.toggleSearch()}}">
+              :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()}}">
               <ore-icon
-                :name="${()=>D.searchActive.value?`x`:`search`}"
+                :name="${()=>T.searchActive.value?`x`:`search`}"
                 size="15"
                 stroke-width="1.75"
                 aria-hidden="true"></ore-icon>
@@ -239,33 +239,33 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           part="table"
           role="grid"
           :aria-label="${()=>t.label.value??void 0}"
-          :aria-busy="${()=>H.value?`true`:null}"
-          :aria-disabled="${()=>v.value?`true`:null}">
+          :aria-busy="${()=>V.value?`true`:null}"
+          :aria-disabled="${()=>g.value?`true`:null}">
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${()=>y.value===`multi`?u.html`<th
+              ${()=>_.value===`multi`?u.html`<th
                       class="dg-th dg-th-check"
                       role="columnheader"
                       scope="col"
-                      :tabindex="${()=>$.activeCell.value.row===0&&$.activeCell.value.col===0&&S.value>=1?`0`:`-1`}">
+                      :tabindex="${()=>Q.activeCell.value.row===0&&Q.activeCell.value.col===0&&b.value>=1?`0`:`-1`}">
                       <ore-checkbox
                         class="dg-check"
-                        :checked="${()=>N.isAllSelected()}"
-                        :indeterminate="${ee}"
-                        ?disabled="${v}"
+                        :checked="${()=>j.isAllSelected()}"
+                        :indeterminate="${L}"
+                        ?disabled="${g}"
                         aria-label="Select all rows on this page"
-                        @change="${()=>{v.value||N.selectAll()}}"></ore-checkbox>
+                        @change="${()=>{g.value||j.selectAll()}}"></ore-checkbox>
                     </th>`:u.html``}
-              ${()=>I.value.map((e,t)=>u.html`<th
-                    class="${`dg-th${t===I.value.length-1&&x.value?` dg-th-last`:``}`}"
+              ${()=>P.value.map((e,t)=>u.html`<th
+                    class="${`dg-th${t===P.value.length-1&&y.value?` dg-th-last`:``}`}"
                     role="columnheader"
                     scope="col"
-                    :tabindex="${()=>{let e=$.activeCell.value;return e.row===0&&e.col===t+S.value?`0`:`-1`}}"
+                    :tabindex="${()=>{let e=Q.activeCell.value;return e.row===0&&e.col===t+b.value?`0`:`-1`}}"
                     data-align="${e.align??`left`}"
-                    :aria-sort="${()=>e.sortable?m(N.sortState.value,e.key):void 0}"
+                    :aria-sort="${()=>e.sortable?m(j.sortState.value,e.key):void 0}"
                     :aria-label="${e.sortable?void 0:e.headerLabel??e.label}"
-                    :style="${()=>{let t=P.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
+                    :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
                               class="dg-sort-btn"
@@ -273,23 +273,23 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                               size="sm"
                               fullwidth
                               :label="${e.headerLabel??e.label}"
-                              :disabled="${()=>v.value||void 0}"
-                              @click="${()=>{v.value||N.sortBy(e.key)}}">
+                              :disabled="${()=>g.value||void 0}"
+                              @click="${()=>{g.value||j.sortBy(e.key)}}">
                               ${e.label}
                               <ore-icon
                                 slot="suffix"
                                 class="dg-sort-icon"
-                                :name="${()=>p(N.sortState.value,e.key)}"
+                                :name="${()=>p(j.sortState.value,e.key)}"
                                 size="14"
                                 stroke-width="2"></ore-icon>
                             </ore-button>`:e.label}
                       ${e.resizable?u.html`<span
                               class="dg-col-resize"
                               aria-hidden="true"
-                              ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,F(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>`:u.html``}
                     </div>
                   </th>`)}
-              ${()=>x.value?u.html`<th
+              ${()=>y.value?u.html`<th
                       class="dg-th dg-th-expand"
                       role="columnheader"
                       scope="col"
@@ -300,82 +300,82 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
 
           <!-- Body -->
           <tbody class="dg-body" part="tbody">
-            ${()=>N.currentPageItems.value.length===0?u.html`<tr role="row">
-                    <td class="dg-empty" role="gridcell" :colspan="${()=>String(z.value)}">
+            ${()=>j.currentPageItems.value.length===0?u.html`<tr role="row">
+                    <td class="dg-empty" role="gridcell" :colspan="${()=>String(R.value)}">
                       <div class="dg-empty-content">
                         ${()=>t.emptyText.value??`No data`}
-                        ${()=>D.searchQuery.value||D.filterValues.value.size?u.html`<div class="dg-empty-actions">
+                        ${()=>T.searchQuery.value||T.filterValues.value.size?u.html`<div class="dg-empty-actions">
                                 <ore-button
                                   variant="text"
                                   size="sm"
-                                  @click="${()=>{D.resetSearch(),D.resetFilters()}}">
+                                  @click="${()=>{T.resetSearch(),T.resetFilters()}}">
                                   Clear all filters & search
                                 </ore-button>
                               </div>`:u.html``}
                       </div>
                     </td>
-                  </tr>`:N.currentPageItems.value.map((t,n)=>{let r=E(t),i=y.value!==`none`&&!v.value,a=n+1;return u.html`<tr
+                  </tr>`:j.currentPageItems.value.map((t,n)=>{let r=w(t),i=_.value!==`none`&&!g.value,a=n+1;return u.html`<tr
                         class="dg-tr"
                         part="row"
                         role="row"
-                        :aria-selected="${()=>y.value===`none`?null:String(N.selectedKeys.value.has(r))}"
-                        :aria-expanded="${()=>x.value?String(b.value.has(r)):null}"
+                        :aria-selected="${()=>_.value===`none`?null:String(j.selectedKeys.value.has(r))}"
+                        :aria-expanded="${()=>y.value?String(v.value.has(r)):null}"
                         ?data-selectable="${i}"
-                        ?data-disabled="${v}"
-                        @click="${()=>{i&&y.value===`single`&&N.toggleRow(r)}}"
-                        @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&i&&y.value===`single`&&(e.preventDefault(),N.toggleRow(r))}}">
-                        ${()=>y.value===`multi`?u.html`<td
+                        ?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
                                 class="dg-td dg-td-check"
                                 role="gridcell"
-                                :tabindex="${()=>{let e=$.activeCell.value;return e.row===a&&e.col===0?`0`:`-1`}}"
-                                @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),v.value||N.toggleRow(r))}}">
+                                :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))}}">
                                 <ore-checkbox
                                   class="dg-check"
-                                  :checked="${()=>N.selectedKeys.value.has(r)}"
-                                  ?disabled="${v}"
+                                  :checked="${()=>j.selectedKeys.value.has(r)}"
+                                  ?disabled="${g}"
                                   aria-label="Select row"
                                   tabindex="-1"
                                   @click="${e=>e.stopPropagation()}"
-                                  @change="${()=>{v.value||N.toggleRow(r)}}"></ore-checkbox>
+                                  @change="${()=>{g.value||j.toggleRow(r)}}"></ore-checkbox>
                               </td>`:u.html``}
-                        ${I.value.map((e,n)=>{let r=L(e,t);return u.html`<td
-                            class="${`dg-td${n===I.value.length-1&&x.value?` dg-td-last`:``}`}"
+                        ${P.value.map((e,n)=>{let r=F(e,t);return u.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=$.activeCell.value;return e.row===a&&e.col===n+S.value?`0`:`-1`}}"
+                            :tabindex="${()=>{let e=Q.activeCell.value;return e.row===a&&e.col===n+b.value?`0`:`-1`}}"
                             :title="${r}">
                             ${r}
                           </td>`})}
-                        ${()=>x.value?u.html`<td
+                        ${()=>y.value?u.html`<td
                                 class="dg-td dg-td-expand"
                                 role="gridcell"
-                                :tabindex="${()=>{let e=$.activeCell.value;return e.row===a&&e.col===z.value-1?`0`:`-1`}}"
-                                @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),v.value||Q(r))}}">
+                                :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))}}">
                                 <ore-button
                                   class="dg-expand-btn"
                                   variant="ghost"
                                   size="sm"
                                   icon-only
                                   tabindex="-1"
-                                  :label="${()=>b.value.has(r)?`Collapse row`:`Expand row`}"
-                                  :aria-expanded="${()=>String(b.value.has(r))}"
-                                  :disabled="${()=>v.value||void 0}"
-                                  @click="${e=>{e.stopPropagation(),v.value||Q(r)}}">
+                                  :label="${()=>v.value.has(r)?`Collapse row`:`Expand row`}"
+                                  :aria-expanded="${()=>String(v.value.has(r))}"
+                                  :disabled="${()=>g.value||void 0}"
+                                  @click="${e=>{e.stopPropagation(),g.value||Z(r)}}">
                                   <ore-icon
-                                    :name="${()=>b.value.has(r)?`chevron-up`:`chevron-down`}"
+                                    :name="${()=>v.value.has(r)?`chevron-up`:`chevron-down`}"
                                     size="14"
                                     stroke-width="2"
                                     aria-hidden="true"></ore-icon>
                                 </ore-button>
                               </td>`:u.html``}
                       </tr>
-                      ${()=>x.value&&b.value.has(r)?u.html`<tr class="dg-tr-expanded" role="row">
+                      ${()=>y.value&&v.value.has(r)?u.html`<tr class="dg-tr-expanded" role="row">
                               <td
                                 class="dg-td-expanded"
                                 role="gridcell"
-                                :colspan="${()=>String(z.value)}">
-                                ${e.raw(()=>T.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(t)??``)}
+                                :colspan="${()=>String(R.value)}">
+                                ${e.raw(()=>C.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(t)??``)}
                               </td>
                             </tr>`:u.html``} `})}
           </tbody>
@@ -383,9 +383,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       </div>
 
       <!-- Footer / Pagination -->
-      ${()=>B.value?u.html`<div class="dg-footer" part="footer" role="navigation" aria-label="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"
-                      >${V}</span
+                      >${B}</span
                     >`}
               <div class="dg-footer-end">
                 ${()=>{let e=t.pageSizeOptions.value??[];return e.length?u.html`<div class="dg-page-size-wrap">
@@ -393,10 +393,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                           class="dg-page-size-select"
                           fullwidth
                           aria-label="Rows per page"
-                          :value="${()=>String(C.value)}"
+                          :value="${()=>String(x.value)}"
                           :options="${()=>e.map(e=>({label:String(e),value:String(e)}))}"
-                          :disabled="${()=>v.value||void 0}"
-                          @change="${e=>{let t=parseInt(e.detail.values[0],10);isNaN(t)||(C.value=t,N.goToPage(0),l(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
+                          :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``}}
                 <div class="dg-pagination" role="group" aria-label="Page navigation">
                   <ore-button
@@ -405,8 +405,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     size="sm"
                     icon-only
                     label="Previous page"
-                    :disabled="${()=>!U.value||v.value}"
-                    @click="${()=>R(`prev`)}">
+                    :disabled="${()=>!H.value||g.value}"
+                    @click="${()=>I(`prev`)}">
                     <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                   </ore-button>
                   <span
@@ -416,7 +416,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     role="status"
                     aria-live="polite"
                     aria-atomic="true">
-                    ${()=>G.value}
+                    ${()=>W.value}
                   </span>
                   <ore-button
                     class="dg-page-btn"
@@ -424,8 +424,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     size="sm"
                     icon-only
                     label="Next page"
-                    :disabled="${()=>!W.value||v.value}"
-                    @click="${()=>R(`next`)}">
+                    :disabled="${()=>!U.value||g.value}"
+                    @click="${()=>I(`next`)}">
                     <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                   </ore-button>
                 </div>