@vielzeug/refine 2.1.0 → 2.1.3

package/dist/datagrid.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_dev.cjs");const e=require("./styles/mixins/table-base.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./inputs/datagrid/datagrid-column.cjs"),r=require("./inputs/datagrid/datagrid-model.cjs"),i=require("./inputs/datagrid/datagrid-nav.cjs"),a=require("./inputs/datagrid/datagrid.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple"),c=require("@vielzeug/ripple/watch"),l=require("@vielzeug/arsenal/function");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`}var f=`ore-datagrid`;(0,o.define)(f,{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(),pageSize:o.prop.number(10),pageSizeOptions:o.prop.data(),rows:o.prop.data(),searchLabel:o.prop.data(),searchPlaceholder:o.prop.string(`Search…`),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)(),a=(0,o.useEmit)(),f=(0,o.useSlots)(),p=(0,s.computed)(()=>e.disabled.value===!0),m=(0,s.computed)(()=>e.selectionMode.value??`none`),h=(0,s.signal)(new Set),g=(0,s.computed)(()=>e.expandable.value===!0&&b.value.some(e=>typeof e.renderExpanded==`function`)),_=(0,s.computed)(()=>+(m.value===`multi`)),v=(0,s.signal)(e.pageSize.value??10);(0,c.watch)(e.pageSize,e=>{e!=null&&(v.value=e)});let y=(0,s.signal)([]);(0,o.onMounted)(()=>{y.value=n.parseColumnChildren(t);let e=new MutationObserver(()=>{y.value=n.parseColumnChildren(t)});return e.observe(t,{attributeFilter:n.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let b=(0,s.computed)(()=>{let t=e.columns.value;return t===void 0?y.value:t}),x=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)},S=(0,s.computed)(()=>e.source.value!=null),C=(0,s.signal)([]),w=(0,s.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:v.value,totalItems:0}),T=null;(0,o.onCleanup)(()=>{T?.(),T=null}),(0,c.watch)(e.source,e=>{if(T?.(),T=null,!e){C.value=[],w.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:v.value,totalItems:0};return}let t=(t=e.snapshot)=>{C.value=t.data,w.value={error:t.error,isLoading:t.isFetching,pageCount:t.pagination.count,pageNumber:t.pagination.index,pageSize:t.pagination.size,totalItems:t.pagination.total}};t(),T=e.subscribe(t)},{immediate:!0});let E=r.createDataGridModel({clientSide:(0,s.computed)(()=>!S.value),columns:b,filterOptions:e.filterOptions,getRowKey:x,items:(0,s.computed)(()=>S.value?C.value:e.rows.value??[]),onSelectionChange:e=>{a(`selection-change`,{keys:[...e],rows:E.selectedRows.value})},onSortChange:e=>{a(`sort-change`,e)},pageSize:(0,s.computed)(()=>S.value?0:v.value),selectionMode:m,sortMode:(0,s.computed)(()=>e.sortMode.value??`client`)}),D=(0,l.debounce)(t=>{let n=e.source.value;n?.setQuery?n.setQuery({search:t}):E.setSearchQuery(t)},250);(0,c.watch)(e.selectedKeys,e=>{Array.isArray(e)&&E.setSelection(new Set(e))},{immediate:!0});let O=(0,s.signal)({}),k=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{O.value={...O.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},A=E.visibleColumns,j=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};function M(t){let n=e.source.value;if(n){t===`prev`?n.page?.previous():n.page?.next();return}t===`prev`?E.prevPage():E.nextPage(),a(`page-change`,{pageIndex:E.pageIndex.value,pageSize:v.value})}let N=(0,s.computed)(()=>{let e=E.currentPageItems.value;return!e.length||E.isAllSelected()?!1:e.some(e=>E.selectedKeys.value.has(x(e)))}),P=(0,s.computed)(()=>A.value.length+ +(m.value===`multi`)+ +!!g.value),F=(0,s.computed)(()=>S.value?w.value.pageCount>1:v.value>0),I=(0,s.computed)(()=>{if(S.value){let{pageNumber:e,pageSize:t,totalItems:n}=w.value,r=Math.max(1,t);if(!F.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=E.totalItems.value;if(!F.value)return`${e} row${e===1?``:`s`}`;if(e===0)return`0 to 0 of 0`;let t=E.pageIndex.value*v.value+1;return`${t} to ${Math.min(t+v.value-1,e)} of ${e}`}),L=(0,s.computed)(()=>e.loading.value===!0||S.value&&w.value.isLoading),R=(0,s.computed)(()=>S.value?w.value.pageNumber>1:E.hasPrevPage.value),z=(0,s.computed)(()=>S.value?w.value.pageNumber<w.value.pageCount:E.hasNextPage.value),B=(0,s.computed)(()=>S.value?w.value.totalItems===0?`0 / 0`:`${w.value.pageNumber} / ${w.value.pageCount}`:`${E.pageIndex.value+1} / ${E.pageCount.value}`),V=[`compact`,`cozy`,`comfortable`],H={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},U={comfortable:`Density: Comfortable`,compact:`Density: Compact`,cozy:`Density: Cozy`},W=(0,s.signal)(e.density.value??`cozy`);(0,c.watch)(e.density,e=>{e&&(W.value=e)});let G=()=>{let e=V.indexOf(W.value),n=V[(e+1)%V.length];W.value=n,t.setAttribute(`density`,n),a(`density-change`,{density:n})},K=(0,s.signal)(!1),q=e=>{let t=new Set(h.value),n=!t.has(e);n?t.add(e):t.delete(e),h.value=t,a(`row-expand`,{expanded:n,key:e})},J={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:a}=i.createGridNav(n,e);return J=a,r}),t.focusCell=e=>J.focusCell(e);let Y=()=>{let t=e.views.value??[],n=e.activeView.value;return o.html`
+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");function l(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function u(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}var d=`ore-datagrid`;(0,o.define)(d,{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(),pageSize:o.prop.number(10),pageSizeOptions:o.prop.data(),rows:o.prop.data(),searchLabel:o.prop.data(),searchPlaceholder:o.prop.string(`Search…`),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)(),d=(0,o.useSlots)(),f=(0,s.computed)(()=>e.disabled.value===!0),p=(0,s.computed)(()=>e.selectionMode.value??`none`),m=(0,s.signal)(new Set),h=(0,s.computed)(()=>e.expandable.value===!0&&y.value.some(e=>typeof e.renderExpanded==`function`)),g=(0,s.computed)(()=>+(p.value===`multi`)),_=(0,s.signal)(e.pageSize.value??10);(0,s.watch)(e.pageSize,e=>{e!=null&&(_.value=e)});let v=(0,s.signal)([]);(0,o.onMounted)(()=>{v.value=r.parseColumnChildren(t);let e=new MutationObserver(()=>{v.value=r.parseColumnChildren(t)});return e.observe(t,{attributeFilter:r.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let y=(0,s.computed)(()=>{let t=e.columns.value;return t===void 0?v.value:t}),b=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)},x=(0,s.computed)(()=>e.source.value!=null),S=(0,s.signal)([]),C=(0,s.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:_.value,totalItems:0}),w=null;(0,o.onCleanup)(()=>{w?.(),w=null}),(0,s.watch)(e.source,e=>{if(w?.(),w=null,!e){S.value=[],C.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:_.value,totalItems:0};return}let t=(t=e.snapshot)=>{S.value=t.data,C.value={error:t.error,isLoading:t.isFetching,pageCount:t.pagination.count,pageNumber:t.pagination.index,pageSize:t.pagination.size,totalItems:t.pagination.total}};t(),w=e.subscribe(t)},{immediate:!0});let T=i.createDataGridModel({clientSide:(0,s.computed)(()=>!x.value),columns:y,filterOptions:e.filterOptions,getRowKey:b,items:(0,s.computed)(()=>x.value?S.value:e.rows.value??[]),onSelectionChange:e=>{n(`selection-change`,{keys:[...e],rows:T.selectedRows.value})},onSortChange:e=>{n(`sort-change`,e)},pageSize:(0,s.computed)(()=>x.value?0:_.value),selectionMode:p,sortMode:(0,s.computed)(()=>e.sortMode.value??`client`)}),E=(0,c.debounce)(t=>{let n=e.source.value;n?.setQuery?n.setQuery({search:t}):T.setSearchQuery(t)},250);(0,s.watch)(e.selectedKeys,e=>{Array.isArray(e)&&T.setSelection(new Set(e))},{immediate:!0});let D=(0,s.signal)({}),O=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{D.value={...D.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},k=T.visibleColumns,A=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};function j(t){let r=e.source.value;if(r){t===`prev`?r.page?.previous():r.page?.next();return}t===`prev`?T.prevPage():T.nextPage(),n(`page-change`,{pageIndex:T.pageIndex.value,pageSize:_.value})}let M=(0,s.computed)(()=>{let e=T.currentPageItems.value;return!e.length||T.isAllSelected()?!1:e.some(e=>T.selectedKeys.value.has(b(e)))}),N=(0,s.computed)(()=>k.value.length+ +(p.value===`multi`)+ +!!h.value),P=(0,s.computed)(()=>x.value?C.value.pageCount>1:_.value>0),F=(0,s.computed)(()=>{if(x.value){let{pageNumber:e,pageSize:t,totalItems:n}=C.value,r=Math.max(1,t);if(!P.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=T.totalItems.value;if(!P.value)return`${e} row${e===1?``:`s`}`;if(e===0)return`0 to 0 of 0`;let t=T.pageIndex.value*_.value+1;return`${t} to ${Math.min(t+_.value-1,e)} of ${e}`}),I=(0,s.computed)(()=>e.loading.value===!0||x.value&&C.value.isLoading),L=(0,s.computed)(()=>x.value?C.value.pageNumber>1:T.hasPrevPage.value),R=(0,s.computed)(()=>x.value?C.value.pageNumber<C.value.pageCount:T.hasNextPage.value),z=(0,s.computed)(()=>x.value?C.value.totalItems===0?`0 / 0`:`${C.value.pageNumber} / ${C.value.pageCount}`:`${T.pageIndex.value+1} / ${T.pageCount.value}`),B=[`compact`,`cozy`,`comfortable`],V={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},H={comfortable:`Density: Comfortable`,compact:`Density: Compact`,cozy:`Density: Cozy`},U=(0,s.signal)(e.density.value??`cozy`);(0,s.watch)(e.density,e=>{e&&(U.value=e)});let W=()=>{let e=B.indexOf(U.value),r=B[(e+1)%B.length];U.value=r,t.setAttribute(`density`,r),n(`density-change`,{density:r})},G=(0,s.signal)(!1),K=e=>{let t=new Set(m.value),r=!t.has(e);r?t.add(e):t.delete(e),m.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 J=()=>{let t=e.views.value??[],r=e.activeView.value;return o.html`
         <div
           class="dg-tabs"
           role="tablist"
