@toolbox-web/grid 3.8.1 → 3.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.js +1 -1
- package/all.js.map +1 -1
- package/index.js +1 -1
- package/index.js.map +1 -1
- package/lib/core/defaults.d.ts +1 -1
- package/lib/core/internal/aria.d.ts +1 -1
- package/lib/core/internal/config-manager.d.ts +0 -4
- package/lib/core/types.d.ts +6 -0
- package/lib/features/registry.js +1 -1
- package/lib/plugins/clipboard/clipboard-plugin.d.ts +2 -3
- package/lib/plugins/clipboard/index.js +1 -1
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/column-virtualization/index.js +1 -1
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/index.js +1 -1
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/editing/index.js +1 -1
- package/lib/plugins/editing/index.js.map +1 -1
- package/lib/plugins/export/index.js +1 -1
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/index.js +1 -1
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/index.js +1 -1
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/index.js +1 -1
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/index.js +1 -1
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js +1 -1
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/index.js +1 -1
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/index.js +1 -1
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js +1 -1
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/print/index.js +1 -1
- package/lib/plugins/print/index.js.map +1 -1
- package/lib/plugins/reorder-columns/index.js +1 -1
- package/lib/plugins/reorder-columns/index.js.map +1 -1
- package/lib/plugins/responsive/index.js +1 -1
- package/lib/plugins/responsive/index.js.map +1 -1
- package/lib/plugins/row-drag-drop/index.js +1 -1
- package/lib/plugins/row-drag-drop/index.js.map +1 -1
- package/lib/plugins/row-drag-drop/row-drag-drop-plugin.d.ts +1 -0
- package/lib/plugins/row-drag-drop/types.d.ts +3 -2
- package/lib/plugins/selection/index.js +1 -1
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/selection/selection-plugin.d.ts +2 -2
- package/lib/plugins/server-side/index.js +1 -1
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/shell/index.js +1 -1
- package/lib/plugins/shell/index.js.map +1 -1
- package/lib/plugins/sticky-rows/index.js +1 -1
- package/lib/plugins/sticky-rows/index.js.map +1 -1
- package/lib/plugins/tooltip/index.js +1 -1
- package/lib/plugins/tooltip/index.js.map +1 -1
- package/lib/plugins/tree/index.js +1 -1
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/index.js +1 -1
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js +1 -1
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/umd/grid.all.umd.js +1 -1
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +1 -1
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/clipboard.umd.js +1 -1
- package/umd/plugins/clipboard.umd.js.map +1 -1
- package/umd/plugins/editing.umd.js +1 -1
- package/umd/plugins/editing.umd.js.map +1 -1
- package/umd/plugins/grouping-rows.umd.js +1 -1
- package/umd/plugins/grouping-rows.umd.js.map +1 -1
- package/umd/plugins/row-drag-drop.umd.js +1 -1
- package/umd/plugins/row-drag-drop.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +1 -1
- package/umd/plugins/selection.umd.js.map +1 -1
- package/umd/plugins/tooltip.umd.js +1 -1
- package/umd/plugins/tooltip.umd.js.map +1 -1
- package/umd/plugins/tree.umd.js +1 -1
- package/umd/plugins/tree.umd.js.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e="editing",t="dragging";function r(e,t){if(!t.capped)return e;const r=t.spacerHeight-t.viewportHeight,n=t.rawContentHeight-t.viewportHeight;return r<=0||n<=0?e:e*r/n}function n(t,n){!function(e){if(!e._virtualization?.enabled)return;const{rowHeight:t,container:n,viewportEl:i,scrollMapping:o}=e._virtualization,s=n,a=i?.clientHeight??s?.clientHeight??0;if(!s||a<=0)return;const l=e._getVerticalScrollOffsets?.(e._focusRow)??{top:0,bottom:0};if(l.skipScroll)return;const d=Math.max(0,l.top),c=a-d-Math.max(0,l.bottom);if(c<=0)return;const u=e._focusRow*t,g=o?function(e,t){if(!t.capped)return e;const r=t.spacerHeight-t.viewportHeight,n=t.rawContentHeight-t.viewportHeight;if(r<=0||n<=0)return e;const i=e*n/r;return i<0?0:i>n?n:i}(s.scrollTop,o):s.scrollTop;if(u<g+d){const e=Math.max(0,u-d);s.scrollTop=o?r(e,o):e}else if(u+t>g+d+c){const e=Math.max(0,u-c+t-d);s.scrollTop=o?r(e,o):e}}(t);const i=function(e){return void 0!==e._activeEditRows&&-1!==e._activeEditRows}(t)||!!t._isGridEditMode;var o;i||t.refreshVirtualWindow(!1),(o=t._bodyEl)&&o.querySelectorAll(".cell-focus").forEach(e=>e.classList.remove("cell-focus")),Array.from(t._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach(e=>{e.setAttribute("aria-selected","false")});const s=function(e){const t=e._focusRow,r=e._virtualization.start??0,n=e._virtualization.end??e._rows.length;if(t<r||t>=n)return;const i=e._bodyEl.querySelectorAll(".data-grid-row")[t-r];let o=i?.children[e._focusCol];return o&&o.classList?.contains("cell")||(o=i?.querySelector(`.cell[data-col="${e._focusCol}"]`)??i?.querySelector(".cell[data-col]")),o?{rowEl:i??null,cell:o}:void 0}(t);if(!s)return;const{rowEl:a,cell:l}=s;l.classList.add("cell-focus"),l.setAttribute("aria-selected","true"),i&&!n?.forceHorizontalScroll||function(e,t,r,n){const i=e.querySelector(".tbw-scroll-area");if(!i)return;if(n?.forceScrollLeft)return void(i.scrollLeft=0);if(n?.forceScrollRight)return void(i.scrollLeft=i.scrollWidth-i.clientWidth);const o=e._getHorizontalScrollOffsets?.(t??void 0,r)??{left:0,right:0};if(o.skipScroll)return;const s=r.getBoundingClientRect(),a=i.getBoundingClientRect(),l=s.left-a.left+i.scrollLeft,d=l+s.width,c=i.scrollLeft+o.left,u=i.scrollLeft+i.clientWidth-o.right;l<c?i.scrollLeft=l-o.left:d>u&&(i.scrollLeft=d-i.clientWidth+o.right)}(t,a,l,n),function(t,r,n){if(n&&r.classList.contains(e)){const e=r.querySelector('input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])');if(e&&document.activeElement!==e)try{e.focus({preventScroll:!0})}catch{}return}if(n){if(r.contains(document.activeElement))return;r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1");try{r.focus({preventScroll:!0})}catch{}return}const i=document.activeElement;i instanceof HTMLElement&&i!==t&&"function"==typeof t.contains&&t.contains(i)&&!i.classList.contains("cell")&&!i.closest(".cell")||i===t||t.focus({preventScroll:!0})}(t,l,i)}var i={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:"",filterActive:"",print:"🖨️"};function o(e,t){return`[tbw-grid${e?`#${e}`:""}${t?`:${t}`:""}]`}function s(e,t,r,n){return`${o(r,n)} ${e}: ${t}\n\n → More info: ${function(e){return`https://toolboxjs.com/grid/errors#${e.toLowerCase()}`}(e)}`}var a="__otorp__|__retteGenifed__|__retteSenifed__|rotcurtsnoc|wodniw|sihTlabolg|labolg|ssecorp|noitcnuF|tropmi|lave|tcelfeR|yxorP|rorrE|stnemugra|tnemucod|noitacol|eikooc|egarotSlacol|egarotSnoisses|BDdexedni|hctef|tseuqeRpttHLMX|tekcoSbeW|rekroW|rekroWderahS|rekroWecivreS|renepo|tnerap|pot|semarf|fles".split("|").map(e=>e.split("").reverse().join("")),l=(new RegExp(`__(proto|defineGetter|defineSetter)|${a.slice(3).join("|")}|this\\b`),new Set("script|iframe|object|embed|form|input|button|textarea|select|link|meta|base|style|template|slot|portal|frame|frameset|applet|noscript|noembed|plaintext|xmp|listing|math".split("|"))),d=/^on\w+$/i,c=new Set("href|src|action|formaction|data|srcdoc|xlink:href|poster|srcset".split("|")),u=/^\s*(javascript|vbscript|data|blob):/i;function g(e){const t=document.createElement("template");return e&&"string"==typeof e&&(t.innerHTML=e,function(e){const t=[],r=e.querySelectorAll("*");for(const n of r){const e=n.tagName.toLowerCase();if(l.has(e)){t.push(n);continue}if(("svg"===e||"http://www.w3.org/2000/svg"===n.namespaceURI)&&Array.from(n.attributes).some(e=>d.test(e.name)||"href"===e.name||"xlink:href"===e.name)){t.push(n);continue}const r=[];for(const t of n.attributes){const e=t.name.toLowerCase();d.test(e)?r.push(t.name):"is"!==e?(c.has(e)&&u.test(t.value)||"style"===e&&/expression\s*\(|javascript:|behavior\s*:/i.test(t.value))&&r.push(t.name):r.push(t.name)}r.forEach(e=>n.removeAttribute(e))}t.forEach(e=>e.remove())}(t.content)),t.content}var h,f=class{static dependencies;static manifest;aliases;version="3.8.1";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}get resolvedConfig(){return this.#e?this.config:{...this.defaultConfig,...this.userConfig}}mergeConfigsFrom(e){if(0===e.length)return;const t={...this.userConfig},r={};for(const n of Object.keys(t))r[n]=this;for(const n of e){const e=n.userConfig;for(const[i,o]of Object.entries(e)){if(void 0===o)continue;if(!(i in t)){t[i]=o,r[i]=n;continue}if(t[i]===o)continue;const e=r[i]?.constructor.name??this.constructor.name,a=n.constructor.name,l=s("TBW025",`Cannot merge plugin configs for "${this.name}": conflicting value for "${i}" supplied by both ${e} and ${a}. Pass the option on a single instance, or remove the duplicate.`,void 0,this.name);throw new Error(l)}}Object.assign(this.userConfig,t)}refreshUserConfigFrom(e){const t=this.userConfig,r={...e.userConfig};for(const n of Object.keys(t))delete t[n];Object.assign(t,r)}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const r=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(r),r.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}broadcast(e,t){this.emitPluginEvent(e,t),this.emit(e,t)}queryBoolean(e,t=null){const r=this.grid?.query?.(e,t);return Array.isArray(r)?r.some(Boolean):!!r}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.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...i,...e}}t(e,t){return this.grid?.effectiveConfig?.locale?.[e]??t}get translate(){return(e,t)=>this.t(e,t)}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;return!t||"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),r=parseInt(t,10);if(!isNaN(r))return r}return 200}setIcon(e,t,r){e.dataset.icon=t.replace(/([A-Z])/g,"-$1").toLowerCase(),"collapse"===t?e.dataset.expanded="":"expand"===t&&delete e.dataset.expanded;const n=this.#t(t,r);var i,o;void 0!==n?"string"==typeof n?(i=e,(o=n)&&"string"==typeof o?-1!==o.indexOf("<")||-1!==o.indexOf("&")?i.replaceChildren(g(o)):i.textContent=o:i.replaceChildren()):n instanceof HTMLElement&&e.replaceChildren(n.cloneNode(!0)):e.innerHTML=""}#t(e,t){return void 0!==t?t:this.grid?.gridConfig?.icons?.[e]}updateSortIndicator(e,t){e.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove();const r=document.createElement("span");r.setAttribute("part","sort-indicator"),r.className="sort-indicator",t?(e.setAttribute("aria-sort","asc"===t?"ascending":"descending"),e.setAttribute("data-sort",t),this.setIcon(r,"asc"===t?"sortAsc":"sortDesc")):(e.setAttribute("aria-sort","none"),e.removeAttribute("data-sort"),this.setIcon(r,"sortNone"));const n=e.querySelector(".tbw-filter-btn")??e.querySelector(".resize-handle");return n?e.insertBefore(r,n):e.appendChild(r),r}warn(e,t){void 0!==t?console.warn(s(e,t,this.gridElement.id,this.name)):console.warn(`${o(this.gridElement.id,this.name)} ${e}`)}throwDiagnostic(e,t){throw new Error(s(e,t,this.gridElement.id,this.name))}};function m(){return"function"==typeof HTMLElement.prototype?.showPopover}function p(e){return"inline"===e.effectiveConfig?.a11y?.dragAlternatives||(void 0===h&&(h=globalThis.matchMedia?.("(hover: none)")??null),h?.matches??!1)}function v(e,t){let r=null,n=!1,i=!1;const o=new AbortController;function s(){n&&r&&(n=!1,m()&&r.hidePopover(),r.hidden=!0)}return document.addEventListener("pointerdown",e=>{n&&r&&!e.composedPath().includes(r)&&s()},{capture:!0,signal:o.signal}),document.addEventListener("keydown",e=>{"Escape"===e.key&&s()},{capture:!0,signal:o.signal}),{get element(){return r},open(a,l,d){if(i||0===d.length)return;r||(r=function(){const r=document.createElement("div");return r.id=e,r.className=t,r.setAttribute("popover","manual"),r.setAttribute("role","group"),r.hidden=!0,r.addEventListener("focusout",e=>{const t=e.relatedTarget;t instanceof Node&&!r.contains(t)&&s()},{signal:o.signal}),r}());const c=a.closest("tbw-grid, [data-tbw-grid]")??document.body;r.parentNode!==c&&c.appendChild(r),r.setAttribute("aria-label",l),r.replaceChildren();for(const e of d){const n=document.createElement("button");n.type="button",n.className=`${t}-item`,n.textContent=e.label,n.disabled=!0===e.disabled,n.addEventListener("click",()=>{s(),e.run()}),r.appendChild(n)}r.hidden=!1,!n&&m()&&r.showPopover(),n=!0,function(e){if(!r)return;const t=e.getBoundingClientRect(),n=r.getBoundingClientRect(),i=Math.max(4,Math.min(t.left,window.innerWidth-n.width-4)),o=t.bottom+6,s=o+n.height<=window.innerHeight?o:Math.max(4,t.top-6-n.height);r.style.left=`${Math.round(i)}px`,r.style.top=`${Math.round(s)}px`}(a),r.querySelector("button:not([disabled])")?.focus()},close:s,dispose(){i=!0,s(),o.abort(),r?.remove(),r=null}}}function b(e){if(!0===e.lockPosition)return!1;if(!0===e.utility)return!1;const t=e.meta??{};return!0!==t.lockPosition&&!0!==t.suppressMovable}function w(e,t,r){if(t===r)return e;if(t<0||t>=e.length)return e;if(r<0||r>e.length)return e;const n=[...e],[i]=n.splice(t,1);return n.splice(r,0,i),n}var C="canMoveColumn",y="getContextMenuItems",x=class extends f{name="reorderColumns";aliases=["reorder"];styles='@layer tbw-plugins{.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";background:var(--tbw-reorder-indicator,var(--tbw-color-accent));z-index:1;width:2px;position:absolute;top:0;bottom:0;left:0}.header-row>.cell.drop-after:after{content:"";background:var(--tbw-reorder-indicator,var(--tbw-color-accent));z-index:1;width:2px;position:absolute;top:0;bottom:0;right:0}.cell.flip-animating{transition:transform var(--tbw-animation-duration,.2s) ease-out;will-change:transform;z-index:1}@keyframes reorder-fade-in{0%{opacity:0}to{opacity:1}}.cell.fade-animating{animation:reorder-fade-in var(--tbw-animation-duration,.2s) ease-out backwards}.header-row>.cell>.tbw-col-move-btn,.header-group-row>.cell>.tbw-col-move-btn{min-width:var(--tbw-touch-target-min,24px);min-height:var(--tbw-touch-target-min,24px);background:var(--tbw-color-header-bg);color:var(--tbw-color-header-fg,inherit);font:inherit;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius,.25rem);cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--tbw-transition-duration,.12s) var(--tbw-transition-ease,ease);flex-shrink:0;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}:is(.header-row>.cell>.tbw-col-move-btn,.header-group-row>.cell>.tbw-col-move-btn):hover{border-color:var(--tbw-color-accent)}.header-row>.cell:hover>.tbw-col-move-btn,.header-row>.cell:focus-within>.tbw-col-move-btn,.header-row>.cell.cell-focus>.tbw-col-move-btn,.header-group-row>.cell:hover>.tbw-col-move-btn,.header-group-row>.cell:focus-within>.tbw-col-move-btn{opacity:1;pointer-events:auto}@media (hover:none){.header-row>.cell>.tbw-col-move-btn,.header-group-row>.cell>.tbw-col-move-btn{opacity:1;pointer-events:auto}}.tbw-col-move-menu{background:var(--tbw-color-panel-bg,light-dark(#fff,#1e1e1e));min-width:10rem;color:var(--tbw-color-panel-fg,light-dark(#1a1a1a,#eaeaea));border:1px solid var(--tbw-color-border,light-dark(#d0d0d0,#3a3a3a));border-radius:var(--tbw-border-radius,.25rem);box-shadow:var(--tbw-shadow-panel,0 4px 12px light-dark(#0003,#00000080));z-index:10001;flex-direction:column;margin:0;padding:4px;display:flex;position:fixed}.tbw-col-move-menu[hidden]{display:none}.tbw-col-move-menu-item{min-height:var(--tbw-touch-target-min,24px);text-align:start;color:inherit;font:inherit;border-radius:min(var(--tbw-border-radius,.25rem), 6px);cursor:pointer;background:0 0;border:0;padding:4px 8px}.tbw-col-move-menu-item:hover:not(:disabled){background:var(--tbw-color-row-hover,light-dark(#00000010,#ffffff14))}.tbw-col-move-menu-item:disabled{opacity:.5;cursor:default}}';static manifest={queries:[{type:C,description:"Authoritative check for whether a column may be reordered (honors lockPosition)."},{type:y,description:"Contributes the click-only column move actions (WCAG 2.2 SC 2.5.7) to the header context menu."}]};handleQuery(e){if(e.type===C){const t=e.context;return t?b(t):void 0}if(e.type===y){const t=e.context;if(!t?.isHeader)return;return this.#r(t.field)?.map((e,t)=>({id:`reorder-${t}`,label:e.label,disabled:e.disabled,action:e.run,order:50+t}))}}get defaultConfig(){return{animation:"flip"}}get animationType(){return!!this.isAnimationEnabled&&(void 0!==this.config.animation?this.config.animation:"flip")}get animationDuration(){return void 0!==this.config.animationDuration?this.config.animationDuration:super.animationDuration}isDragging=!1;draggedField=null;draggedIndex=null;dropIndex=null;draggedGroupFields=[];originalColumnOrder=null;moveMenu=null;get#n(){return this.grid}canMoveColumnWithPlugins(e){return!(!e||!b(e))&&!this.grid.query(C,e).includes(!1)}#i(e,t,r){this.#o(e,`Move column ${String(r?.header??t)}`,e=>this.#s(e,t))}#o(e,t,r){const n=e.querySelector(":scope > .tbw-col-move-btn");if(!p(this.grid))return void n?.remove();if(n)return;const i=document.createElement("button");i.type="button",i.className="tbw-col-move-btn",i.tabIndex=-1,i.draggable=!1,i.textContent="↔",i.setAttribute("aria-label",t),i.addEventListener("pointerdown",e=>e.stopPropagation()),i.addEventListener("click",e=>{e.stopPropagation(),e.preventDefault(),r(i)}),e.appendChild(i)}#r(e){const t=this.columns.find(t=>t.field===e);if(!this.canMoveColumnWithPlugins(t))return null;const r=this.getColumnOrder(),n=r.indexOf(e);if(-1===n)return null;const i=r.findIndex(e=>this.#a(e));let o=-1;for(let s=r.length-1;s>=0;s--)if(this.#a(r[s])){o=s;break}return[{label:"Move left",disabled:!this.#l(r,n,-1),run:()=>this.moveColumn(e,n-1)},{label:"Move right",disabled:!this.#l(r,n,1),run:()=>this.moveColumn(e,n+1)},{label:"Move to start",disabled:-1===i||i===n,run:()=>this.moveColumn(e,i)},{label:"Move to end",disabled:-1===o||o===n,run:()=>this.moveColumn(e,o)}]}#s(e,t){const r=this.#r(t);if(!r)return;const n=this.columns.find(e=>e.field===t);this.moveMenu??=v("tbw-col-move-menu","tbw-col-move-menu"),this.moveMenu.open(e,`Move column ${String(n?.header??t)}`,r)}#d(e){const t=this.visibleColumns,r=[];return e.querySelectorAll(".header-group-row > .cell[data-group]").forEach(e=>{const t=e.getAttribute("data-group");if(!t)return;const n=this.getGroupFragmentFields(e,t);n.length>0&&r.push({id:t,fields:n})}),r.sort((e,r)=>t.findIndex(t=>t.field===e.fields[0])-t.findIndex(e=>e.field===r.fields[0]))}#c(e,t){if(!t.every(e=>this.#a(e)))return null;const r=this.#d(e),n=r.findIndex(e=>e.fields[0]===t[0]);if(-1===n)return null;const i=e=>!!e&&e.fields.every(e=>this.#a(e)),o=(e,t)=>e<=t&&r.slice(e,t+1).every(i),s=(e,r)=>()=>this.executeGroupBlockMove(t,e.fields,r);return[{label:"Move left",disabled:!i(r[n-1]),run:s(r[n-1]??{fields:t},!0)},{label:"Move right",disabled:!i(r[n+1]),run:s(r[n+1]??{fields:t},!1)},{label:"Move to start",disabled:0===n||!o(0,n-1),run:s(r[0],!0)},{label:"Move to end",disabled:n===r.length-1||!o(n+1,r.length-1),run:s(r[r.length-1],!1)}]}#u(e,t,r){const n=this.gridElement;if(!n)return;const i=this.#c(n,r);i&&(this.moveMenu??=v("tbw-col-move-menu","tbw-col-move-menu"),this.moveMenu.open(e,`Move group ${this.#g(t)}`,i))}#g(e){return e.textContent?.replace("↔","").trim()||(e.getAttribute("data-group")??"")}#a(e){return this.canMoveColumnWithPlugins(this.columns.find(t=>t.field===e))}#l(e,t,r){const n=t+r;return!(n<0||n>=e.length)&&this.#a(e[n])}clearDragClasses(){this.gridElement?.querySelectorAll(".header-row > .cell, .header-group-row > .cell").forEach(e=>{e.classList.remove(t,"drop-target","drop-before","drop-after")})}attach(e){super.attach(e),this.gridElement.addEventListener("column-reorder-request",e=>{const t=e.detail;t?.field&&"number"==typeof t.toIndex&&this.moveColumn(t.field,t.toIndex)},{signal:this.disconnectSignal})}detach(){this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,this.draggedGroupFields=[],this.moveMenu?.dispose(),this.moveMenu=null}afterRender(){const e=this.gridElement;e&&(this.originalColumnOrder||(this.originalColumnOrder=this.columns.map(e=>e.field)),e.querySelectorAll(".header-row > .cell").forEach(e=>{const r=e,n=r.getAttribute("data-field");if(!n)return;const i=this.columns.find(e=>e.field===n);if(!this.canMoveColumnWithPlugins(i))return r.draggable=!1,void r.querySelector(":scope > .tbw-col-move-btn")?.remove();r.draggable=!0,this.#i(r,n,i),r.getAttribute("data-dragstart-bound")||(r.setAttribute("data-dragstart-bound","true"),r.addEventListener("contextmenu",e=>{this.grid.getPluginByName("contextMenu")||(e.preventDefault(),this.#s(r,n))}),r.addEventListener("dragstart",e=>{const i=this.getColumnOrder().indexOf(n);this.isDragging=!0,this.draggedField=n,this.draggedIndex=i,this.draggedGroupFields=[],e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",n)),r.classList.add(t)}),r.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,this.draggedGroupFields=[],this.clearDragClasses()}),r.addEventListener("dragover",e=>{if(e.preventDefault(),!this.isDragging)return;if(this.draggedField===n&&0===this.draggedGroupFields.length)return;if(this.draggedGroupFields.includes(n))return;const i=r.getBoundingClientRect(),o=i.left+i.width/2,s=this.getColumnOrder().indexOf(n);if(this.dropIndex=e.clientX<o?s:s+1,this.clearDragClasses(),this.draggedGroupFields.length>0)for(const r of this.draggedGroupFields)this.gridElement?.querySelector(`.header-row > .cell[data-field="${r}"]`)?.classList.add(t);else this.draggedField&&this.gridElement?.querySelector(`.header-row > .cell[data-field="${this.draggedField}"]`)?.classList.add(t);r.classList.add("drop-target"),r.classList.toggle("drop-before",e.clientX<o),r.classList.toggle("drop-after",e.clientX>=o)}),r.addEventListener("dragleave",()=>{r.classList.remove("drop-target","drop-before","drop-after")}),r.addEventListener("drop",e=>{if(e.preventDefault(),!this.isDragging)return;if(this.draggedGroupFields.length>0){if(this.draggedGroupFields.includes(n))return;const t=r.getBoundingClientRect(),i=e.clientX<t.left+t.width/2;return void this.executeGroupBlockMove(this.draggedGroupFields,[n],i)}const t=this.draggedField,i=this.draggedIndex,o=this.dropIndex;if(!this.isDragging||null===t||null===i||null===o)return;const s=o>i?o-1:o,a=w(this.getColumnOrder(),i,s),l={field:t,fromIndex:i,toIndex:s,columnOrder:a};this.emitCancelable("column-move",l)||this.updateColumnOrder(a)}))}),queueMicrotask(()=>this.setupGroupHeaderDrag(e)))}setupGroupHeaderDrag(e){e.querySelectorAll(".header-group-row > .cell[data-group]").forEach(r=>{const n=r,i=n.getAttribute("data-group");if(!i||i.startsWith("__implicit__"))return;const o=this.getGroupFragmentFields(n,i);0!==o.length&&o.every(e=>{const t=this.columns.find(t=>t.field===e);return this.canMoveColumnWithPlugins(t)})&&(n.draggable=!0,n.style.cursor="grab",this.#o(n,`Move group ${this.#g(n)}`,e=>this.#u(e,n,o)),n.getAttribute("data-group-drag-bound")||(n.setAttribute("data-group-drag-bound","true"),n.addEventListener("contextmenu",e=>{e.preventDefault(),e.stopPropagation(),this.#u(n,n,o)}),n.addEventListener("dragstart",r=>{this.isDragging=!0,this.draggedField=null,this.draggedIndex=null,this.draggedGroupFields=[...o],r.dataTransfer&&(r.dataTransfer.effectAllowed="move",r.dataTransfer.setData("text/plain",`group:${i}`)),n.classList.add(t);for(const n of o)e.querySelector(`.header-row > .cell[data-field="${n}"]`)?.classList.add(t)}),n.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,this.draggedGroupFields=[],this.clearDragClasses()}),n.addEventListener("dragover",e=>{if(e.preventDefault(),!this.isDragging)return;if(this.draggedGroupFields.length>0&&this.draggedGroupFields.length===o.length&&this.draggedGroupFields.every(e=>o.includes(e)))return;const t=n.getBoundingClientRect(),r=t.left+t.width/2,i=e.clientX<r;this.clearDragClasses(),n.classList.add("drop-target"),n.classList.toggle("drop-before",i),n.classList.toggle("drop-after",!i)}),n.addEventListener("dragleave",()=>{n.classList.remove("drop-target","drop-before","drop-after")}),n.addEventListener("drop",e=>{if(e.preventDefault(),!this.isDragging)return;const t=n.getBoundingClientRect(),r=e.clientX<t.left+t.width/2;if(this.draggedGroupFields.length>0){if(this.draggedGroupFields.length===o.length&&this.draggedGroupFields.every(e=>o.includes(e)))return;this.executeGroupBlockMove(this.draggedGroupFields,o,r)}else if(this.draggedField){const e=this.getColumnOrder(),t=r?o[0]:o[o.length-1],n=e.indexOf(this.draggedField),i=r?e.indexOf(t):e.indexOf(t)+1;if(-1===n||-1===i)return;const s=i>n?i-1:i,a=w(e,n,s);this.emitCancelable("column-move",{field:this.draggedField,fromIndex:n,toIndex:s,columnOrder:a})||this.updateColumnOrder(a)}})))})}getGroupFragmentFields(e,t){const r=e.style.gridColumn,n=/(\d+)\s*\/\s*span\s+(\d+)/.exec(r);if(!n)return[];const i=parseInt(n[1],10),o=parseInt(n[2],10),s=this.visibleColumns,a=[];for(let l=i-1;l<i-1+o&&l<s.length;l++){const e=s[l];e&&a.push(e.field)}return a}executeGroupBlockMove(e,t,r){const n=this.getColumnOrder(),i=n.filter(t=>!e.includes(t)),o=r?t[0]:t[t.length-1],s=i.indexOf(o);if(-1===s)return;const a=r?s:s+1,l=n.filter(t=>e.includes(t));i.splice(a,0,...l),this.emitCancelable("column-move",{field:e[0],fromIndex:n.indexOf(e[0]),toIndex:a,columnOrder:i})||this.updateColumnOrder(i)}onKeyDown(e){if(!e.altKey||"ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;const t=this.#n,r=t._focusCol,i=t._visibleColumns;if(r<0||r>=i.length)return;const o=i[r];if(!this.canMoveColumnWithPlugins(o))return;const s=this.getColumnOrder(),a=s.indexOf(o.field);if(-1===a)return;const l="ArrowLeft"===e.key?a-1:a+1;if(l<0||l>=s.length)return;const d=i.find(e=>e.field===s[l]);return this.canMoveColumnWithPlugins(d)?(this.moveColumn(o.field,l),t._focusCol=l,n(this.#n),e.preventDefault(),e.stopPropagation(),!0):void 0}getColumnOrder(){return this.grid.getColumnOrder()}moveColumn(e,t){const r=this.getColumnOrder(),n=r.indexOf(e);if(-1===n)return;const i=w(r,n,t);this.emitCancelable("column-move",{field:e,fromIndex:n,toIndex:t,columnOrder:i})||this.updateColumnOrder(i)}setColumnOrder(e){this.updateColumnOrder(e)}resetColumnOrder(){const e=this.originalColumnOrder??this.columns.map(e=>e.field);this.updateColumnOrder(e)}captureHeaderPositions(){const e=/* @__PURE__ */new Map;return this.gridElement?.querySelectorAll(".header-row > .cell[data-field]").forEach(t=>{const r=t.getAttribute("data-field");r&&e.set(r,t.getBoundingClientRect().left)}),e}animateFLIP(e){const t=this.gridElement;if(!t||0===e.size)return;const r=/* @__PURE__ */new Map;if(t.querySelectorAll(".header-row > .cell[data-field]").forEach(t=>{const n=t.getAttribute("data-field");if(!n)return;const i=e.get(n);if(void 0===i)return;const o=i-t.getBoundingClientRect().left;Math.abs(o)>1&&r.set(n,o)}),0===r.size)return;const n=[];if(t.querySelectorAll(".cell[data-field]").forEach(e=>{const t=r.get(e.getAttribute("data-field")??"");if(void 0!==t){const r=e;r.style.transform=`translateX(${t}px)`,n.push(r)}}),0===n.length)return;t.offsetHeight;const i=this.animationDuration;requestAnimationFrame(()=>{n.forEach(e=>{e.classList.add("flip-animating"),e.style.transform=""}),setTimeout(()=>{n.forEach(e=>{e.style.transform="",e.classList.remove("flip-animating")})},i+50)})}animateFade(e){const t=this.gridElement;if(!t)return void e();const r=this.captureHeaderPositions();e();const n=/* @__PURE__ */new Set;if(t.querySelectorAll(".header-row > .cell[data-field]").forEach(e=>{const t=e.getAttribute("data-field");if(!t)return;const i=r.get(t);if(void 0===i)return;const o=e.getBoundingClientRect().left;Math.abs(i-o)>1&&n.add(t)}),0===n.size)return;const i=[];if(t.querySelectorAll(".cell[data-field]").forEach(e=>{const t=e.getAttribute("data-field");if(t&&n.has(t)){const t=e;t.classList.add("fade-animating"),i.push(t)}}),0===i.length)return;const o=this.animationDuration;setTimeout(()=>{i.forEach(e=>e.classList.remove("fade-animating"))},o+50)}updateColumnOrder(e){const t=this.animationType;if("flip"===t&&this.gridElement){const t=this.captureHeaderPositions();this.grid.setColumnOrder(e),"function"==typeof this.grid.forceLayout?this.grid.forceLayout().then(()=>{this.animateFLIP(t)}):requestAnimationFrame(()=>{this.animateFLIP(t)})}else"fade"===t?this.animateFade(()=>this.grid.setColumnOrder(e)):this.grid.setColumnOrder(e);this.grid.requestStateChange?.()}};export{x as ReorderPlugin};
|
|
1
|
+
var e="editing",t="dragging";function r(e,t){if(!t.capped)return e;const r=t.spacerHeight-t.viewportHeight,n=t.rawContentHeight-t.viewportHeight;return r<=0||n<=0?e:e*r/n}function n(t,n){!function(e){if(!e._virtualization?.enabled)return;const{rowHeight:t,container:n,viewportEl:i,scrollMapping:o}=e._virtualization,s=n,a=i?.clientHeight??s?.clientHeight??0;if(!s||a<=0)return;const l=e._getVerticalScrollOffsets?.(e._focusRow)??{top:0,bottom:0};if(l.skipScroll)return;const d=Math.max(0,l.top),c=a-d-Math.max(0,l.bottom);if(c<=0)return;const u=e._focusRow*t,g=o?function(e,t){if(!t.capped)return e;const r=t.spacerHeight-t.viewportHeight,n=t.rawContentHeight-t.viewportHeight;if(r<=0||n<=0)return e;const i=e*n/r;return i<0?0:i>n?n:i}(s.scrollTop,o):s.scrollTop;if(u<g+d){const e=Math.max(0,u-d);s.scrollTop=o?r(e,o):e}else if(u+t>g+d+c){const e=Math.max(0,u-c+t-d);s.scrollTop=o?r(e,o):e}}(t);const i=function(e){return void 0!==e._activeEditRows&&-1!==e._activeEditRows}(t)||!!t._isGridEditMode;var o;i||t.refreshVirtualWindow(!1),(o=t._bodyEl)&&o.querySelectorAll(".cell-focus").forEach(e=>e.classList.remove("cell-focus")),Array.from(t._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach(e=>{e.setAttribute("aria-selected","false")});const s=function(e){const t=e._focusRow,r=e._virtualization.start??0,n=e._virtualization.end??e._rows.length;if(t<r||t>=n)return;const i=e._bodyEl.querySelectorAll(".data-grid-row")[t-r];let o=i?.children[e._focusCol];return o&&o.classList?.contains("cell")||(o=i?.querySelector(`.cell[data-col="${e._focusCol}"]`)??i?.querySelector(".cell[data-col]")),o?{rowEl:i??null,cell:o}:void 0}(t);if(!s)return;const{rowEl:a,cell:l}=s;l.classList.add("cell-focus"),l.setAttribute("aria-selected","true"),i&&!n?.forceHorizontalScroll||function(e,t,r,n){const i=e.querySelector(".tbw-scroll-area");if(!i)return;if(n?.forceScrollLeft)return void(i.scrollLeft=0);if(n?.forceScrollRight)return void(i.scrollLeft=i.scrollWidth-i.clientWidth);const o=e._getHorizontalScrollOffsets?.(t??void 0,r)??{left:0,right:0};if(o.skipScroll)return;const s=r.getBoundingClientRect(),a=i.getBoundingClientRect(),l=s.left-a.left+i.scrollLeft,d=l+s.width,c=i.scrollLeft+o.left,u=i.scrollLeft+i.clientWidth-o.right;l<c?i.scrollLeft=l-o.left:d>u&&(i.scrollLeft=d-i.clientWidth+o.right)}(t,a,l,n),function(t,r,n){if(n&&r.classList.contains(e)){const e=r.querySelector('input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])');if(e&&document.activeElement!==e)try{e.focus({preventScroll:!0})}catch{}return}if(n){if(r.contains(document.activeElement))return;r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1");try{r.focus({preventScroll:!0})}catch{}return}const i=document.activeElement;i instanceof HTMLElement&&i!==t&&"function"==typeof t.contains&&t.contains(i)&&!i.classList.contains("cell")&&!i.closest(".cell")||i===t||t.focus({preventScroll:!0})}(t,l,i)}var i={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:"",filterActive:"",print:"🖨️"};function o(e,t){return`[tbw-grid${e?`#${e}`:""}${t?`:${t}`:""}]`}function s(e,t,r,n){return`${o(r,n)} ${e}: ${t}\n\n → More info: ${function(e){return`https://toolboxjs.com/grid/errors#${e.toLowerCase()}`}(e)}`}var a="__otorp__|__retteGenifed__|__retteSenifed__|rotcurtsnoc|wodniw|sihTlabolg|labolg|ssecorp|noitcnuF|tropmi|lave|tcelfeR|yxorP|rorrE|stnemugra|tnemucod|noitacol|eikooc|egarotSlacol|egarotSnoisses|BDdexedni|hctef|tseuqeRpttHLMX|tekcoSbeW|rekroW|rekroWderahS|rekroWecivreS|renepo|tnerap|pot|semarf|fles".split("|").map(e=>e.split("").reverse().join("")),l=(new RegExp(`__(proto|defineGetter|defineSetter)|${a.slice(3).join("|")}|this\\b`),new Set("script|iframe|object|embed|form|input|button|textarea|select|link|meta|base|style|template|slot|portal|frame|frameset|applet|noscript|noembed|plaintext|xmp|listing|math".split("|"))),d=/^on\w+$/i,c=new Set("href|src|action|formaction|data|srcdoc|xlink:href|poster|srcset".split("|")),u=/^\s*(javascript|vbscript|data|blob):/i;function g(e){const t=document.createElement("template");return e&&"string"==typeof e&&(t.innerHTML=e,function(e){const t=[],r=e.querySelectorAll("*");for(const n of r){const e=n.tagName.toLowerCase();if(l.has(e)){t.push(n);continue}if(("svg"===e||"http://www.w3.org/2000/svg"===n.namespaceURI)&&Array.from(n.attributes).some(e=>d.test(e.name)||"href"===e.name||"xlink:href"===e.name)){t.push(n);continue}const r=[];for(const t of n.attributes){const e=t.name.toLowerCase();d.test(e)?r.push(t.name):"is"!==e?(c.has(e)&&u.test(t.value)||"style"===e&&/expression\s*\(|javascript:|behavior\s*:/i.test(t.value))&&r.push(t.name):r.push(t.name)}r.forEach(e=>n.removeAttribute(e))}t.forEach(e=>e.remove())}(t.content)),t.content}var h,f=class{static dependencies;static manifest;aliases;version="3.8.3";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}get resolvedConfig(){return this.#e?this.config:{...this.defaultConfig,...this.userConfig}}mergeConfigsFrom(e){if(0===e.length)return;const t={...this.userConfig},r={};for(const n of Object.keys(t))r[n]=this;for(const n of e){const e=n.userConfig;for(const[i,o]of Object.entries(e)){if(void 0===o)continue;if(!(i in t)){t[i]=o,r[i]=n;continue}if(t[i]===o)continue;const e=r[i]?.constructor.name??this.constructor.name,a=n.constructor.name,l=s("TBW025",`Cannot merge plugin configs for "${this.name}": conflicting value for "${i}" supplied by both ${e} and ${a}. Pass the option on a single instance, or remove the duplicate.`,void 0,this.name);throw new Error(l)}}Object.assign(this.userConfig,t)}refreshUserConfigFrom(e){const t=this.userConfig,r={...e.userConfig};for(const n of Object.keys(t))delete t[n];Object.assign(t,r)}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const r=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(r),r.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}broadcast(e,t){this.emitPluginEvent(e,t),this.emit(e,t)}queryBoolean(e,t=null){const r=this.grid?.query?.(e,t);return Array.isArray(r)?r.some(Boolean):!!r}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.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...i,...e}}t(e,t){return this.grid?.effectiveConfig?.locale?.[e]??t}get translate(){return(e,t)=>this.t(e,t)}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;return!t||"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),r=parseInt(t,10);if(!isNaN(r))return r}return 200}setIcon(e,t,r){e.dataset.icon=t.replace(/([A-Z])/g,"-$1").toLowerCase(),"collapse"===t?e.dataset.expanded="":"expand"===t&&delete e.dataset.expanded;const n=this.#t(t,r);var i,o;void 0!==n?"string"==typeof n?(i=e,(o=n)&&"string"==typeof o?-1!==o.indexOf("<")||-1!==o.indexOf("&")?i.replaceChildren(g(o)):i.textContent=o:i.replaceChildren()):n instanceof HTMLElement&&e.replaceChildren(n.cloneNode(!0)):e.innerHTML=""}#t(e,t){return void 0!==t?t:this.grid?.gridConfig?.icons?.[e]}updateSortIndicator(e,t){e.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove();const r=document.createElement("span");r.setAttribute("part","sort-indicator"),r.className="sort-indicator",t?(e.setAttribute("aria-sort","asc"===t?"ascending":"descending"),e.setAttribute("data-sort",t),this.setIcon(r,"asc"===t?"sortAsc":"sortDesc")):(e.setAttribute("aria-sort","none"),e.removeAttribute("data-sort"),this.setIcon(r,"sortNone"));const n=e.querySelector(".tbw-filter-btn")??e.querySelector(".resize-handle");return n?e.insertBefore(r,n):e.appendChild(r),r}warn(e,t){void 0!==t?console.warn(s(e,t,this.gridElement.id,this.name)):console.warn(`${o(this.gridElement.id,this.name)} ${e}`)}throwDiagnostic(e,t){throw new Error(s(e,t,this.gridElement.id,this.name))}};function m(){return"function"==typeof HTMLElement.prototype?.showPopover}function p(e){return"inline"===e.effectiveConfig?.a11y?.dragAlternatives||(void 0===h&&(h=globalThis.matchMedia?.("(hover: none)")??null),h?.matches??!1)}function v(e,t){let r=null,n=!1,i=!1;const o=new AbortController;function s(){n&&r&&(n=!1,m()&&r.hidePopover(),r.hidden=!0)}return document.addEventListener("pointerdown",e=>{n&&r&&!e.composedPath().includes(r)&&s()},{capture:!0,signal:o.signal}),document.addEventListener("keydown",e=>{"Escape"===e.key&&s()},{capture:!0,signal:o.signal}),{get element(){return r},open(a,l,d){if(i||0===d.length)return;r||(r=function(){const r=document.createElement("div");return r.id=e,r.className=t,r.setAttribute("popover","manual"),r.setAttribute("role","group"),r.hidden=!0,r.addEventListener("focusout",e=>{const t=e.relatedTarget;t instanceof Node&&!r.contains(t)&&s()},{signal:o.signal}),r}());const c=a.closest("tbw-grid, [data-tbw-grid]")??document.body;r.parentNode!==c&&c.appendChild(r),r.setAttribute("aria-label",l),r.replaceChildren();for(const e of d){const n=document.createElement("button");n.type="button",n.className=`${t}-item`,n.textContent=e.label,n.disabled=!0===e.disabled,n.addEventListener("click",()=>{s(),e.run()}),r.appendChild(n)}r.hidden=!1,!n&&m()&&r.showPopover(),n=!0,function(e){if(!r)return;const t=e.getBoundingClientRect(),n=r.getBoundingClientRect(),i=Math.max(4,Math.min(t.left,window.innerWidth-n.width-4)),o=t.bottom+6,s=o+n.height<=window.innerHeight?o:Math.max(4,t.top-6-n.height);r.style.left=`${Math.round(i)}px`,r.style.top=`${Math.round(s)}px`}(a),r.querySelector("button:not([disabled])")?.focus()},close:s,dispose(){i=!0,s(),o.abort(),r?.remove(),r=null}}}function b(e){if(!0===e.lockPosition)return!1;if(!0===e.utility)return!1;const t=e.meta??{};return!0!==t.lockPosition&&!0!==t.suppressMovable}function w(e,t,r){if(t===r)return e;if(t<0||t>=e.length)return e;if(r<0||r>e.length)return e;const n=[...e],[i]=n.splice(t,1);return n.splice(r,0,i),n}var C="canMoveColumn",y="getContextMenuItems",x=class extends f{name="reorderColumns";aliases=["reorder"];styles='@layer tbw-plugins{.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";background:var(--tbw-reorder-indicator,var(--tbw-color-accent));z-index:1;width:2px;position:absolute;top:0;bottom:0;left:0}.header-row>.cell.drop-after:after{content:"";background:var(--tbw-reorder-indicator,var(--tbw-color-accent));z-index:1;width:2px;position:absolute;top:0;bottom:0;right:0}.cell.flip-animating{transition:transform var(--tbw-animation-duration,.2s) ease-out;will-change:transform;z-index:1}@keyframes reorder-fade-in{0%{opacity:0}to{opacity:1}}.cell.fade-animating{animation:reorder-fade-in var(--tbw-animation-duration,.2s) ease-out backwards}.header-row>.cell>.tbw-col-move-btn,.header-group-row>.cell>.tbw-col-move-btn{min-width:var(--tbw-touch-target-min,24px);min-height:var(--tbw-touch-target-min,24px);background:var(--tbw-color-header-bg);color:var(--tbw-color-header-fg,inherit);font:inherit;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius,.25rem);cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--tbw-transition-duration,.12s) var(--tbw-transition-ease,ease);flex-shrink:0;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}:is(.header-row>.cell>.tbw-col-move-btn,.header-group-row>.cell>.tbw-col-move-btn):hover{border-color:var(--tbw-color-accent)}.header-row>.cell:hover>.tbw-col-move-btn,.header-row>.cell:focus-within>.tbw-col-move-btn,.header-row>.cell.cell-focus>.tbw-col-move-btn,.header-group-row>.cell:hover>.tbw-col-move-btn,.header-group-row>.cell:focus-within>.tbw-col-move-btn{opacity:1;pointer-events:auto}@media (hover:none){.header-row>.cell>.tbw-col-move-btn,.header-group-row>.cell>.tbw-col-move-btn{opacity:1;pointer-events:auto}}.tbw-col-move-menu{background:var(--tbw-color-panel-bg,light-dark(#fff,#1e1e1e));min-width:10rem;color:var(--tbw-color-panel-fg,light-dark(#1a1a1a,#eaeaea));border:1px solid var(--tbw-color-border,light-dark(#d0d0d0,#3a3a3a));border-radius:var(--tbw-border-radius,.25rem);box-shadow:var(--tbw-shadow-panel,0 4px 12px light-dark(#0003,#00000080));z-index:10001;flex-direction:column;margin:0;padding:4px;display:flex;position:fixed}.tbw-col-move-menu[hidden]{display:none}.tbw-col-move-menu-item{min-height:var(--tbw-touch-target-min,24px);text-align:start;color:inherit;font:inherit;border-radius:min(var(--tbw-border-radius,.25rem), 6px);cursor:pointer;background:0 0;border:0;padding:4px 8px}.tbw-col-move-menu-item:hover:not(:disabled){background:var(--tbw-color-row-hover,light-dark(#00000010,#ffffff14))}.tbw-col-move-menu-item:disabled{opacity:.5;cursor:default}}';static manifest={queries:[{type:C,description:"Authoritative check for whether a column may be reordered (honors lockPosition)."},{type:y,description:"Contributes the click-only column move actions (WCAG 2.2 SC 2.5.7) to the header context menu."}]};handleQuery(e){if(e.type===C){const t=e.context;return t?b(t):void 0}if(e.type===y){const t=e.context;if(!t?.isHeader)return;return this.#r(t.field)?.map((e,t)=>({id:`reorder-${t}`,label:e.label,disabled:e.disabled,action:e.run,order:50+t}))}}get defaultConfig(){return{animation:"flip"}}get animationType(){return!!this.isAnimationEnabled&&(void 0!==this.config.animation?this.config.animation:"flip")}get animationDuration(){return void 0!==this.config.animationDuration?this.config.animationDuration:super.animationDuration}isDragging=!1;draggedField=null;draggedIndex=null;dropIndex=null;draggedGroupFields=[];originalColumnOrder=null;moveMenu=null;get#n(){return this.grid}canMoveColumnWithPlugins(e){return!(!e||!b(e))&&!this.grid.query(C,e).includes(!1)}#i(e,t,r){this.#o(e,`Move column ${String(r?.header??t)}`,e=>this.#s(e,t))}#o(e,t,r){const n=e.querySelector(":scope > .tbw-col-move-btn");if(!p(this.grid))return void n?.remove();if(n)return;const i=document.createElement("button");i.type="button",i.className="tbw-col-move-btn",i.tabIndex=-1,i.draggable=!1,i.textContent="↔",i.setAttribute("aria-label",t),i.addEventListener("pointerdown",e=>e.stopPropagation()),i.addEventListener("click",e=>{e.stopPropagation(),e.preventDefault(),r(i)}),e.appendChild(i)}#r(e){const t=this.columns.find(t=>t.field===e);if(!this.canMoveColumnWithPlugins(t))return null;const r=this.getColumnOrder(),n=r.indexOf(e);if(-1===n)return null;const i=r.findIndex(e=>this.#a(e));let o=-1;for(let s=r.length-1;s>=0;s--)if(this.#a(r[s])){o=s;break}return[{label:"Move left",disabled:!this.#l(r,n,-1),run:()=>this.moveColumn(e,n-1)},{label:"Move right",disabled:!this.#l(r,n,1),run:()=>this.moveColumn(e,n+1)},{label:"Move to start",disabled:-1===i||i===n,run:()=>this.moveColumn(e,i)},{label:"Move to end",disabled:-1===o||o===n,run:()=>this.moveColumn(e,o)}]}#s(e,t){const r=this.#r(t);if(!r)return;const n=this.columns.find(e=>e.field===t);this.moveMenu??=v("tbw-col-move-menu","tbw-col-move-menu"),this.moveMenu.open(e,`Move column ${String(n?.header??t)}`,r)}#d(e){const t=this.visibleColumns,r=[];return e.querySelectorAll(".header-group-row > .cell[data-group]").forEach(e=>{const t=e.getAttribute("data-group");if(!t)return;const n=this.getGroupFragmentFields(e,t);n.length>0&&r.push({id:t,fields:n})}),r.sort((e,r)=>t.findIndex(t=>t.field===e.fields[0])-t.findIndex(e=>e.field===r.fields[0]))}#c(e,t){if(!t.every(e=>this.#a(e)))return null;const r=this.#d(e),n=r.findIndex(e=>e.fields[0]===t[0]);if(-1===n)return null;const i=e=>!!e&&e.fields.every(e=>this.#a(e)),o=(e,t)=>e<=t&&r.slice(e,t+1).every(i),s=(e,r)=>()=>this.executeGroupBlockMove(t,e.fields,r);return[{label:"Move left",disabled:!i(r[n-1]),run:s(r[n-1]??{fields:t},!0)},{label:"Move right",disabled:!i(r[n+1]),run:s(r[n+1]??{fields:t},!1)},{label:"Move to start",disabled:0===n||!o(0,n-1),run:s(r[0],!0)},{label:"Move to end",disabled:n===r.length-1||!o(n+1,r.length-1),run:s(r[r.length-1],!1)}]}#u(e,t,r){const n=this.gridElement;if(!n)return;const i=this.#c(n,r);i&&(this.moveMenu??=v("tbw-col-move-menu","tbw-col-move-menu"),this.moveMenu.open(e,`Move group ${this.#g(t)}`,i))}#g(e){return e.textContent?.replace("↔","").trim()||(e.getAttribute("data-group")??"")}#a(e){return this.canMoveColumnWithPlugins(this.columns.find(t=>t.field===e))}#l(e,t,r){const n=t+r;return!(n<0||n>=e.length)&&this.#a(e[n])}clearDragClasses(){this.gridElement?.querySelectorAll(".header-row > .cell, .header-group-row > .cell").forEach(e=>{e.classList.remove(t,"drop-target","drop-before","drop-after")})}attach(e){super.attach(e),this.gridElement.addEventListener("column-reorder-request",e=>{const t=e.detail;t?.field&&"number"==typeof t.toIndex&&this.moveColumn(t.field,t.toIndex)},{signal:this.disconnectSignal})}detach(){this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,this.draggedGroupFields=[],this.moveMenu?.dispose(),this.moveMenu=null}afterRender(){const e=this.gridElement;e&&(this.originalColumnOrder||(this.originalColumnOrder=this.columns.map(e=>e.field)),e.querySelectorAll(".header-row > .cell").forEach(e=>{const r=e,n=r.getAttribute("data-field");if(!n)return;const i=this.columns.find(e=>e.field===n);if(!this.canMoveColumnWithPlugins(i))return r.draggable=!1,void r.querySelector(":scope > .tbw-col-move-btn")?.remove();r.draggable=!0,this.#i(r,n,i),r.getAttribute("data-dragstart-bound")||(r.setAttribute("data-dragstart-bound","true"),r.addEventListener("contextmenu",e=>{this.grid.getPluginByName("contextMenu")||(e.preventDefault(),this.#s(r,n))}),r.addEventListener("dragstart",e=>{const i=this.getColumnOrder().indexOf(n);this.isDragging=!0,this.draggedField=n,this.draggedIndex=i,this.draggedGroupFields=[],e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",n)),r.classList.add(t)}),r.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,this.draggedGroupFields=[],this.clearDragClasses()}),r.addEventListener("dragover",e=>{if(e.preventDefault(),!this.isDragging)return;if(this.draggedField===n&&0===this.draggedGroupFields.length)return;if(this.draggedGroupFields.includes(n))return;const i=r.getBoundingClientRect(),o=i.left+i.width/2,s=this.getColumnOrder().indexOf(n);if(this.dropIndex=e.clientX<o?s:s+1,this.clearDragClasses(),this.draggedGroupFields.length>0)for(const r of this.draggedGroupFields)this.gridElement?.querySelector(`.header-row > .cell[data-field="${r}"]`)?.classList.add(t);else this.draggedField&&this.gridElement?.querySelector(`.header-row > .cell[data-field="${this.draggedField}"]`)?.classList.add(t);r.classList.add("drop-target"),r.classList.toggle("drop-before",e.clientX<o),r.classList.toggle("drop-after",e.clientX>=o)}),r.addEventListener("dragleave",()=>{r.classList.remove("drop-target","drop-before","drop-after")}),r.addEventListener("drop",e=>{if(e.preventDefault(),!this.isDragging)return;if(this.draggedGroupFields.length>0){if(this.draggedGroupFields.includes(n))return;const t=r.getBoundingClientRect(),i=e.clientX<t.left+t.width/2;return void this.executeGroupBlockMove(this.draggedGroupFields,[n],i)}const t=this.draggedField,i=this.draggedIndex,o=this.dropIndex;if(!this.isDragging||null===t||null===i||null===o)return;const s=o>i?o-1:o,a=w(this.getColumnOrder(),i,s),l={field:t,fromIndex:i,toIndex:s,columnOrder:a};this.emitCancelable("column-move",l)||this.updateColumnOrder(a)}))}),queueMicrotask(()=>this.setupGroupHeaderDrag(e)))}setupGroupHeaderDrag(e){e.querySelectorAll(".header-group-row > .cell[data-group]").forEach(r=>{const n=r,i=n.getAttribute("data-group");if(!i||i.startsWith("__implicit__"))return;const o=this.getGroupFragmentFields(n,i);0!==o.length&&o.every(e=>{const t=this.columns.find(t=>t.field===e);return this.canMoveColumnWithPlugins(t)})&&(n.draggable=!0,n.style.cursor="grab",this.#o(n,`Move group ${this.#g(n)}`,e=>this.#u(e,n,o)),n.getAttribute("data-group-drag-bound")||(n.setAttribute("data-group-drag-bound","true"),n.addEventListener("contextmenu",e=>{e.preventDefault(),e.stopPropagation(),this.#u(n,n,o)}),n.addEventListener("dragstart",r=>{this.isDragging=!0,this.draggedField=null,this.draggedIndex=null,this.draggedGroupFields=[...o],r.dataTransfer&&(r.dataTransfer.effectAllowed="move",r.dataTransfer.setData("text/plain",`group:${i}`)),n.classList.add(t);for(const n of o)e.querySelector(`.header-row > .cell[data-field="${n}"]`)?.classList.add(t)}),n.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,this.draggedGroupFields=[],this.clearDragClasses()}),n.addEventListener("dragover",e=>{if(e.preventDefault(),!this.isDragging)return;if(this.draggedGroupFields.length>0&&this.draggedGroupFields.length===o.length&&this.draggedGroupFields.every(e=>o.includes(e)))return;const t=n.getBoundingClientRect(),r=t.left+t.width/2,i=e.clientX<r;this.clearDragClasses(),n.classList.add("drop-target"),n.classList.toggle("drop-before",i),n.classList.toggle("drop-after",!i)}),n.addEventListener("dragleave",()=>{n.classList.remove("drop-target","drop-before","drop-after")}),n.addEventListener("drop",e=>{if(e.preventDefault(),!this.isDragging)return;const t=n.getBoundingClientRect(),r=e.clientX<t.left+t.width/2;if(this.draggedGroupFields.length>0){if(this.draggedGroupFields.length===o.length&&this.draggedGroupFields.every(e=>o.includes(e)))return;this.executeGroupBlockMove(this.draggedGroupFields,o,r)}else if(this.draggedField){const e=this.getColumnOrder(),t=r?o[0]:o[o.length-1],n=e.indexOf(this.draggedField),i=r?e.indexOf(t):e.indexOf(t)+1;if(-1===n||-1===i)return;const s=i>n?i-1:i,a=w(e,n,s);this.emitCancelable("column-move",{field:this.draggedField,fromIndex:n,toIndex:s,columnOrder:a})||this.updateColumnOrder(a)}})))})}getGroupFragmentFields(e,t){const r=e.style.gridColumn,n=/(\d+)\s*\/\s*span\s+(\d+)/.exec(r);if(!n)return[];const i=parseInt(n[1],10),o=parseInt(n[2],10),s=this.visibleColumns,a=[];for(let l=i-1;l<i-1+o&&l<s.length;l++){const e=s[l];e&&a.push(e.field)}return a}executeGroupBlockMove(e,t,r){const n=this.getColumnOrder(),i=n.filter(t=>!e.includes(t)),o=r?t[0]:t[t.length-1],s=i.indexOf(o);if(-1===s)return;const a=r?s:s+1,l=n.filter(t=>e.includes(t));i.splice(a,0,...l),this.emitCancelable("column-move",{field:e[0],fromIndex:n.indexOf(e[0]),toIndex:a,columnOrder:i})||this.updateColumnOrder(i)}onKeyDown(e){if(!e.altKey||"ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;const t=this.#n,r=t._focusCol,i=t._visibleColumns;if(r<0||r>=i.length)return;const o=i[r];if(!this.canMoveColumnWithPlugins(o))return;const s=this.getColumnOrder(),a=s.indexOf(o.field);if(-1===a)return;const l="ArrowLeft"===e.key?a-1:a+1;if(l<0||l>=s.length)return;const d=i.find(e=>e.field===s[l]);return this.canMoveColumnWithPlugins(d)?(this.moveColumn(o.field,l),t._focusCol=l,n(this.#n),e.preventDefault(),e.stopPropagation(),!0):void 0}getColumnOrder(){return this.grid.getColumnOrder()}moveColumn(e,t){const r=this.getColumnOrder(),n=r.indexOf(e);if(-1===n)return;const i=w(r,n,t);this.emitCancelable("column-move",{field:e,fromIndex:n,toIndex:t,columnOrder:i})||this.updateColumnOrder(i)}setColumnOrder(e){this.updateColumnOrder(e)}resetColumnOrder(){const e=this.originalColumnOrder??this.columns.map(e=>e.field);this.updateColumnOrder(e)}captureHeaderPositions(){const e=/* @__PURE__ */new Map;return this.gridElement?.querySelectorAll(".header-row > .cell[data-field]").forEach(t=>{const r=t.getAttribute("data-field");r&&e.set(r,t.getBoundingClientRect().left)}),e}animateFLIP(e){const t=this.gridElement;if(!t||0===e.size)return;const r=/* @__PURE__ */new Map;if(t.querySelectorAll(".header-row > .cell[data-field]").forEach(t=>{const n=t.getAttribute("data-field");if(!n)return;const i=e.get(n);if(void 0===i)return;const o=i-t.getBoundingClientRect().left;Math.abs(o)>1&&r.set(n,o)}),0===r.size)return;const n=[];if(t.querySelectorAll(".cell[data-field]").forEach(e=>{const t=r.get(e.getAttribute("data-field")??"");if(void 0!==t){const r=e;r.style.transform=`translateX(${t}px)`,n.push(r)}}),0===n.length)return;t.offsetHeight;const i=this.animationDuration;requestAnimationFrame(()=>{n.forEach(e=>{e.classList.add("flip-animating"),e.style.transform=""}),setTimeout(()=>{n.forEach(e=>{e.style.transform="",e.classList.remove("flip-animating")})},i+50)})}animateFade(e){const t=this.gridElement;if(!t)return void e();const r=this.captureHeaderPositions();e();const n=/* @__PURE__ */new Set;if(t.querySelectorAll(".header-row > .cell[data-field]").forEach(e=>{const t=e.getAttribute("data-field");if(!t)return;const i=r.get(t);if(void 0===i)return;const o=e.getBoundingClientRect().left;Math.abs(i-o)>1&&n.add(t)}),0===n.size)return;const i=[];if(t.querySelectorAll(".cell[data-field]").forEach(e=>{const t=e.getAttribute("data-field");if(t&&n.has(t)){const t=e;t.classList.add("fade-animating"),i.push(t)}}),0===i.length)return;const o=this.animationDuration;setTimeout(()=>{i.forEach(e=>e.classList.remove("fade-animating"))},o+50)}updateColumnOrder(e){const t=this.animationType;if("flip"===t&&this.gridElement){const t=this.captureHeaderPositions();this.grid.setColumnOrder(e),"function"==typeof this.grid.forceLayout?this.grid.forceLayout().then(()=>{this.animateFLIP(t)}):requestAnimationFrame(()=>{this.animateFLIP(t)})}else"fade"===t?this.animateFade(()=>this.grid.setColumnOrder(e)):this.grid.setColumnOrder(e);this.grid.requestStateChange?.()}};export{x as ReorderPlugin};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|