@toolbox-web/grid 1.25.0 → 1.25.2

package/lib/plugins/multi-sort/MultiSortPlugin.d.ts

@@ -48,10 +48,10 @@ import { MultiSortConfig, SortModel } from './types';
  *
  * @example Basic Multi-Column Sorting
  * ```ts
- * import '@toolbox-web/grid';
+ * import { queryGrid } from '@toolbox-web/grid';
  * import { MultiSortPlugin } from '@toolbox-web/grid/plugins/multi-sort';
  *
- * const grid = document.querySelector('tbw-grid');
+ * const grid = queryGrid('tbw-grid');
  * grid.gridConfig = {
  *   columns: [
  *     { field: 'name', header: 'Name', sortable: true },

package/lib/plugins/multi-sort/index.js

@@ -1,2 +1,2 @@
-function t(t,e){const r=t.querySelector?.(".tbw-sr-only");r&&(r.textContent="",requestAnimationFrame(()=>{r.textContent=e}))}const e='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',r={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:e,filterActive:e,print:"🖨️"};class i{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#t;get defaultConfig(){return{}}constructor(t={}){this.userConfig=t}attach(t){this.#t?.abort(),this.#t=new AbortController,this.grid=t,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#t?.abort(),this.#t=void 0}getPlugin(t){return this.grid?.getPlugin(t)}emit(t,e){this.grid?.dispatchEvent?.(new CustomEvent(t,{detail:e,bubbles:!0}))}emitCancelable(t,e){const r=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(r),r.defaultPrevented}on(t,e){this.grid?._pluginManager?.subscribe(this,t,e)}off(t){this.grid?._pluginManager?.unsubscribe(this,t)}emitPluginEvent(t,e){this.grid?._pluginManager?.emitPluginEvent(t,e)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#t?.signal??this.grid?.disconnectSignal}get gridIcons(){const t=this.grid?.gridConfig?.icons??{};return{...r,...t}}get isAnimationEnabled(){const t=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===t||"off"===t)return!1;if(!0===t||"on"===t)return!0;const e=this.gridElement;if(e){return"0"!==getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const t=this.gridElement;if(t){const e=getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(),r=parseInt(e,10);if(!isNaN(r))return r}return 200}resolveIcon(t,e){return void 0!==e?e:this.gridIcons[t]}setIcon(t,e){"string"==typeof e?t.innerHTML=e:e instanceof HTMLElement&&(t.innerHTML="",t.appendChild(e.cloneNode(!0)))}warn(t){var e,r;console.warn(`${e=this.gridElement.id,r=this.name,`[tbw-grid${e?`#${e}`:""}${r?`:${r}`:""}]`} ${t}`)}}function n(t,e){return null==t&&null==e?0:null==t?1:null==e?-1:"number"==typeof t&&"number"==typeof e?t-e:t instanceof Date&&e instanceof Date?t.getTime()-e.getTime():"boolean"==typeof t&&"boolean"==typeof e?t===e?0:t?-1:1:String(t).localeCompare(String(e))}function o(t,e){const r=t.findIndex(t=>t.field===e);return r>=0?r+1:void 0}function s(t,e){return t.find(t=>t.field===e)?.direction}class l extends i{name="multiSort";styles='@layer tbw-plugins{.header-cell[data-sort=asc]:after{content:"↑";margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.sort-indicator{margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.sort-index{font-size:var(--tbw-font-size-2xs, .7em);background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:var(--tbw-multi-sort-badge-size, 1em);height:var(--tbw-multi-sort-badge-size, 1em);display:inline-flex;align-items:center;justify-content:center;margin-left:var(--tbw-spacing-xs, .125em);font-weight:600}}';get defaultConfig(){return{maxSortColumns:3,showSortIndex:!0}}sortModel=[];cachedSortResult=null;get#e(){return this.grid}clearCoreSortState(){this.#e._sortState=null}detach(){this.sortModel=[],this.cachedSortResult=null}processRows(t){if(0===this.sortModel.length)return this.cachedSortResult=null,[...t];const e=this.#e;if(!e._isGridEditMode&&"number"==typeof e._activeEditRows&&-1!==e._activeEditRows&&this.cachedSortResult&&this.cachedSortResult.length===t.length)return[...this.cachedSortResult];const r=function(t,e,r){return e.length?[...t].sort((t,i)=>{for(const o of e){const e=r.find(t=>t.field===o.field),s=(e?.sortComparator??n)(t[o.field],i[o.field],t,i);if(0!==s)return"asc"===o.direction?s:-s}return 0}):[...t]}([...t],this.sortModel,[...this.columns]);return this.cachedSortResult=r,r}onHeaderClick(e){const r=this.columns.find(t=>t.field===e.field);if(!r?.sortable)return!1;const i=e.originalEvent.shiftKey,n=this.config.maxSortColumns??3;if(this.sortModel=function(t,e,r,i){const n=t.find(t=>t.field===e);return r?n?"asc"===n.direction?t.map(t=>t.field===e?{...t,direction:"desc"}:t):t.filter(t=>t.field!==e):t.length<i?[...t,{field:e,direction:"asc"}]:t:"asc"===n?.direction?[{field:e,direction:"desc"}]:"desc"===n?.direction?[]:[{field:e,direction:"asc"}]}(this.sortModel,e.field,i,n),this.clearCoreSortState(),this.emit("sort-change",{sortModel:[...this.sortModel]}),this.requestRender(),this.grid?.requestStateChange?.(),this.sortModel.length>0){const e=this.sortModel.map(t=>{const e=this.columns.find(e=>e.field===t.field);return`${e?.header??t.field} ${"asc"===t.direction?"ascending":"descending"}`});t(this.gridElement,`Sorted by ${e.join(", then ")}`)}else t(this.gridElement,"Sort cleared");return!0}afterRender(){const t=this.gridElement;if(!t)return;const e=!1!==this.config.showSortIndex;t.querySelectorAll(".header-row .cell[data-field]").forEach(t=>{const r=t.getAttribute("data-field");if(!r)return;const i=o(this.sortModel,r),n=s(this.sortModel,r),l=t.querySelector(".sort-index");if(l?.remove(),n){const r=t.querySelector('[part~="sort-indicator"], .sort-indicator');r?.remove(),t.setAttribute("data-sort",n);const o=document.createElement("span");o.className="sort-indicator",this.setIcon(o,this.resolveIcon("asc"===n?"sortAsc":"sortDesc"));const s=t.querySelector(".tbw-filter-btn"),l=t.querySelector(".resize-handle"),d=s??l;if(d?t.insertBefore(o,d):t.appendChild(o),e&&this.sortModel.length>1&&void 0!==i){const e=document.createElement("span");e.className="sort-index",e.textContent=String(i),o.nextSibling?t.insertBefore(e,o.nextSibling):t.appendChild(e)}}else{t.removeAttribute("data-sort");const e=t.querySelector('[part~="sort-indicator"], .sort-indicator');e?.remove()}})}getSortModel(){return[...this.sortModel]}setSortModel(e){if(this.sortModel=[...e],this.clearCoreSortState(),this.emit("sort-change",{sortModel:[...e]}),this.requestRender(),this.grid?.requestStateChange?.(),e.length>0){const r=e.map(t=>{const e=this.columns.find(e=>e.field===t.field);return`${e?.header??t.field} ${"asc"===t.direction?"ascending":"descending"}`});t(this.gridElement,`Sorted by ${r.join(", then ")}`)}}clearSort(){this.sortModel=[],this.clearCoreSortState(),this.emit("sort-change",{sortModel:[]}),this.requestRender(),this.grid?.requestStateChange?.(),t(this.gridElement,"Sort cleared")}getSortIndex(t){return o(this.sortModel,t)}getSortDirection(t){return s(this.sortModel,t)}getColumnState(t){const e=this.sortModel.findIndex(e=>e.field===t);if(-1===e)return;return{sort:{direction:this.sortModel[e].direction,priority:e}}}applyColumnState(t,e){if(!e.sort)return void(this.sortModel=this.sortModel.filter(e=>e.field!==t));const r=this.sortModel.findIndex(e=>e.field===t),i={field:t,direction:e.sort.direction};-1!==r?this.sortModel[r]=i:this.sortModel.splice(e.sort.priority,0,i),this.clearCoreSortState()}}export{l as MultiSortPlugin};
+function t(t,e){const r=t.querySelector?.(".tbw-sr-only");r&&(r.textContent="",requestAnimationFrame(()=>{r.textContent=e}))}function e(t,e){return`[tbw-grid${t?`#${t}`:""}${e?`:${e}`:""}]`}function r(t,r,i,n){return`${e(i,n)} ${t}: ${r}\n\n  → More info: ${function(t){return`https://toolboxjs.com/grid/errors#${t.toLowerCase()}`}(t)}`}const i='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',n={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:i,filterActive:i,print:"🖨️"};class o{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#t;get defaultConfig(){return{}}constructor(t={}){this.userConfig=t}attach(t){this.#t?.abort(),this.#t=new AbortController,this.grid=t,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#t?.abort(),this.#t=void 0}getPlugin(t){return this.grid?.getPlugin(t)}emit(t,e){this.grid?.dispatchEvent?.(new CustomEvent(t,{detail:e,bubbles:!0}))}emitCancelable(t,e){const r=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(r),r.defaultPrevented}on(t,e){this.grid?._pluginManager?.subscribe(this,t,e)}off(t){this.grid?._pluginManager?.unsubscribe(this,t)}emitPluginEvent(t,e){this.grid?._pluginManager?.emitPluginEvent(t,e)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#t?.signal??this.grid?.disconnectSignal}get gridIcons(){const t=this.grid?.gridConfig?.icons??{};return{...n,...t}}get isAnimationEnabled(){const t=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===t||"off"===t)return!1;if(!0===t||"on"===t)return!0;const e=this.gridElement;if(e){return"0"!==getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const t=this.gridElement;if(t){const e=getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(),r=parseInt(e,10);if(!isNaN(r))return r}return 200}resolveIcon(t,e){return void 0!==e?e:this.gridIcons[t]}setIcon(t,e){"string"==typeof e?t.innerHTML=e:e instanceof HTMLElement&&(t.innerHTML="",t.appendChild(e.cloneNode(!0)))}warn(t,i){void 0!==i?console.warn(r(t,i,this.gridElement.id,this.name)):console.warn(`${e(this.gridElement.id,this.name)} ${t}`)}throwDiagnostic(t,e){throw new Error(r(t,e,this.gridElement.id,this.name))}}function s(t,e){return null==t&&null==e?0:null==t?1:null==e?-1:"number"==typeof t&&"number"==typeof e?t-e:t instanceof Date&&e instanceof Date?t.getTime()-e.getTime():"boolean"==typeof t&&"boolean"==typeof e?t===e?0:t?-1:1:String(t).localeCompare(String(e))}function l(t,e){const r=t.findIndex(t=>t.field===e);return r>=0?r+1:void 0}function d(t,e){return t.find(t=>t.field===e)?.direction}class a extends o{name="multiSort";styles='@layer tbw-plugins{.header-cell[data-sort=asc]:after{content:"↑";margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.sort-indicator{margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.sort-index{font-size:var(--tbw-font-size-2xs, .7em);background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:var(--tbw-multi-sort-badge-size, 1em);height:var(--tbw-multi-sort-badge-size, 1em);display:inline-flex;align-items:center;justify-content:center;margin-left:var(--tbw-spacing-xs, .125em);font-weight:600}}';get defaultConfig(){return{maxSortColumns:3,showSortIndex:!0}}sortModel=[];cachedSortResult=null;get#e(){return this.grid}clearCoreSortState(){this.#e._sortState=null}detach(){this.sortModel=[],this.cachedSortResult=null}processRows(t){if(0===this.sortModel.length)return this.cachedSortResult=null,[...t];const e=this.#e;if(!e._isGridEditMode&&"number"==typeof e._activeEditRows&&-1!==e._activeEditRows&&this.cachedSortResult&&this.cachedSortResult.length===t.length)return[...this.cachedSortResult];const r=function(t,e,r){return e.length?[...t].sort((t,i)=>{for(const n of e){const e=r.find(t=>t.field===n.field),o=(e?.sortComparator??s)(t[n.field],i[n.field],t,i);if(0!==o)return"asc"===n.direction?o:-o}return 0}):[...t]}([...t],this.sortModel,[...this.columns]);return this.cachedSortResult=r,r}onHeaderClick(e){const r=this.columns.find(t=>t.field===e.field);if(!r?.sortable)return!1;const i=e.originalEvent.shiftKey,n=this.config.maxSortColumns??3;if(this.sortModel=function(t,e,r,i){const n=t.find(t=>t.field===e);return r?n?"asc"===n.direction?t.map(t=>t.field===e?{...t,direction:"desc"}:t):t.filter(t=>t.field!==e):t.length<i?[...t,{field:e,direction:"asc"}]:t:"asc"===n?.direction?[{field:e,direction:"desc"}]:"desc"===n?.direction?[]:[{field:e,direction:"asc"}]}(this.sortModel,e.field,i,n),this.clearCoreSortState(),this.emit("sort-change",{sortModel:[...this.sortModel]}),this.requestRender(),this.grid?.requestStateChange?.(),this.sortModel.length>0){const e=this.sortModel.map(t=>{const e=this.columns.find(e=>e.field===t.field);return`${e?.header??t.field} ${"asc"===t.direction?"ascending":"descending"}`});t(this.gridElement,`Sorted by ${e.join(", then ")}`)}else t(this.gridElement,"Sort cleared");return!0}afterRender(){const t=this.gridElement;if(!t)return;const e=!1!==this.config.showSortIndex;t.querySelectorAll(".header-row .cell[data-field]").forEach(t=>{const r=t.getAttribute("data-field");if(!r)return;const i=l(this.sortModel,r),n=d(this.sortModel,r),o=t.querySelector(".sort-index");if(o?.remove(),n){const r=t.querySelector('[part~="sort-indicator"], .sort-indicator');r?.remove(),t.setAttribute("data-sort",n);const o=document.createElement("span");o.className="sort-indicator",this.setIcon(o,this.resolveIcon("asc"===n?"sortAsc":"sortDesc"));const s=t.querySelector(".tbw-filter-btn"),l=t.querySelector(".resize-handle"),d=s??l;if(d?t.insertBefore(o,d):t.appendChild(o),e&&this.sortModel.length>1&&void 0!==i){const e=document.createElement("span");e.className="sort-index",e.textContent=String(i),o.nextSibling?t.insertBefore(e,o.nextSibling):t.appendChild(e)}}else{t.removeAttribute("data-sort");const e=t.querySelector('[part~="sort-indicator"], .sort-indicator');e?.remove()}})}getSortModel(){return[...this.sortModel]}setSortModel(e){if(this.sortModel=[...e],this.clearCoreSortState(),this.emit("sort-change",{sortModel:[...e]}),this.requestRender(),this.grid?.requestStateChange?.(),e.length>0){const r=e.map(t=>{const e=this.columns.find(e=>e.field===t.field);return`${e?.header??t.field} ${"asc"===t.direction?"ascending":"descending"}`});t(this.gridElement,`Sorted by ${r.join(", then ")}`)}}clearSort(){this.sortModel=[],this.clearCoreSortState(),this.emit("sort-change",{sortModel:[]}),this.requestRender(),this.grid?.requestStateChange?.(),t(this.gridElement,"Sort cleared")}getSortIndex(t){return l(this.sortModel,t)}getSortDirection(t){return d(this.sortModel,t)}getColumnState(t){const e=this.sortModel.findIndex(e=>e.field===t);if(-1===e)return;return{sort:{direction:this.sortModel[e].direction,priority:e}}}applyColumnState(t,e){if(!e.sort)return void(this.sortModel=this.sortModel.filter(e=>e.field!==t));const r=this.sortModel.findIndex(e=>e.field===t),i={field:t,direction:e.sort.direction};-1!==r?this.sortModel[r]=i:this.sortModel.splice(e.sort.priority,0,i),this.clearCoreSortState()}}export{a as MultiSortPlugin};
 //# sourceMappingURL=index.js.map