@gp-grid/vue 0.16.1 → 0.17.0

package/README.md

@@ -3,9 +3,9 @@
 <div align="center">
     <a href="https://www.gp-grid.io">
         <picture>
-        <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/GioPat/gp-grid-docs/refs/heads/master/public/logo-light.svg"/>
-        <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/GioPat/gp-grid-docs/refs/heads/master/public/logo-dark.svg"/>
-        <img width="50%" alt="AG Grid Logo" src="https://raw.githubusercontent.com/GioPat/gp-grid-docs/refs/heads/master/public/logo-dark.svg"/>
+        <source media="(prefers-color-scheme: dark)" srcset="https://www.gp-grid.io/logo-light.svg"/>
+        <source media="(prefers-color-scheme: light)" srcset="https://www.gp-grid.io/logo-dark.svg"/>
+        <img width="50%" alt="gp-grid Logo" src="https://www.gp-grid.io/logo-dark.svg"/>
         </picture>
     </a>
     <div align="center">

package/dist/index.js

@@ -1 +1 @@
-import{Fragment as e,computed as t,createBlock as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createTextVNode as o,createVNode as s,defineComponent as c,h as l,normalizeClass as u,normalizeStyle as d,onMounted as f,onUnmounted as p,openBlock as m,ref as h,renderList as g,resolveDynamicComponent as _,shallowRef as v,toDisplayString as y,unref as b,vModelText as x,watch as S,watchEffect as C,withDirectives as w,withModifiers as T}from"vue";import{GridCore as E,GridCore as D,applyInstruction as O,buildCellClasses as k,buildCellClasses as A,calculateColumnPositions as j,calculateFillHandlePosition as M,calculateFilterPopupPosition as N,calculateScaledColumnPositions as P,createClientDataSource as F,createClientDataSource as I,createDataSourceFromArray as L,createDataSourceFromArray as R,createInitialState as z,createInitialState as B,createMutableClientDataSource as V,createMutableClientDataSource as ee,createServerDataSource as te,findColumnAtX as ne,formatCellValue as re,getFieldValue as ie,getFieldValue as H,getTotalWidth as ae,getTotalWidth as oe,gridStyles as U,isCellActive as W,isCellActive as G,isCellEditing as K,isCellEditing as q,isCellInFillPreview as se,isCellInFillPreview as J,isCellSelected as ce,isCellSelected as Y,isRowVisible as le,scrollCellIntoView as ue}from"@gp-grid/core";function X(e){let t=v(B(e));return{state:t,applyInstructions:e=>{let n=t.value,r=new Map(n.slots),i=new Map(n.headers),a={pendingScrollTop:null};for(let t of e){let e=O(t,r,i);e&&Object.assign(a,e)}a.slots=r,a.headers=i,t.value={...n,...a}},reset:()=>{t.value=B()}}}function Z(e,t){let n=h(null);function r(r,i){n.value&&clearInterval(n.value),n.value=setInterval(()=>{let n=e.value;n&&(n.scrollTop+=i,n.scrollLeft+=r,t?.())},16)}function i(){n.value&&=(clearInterval(n.value),null)}return p(()=>{i()}),{startAutoScroll:r,stopAutoScroll:i}}function de(e,t,n,r){let{activeCell:i,selectionRange:a,editingCell:o,filterPopupOpen:s,rowHeight:c,headerHeight:l,columnPositions:u,visibleColumnsWithIndices:d,slots:f,rowsWrapperOffset:m}=r,g=h({isDragging:!1,dragType:null,fillSourceRange:null,fillTarget:null,columnResize:null,columnMove:null,rowDrag:null}),_=null,v=null,y=null,b=null,x=null,C=e=>{e.preventDefault()},{startAutoScroll:w,stopAutoScroll:T}=Z(t,()=>{let t=e.value;if(_&&t?.input){let e=E();e&&(t.input.handleDragMove(_,e),g.value=t.input.getDragState())}});S([()=>l,()=>c,u,d],()=>{let t=e.value;if(t?.input){let e=d.value;t.input.updateDeps({getHeaderHeight:()=>l,getRowHeight:()=>c,getColumnPositions:()=>u.value,getColumnCount:()=>e.length,getOriginalColumnIndex:t=>{let n=e[t];return n?n.originalIndex:t}})}},{immediate:!0});function E(){let e=t.value;if(!e)return null;let n=e.getBoundingClientRect();return{top:n.top,left:n.left,width:n.width,height:n.height,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft}}function D(e){return{clientX:e.clientX,clientY:e.clientY,button:e.button,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,pointerId:e.pointerId,pointerType:e.pointerType}}function O(){v?.();let n=t=>{t.preventDefault();let n=e.value,r=E();if(!n?.input||!r)return;let i=D(t);_=i;let a=n.input.handleDragMove(i,r);a&&(a.autoScroll?w(a.autoScroll.dx,a.autoScroll.dy):T(),g.value=n.input.getDragState())},r=()=>{try{let t=e.value;t?.input&&t.input.handleDragEnd()}finally{let i=e.value;g.value=i?.input?i.input.getDragState():{isDragging:!1,dragType:null,fillSourceRange:null,fillTarget:null,columnResize:null,columnMove:null,rowDrag:null},_=null,T(),document.removeEventListener(`touchmove`,C),x!==null&&t.value&&(t.value.style.overflow=x,x=null),document.removeEventListener(`pointermove`,n),document.removeEventListener(`pointerup`,r),document.removeEventListener(`pointercancel`,r),v=null}};document.addEventListener(`pointermove`,n,{passive:!1}),document.addEventListener(`pointerup`,r),document.addEventListener(`pointercancel`,r),v=()=>{document.removeEventListener(`pointermove`,n),document.removeEventListener(`pointerup`,r),document.removeEventListener(`pointercancel`,r)}}function k(){y!==null&&(clearTimeout(y),y=null,e.value?.input?.cancelPendingRowDrag()),b=null}function A(n,r,i){let a=e.value;if(!a?.input)return;let o=a.input.handleCellMouseDown(n,r,D(i));if(o.focusContainer&&t.value?.focus(),o.startDrag===`selection`)a.input.startSelectionDrag(),g.value=a.input.getDragState(),O();else if(o.startDrag===`row-drag`)g.value=a.input.getDragState(),O();else if(o.startDrag===`row-drag-pending`){k(),b={pointerId:i.pointerId,target:i.currentTarget??i.target};let e=i.clientX,n=i.clientY,r=t=>{let r=t.clientX-e,i=t.clientY-n;(Math.abs(r)>10||Math.abs(i)>10)&&(k(),s())},o=()=>{k(),s()},s=()=>{document.removeEventListener(`pointermove`,r),document.removeEventListener(`pointerup`,o),document.removeEventListener(`pointercancel`,o)};document.addEventListener(`pointermove`,r),document.addEventListener(`pointerup`,o,{once:!0}),document.addEventListener(`pointercancel`,o,{once:!0}),y=setTimeout(()=>{y=null,s();let e=b;if(b=null,a.input.confirmPendingRowDrag()){if(t.value&&(x=t.value.style.overflow,t.value.style.overflow=`hidden`),document.addEventListener(`touchmove`,C,{passive:!1}),e)try{e.target.setPointerCapture(e.pointerId)}catch{}g.value=a.input.getDragState(),O()}},300)}}function j(t,n){let r=e.value;r?.input&&r.input.handleCellDoubleClick(t,n)}function M(t){let n=e.value;if(!n?.input)return;let r=n.input.handleFillHandleMouseDown(i.value,a.value,D(t));if(r.preventDefault&&t.preventDefault(),r.stopPropagation&&t.stopPropagation(),r.startDrag===`fill`){try{t.target.setPointerCapture(t.pointerId)}catch{}g.value=n.input.getDragState(),O()}}function N(t,r){let i=e.value;if(!i?.input)return;let a=n.value[t];if(!a)return;let o=a.colId??a.field;i.input.handleHeaderClick(o,r.shiftKey)}function P(t,n,r,i){let a=e.value;if(!a?.input)return;let o=a.input.handleHeaderMouseDown(t,n,r,D(i));if(o.preventDefault&&i.preventDefault(),o.stopPropagation&&i.stopPropagation(),o.startDrag===`column-move`){try{i.target.setPointerCapture(i.pointerId)}catch{}g.value=a.input.getDragState(),O()}}function F(t,n,r){let i=e.value;if(!i?.input)return;let a=i.input.handleHeaderResizeMouseDown(t,n,D(r));a.preventDefault&&r.preventDefault(),a.stopPropagation&&r.stopPropagation(),a.startDrag===`column-resize`&&(g.value=i.input.getDragState(),O())}function I(n){let r=e.value,a=t.value;if(!r?.input)return;let l=r.input.handleKeyDown({key:n.key,shiftKey:n.shiftKey,ctrlKey:n.ctrlKey,metaKey:n.metaKey},i.value,o.value,s.value);l.preventDefault&&n.preventDefault(),l.scrollToCell&&a&&ue(r,a,l.scrollToCell.row,c,f.value,m.value)}function L(t){let n=e.value;if(n===null||o.value!==null||s.value)return;let r=t.clipboardData?.getData(`text/plain`)??``;n.pasteClipboardText(r)&&t.preventDefault()}function R(n,r){let i=e.value,a=t.value;if(!i?.input||!a)return;let o=i.input.handleWheel(n.deltaY,n.deltaX,r);o&&(n.preventDefault(),a.scrollTop+=o.dy,a.scrollLeft+=o.dx)}return p(()=>{v?.(),v=null,k(),T(),document.removeEventListener(`touchmove`,C),x!==null&&t.value&&(t.value.style.overflow=x,x=null)}),{handleCellMouseDown:A,handleCellDoubleClick:j,handleFillHandleMouseDown:M,handleHeaderClick:N,handleHeaderMouseDown:P,handleHeaderResizeMouseDown:F,handleKeyDown:I,handlePaste:L,handleWheel:R,dragState:g}}const fe=e=>{let{activeCell:n,selectionRange:r,slots:i,columns:a,visibleColumnsWithIndices:o,columnPositions:s,columnWidths:c,rowHeight:l}=e;return{fillHandlePosition:t(()=>M({activeCell:n.value,selectionRange:r.value,slots:i.value,columns:a.value,visibleColumnsWithIndices:o.value,columnPositions:s.value,columnWidths:c.value,rowHeight:l}))}};function pe(e,t){let{onClose:n,ignoreSelector:r=`.gp-grid-filter-icon`}=t,i=null,a=null;f(()=>{i=t=>{let i=t.target;r&&i.closest(r)||e.value&&!e.value.contains(i)&&n()},a=e=>{e.key===`Escape`&&n()},requestAnimationFrame(()=>{i&&document.addEventListener(`pointerdown`,i),a&&document.addEventListener(`keydown`,a)})}),p(()=>{i&&document.removeEventListener(`pointerdown`,i),a&&document.removeEventListener(`keydown`,a)})}function Q(e,t=`and`){let n=h([...e]);return{conditions:n,combination:h(t),updateCondition:(e,t)=>{let r=[...n.value];r[e]={...r[e],...t},n.value=r},addCondition:e=>{n.value=[...n.value,{operator:e,value:``,valueTo:``,nextOperator:`and`}]},removeCondition:e=>{n.value=n.value.filter((t,n)=>n!==e)}}}const me={class:`gp-grid-filter-content gp-grid-filter-text`},he={key:0,class:`gp-grid-filter-mode-toggle`},ge={key:1,class:`gp-grid-filter-info`},_e={class:`gp-grid-filter-actions`},ve=[`disabled`],ye={class:`gp-grid-filter-list`},be={key:0,class:`gp-grid-filter-option`},xe=[`checked`],Se=[`checked`,`onChange`],Ce={key:0,class:`gp-grid-filter-combination`},we=[`onClick`],Te=[`onClick`],Ee={class:`gp-grid-filter-row`},De=[`value`,`autofocus`,`onChange`],Oe=[`value`],ke=[`value`,`onInput`],Ae=[`onClick`],je=c({__name:`TextFilterContent`,props:{distinctValues:{},valueFormatter:{type:Function},currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`contains`,label:`Contains`},{value:`notContains`,label:`Does not contain`},{value:`equals`,label:`Equals`},{value:`notEquals`,label:`Does not equal`},{value:`startsWith`,label:`Starts with`},{value:`endsWith`,label:`Ends with`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Is not blank`}],c=n,l=o;function d(e){return c.valueFormatter?c.valueFormatter(e):Array.isArray(e)?e.join(`, `):String(e??``)}function f(e){return d(e)}let p=t(()=>{let e=new Set,t=[];for(let n of c.distinctValues){if(n==null||n===``||Array.isArray(n)&&n.length===0)continue;let r=d(n);e.has(r)||(e.add(r),t.push({key:r,label:f(n)}))}return t.sort((e,t)=>{let n=parseFloat(e.label),r=parseFloat(t.label);return!isNaN(n)&&!isNaN(r)?n-r:e.label.localeCompare(t.label,void 0,{numeric:!0,sensitivity:`base`})}),t}),_=t(()=>p.value.length>100),v=h(t(()=>{if(!c.currentFilter?.conditions[0])return _.value?`condition`:`values`;let e=c.currentFilter.conditions[0];return e.selectedValues&&e.selectedValues.size>0?`values`:`condition`}).value),S=t(()=>c.currentFilter?.conditions[0]?c.currentFilter.conditions[0].selectedValues??new Set:new Set),C=t(()=>c.currentFilter?.conditions[0]?c.currentFilter.conditions[0].includeBlank??!0:!0),T=h(``),E=h(new Set(S.value)),D=h(C.value),{conditions:O,combination:k,updateCondition:A,addCondition:j,removeCondition:M}=Q(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`contains`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.conditions[0];if(e.selectedValues&&e.selectedValues.size>0)return[{operator:`contains`,value:``,valueTo:``,nextOperator:`and`}];let t=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(e=>{let n=e;return{operator:n.operator,value:n.value??``,valueTo:``,nextOperator:n.nextOperator??t}})}).value,c.currentFilter?.combination??`and`),N=t(()=>{if(!T.value)return p.value;let e=T.value.toLowerCase();return p.value.filter(t=>t.label.toLowerCase().includes(e))}),P=t(()=>c.distinctValues.some(e=>e==null||e===``)),F=t(()=>N.value.every(e=>E.value.has(e.key))&&(!P.value||D.value));function I(){E.value=new Set(N.value.map(e=>e.key)),P.value&&(D.value=!0)}function L(){E.value=new Set,D.value=!1}function R(e){let t=new Set(E.value);t.has(e)?t.delete(e):t.add(e),E.value=t}function z(){if(v.value===`values`){if(p.value.every(e=>E.value.has(e.key))&&(!P.value||D.value)){l(`apply`,null);return}l(`apply`,{conditions:[{type:`text`,operator:`equals`,selectedValues:E.value,includeBlank:D.value}],combination:`and`})}else{let e=O.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.value.trim()!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`text`,operator:e.operator,value:e.value,nextOperator:e.nextOperator})),combination:`and`})}}function B(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,me,[r(` Mode toggle - only show if not too many values `),_.value?r(`v-if`,!0):(m(),i(`div`,he,[a(`button`,{type:`button`,class:u({active:v.value===`values`}),onClick:n[0]||=e=>v.value=`values`},` Values `,2),a(`button`,{type:`button`,class:u({active:v.value===`condition`}),onClick:n[1]||=e=>v.value=`condition`},` Condition `,2)])),r(` Too many values message `),_.value&&v.value===`condition`?(m(),i(`div`,ge,` Too many unique values (`+y(p.value.length)+`). Use conditions to filter. `,1)):r(`v-if`,!0),r(` VALUES MODE `),v.value===`values`?(m(),i(e,{key:2},[r(` Search input `),w(a(`input`,{"onUpdate:modelValue":n[2]||=e=>T.value=e,class:`gp-grid-filter-search`,type:`text`,placeholder:`Search...`,autofocus:``},null,512),[[x,T.value]]),r(` Select all / Deselect all `),a(`div`,_e,[a(`button`,{type:`button`,disabled:F.value,onClick:I},` Select All `,8,ve),a(`button`,{type:`button`,onClick:L},` Deselect All `)]),r(` Checkbox list `),a(`div`,ye,[r(` Blanks option `),P.value?(m(),i(`label`,be,[a(`input`,{type:`checkbox`,checked:D.value,onChange:n[3]||=e=>D.value=!D.value},null,40,xe),n[5]||=a(`span`,{class:`gp-grid-filter-blank`},`(Blanks)`,-1)])):r(`v-if`,!0),r(` Values `),(m(!0),i(e,null,g(N.value,e=>(m(),i(`label`,{key:e.key,class:`gp-grid-filter-option`},[a(`input`,{type:`checkbox`,checked:E.value.has(e.key),onChange:t=>R(e.key)},null,40,Se),a(`span`,null,y(e.label),1)]))),128))])],64)):r(`v-if`,!0),r(` CONDITION MODE `),v.value===`condition`?(m(),i(e,{key:3},[(m(!0),i(e,null,g(b(O),(t,n)=>(m(),i(`div`,{key:n,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),n>0?(m(),i(`div`,Ce,[a(`button`,{type:`button`,class:u({active:b(O)[n-1]?.nextOperator===`and`}),onClick:e=>b(A)(n-1,{nextOperator:`and`})},` AND `,10,we),a(`button`,{type:`button`,class:u({active:b(O)[n-1]?.nextOperator===`or`}),onClick:e=>b(A)(n-1,{nextOperator:`or`})},` OR `,10,Te)])):r(`v-if`,!0),a(`div`,Ee,[r(` Operator select `),a(`select`,{value:t.operator,autofocus:n===0,onChange:e=>b(A)(n,{operator:e.target.value})},[(m(),i(e,null,g(s,e=>a(`option`,{key:e.value,value:e.value},y(e.label),9,Oe)),64))],40,De),r(` Text input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`text`,value:t.value,placeholder:`Value`,class:`gp-grid-filter-text-input`,onInput:e=>b(A)(n,{value:e.target.value})},null,40,ke)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),b(O).length>1?(m(),i(`button`,{key:1,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>b(M)(n)},` × `,8,Ae)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[4]||=e=>b(j)(`contains`)},` + Add condition `)],64)):r(`v-if`,!0),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:B},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:z},` Apply `)])]))}}),Me={class:`gp-grid-filter-content gp-grid-filter-number`},Ne={key:0,class:`gp-grid-filter-combination`},Pe=[`onClick`],Fe=[`onClick`],Ie={class:`gp-grid-filter-row`},Le=[`value`,`onChange`],Re=[`value`],ze=[`value`,`onInput`],Be=[`value`,`onInput`],Ve=[`onClick`],He=c({__name:`NumberFilterContent`,props:{currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`>=`,label:`≥`},{value:`<=`,label:`≤`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}],c=n,l=o,{conditions:d,combination:f,updateCondition:p,addCondition:h,removeCondition:_}=Q(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(t=>{let n=t;return{operator:n.operator,value:n.value==null?``:String(n.value),valueTo:n.valueTo==null?``:String(n.valueTo),nextOperator:n.nextOperator??e}})}).value,c.currentFilter?.combination??`and`);function v(){let e=d.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`number`,operator:e.operator,value:e.value?parseFloat(e.value):void 0,valueTo:e.valueTo?parseFloat(e.valueTo):void 0,nextOperator:e.nextOperator})),combination:`and`})}function x(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,Me,[(m(!0),i(e,null,g(b(d),(t,o)=>(m(),i(`div`,{key:o,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),o>0?(m(),i(`div`,Ne,[a(`button`,{type:`button`,class:u({active:b(d)[o-1]?.nextOperator===`and`}),onClick:e=>b(p)(o-1,{nextOperator:`and`})},` AND `,10,Pe),a(`button`,{type:`button`,class:u({active:b(d)[o-1]?.nextOperator===`or`}),onClick:e=>b(p)(o-1,{nextOperator:`or`})},` OR `,10,Fe)])):r(`v-if`,!0),a(`div`,Ie,[r(` Operator select `),a(`select`,{value:t.operator,onChange:e=>b(p)(o,{operator:e.target.value})},[(m(),i(e,null,g(s,e=>a(`option`,{key:e.value,value:e.value},y(e.label),9,Re)),64))],40,Le),r(` Number input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`number`,value:t.value,placeholder:`Value`,onInput:e=>b(p)(o,{value:e.target.value})},null,40,ze)):r(`v-if`,!0),r(` Second number input for "between" `),t.operator===`between`?(m(),i(e,{key:1},[n[1]||=a(`span`,{class:`gp-grid-filter-to`},`to`,-1),a(`input`,{type:`number`,value:t.valueTo,placeholder:`Value`,onInput:e=>b(p)(o,{valueTo:e.target.value})},null,40,Be)],64)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),b(d).length>1?(m(),i(`button`,{key:2,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>b(_)(o)},` × `,8,Ve)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[0]||=e=>b(h)(`=`)},` + Add condition `),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:x},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:v},` Apply `)])]))}}),Ue={class:`gp-grid-filter-content gp-grid-filter-date`},We={key:0,class:`gp-grid-filter-combination`},Ge=[`onClick`],Ke=[`onClick`],qe={class:`gp-grid-filter-row`},Je=[`value`,`onChange`],Ye=[`value`],Xe=[`value`,`onInput`],Ze=[`value`,`onInput`],Qe=[`onClick`],$e=c({__name:`DateFilterContent`,props:{currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}],c=n,l=o;function d(e){if(!e)return``;let t=typeof e==`string`?new Date(e):e;return isNaN(t.getTime())?``:t.toISOString().split(`T`)[0]}let{conditions:f,combination:p,updateCondition:h,addCondition:_,removeCondition:v}=Q(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(t=>{let n=t;return{operator:n.operator,value:d(n.value),valueTo:d(n.valueTo),nextOperator:n.nextOperator??e}})}).value,c.currentFilter?.combination??`and`);function x(){let e=f.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`date`,operator:e.operator,value:e.value||void 0,valueTo:e.valueTo||void 0,nextOperator:e.nextOperator})),combination:`and`})}function S(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,Ue,[(m(!0),i(e,null,g(b(f),(t,o)=>(m(),i(`div`,{key:o,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),o>0?(m(),i(`div`,We,[a(`button`,{type:`button`,class:u({active:b(f)[o-1]?.nextOperator===`and`}),onClick:e=>b(h)(o-1,{nextOperator:`and`})},` AND `,10,Ge),a(`button`,{type:`button`,class:u({active:b(f)[o-1]?.nextOperator===`or`}),onClick:e=>b(h)(o-1,{nextOperator:`or`})},` OR `,10,Ke)])):r(`v-if`,!0),a(`div`,qe,[r(` Operator select `),a(`select`,{value:t.operator,onChange:e=>b(h)(o,{operator:e.target.value})},[(m(),i(e,null,g(s,e=>a(`option`,{key:e.value,value:e.value},y(e.label),9,Ye)),64))],40,Je),r(` Date input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`date`,value:t.value,onInput:e=>b(h)(o,{value:e.target.value})},null,40,Xe)):r(`v-if`,!0),r(` Second date input for "between" `),t.operator===`between`?(m(),i(e,{key:1},[n[1]||=a(`span`,{class:`gp-grid-filter-to`},`to`,-1),a(`input`,{type:`date`,value:t.valueTo,onInput:e=>b(h)(o,{valueTo:e.target.value})},null,40,Ze)],64)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),b(f).length>1?(m(),i(`button`,{key:2,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>b(v)(o)},` × `,8,Qe)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[0]||=e=>b(_)(`=`)},` + Add condition `),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:S},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:x},` Apply `)])]))}}),et={class:`gp-grid-filter-header`},tt=c({__name:`FilterPopup`,props:{column:{},colIndex:{},containerRef:{},distinctValues:{},currentFilter:{}},emits:[`apply`,`close`],setup(o,{emit:c}){let l=o,u=c,g=h(null),_=h(0),v=h(0),b=h(200),x=h(!1);pe(g,{onClose:()=>u(`close`),ignoreSelector:`.gp-grid-filter-icon`});let S=t(()=>l.column.colId??l.column.field);function w(e){u(`apply`,S.value,e),u(`close`)}function T(){u(`close`)}let E=t(()=>l.column.cellDataType);t(()=>E.value===`text`||E.value===`object`);let D=t(()=>E.value===`number`),O=t(()=>E.value===`date`||E.value===`dateString`||E.value===`dateTime`||E.value===`dateTimeString`),k=null,A=()=>{let e=l.containerRef,t=g.value;if(!e||!t)return;let n=e.querySelector(`[data-col-index="${l.colIndex}"]`);if(!n)return;let r=N(n,t);_.value=r.top,v.value=r.left,b.value=r.minWidth,x.value=!0},j=()=>{k===null&&(k=requestAnimationFrame(()=>{k=null,A()}))};C(()=>{l.colIndex,A()},{flush:`post`}),f(()=>{window.addEventListener(`scroll`,j,{passive:!0,capture:!0}),window.addEventListener(`resize`,j)}),p(()=>{window.removeEventListener(`scroll`,j,{capture:!0}),window.removeEventListener(`resize`,j),k!==null&&cancelAnimationFrame(k)});let M=t(()=>({position:`fixed`,top:`${_.value}px`,left:`${v.value}px`,minWidth:`${b.value}px`,zIndex:1e4,visibility:x.value?`visible`:`hidden`}));return(t,c)=>(m(),i(`div`,{ref_key:`popupRef`,ref:g,class:`gp-grid-filter-popup`,style:d(M.value)},[a(`div`,et,` Filter: `+y(o.column.headerName??o.column.field),1),r(` Number filter `),D.value?(m(),n(He,{key:0,"current-filter":o.currentFilter,onApply:w,onClose:T},null,8,[`current-filter`])):O.value?(m(),i(e,{key:1},[r(` Date filter `),s($e,{"current-filter":o.currentFilter,onApply:w,onClose:T},null,8,[`current-filter`])],2112)):(m(),i(e,{key:2},[r(` Text filter (default) `),s(je,{"distinct-values":o.distinctValues,"value-formatter":o.column.valueFormatter,"current-filter":o.currentFilter,onApply:w,onClose:T},null,8,[`distinct-values`,`value-formatter`,`current-filter`])],2112))],4))}}),nt=e=>e==null||e===``?o(``):typeof e==`string`?o(e):e,$=(e,t)=>typeof e==`function`?nt(e(t)):l(e,t);function rt(t){let{column:n,colIndex:r,sortDirection:i,sortIndex:a,sortable:o,filterable:s,hasFilter:c,core:u,container:d,headerRenderers:f,globalHeaderRenderer:p}=t,m={column:n,colIndex:r,sortDirection:i,sortIndex:a,sortable:o,filterable:s,hasFilter:c,onSort:(e,t)=>{u&&o&&u.setSort(n.colId??n.field,e,t)},onFilterClick:()=>{if(u&&s){let e=d?.querySelector(`[data-col-index="${r}"]`);if(e){let t=e.getBoundingClientRect();u.openFilterPopup(r,{top:t.top,left:t.left,width:t.width,height:t.height})}}}};if(n.headerRenderer!=null)if(typeof n.headerRenderer==`string`){let e=f[n.headerRenderer];if(e)return $(e,m)}else return $(n.headerRenderer,m);if(p)return $(p,m);let h=[l(`span`,{class:`gp-grid-header-text`},n.headerName??n.field)],g=[];if(o){let e=[l(`span`,{class:`gp-grid-sort-arrows-stack`},[l(`svg`,{class:`gp-grid-sort-arrow-up${i===`asc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`},[l(`path`,{d:`M4 0L8 6H0L4 0Z`,fill:`currentColor`})]),l(`svg`,{class:`gp-grid-sort-arrow-down${i===`desc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`},[l(`path`,{d:`M4 6L0 0H8L4 6Z`,fill:`currentColor`})])])];a!==void 0&&a>0&&e.push(l(`span`,{class:`gp-grid-sort-index`},String(a))),g.push(l(`span`,{class:`gp-grid-sort-arrows`},e))}return s&&g.push(l(`span`,{class:`gp-grid-filter-icon${c?` active`:``}`,onPointerdown:e=>{e.stopPropagation(),e.preventDefault(),m.onFilterClick()},onClick:e=>{e.stopPropagation()}},[l(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`currentColor`},[l(`path`,{d:`M4 4h16l-6 8v5l-4 2v-7L4 4z`})])])),g.length>0&&h.push(l(`span`,{class:`gp-grid-header-icons`},g)),l(e,h)}const it=[`data-col-index`,`onPointerdown`],at=[`onPointerdown`],ot=c({__name:`GridHeader`,props:{headerHeight:{},scrollLeft:{},contentWidth:{},totalWidth:{},isLoading:{type:Boolean},visibleColumnsWithIndices:{},columnPositions:{},columnWidths:{},headers:{},sortingEnabled:{type:Boolean},onHeaderMouseDown:{type:Function},onHeaderResizeMouseDown:{type:Function},coreRef:{},outerContainerRef:{},headerRenderers:{},globalHeaderRenderer:{type:Function}},setup(t){let o=t;return(t,s)=>(m(),i(`div`,{class:u([`gp-grid-header`,{"gp-grid-header--loading":o.isLoading}]),style:d({height:`${o.headerHeight}px`})},[a(`div`,{style:d({position:`absolute`,top:0,left:0,transform:`translateX(${-o.scrollLeft}px)`,width:`${Math.max(o.contentWidth,o.totalWidth)}px`,height:`${o.headerHeight}px`})},[(m(!0),i(e,null,g(o.visibleColumnsWithIndices,({column:e,originalIndex:t},a)=>(m(),i(`div`,{key:e.colId??e.field,class:`gp-grid-header-cell`,"data-col-index":t,style:d({left:`${o.columnPositions[a]}px`,width:`${o.columnWidths[a]}px`,height:`${o.headerHeight}px`}),onPointerdown:e=>o.onHeaderMouseDown(t,o.columnWidths[a]??0,o.headerHeight,e)},[(m(),n(_(b(rt)({column:e,colIndex:t,sortDirection:o.headers.get(t)?.sortDirection,sortIndex:o.headers.get(t)?.sortIndex,sortable:e.sortable!==!1&&o.sortingEnabled,filterable:e.filterable!==!1,hasFilter:o.headers.get(t)?.hasFilter??!1,core:o.coreRef,container:o.outerContainerRef,headerRenderers:o.headerRenderers,globalHeaderRenderer:o.globalHeaderRenderer})))),e.resizable===!1?r(`v-if`,!0):(m(),i(`div`,{key:0,class:`gp-grid-header-resize-handle`,onPointerdown:T(e=>o.onHeaderResizeMouseDown(t,o.columnWidths[a]??0,e),[`stop`])},null,40,at))],44,it))),128))],4)],6))}});function st(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,isActive:a,isSelected:s,isEditing:c,cellRenderers:l,globalCellRenderer:u}=e,d=ie(n,t.field),f={value:t.valueFormatter?t.valueFormatter(d):d,rowData:n,column:t,rowIndex:r,colIndex:i,isActive:a,isSelected:s,isEditing:c};if(t.cellRenderer!=null)if(typeof t.cellRenderer==`string`){let e=l[t.cellRenderer];if(e)return $(e,f)}else return $(t.cellRenderer,f);return u?$(u,f):o(re(d,t.valueFormatter))}function ct(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,initialValue:a,core:s,editRenderers:c,globalEditRenderer:u}=e;if(!s)return o(``);let d=H(n,t.field),f={value:t.valueFormatter?t.valueFormatter(d):d,rowData:n,column:t,rowIndex:r,colIndex:i,isActive:!0,isSelected:!0,isEditing:!0,initialValue:a,onValueChange:e=>s.updateEditValue(e),onCommit:()=>s.commitEdit(),onCancel:()=>s.cancelEdit()};if(t.editRenderer!=null)if(typeof t.editRenderer==`string`){let e=c[t.editRenderer];if(e)return $(e,f)}else return $(t.editRenderer,f);return u?$(u,f):l(`input`,{class:`gp-grid-edit-input`,type:`text`,value:a==null?``:String(a),autofocus:!0,onFocus:e=>e.target.select(),onInput:e=>s.updateEditValue(e.target.value),onKeydown:e=>{e.stopPropagation(),e.key===`Enter`?s.commitEdit():e.key===`Escape`?s.cancelEdit():e.key===`Tab`&&(e.preventDefault(),s.commitEdit(),s.selection.moveFocus(e.shiftKey?`left`:`right`,!1))},onBlur:()=>s.commitEdit()})}const lt=[`onPointerdown`,`onDblclick`,`onMouseenter`],ut={key:0,class:`gp-grid-error`},dt={key:1,class:`gp-grid-empty`},ft=c({__name:`GridBody`,props:{rowHeight:{},totalHeaderHeight:{},contentWidth:{},contentHeight:{},totalWidth:{},rowsWrapperOffset:{},activeCell:{},selectionRange:{},editingCell:{},hoverPosition:{},error:{},isLoading:{type:Boolean},totalRows:{},slotsArray:{},visibleColumnsWithIndices:{},columnPositions:{},columnWidths:{},fillHandlePosition:{},dragState:{},onScroll:{type:Function},onWheel:{type:Function},wheelDampening:{},onCellMouseDown:{type:Function},onCellDoubleClick:{type:Function},onCellMouseEnter:{type:Function},onCellMouseLeave:{type:Function},onFillHandleMouseDown:{type:Function},coreRef:{},cellRenderers:{},editRenderers:{},globalCellRenderer:{},globalEditRenderer:{}},setup(t,{expose:o}){let s=t,c=h(null),l=e=>[`gp-grid-row`,...s.coreRef?.highlight?.computeRowClasses(e.rowIndex,e.rowData)??[]].filter(Boolean).join(` `),f=(e,t,n,r,i)=>{let a=q(e,t,s.editingCell),o=A(G(e,t,s.activeCell),Y(e,t,s.selectionRange),a,J(e,t,s.dragState.dragType===`fill`,s.dragState.fillSourceRange,s.dragState.fillTarget)),c=s.coreRef?.highlight?.computeCombinedCellClasses(e,t,n,r)??[],l=n.rowDrag===!0;return[o,...c,l?`gp-grid-cell--row-drag-handle`:``].filter(Boolean).join(` `)};return o({bodyRef:c}),(t,o)=>(m(),i(`div`,{ref_key:`bodyRef`,ref:c,style:{flex:`1`,overflow:`auto`,position:`relative`},onScroll:o[2]||=(...e)=>s.onScroll&&s.onScroll(...e),onWheel:o[3]||=e=>s.onWheel(e,s.wheelDampening)},[r(` Content sizer - provides scroll range `),a(`div`,{style:d({width:`${Math.max(s.contentWidth,s.totalWidth)}px`,height:`${Math.max(s.contentHeight-s.totalHeaderHeight,0)}px`,position:`relative`,minWidth:`100%`})},[r(` Rows wrapper `),a(`div`,{class:`gp-grid-rows-wrapper`,style:d({width:`${Math.max(s.contentWidth,s.totalWidth)}px`,transform:`translateY(${s.rowsWrapperOffset}px)`})},[r(` Row slots `),(m(!0),i(e,null,g(s.slotsArray.filter(e=>e.rowIndex>=0),t=>(m(),i(`div`,{key:t.slotId,class:u(l(t)),style:d({position:`absolute`,top:0,left:0,transform:`translateY(${t.translateY}px)`,width:`${Math.max(s.contentWidth,s.totalWidth)}px`,height:`${s.rowHeight}px`})},[(m(!0),i(e,null,g(s.visibleColumnsWithIndices,({column:a,originalIndex:c},l)=>(m(),i(`div`,{key:`${t.slotId}-${a.colId??a.field}`,class:u(f(t.rowIndex,c,a,t.rowData,s.hoverPosition)),style:d({position:`absolute`,left:`${s.columnPositions[l]}px`,top:0,width:`${s.columnWidths[l]}px`,height:`${s.rowHeight}px`}),onPointerdown:e=>s.onCellMouseDown(t.rowIndex,c,e),onDblclick:()=>s.onCellDoubleClick(t.rowIndex,c),onMouseenter:()=>s.onCellMouseEnter(t.rowIndex,c),onMouseleave:o[0]||=(...e)=>s.onCellMouseLeave&&s.onCellMouseLeave(...e)},[r(` Edit mode `),b(q)(t.rowIndex,c,s.editingCell)&&s.editingCell?(m(),n(_(b(ct)({column:a,rowData:t.rowData,rowIndex:t.rowIndex,colIndex:c,initialValue:s.editingCell.initialValue,core:s.coreRef,editRenderers:s.editRenderers,globalEditRenderer:s.globalEditRenderer})),{key:0})):(m(),i(e,{key:1},[r(` View mode `),(m(),n(_(b(st)({column:a,rowData:t.rowData,rowIndex:t.rowIndex,colIndex:c,isActive:b(G)(t.rowIndex,c,s.activeCell),isSelected:b(Y)(t.rowIndex,c,s.selectionRange),isEditing:!1,cellRenderers:s.cellRenderers,globalCellRenderer:s.globalCellRenderer}))))],64))],46,lt))),128))],6))),128)),r(` Fill handle `),s.fillHandlePosition&&!s.editingCell?(m(),i(`div`,{key:0,class:`gp-grid-fill-handle`,style:d({top:`${s.fillHandlePosition.top}px`,left:`${s.fillHandlePosition.left}px`}),onPointerdown:o[1]||=(...e)=>s.onFillHandleMouseDown&&s.onFillHandleMouseDown(...e)},null,36)):r(`v-if`,!0),r(` Row drop indicator `),s.dragState.dragType===`row-drag`&&s.dragState.rowDrag?.dropTargetIndex!==null?(m(),i(`div`,{key:1,class:`gp-grid-row-drop-indicator`,style:d({transform:`translateY(${s.dragState.rowDrag.dropIndicatorY}px)`,width:`${Math.max(s.contentWidth,s.totalWidth)}px`})},null,4)):r(`v-if`,!0)],4)],4),r(` Error message `),s.error?(m(),i(`div`,ut,` Error: `+y(s.error),1)):r(`v-if`,!0),r(` Empty state `),!s.isLoading&&!s.error&&s.totalRows===0?(m(),i(`div`,dt,` No data to display `)):r(`v-if`,!0)],544))}}),pt={key:1,class:`gp-grid-loading`},mt=c({__name:`GpGrid`,props:{columns:{},dataSource:{},rowData:{},rowHeight:{},headerHeight:{},overscan:{default:3},rowLoading:{},sortingEnabled:{type:Boolean,default:!0},darkMode:{type:Boolean,default:!1},wheelDampening:{default:.1},cellRenderers:{default:()=>({})},editRenderers:{default:()=>({})},headerRenderers:{default:()=>({})},cellRenderer:{},editRenderer:{},headerRenderer:{},initialWidth:{},initialHeight:{},highlighting:{},getRowId:{},onCellValueChanged:{},loadingComponent:{},rowDragEntireRow:{type:Boolean},onRowDragEnd:{},onColumnResized:{},onColumnMoved:{}},setup(o,{expose:c}){let l=o,g=h(null),x=h(null),C=t(()=>x.value?.bodyRef??null),w=v(null),T=v(null),E=v(null),O=h(0),{state:k,applyInstructions:A,reset:j}=X({initialWidth:l.initialWidth,initialHeight:l.initialHeight}),M=t(()=>l.headerHeight??l.rowHeight),N=t(()=>k.value.columns??l.columns),F=t(()=>N.value.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>!e.hidden)),L=t(()=>P(F.value.map(e=>e.column),k.value.viewportWidth)),z=t(()=>L.value.positions),B=t(()=>L.value.widths),V=t(()=>oe(z.value)),ee=t(()=>Array.from(k.value.slots.values())),{handleCellMouseDown:te,handleCellDoubleClick:ne,handleFillHandleMouseDown:re,handleHeaderClick:ie,handleHeaderMouseDown:H,handleHeaderResizeMouseDown:ae,handleKeyDown:U,handlePaste:W,handleWheel:G,dragState:K}=de(w,C,N,{activeCell:t(()=>k.value.activeCell),selectionRange:t(()=>k.value.selectionRange),editingCell:t(()=>k.value.editingCell),filterPopupOpen:t(()=>k.value.filterPopup?.isOpen??!1),rowHeight:l.rowHeight,headerHeight:M.value,columnPositions:z,visibleColumnsWithIndices:F,slots:t(()=>k.value.slots),rowsWrapperOffset:t(()=>k.value.rowsWrapperOffset)}),{fillHandlePosition:q}=fe({activeCell:t(()=>k.value.activeCell),selectionRange:t(()=>k.value.selectionRange),slots:t(()=>k.value.slots),columns:N,visibleColumnsWithIndices:F,columnPositions:z,columnWidths:B,rowHeight:l.rowHeight});function se(){let e=C.value,t=w.value;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)}function J(){let e=C.value;e&&(O.value=e.scrollLeft),se()}function ce(e,t){let n=w.value;n&&n.setFilter(e,t)}function Y(){let e=w.value;e&&e.closeFilterPopup()}function le(e,t){w.value?.input.handleCellMouseEnter(e,t)}function ue(){w.value?.input.handleCellMouseLeave()}function Z(){return l.dataSource??(l.rowData?R(l.rowData):I([]))}function pe(e){E.value&&=(E.value(),null),w.value&&w.value.destroy();let t=new D({columns:l.columns,dataSource:e,rowHeight:l.rowHeight,headerHeight:M.value,overscan:l.overscan,rowLoading:l.rowLoading,sortingEnabled:l.sortingEnabled,highlighting:l.highlighting,getRowId:l.getRowId,onCellValueChanged:l.onCellValueChanged?e=>l.onCellValueChanged?.(e):void 0,rowDragEntireRow:l.rowDragEntireRow??!1,onRowDragEnd:(e,t)=>l.onRowDragEnd?.(e,t),onColumnResized:(e,t)=>l.onColumnResized?.(e,t),onColumnMoved:(e,t)=>l.onColumnMoved?.(e,t)});w.value=t,E.value=t.onBatchInstruction(e=>{A(e)}),t.initialize();let n=C.value;n&&t.setViewport(n.scrollTop,n.scrollLeft,n.clientWidth,n.clientHeight)}return f(()=>{let e=Z();T.value=e,pe(e);let t=C.value;if(t&&typeof ResizeObserver<`u`){let e=new ResizeObserver(()=>{w.value?.setViewport(t.scrollTop,t.scrollLeft,t.clientWidth,t.clientHeight)});e.observe(t),p(()=>{e.disconnect()})}p(()=>{E.value&&=(E.value(),null),w.value&&=(w.value.destroy(),null),T.value&&=(T.value.destroy?.(),null)})}),S([()=>l.dataSource,()=>l.rowData],()=>{l.rowData&&l.rowData.length>1e4&&T.value&&console.warn(`[gp-grid] rowData prop changed with ${l.rowData.length} rows — this triggers a full rebuild. Use useGridData() for efficient updates.`);let e=Z(),t=T.value;t&&t!==e?(t.destroy?.(),T.value=e,w.value?.setDataSource(e)):t||(T.value=e)}),S(()=>l.dataSource,e=>{if(e){let t=e;if(t.subscribe){let e=t.subscribe(()=>{w.value?.refreshFromTransaction()});p(()=>e())}}},{immediate:!0}),S(()=>k.value.pendingScrollTop,e=>{if(e!==null){let t=C.value;t&&(t.scrollTop=e)}},{flush:`post`}),S(()=>l.highlighting,e=>{w.value?.highlight&&e&&w.value.highlight.updateOptions(e)}),c({core:w}),(t,c)=>(m(),i(`div`,{ref_key:`outerContainerRef`,ref:g,class:u([`gp-grid-container`,{"gp-grid-container--dark":o.darkMode}]),style:{width:`100%`,height:`100%`,position:`relative`,display:`flex`,"flex-direction":`column`},tabindex:`0`,onKeydown:c[0]||=(...e)=>b(U)&&b(U)(...e),onPaste:c[1]||=(...e)=>b(W)&&b(W)(...e)},[s(ot,{"header-height":M.value,"scroll-left":O.value,"content-width":b(k).contentWidth,"total-width":V.value,"is-loading":b(k).isLoading,"visible-columns-with-indices":F.value,"column-positions":z.value,"column-widths":B.value,headers:b(k).headers,"sorting-enabled":o.sortingEnabled,"on-header-mouse-down":b(H),"on-header-resize-mouse-down":b(ae),"core-ref":w.value,"outer-container-ref":g.value,"header-renderers":o.headerRenderers??{},"global-header-renderer":o.headerRenderer},null,8,[`header-height`,`scroll-left`,`content-width`,`total-width`,`is-loading`,`visible-columns-with-indices`,`column-positions`,`column-widths`,`headers`,`sorting-enabled`,`on-header-mouse-down`,`on-header-resize-mouse-down`,`core-ref`,`outer-container-ref`,`header-renderers`,`global-header-renderer`]),s(ft,{ref_key:`gridBodyComp`,ref:x,"row-height":o.rowHeight,"total-header-height":M.value,"content-width":b(k).contentWidth,"content-height":b(k).contentHeight,"total-width":V.value,"rows-wrapper-offset":b(k).rowsWrapperOffset,"active-cell":b(k).activeCell,"selection-range":b(k).selectionRange,"editing-cell":b(k).editingCell,"hover-position":b(k).hoverPosition,error:b(k).error,"is-loading":b(k).isLoading,"total-rows":b(k).totalRows,"slots-array":ee.value,"visible-columns-with-indices":F.value,"column-positions":z.value,"column-widths":B.value,"fill-handle-position":b(q),"drag-state":b(K),"on-scroll":J,"on-wheel":b(G),"wheel-dampening":o.wheelDampening,"on-cell-mouse-down":b(te),"on-cell-double-click":b(ne),"on-cell-mouse-enter":le,"on-cell-mouse-leave":ue,"on-fill-handle-mouse-down":b(re),"core-ref":w.value,"cell-renderers":o.cellRenderers??{},"edit-renderers":o.editRenderers??{},"global-cell-renderer":o.cellRenderer,"global-edit-renderer":o.editRenderer},null,8,`row-height.total-header-height.content-width.content-height.total-width.rows-wrapper-offset.active-cell.selection-range.editing-cell.hover-position.error.is-loading.total-rows.slots-array.visible-columns-with-indices.column-positions.column-widths.fill-handle-position.drag-state.on-wheel.wheel-dampening.on-cell-mouse-down.on-cell-double-click.on-fill-handle-mouse-down.core-ref.cell-renderers.edit-renderers.global-cell-renderer.global-edit-renderer`.split(`.`)),r(` Loading overlay - positioned outside scrollable area to avoid Firefox sticky issues `),b(k).isLoading?(m(),i(`div`,{key:0,style:d({position:`absolute`,top:`${M.value}px`,left:0,right:0,bottom:0,zIndex:50,pointerEvents:`none`})},[c[3]||=a(`div`,{class:`gp-grid-loading-overlay`},null,-1),l.loadingComponent?(m(),n(_(l.loadingComponent),{key:0,"is-loading":!0})):(m(),i(`div`,pt,[...c[2]||=[a(`div`,{class:`gp-grid-loading-spinner`},null,-1)]]))],4)):r(`v-if`,!0),r(` Filter Popup `),b(k).filterPopup?.isOpen&&b(k).filterPopup.column?(m(),n(tt,{key:1,column:b(k).filterPopup.column,"col-index":b(k).filterPopup.colIndex,"container-ref":g.value,"distinct-values":b(k).filterPopup.distinctValues,"current-filter":b(k).filterPopup.currentFilter,onApply:ce,onClose:Y},null,8,[`column`,`col-index`,`container-ref`,`distinct-values`,`current-filter`])):r(`v-if`,!0),r(` Column resize line `),b(K).dragType===`column-resize`&&b(K).columnResize?(m(),i(`div`,{key:2,class:`gp-grid-column-resize-line`,style:d({left:`${(z.value[F.value.findIndex(e=>e.originalIndex===b(K).columnResize.colIndex)]??0)+b(K).columnResize.currentWidth-O.value}px`})},null,4)):r(`v-if`,!0),r(` Column move ghost `),b(K).dragType===`column-move`&&b(K).columnMove?(m(),i(e,{key:3},[a(`div`,{class:`gp-grid-column-move-ghost`,style:d({left:`${b(K).columnMove.currentX-b(K).columnMove.ghostWidth/2}px`,top:`${b(K).columnMove.currentY-b(K).columnMove.ghostHeight/2}px`,width:`${b(K).columnMove.ghostWidth}px`,height:`${b(K).columnMove.ghostHeight}px`})},y(N.value[b(K).columnMove.sourceColIndex]?.headerName??N.value[b(K).columnMove.sourceColIndex]?.field??``),5),b(K).columnMove.dropTargetIndex===null?r(`v-if`,!0):(m(),i(`div`,{key:0,class:`gp-grid-column-drop-indicator`,style:d({left:`${(z.value[b(K).columnMove.dropTargetIndex]??0)-O.value}px`,height:`${M.value}px`})},null,4))],64)):r(`v-if`,!0),r(` Row drag ghost (fixed position, follows cursor) `),b(K).dragType===`row-drag`&&b(K).rowDrag?(m(),i(`div`,{key:4,class:`gp-grid-row-drag-ghost`,style:d({left:`${b(K).rowDrag.currentX+12}px`,top:`${b(K).rowDrag.currentY-o.rowHeight/2}px`,width:`${Math.min(300,V.value)}px`,height:`${o.rowHeight}px`})},null,4)):r(`v-if`,!0)],34))}});function ht(e){let n=h(null),r=h(null),{state:i,applyInstructions:a}=X(),o=t(()=>e.headerHeight??e.rowHeight),s=t(()=>e.columns.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>!e.hidden)),c=t(()=>P(s.value.map(e=>e.column),i.value.viewportWidth)),l=t(()=>c.value.positions),u=t(()=>c.value.widths),d=t(()=>oe(l.value)),m=t(()=>Array.from(i.value.slots.values())),{handleCellMouseDown:g,handleCellDoubleClick:_,handleFillHandleMouseDown:v,handleHeaderClick:y,handleKeyDown:b,handlePaste:x,handleWheel:C,dragState:w}=de(r,n,t(()=>e.columns),{activeCell:t(()=>i.value.activeCell),selectionRange:t(()=>i.value.selectionRange),editingCell:t(()=>i.value.editingCell),filterPopupOpen:t(()=>i.value.filterPopup?.isOpen??!1),rowHeight:e.rowHeight,headerHeight:o.value,columnPositions:l,visibleColumnsWithIndices:s,slots:t(()=>i.value.slots),rowsWrapperOffset:t(()=>i.value.rowsWrapperOffset)}),T=()=>{let e=n.value,t=r.value;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)},E=(e,t)=>{let n=r.value;n&&n.setFilter(e,t)},O=()=>{let e=r.value;e&&e.closeFilterPopup()},k=(e,t)=>{r.value?.input.handleCellMouseEnter(e,t)},j=()=>{r.value?.input.handleCellMouseLeave()};f(()=>{let t=e.dataSource??(e.rowData?R(e.rowData):I([])),i=new D({columns:e.columns,dataSource:t,rowHeight:e.rowHeight,headerHeight:o.value,overscan:e.overscan??3,rowLoading:e.rowLoading,sortingEnabled:e.sortingEnabled??!0,highlighting:e.highlighting,getRowId:e.getRowId,onCellValueChanged:e.onCellValueChanged?t=>e.onCellValueChanged?.(t):void 0});r.value=i;let s=i.onBatchInstruction(e=>{a(e)});i.initialize();let c=n.value;if(c){i.setViewport(c.scrollTop,c.scrollLeft,c.clientWidth,c.clientHeight);let e=new ResizeObserver(()=>{i.setViewport(c.scrollTop,c.scrollLeft,c.clientWidth,c.clientHeight)});e.observe(c),p(()=>{e.disconnect(),s(),r.value=null})}}),S(()=>i.value.pendingScrollTop,e=>{if(e!==null){let t=n.value;t&&(t.scrollTop=e)}},{flush:`post`}),S(()=>e.dataSource,e=>{if(e){let t=e;if(t.subscribe){let e=t.subscribe(()=>{r.value?.refresh()});p(()=>e())}}},{immediate:!0}),S(()=>e.highlighting,e=>{r.value?.highlight&&e&&r.value.highlight.updateOptions(e)});let{fillHandlePosition:M}=fe({activeCell:t(()=>i.value.activeCell),selectionRange:t(()=>i.value.selectionRange),slots:t(()=>i.value.slots),columns:t(()=>e.columns),visibleColumnsWithIndices:s,columnPositions:l,columnWidths:u,rowHeight:e.rowHeight});return{containerRef:n,coreRef:r,state:i,slotsArray:m,totalHeaderHeight:o,columnPositions:l,columnWidths:u,totalWidth:d,fillHandlePosition:M,handleScroll:T,handleCellMouseDown:g,handleCellDoubleClick:_,handleFillHandleMouseDown:v,handleHeaderClick:y,handleKeyDown:b,handlePaste:x,handleWheel:C,handleFilterApply:E,handleFilterPopupClose:O,handleCellMouseEnter:k,handleCellMouseLeave:j,dragState:w,isCellSelected:Y,isCellActive:G,isCellEditing:q,isCellInFillPreview:J,buildCellClasses:A}}const gt=(e,t)=>{let n=ee(e,{getRowId:t.getRowId,debounceMs:t.debounceMs,useWorker:t.useWorker,parallelSort:t.parallelSort});return p(()=>{n.clear()}),{dataSource:n,updateRow:n.updateRow,addRows:n.addRows,removeRows:n.removeRows,updateCell:n.updateCell,clear:n.clear,getRowById:n.getRowById,getTotalRowCount:n.getTotalRowCount,flushTransactions:n.flushTransactions}};export{mt as GpGrid,mt as default,E as GridCore,k as buildCellClasses,j as calculateColumnPositions,F as createClientDataSource,L as createDataSourceFromArray,z as createInitialState,V as createMutableClientDataSource,te as createServerDataSource,ne as findColumnAtX,H as getCellValue,ae as getTotalWidth,U as gridStyles,W as isCellActive,K as isCellEditing,se as isCellInFillPreview,ce as isCellSelected,le as isRowVisible,st as renderCell,ct as renderEditCell,rt as renderHeader,Z as useAutoScroll,fe as useFillHandle,Q as useFilterConditions,pe as useFilterPopup,ht as useGpGrid,gt as useGridData,X as useGridState,de as useInputHandler};
+import{Fragment as e,computed as t,createBlock as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createTextVNode as o,createVNode as s,defineComponent as c,h as l,normalizeClass as u,normalizeStyle as d,onMounted as f,onUnmounted as p,openBlock as m,ref as h,renderList as g,resolveDynamicComponent as _,shallowRef as v,toDisplayString as y,unref as b,vModelText as x,watch as S,watchEffect as C,withDirectives as w,withModifiers as T}from"vue";import{GridCore as E,GridCore as D,applyInstruction as O,bindPeekSelectAll as k,buildCellClasses as A,buildCellClasses as j,calculateColumnPositions as M,calculateFillHandlePosition as N,calculateFilterPopupPosition as P,calculateScaledColumnPositions as F,createClientDataSource as I,createClientDataSource as L,createDataSourceFromArray as R,createDataSourceFromArray as ee,createInitialState as z,createInitialState as B,createMutableClientDataSource as V,createMutableClientDataSource as te,createServerDataSource as ne,findColumnAtX as re,formatCellValue as ie,getFieldValue as ae,getFieldValue as oe,getTotalWidth as se,getTotalWidth as ce,gridStyles as H,isCellActive as le,isCellActive as U,isCellEditing as ue,isCellEditing as W,isCellInFillPreview as de,isCellInFillPreview as G,isCellSelected as fe,isCellSelected as K,isRowVisible as q,scrollCellIntoView as pe}from"@gp-grid/core";function J(e){let t=v(B(e));return{state:t,applyInstructions:e=>{let n=t.value,r=new Map(n.slots),i=new Map(n.headers),a={pendingScrollTop:null};for(let t of e){let e=O(t,r,i);e&&Object.assign(a,e)}a.slots=r,a.headers=i,t.value={...n,...a}},reset:()=>{t.value=B()}}}function Y(e,t){let n=h(null);function r(r,i){n.value&&clearInterval(n.value),n.value=setInterval(()=>{let n=e.value;n&&(n.scrollTop+=i,n.scrollLeft+=r,t?.())},16)}function i(){n.value&&=(clearInterval(n.value),null)}return p(()=>{i()}),{startAutoScroll:r,stopAutoScroll:i}}function X(e,t,n,r){let{activeCell:i,selectionRange:a,editingCell:o,filterPopupOpen:s,rowHeight:c,headerHeight:l,columnPositions:u,visibleColumnsWithIndices:d,slots:f,rowsWrapperOffset:m}=r,g=h({isDragging:!1,dragType:null,fillSourceRange:null,fillTarget:null,columnResize:null,columnMove:null,rowDrag:null}),_=null,v=null,y=null,b=null,x=null,C=e=>{e.preventDefault()},{startAutoScroll:w,stopAutoScroll:T}=Y(t,()=>{let t=e.value;if(_&&t?.input){let e=E();e&&(t.input.handleDragMove(_,e),g.value=t.input.getDragState())}});S([()=>l,()=>c,u,d],()=>{let t=e.value;if(t?.input){let e=d.value;t.input.updateDeps({getHeaderHeight:()=>l,getRowHeight:()=>c,getColumnPositions:()=>u.value,getColumnCount:()=>e.length,getOriginalColumnIndex:t=>{let n=e[t];return n?n.originalIndex:t}})}},{immediate:!0});function E(){let e=t.value;if(!e)return null;let n=e.getBoundingClientRect();return{top:n.top,left:n.left,width:n.width,height:n.height,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft}}function D(e){return{clientX:e.clientX,clientY:e.clientY,button:e.button,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,pointerId:e.pointerId,pointerType:e.pointerType}}function O(){v?.();let n=t=>{t.preventDefault();let n=e.value,r=E();if(!n?.input||!r)return;let i=D(t);_=i;let a=n.input.handleDragMove(i,r);a&&(a.autoScroll?w(a.autoScroll.dx,a.autoScroll.dy):T(),g.value=n.input.getDragState())},r=()=>{try{let t=e.value;t?.input&&t.input.handleDragEnd()}finally{let i=e.value;g.value=i?.input?i.input.getDragState():{isDragging:!1,dragType:null,fillSourceRange:null,fillTarget:null,columnResize:null,columnMove:null,rowDrag:null},_=null,T(),document.removeEventListener(`touchmove`,C),x!==null&&t.value&&(t.value.style.overflow=x,x=null),document.removeEventListener(`pointermove`,n),document.removeEventListener(`pointerup`,r),document.removeEventListener(`pointercancel`,r),v=null}};document.addEventListener(`pointermove`,n,{passive:!1}),document.addEventListener(`pointerup`,r),document.addEventListener(`pointercancel`,r),v=()=>{document.removeEventListener(`pointermove`,n),document.removeEventListener(`pointerup`,r),document.removeEventListener(`pointercancel`,r)}}function k(){y!==null&&(clearTimeout(y),y=null,e.value?.input?.cancelPendingRowDrag()),b=null}function A(n,r,i){let a=e.value;if(!a?.input)return;let o=a.input.handleCellMouseDown(n,r,D(i));if(o.focusContainer&&t.value?.focus(),o.startDrag===`selection`)a.input.startSelectionDrag(),g.value=a.input.getDragState(),O();else if(o.startDrag===`row-drag`)g.value=a.input.getDragState(),O();else if(o.startDrag===`row-drag-pending`){k(),b={pointerId:i.pointerId,target:i.currentTarget??i.target};let e=i.clientX,n=i.clientY,r=t=>{let r=t.clientX-e,i=t.clientY-n;(Math.abs(r)>10||Math.abs(i)>10)&&(k(),s())},o=()=>{k(),s()},s=()=>{document.removeEventListener(`pointermove`,r),document.removeEventListener(`pointerup`,o),document.removeEventListener(`pointercancel`,o)};document.addEventListener(`pointermove`,r),document.addEventListener(`pointerup`,o,{once:!0}),document.addEventListener(`pointercancel`,o,{once:!0}),y=setTimeout(()=>{y=null,s();let e=b;if(b=null,a.input.confirmPendingRowDrag()){if(t.value&&(x=t.value.style.overflow,t.value.style.overflow=`hidden`),document.addEventListener(`touchmove`,C,{passive:!1}),e)try{e.target.setPointerCapture(e.pointerId)}catch{}g.value=a.input.getDragState(),O()}},300)}}function j(t,n){let r=e.value;r?.input&&r.input.handleCellDoubleClick(t,n)}function M(t){let n=e.value;if(!n?.input)return;let r=n.input.handleFillHandleMouseDown(i.value,a.value,D(t));if(r.preventDefault&&t.preventDefault(),r.stopPropagation&&t.stopPropagation(),r.startDrag===`fill`){try{t.target.setPointerCapture(t.pointerId)}catch{}g.value=n.input.getDragState(),O()}}function N(t,r){let i=e.value;if(!i?.input)return;let a=n.value[t];if(!a)return;let o=a.colId??a.field;i.input.handleHeaderClick(o,r.shiftKey)}function P(t,n,r,i){let a=e.value;if(!a?.input)return;let o=a.input.handleHeaderMouseDown(t,n,r,D(i));if(o.preventDefault&&i.preventDefault(),o.stopPropagation&&i.stopPropagation(),o.startDrag===`column-move`){try{i.target.setPointerCapture(i.pointerId)}catch{}g.value=a.input.getDragState(),O()}}function F(t,n,r){let i=e.value;if(!i?.input)return;let a=i.input.handleHeaderResizeMouseDown(t,n,D(r));a.preventDefault&&r.preventDefault(),a.stopPropagation&&r.stopPropagation(),a.startDrag===`column-resize`&&(g.value=i.input.getDragState(),O())}function I(n){let r=e.value,a=t.value;if(!r?.input)return;let l=r.input.handleKeyDown({key:n.key,shiftKey:n.shiftKey,ctrlKey:n.ctrlKey,metaKey:n.metaKey},i.value,o.value,s.value);l.preventDefault&&n.preventDefault(),l.scrollToCell&&a&&pe(r,a,l.scrollToCell.row,c,f.value,m.value)}function L(t){let n=e.value;if(n===null||o.value!==null||s.value)return;let r=t.clipboardData?.getData(`text/plain`)??``;n.pasteClipboardText(r)&&t.preventDefault()}function R(n,r){let i=e.value,a=t.value;if(!i?.input||!a)return;let o=i.input.handleWheel(n.deltaY,n.deltaX,r);o&&(n.preventDefault(),a.scrollTop+=o.dy,a.scrollLeft+=o.dx)}return p(()=>{v?.(),v=null,k(),T(),document.removeEventListener(`touchmove`,C),x!==null&&t.value&&(t.value.style.overflow=x,x=null)}),{handleCellMouseDown:A,handleCellDoubleClick:j,handleFillHandleMouseDown:M,handleHeaderClick:N,handleHeaderMouseDown:P,handleHeaderResizeMouseDown:F,handleKeyDown:I,handlePaste:L,handleWheel:R,dragState:g}}const me=e=>{let{activeCell:n,selectionRange:r,slots:i,columns:a,visibleColumnsWithIndices:o,columnPositions:s,columnWidths:c,rowHeight:l}=e;return{fillHandlePosition:t(()=>N({activeCell:n.value,selectionRange:r.value,slots:i.value,columns:a.value,visibleColumnsWithIndices:o.value,columnPositions:s.value,columnWidths:c.value,rowHeight:l}))}};function Z(e,t){let{onClose:n,ignoreSelector:r=`.gp-grid-filter-icon`}=t,i=null,a=null;f(()=>{i=t=>{let i=t.target;r&&i.closest(r)||e.value&&!e.value.contains(i)&&n()},a=e=>{e.key===`Escape`&&n()},requestAnimationFrame(()=>{i&&document.addEventListener(`pointerdown`,i),a&&document.addEventListener(`keydown`,a)})}),p(()=>{i&&document.removeEventListener(`pointerdown`,i),a&&document.removeEventListener(`keydown`,a)})}function Q(e,t=`and`){let n=h([...e]);return{conditions:n,combination:h(t),updateCondition:(e,t)=>{let r=[...n.value];r[e]={...r[e],...t},n.value=r},addCondition:e=>{n.value=[...n.value,{operator:e,value:``,valueTo:``,nextOperator:`and`}]},removeCondition:e=>{n.value=n.value.filter((t,n)=>n!==e)}}}const he={class:`gp-grid-filter-content gp-grid-filter-text`},ge={key:0,class:`gp-grid-filter-mode-toggle`},_e={key:1,class:`gp-grid-filter-info`},ve={class:`gp-grid-filter-actions`},ye=[`disabled`],be={class:`gp-grid-filter-list`},xe={key:0,class:`gp-grid-filter-option`},Se=[`checked`],Ce=[`checked`,`onChange`],we={key:0,class:`gp-grid-filter-combination`},Te=[`onClick`],Ee=[`onClick`],De={class:`gp-grid-filter-row`},Oe=[`value`,`autofocus`,`onChange`],ke=[`value`],Ae=[`value`,`onInput`],je=[`onClick`],Me=c({__name:`TextFilterContent`,props:{distinctValues:{},valueFormatter:{type:Function},currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`contains`,label:`Contains`},{value:`notContains`,label:`Does not contain`},{value:`equals`,label:`Equals`},{value:`notEquals`,label:`Does not equal`},{value:`startsWith`,label:`Starts with`},{value:`endsWith`,label:`Ends with`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Is not blank`}],c=n,l=o;function d(e){return c.valueFormatter?c.valueFormatter(e):Array.isArray(e)?e.join(`, `):String(e??``)}function f(e){return d(e)}let p=t(()=>{let e=new Set,t=[];for(let n of c.distinctValues){if(n==null||n===``||Array.isArray(n)&&n.length===0)continue;let r=d(n);e.has(r)||(e.add(r),t.push({key:r,label:f(n)}))}return t.sort((e,t)=>{let n=parseFloat(e.label),r=parseFloat(t.label);return!isNaN(n)&&!isNaN(r)?n-r:e.label.localeCompare(t.label,void 0,{numeric:!0,sensitivity:`base`})}),t}),_=t(()=>p.value.length>100),v=h(t(()=>{if(!c.currentFilter?.conditions[0])return _.value?`condition`:`values`;let e=c.currentFilter.conditions[0];return e.selectedValues&&e.selectedValues.size>0?`values`:`condition`}).value),S=t(()=>c.currentFilter?.conditions[0]?c.currentFilter.conditions[0].selectedValues??new Set:new Set),C=t(()=>c.currentFilter?.conditions[0]?c.currentFilter.conditions[0].includeBlank??!0:!0),T=h(``),E=h(new Set(S.value)),D=h(C.value),{conditions:O,combination:k,updateCondition:A,addCondition:j,removeCondition:M}=Q(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`contains`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.conditions[0];if(e.selectedValues&&e.selectedValues.size>0)return[{operator:`contains`,value:``,valueTo:``,nextOperator:`and`}];let t=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(e=>{let n=e;return{operator:n.operator,value:n.value??``,valueTo:``,nextOperator:n.nextOperator??t}})}).value,c.currentFilter?.combination??`and`),N=t(()=>{if(!T.value)return p.value;let e=T.value.toLowerCase();return p.value.filter(t=>t.label.toLowerCase().includes(e))}),P=t(()=>c.distinctValues.some(e=>e==null||e===``)),F=t(()=>N.value.every(e=>E.value.has(e.key))&&(!P.value||D.value));function I(){E.value=new Set(N.value.map(e=>e.key)),P.value&&(D.value=!0)}function L(){E.value=new Set,D.value=!1}function R(e){let t=new Set(E.value);t.has(e)?t.delete(e):t.add(e),E.value=t}function ee(){if(v.value===`values`){if(p.value.every(e=>E.value.has(e.key))&&(!P.value||D.value)){l(`apply`,null);return}l(`apply`,{conditions:[{type:`text`,operator:`equals`,selectedValues:E.value,includeBlank:D.value}],combination:`and`})}else{let e=O.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.value.trim()!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`text`,operator:e.operator,value:e.value,nextOperator:e.nextOperator})),combination:`and`})}}function z(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,he,[r(` Mode toggle - only show if not too many values `),_.value?r(`v-if`,!0):(m(),i(`div`,ge,[a(`button`,{type:`button`,class:u({active:v.value===`values`}),onClick:n[0]||=e=>v.value=`values`},` Values `,2),a(`button`,{type:`button`,class:u({active:v.value===`condition`}),onClick:n[1]||=e=>v.value=`condition`},` Condition `,2)])),r(` Too many values message `),_.value&&v.value===`condition`?(m(),i(`div`,_e,` Too many unique values (`+y(p.value.length)+`). Use conditions to filter. `,1)):r(`v-if`,!0),r(` VALUES MODE `),v.value===`values`?(m(),i(e,{key:2},[r(` Search input `),w(a(`input`,{"onUpdate:modelValue":n[2]||=e=>T.value=e,class:`gp-grid-filter-search`,type:`text`,placeholder:`Search...`,autofocus:``},null,512),[[x,T.value]]),r(` Select all / Deselect all `),a(`div`,ve,[a(`button`,{type:`button`,disabled:F.value,onClick:I},` Select All `,8,ye),a(`button`,{type:`button`,onClick:L},` Deselect All `)]),r(` Checkbox list `),a(`div`,be,[r(` Blanks option `),P.value?(m(),i(`label`,xe,[a(`input`,{type:`checkbox`,checked:D.value,onChange:n[3]||=e=>D.value=!D.value},null,40,Se),n[5]||=a(`span`,{class:`gp-grid-filter-blank`},`(Blanks)`,-1)])):r(`v-if`,!0),r(` Values `),(m(!0),i(e,null,g(N.value,e=>(m(),i(`label`,{key:e.key,class:`gp-grid-filter-option`},[a(`input`,{type:`checkbox`,checked:E.value.has(e.key),onChange:t=>R(e.key)},null,40,Ce),a(`span`,null,y(e.label),1)]))),128))])],64)):r(`v-if`,!0),r(` CONDITION MODE `),v.value===`condition`?(m(),i(e,{key:3},[(m(!0),i(e,null,g(b(O),(t,n)=>(m(),i(`div`,{key:n,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),n>0?(m(),i(`div`,we,[a(`button`,{type:`button`,class:u({active:b(O)[n-1]?.nextOperator===`and`}),onClick:e=>b(A)(n-1,{nextOperator:`and`})},` AND `,10,Te),a(`button`,{type:`button`,class:u({active:b(O)[n-1]?.nextOperator===`or`}),onClick:e=>b(A)(n-1,{nextOperator:`or`})},` OR `,10,Ee)])):r(`v-if`,!0),a(`div`,De,[r(` Operator select `),a(`select`,{value:t.operator,autofocus:n===0,onChange:e=>b(A)(n,{operator:e.target.value})},[(m(),i(e,null,g(s,e=>a(`option`,{key:e.value,value:e.value},y(e.label),9,ke)),64))],40,Oe),r(` Text input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`text`,value:t.value,placeholder:`Value`,class:`gp-grid-filter-text-input`,onInput:e=>b(A)(n,{value:e.target.value})},null,40,Ae)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),b(O).length>1?(m(),i(`button`,{key:1,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>b(M)(n)},` × `,8,je)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[4]||=e=>b(j)(`contains`)},` + Add condition `)],64)):r(`v-if`,!0),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:z},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:ee},` Apply `)])]))}}),Ne={class:`gp-grid-filter-content gp-grid-filter-number`},Pe={key:0,class:`gp-grid-filter-combination`},Fe=[`onClick`],Ie=[`onClick`],Le={class:`gp-grid-filter-row`},Re=[`value`,`onChange`],ze=[`value`],Be=[`value`,`onInput`],Ve=[`value`,`onInput`],He=[`onClick`],Ue=c({__name:`NumberFilterContent`,props:{currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`>=`,label:`≥`},{value:`<=`,label:`≤`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}],c=n,l=o,{conditions:d,combination:f,updateCondition:p,addCondition:h,removeCondition:_}=Q(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(t=>{let n=t;return{operator:n.operator,value:n.value==null?``:String(n.value),valueTo:n.valueTo==null?``:String(n.valueTo),nextOperator:n.nextOperator??e}})}).value,c.currentFilter?.combination??`and`);function v(){let e=d.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`number`,operator:e.operator,value:e.value?parseFloat(e.value):void 0,valueTo:e.valueTo?parseFloat(e.valueTo):void 0,nextOperator:e.nextOperator})),combination:`and`})}function x(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,Ne,[(m(!0),i(e,null,g(b(d),(t,o)=>(m(),i(`div`,{key:o,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),o>0?(m(),i(`div`,Pe,[a(`button`,{type:`button`,class:u({active:b(d)[o-1]?.nextOperator===`and`}),onClick:e=>b(p)(o-1,{nextOperator:`and`})},` AND `,10,Fe),a(`button`,{type:`button`,class:u({active:b(d)[o-1]?.nextOperator===`or`}),onClick:e=>b(p)(o-1,{nextOperator:`or`})},` OR `,10,Ie)])):r(`v-if`,!0),a(`div`,Le,[r(` Operator select `),a(`select`,{value:t.operator,onChange:e=>b(p)(o,{operator:e.target.value})},[(m(),i(e,null,g(s,e=>a(`option`,{key:e.value,value:e.value},y(e.label),9,ze)),64))],40,Re),r(` Number input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`number`,value:t.value,placeholder:`Value`,onInput:e=>b(p)(o,{value:e.target.value})},null,40,Be)):r(`v-if`,!0),r(` Second number input for "between" `),t.operator===`between`?(m(),i(e,{key:1},[n[1]||=a(`span`,{class:`gp-grid-filter-to`},`to`,-1),a(`input`,{type:`number`,value:t.valueTo,placeholder:`Value`,onInput:e=>b(p)(o,{valueTo:e.target.value})},null,40,Ve)],64)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),b(d).length>1?(m(),i(`button`,{key:2,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>b(_)(o)},` × `,8,He)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[0]||=e=>b(h)(`=`)},` + Add condition `),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:x},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:v},` Apply `)])]))}}),We={class:`gp-grid-filter-content gp-grid-filter-date`},Ge={key:0,class:`gp-grid-filter-combination`},Ke=[`onClick`],qe=[`onClick`],Je={class:`gp-grid-filter-row`},Ye=[`value`,`onChange`],Xe=[`value`],Ze=[`value`,`onInput`],Qe=[`value`,`onInput`],$e=[`onClick`],et=c({__name:`DateFilterContent`,props:{currentFilter:{}},emits:[`apply`,`close`],setup(n,{emit:o}){let s=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}],c=n,l=o;function d(e){if(!e)return``;let t=typeof e==`string`?new Date(e):e;return isNaN(t.getTime())?``:t.toISOString().split(`T`)[0]}let{conditions:f,combination:p,updateCondition:h,addCondition:_,removeCondition:v}=Q(t(()=>{if(!c.currentFilter?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let e=c.currentFilter.combination??`and`;return c.currentFilter.conditions.map(t=>{let n=t;return{operator:n.operator,value:d(n.value),valueTo:d(n.valueTo),nextOperator:n.nextOperator??e}})}).value,c.currentFilter?.combination??`and`);function x(){let e=f.value.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){l(`apply`,null);return}l(`apply`,{conditions:e.map(e=>({type:`date`,operator:e.operator,value:e.value||void 0,valueTo:e.valueTo||void 0,nextOperator:e.nextOperator})),combination:`and`})}function S(){l(`apply`,null)}return(t,n)=>(m(),i(`div`,We,[(m(!0),i(e,null,g(b(f),(t,o)=>(m(),i(`div`,{key:o,class:`gp-grid-filter-condition`},[r(` Combination toggle (AND/OR) for conditions after the first `),o>0?(m(),i(`div`,Ge,[a(`button`,{type:`button`,class:u({active:b(f)[o-1]?.nextOperator===`and`}),onClick:e=>b(h)(o-1,{nextOperator:`and`})},` AND `,10,Ke),a(`button`,{type:`button`,class:u({active:b(f)[o-1]?.nextOperator===`or`}),onClick:e=>b(h)(o-1,{nextOperator:`or`})},` OR `,10,qe)])):r(`v-if`,!0),a(`div`,Je,[r(` Operator select `),a(`select`,{value:t.operator,onChange:e=>b(h)(o,{operator:e.target.value})},[(m(),i(e,null,g(s,e=>a(`option`,{key:e.value,value:e.value},y(e.label),9,Xe)),64))],40,Ye),r(` Date input (hidden for blank/notBlank) `),t.operator!==`blank`&&t.operator!==`notBlank`?(m(),i(`input`,{key:0,type:`date`,value:t.value,onInput:e=>b(h)(o,{value:e.target.value})},null,40,Ze)):r(`v-if`,!0),r(` Second date input for "between" `),t.operator===`between`?(m(),i(e,{key:1},[n[1]||=a(`span`,{class:`gp-grid-filter-to`},`to`,-1),a(`input`,{type:`date`,value:t.valueTo,onInput:e=>b(h)(o,{valueTo:e.target.value})},null,40,Qe)],64)):r(`v-if`,!0),r(` Remove button (only if more than one condition) `),b(f).length>1?(m(),i(`button`,{key:2,type:`button`,class:`gp-grid-filter-remove`,onClick:e=>b(v)(o)},` × `,8,$e)):r(`v-if`,!0)])]))),128)),r(` Add condition button `),a(`button`,{type:`button`,class:`gp-grid-filter-add`,onClick:n[0]||=e=>b(_)(`=`)},` + Add condition `),r(` Apply/Clear buttons `),a(`div`,{class:`gp-grid-filter-buttons`},[a(`button`,{type:`button`,class:`gp-grid-filter-btn-clear`,onClick:S},` Clear `),a(`button`,{type:`button`,class:`gp-grid-filter-btn-apply`,onClick:x},` Apply `)])]))}}),tt={class:`gp-grid-filter-header`},nt=c({__name:`FilterPopup`,props:{column:{},colIndex:{},containerRef:{},distinctValues:{},currentFilter:{}},emits:[`apply`,`close`],setup(o,{emit:c}){let l=o,u=c,g=h(null),_=h(0),v=h(0),b=h(200),x=h(!1);Z(g,{onClose:()=>u(`close`),ignoreSelector:`.gp-grid-filter-icon`});let S=t(()=>l.column.colId??l.column.field);function w(e){u(`apply`,S.value,e),u(`close`)}function T(){u(`close`)}let E=t(()=>l.column.cellDataType);t(()=>E.value===`text`||E.value===`object`);let D=t(()=>E.value===`number`),O=t(()=>E.value===`date`||E.value===`dateString`||E.value===`dateTime`||E.value===`dateTimeString`),k=null,A=()=>{let e=l.containerRef,t=g.value;if(!e||!t)return;let n=e.querySelector(`[data-col-index="${l.colIndex}"]`);if(!n)return;let r=P(n,t);_.value=r.top,v.value=r.left,b.value=r.minWidth,x.value=!0},j=()=>{k===null&&(k=requestAnimationFrame(()=>{k=null,A()}))};C(()=>{l.colIndex,A()},{flush:`post`}),f(()=>{window.addEventListener(`scroll`,j,{passive:!0,capture:!0}),window.addEventListener(`resize`,j)}),p(()=>{window.removeEventListener(`scroll`,j,{capture:!0}),window.removeEventListener(`resize`,j),k!==null&&cancelAnimationFrame(k)});let M=t(()=>({position:`fixed`,top:`${_.value}px`,left:`${v.value}px`,minWidth:`${b.value}px`,zIndex:1e4,visibility:x.value?`visible`:`hidden`}));return(t,c)=>(m(),i(`div`,{ref_key:`popupRef`,ref:g,class:`gp-grid-filter-popup`,style:d(M.value)},[a(`div`,tt,` Filter: `+y(o.column.headerName??o.column.field),1),r(` Number filter `),D.value?(m(),n(Ue,{key:0,"current-filter":o.currentFilter,onApply:w,onClose:T},null,8,[`current-filter`])):O.value?(m(),i(e,{key:1},[r(` Date filter `),s(et,{"current-filter":o.currentFilter,onApply:w,onClose:T},null,8,[`current-filter`])],2112)):(m(),i(e,{key:2},[r(` Text filter (default) `),s(Me,{"distinct-values":o.distinctValues,"value-formatter":o.column.valueFormatter,"current-filter":o.currentFilter,onApply:w,onClose:T},null,8,[`distinct-values`,`value-formatter`,`current-filter`])],2112))],4))}}),rt=e=>e==null||e===``?o(``):typeof e==`string`?o(e):e,$=(e,t)=>typeof e==`function`?rt(e(t)):l(e,t);function it(t){let{column:n,colIndex:r,sortDirection:i,sortIndex:a,sortable:o,filterable:s,hasFilter:c,core:u,container:d,headerRenderers:f,globalHeaderRenderer:p}=t,m={column:n,colIndex:r,sortDirection:i,sortIndex:a,sortable:o,filterable:s,hasFilter:c,onSort:(e,t)=>{u&&o&&u.setSort(n.colId??n.field,e,t)},onFilterClick:()=>{if(u&&s){let e=d?.querySelector(`[data-col-index="${r}"]`);if(e){let t=e.getBoundingClientRect();u.openFilterPopup(r,{top:t.top,left:t.left,width:t.width,height:t.height})}}}};if(n.headerRenderer!=null)if(typeof n.headerRenderer==`string`){let e=f[n.headerRenderer];if(e)return $(e,m)}else return $(n.headerRenderer,m);if(p)return $(p,m);let h=[l(`span`,{class:`gp-grid-header-text`},n.headerName??n.field)],g=[];if(o){let e=[l(`span`,{class:`gp-grid-sort-arrows-stack`},[l(`svg`,{class:`gp-grid-sort-arrow-up${i===`asc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`},[l(`path`,{d:`M4 0L8 6H0L4 0Z`,fill:`currentColor`})]),l(`svg`,{class:`gp-grid-sort-arrow-down${i===`desc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`},[l(`path`,{d:`M4 6L0 0H8L4 6Z`,fill:`currentColor`})])])];a!==void 0&&a>0&&e.push(l(`span`,{class:`gp-grid-sort-index`},String(a))),g.push(l(`span`,{class:`gp-grid-sort-arrows`},e))}return s&&g.push(l(`span`,{class:`gp-grid-filter-icon${c?` active`:``}`,onPointerdown:e=>{e.stopPropagation(),e.preventDefault(),m.onFilterClick()},onClick:e=>{e.stopPropagation()}},[l(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`currentColor`},[l(`path`,{d:`M4 4h16l-6 8v5l-4 2v-7L4 4z`})])])),g.length>0&&h.push(l(`span`,{class:`gp-grid-header-icons`},g)),l(e,h)}const at=[`data-col-index`,`onPointerdown`],ot=[`onPointerdown`],st=c({__name:`GridHeader`,props:{headerHeight:{},scrollLeft:{},contentWidth:{},totalWidth:{},isLoading:{type:Boolean},visibleColumnsWithIndices:{},columnPositions:{},columnWidths:{},headers:{},sortingEnabled:{type:Boolean},onHeaderMouseDown:{type:Function},onHeaderResizeMouseDown:{type:Function},coreRef:{},outerContainerRef:{},headerRenderers:{},globalHeaderRenderer:{type:Function}},setup(t){let o=t;return(t,s)=>(m(),i(`div`,{class:u([`gp-grid-header`,{"gp-grid-header--loading":o.isLoading}]),style:d({height:`${o.headerHeight}px`})},[a(`div`,{style:d({position:`absolute`,top:0,left:0,transform:`translateX(${-o.scrollLeft}px)`,width:`${Math.max(o.contentWidth,o.totalWidth)}px`,height:`${o.headerHeight}px`})},[(m(!0),i(e,null,g(o.visibleColumnsWithIndices,({column:e,originalIndex:t},a)=>(m(),i(`div`,{key:e.colId??e.field,class:`gp-grid-header-cell`,"data-col-index":t,style:d({left:`${o.columnPositions[a]}px`,width:`${o.columnWidths[a]}px`,height:`${o.headerHeight}px`}),onPointerdown:e=>o.onHeaderMouseDown(t,o.columnWidths[a]??0,o.headerHeight,e)},[(m(),n(_(b(it)({column:e,colIndex:t,sortDirection:o.headers.get(t)?.sortDirection,sortIndex:o.headers.get(t)?.sortIndex,sortable:e.sortable!==!1&&o.sortingEnabled,filterable:e.filterable!==!1,hasFilter:o.headers.get(t)?.hasFilter??!1,core:o.coreRef,container:o.outerContainerRef,headerRenderers:o.headerRenderers,globalHeaderRenderer:o.globalHeaderRenderer})))),e.resizable===!1?r(`v-if`,!0):(m(),i(`div`,{key:0,class:`gp-grid-header-resize-handle`,onPointerdown:T(e=>o.onHeaderResizeMouseDown(t,o.columnWidths[a]??0,e),[`stop`])},null,40,ot))],44,at))),128))],4)],6))}});function ct(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,isActive:a,isSelected:s,isEditing:c,cellRenderers:l,globalCellRenderer:u}=e,d=ae(n,t.field),f={value:t.valueFormatter?t.valueFormatter(d):d,rowData:n,column:t,rowIndex:r,colIndex:i,isActive:a,isSelected:s,isEditing:c};if(t.cellRenderer!=null)if(typeof t.cellRenderer==`string`){let e=l[t.cellRenderer];if(e)return $(e,f)}else return $(t.cellRenderer,f);return u?$(u,f):o(ie(d,t.valueFormatter))}function lt(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,initialValue:a,core:s,editRenderers:c,globalEditRenderer:u}=e;if(!s)return o(``);let d=oe(n,t.field),f={value:t.valueFormatter?t.valueFormatter(d):d,rowData:n,column:t,rowIndex:r,colIndex:i,isActive:!0,isSelected:!0,isEditing:!0,initialValue:a,onValueChange:e=>s.updateEditValue(e),onCommit:()=>s.commitEdit(),onCancel:()=>s.cancelEdit()};if(t.editRenderer!=null)if(typeof t.editRenderer==`string`){let e=c[t.editRenderer];if(e)return $(e,f)}else return $(t.editRenderer,f);return u?$(u,f):l(`input`,{class:`gp-grid-edit-input`,type:`text`,value:a==null?``:String(a),autofocus:!0,onFocus:e=>e.target.select(),onInput:e=>s.updateEditValue(e.target.value),onKeydown:e=>{e.stopPropagation(),e.key===`Enter`?s.commitEdit():e.key===`Escape`?s.cancelEdit():e.key===`Tab`&&(e.preventDefault(),s.commitEdit(),s.selection.moveFocus(e.shiftKey?`left`:`right`,!1))},onBlur:()=>s.commitEdit()})}const ut=[`data-cell-row`,`data-cell-col`,`onPointerdown`,`onDblclick`,`onMouseenter`],dt={key:0,class:`gp-grid-error`},ft={key:1,class:`gp-grid-empty`},pt=c({__name:`GridBody`,props:{rowHeight:{},totalHeaderHeight:{},contentWidth:{},contentHeight:{},totalWidth:{},rowsWrapperOffset:{},activeCell:{},selectionRange:{},editingCell:{},hoverPosition:{},error:{},isLoading:{type:Boolean},totalRows:{},slotsArray:{},visibleColumnsWithIndices:{},columnPositions:{},columnWidths:{},fillHandlePosition:{},dragState:{},onScroll:{type:Function},onWheel:{type:Function},wheelDampening:{},onCellMouseDown:{type:Function},onCellDoubleClick:{type:Function},onCellMouseEnter:{type:Function},onCellMouseLeave:{type:Function},onFillHandleMouseDown:{type:Function},coreRef:{},cellRenderers:{},editRenderers:{},globalCellRenderer:{},globalEditRenderer:{}},setup(t,{expose:o}){let s=t,c=h(null),l=e=>[`gp-grid-row`,...s.coreRef?.highlight?.computeRowClasses(e.rowIndex,e.rowData)??[]].filter(Boolean).join(` `),f=(e,t,n,r,i)=>{let a=W(e,t,s.editingCell),o=j(U(e,t,s.activeCell),K(e,t,s.selectionRange),a,G(e,t,s.dragState.dragType===`fill`,s.dragState.fillSourceRange,s.dragState.fillTarget)),c=s.coreRef?.highlight?.computeCombinedCellClasses(e,t,n,r)??[],l=n.rowDrag===!0;return[o,...c,l?`gp-grid-cell--row-drag-handle`:``].filter(Boolean).join(` `)};return o({bodyRef:c}),(t,o)=>(m(),i(`div`,{ref_key:`bodyRef`,ref:c,style:{flex:`1`,overflow:`auto`,position:`relative`},onScroll:o[2]||=(...e)=>s.onScroll&&s.onScroll(...e),onWheel:o[3]||=e=>s.onWheel(e,s.wheelDampening)},[r(` Content sizer - provides scroll range `),a(`div`,{style:d({width:`${Math.max(s.contentWidth,s.totalWidth)}px`,height:`${Math.max(s.contentHeight-s.totalHeaderHeight,0)}px`,position:`relative`,minWidth:`100%`})},[r(` Rows wrapper `),a(`div`,{class:`gp-grid-rows-wrapper`,style:d({width:`${Math.max(s.contentWidth,s.totalWidth)}px`,transform:`translateY(${s.rowsWrapperOffset}px)`})},[r(` Row slots `),(m(!0),i(e,null,g(s.slotsArray.filter(e=>e.rowIndex>=0),t=>(m(),i(`div`,{key:t.slotId,class:u(l(t)),style:d({position:`absolute`,top:0,left:0,transform:`translateY(${t.translateY}px)`,width:`${Math.max(s.contentWidth,s.totalWidth)}px`,height:`${s.rowHeight}px`})},[(m(!0),i(e,null,g(s.visibleColumnsWithIndices,({column:a,originalIndex:c},l)=>(m(),i(`div`,{key:`${t.slotId}-${a.colId??a.field}`,class:u(f(t.rowIndex,c,a,t.rowData,s.hoverPosition)),"data-cell-row":t.rowIndex,"data-cell-col":c,style:d({position:`absolute`,left:`${s.columnPositions[l]}px`,top:0,width:`${s.columnWidths[l]}px`,height:`${s.rowHeight}px`}),onPointerdown:e=>s.onCellMouseDown(t.rowIndex,c,e),onDblclick:()=>s.onCellDoubleClick(t.rowIndex,c),onMouseenter:()=>s.onCellMouseEnter(t.rowIndex,c),onMouseleave:o[0]||=(...e)=>s.onCellMouseLeave&&s.onCellMouseLeave(...e)},[r(` Edit mode `),b(W)(t.rowIndex,c,s.editingCell)&&s.editingCell?(m(),n(_(b(lt)({column:a,rowData:t.rowData,rowIndex:t.rowIndex,colIndex:c,initialValue:s.editingCell.initialValue,core:s.coreRef,editRenderers:s.editRenderers,globalEditRenderer:s.globalEditRenderer})),{key:0})):(m(),i(e,{key:1},[r(` View mode `),(m(),n(_(b(ct)({column:a,rowData:t.rowData,rowIndex:t.rowIndex,colIndex:c,isActive:b(U)(t.rowIndex,c,s.activeCell),isSelected:b(K)(t.rowIndex,c,s.selectionRange),isEditing:!1,cellRenderers:s.cellRenderers,globalCellRenderer:s.globalCellRenderer}))))],64))],46,ut))),128))],6))),128)),r(` Fill handle `),s.fillHandlePosition&&!s.editingCell?(m(),i(`div`,{key:0,class:`gp-grid-fill-handle`,style:d({top:`${s.fillHandlePosition.top}px`,left:`${s.fillHandlePosition.left}px`}),onPointerdown:o[1]||=(...e)=>s.onFillHandleMouseDown&&s.onFillHandleMouseDown(...e)},null,36)):r(`v-if`,!0),r(` Row drop indicator `),s.dragState.dragType===`row-drag`&&s.dragState.rowDrag?.dropTargetIndex!==null?(m(),i(`div`,{key:1,class:`gp-grid-row-drop-indicator`,style:d({transform:`translateY(${s.dragState.rowDrag.dropIndicatorY}px)`,width:`${Math.max(s.contentWidth,s.totalWidth)}px`})},null,4)):r(`v-if`,!0)],4)],4),r(` Error message `),s.error?(m(),i(`div`,dt,` Error: `+y(s.error),1)):r(`v-if`,!0),r(` Empty state `),!s.isLoading&&!s.error&&s.totalRows===0?(m(),i(`div`,ft,` No data to display `)):r(`v-if`,!0)],544))}}),mt=c({__name:`CellPeek`,props:{peekCell:{},column:{},rowData:{},containerRef:{},cellRenderers:{},globalCellRenderer:{}},emits:[`close`],setup(e,{emit:r}){let a=e,o=r,s=h(null),c=h(0),l=h(0),u=h(0),g=h(!1),v=null,y=()=>{let e=a.containerRef,t=s.value;if(!e||!t)return;let n=e.querySelector(`[data-cell-row="${a.peekCell.row}"][data-cell-col="${a.peekCell.col}"]`);if(!n){o(`close`);return}let r=n.getBoundingClientRect();c.value=r.top,l.value=r.left,u.value=r.width,g.value=!0},b=()=>{v===null&&(v=requestAnimationFrame(()=>{v=null,y()}))},x=e=>{let t=e.target;s.value?.contains(t)||o(`close`)},C=null,w=null;f(()=>{y(),window.addEventListener(`scroll`,b,{passive:!0,capture:!0}),window.addEventListener(`resize`,b),s.value&&(w=k(s.value)),C=requestAnimationFrame(()=>{document.addEventListener(`pointerdown`,x)})}),p(()=>{window.removeEventListener(`scroll`,b,{capture:!0}),window.removeEventListener(`resize`,b),document.removeEventListener(`pointerdown`,x),w?.(),v!==null&&cancelAnimationFrame(v),C!==null&&cancelAnimationFrame(C)}),S(()=>[a.peekCell.row,a.peekCell.col],()=>y(),{flush:`post`});let T=t(()=>({position:`fixed`,top:`${c.value}px`,left:`${l.value}px`,width:`${u.value}px`,visibility:g.value?`visible`:`hidden`})),E=t(()=>ct({column:a.column,rowData:a.rowData,rowIndex:a.peekCell.row,colIndex:a.peekCell.col,isActive:!0,isSelected:!1,isEditing:!1,cellRenderers:a.cellRenderers,globalCellRenderer:a.globalCellRenderer}));return(e,t)=>(m(),i(`div`,{ref_key:`overlayRef`,ref:s,class:`gp-grid-cell-peek`,style:d(T.value)},[(m(),n(_(E.value)))],4))}}),ht={key:1,class:`gp-grid-loading`},gt=c({__name:`GpGrid`,props:{columns:{},dataSource:{},rowData:{},rowHeight:{},headerHeight:{},overscan:{default:3},rowLoading:{},sortingEnabled:{type:Boolean,default:!0},darkMode:{type:Boolean,default:!1},wheelDampening:{default:.1},cellRenderers:{default:()=>({})},editRenderers:{default:()=>({})},headerRenderers:{default:()=>({})},cellRenderer:{},editRenderer:{},headerRenderer:{},initialWidth:{},initialHeight:{},highlighting:{},getRowId:{},onCellValueChanged:{},loadingComponent:{},rowDragEntireRow:{type:Boolean},onRowDragEnd:{},onColumnResized:{},onColumnMoved:{}},setup(o,{expose:c}){let l=o,g=h(null),x=h(null),C=t(()=>x.value?.bodyRef??null),w=v(null),T=v(null),E=v(null),O=h(0),{state:k,applyInstructions:A,reset:j}=J({initialWidth:l.initialWidth,initialHeight:l.initialHeight}),M=t(()=>l.headerHeight??l.rowHeight),N=t(()=>k.value.columns??l.columns),P=t(()=>N.value.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>!e.hidden)),I=t(()=>F(P.value.map(e=>e.column),k.value.viewportWidth)),R=t(()=>I.value.positions),z=t(()=>I.value.widths),B=t(()=>ce(R.value)),V=t(()=>Array.from(k.value.slots.values())),{handleCellMouseDown:te,handleCellDoubleClick:ne,handleFillHandleMouseDown:re,handleHeaderClick:ie,handleHeaderMouseDown:ae,handleHeaderResizeMouseDown:oe,handleKeyDown:se,handlePaste:H,handleWheel:le,dragState:U}=X(w,C,N,{activeCell:t(()=>k.value.activeCell),selectionRange:t(()=>k.value.selectionRange),editingCell:t(()=>k.value.editingCell),filterPopupOpen:t(()=>k.value.filterPopup?.isOpen??!1),rowHeight:l.rowHeight,headerHeight:M.value,columnPositions:R,visibleColumnsWithIndices:P,slots:t(()=>k.value.slots),rowsWrapperOffset:t(()=>k.value.rowsWrapperOffset)}),{fillHandlePosition:ue}=me({activeCell:t(()=>k.value.activeCell),selectionRange:t(()=>k.value.selectionRange),slots:t(()=>k.value.slots),columns:N,visibleColumnsWithIndices:P,columnPositions:R,columnWidths:z,rowHeight:l.rowHeight});function W(){let e=C.value,t=w.value;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)}function de(){let e=C.value;e&&(O.value=e.scrollLeft),W()}function G(e,t){let n=w.value;n&&n.setFilter(e,t)}function fe(){let e=w.value;e&&e.closeFilterPopup()}function K(){w.value?.stopPeek()}let q=t(()=>{let e=k.value.peekCell;if(!e)return null;let t=N.value[e.col],n=V.value.find(t=>t.rowIndex===e.row);return!t||!n?null:{peek:e,column:t,rowData:n.rowData}});function pe(e,t){w.value?.input.handleCellMouseEnter(e,t)}function Y(){w.value?.input.handleCellMouseLeave()}function Z(){return l.dataSource??(l.rowData?ee(l.rowData):L([]))}function Q(e){E.value&&=(E.value(),null),w.value&&w.value.destroy();let t=new D({columns:l.columns,dataSource:e,rowHeight:l.rowHeight,headerHeight:M.value,overscan:l.overscan,rowLoading:l.rowLoading,sortingEnabled:l.sortingEnabled,highlighting:l.highlighting,getRowId:l.getRowId,onCellValueChanged:l.onCellValueChanged?e=>l.onCellValueChanged?.(e):void 0,rowDragEntireRow:l.rowDragEntireRow??!1,onRowDragEnd:(e,t)=>l.onRowDragEnd?.(e,t),onColumnResized:(e,t)=>l.onColumnResized?.(e,t),onColumnMoved:(e,t)=>l.onColumnMoved?.(e,t)});w.value=t,E.value=t.onBatchInstruction(e=>{A(e)}),t.initialize();let n=C.value;n&&t.setViewport(n.scrollTop,n.scrollLeft,n.clientWidth,n.clientHeight)}return f(()=>{let e=Z();T.value=e,Q(e);let t=C.value;if(t&&typeof ResizeObserver<`u`){let e=new ResizeObserver(()=>{w.value?.setViewport(t.scrollTop,t.scrollLeft,t.clientWidth,t.clientHeight)});e.observe(t),p(()=>{e.disconnect()})}p(()=>{E.value&&=(E.value(),null),w.value&&=(w.value.destroy(),null),T.value&&=(T.value.destroy?.(),null)})}),S([()=>l.dataSource,()=>l.rowData],()=>{l.rowData&&l.rowData.length>1e4&&T.value&&console.warn(`[gp-grid] rowData prop changed with ${l.rowData.length} rows — this triggers a full rebuild. Use useGridData() for efficient updates.`);let e=Z(),t=T.value;t&&t!==e?(t.destroy?.(),T.value=e,w.value?.setDataSource(e)):t||(T.value=e)}),S(()=>l.dataSource,e=>{if(e){let t=e;if(t.subscribe){let e=t.subscribe(()=>{w.value?.refreshFromTransaction()});p(()=>e())}}},{immediate:!0}),S(()=>k.value.pendingScrollTop,e=>{if(e!==null){let t=C.value;t&&(t.scrollTop=e)}},{flush:`post`}),S(()=>l.highlighting,e=>{w.value?.highlight&&e&&w.value.highlight.updateOptions(e)}),c({core:w}),(t,c)=>(m(),i(`div`,{ref_key:`outerContainerRef`,ref:g,class:u([`gp-grid-container`,{"gp-grid-container--dark":o.darkMode}]),style:{width:`100%`,height:`100%`,position:`relative`,display:`flex`,"flex-direction":`column`},tabindex:`0`,onKeydown:c[0]||=(...e)=>b(se)&&b(se)(...e),onPaste:c[1]||=(...e)=>b(H)&&b(H)(...e)},[s(st,{"header-height":M.value,"scroll-left":O.value,"content-width":b(k).contentWidth,"total-width":B.value,"is-loading":b(k).isLoading,"visible-columns-with-indices":P.value,"column-positions":R.value,"column-widths":z.value,headers:b(k).headers,"sorting-enabled":o.sortingEnabled,"on-header-mouse-down":b(ae),"on-header-resize-mouse-down":b(oe),"core-ref":w.value,"outer-container-ref":g.value,"header-renderers":o.headerRenderers??{},"global-header-renderer":o.headerRenderer},null,8,[`header-height`,`scroll-left`,`content-width`,`total-width`,`is-loading`,`visible-columns-with-indices`,`column-positions`,`column-widths`,`headers`,`sorting-enabled`,`on-header-mouse-down`,`on-header-resize-mouse-down`,`core-ref`,`outer-container-ref`,`header-renderers`,`global-header-renderer`]),s(pt,{ref_key:`gridBodyComp`,ref:x,"row-height":o.rowHeight,"total-header-height":M.value,"content-width":b(k).contentWidth,"content-height":b(k).contentHeight,"total-width":B.value,"rows-wrapper-offset":b(k).rowsWrapperOffset,"active-cell":b(k).activeCell,"selection-range":b(k).selectionRange,"editing-cell":b(k).editingCell,"hover-position":b(k).hoverPosition,error:b(k).error,"is-loading":b(k).isLoading,"total-rows":b(k).totalRows,"slots-array":V.value,"visible-columns-with-indices":P.value,"column-positions":R.value,"column-widths":z.value,"fill-handle-position":b(ue),"drag-state":b(U),"on-scroll":de,"on-wheel":b(le),"wheel-dampening":o.wheelDampening,"on-cell-mouse-down":b(te),"on-cell-double-click":b(ne),"on-cell-mouse-enter":pe,"on-cell-mouse-leave":Y,"on-fill-handle-mouse-down":b(re),"core-ref":w.value,"cell-renderers":o.cellRenderers??{},"edit-renderers":o.editRenderers??{},"global-cell-renderer":o.cellRenderer,"global-edit-renderer":o.editRenderer},null,8,`row-height.total-header-height.content-width.content-height.total-width.rows-wrapper-offset.active-cell.selection-range.editing-cell.hover-position.error.is-loading.total-rows.slots-array.visible-columns-with-indices.column-positions.column-widths.fill-handle-position.drag-state.on-wheel.wheel-dampening.on-cell-mouse-down.on-cell-double-click.on-fill-handle-mouse-down.core-ref.cell-renderers.edit-renderers.global-cell-renderer.global-edit-renderer`.split(`.`)),r(` Loading overlay - positioned outside scrollable area to avoid Firefox sticky issues `),b(k).isLoading?(m(),i(`div`,{key:0,style:d({position:`absolute`,top:`${M.value}px`,left:0,right:0,bottom:0,zIndex:50,pointerEvents:`none`})},[c[3]||=a(`div`,{class:`gp-grid-loading-overlay`},null,-1),l.loadingComponent?(m(),n(_(l.loadingComponent),{key:0,"is-loading":!0})):(m(),i(`div`,ht,[...c[2]||=[a(`div`,{class:`gp-grid-loading-spinner`},null,-1)]]))],4)):r(`v-if`,!0),r(` Filter Popup `),b(k).filterPopup?.isOpen&&b(k).filterPopup.column?(m(),n(nt,{key:1,column:b(k).filterPopup.column,"col-index":b(k).filterPopup.colIndex,"container-ref":g.value,"distinct-values":b(k).filterPopup.distinctValues,"current-filter":b(k).filterPopup.currentFilter,onApply:G,onClose:fe},null,8,[`column`,`col-index`,`container-ref`,`distinct-values`,`current-filter`])):r(`v-if`,!0),r(` Cell Peek (read-only multi-line overlay on dblclick of non-editable cell) `),q.value?(m(),n(mt,{key:2,"peek-cell":q.value.peek,column:q.value.column,"row-data":q.value.rowData,"container-ref":g.value,"cell-renderers":o.cellRenderers??{},"global-cell-renderer":o.cellRenderer,onClose:K},null,8,[`peek-cell`,`column`,`row-data`,`container-ref`,`cell-renderers`,`global-cell-renderer`])):r(`v-if`,!0),r(` Column resize line `),b(U).dragType===`column-resize`&&b(U).columnResize?(m(),i(`div`,{key:3,class:`gp-grid-column-resize-line`,style:d({left:`${(R.value[P.value.findIndex(e=>e.originalIndex===b(U).columnResize.colIndex)]??0)+b(U).columnResize.currentWidth-O.value}px`})},null,4)):r(`v-if`,!0),r(` Column move ghost `),b(U).dragType===`column-move`&&b(U).columnMove?(m(),i(e,{key:4},[a(`div`,{class:`gp-grid-column-move-ghost`,style:d({left:`${b(U).columnMove.currentX-b(U).columnMove.ghostWidth/2}px`,top:`${b(U).columnMove.currentY-b(U).columnMove.ghostHeight/2}px`,width:`${b(U).columnMove.ghostWidth}px`,height:`${b(U).columnMove.ghostHeight}px`})},y(N.value[b(U).columnMove.sourceColIndex]?.headerName??N.value[b(U).columnMove.sourceColIndex]?.field??``),5),b(U).columnMove.dropTargetIndex===null?r(`v-if`,!0):(m(),i(`div`,{key:0,class:`gp-grid-column-drop-indicator`,style:d({left:`${(R.value[b(U).columnMove.dropTargetIndex]??0)-O.value}px`,height:`${M.value}px`})},null,4))],64)):r(`v-if`,!0),r(` Row drag ghost (fixed position, follows cursor) `),b(U).dragType===`row-drag`&&b(U).rowDrag?(m(),i(`div`,{key:5,class:`gp-grid-row-drag-ghost`,style:d({left:`${b(U).rowDrag.currentX+12}px`,top:`${b(U).rowDrag.currentY-o.rowHeight/2}px`,width:`${Math.min(300,B.value)}px`,height:`${o.rowHeight}px`})},null,4)):r(`v-if`,!0)],34))}});function _t(e){let n=h(null),r=h(null),{state:i,applyInstructions:a}=J(),o=t(()=>e.headerHeight??e.rowHeight),s=t(()=>e.columns.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>!e.hidden)),c=t(()=>F(s.value.map(e=>e.column),i.value.viewportWidth)),l=t(()=>c.value.positions),u=t(()=>c.value.widths),d=t(()=>ce(l.value)),m=t(()=>Array.from(i.value.slots.values())),{handleCellMouseDown:g,handleCellDoubleClick:_,handleFillHandleMouseDown:v,handleHeaderClick:y,handleKeyDown:b,handlePaste:x,handleWheel:C,dragState:w}=X(r,n,t(()=>e.columns),{activeCell:t(()=>i.value.activeCell),selectionRange:t(()=>i.value.selectionRange),editingCell:t(()=>i.value.editingCell),filterPopupOpen:t(()=>i.value.filterPopup?.isOpen??!1),rowHeight:e.rowHeight,headerHeight:o.value,columnPositions:l,visibleColumnsWithIndices:s,slots:t(()=>i.value.slots),rowsWrapperOffset:t(()=>i.value.rowsWrapperOffset)}),T=()=>{let e=n.value,t=r.value;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)},E=(e,t)=>{let n=r.value;n&&n.setFilter(e,t)},O=()=>{let e=r.value;e&&e.closeFilterPopup()},k=(e,t)=>{r.value?.input.handleCellMouseEnter(e,t)},A=()=>{r.value?.input.handleCellMouseLeave()};f(()=>{let t=e.dataSource??(e.rowData?ee(e.rowData):L([])),i=new D({columns:e.columns,dataSource:t,rowHeight:e.rowHeight,headerHeight:o.value,overscan:e.overscan??3,rowLoading:e.rowLoading,sortingEnabled:e.sortingEnabled??!0,highlighting:e.highlighting,getRowId:e.getRowId,onCellValueChanged:e.onCellValueChanged?t=>e.onCellValueChanged?.(t):void 0});r.value=i;let s=i.onBatchInstruction(e=>{a(e)});i.initialize();let c=n.value;if(c){i.setViewport(c.scrollTop,c.scrollLeft,c.clientWidth,c.clientHeight);let e=new ResizeObserver(()=>{i.setViewport(c.scrollTop,c.scrollLeft,c.clientWidth,c.clientHeight)});e.observe(c),p(()=>{e.disconnect(),s(),r.value=null})}}),S(()=>i.value.pendingScrollTop,e=>{if(e!==null){let t=n.value;t&&(t.scrollTop=e)}},{flush:`post`}),S(()=>e.dataSource,e=>{if(e){let t=e;if(t.subscribe){let e=t.subscribe(()=>{r.value?.refresh()});p(()=>e())}}},{immediate:!0}),S(()=>e.highlighting,e=>{r.value?.highlight&&e&&r.value.highlight.updateOptions(e)});let{fillHandlePosition:M}=me({activeCell:t(()=>i.value.activeCell),selectionRange:t(()=>i.value.selectionRange),slots:t(()=>i.value.slots),columns:t(()=>e.columns),visibleColumnsWithIndices:s,columnPositions:l,columnWidths:u,rowHeight:e.rowHeight});return{containerRef:n,coreRef:r,state:i,slotsArray:m,totalHeaderHeight:o,columnPositions:l,columnWidths:u,totalWidth:d,fillHandlePosition:M,handleScroll:T,handleCellMouseDown:g,handleCellDoubleClick:_,handleFillHandleMouseDown:v,handleHeaderClick:y,handleKeyDown:b,handlePaste:x,handleWheel:C,handleFilterApply:E,handleFilterPopupClose:O,handleCellMouseEnter:k,handleCellMouseLeave:A,dragState:w,isCellSelected:K,isCellActive:U,isCellEditing:W,isCellInFillPreview:G,buildCellClasses:j}}const vt=(e,t)=>{let n=te(e,{getRowId:t.getRowId,debounceMs:t.debounceMs,useWorker:t.useWorker,parallelSort:t.parallelSort});return p(()=>{n.clear()}),{dataSource:n,updateRow:n.updateRow,addRows:n.addRows,removeRows:n.removeRows,updateCell:n.updateCell,clear:n.clear,getRowById:n.getRowById,getTotalRowCount:n.getTotalRowCount,flushTransactions:n.flushTransactions}};export{gt as GpGrid,gt as default,E as GridCore,A as buildCellClasses,M as calculateColumnPositions,I as createClientDataSource,R as createDataSourceFromArray,z as createInitialState,V as createMutableClientDataSource,ne as createServerDataSource,re as findColumnAtX,oe as getCellValue,se as getTotalWidth,H as gridStyles,le as isCellActive,ue as isCellEditing,de as isCellInFillPreview,fe as isCellSelected,q as isRowVisible,ct as renderCell,lt as renderEditCell,it as renderHeader,Y as useAutoScroll,me as useFillHandle,Q as useFilterConditions,Z as useFilterPopup,_t as useGpGrid,vt as useGridData,J as useGridState,X as useInputHandler};

package/dist/styles.css

@@ -88,9 +88,15 @@
    GP Grid - Clean Flat Design
    ============================================================================= */
 
-/* Grid Container */
+/* Grid Container - structural */
 .gp-grid-container {
   outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Visual properties - :where() for zero specificity, consumers can override with a single class */
+:where(.gp-grid-container) {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 13px;
   line-height: 1.5;
@@ -98,12 +104,13 @@
   background-color: var(--gp-grid-bg);
   border: 1px solid var(--gp-grid-border);
   border-radius: 6px;
-  user-select: none;
-  -webkit-user-select: none;
 }
 
 .gp-grid-container:focus {
   outline: none;
+}
+
+:where(.gp-grid-container:focus) {
   border-color: var(--gp-grid-primary);
 }
 
@@ -116,39 +123,43 @@
   position: sticky;
   top: 0;
   left: 0;
-  /* z-index set inline (100) to ensure header stays above rows wrapper */
-  background-color: var(--gp-grid-header-bg);
-  border-bottom: 1px solid var(--gp-grid-border);
   flex-shrink: 0;
   z-index: 11;
   overflow: hidden;
 }
 
+:where(.gp-grid-header) {
+  background-color: var(--gp-grid-header-bg);
+  border-bottom: 1px solid var(--gp-grid-border);
+}
+
 .gp-grid-container .gp-grid-header-cell {
   position: absolute;
   box-sizing: border-box;
+  user-select: none;
+  display: flex;
+  top: 0;
+  touch-action: none;
+}
+
+:where(.gp-grid-header-cell) {
+  align-items: center;
+  padding: 0 12px;
   border-right: 1px solid var(--gp-grid-border);
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 0.5px;
   color: var(--gp-grid-header-text);
   cursor: pointer;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
   background-color: transparent;
   transition: background-color 0.1s ease;
-  top: 0;
-  background: transparent;
-  touch-action: none;
 }
 
-.gp-grid-container .gp-grid-header-cell:hover {
+:where(.gp-grid-header-cell:hover) {
   background-color: var(--gp-grid-hover);
 }
 
-.gp-grid-container .gp-grid-header-cell:active {
+:where(.gp-grid-header-cell:active) {
   background-color: var(--gp-grid-border-light);
 }
 
@@ -157,6 +168,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+:where(.gp-grid-header-text) {
   color: var(--gp-grid-header-text);
 }
 
@@ -184,20 +198,20 @@
   gap: 2px;
 }
 
-.gp-grid-sort-arrow-up,
-.gp-grid-sort-arrow-down {
+:where(.gp-grid-sort-arrow-up),
+:where(.gp-grid-sort-arrow-down) {
   opacity: 0.35;
   transition: opacity 0.15s ease, color 0.15s ease;
   color: var(--gp-grid-text);
 }
 
-.gp-grid-sort-arrow-up.active,
-.gp-grid-sort-arrow-down.active {
+:where(.gp-grid-sort-arrow-up.active),
+:where(.gp-grid-sort-arrow-down.active) {
   opacity: 1;
   color: var(--gp-grid-primary);
 }
 
-.gp-grid-sort-index {
+:where(.gp-grid-sort-index) {
   font-size: 9px;
   color: var(--gp-grid-primary);
   font-weight: 600;
@@ -210,6 +224,9 @@
   justify-content: center;
   width: 20px;
   height: 20px;
+}
+
+:where(.gp-grid-filter-icon) {
   border-radius: 4px;
   cursor: pointer;
   color: var(--gp-grid-text-secondary);
@@ -217,12 +234,12 @@
   margin-left: 2px;
 }
 
-.gp-grid-filter-icon:hover {
+:where(.gp-grid-filter-icon:hover) {
   background-color: var(--gp-grid-hover);
   color: var(--gp-grid-primary);
 }
 
-.gp-grid-filter-icon.active {
+:where(.gp-grid-filter-icon.active) {
   color: var(--gp-grid-primary);
   background-color: var(--gp-grid-primary-light);
 }
@@ -234,6 +251,8 @@
     min-height: 44px;
     width: 44px;
     height: 44px;
+  }
+  :where(.gp-grid-filter-icon) {
     margin-left: 0;
   }
 
@@ -246,6 +265,9 @@
 /* Disabled header state during data loading */
 .gp-grid-header--loading .gp-grid-header-cell {
   pointer-events: none;
+}
+
+:where(.gp-grid-header--loading .gp-grid-header-cell) {
   opacity: 0.6;
   cursor: default;
 }
@@ -265,8 +287,8 @@
   touch-action: none;
 }
 
-.gp-grid-header-resize-handle:hover,
-.gp-grid-header-resize-handle--active {
+:where(.gp-grid-header-resize-handle:hover),
+:where(.gp-grid-header-resize-handle--active) {
   background-color: var(--gp-grid-primary);
   opacity: 0.4;
 }
@@ -284,11 +306,14 @@
   top: 0;
   width: 2px;
   height: 100%;
-  background-color: var(--gp-grid-primary);
   z-index: 1000;
   pointer-events: none;
 }
 
+:where(.gp-grid-column-resize-line) {
+  background-color: var(--gp-grid-primary);
+}
+
 /* =============================================================================
    Column Move
    ============================================================================= */
@@ -296,23 +321,26 @@
 .gp-grid-column-move-ghost {
   position: fixed;
   pointer-events: none;
-  opacity: 0.7;
   z-index: 2000;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:where(.gp-grid-column-move-ghost) {
+  opacity: 0.7;
   background-color: var(--gp-grid-header-bg);
   border: 2px solid var(--gp-grid-primary);
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  display: flex;
-  align-items: center;
   padding: 0 12px;
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 0.5px;
   color: var(--gp-grid-header-text);
-  box-sizing: border-box;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 
 .gp-grid-column-drop-indicator {
@@ -321,9 +349,12 @@
   left: 0;
   width: 3px;
   height: 100%;
-  background-color: var(--gp-grid-primary);
   z-index: 1000;
   pointer-events: none;
+}
+
+:where(.gp-grid-column-drop-indicator) {
+  background-color: var(--gp-grid-primary);
   border-radius: 2px;
 }
 
@@ -359,7 +390,6 @@
   top: 0;
   box-sizing: border-box;
   display: flex;
-  align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -369,6 +399,7 @@
 
 /* Visual properties - :where() for zero specificity, so user highlight classes always win */
 :where(.gp-grid-cell) {
+  align-items: center;
   padding: 0 12px;
   cursor: cell;
   color: var(--gp-grid-text);
@@ -411,17 +442,20 @@
   position: absolute;
   width: 8px;
   height: 8px;
-  background-color: var(--gp-grid-primary);
-  border: 2px solid var(--gp-grid-bg);
-  cursor: crosshair;
   z-index: 11;
   pointer-events: auto;
   box-sizing: border-box;
-  border-radius: 1px;
   touch-action: none;
 }
 
-.gp-grid-fill-handle:hover {
+:where(.gp-grid-fill-handle) {
+  background-color: var(--gp-grid-primary);
+  border: 2px solid var(--gp-grid-bg);
+  cursor: crosshair;
+  border-radius: 1px;
+}
+
+:where(.gp-grid-fill-handle:hover) {
   transform: scale(1.2);
 }
 
@@ -429,13 +463,15 @@
   .gp-grid-fill-handle {
     width: 24px;
     height: 24px;
+  }
+  :where(.gp-grid-fill-handle) {
     border-width: 3px;
     border-radius: 3px;
   }
 }
 
 /* Fill preview (cells being filled) */
-.gp-grid-cell.gp-grid-cell--fill-preview {
+:where(.gp-grid-cell.gp-grid-cell--fill-preview) {
   background-color: var(--gp-grid-primary-light);
   border: 1px dashed var(--gp-grid-primary);
 }
@@ -447,6 +483,9 @@
 .gp-grid-edit-input {
   width: 100%;
   height: 100%;
+}
+
+:where(.gp-grid-edit-input) {
   padding: 0 11px;
   font-family: inherit;
   font-size: inherit;
@@ -459,6 +498,38 @@
   outline: none;
 }
 
+/* =============================================================================
+   Cell Peek (read-only multi-line overlay on dblclick of non-editable cell)
+   ============================================================================= */
+
+/* Structural: positioned absolutely by the framework wrapper; must sit above
+   selection (z:5), editing (z:10), fill handle (z:11). */
+.gp-grid-cell-peek {
+  position: absolute;
+  z-index: 20;
+  box-sizing: border-box;
+  overflow: auto;
+  max-height: 320px;
+}
+
+:where(.gp-grid-cell-peek) {
+  padding: 8px 11px;
+  background-color: var(--gp-grid-bg);
+  color: var(--gp-grid-text);
+  border: 2px solid var(--gp-grid-primary);
+  border-radius: 3px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  cursor: text;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+
 
 /* =============================================================================
    Loading & Error States
@@ -481,12 +552,15 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%; 
+  height: 100%;
   pointer-events: none;
+}
+
+:where(.gp-grid-loading-overlay) {
   background-color: var(--gp-grid-loading-overlay-bg, rgba(255, 255, 255, 0.4));
 }
 
-.gp-grid-container--dark .gp-grid-loading-overlay {
+:where(.gp-grid-container--dark .gp-grid-loading-overlay) {
   background-color: var(--gp-grid-loading-overlay-bg, rgba(0, 0, 0, 0.3));
 }
 
@@ -496,6 +570,13 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  z-index: 1000;
+  display: flex;
+  pointer-events: auto;
+}
+
+:where(.gp-grid-loading) {
+  align-items: center;
   padding: 12px 20px;
   background-color: var(--gp-grid-loading-bg);
   color: var(--gp-grid-loading-text);
@@ -503,20 +584,19 @@
   border: 1px solid var(--gp-grid-border);
   font-weight: 500;
   font-size: 13px;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
   gap: 10px;
-  pointer-events: auto;
 }
 
 .gp-grid-loading-spinner {
   width: 16px;
   height: 16px;
+  animation: gp-grid-spin 0.7s linear infinite;
+}
+
+:where(.gp-grid-loading-spinner) {
   border: 2px solid var(--gp-grid-border);
   border-top-color: var(--gp-grid-primary);
   border-radius: 50%;
-  animation: gp-grid-spin 0.7s linear infinite;
 }
 
 @keyframes gp-grid-spin {
@@ -530,6 +610,12 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  z-index: 1000;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+:where(.gp-grid-error) {
   padding: 12px 20px;
   background-color: var(--gp-grid-error-bg);
   color: var(--gp-grid-error-text);
@@ -537,11 +623,8 @@
   border: 1px solid var(--gp-grid-error-text);
   font-weight: 500;
   font-size: 13px;
-  z-index: 1000;
   max-width: 80%;
   text-align: center;
-  user-select: text;
-  -webkit-user-select: text;
   cursor: text;
 }
 
@@ -554,6 +637,9 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+
+:where(.gp-grid-empty) {
   color: var(--gp-grid-text-muted);
   font-size: 14px;
   text-align: center;
@@ -569,20 +655,20 @@
   height: 8px;
 }
 
-.gp-grid-container::-webkit-scrollbar-track {
+:where(.gp-grid-container)::-webkit-scrollbar-track {
   background-color: var(--gp-grid-scrollbar-track);
 }
 
-.gp-grid-container::-webkit-scrollbar-thumb {
+:where(.gp-grid-container)::-webkit-scrollbar-thumb {
   background-color: var(--gp-grid-scrollbar-thumb);
   border-radius: 4px;
 }
 
-.gp-grid-container::-webkit-scrollbar-thumb:hover {
+:where(.gp-grid-container)::-webkit-scrollbar-thumb:hover {
   background-color: var(--gp-grid-scrollbar-thumb-hover);
 }
 
-.gp-grid-container::-webkit-scrollbar-corner {
+:where(.gp-grid-container)::-webkit-scrollbar-corner {
   background-color: var(--gp-grid-scrollbar-track);
 }
 
@@ -592,17 +678,21 @@
    ============================================================================= */
 
 .gp-grid-filter-popup {
+  max-height: 400px;
+  max-width: min(360px, calc(100vw - 16px));
+  display: flex;
+  flex-direction: column;
+}
+
+:where(.gp-grid-filter-popup) {
   background-color: var(--gp-grid-bg);
   border: 1px solid var(--gp-grid-border);
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  max-height: 400px;
-  display: flex;
-  flex-direction: column;
   font-size: 13px;
 }
 
-.gp-grid-filter-header {
+:where(.gp-grid-filter-header) {
   padding: 10px 12px;
   font-weight: 600;
   border-bottom: 1px solid var(--gp-grid-border-light);
@@ -610,17 +700,23 @@
 }
 
 .gp-grid-filter-content {
-  padding: 10px 12px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
   overflow-y: auto;
   min-height: 0;
 }
 
+:where(.gp-grid-filter-content) {
+  padding: 10px 12px;
+  gap: 10px;
+}
+
 /* Mode toggle (Values / Condition) */
 .gp-grid-filter-mode-toggle {
   display: flex;
+}
+
+:where(.gp-grid-filter-mode-toggle) {
   gap: 4px;
   background-color: var(--gp-grid-bg-alt);
   border-radius: 4px;
@@ -629,6 +725,9 @@
 
 .gp-grid-filter-mode-toggle button {
   flex: 1;
+}
+
+:where(.gp-grid-filter-mode-toggle button) {
   padding: 6px 10px;
   font-size: 11px;
   font-family: inherit;
@@ -640,18 +739,18 @@
   transition: background-color 0.15s ease, color 0.15s ease;
 }
 
-.gp-grid-filter-mode-toggle button:hover {
+:where(.gp-grid-filter-mode-toggle button:hover) {
   color: var(--gp-grid-text);
 }
 
-.gp-grid-filter-mode-toggle button.active {
+:where(.gp-grid-filter-mode-toggle button.active) {
   background-color: var(--gp-grid-bg);
   color: var(--gp-grid-text);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 /* Info message for too many values */
-.gp-grid-filter-info {
+:where(.gp-grid-filter-info) {
   font-size: 11px;
   color: var(--gp-grid-text-secondary);
   padding: 6px 8px;
@@ -663,6 +762,10 @@
 .gp-grid-filter-search {
   width: 100%;
   height: 30px;
+  box-sizing: border-box;
+}
+
+:where(.gp-grid-filter-search) {
   padding: 0 10px;
   font-family: inherit;
   font-size: 12px;
@@ -670,10 +773,9 @@
   border-radius: 4px;
   background-color: var(--gp-grid-input-bg);
   color: var(--gp-grid-text);
-  box-sizing: border-box;
 }
 
-.gp-grid-filter-search:focus {
+:where(.gp-grid-filter-search:focus) {
   outline: none;
   border-color: var(--gp-grid-primary);
 }
@@ -681,11 +783,17 @@
 /* Select All / Deselect All actions */
 .gp-grid-filter-actions {
   display: flex;
+}
+
+:where(.gp-grid-filter-actions) {
   gap: 8px;
 }
 
 .gp-grid-filter-actions button {
   flex: 1;
+}
+
+:where(.gp-grid-filter-actions button) {
   padding: 4px 8px;
   font-size: 11px;
   font-family: inherit;
@@ -696,11 +804,11 @@
   cursor: pointer;
 }
 
-.gp-grid-filter-actions button:hover:not(:disabled) {
+:where(.gp-grid-filter-actions button:hover:not(:disabled)) {
   background-color: var(--gp-grid-hover);
 }
 
-.gp-grid-filter-actions button:disabled {
+:where(.gp-grid-filter-actions button:disabled) {
   opacity: 0.5;
   cursor: not-allowed;
 }
@@ -711,6 +819,9 @@
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+}
+
+:where(.gp-grid-filter-list) {
   gap: 4px;
   border: 1px solid var(--gp-grid-border-light);
   border-radius: 4px;
@@ -720,18 +831,24 @@
 .gp-grid-filter-option {
   display: flex;
   align-items: center;
+}
+
+:where(.gp-grid-filter-option) {
   gap: 8px;
   padding: 4px 6px;
   border-radius: 3px;
   cursor: pointer;
 }
 
-.gp-grid-filter-option:hover {
+:where(.gp-grid-filter-option:hover) {
   background-color: var(--gp-grid-hover);
 }
 
 .gp-grid-filter-option input[type="checkbox"] {
   margin: 0;
+}
+
+:where(.gp-grid-filter-option input[type="checkbox"]) {
   cursor: pointer;
 }
 
@@ -742,7 +859,7 @@
   white-space: nowrap;
 }
 
-.gp-grid-filter-blank {
+:where(.gp-grid-filter-blank) {
   font-style: italic;
   color: var(--gp-grid-text-muted);
 }
@@ -751,17 +868,26 @@
 .gp-grid-filter-condition {
   display: flex;
   flex-direction: column;
+}
+
+:where(.gp-grid-filter-condition) {
   gap: 6px;
 }
 
 .gp-grid-filter-row {
   display: flex;
   align-items: center;
+}
+
+:where(.gp-grid-filter-row) {
   gap: 6px;
 }
 
 .gp-grid-filter-row select {
   height: 30px;
+}
+
+:where(.gp-grid-filter-row select) {
   padding: 0 6px;
   font-family: inherit;
   font-size: 12px;
@@ -778,6 +904,14 @@
 .gp-grid-filter-text-input {
   flex: 1;
   height: 30px;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+:where(.gp-grid-filter-row input[type="number"]),
+:where(.gp-grid-filter-row input[type="date"]),
+:where(.gp-grid-filter-row input[type="text"]),
+:where(.gp-grid-filter-text-input) {
   padding: 0 8px;
   font-family: inherit;
   font-size: 12px;
@@ -785,16 +919,14 @@
   border-radius: 4px;
   background-color: var(--gp-grid-input-bg);
   color: var(--gp-grid-text);
-  min-width: 0;
-  box-sizing: border-box;
 }
 
-.gp-grid-filter-row input:focus {
+:where(.gp-grid-filter-row input:focus) {
   outline: none;
   border-color: var(--gp-grid-primary);
 }
 
-.gp-grid-filter-to {
+:where(.gp-grid-filter-to) {
   font-size: 11px;
   color: var(--gp-grid-text-secondary);
 }
@@ -802,6 +934,9 @@
 .gp-grid-filter-remove {
   width: 24px;
   height: 24px;
+}
+
+:where(.gp-grid-filter-remove) {
   padding: 0;
   font-size: 16px;
   line-height: 1;
@@ -812,7 +947,7 @@
   cursor: pointer;
 }
 
-.gp-grid-filter-remove:hover {
+:where(.gp-grid-filter-remove:hover) {
   background-color: var(--gp-grid-error-bg);
   color: var(--gp-grid-error-text);
 }
@@ -820,12 +955,18 @@
 /* AND/OR combination toggle */
 .gp-grid-filter-combination {
   display: flex;
+}
+
+:where(.gp-grid-filter-combination) {
   gap: 4px;
   margin-bottom: 4px;
 }
 
 .gp-grid-filter-combination button {
   flex: 1;
+}
+
+:where(.gp-grid-filter-combination button) {
   padding: 4px 8px;
   font-size: 10px;
   font-family: inherit;
@@ -836,7 +977,7 @@
   cursor: pointer;
 }
 
-.gp-grid-filter-combination button.active {
+:where(.gp-grid-filter-combination button.active) {
   background-color: var(--gp-grid-primary);
   border-color: var(--gp-grid-primary);
   color: #fff;
@@ -845,6 +986,9 @@
 /* Add condition button */
 .gp-grid-filter-add {
   width: 100%;
+}
+
+:where(.gp-grid-filter-add) {
   padding: 6px;
   font-size: 11px;
   font-family: inherit;
@@ -855,7 +999,7 @@
   cursor: pointer;
 }
 
-.gp-grid-filter-add:hover {
+:where(.gp-grid-filter-add:hover) {
   background-color: var(--gp-grid-hover);
   border-color: var(--gp-grid-primary);
   color: var(--gp-grid-primary);
@@ -864,6 +1008,9 @@
 /* Apply / Clear buttons */
 .gp-grid-filter-buttons {
   display: flex;
+}
+
+:where(.gp-grid-filter-buttons) {
   gap: 8px;
   padding-top: 8px;
   border-top: 1px solid var(--gp-grid-border-light);
@@ -872,6 +1019,10 @@
 .gp-grid-filter-btn-clear,
 .gp-grid-filter-btn-apply {
   flex: 1;
+}
+
+:where(.gp-grid-filter-btn-clear),
+:where(.gp-grid-filter-btn-apply) {
   padding: 8px 12px;
   font-size: 12px;
   font-family: inherit;
@@ -879,23 +1030,23 @@
   cursor: pointer;
 }
 
-.gp-grid-filter-btn-clear {
+:where(.gp-grid-filter-btn-clear) {
   border: 1px solid var(--gp-grid-input-border);
   background-color: var(--gp-grid-bg);
   color: var(--gp-grid-text);
 }
 
-.gp-grid-filter-btn-clear:hover {
+:where(.gp-grid-filter-btn-clear:hover) {
   background-color: var(--gp-grid-hover);
 }
 
-.gp-grid-filter-btn-apply {
+:where(.gp-grid-filter-btn-apply) {
   border: 1px solid var(--gp-grid-primary);
   background-color: var(--gp-grid-primary);
   color: #fff;
 }
 
-.gp-grid-filter-btn-apply:hover {
+:where(.gp-grid-filter-btn-apply:hover) {
   opacity: 0.9;
 }
 
@@ -905,11 +1056,14 @@
    ============================================================================= */
 
 .gp-grid-cell--row-drag-handle {
-  cursor: grab;
   touch-action: none;
 }
 
-.gp-grid-cell--row-drag-handle:active {
+:where(.gp-grid-cell--row-drag-handle) {
+  cursor: grab;
+}
+
+:where(.gp-grid-cell--row-drag-handle:active) {
   cursor: grabbing;
 }
 
@@ -919,6 +1073,9 @@
   justify-content: center;
   width: 100%;
   height: 100%;
+}
+
+:where(.gp-grid-row-drag-icon) {
   color: var(--gp-grid-text-secondary);
 }
 
@@ -930,14 +1087,17 @@
 .gp-grid-row-drag-ghost {
   position: fixed;
   pointer-events: none;
-  opacity: 0.8;
   z-index: 2000;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+:where(.gp-grid-row-drag-ghost) {
+  opacity: 0.8;
   background-color: var(--gp-grid-bg, #fff);
   border: 2px solid var(--gp-grid-primary);
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-  box-sizing: border-box;
 }
 
 .gp-grid-row-drop-indicator {
@@ -945,8 +1105,11 @@
   left: 0;
   width: 100%;
   height: 3px;
-  background-color: var(--gp-grid-primary);
   z-index: 1000;
   pointer-events: none;
+}
+
+:where(.gp-grid-row-drop-indicator) {
+  background-color: var(--gp-grid-primary);
   border-radius: 2px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gp-grid/vue",
   "description": "A high-performance Vue 3 data grid component with virtual scrolling, cell selection, sorting, filtering, and Excel-like editing",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/index.js",
@@ -50,7 +50,7 @@
     "nuxt3"
   ],
   "dependencies": {
-    "@gp-grid/core": "0.16.1"
+    "@gp-grid/core": "0.17.0"
   },
   "peerDependencies": {
     "vue": "^3.4.0"