@@ -7,20 +7,20 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
           @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`
               <ore-button
-                class="${()=>`dg-tab${n===e.id?` dg-tab--active`:``}`}"
+                class="${()=>`dg-tab${r===e.id?` dg-tab--active`:``}`}"
                 role="tab"
                 variant="ghost"
                 rounded="full"
                 size="sm"
-                tabindex="${()=>n===e.id?`0`:`-1`}"
-                aria-selected="${()=>String(n===e.id)}"
+                tabindex="${()=>r===e.id?`0`:`-1`}"
+                aria-selected="${()=>String(r===e.id)}"
                 aria-controls="dg-tabpanel"
-                @click="${()=>{a(`view-change`,{id:e.id,label:e.label})}}">
+                @click="${()=>{n(`view-change`,{id:e.id,label:e.label})}}">
                 ${e.label}
               </ore-button>
             `)}
         </div>
-      `},X=()=>o.html`
+      `},Y=()=>o.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>
@@ -34,8 +34,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
               size="sm"
               icon-only
               label="Clear sort"
-              disabled="${()=>E.sortState.value.direction===`none`||void 0}"
-              @click="${()=>E.sortTo(``,`none`)}">
+              disabled="${()=>T.sortState.value.direction===`none`||void 0}"
+              @click="${()=>T.sortTo(``,`none`)}">
               <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
             </ore-button>
           </div>
@@ -47,41 +47,41 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
               rounded="lg"
               placeholder="Property"
               fullwidth
-              value="${()=>E.sortState.value.key}"
-              options="${()=>b.value.map(e=>({label:e.label,value:e.key}))}"
-              @change="${e=>{let t=e.detail.values[0]??``,n=E.sortState.value.direction===`none`?`asc`:E.sortState.value.direction;E.sortTo(t,n)}}"></ore-select>
+              value="${()=>T.sortState.value.key}"
+              options="${()=>y.value.map(e=>({label:e.label,value:e.key}))}"
+              @change="${e=>{let t=e.detail.values[0]??``,n=T.sortState.value.direction===`none`?`asc`:T.sortState.value.direction;T.sortTo(t,n)}}"></ore-select>
             <ore-select
               class="dg-pop-dir-select"
               variant="flat"
               size="sm"
               rounded="lg"
               fullwidth
-              disabled="${()=>!E.sortState.value.key||void 0}"
-              value="${()=>E.sortState.value.direction===`none`?`asc`:E.sortState.value.direction}"
+              disabled="${()=>!T.sortState.value.key||void 0}"
+              value="${()=>T.sortState.value.direction===`none`?`asc`:T.sortState.value.direction}"
               options="${()=>[{label:`A → Z`,value:`asc`},{label:`Z → A`,value:`desc`}]}"
-              @change="${e=>{E.sortState.value.key&&E.sortTo(E.sortState.value.key,e.detail.values[0]??`asc`)}}"></ore-select>
+              @change="${e=>{T.sortState.value.key&&T.sortTo(T.sortState.value.key,e.detail.values[0]??`asc`)}}"></ore-select>
           </div>
         </div>
       </ore-popover>
-    `,Z=()=>o.html`
+    `,X=()=>o.html`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Filter"
         style="--popover-min-width:16rem;--popover-max-height:min(90vh,48rem)">
-        ${()=>E.filterDefs.value.length?o.html`
+        ${()=>T.filterDefs.value.length?o.html`
                 <ore-badge
                   anchor="top-end"
                   color="primary"
                   size="xs"
-                  count="${()=>K.value?E.filterDefs.value.length:void 0}"
-                  dot="${()=>!K.value||void 0}"
-                  label="${()=>`${E.filterDefs.value.length} active filter${E.filterDefs.value.length>1?`s`:``}`}"
+                  count="${()=>G.value?T.filterDefs.value.length:void 0}"
+                  dot="${()=>!G.value||void 0}"
+                  label="${()=>`${T.filterDefs.value.length} active filter${T.filterDefs.value.length>1?`s`:``}`}"
                   aria-hidden="true"
-                  @mouseenter="${()=>K.value=!0}"
-                  @mouseleave="${()=>K.value=!1}"
-                  @focusin="${()=>K.value=!0}"
-                  @focusout="${()=>K.value=!1}">
+                  @mouseenter="${()=>G.value=!0}"
+                  @mouseleave="${()=>G.value=!1}"
+                  @focusin="${()=>G.value=!0}"
+                  @focusout="${()=>G.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>
@@ -94,14 +94,14 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
         <div slot="content" class="dg-pop-filter">
           <div class="dg-pop-header">
             <span class="dg-pop-title">Filter by</span>
-            ${()=>E.filterDefs.value.length?o.html`
+            ${()=>T.filterDefs.value.length?o.html`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
                       size="sm"
                       icon-only
                       label="Clear all filters"
-                      @click="${()=>E.clearAllFilters()}">
+                      @click="${()=>T.clearAllFilters()}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
                   `:o.html``}
@@ -114,14 +114,14 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
               multiple
               fullwidth
               autoclose
-              options="${()=>b.value.map(e=>({label:e.label,value:e.key}))}"
-              value="${()=>E.filterDefs.value.map(e=>e.key)}"
-              @change="${e=>{E.setActiveFilterKeys(e.detail.values)}}"></ore-combobox>
+              options="${()=>y.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="${()=>!E.filterDefs.value.length}">
-            ${()=>E.filterDefs.value.map(e=>o.html`
+          <div class="dg-pop-filter-rules" ?hidden="${()=>!T.filterDefs.value.length}">
+            ${()=>T.filterDefs.value.map(e=>o.html`
                   <div class="dg-pop-filter-rule">
                     <div class="dg-pop-filter-rule-header">
                       <span class="dg-pop-filter-field">${e.label}</span>
@@ -130,16 +130,16 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                         variant="ghost"
                         size="sm"
                         fullwidth
-                        value="${()=>E.filterValues.value.get(e.key)?.operator??`contains`}"
+                        value="${()=>T.filterValues.value.get(e.key)?.operator??`contains`}"
                         options="${()=>e.operators??[]}"
-                        @change="${t=>{E.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="${()=>E.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>
@@ -147,18 +147,18 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                       class="dg-filter"
                       placeholder="${()=>e.label}"
                       options="${()=>e.options}"
-                      value="${()=>[...E.filterValues.value.get(e.key)?.values??[]]}"
-                      disabled="${()=>p.value||void 0}"
+                      value="${()=>[...T.filterValues.value.get(e.key)?.values??[]]}"
+                      disabled="${()=>f.value||void 0}"
                       multiple
                       fullwidth
                       autoclose
-                      @change="${t=>{E.setFilter(e.key,t.detail.values)}}"></ore-combobox>
+                      @change="${t=>{T.setFilter(e.key,t.detail.values)}}"></ore-combobox>
                   </div>
                 `)}
           </div>
         </div>
       </ore-popover>
-    `,Q=()=>o.html`
+    `,Z=()=>o.html`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
@@ -168,17 +168,17 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
           <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">
-          ${()=>b.value.map(e=>o.html`
+          ${()=>y.value.map(e=>o.html`
                 <ore-button
                   class="dg-pop-col-item"
                   role="menuitemcheckbox"
                   variant="ghost"
                   size="sm"
-                  aria-checked="${()=>String(!E.hiddenColumns.value.has(e.key))}"
-                  @click="${()=>E.toggleColumnVisibility(e.key)}">
+                  aria-checked="${()=>String(!T.hiddenColumns.value.has(e.key))}"
+                  @click="${()=>T.toggleColumnVisibility(e.key)}">
                   <ore-icon
                     slot="prefix"
-                    name="${()=>E.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>
@@ -191,11 +191,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
-        ${()=>Y()}
+        ${()=>J()}
 
         <!-- Right: Action bar -->
         <div class="dg-actions">
-          ${()=>X()} ${()=>Z()} ${()=>Q()}
+          ${()=>Y()} ${()=>X()} ${()=>Z()}
 
           <!-- Density toggle -->
           <ore-button
@@ -203,22 +203,22 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
             variant="ghost"
             size="sm"
             icon-only
-            label="${()=>U[W.value]}"
-            @click="${G}">
+            label="${()=>H[U.value]}"
+            @click="${W}">
             <ore-icon
-              name="${()=>H[W.value]}"
+              name="${()=>V[U.value]}"
               size="15"
               stroke-width="1.75"
               aria-hidden="true"></ore-icon>
           </ore-button>
 
-          <span class="dg-action-divider" aria-hidden="true" ?hidden="${()=>!f.has(`actions`).value}"></span>
+          <span class="dg-action-divider" aria-hidden="true" ?hidden="${()=>!d.has(`actions`).value}"></span>
 
           <slot name="actions"></slot>
 
           <!-- Search toggle: rightmost, expands in-place -->
-          <div class="${()=>`dg-search${E.searchActive.value?` dg-search--open`:``}`}">
-            ${()=>E.searchActive.value?o.html`
+          <div class="${()=>`dg-search${T.searchActive.value?` dg-search--open`:``}`}">
+            ${()=>T.searchActive.value?o.html`
                     <ore-input
                       class="dg-search-input"
                       type="search"
@@ -226,10 +226,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                       size="sm"
                       rounded="full"
                       placeholder="${()=>e.searchPlaceholder.value??`Search…`}"
-                      disabled="${()=>p.value||void 0}"
+                      disabled="${()=>f.value||void 0}"
                       ref="${e=>{e&&requestAnimationFrame(()=>e.focus())}}"
-                      @input="${e=>{D(e.detail.value)}}"
-                      @keydown="${t=>{if(t.key===`Escape`){let t=e.source.value;t?.setQuery&&t.setQuery({search:``}),E.toggleSearch()}}}">
+                      @input="${e=>{E(e.detail.value)}}"
+                      @keydown="${t=>{if(t.key===`Escape`){let t=e.source.value;t?.setQuery&&t.setQuery({search:``}),T.toggleSearch()}}}">
                       <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-input>
                   `:o.html``}
@@ -237,10 +237,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
               variant="ghost"
               size="sm"
               icon-only
-              label="${()=>{let[t,n]=e.searchLabel.value??[`Search`,`Close search`];return E.searchActive.value?n:t}}"
-              @click="${()=>{let t=e.source.value;t?.setQuery&&E.searchActive.value&&t.setQuery({search:``}),E.toggleSearch()}}">
+              label="${()=>{let[t,n]=e.searchLabel.value??[`Search`,`Close search`];return T.searchActive.value?n:t}}"
+              @click="${()=>{let t=e.source.value;t?.setQuery&&T.searchActive.value&&t.setQuery({search:``}),T.toggleSearch()}}">
               <ore-icon
-                name="${()=>E.searchActive.value?`x`:`search`}"
+                name="${()=>T.searchActive.value?`x`:`search`}"
                 size="15"
                 stroke-width="1.75"
                 aria-hidden="true"></ore-icon>
@@ -258,36 +258,36 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
           part="table"
           role="grid"
           aria-label="${()=>e.label.value??void 0}"
-          aria-busy="${()=>L.value?`true`:null}"
-          aria-disabled="${()=>p.value?`true`:null}">
+          aria-busy="${()=>I.value?`true`:null}"
+          aria-disabled="${()=>f.value?`true`:null}">
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${()=>m.value===`multi`?o.html`
+              ${()=>p.value===`multi`?o.html`
                       <th
                         class="dg-th dg-th-check"
                         role="columnheader"
                         scope="col"
-                        tabindex="${()=>J.activeCell.value.row===0&&J.activeCell.value.col===0&&_.value>=1?`0`:`-1`}">
+                        tabindex="${()=>q.activeCell.value.row===0&&q.activeCell.value.col===0&&g.value>=1?`0`:`-1`}">
                         <ore-checkbox
                           class="dg-check"
-                          checked="${()=>E.isAllSelected()}"
-                          indeterminate="${N}"
-                          ?disabled="${p}"
+                          checked="${()=>T.isAllSelected()}"
+                          indeterminate="${M}"
+                          ?disabled="${f}"
                           aria-label="Select all rows on this page"
-                          @change="${()=>{p.value||E.selectAll()}}"></ore-checkbox>
+                          @change="${()=>{f.value||T.selectAll()}}"></ore-checkbox>
                       </th>
                     `:o.html``}
-              ${()=>A.value.map((e,t)=>{let n=t===A.value.length-1;return o.html`
+              ${()=>k.value.map((e,t)=>{let n=t===k.value.length-1;return o.html`
                     <th
-                      class="${`dg-th${n&&g.value?` dg-th-last`:``}`}"
+                      class="${`dg-th${n&&h.value?` dg-th-last`:``}`}"
                       role="columnheader"
                       scope="col"
-                      tabindex="${()=>{let e=J.activeCell.value;return e.row===0&&e.col===t+_.value?`0`:`-1`}}"
+                      tabindex="${()=>{let e=q.activeCell.value;return e.row===0&&e.col===t+g.value?`0`:`-1`}}"
                       data-align="${e.align??`left`}"
-                      aria-sort="${()=>e.sortable?d(E.sortState.value,e.key):void 0}"
+                      aria-sort="${()=>e.sortable?u(T.sortState.value,e.key):void 0}"
                       aria-label="${e.sortable?void 0:e.headerLabel??e.label}"
-                      style="${()=>{let t=O.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
+                      style="${()=>{let t=D.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
                       <div class="dg-th-inner">
                         ${()=>e.sortable?o.html`
                                 <ore-button
@@ -296,13 +296,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                                   size="sm"
                                   fullwidth
                                   label="${e.headerLabel??e.label}"
-                                  disabled="${()=>p.value||void 0}"
-                                  @click="${()=>{p.value||E.sortBy(e.key)}}">
+                                  disabled="${()=>f.value||void 0}"
+                                  @click="${()=>{f.value||T.sortBy(e.key)}}">
                                   ${e.label}
                                   <ore-icon
                                     slot="suffix"
                                     class="dg-sort-icon"
-                                    name="${()=>u(E.sortState.value,e.key)}"
+                                    name="${()=>l(T.sortState.value,e.key)}"
                                     size="14"
                                     stroke-width="2"></ore-icon>
                                 </ore-button>
@@ -311,12 +311,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                                 <span
                                   class="dg-col-resize"
                                   aria-hidden="true"
-                                  ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,k(e.key,n))}}"></span>
+                                  ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,O(e.key,n))}}"></span>
                               `:o.html``}
                       </div>
                     </th>
                   `})}
-              ${()=>g.value?o.html`
+              ${()=>h.value?o.html`
                       <th
                         class="dg-th dg-th-expand"
                         role="columnheader"
@@ -329,17 +329,17 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
 
           <!-- Body -->
           <tbody class="dg-body" part="tbody">
-            ${()=>E.currentPageItems.value.length===0?o.html`
+            ${()=>T.currentPageItems.value.length===0?o.html`
                     <tr role="row">
-                      <td class="dg-empty" role="gridcell" colspan="${()=>String(P.value)}">
+                      <td class="dg-empty" role="gridcell" colspan="${()=>String(N.value)}">
                         <div class="dg-empty-content">
                           ${()=>e.emptyText.value??`No data`}
-                          ${()=>E.searchQuery.value||E.filterValues.value.size?o.html`
+                          ${()=>T.searchQuery.value||T.filterValues.value.size?o.html`
                                   <div class="dg-empty-actions">
                                     <ore-button
                                       variant="text"
                                       size="sm"
-                                      @click="${()=>{E.resetSearch(),E.resetFilters()}}">
+                                      @click="${()=>{T.resetSearch(),T.resetFilters()}}">
                                       Clear all filters & search
                                     </ore-button>
                                   </div>
@@ -347,62 +347,62 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                         </div>
                       </td>
                     </tr>
-                  `:E.currentPageItems.value.map((e,t)=>{let n=x(e),r=m.value!==`none`&&!p.value,i=t+1;return o.html`
+                  `:T.currentPageItems.value.map((e,t)=>{let n=b(e),r=p.value!==`none`&&!f.value,i=t+1;return o.html`
                       <tr
                         class="dg-tr"
                         part="row"
                         role="row"
-                        aria-selected="${()=>m.value===`none`?null:String(E.selectedKeys.value.has(n))}"
-                        aria-expanded="${()=>g.value?String(h.value.has(n)):null}"
+                        aria-selected="${()=>p.value===`none`?null:String(T.selectedKeys.value.has(n))}"
+                        aria-expanded="${()=>h.value?String(m.value.has(n)):null}"
                         ?data-selectable="${r}"
-                        ?data-disabled="${p}"
-                        @click="${()=>{r&&m.value===`single`&&E.toggleRow(n)}}"
-                        @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&r&&m.value===`single`&&(e.preventDefault(),E.toggleRow(n))}}">
-                        ${()=>m.value===`multi`?o.html`
+                        ?data-disabled="${f}"
+                        @click="${()=>{r&&p.value===`single`&&T.toggleRow(n)}}"
+                        @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&r&&p.value===`single`&&(e.preventDefault(),T.toggleRow(n))}}">
+                        ${()=>p.value===`multi`?o.html`
                                 <td
                                   class="dg-td dg-td-check"
                                   role="gridcell"
-                                  tabindex="${()=>{let e=J.activeCell.value;return e.row===i&&e.col===0?`0`:`-1`}}"
-                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p.value||E.toggleRow(n))}}">
+                                  tabindex="${()=>{let e=q.activeCell.value;return e.row===i&&e.col===0?`0`:`-1`}}"
+                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f.value||T.toggleRow(n))}}">
                                   <ore-checkbox
                                     class="dg-check"
