@vielzeug/refine 1.1.1

package/dist/datagrid.cjs

@@ -0,0 +1,435 @@
+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
+        class="dg-tabs"
+        role="tablist"
+        aria-label="Views"
+        aria-controls="dg-tabpanel"
+        @keydown="${e=>{if(![`ArrowLeft`,`ArrowRight`,`Home`,`End`].includes(e.key))return;let t=Array.from(e.currentTarget.querySelectorAll(`.dg-tab`)),n=t.findIndex(e=>e.classList.contains(`dg-tab--active`)),r=n;if(e.key===`ArrowLeft`?r=Math.max(0,n-1):e.key===`ArrowRight`?r=Math.min(t.length-1,n+1):e.key===`Home`?r=0:e.key===`End`&&(r=t.length-1),r!==n){e.preventDefault();let n=t[r];n.focus(),n.click()}}}">
+        ${e.map(e=>u.html`<ore-button
+              class="${()=>`dg-tab${n===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)}"
+              aria-controls="dg-tabpanel"
+              @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">
+        <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>
+        <div slot="content" class="dg-pop-sort">
+          <div class="dg-pop-header">
+            <span class="dg-pop-title">Sort by</span>
+            <ore-button
+              class="dg-icon-btn"
+              variant="ghost"
+              size="sm"
+              icon-only
+              label="Clear sort"
+              :disabled="${()=>N.sortState.value.direction===`none`||void 0}"
+              @click="${()=>N.sortTo(``,`none`)}">
+              <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
+            </ore-button>
+          </div>
+          <div class="dg-pop-sort-row">
+            <ore-select
+              class="dg-pop-select"
+              variant="flat"
+              size="sm"
+              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>
+            <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}"
+              :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>
+          </div>
+        </div>
+      </ore-popover>`,re=()=>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
+                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`:``}`}"
+                aria-hidden="true"
+                @mouseenter="${()=>Z.value=!0}"
+                @mouseleave="${()=>Z.value=!1}"
+                @focusin="${()=>Z.value=!0}"
+                @focusout="${()=>Z.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>
+              </ore-badge>`:u.html`<ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Filter">
+                <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
+              </ore-button>`}
+        <div slot="content" class="dg-pop-filter">
+          <div class="dg-pop-header">
+            <span class="dg-pop-title">Filter by</span>
+            ${()=>D.filterDefs.value.length?u.html`<ore-button
+                    class="dg-icon-btn"
+                    variant="ghost"
+                    size="sm"
+                    icon-only
+                    label="Clear all filters"
+                    @click="${()=>D.clearAllFilters()}">
+                    <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                  </ore-button>`:u.html``}
+          </div>
+
+          <!-- Always-visible field picker: select columns to add filter rules -->
+          <div class="dg-pop-filter-fields">
+            <ore-combobox
+              placeholder="Add filter…"
+              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)}}">
+            </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-rule">
+                    <div class="dg-pop-filter-rule-header">
+                      <span class="dg-pop-filter-field">${e.label}</span>
+                      <ore-select
+                        class="dg-pop-filter-op-select"
+                        variant="ghost"
+                        size="sm"
+                        fullwidth
+                        :value="${()=>D.filterValues.value.get(e.key)?.operator??`contains`}"
+                        :options="${()=>e.operators??[]}"
+                        @change="${t=>{D.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)}">
+                        <ore-icon name="trash-2" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                      </ore-button>
+                    </div>
+                    <ore-combobox
+                      class="dg-filter"
+                      :placeholder="${()=>e.label}"
+                      :options="${()=>e.options}"
+                      :value="${()=>[...D.filterValues.value.get(e.key)?.values??[]]}"
+                      :disabled="${()=>v.value||void 0}"
+                      multiple
+                      fullwidth
+                      autoclose
+                      @change="${t=>{D.setFilter(e.key,t.detail.values)}}"></ore-combobox>
+                  </div>
+                `)}
+          </div>
+        </div>
+      </ore-popover>`,ie=()=>u.html`<ore-popover
+        class="dg-action-popover"
+        placement="bottom-end"
+        label="Column options"
+        style="--popover-min-width:18rem">
+        <ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Column options">
+          <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
+                  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)}">
+                  <ore-icon
+                    slot="prefix"
+                    :name="${()=>D.hiddenColumns.value.has(e.key)?`eye-off`:`eye`}"
+                    size="13"
+                    stroke-width="2"
+                    aria-hidden="true"></ore-icon>
+                  ${e.label}
+                </ore-button>`)}
+        </div>
+      </ore-popover>`;return u.html`
+      <!-- ── Controls Bar ────────────────────────────────────────────────── -->
+      <div class="dg-controls" part="controls">
+        <!-- Left: view tabs -->
+        ${()=>te()}
+
+        <!-- Right: Action bar -->
+        <div class="dg-actions">
+          ${()=>ne()} ${()=>re()} ${()=>ie()}
+
+          <!-- Density toggle -->
+          <ore-button
+            class="dg-icon-btn"
+            variant="ghost"
+            size="sm"
+            icon-only
+            :label="${()=>J[Y.value]}"
+            @click="${X}">
+            <ore-icon
+              :name="${()=>q[Y.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>
+
+          <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
+                    class="dg-search-input"
+                    type="search"
+                    variant="flat"
+                    size="sm"
+                    rounded="full"
+                    :placeholder="${()=>t.searchPlaceholder.value??`Search…`}"
+                    :disabled="${()=>v.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()}}}">
+                    <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()}}">
+              <ore-icon
+                :name="${()=>D.searchActive.value?`x`:`search`}"
+                size="15"
+                stroke-width="1.75"
+                aria-hidden="true"></ore-icon>
+            </ore-button>
+          </div>
+        </div>
+      </div>
+
+      <div id="dg-tabpanel" class="dg-scroll" role="tabpanel" aria-label="Data">
+        <div class="dg-loading-overlay">
+          <ore-icon name="loader-2" size="24" class="dg-spin" aria-hidden="true"></ore-icon>
+        </div>
+        <table
+          class="dg-table"
+          part="table"
+          role="grid"
+          :aria-label="${()=>t.label.value??void 0}"
+          :aria-busy="${()=>H.value?`true`:null}"
+          :aria-disabled="${()=>v.value?`true`:null}">
+          <!-- Head -->
+          <thead class="dg-head" part="thead">
+            <tr role="row">
+              ${()=>y.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`}">
+                      <ore-checkbox
+                        class="dg-check"
+                        :checked="${()=>N.isAllSelected()}"
+                        :indeterminate="${ee}"
+                        ?disabled="${v}"
+                        aria-label="Select all rows on this page"
+                        @change="${()=>{v.value||N.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`:``}`}"
+                    role="columnheader"
+                    scope="col"
+                    :tabindex="${()=>{let e=$.activeCell.value;return e.row===0&&e.col===t+S.value?`0`:`-1`}}"
+                    data-align="${e.align??`left`}"
+                    :aria-sort="${()=>e.sortable?m(N.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}`:``}}">
+                    <div class="dg-th-inner">
+                      ${()=>e.sortable?u.html`<ore-button
+                              class="dg-sort-btn"
+                              variant="text"
+                              size="sm"
+                              fullwidth
+                              :label="${e.headerLabel??e.label}"
+                              :disabled="${()=>v.value||void 0}"
+                              @click="${()=>{v.value||N.sortBy(e.key)}}">
+                              ${e.label}
+                              <ore-icon
+                                slot="suffix"
+                                class="dg-sort-icon"
+                                :name="${()=>p(N.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``}
+                    </div>
+                  </th>`)}
+              ${()=>x.value?u.html`<th
+                      class="dg-th dg-th-expand"
+                      role="columnheader"
+                      scope="col"
+                      aria-label="Row details"
+                      tabindex="-1"></th>`:u.html``}
+            </tr>
+          </thead>
+
+          <!-- 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)}">
+                      <div class="dg-empty-content">
+                        ${()=>t.emptyText.value??`No data`}
+                        ${()=>D.searchQuery.value||D.filterValues.value.size?u.html`<div class="dg-empty-actions">
+                                <ore-button
+                                  variant="text"
+                                  size="sm"
+                                  @click="${()=>{D.resetSearch(),D.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
+                        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}"
+                        ?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
+                                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))}}">
+                                <ore-checkbox
+                                  class="dg-check"
+                                  :checked="${()=>N.selectedKeys.value.has(r)}"
+                                  ?disabled="${v}"
+                                  aria-label="Select row"
+                                  tabindex="-1"
+                                  @click="${e=>e.stopPropagation()}"
+                                  @change="${()=>{v.value||N.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`:``}`}"
+                            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`}}"
+                            :title="${r}">
+                            ${r}
+                          </td>`})}
+                        ${()=>x.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))}}">
+                                <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)}}">
+                                  <ore-icon
+                                    :name="${()=>b.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">
+                              <td
+                                class="dg-td-expanded"
+                                role="gridcell"
+                                :colspan="${()=>String(z.value)}">
+                                ${e.raw(()=>T.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(t)??``)}
+                              </td>
+                            </tr>`:u.html``} `})}
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Footer / Pagination -->
+      ${()=>B.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
+                    >`}
+              <div class="dg-footer-end">
+                ${()=>{let e=t.pageSizeOptions.value??[];return e.length?u.html`<div class="dg-page-size-wrap">
+                        <ore-select
+                          class="dg-page-size-select"
+                          fullwidth
+                          aria-label="Rows per page"
+                          :value="${()=>String(C.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>
+                      </div>`:u.html``}}
+                <div class="dg-pagination" role="group" aria-label="Page navigation">
+                  <ore-button
+                    class="dg-page-btn"
+                    variant="ghost"
+                    size="sm"
+                    icon-only
+                    label="Previous page"
+                    :disabled="${()=>!U.value||v.value}"
+                    @click="${()=>R(`prev`)}">
+                    <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                  </ore-button>
+                  <span
+                    class="dg-page-label"
+                    dir="ltr"
+                    aria-current="page"
+                    role="status"
+                    aria-live="polite"
+                    aria-atomic="true">
+                    ${()=>G.value}
+                  </span>
+                  <ore-button
+                    class="dg-page-btn"
+                    variant="ghost"
+                    size="sm"
+                    icon-only
+                    label="Next page"
+                    :disabled="${()=>!W.value||v.value}"
+                    @click="${()=>R(`next`)}">
+                    <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                  </ore-button>
+                </div>
+              </div>
+            </div>`:u.html``}
+    `},shadow:{delegatesFocus:!0},styles:[t.tableBaseMixin(`datagrid`),l.default]}),exports.COLUMN_TAG=o.COLUMN_TAG,exports.DATAGRID_TAG=h,exports.ariaSortValue=m,exports.sortIconName=p;
+//# sourceMappingURL=datagrid.cjs.map