-                                    checked="${()=>E.selectedKeys.value.has(n)}"
-                                    ?disabled="${p}"
+                                    checked="${()=>T.selectedKeys.value.has(n)}"
+                                    ?disabled="${f}"
                                     aria-label="Select row"
                                     tabindex="-1"
                                     @click="${e=>e.stopPropagation()}"
-                                    @change="${()=>{p.value||E.toggleRow(n)}}"></ore-checkbox>
+                                    @change="${()=>{f.value||T.toggleRow(n)}}"></ore-checkbox>
                                 </td>
                               `:o.html``}
-                        ${A.value.map((t,n)=>{let r=j(t,e),a=n===A.value.length-1;return o.html`
+                        ${k.value.map((t,n)=>{let r=A(t,e),a=n===k.value.length-1;return o.html`
                             <td
-                              class="${`dg-td${a&&g.value?` dg-td-last`:``}`}"
+                              class="${`dg-td${a&&h.value?` dg-td-last`:``}`}"
                               part="cell"
                               role="gridcell"
                               data-align="${t.align??`left`}"
-                              tabindex="${()=>{let e=J.activeCell.value;return e.row===i&&e.col===n+_.value?`0`:`-1`}}"
+                              tabindex="${()=>{let e=q.activeCell.value;return e.row===i&&e.col===n+g.value?`0`:`-1`}}"
                               title="${r}">
                               ${r}
                             </td>
                           `})}
-                        ${()=>g.value?o.html`
+                        ${()=>h.value?o.html`
                                 <td
                                   class="dg-td dg-td-expand"
                                   role="gridcell"
-                                  tabindex="${()=>{let e=J.activeCell.value;return e.row===i&&e.col===P.value-1?`0`:`-1`}}"
-                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p.value||q(n))}}">
+                                  tabindex="${()=>{let e=q.activeCell.value;return e.row===i&&e.col===N.value-1?`0`:`-1`}}"
+                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f.value||K(n))}}">
                                   <ore-button
                                     class="dg-expand-btn"
                                     variant="ghost"
                                     size="sm"
                                     icon-only
                                     tabindex="-1"
-                                    label="${()=>h.value.has(n)?`Collapse row`:`Expand row`}"
-                                    aria-expanded="${()=>String(h.value.has(n))}"
-                                    disabled="${()=>p.value||void 0}"
-                                    @click="${e=>{e.stopPropagation(),p.value||q(n)}}">
+                                    label="${()=>m.value.has(n)?`Collapse row`:`Expand row`}"
+                                    aria-expanded="${()=>String(m.value.has(n))}"
+                                    disabled="${()=>f.value||void 0}"
+                                    @click="${e=>{e.stopPropagation(),f.value||K(n)}}">
                                     <ore-icon
-                                      name="${()=>h.value.has(n)?`chevron-up`:`chevron-down`}"
+                                      name="${()=>m.value.has(n)?`chevron-up`:`chevron-down`}"
                                       size="14"
                                       stroke-width="2"
                                       aria-hidden="true"></ore-icon>
@@ -410,13 +410,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                                 </td>
                               `:o.html``}
                       </tr>
-                      ${()=>g.value&&h.value.has(n)?o.html`
+                      ${()=>h.value&&m.value.has(n)?o.html`
                               <tr class="dg-tr-expanded" role="row">
                                 <td
                                   class="dg-td-expanded"
                                   role="gridcell"
-                                  colspan="${()=>String(P.value)}">
-                                  ${(0,o.unsafeHtml)(()=>b.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
+                                  colspan="${()=>String(N.value)}">
+                                  ${(0,o.unsafeHtml)(()=>y.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
                                 </td>
                               </tr>
                             `:o.html``}
@@ -426,11 +426,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
       </div>
 
       <!-- Footer / Pagination -->
-      ${()=>F.value?o.html`
+      ${()=>P.value?o.html`
               <div class="dg-footer" part="footer" role="navigation" aria-label="Pagination">
                 ${()=>(e.pageSizeOptions.value??[]).length?o.html``:o.html`
                         <span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true">
-                          ${I}
+                          ${F}
                         </span>
                       `}
                 <div class="dg-footer-end">
@@ -440,10 +440,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                               class="dg-page-size-select"
                               fullwidth
                               aria-label="Rows per page"
-                              value="${()=>String(v.value)}"
+                              value="${()=>String(_.value)}"
                               options="${()=>t.map(e=>({label:String(e),value:String(e)}))}"
-                              disabled="${()=>p.value||void 0}"
-                              @change="${e=>{let t=parseInt(e.detail.values[0],10);isNaN(t)||(v.value=t,E.goToPage(0),a(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
+                              disabled="${()=>f.value||void 0}"
+                              @change="${e=>{let t=parseInt(e.detail.values[0],10);Number.isNaN(t)||(_.value=t,T.goToPage(0),n(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
                           </div>
                         `:o.html``}}
                   <div class="dg-pagination" role="group" aria-label="Page navigation">
@@ -453,8 +453,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                       size="sm"
                       icon-only
                       label="Previous page"
-                      disabled="${()=>!R.value||p.value}"
-                      @click="${()=>M(`prev`)}">
+                      disabled="${()=>!L.value||f.value}"
+                      @click="${()=>j(`prev`)}">
                       <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                     </ore-button>
                     <span
@@ -464,7 +464,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                       role="status"
                       aria-live="polite"
                       aria-atomic="true">
-                      ${()=>B.value}
+                      ${()=>z.value}
                     </span>
                     <ore-button
                       class="dg-page-btn"
@@ -472,13 +472,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_d
                       size="sm"
                       icon-only
                       label="Next page"
-                      disabled="${()=>!z.value||p.value}"
-                      @click="${()=>M(`next`)}">
+                      disabled="${()=>!R.value||f.value}"
+                      @click="${()=>j(`next`)}">
                       <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                     </ore-button>
                   </div>
                 </div>
               </div>
             `:o.html``}
-    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),a.default]}),exports.COLUMN_TAG=n.COLUMN_TAG,exports.DATAGRID_TAG=f,exports.ariaSortValue=d,exports.sortIconName=u;
+    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),n.default]}),exports.COLUMN_TAG=r.COLUMN_TAG,exports.DATAGRID_TAG=d,exports.ariaSortValue=u,exports.sortIconName=l;
 //# sourceMappingURL=datagrid.cjs.map