vue2-excel-grid 1.1.39 → 1.1.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/vue2-excel-grid.esm.js +1394 -59
- package/dist/vue2-excel-grid.umd.js +1 -1
- package/package.json +2 -1
- package/src/components/ExcelGrid.vue +74 -28
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
* (c) 2026
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("xlsx")):"function"==typeof define&&define.amd?define(["exports","xlsx"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).Vue2ExcelGrid={},e.XLSX)}(this,function(e,n){"use strict";function t(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,Object.freeze(n)}var o=t(n);function i(e){return{startRow:Math.min(e.startRow,e.endRow),endRow:Math.max(e.startRow,e.endRow),startCol:Math.min(e.startCol,e.endCol),endCol:Math.max(e.startCol,e.endCol)}}function l(e,n,t){const o=i(t);return e>=o.startRow&&e<=o.endRow&&n>=o.startCol&&n<=o.endCol}function r(e,n){return{startRow:e,endRow:e,startCol:n,endCol:n}}function s(e){const n=[];return function e(t){for(const o of t)o.children&&o.children.length?e(o.children):n.push({...o,_flatIndex:n.length})}(e),n}function a(e){return function e(n){let t=0;for(const o of n)t=o.children&&o.children.length?Math.max(t,1+e(o.children)):Math.max(t,1);return t}(e)}function c(e,n){const t=Array.from({length:n},()=>[]);let o=0;return function e(i,l){for(const r of i)if(r.children&&r.children.length){const n=d(r),i=o;t[l].push({column:r,colspan:n,rowspan:1,isGroup:!0,_firstLeafFlatIndex:i}),e(r.children,l+1)}else{const e=n-l;t[l].push({column:{...r,_flatIndex:o},colspan:1,rowspan:e,isGroup:!1,_firstLeafFlatIndex:o}),o++}}(e,0),t}function d(e){return e.children&&0!==e.children.length?e.children.reduce((e,n)=>e+d(n),0):1}function h(e,n,t,o){const i=n+t;if(o>=n&&o<=i)return e;const l=o>n?Math.max(0,o-t):o;function r(e){return e.children&&e.children.length?e.children.reduce((e,n)=>e+r(n),0):1}let s=0,a=null;const c=function e(t){const o=[];for(const l of t){const t=r(l);s===n&&s+t===i?(a=l,s+=t):s<i&&s+t>n?o.push({...l,children:e(l.children)}):(o.push(l),s+=t)}return o}(e);if(!a)return e;let d=0,h=!1;return function e(n){const t=[];for(let o=0;o<n.length;o++){!h&&d>=l&&(t.push(a),h=!0);const i=n[o],s=r(i);!h&&d+s>l?t.push({...i,children:e(i.children)}):(t.push(i),d+=s)}return h||(t.push(a),h=!0),t}(c)}function g(e,n,t=[]){let o=0;for(let i=0;i<e;i++)o+=void 0!==t[i]?t[i]:n;return o}const u=["Dushanba","Seshanba","Chorshanba","Payshanba","Juma","Shanba","Yakshanba"],p=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],f=["January","February","March","April","May","June","July","August","September","October","November","December"],A=/^\d{4}[-/]\d{2}[-/]\d{2}$/;function C(e){return"string"==typeof e&&A.test(e.trim())}function v(e){if("boolean"==typeof e)return!1;const n=String(e).trim();return""!==n&&(!C(n)&&!isNaN(Number(n)))}function w(e,n){const t=function(e){if(0===e.length)return{type:"copy",step:0,base:null};if(1===e.length)return{type:"copy",step:0,base:e[0]};const n=e.map(e=>u.indexOf(e));if(n.every(e=>e>=0))return{type:"weekday_uz",step:e.length>=2&&(n[1]-n[0]+7)%7||1,base:n[0]};const t=e.map(e=>p.indexOf(e));if(t.every(e=>e>=0))return{type:"weekday_en",step:e.length>=2&&(t[1]-t[0]+7)%7||1,base:t[0]};const o=e.map(e=>f.indexOf(e));if(o.every(e=>e>=0))return{type:"month",step:e.length>=2&&(o[1]-o[0]+12)%12||1,base:o[0]};if(e.every(C)){const n=e.map(e=>new Date(e).getTime());if(n.every(e=>!isNaN(e))){const e=n.slice(1).map((e,t)=>e-n[t]);if(e.every(n=>Math.abs(n-e[0])<864e5))return{type:"date",step:e[0],base:n[0]}}}if(e.every(v)){const n=e.map(e=>Number(e)),t=n.slice(1).map((e,t)=>e-n[t]);if(t.every(e=>Math.abs(e-t[0])<1e-10))return{type:"number",step:t[0],base:n[0]}}return{type:"copy",step:0,base:e[0]}}(e),o=e.length,i=[];for(let l=0;l<n;l++){const n=o+l;switch(t.type){case"number":i.push(t.base+t.step*n);break;case"weekday_uz":i.push(u[(t.base+t.step*n)%7]);break;case"weekday_en":i.push(p[(t.base+t.step*n)%7]);break;case"month":i.push(f[(t.base+t.step*n)%12]);break;case"date":{const e=new Date(t.base+t.step*n);i.push(e.toISOString().split("T")[0]);break}default:i.push(e[n%o])}}return i}function m(e,n,t){const o=[];for(let i=t.startRow;i<=t.endRow;i++){const l=[];for(let o=t.startCol;o<=t.endCol;o++){const t=n[o],r=t&&e[i]?e[i][t.key]:"";l.push(void 0!==r?r:"")}o.push(l)}return o}function x(e,n,t,o,i,l="all",r=null,s=null){const a=e.slice(),c=Math.min(t+i.length-1,e.length-1),d=Math.min(o+(i[0]?i[0].length-1:0),n.length-1),h=[];for(let g=t;g<=c;g++){const c=i[g-t];if(!c)continue;let u=null;for(let t=o;t<=d;t++){const i=n[t];if(i&&((r?r(g,t):!1!==i.editable)&&("all"===l||"values"===l))){const n=c[t-o],l=void 0!==n?n:"";if(s&&!s(g,t,l)){h.push({row:g,col:t,value:l});continue}u||(u={...e[g]||{}},a[g]=u),u[i.key]=l}}}return{newData:a,affectedRange:{startRow:t,endRow:c,startCol:o,endCol:d},skipped:h}}function y(e,n){const t=i(e);return n.some(e=>function(e,n){const t=i(e),o=i(n);return!(t.endRow<o.startRow||t.startRow>o.endRow||t.endCol<o.startCol||t.startCol>o.endCol)}(t,i(e)))}function b(e,n,t){return t.find(t=>{const o=i(t);return e>=o.startRow&&e<=o.endRow&&n>=o.startCol&&n<=o.endCol})||null}function k(e,n,t,o){if(!function(e,n){return Number.isInteger(e)&&Number.isInteger(n)&&e<=n&&e>=0}(n,t))return o;return o.find(o=>o.type===e&&o.startIndex===n&&o.endIndex===t)?o:[...o,{type:e,startIndex:n,endIndex:t}]}function R(e,n,t,o){return o.filter(o=>!(o.type===e&&o.startIndex===n&&o.endIndex===t))}function S(e,n){return n.some(n=>n.type===e.type&&n.startIndex===e.startIndex&&n.endIndex===e.endIndex)}function D(e){const n=[];for(const t of e||[])t.children&&t.children.length?n.push(...D(t.children)):t.key&&n.push(t);return n}function E(e,n,t,o,i){for(let l=n;l<=t;l++)for(let n=o;n<=i;n++)if(""!==((e[l]||[])[n]||"").toString().trim())return!0;return!1}function _(e,n,t){return String((e[n]||[])[t]||"").trim().replace(/\n/g," ")}function I(){return new Promise(e=>setTimeout(e,0))}async function z(e,n,t={},i){const l=(e,n)=>i&&i(e,n);l(5,"Fayl o'qilmoqda..."),await I();const r=await e.arrayBuffer();let s;l(20,"Excel tahlil qilinmoqda..."),await I();try{s=o.read(r,{type:"array",cellDates:!0})}catch(e){throw new Error("Excel fayl o'qib bo'lmadi: "+e.message)}const{sheetName:a}=t;let c;if(a){if(c=s.Sheets[a],!c)throw new Error(`Sheet "${a}" topilmadi`)}else{const e=s.SheetNames[0];if(!e)throw new Error("Workbook bo'sh");c=s.Sheets[e]}l(40,"Ma'lumotlar tayyorlanmoqda..."),await I();const d=o.utils.sheet_to_json(c,{header:1,raw:!1,defval:""});if(!d||0===d.length)throw new Error("Sheet bo'sh");const h=o.utils.decode_range(c["!ref"]||"A1:A1"),g=h.s.r,u=h.s.c,p=(c["!merges"]||[]).map(e=>({s:{r:e.s.r-g,c:e.s.c-u},e:{r:e.e.r-g,c:e.e.c-u}})),f=function(e,n){if(!e||0===e.length)return{headerRow:0,headerEndRow:0,dataStartRow:1};const t=e.map(e=>e.filter(e=>""!==e).length);n=n||[];let o,i,l,r=-1;for(let n=0;n<Math.min(e.length,20);n++){const t=e[n].filter(e=>""!==e);if(t.length<2)continue;const o=t.map(e=>{const n=parseInt(String(e).trim(),10);return isNaN(n)?null:n});if(!o.some(e=>null===e)&&o.every((e,n)=>e===n+1)){r=n;break}}if(r>=0){for(l=r+1,i=r-1;i>=0&&0===t[i];)i--;for(i<0&&(i=0),o=i;o>0&&t[o-1]>1;)o--}else{o=0;for(let n=0;n<Math.min(e.length,20);n++)if(t[n]>1){o=n;break}let r=1;for(const e of n)e.s.r===o&&e.e.r>e.s.r&&(r=Math.max(r,e.e.r-e.s.r+1));i=o+r-1,l=i+1}for(;l<e.length&&0===t[l];)l++;return{headerRow:o,headerEndRow:i,dataStartRow:l}}(d,p),A=null!=t.headerRow?t.headerRow:f.headerRow,C=null!=t.headerEndRow?t.headerEndRow:f.headerEndRow,v=null!=t.dataStartRow?t.dataStartRow:f.dataStartRow,w=D(n),m=new Set,{columns:x,colMap:y}=function(e,n,t,o,i,l){let r=-1;for(let o=n;o<=t;o++)for(let n=(e[o]||[]).length-1;n>=0;n--)if(""!==((e[o]||[])[n]||"")){r=Math.max(r,n);break}const s=(o||[]).filter(e=>e.s.r>=n&&e.s.r<=t);for(const e of s)r=Math.max(r,e.e.c);if(r<0)return{columns:[],colMap:[]};const a=[];function c(e,n){const t=i.find(n=>n.title&&n.title.toLowerCase()===e.toLowerCase());if(t)return{key:t.key,title:t.title,width:t.width||100};let o=String(e||"").toLowerCase().replace(/\s+/g,"_").replace(/[^a-z0-9_]/g,"").replace(/^_+|_+$/g,"").replace(/_+/g,"_").replace(/^(\d)/,"col_$1")||`col_${n}`,r=o,s=1;for(;l.has(r)||i.some(e=>e.key===r);)r=`${o}_${s++}`;return l.add(r),{key:r,title:e||r,width:100}}const d=function n(t,o,i,l){if(t>o||i>l)return[];const r=[];let d=i;for(;d<=l;){if(s.some(e=>e.s.r<=t&&e.e.r>=t&&e.s.c<d&&e.e.c>=d)){d++;continue}const i=s.find(e=>e.s.r===t&&e.s.c===d),h=i?_(e,i.s.r,i.s.c):_(e,t,d);if(i&&i.e.c>d){const t=Math.min(i.e.c,l),s=i.e.r+1;if(s<=o&&E(e,s,o,d,t)){const e=n(s,o,d,t);r.push({title:h,children:e})}else for(let e=d;e<=t;e++){const n=c(h,e);r.push(n),a.push({key:n.key,colIndex:e})}d=t+1}else if(i&&i.e.r>=o){const e=c(h,d);r.push(e),a.push({key:e.key,colIndex:d}),d++}else if(i){const t=i.e.r+1;if(t<=o&&E(e,t,o,d,d)){const e=n(t,o,d,d);r.push({title:h,children:e})}else{const e=c(h,d);r.push(e),a.push({key:e.key,colIndex:d})}d++}else if(t===o){const e=c(h,d);r.push(e),a.push({key:e.key,colIndex:d}),d++}else{if(E(e,t+1,o,d,d)){const e=n(t+1,o,d,d);r.push({title:h,children:e})}else{const e=c(h,d);r.push(e),a.push({key:e.key,colIndex:d})}d++}}return r}(n,t,0,r);return{columns:d,colMap:a}}(d,A,C,p,w,m),b=Math.max(d.length-v,0);l(55,`Qatorlar qayta ishlanmoqda (0 / ${b})...`),await I();const k=[];for(let e=v;e<d.length;e+=2e3){const n=Math.min(e+2e3,d.length);for(let t=e;t<n;t++){const e=d[t],n={};for(const{key:t,colIndex:o}of y)n[t]=void 0!==e[o]?e[o]:"";k.push(n)}const t=Math.min(n-v,b);l(55+Math.round(40*t/Math.max(b,1)),`Qatorlar: ${t} / ${b}`),await I()}const R=p.filter(e=>e.s.r>=v).map(e=>({startRow:e.s.r-v,startCol:e.s.c,endRow:e.e.r-v,endCol:e.e.c})).filter(e=>e.startRow>=0&&e.startCol>=0);return l(100,"Tayyor!"),{data:k,columns:x,merges:R}}const M={en:{copy:"Copy",cut:"Cut",paste:"Paste",pasteSpecial:"Paste Special",pasteAll:"All (Value + Format)",pasteValues:"Values Only",pasteFormats:"Formats Only",transpose:"Transpose",mergeCells:"Merge Cells",unmergeCells:"Unmerge Cells",hideRows:"Hide Row(s)",hideColumns:"Hide Column(s)",unhideRows:"Unhide All Rows",unhideColumns:"Unhide All Columns",pinLeft:"Pin Left",pinRight:"Pin Right",unpin:"Unpin",invalidValue:"Invalid value",total:"Total"},ru:{copy:"Копировать",cut:"Вырезать",paste:"Вставить",pasteSpecial:"Специальная вставка",pasteAll:"Всё (значение + формат)",pasteValues:"Только значения",pasteFormats:"Только форматы",transpose:"Транспонировать",mergeCells:"Объединить ячейки",unmergeCells:"Разъединить ячейки",hideRows:"Скрыть строку(и)",hideColumns:"Скрыть столбец(цы)",unhideRows:"Показать все строки",unhideColumns:"Показать все столбцы",pinLeft:"Закрепить слева",pinRight:"Закрепить справа",unpin:"Открепить",invalidValue:"Недопустимое значение",total:"Итого"},uz:{copy:"Nusxalash",cut:"Kesib olish",paste:"Joylashtirish",pasteSpecial:"Maxsus joylashtirish",pasteAll:"Hammasi (qiymat + format)",pasteValues:"Faqat qiymatlar",pasteFormats:"Faqat formatlar",transpose:"Transpozitsiya",mergeCells:"Katakchalarni birlashtirish",unmergeCells:"Katakchalarni ajratish",hideRows:"Qatorlarni yashirish",hideColumns:"Ustunlarni yashirish",unhideRows:"Barcha qatorlarni ko'rsatish",unhideColumns:"Barcha ustunlarni ko'rsatish",pinLeft:"Chapga pin qilish",pinRight:"O'ngga pin qilish",unpin:"Pindan olish",invalidValue:"Noto'g'ri qiymat",total:"Jami"},"uz-Cyrl":{copy:"Нусхалаш",cut:"Кесиб олиш",paste:"Жойлаштириш",pasteSpecial:"Махсус жойлаштириш",pasteAll:"Ҳаммаси (қиймат + формат)",pasteValues:"Фақат қийматлар",pasteFormats:"Фақат форматлар",transpose:"Транспозиция",mergeCells:"Катакчаларни бирлаштириш",unmergeCells:"Катакчаларни ажратиш",hideRows:"Қаторларни яшириш",hideColumns:"Устунларни яшириш",unhideRows:"Барча қаторларни кўрсатиш",unhideColumns:"Барча устунларни кўрсатиш",pinLeft:"Чапга пин қилиш",pinRight:"Ўнгга пин қилиш",unpin:"Пиндан олиш",invalidValue:"Нотўғри қиймат",total:"Жами"}};var H={name:"EgCheckbox",model:{prop:"value",event:"input"},props:{value:{default:!1},trueValue:{default:!0},falseValue:{default:!1},disabled:{type:Boolean,default:!1}},computed:{isChecked(){return this.value===this.trueValue}},methods:{onChange(e){const n=e.target.checked?this.trueValue:this.falseValue;this.$emit("input",n),this.$emit("change",n)}}};function L(e,n,t,o,i,l,r,s,a,c){"boolean"!=typeof r&&(a=s,s=r,r=!1);const d="function"==typeof t?t.options:t;let h;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,i&&(d.functional=!0)),o&&(d._scopeId=o),l?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,a(e)),e&&e._registeredComponents&&e._registeredComponents.add(l)},d._ssrRegister=h):n&&(h=r?function(e){n.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,s(e))}),h)if(d.functional){const e=d.render;d.render=function(n,t){return h.call(t),e(n,t)}}else{const e=d.beforeCreate;d.beforeCreate=e?[].concat(e,h):[h]}return t}const V="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function B(e){return(e,n)=>function(e,n){const t=V?n.media||"default":e,o=O[t]||(O[t]={ids:new Set,styles:[]});if(!o.ids.has(e)){o.ids.add(e);let t=n.source;if(n.map&&(t+="\n/*# sourceURL="+n.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",n.media&&o.element.setAttribute("media",n.media),void 0===F&&(F=document.head||document.getElementsByTagName("head")[0]),F.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(t),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{const e=o.ids.size-1,n=document.createTextNode(t),i=o.element.childNodes;i[e]&&o.element.removeChild(i[e]),i.length?o.element.insertBefore(n,i[e]):o.element.appendChild(n)}}}(e,n)}let F;const O={};const $=H;var T=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("label",{staticClass:"eg-checkbox",class:{"eg-checkbox--disabled":e.disabled}},[t("input",{staticClass:"eg-checkbox-input",attrs:{type:"checkbox",disabled:e.disabled},domProps:{checked:e.isChecked},on:{change:e.onChange}}),e._v(" "),t("span",{staticClass:"eg-checkbox-box"})])};T._withStripped=!0;const W=L({render:T,staticRenderFns:[]},function(e){e&&e("data-v-48d91ddc_0",{source:'\n.eg-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.eg-checkbox-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.eg-checkbox-box {\n position: relative;\n display: block;\n width: 19px;\n height: 19px;\n box-sizing: border-box;\n background-color: #fff;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0 0;\n border: 1.5px solid #c2c8d1;\n border-radius: 4px;\n transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;\n}\n.eg-checkbox:hover .eg-checkbox-box {\n border-color: #1a73e8;\n}\n.eg-checkbox-input:checked + .eg-checkbox-box {\n background-color: #1a73e8;\n background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");\n background-size: 70% 70%;\n border-color: #1a73e8;\n}\n.eg-checkbox-input:focus-visible + .eg-checkbox-box {\n box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);\n}\n.eg-checkbox--disabled,\n.eg-checkbox--disabled .eg-checkbox-input {\n cursor: default;\n}\n.eg-checkbox-input:disabled + .eg-checkbox-box {\n background-color: #f0f1f3;\n border-color: #dadde2;\n}\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box {\n background-color: #b9c2ce;\n border-color: #b9c2ce;\n}\n',map:{version:3,sources:["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/EgCheckbox.vue"],names:[],mappings:";AAuCA;EACA,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,sBAAA;EACA,4BAAA;EACA,2BAAA;EACA,oBAAA;EACA,2BAAA;EACA,kBAAA;EACA,yFAAA;AACA;AACA;EACA,qBAAA;AACA;AACA;EACA,yBAAA;EACA,+SAAA;EACA,wBAAA;EACA,qBAAA;AACA;AACA;EACA,6CAAA;AACA;AACA;;EAEA,eAAA;AACA;AACA;EACA,yBAAA;EACA,qBAAA;AACA;AACA;EACA,yBAAA;EACA,qBAAA;AACA",file:"EgCheckbox.vue",sourcesContent:['<template>\n <label class="eg-checkbox" :class="{ \'eg-checkbox--disabled\': disabled }">\n <input\n type="checkbox"\n class="eg-checkbox-input"\n :checked="isChecked"\n :disabled="disabled"\n @change="onChange"\n />\n <span class="eg-checkbox-box"></span>\n </label>\n</template>\n\n<script>\nexport default {\n name: \'EgCheckbox\',\n model: { prop: \'value\', event: \'input\' },\n props: {\n value: { default: false },\n trueValue: { default: true },\n falseValue: { default: false },\n disabled: { type: Boolean, default: false }\n },\n computed: {\n isChecked() {\n return this.value === this.trueValue\n }\n },\n methods: {\n onChange(e) {\n const val = e.target.checked ? this.trueValue : this.falseValue\n this.$emit(\'input\', val)\n this.$emit(\'change\', val)\n }\n }\n}\n<\/script>\n\n<style>\n.eg-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.eg-checkbox-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.eg-checkbox-box {\n position: relative;\n display: block;\n width: 19px;\n height: 19px;\n box-sizing: border-box;\n background-color: #fff;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0 0;\n border: 1.5px solid #c2c8d1;\n border-radius: 4px;\n transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;\n}\n.eg-checkbox:hover .eg-checkbox-box {\n border-color: #1a73e8;\n}\n.eg-checkbox-input:checked + .eg-checkbox-box {\n background-color: #1a73e8;\n background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");\n background-size: 70% 70%;\n border-color: #1a73e8;\n}\n.eg-checkbox-input:focus-visible + .eg-checkbox-box {\n box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);\n}\n.eg-checkbox--disabled,\n.eg-checkbox--disabled .eg-checkbox-input {\n cursor: default;\n}\n.eg-checkbox-input:disabled + .eg-checkbox-box {\n background-color: #f0f1f3;\n border-color: #dadde2;\n}\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box {\n background-color: #b9c2ce;\n border-color: #b9c2ce;\n}\n</style>\n']},media:void 0})},$,void 0,false,void 0,!1,B,void 0,void 0);const P={name:"EgSelect",model:{prop:"value",event:"input"},props:{value:{default:null},options:{type:Array,default:()=>[]},enableSearch:{type:Boolean,default:!1},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},dropdownOnly:{type:Boolean,default:!1},triggerRect:{type:Object,default:null}},data:()=>({open:!1,searchQuery:"",highlight:-1}),computed:{normalizedOptions(){return(this.options||[]).map(e=>"string"==typeof e?{value:e,label:e}:{value:e.value,label:null!=e.label?e.label:String(e.value),color:e.color})},filteredOptions(){if(!this.enableSearch||!this.searchQuery.trim())return this.normalizedOptions;const e=this.searchQuery.trim().toLowerCase();return this.normalizedOptions.filter(n=>String(n.label||"").toLowerCase().includes(e))},selectedOpt(){const e=String(null==this.value?"":this.value);return this.normalizedOptions.find(n=>String(n.value)===e)||null},overlayStyle(){if(!this.dropdownOnly||!this.triggerRect)return{position:"fixed",zIndex:9999};const e=this.triggerRect,n=this.enableSearch?42:0,t=Math.min(28*this.filteredOptions.length+8+n,320);return{position:"fixed",top:(window.innerHeight-e.bottom>=t?e.bottom:e.top-t)+"px",left:e.left+"px",minWidth:Math.max(e.width,120)+"px",maxWidth:Math.min(360,window.innerWidth-e.left-16)+"px",zIndex:9999}}},watch:{open(e){e&&this.enableSearch&&this.$nextTick(()=>{this.$refs.searchInput&&this.$refs.searchInput.focus()})}},mounted(){this.dropdownOnly?(this.highlight=-1,this.enableSearch&&this.$nextTick(()=>{this.$refs.searchInput&&this.$refs.searchInput.focus()})):document.addEventListener("click",this._onDocClick)},beforeDestroy(){this.dropdownOnly||document.removeEventListener("click",this._onDocClick)},methods:{toggle(){if(!this.disabled&&(this.open=!this.open,this.open)){const e=String(null==this.value?"":this.value);this.highlight=this.normalizedOptions.findIndex(n=>String(n.value)===e),this.searchQuery=""}},pickOption(e){this.$emit("input",e.value),this.$emit("select",{value:e.value,label:e.label}),this.dropdownOnly||(this.open=!1,this.searchQuery="",this.highlight=-1)},onSearch(e){this.searchQuery=e.target.value,this.highlight=0},onSearchKey(e){const n=e.key,t=this.filteredOptions.length-1;if("Escape"===n)e.preventDefault(),this.dropdownOnly?this.$emit("close"):(this.open=!1,this.searchQuery="");else if("ArrowDown"===n)e.preventDefault(),this.highlight=Math.min((this.highlight<0?-1:this.highlight)+1,t),this._scrollHighlightedIntoView();else if("ArrowUp"===n)e.preventDefault(),this.highlight=Math.max((this.highlight||0)-1,0),this._scrollHighlightedIntoView();else if("PageDown"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.min(this.highlight+8,t),this._scrollHighlightedIntoView();else if("PageUp"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.max(this.highlight-8,0),this._scrollHighlightedIntoView();else if("Enter"===n){e.preventDefault();const n=this.filteredOptions[this.highlight];n&&this.pickOption(n)}},handleKey(e){const n=e.key,t=this.filteredOptions.length-1;if("Escape"===n)e.preventDefault(),this.$emit("close");else if("Enter"===n||" "===n){e.preventDefault();const n=this.filteredOptions[this.highlight];n?this.pickOption(n):this.$emit("close")}else"ArrowDown"===n?(e.preventDefault(),this.highlight=Math.min((this.highlight<0?-1:this.highlight)+1,t),this._scrollHighlightedIntoView()):"ArrowUp"===n?(e.preventDefault(),this.highlight=Math.max((this.highlight||0)-1,0),this._scrollHighlightedIntoView()):"PageDown"===n?(e.preventDefault(),this.highlight=this.highlight<0?0:Math.min(this.highlight+8,t),this._scrollHighlightedIntoView()):"PageUp"===n&&(e.preventDefault(),this.highlight=this.highlight<0?0:Math.max(this.highlight-8,0),this._scrollHighlightedIntoView())},_scrollHighlightedIntoView(){this.$nextTick(()=>{const e=this.$el.querySelectorAll(".eg-select-option")[this.highlight];if(!e)return;const n=this.$el,t=n.querySelector(".eg-select-search"),o=t?t.offsetHeight:0,i=e.offsetTop,l=i+e.offsetHeight,r=n.scrollTop+o,s=n.scrollTop+n.clientHeight;i<r?n.scrollTop=i-o:l>s&&(n.scrollTop=l-n.clientHeight)})},onRootMouseDown(e){this.dropdownOnly&&e.preventDefault()},_onDocClick(e){this.open&&(this.$el&&this.$el.contains(e.target)||(this.open=!1))}}};var G=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{class:e.dropdownOnly?"eg-select-dropdown":"eg-select-wrapper",style:e.dropdownOnly?e.overlayStyle:null,on:{mousedown:e.onRootMouseDown}},[e.dropdownOnly?e._e():t("div",{staticClass:"eg-select-trigger",class:{"eg-select-trigger--disabled":e.disabled,"eg-select-trigger--open":e.open},on:{click:function(n){return n.stopPropagation(),e.toggle.apply(null,arguments)}}},[e.selectedOpt&&e.selectedOpt.color?t("span",{staticClass:"eg-select-dot",style:{background:e.selectedOpt.color}}):e._e(),e._v(" "),t("span",{staticClass:"eg-select-trigger-label",class:{"eg-select-placeholder":!e.selectedOpt}},[e._v("\n "+e._s(e.selectedOpt?e.selectedOpt.label:e.placeholder)+"\n ")]),e._v(" "),t("span",{staticClass:"eg-select-caret"},[e._v("▾")])]),e._v(" "),e.dropdownOnly?[e.enableSearch?t("div",{staticClass:"eg-select-search",on:{mousedown:function(e){e.stopPropagation()}}},[t("input",{ref:"searchInput",staticClass:"eg-select-search-input",attrs:{placeholder:"Qidirish...",autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:"false"},domProps:{value:e.searchQuery},on:{input:e.onSearch,keydown:function(n){return n.stopPropagation(),e.onSearchKey.apply(null,arguments)}}})]):e._e(),e._v(" "),e._l(e.filteredOptions,function(n,o){return t("div",{key:String(n.value),staticClass:"eg-select-option",class:{"eg-select-option--active":String(n.value)===String(e.value),"eg-select-option--highlighted":o===e.highlight},on:{mousedown:function(t){return t.preventDefault(),e.pickOption(n)},mouseover:function(n){e.highlight=o}}},[n.color?t("span",{staticClass:"eg-select-dot",style:{background:n.color}}):e._e(),e._v("\n "+e._s(n.label)+"\n ")])})]:e.open?t("div",{staticClass:"eg-select-dropdown eg-select-dropdown--floating",on:{mousedown:function(e){e.stopPropagation(),e.preventDefault()}}},[e.enableSearch?t("div",{staticClass:"eg-select-search",on:{mousedown:function(e){e.stopPropagation()}}},[t("input",{ref:"searchInput",staticClass:"eg-select-search-input",attrs:{placeholder:"Qidirish...",autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:"false"},domProps:{value:e.searchQuery},on:{input:e.onSearch,keydown:function(n){return n.stopPropagation(),e.onSearchKey.apply(null,arguments)}}})]):e._e(),e._v(" "),e._l(e.filteredOptions,function(n,o){return t("div",{key:String(n.value),staticClass:"eg-select-option",class:{"eg-select-option--active":String(n.value)===String(e.value),"eg-select-option--highlighted":o===e.highlight},on:{mousedown:function(t){return t.preventDefault(),e.pickOption(n)},mouseover:function(n){e.highlight=o}}},[n.color?t("span",{staticClass:"eg-select-dot",style:{background:n.color}}):e._e(),e._v("\n "+e._s(n.label)+"\n ")])})],2):e._e()],2)};G._withStripped=!0;const K=L({render:G,staticRenderFns:[]},function(e){e&&e("data-v-1a11683a_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Standalone wrapper */\n.eg-select-wrapper {\n position: relative;\n display: inline-block;\n min-width: 120px;\n font-size: var(--eg-font-size);\n font-family: inherit;\n}\n.eg-select-trigger {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-height: 30px;\n padding: 4px 8px;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n background: var(--eg-color-cell-bg);\n cursor: pointer;\n user-select: none;\n color: var(--eg-color-text);\n transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover {\n border-color: var(--eg-color-accent);\n}\n.eg-select-trigger--open {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled {\n background: var(--eg-color-cell-readonly);\n cursor: default;\n color: var(--eg-color-text-muted);\n}\n.eg-select-trigger-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.eg-select-placeholder {\n color: var(--eg-color-text-muted);\n}\n.eg-select-caret {\n flex-shrink: 0;\n color: var(--eg-color-text-muted);\n font-size: 12px;\n}\n\n/* Dropdown panel */\n.eg-select-dropdown {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n overflow-y: auto;\n max-height: 320px;\n padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n z-index: 999;\n margin-top: 2px;\n}\n\n/* Search input inside dropdown */\n.eg-select-search {\n padding: 6px 8px;\n border-bottom: 1px solid var(--eg-color-border-cell);\n position: sticky;\n top: 0;\n background: var(--eg-color-cell-bg);\n z-index: 1;\n}\n.eg-select-search-input {\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n padding: 4px 8px;\n font-size: var(--eg-font-size);\n outline: none;\n color: var(--eg-color-text);\n background: var(--eg-color-cell-bg);\n font-family: inherit;\n}\n.eg-select-search-input:focus {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n\n/* Option rows */\n.eg-select-option {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 12px;\n font-size: var(--eg-font-size);\n cursor: pointer;\n white-space: normal;\n word-break: break-word;\n user-select: none;\n color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n background: var(--eg-color-option-hover-bg);\n}\n.eg-select-option--active {\n font-weight: 600;\n color: var(--eg-color-accent);\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n background: var(--eg-color-option-active-hover-bg);\n}\n\n/* Color dot */\n.eg-select-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n flex-shrink: 0;\n display: inline-block;\n margin-top: 3px;\n}\n",map:{version:3,sources:["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/EgSelect.vue"],names:[],mappings:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuRA,uBAAA;AACA;EACA,kBAAA;EACA,qBAAA;EACA,gBAAA;EACA,8BAAA;EACA,oBAAA;AACA;AACA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,mCAAA;EACA,eAAA;EACA,iBAAA;EACA,2BAAA;EACA,wDAAA;AACA;AACA;EACA,oCAAA;AACA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;AACA;EACA,yCAAA;EACA,eAAA;EACA,iCAAA;AACA;AACA;EACA,OAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;AACA;AACA;EACA,iCAAA;AACA;AACA;EACA,cAAA;EACA,iCAAA;EACA,eAAA;AACA;;AAEA,mBAAA;AACA;EACA,mCAAA;EACA,wCAAA;EACA,+BAAA;EACA,qCAAA;EACA,gBAAA;EACA,iBAAA;EACA,cAAA;AACA;AACA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,eAAA;EACA,YAAA;EACA,eAAA;AACA;;AAEA,iCAAA;AACA;EACA,gBAAA;EACA,oDAAA;EACA,gBAAA;EACA,MAAA;EACA,mCAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,gBAAA;EACA,8BAAA;EACA,aAAA;EACA,2BAAA;EACA,mCAAA;EACA,oBAAA;AACA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;;AAEA,gBAAA;AACA;EACA,aAAA;EACA,uBAAA;EACA,QAAA;EACA,iBAAA;EACA,8BAAA;EACA,eAAA;EACA,mBAAA;EACA,sBAAA;EACA,iBAAA;EACA,2BAAA;AACA;AACA;;EAEA,2CAAA;AACA;AACA;EACA,gBAAA;EACA,6BAAA;AACA;AACA;;EAEA,kDAAA;AACA;;AAEA,cAAA;AACA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAAA;EACA,eAAA;AACA",file:"EgSelect.vue",sourcesContent:['<template>\n <div\n :class="dropdownOnly ? \'eg-select-dropdown\' : \'eg-select-wrapper\'"\n :style="dropdownOnly ? overlayStyle : null"\n @mousedown="onRootMouseDown"\n >\n \x3c!-- Standalone mode: trigger button --\x3e\n <div\n v-if="!dropdownOnly"\n class="eg-select-trigger"\n :class="{ \'eg-select-trigger--disabled\': disabled, \'eg-select-trigger--open\': open }"\n @click.stop="toggle"\n >\n <span v-if="selectedOpt && selectedOpt.color" class="eg-select-dot" :style="{ background: selectedOpt.color }"></span>\n <span class="eg-select-trigger-label" :class="{ \'eg-select-placeholder\': !selectedOpt }">\n {{ selectedOpt ? selectedOpt.label : placeholder }}\n </span>\n <span class="eg-select-caret">▾</span>\n </div>\n\n \x3c!-- Options panel in grid dropdown-only mode (root IS the dropdown panel) --\x3e\n <template v-if="dropdownOnly">\n <div v-if="enableSearch" class="eg-select-search" @mousedown.stop>\n <input\n ref="searchInput"\n class="eg-select-search-input"\n :value="searchQuery"\n placeholder="Qidirish..."\n autocomplete="off"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false"\n @input="onSearch"\n @keydown.stop="onSearchKey"\n />\n </div>\n <div\n v-for="(opt, idx) in filteredOptions"\n :key="String(opt.value)"\n class="eg-select-option"\n :class="{\n \'eg-select-option--active\': String(opt.value) === String(value),\n \'eg-select-option--highlighted\': idx === highlight\n }"\n @mousedown.prevent="pickOption(opt)"\n @mouseover="highlight = idx"\n >\n <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>\n {{ opt.label }}\n </div>\n </template>\n\n \x3c!-- Options panel in standalone mode (floating dropdown below trigger) --\x3e\n <div\n v-else-if="open"\n class="eg-select-dropdown eg-select-dropdown--floating"\n @mousedown.stop.prevent\n >\n <div v-if="enableSearch" class="eg-select-search" @mousedown.stop>\n <input\n ref="searchInput"\n class="eg-select-search-input"\n :value="searchQuery"\n placeholder="Qidirish..."\n autocomplete="off"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false"\n @input="onSearch"\n @keydown.stop="onSearchKey"\n />\n </div>\n <div\n v-for="(opt, idx) in filteredOptions"\n :key="String(opt.value)"\n class="eg-select-option"\n :class="{\n \'eg-select-option--active\': String(opt.value) === String(value),\n \'eg-select-option--highlighted\': idx === highlight\n }"\n @mousedown.prevent="pickOption(opt)"\n @mouseover="highlight = idx"\n >\n <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>\n {{ opt.label }}\n </div>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n name: \'EgSelect\',\n model: { prop: \'value\', event: \'input\' },\n props: {\n value: { default: null },\n options: { type: Array, default: () => [] },\n enableSearch: { type: Boolean, default: false },\n placeholder: { type: String, default: \'\' },\n disabled: { type: Boolean, default: false },\n dropdownOnly: { type: Boolean, default: false },\n triggerRect: { type: Object, default: null }\n },\n data() {\n return {\n open: false,\n searchQuery: \'\',\n highlight: -1\n }\n },\n computed: {\n normalizedOptions() {\n return (this.options || []).map(o =>\n typeof o === \'string\'\n ? { value: o, label: o }\n : { value: o.value, label: o.label != null ? o.label : String(o.value), color: o.color }\n )\n },\n filteredOptions() {\n if (!this.enableSearch || !this.searchQuery.trim()) return this.normalizedOptions\n const q = this.searchQuery.trim().toLowerCase()\n return this.normalizedOptions.filter(o => String(o.label || \'\').toLowerCase().includes(q))\n },\n selectedOpt() {\n const v = String(this.value == null ? \'\' : this.value)\n return this.normalizedOptions.find(o => String(o.value) === v) || null\n },\n overlayStyle() {\n if (!this.dropdownOnly || !this.triggerRect) return { position: \'fixed\', zIndex: 9999 }\n const rect = this.triggerRect\n const searchH = this.enableSearch ? 42 : 0\n const approxH = Math.min(this.filteredOptions.length * 28 + 8 + searchH, 320)\n const spaceBelow = window.innerHeight - rect.bottom\n const top = spaceBelow >= approxH ? rect.bottom : rect.top - approxH\n return {\n position: \'fixed\',\n top: top + \'px\',\n left: rect.left + \'px\',\n minWidth: Math.max(rect.width, 120) + \'px\',\n maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + \'px\',\n zIndex: 9999\n }\n }\n },\n watch: {\n open(val) {\n if (val && this.enableSearch) {\n this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })\n }\n }\n },\n mounted() {\n if (this.dropdownOnly) {\n this.highlight = -1\n if (this.enableSearch) {\n this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })\n }\n } else {\n document.addEventListener(\'click\', this._onDocClick)\n }\n },\n beforeDestroy() {\n if (!this.dropdownOnly) {\n document.removeEventListener(\'click\', this._onDocClick)\n }\n },\n methods: {\n toggle() {\n if (this.disabled) return\n this.open = !this.open\n if (this.open) {\n const v = String(this.value == null ? \'\' : this.value)\n this.highlight = this.normalizedOptions.findIndex(o => String(o.value) === v)\n this.searchQuery = \'\'\n }\n },\n pickOption(opt) {\n this.$emit(\'input\', opt.value)\n this.$emit(\'select\', { value: opt.value, label: opt.label })\n if (!this.dropdownOnly) {\n this.open = false\n this.searchQuery = \'\'\n this.highlight = -1\n }\n },\n onSearch(e) {\n this.searchQuery = e.target.value\n this.highlight = 0\n },\n onSearchKey(e) {\n const key = e.key\n const last = this.filteredOptions.length - 1\n if (key === \'Escape\') {\n e.preventDefault()\n if (this.dropdownOnly) this.$emit(\'close\')\n else { this.open = false; this.searchQuery = \'\' }\n } else if (key === \'ArrowDown\') {\n e.preventDefault()\n this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n this._scrollHighlightedIntoView()\n } else if (key === \'ArrowUp\') {\n e.preventDefault()\n this.highlight = Math.max((this.highlight || 0) - 1, 0)\n this._scrollHighlightedIntoView()\n } else if (key === \'PageDown\') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n this._scrollHighlightedIntoView()\n } else if (key === \'PageUp\') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n this._scrollHighlightedIntoView()\n } else if (key === \'Enter\') {\n e.preventDefault()\n const opt = this.filteredOptions[this.highlight]\n if (opt) this.pickOption(opt)\n }\n },\n handleKey(e) {\n const key = e.key\n const last = this.filteredOptions.length - 1\n if (key === \'Escape\') {\n e.preventDefault()\n this.$emit(\'close\')\n } else if (key === \'Enter\' || key === \' \') {\n e.preventDefault()\n const opt = this.filteredOptions[this.highlight]\n if (opt) this.pickOption(opt)\n else this.$emit(\'close\')\n } else if (key === \'ArrowDown\') {\n e.preventDefault()\n this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n this._scrollHighlightedIntoView()\n } else if (key === \'ArrowUp\') {\n e.preventDefault()\n this.highlight = Math.max((this.highlight || 0) - 1, 0)\n this._scrollHighlightedIntoView()\n } else if (key === \'PageDown\') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n this._scrollHighlightedIntoView()\n } else if (key === \'PageUp\') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n this._scrollHighlightedIntoView()\n }\n },\n _scrollHighlightedIntoView() {\n this.$nextTick(() => {\n const items = this.$el.querySelectorAll(\'.eg-select-option\')\n const el = items[this.highlight]\n if (!el) return\n const container = this.$el\n const searchEl = container.querySelector(\'.eg-select-search\')\n const stickyH = searchEl ? searchEl.offsetHeight : 0\n const elTop = el.offsetTop\n const elBottom = elTop + el.offsetHeight\n const visTop = container.scrollTop + stickyH\n const visBottom = container.scrollTop + container.clientHeight\n if (elTop < visTop) {\n container.scrollTop = elTop - stickyH\n } else if (elBottom > visBottom) {\n container.scrollTop = elBottom - container.clientHeight\n }\n })\n },\n onRootMouseDown(e) {\n if (this.dropdownOnly) e.preventDefault()\n },\n _onDocClick(e) {\n if (!this.open) return\n if (this.$el && this.$el.contains(e.target)) return\n this.open = false\n }\n }\n}\n<\/script>\n\n<style>\n/* Standalone wrapper */\n.eg-select-wrapper {\n position: relative;\n display: inline-block;\n min-width: 120px;\n font-size: var(--eg-font-size);\n font-family: inherit;\n}\n.eg-select-trigger {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-height: 30px;\n padding: 4px 8px;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n background: var(--eg-color-cell-bg);\n cursor: pointer;\n user-select: none;\n color: var(--eg-color-text);\n transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover {\n border-color: var(--eg-color-accent);\n}\n.eg-select-trigger--open {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled {\n background: var(--eg-color-cell-readonly);\n cursor: default;\n color: var(--eg-color-text-muted);\n}\n.eg-select-trigger-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.eg-select-placeholder {\n color: var(--eg-color-text-muted);\n}\n.eg-select-caret {\n flex-shrink: 0;\n color: var(--eg-color-text-muted);\n font-size: 12px;\n}\n\n/* Dropdown panel */\n.eg-select-dropdown {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n overflow-y: auto;\n max-height: 320px;\n padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n z-index: 999;\n margin-top: 2px;\n}\n\n/* Search input inside dropdown */\n.eg-select-search {\n padding: 6px 8px;\n border-bottom: 1px solid var(--eg-color-border-cell);\n position: sticky;\n top: 0;\n background: var(--eg-color-cell-bg);\n z-index: 1;\n}\n.eg-select-search-input {\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n padding: 4px 8px;\n font-size: var(--eg-font-size);\n outline: none;\n color: var(--eg-color-text);\n background: var(--eg-color-cell-bg);\n font-family: inherit;\n}\n.eg-select-search-input:focus {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n\n/* Option rows */\n.eg-select-option {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 12px;\n font-size: var(--eg-font-size);\n cursor: pointer;\n white-space: normal;\n word-break: break-word;\n user-select: none;\n color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n background: var(--eg-color-option-hover-bg);\n}\n.eg-select-option--active {\n font-weight: 600;\n color: var(--eg-color-accent);\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n background: var(--eg-color-option-active-hover-bg);\n}\n\n/* Color dot */\n.eg-select-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n flex-shrink: 0;\n display: inline-block;\n margin-top: 3px;\n}\n</style>\n']},media:void 0})},P,void 0,false,void 0,!1,B,void 0,void 0);const j={name:"EgTreeSelect",model:{prop:"value",event:"input"},props:{value:{default:null},options:{type:Array,default:()=>[]},valueKey:{type:String,default:"value"},labelKey:{type:String,default:"label"},childrenKey:{type:String,default:"children"},enableSearch:{type:Boolean,default:!1},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},dropdownOnly:{type:Boolean,default:!1},triggerRect:{type:Object,default:null}},data:()=>({open:!1,searchQuery:"",highlight:-1,expandedMap:{}}),computed:{keys(){return{valueKey:this.valueKey,labelKey:this.labelKey,childrenKey:this.childrenKey}},flatOptions(){return this._treeFlatten(this.options||[],this.keys,this.expandedMap,0,[])},allFlatOptions(){return this.enableSearch?this._treeFlattenAll(this.options||[],this.keys):null},filteredOptions(){if(!this.enableSearch||!this.searchQuery.trim())return this.flatOptions;const e=this.searchQuery.trim().toLowerCase();return(this.allFlatOptions||this.flatOptions).filter(n=>String(n.label||"").toLowerCase().includes(e))},selectedLabel(){const e=String(null==this.value?"":this.value);if(!e)return null;const n=this._treeFindLabel(this.options||[],this.keys,e);return null!=n?n:null},overlayStyle(){if(!this.dropdownOnly||!this.triggerRect)return{position:"fixed",zIndex:9999};const e=this.triggerRect,n=this.enableSearch?42:0,t=Math.min(28*this.filteredOptions.length+8+n,320);return{position:"fixed",top:(window.innerHeight-e.bottom>=t?e.bottom:e.top-t)+"px",left:e.left+"px",minWidth:Math.max(e.width,120)+"px",maxWidth:Math.min(360,window.innerWidth-e.left-16)+"px",zIndex:9999}}},watch:{open(e){e&&this.enableSearch&&this.$nextTick(()=>{this.$refs.searchInput&&this.$refs.searchInput.focus()})}},mounted(){this.dropdownOnly?(this._initExpanded(),this.highlight=-1,this.enableSearch&&this.$nextTick(()=>{this.$refs.searchInput&&this.$refs.searchInput.focus()})):document.addEventListener("click",this._onDocClick)},beforeDestroy(){this.dropdownOnly||document.removeEventListener("click",this._onDocClick)},methods:{_initExpanded(){const e=String(null==this.value?"":this.value),n=this._treeFindPath(this.options||[],this.keys,e,[])||[],t={};n.forEach(e=>{t[e]=!0}),this.expandedMap=t;const o=this.flatOptions;this.highlight=o.findIndex(n=>String(n.value)===e)},toggle(){this.disabled||(this.open=!this.open,this.open&&(this.searchQuery="",this._initExpanded()))},pickOption(e){this.$emit("input",e.value),this.$emit("select",{value:e.value,label:e.label}),this.dropdownOnly||(this.open=!1,this.searchQuery="",this.highlight=-1)},toggleNode(e){const n=this.flatOptions[e];if(!n||!n.hasChildren)return;const t={...this.expandedMap};t[n.id]?delete t[n.id]:t[n.id]=!0,this.expandedMap=t;const o=this.flatOptions.findIndex(e=>e.id===n.id);this.highlight=o>=0?o:this.highlight},onSearch(e){this.searchQuery=e.target.value,this.highlight=0},onSearchKey(e){const n=e.key,t=this.filteredOptions.length-1;if("Escape"===n)e.preventDefault(),this.dropdownOnly?this.$emit("close"):(this.open=!1,this.searchQuery="");else if("ArrowDown"===n)e.preventDefault(),this.highlight=Math.min((this.highlight<0?-1:this.highlight)+1,t),this._scrollHighlightedIntoView();else if("ArrowUp"===n)e.preventDefault(),this.highlight=Math.max((this.highlight||0)-1,0),this._scrollHighlightedIntoView();else if("PageDown"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.min(this.highlight+8,t),this._scrollHighlightedIntoView();else if("PageUp"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.max(this.highlight-8,0),this._scrollHighlightedIntoView();else if("Enter"===n){e.preventDefault();const n=this.filteredOptions[this.highlight];n&&this.pickOption(n)}},handleKey(e){const n=e.key,t=this.filteredOptions.length-1;if("Escape"===n)e.preventDefault(),this.$emit("close");else if("Enter"===n||" "===n){e.preventDefault();const n=this.filteredOptions[this.highlight];n?this.pickOption(n):this.$emit("close")}else if("ArrowDown"===n)e.preventDefault(),this.highlight=Math.min((this.highlight<0?-1:this.highlight)+1,t),this._scrollHighlightedIntoView();else if("ArrowUp"===n)e.preventDefault(),this.highlight=Math.max((this.highlight||0)-1,0),this._scrollHighlightedIntoView();else if("PageDown"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.min(this.highlight+8,t),this._scrollHighlightedIntoView();else if("PageUp"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.max(this.highlight-8,0),this._scrollHighlightedIntoView();else if(!this.searchQuery&&("ArrowRight"===n||"ArrowLeft"===n)){e.preventDefault();const t=this.flatOptions[this.highlight];t&&t.hasChildren&&("ArrowRight"!==n||t.expanded||this.toggleNode(this.highlight),"ArrowLeft"===n&&t.expanded&&this.toggleNode(this.highlight))}},_scrollHighlightedIntoView(){this.$nextTick(()=>{const e=this.$el.querySelectorAll(".eg-select-option")[this.highlight];if(!e)return;const n=this.$el,t=n.querySelector(".eg-select-search"),o=t?t.offsetHeight:0,i=e.offsetTop,l=i+e.offsetHeight,r=n.scrollTop+o,s=n.scrollTop+n.clientHeight;i<r?n.scrollTop=i-o:l>s&&(n.scrollTop=l-n.clientHeight)})},onRootMouseDown(e){this.dropdownOnly&&e.preventDefault()},_onDocClick(e){this.open&&(this.$el&&this.$el.contains(e.target)||(this.open=!1))},_treeFlatten(e,n,t,o,i){let l=[];return(e||[]).forEach((e,r)=>{const s=i.concat(r),a=s.join("-"),c=Array.isArray(e[n.childrenKey])?e[n.childrenKey]:[],d=c.length>0,h=d&&!!t[a];l.push({value:e[n.valueKey],label:null!=e[n.labelKey]?e[n.labelKey]:String(e[n.valueKey]),color:e.color,id:a,depth:o,hasChildren:d,expanded:h}),h&&(l=l.concat(this._treeFlatten(c,n,t,o+1,s)))}),l},_treeFlattenAll(e,n){const t=[],o=e=>{(e||[]).forEach(e=>{const i=Array.isArray(e[n.childrenKey])?e[n.childrenKey]:[];t.push({value:e[n.valueKey],label:null!=e[n.labelKey]?e[n.labelKey]:String(e[n.valueKey]),color:e.color,id:String(e[n.valueKey]),depth:0,hasChildren:!1,expanded:!1}),i.length&&o(i)})};return o(e),t},_treeFindLabel(e,n,t){for(const o of e||[]){if(String(o[n.valueKey])===t)return null!=o[n.labelKey]?o[n.labelKey]:String(o[n.valueKey]);const e=this._treeFindLabel(o[n.childrenKey],n,t);if(null!=e)return e}return null},_treeFindPath(e,n,t,o){for(let i=0;i<(e||[]).length;i++){const l=e[i],r=o.concat(i);if(String(l[n.valueKey])===t)return[r.join("-")];const s=l[n.childrenKey];if(Array.isArray(s)){const e=this._treeFindPath(s,n,t,r);if(e)return[r.join("-")].concat(e)}}return null}}};var U=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{class:e.dropdownOnly?"eg-select-dropdown":"eg-select-wrapper",style:e.dropdownOnly?e.overlayStyle:null,on:{mousedown:e.onRootMouseDown}},[e.dropdownOnly?e._e():t("div",{staticClass:"eg-select-trigger",class:{"eg-select-trigger--disabled":e.disabled,"eg-select-trigger--open":e.open},on:{click:function(n){return n.stopPropagation(),e.toggle.apply(null,arguments)}}},[t("span",{staticClass:"eg-select-trigger-label",class:{"eg-select-placeholder":null==e.selectedLabel}},[e._v("\n "+e._s(null!=e.selectedLabel?e.selectedLabel:e.placeholder)+"\n ")]),e._v(" "),t("span",{staticClass:"eg-select-caret"},[e._v("▾")])]),e._v(" "),e.dropdownOnly?[e.enableSearch?t("div",{staticClass:"eg-select-search",on:{mousedown:function(e){e.stopPropagation()}}},[t("input",{ref:"searchInput",staticClass:"eg-select-search-input",attrs:{placeholder:"Qidirish...",autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:"false"},domProps:{value:e.searchQuery},on:{input:e.onSearch,keydown:function(n){return n.stopPropagation(),e.onSearchKey.apply(null,arguments)}}})]):e._e(),e._v(" "),e._l(e.filteredOptions,function(n,o){return t("div",{key:null!=n.id?n.id:String(n.value),staticClass:"eg-select-option",class:{"eg-select-option--active":String(n.value)===String(e.value),"eg-select-option--highlighted":o===e.highlight},style:e.searchQuery?null:{paddingLeft:12+16*n.depth+"px"},on:{mousedown:function(t){return t.preventDefault(),e.pickOption(n)},mouseover:function(n){e.highlight=o}}},[e.searchQuery?e._e():t("span",{staticClass:"eg-tree-toggle",class:{"eg-tree-toggle--leaf":!n.hasChildren},on:{mousedown:function(n){return n.preventDefault(),n.stopPropagation(),e.toggleNode(o)}}},[e._v(e._s(n.hasChildren?n.expanded?"▾":"▸":""))]),e._v(" "),n.color?t("span",{staticClass:"eg-select-dot",style:{background:n.color}}):e._e(),e._v("\n "+e._s(n.label)+"\n ")])})]:e.open?t("div",{staticClass:"eg-select-dropdown eg-select-dropdown--floating",on:{mousedown:function(e){e.stopPropagation(),e.preventDefault()}}},[e.enableSearch?t("div",{staticClass:"eg-select-search",on:{mousedown:function(e){e.stopPropagation()}}},[t("input",{ref:"searchInput",staticClass:"eg-select-search-input",attrs:{placeholder:"Qidirish...",autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:"false"},domProps:{value:e.searchQuery},on:{input:e.onSearch,keydown:function(n){return n.stopPropagation(),e.onSearchKey.apply(null,arguments)}}})]):e._e(),e._v(" "),e._l(e.filteredOptions,function(n,o){return t("div",{key:null!=n.id?n.id:String(n.value),staticClass:"eg-select-option",class:{"eg-select-option--active":String(n.value)===String(e.value),"eg-select-option--highlighted":o===e.highlight},style:e.searchQuery?null:{paddingLeft:12+16*n.depth+"px"},on:{mousedown:function(t){return t.preventDefault(),e.pickOption(n)},mouseover:function(n){e.highlight=o}}},[e.searchQuery?e._e():t("span",{staticClass:"eg-tree-toggle",class:{"eg-tree-toggle--leaf":!n.hasChildren},on:{mousedown:function(n){return n.preventDefault(),n.stopPropagation(),e.toggleNode(o)}}},[e._v(e._s(n.hasChildren?n.expanded?"▾":"▸":""))]),e._v(" "),n.color?t("span",{staticClass:"eg-select-dot",style:{background:n.color}}):e._e(),e._v("\n "+e._s(n.label)+"\n ")])})],2):e._e()],2)};U._withStripped=!0;const N=L({render:U,staticRenderFns:[]},function(e){e&&e("data-v-58d5e187_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Tree toggle */\n.eg-tree-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--eg-color-text-muted);\n margin-top: 1px;\n}\n.eg-tree-toggle--leaf {\n visibility: hidden;\n}\n",map:{version:3,sources:["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/EgTreeSelect.vue"],names:[],mappings:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyXA,gBAAA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;EACA,iCAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;AACA",file:"EgTreeSelect.vue",sourcesContent:["<template>\n <div\n :class=\"dropdownOnly ? 'eg-select-dropdown' : 'eg-select-wrapper'\"\n :style=\"dropdownOnly ? overlayStyle : null\"\n @mousedown=\"onRootMouseDown\"\n >\n \x3c!-- Standalone mode: trigger button --\x3e\n <div\n v-if=\"!dropdownOnly\"\n class=\"eg-select-trigger\"\n :class=\"{ 'eg-select-trigger--disabled': disabled, 'eg-select-trigger--open': open }\"\n @click.stop=\"toggle\"\n >\n <span class=\"eg-select-trigger-label\" :class=\"{ 'eg-select-placeholder': selectedLabel == null }\">\n {{ selectedLabel != null ? selectedLabel : placeholder }}\n </span>\n <span class=\"eg-select-caret\">▾</span>\n </div>\n\n \x3c!-- Options panel in grid dropdown-only mode --\x3e\n <template v-if=\"dropdownOnly\">\n <div v-if=\"enableSearch\" class=\"eg-select-search\" @mousedown.stop>\n <input\n ref=\"searchInput\"\n class=\"eg-select-search-input\"\n :value=\"searchQuery\"\n placeholder=\"Qidirish...\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n @input=\"onSearch\"\n @keydown.stop=\"onSearchKey\"\n />\n </div>\n <div\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.id != null ? opt.id : String(opt.value)\"\n class=\"eg-select-option\"\n :class=\"{\n 'eg-select-option--active': String(opt.value) === String(value),\n 'eg-select-option--highlighted': idx === highlight\n }\"\n :style=\"!searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null\"\n @mousedown.prevent=\"pickOption(opt)\"\n @mouseover=\"highlight = idx\"\n >\n <span\n v-if=\"!searchQuery\"\n class=\"eg-tree-toggle\"\n :class=\"{ 'eg-tree-toggle--leaf': !opt.hasChildren }\"\n @mousedown.prevent.stop=\"toggleNode(idx)\"\n >{{ opt.hasChildren ? (opt.expanded ? '▾' : '▸') : '' }}</span>\n <span v-if=\"opt.color\" class=\"eg-select-dot\" :style=\"{ background: opt.color }\"></span>\n {{ opt.label }}\n </div>\n </template>\n\n \x3c!-- Options panel in standalone mode --\x3e\n <div\n v-else-if=\"open\"\n class=\"eg-select-dropdown eg-select-dropdown--floating\"\n @mousedown.stop.prevent\n >\n <div v-if=\"enableSearch\" class=\"eg-select-search\" @mousedown.stop>\n <input\n ref=\"searchInput\"\n class=\"eg-select-search-input\"\n :value=\"searchQuery\"\n placeholder=\"Qidirish...\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n @input=\"onSearch\"\n @keydown.stop=\"onSearchKey\"\n />\n </div>\n <div\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.id != null ? opt.id : String(opt.value)\"\n class=\"eg-select-option\"\n :class=\"{\n 'eg-select-option--active': String(opt.value) === String(value),\n 'eg-select-option--highlighted': idx === highlight\n }\"\n :style=\"!searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null\"\n @mousedown.prevent=\"pickOption(opt)\"\n @mouseover=\"highlight = idx\"\n >\n <span\n v-if=\"!searchQuery\"\n class=\"eg-tree-toggle\"\n :class=\"{ 'eg-tree-toggle--leaf': !opt.hasChildren }\"\n @mousedown.prevent.stop=\"toggleNode(idx)\"\n >{{ opt.hasChildren ? (opt.expanded ? '▾' : '▸') : '' }}</span>\n <span v-if=\"opt.color\" class=\"eg-select-dot\" :style=\"{ background: opt.color }\"></span>\n {{ opt.label }}\n </div>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'EgTreeSelect',\n model: { prop: 'value', event: 'input' },\n props: {\n value: { default: null },\n options: { type: Array, default: () => [] },\n valueKey: { type: String, default: 'value' },\n labelKey: { type: String, default: 'label' },\n childrenKey: { type: String, default: 'children' },\n enableSearch: { type: Boolean, default: false },\n placeholder: { type: String, default: '' },\n disabled: { type: Boolean, default: false },\n dropdownOnly: { type: Boolean, default: false },\n triggerRect: { type: Object, default: null }\n },\n data() {\n return {\n open: false,\n searchQuery: '',\n highlight: -1,\n expandedMap: {}\n }\n },\n computed: {\n keys() {\n return { valueKey: this.valueKey, labelKey: this.labelKey, childrenKey: this.childrenKey }\n },\n flatOptions() {\n return this._treeFlatten(this.options || [], this.keys, this.expandedMap, 0, [])\n },\n allFlatOptions() {\n if (!this.enableSearch) return null\n return this._treeFlattenAll(this.options || [], this.keys)\n },\n filteredOptions() {\n if (!this.enableSearch || !this.searchQuery.trim()) return this.flatOptions\n const q = this.searchQuery.trim().toLowerCase()\n const pool = this.allFlatOptions || this.flatOptions\n return pool.filter(o => String(o.label || '').toLowerCase().includes(q))\n },\n selectedLabel() {\n const v = String(this.value == null ? '' : this.value)\n if (!v) return null\n const found = this._treeFindLabel(this.options || [], this.keys, v)\n return found != null ? found : null\n },\n overlayStyle() {\n if (!this.dropdownOnly || !this.triggerRect) return { position: 'fixed', zIndex: 9999 }\n const rect = this.triggerRect\n const searchH = this.enableSearch ? 42 : 0\n const approxH = Math.min(this.filteredOptions.length * 28 + 8 + searchH, 320)\n const spaceBelow = window.innerHeight - rect.bottom\n const top = spaceBelow >= approxH ? rect.bottom : rect.top - approxH\n return {\n position: 'fixed',\n top: top + 'px',\n left: rect.left + 'px',\n minWidth: Math.max(rect.width, 120) + 'px',\n maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + 'px',\n zIndex: 9999\n }\n }\n },\n watch: {\n open(val) {\n if (val && this.enableSearch) {\n this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })\n }\n }\n },\n mounted() {\n if (this.dropdownOnly) {\n this._initExpanded()\n this.highlight = -1\n if (this.enableSearch) {\n this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })\n }\n } else {\n document.addEventListener('click', this._onDocClick)\n }\n },\n beforeDestroy() {\n if (!this.dropdownOnly) {\n document.removeEventListener('click', this._onDocClick)\n }\n },\n methods: {\n _initExpanded() {\n const v = String(this.value == null ? '' : this.value)\n const path = this._treeFindPath(this.options || [], this.keys, v, []) || []\n const expandedMap = {}\n path.forEach(id => { expandedMap[id] = true })\n this.expandedMap = expandedMap\n const flat = this.flatOptions\n this.highlight = flat.findIndex(o => String(o.value) === v)\n },\n toggle() {\n if (this.disabled) return\n this.open = !this.open\n if (this.open) {\n this.searchQuery = ''\n this._initExpanded()\n }\n },\n pickOption(opt) {\n this.$emit('input', opt.value)\n this.$emit('select', { value: opt.value, label: opt.label })\n if (!this.dropdownOnly) {\n this.open = false\n this.searchQuery = ''\n this.highlight = -1\n }\n },\n toggleNode(idx) {\n const opt = this.flatOptions[idx]\n if (!opt || !opt.hasChildren) return\n const next = { ...this.expandedMap }\n if (next[opt.id]) delete next[opt.id]\n else next[opt.id] = true\n this.expandedMap = next\n const newFlat = this.flatOptions\n const newIdx = newFlat.findIndex(o => o.id === opt.id)\n this.highlight = newIdx >= 0 ? newIdx : this.highlight\n },\n onSearch(e) {\n this.searchQuery = e.target.value\n this.highlight = 0\n },\n onSearchKey(e) {\n const key = e.key\n const last = this.filteredOptions.length - 1\n if (key === 'Escape') {\n e.preventDefault()\n if (this.dropdownOnly) this.$emit('close')\n else { this.open = false; this.searchQuery = '' }\n } else if (key === 'ArrowDown') {\n e.preventDefault()\n this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n this._scrollHighlightedIntoView()\n } else if (key === 'ArrowUp') {\n e.preventDefault()\n this.highlight = Math.max((this.highlight || 0) - 1, 0)\n this._scrollHighlightedIntoView()\n } else if (key === 'PageDown') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n this._scrollHighlightedIntoView()\n } else if (key === 'PageUp') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n this._scrollHighlightedIntoView()\n } else if (key === 'Enter') {\n e.preventDefault()\n const opt = this.filteredOptions[this.highlight]\n if (opt) this.pickOption(opt)\n }\n },\n handleKey(e) {\n const key = e.key\n const last = this.filteredOptions.length - 1\n if (key === 'Escape') {\n e.preventDefault()\n this.$emit('close')\n } else if (key === 'Enter' || key === ' ') {\n e.preventDefault()\n const opt = this.filteredOptions[this.highlight]\n if (opt) this.pickOption(opt)\n else this.$emit('close')\n } else if (key === 'ArrowDown') {\n e.preventDefault()\n this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n this._scrollHighlightedIntoView()\n } else if (key === 'ArrowUp') {\n e.preventDefault()\n this.highlight = Math.max((this.highlight || 0) - 1, 0)\n this._scrollHighlightedIntoView()\n } else if (key === 'PageDown') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n this._scrollHighlightedIntoView()\n } else if (key === 'PageUp') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n this._scrollHighlightedIntoView()\n } else if (!this.searchQuery && (key === 'ArrowRight' || key === 'ArrowLeft')) {\n e.preventDefault()\n const opt = this.flatOptions[this.highlight]\n if (opt && opt.hasChildren) {\n if (key === 'ArrowRight' && !opt.expanded) this.toggleNode(this.highlight)\n if (key === 'ArrowLeft' && opt.expanded) this.toggleNode(this.highlight)\n }\n }\n },\n _scrollHighlightedIntoView() {\n this.$nextTick(() => {\n const items = this.$el.querySelectorAll('.eg-select-option')\n const el = items[this.highlight]\n if (!el) return\n const container = this.$el\n const searchEl = container.querySelector('.eg-select-search')\n const stickyH = searchEl ? searchEl.offsetHeight : 0\n const elTop = el.offsetTop\n const elBottom = elTop + el.offsetHeight\n const visTop = container.scrollTop + stickyH\n const visBottom = container.scrollTop + container.clientHeight\n if (elTop < visTop) {\n container.scrollTop = elTop - stickyH\n } else if (elBottom > visBottom) {\n container.scrollTop = elBottom - container.clientHeight\n }\n })\n },\n onRootMouseDown(e) {\n if (this.dropdownOnly) e.preventDefault()\n },\n _onDocClick(e) {\n if (!this.open) return\n if (this.$el && this.$el.contains(e.target)) return\n this.open = false\n },\n _treeFlatten(nodes, keys, expandedMap, depth, pathArr) {\n let out = []\n ;(nodes || []).forEach((node, idx) => {\n const path = pathArr.concat(idx)\n const id = path.join('-')\n const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []\n const hasChildren = children.length > 0\n const expanded = hasChildren && !!expandedMap[id]\n out.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id, depth, hasChildren, expanded })\n if (expanded) out = out.concat(this._treeFlatten(children, keys, expandedMap, depth + 1, path))\n })\n return out\n },\n _treeFlattenAll(nodes, keys) {\n const result = []\n const walk = (list) => {\n ;(list || []).forEach(node => {\n const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []\n result.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id: String(node[keys.valueKey]), depth: 0, hasChildren: false, expanded: false })\n if (children.length) walk(children)\n })\n }\n walk(nodes)\n return result\n },\n _treeFindLabel(nodes, keys, value) {\n for (const node of (nodes || [])) {\n if (String(node[keys.valueKey]) === value) {\n return node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])\n }\n const found = this._treeFindLabel(node[keys.childrenKey], keys, value)\n if (found != null) return found\n }\n return null\n },\n _treeFindPath(nodes, keys, value, pathArr) {\n for (let i = 0; i < (nodes || []).length; i++) {\n const node = nodes[i]\n const path = pathArr.concat(i)\n if (String(node[keys.valueKey]) === value) return [path.join('-')]\n const children = node[keys.childrenKey]\n if (Array.isArray(children)) {\n const sub = this._treeFindPath(children, keys, value, path)\n if (sub) return [path.join('-')].concat(sub)\n }\n }\n return null\n }\n }\n}\n<\/script>\n\n<style>\n/* Tree toggle */\n.eg-tree-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--eg-color-text-muted);\n margin-top: 1px;\n}\n.eg-tree-toggle--leaf {\n visibility: hidden;\n}\n</style>\n"]},media:void 0})},j,void 0,false,void 0,!1,B,void 0,void 0),Y={small:{row:22,header:24,footer:24},middle:{row:28,header:28,footer:28},large:{row:36,header:36,footer:36}},X=50,q=20;const Z={name:"ExcelGrid",components:{EgCheckbox:W,EgSelect:K,EgTreeSelect:N},model:{prop:"data",event:"input"},props:{data:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},hiddenColumns:{type:Array,default:()=>[]},hiddenRows:{type:Array,default:()=>[]},merges:{type:Array,default:()=>[]},collapsedGroups:{type:Array,default:()=>[]},height:{type:Number,default:400},width:{type:[Number,String],default:"100%"},beforeDrop:{type:Function,default:null},locale:{type:String,default:"en"},pinnedColumns:{type:Object,default:()=>({})},cellEditable:{type:Function,default:null},cellValidator:{type:Function,default:null},cellValidationMessage:{type:[Function,String],default:null},strictBulkValidation:{type:Boolean,default:!1},size:{type:String,default:"middle"},autoWidth:{type:Boolean,default:!1},columnDraggable:{type:Boolean,default:!0}},data:()=>({activeCell:{row:0,col:0},selectionRanges:[],isMouseDown:!1,mouseDownRange:null,isCtrlDrag:!1,editingCell:null,editValue:"",editOriginalValue:"",scrollTop:0,scrollLeft:0,headerViewportWidth:null,virtualStartIndex:0,virtualEndIndex:0,virtualOffsetTop:0,totalVirtualHeight:0,colWidths:{},rowHeights:{},importState:{active:!1,percent:0,message:""},exportState:{active:!1},resizing:{active:!1,type:null,index:-1,startX:0,startY:0,startSize:0,currentPos:0},fillDrag:{active:!1,sourceRange:null,currentRow:-1,currentCol:-1},dragMove:{active:!1,sourceRange:null,startX:0,startY:0,targetRow:-1,targetCol:-1,copyMode:!1},clipboardMatrix:null,clipboardRange:null,clipboardMode:null,contextMenu:{visible:!1,x:0,y:0,row:-1,col:-1},selectDropdown:null,invalidCell:null,internalMerges:[],internalGroups:[],internalCollapsedGroups:[],headerDepth:1,headerRows:[],leafCols:[],columnTotals:{},colDrag:{pending:!1,active:!1,sourceFirstLeaf:-1,sourceLeafCount:1,dropIndex:-1,startX:0,startY:0,currentX:0,currentY:0,ghostLabel:""}}),computed:{t(){return e=this.locale,M[e]||M.en;var e},pinnedLeftSet(){const e=new Set;return this.leafCols.forEach(n=>{"left"===this.pinnedColumns[n.key]&&e.add(n._flatIndex)}),e},pinnedRightSet(){const e=new Set;return this.leafCols.forEach(n=>{"right"===this.pinnedColumns[n.key]&&e.add(n._flatIndex)}),e},pinnedLeftCols(){return this.leafCols.filter(e=>this.pinnedLeftSet.has(e._flatIndex))},pinnedRightCols(){return this.leafCols.filter(e=>this.pinnedRightSet.has(e._flatIndex))},hasPinnedLeft(){return this.pinnedLeftSet.size>0},hasPinnedRight(){return this.pinnedRightSet.size>0},hasFooter(){return this.leafCols.some(e=>e.showTotal)},pinnedLeftWidth(){let e=0;for(const n of this.pinnedLeftCols)this.isColHidden(n._flatIndex)||(e+=this.getColW(n._flatIndex));return e},pinnedRightWidth(){let e=0;for(const n of this.pinnedRightCols)this.isColHidden(n._flatIndex)||(e+=this.getColW(n._flatIndex));return e},totalRows(){return this.data.length},_sizeConf(){return Y[this.size]||Y.middle},_rowH(){return this._sizeConf.row},_headerRowH(){return this._sizeConf.header},_footerRowH(){return this._sizeConf.footer},headerRowHeight(){return this._headerRowH},footerRowHeight(){return this._footerRowH},cumulativeHeights(){return function(e,n,t={},o=new Set){const i=new Array(e+1);i[0]=0;for(let l=0;l<e;l++){const e=o.has(l)?0:void 0!==t[l]?t[l]:n;i[l+1]=i[l]+e}return i}(this.totalRows,this._rowH,this.rowHeights,this.hiddenRowSet)},hiddenColSet(){return new Set(this.hiddenColumns)},hiddenRowSet(){const e=new Set(this.hiddenRows);return function(e,n){const t=new Set;for(const o of e)if("row"===o.type&&S(o,n))for(let e=o.startIndex;e<=o.endIndex;e++)t.add(e);return t}(this.internalGroups,this.internalCollapsedGroups).forEach(n=>e.add(n)),e},hiddenColFromGroupSet(){return function(e,n){const t=new Set;for(const o of e)if("column"===o.type&&S(o,n))for(let e=o.startIndex;e<=o.endIndex;e++)t.add(e);return t}(this.internalGroups,this.internalCollapsedGroups)},effectiveHiddenColSet(){const e=new Set(this.hiddenColSet);return this.hiddenColFromGroupSet.forEach(n=>e.add(n)),e},rowGroups(){return this.internalGroups.filter(e=>"row"===e.type)},colGroups(){return this.internalGroups.filter(e=>"column"===e.type)},visibleRowRange(){const e=[];for(let n=this.virtualStartIndex;n<=this.virtualEndIndex;n++)e.push(n);return e},primaryRange(){return function(e,n){if(!e||0===e.length)return null;return i(e.find(e=>l(n.row,n.col,e))||e[0])}(this.selectionRanges,this.activeCell)},fillHandleVisible(){return this.primaryRange&&!this.editingCell},fillHandleStyle(){if(!this.primaryRange)return{};const e=i(this.primaryRange),n=this.cumulativeHeights[e.endRow+1]||0,t=this.getColLeft(e.endCol+1);return{position:"absolute",width:"6px",height:"6px",background:"var(--eg-color-accent)",border:"1px solid white",bottom:this.totalVirtualHeight-n+1+"px",right:this.scrollContentWidth-t+1+"px",cursor:"crosshair",zIndex:10}},invalidTooltipStyle(){if(!this.invalidCell||!this.invalidCell.rect)return{};const{rect:e}=this.invalidCell;return{position:"fixed",top:e.bottom+4+"px",left:e.left+"px",zIndex:9999}},dragGhostStyle(){if(!this.dragMove.active||this.dragMove.targetRow<0)return{};const e=i(this.dragMove.sourceRange),n=e.endRow-e.startRow,t=e.endCol-e.startCol;return{position:"absolute",top:(this.cumulativeHeights[this.dragMove.targetRow]||0)+"px",left:this.getColLeft(this.dragMove.targetCol)+"px",width:this.getRangeWidth(this.dragMove.targetCol,this.dragMove.targetCol+t)+"px",height:this.getRangeHeight(this.dragMove.targetRow,this.dragMove.targetRow+n)+"px",border:"2px dashed #1a73e8",pointerEvents:"none",zIndex:20}},wrapperStyle(){return{width:"number"==typeof this.width?this.width+"px":this.width,height:this.height+"px",position:"relative",outline:"none",userSelect:"none"}},headerAreaStyle:()=>({display:"flex",flexDirection:"row",position:"sticky",top:0,zIndex:30,background:"var(--eg-color-header-bg)"}),cornerStyle(){const e=this.rowGroups.length?q:0;return{width:X+e+"px",minWidth:X+e+"px",height:this._headerRowH*this.headerDepth+"px",background:"var(--eg-color-header-bg)",borderRight:"1px solid var(--eg-color-border)",borderBottom:"1px solid var(--eg-color-border)",boxSizing:"border-box",flexShrink:0}},rowOutlineGutterStyle:()=>({width:"20px",flexShrink:0}),frozenColHeaderStyle(){const e=this.getFrozenWidth();return{width:e+"px",minWidth:e+"px",overflow:"hidden",flexShrink:0}},scrollColHeaderStyle(){return null!=this.headerViewportWidth?{flex:"0 0 "+this.headerViewportWidth+"px",overflow:"hidden"}:{flex:1,overflow:"hidden"}},bodyAreaStyle:()=>({display:"flex",flexDirection:"row",flex:1,position:"relative"}),rowHeaderColStyle:()=>({width:"50px",minWidth:"50px",flexShrink:0,display:"flex",flexDirection:"column",position:"sticky",left:0,zIndex:20,background:"var(--eg-color-header-bg)"}),rowOutlineColStyle:()=>({width:"20px",minWidth:"20px",flexShrink:0,position:"relative",background:"var(--eg-color-cell-bg)"}),scrollBodyStyle:()=>({flex:1,overflow:"auto",position:"relative",overflowAnchor:"none"}),frozenColBodyStyle(){return{position:"sticky",left:0,width:this.getFrozenWidth()+"px",zIndex:10,background:"white",overflow:"hidden"}},mainCellsStyle(){return{position:"absolute",left:this.getFrozenWidth()+"px",top:0,bottom:0}},scrollContentWidth(){let e=0;for(let n=0;n<this.leafCols.length;n++)this.isColHidden(n)||this.pinnedRightSet.has(n)||(e+=this.getColW(n));return this.hasPinnedRight&&(e+=this.pinnedRightWidth),e},scrollableContentWidth(){let e=0;for(let n=0;n<this.leafCols.length;n++)!this.isColHidden(n)&&this.isColumnScrollable(n)&&(e+=this.getColW(n));return e},pinnedRightBodyStyle(){return{position:"sticky",right:0,width:this.pinnedRightWidth+"px",zIndex:10,background:"white",flexShrink:0}},pinnedRightHeaderStyle(){return{width:this.pinnedRightWidth+"px",minWidth:this.pinnedRightWidth+"px",overflow:"hidden",flexShrink:0,borderLeft:"1px solid var(--eg-color-border)"}},scrollRowHeadersStyle:()=>({flex:1,overflow:"hidden",position:"relative",overflowAnchor:"none"}),footerAreaStyle:()=>({display:"flex",flexDirection:"row",flexShrink:0,position:"sticky",bottom:0,zIndex:30,background:"var(--eg-color-footer-bg)",boxShadow:"0 -2px 0 0 var(--eg-color-border-strong)"}),footerLabelStyle(){const e=this.rowGroups.length?q:0;return{width:X+e+"px",minWidth:X+e+"px",height:this._footerRowH+"px",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--eg-color-footer-bg)",borderRight:"1px solid var(--eg-color-border)",borderTop:"1px solid var(--eg-color-border)",boxSizing:"border-box",flexShrink:0,fontSize:"var(--eg-font-size-header)",fontWeight:600}},frozenColFooterStyle(){const e=this.getFrozenWidth();return{width:e+"px",minWidth:e+"px",height:this._footerRowH+"px",overflow:"hidden",flexShrink:0}},pinnedRightFooterStyle(){return{width:this.pinnedRightWidth+"px",minWidth:this.pinnedRightWidth+"px",height:this._footerRowH+"px",overflow:"hidden",flexShrink:0,borderLeft:"1px solid var(--eg-color-border)"}},colOutlineRowStyle:()=>({position:"absolute",top:"-20px",left:0,right:0,height:"20px"}),resizeLineStyle(){return this.resizing.active?"col"===this.resizing.type?{position:"fixed",top:0,left:this.resizing.currentPos+"px",width:"2px",height:"100%",background:"var(--eg-color-accent)",pointerEvents:"none",zIndex:9999}:{position:"fixed",left:0,top:this.resizing.currentPos+"px",height:"2px",width:"100%",background:"var(--eg-color-accent)",pointerEvents:"none",zIndex:9999}:{}}},watch:{size(){this.rowHeights={},this.$nextTick(()=>this.updateVirtualScroll())},autoWidth(e){e&&this._applyAutoWidth()},columns:{immediate:!0,handler(e){this.leafCols=s(e),this.headerDepth=a(e),this.headerRows=c(e,this.headerDepth),this.leafCols.forEach(e=>{void 0===this.colWidths[e._flatIndex]&&(this.colWidths[e._flatIndex]=e.width||100)}),this.computeColumnTotals(),this.updateVirtualScroll(),this._applyAutoWidth()}},merges:{immediate:!0,handler(e){this.internalMerges=e?[...e]:[]}},collapsedGroups:{immediate:!0,handler(e){this.internalCollapsedGroups=e?[...e]:[]}},data:{immediate:!0,handler(e){this._dataRaw=e||[],this.updateVirtualScroll(),this.computeColumnTotals(),this.$forceUpdate(),this._applyAutoWidth()}},totalRows(){this.updateVirtualScroll()},hiddenRowSet(){this.updateVirtualScroll()},totalVirtualHeight(){this.$nextTick(this.syncHeaderViewportWidth)}},created(){this._dataRaw=this.data||[],this._cellStyleCache=Object.create(null),this._rowStyleCache=Object.create(null),this._rowHeaderStyleCache=Object.create(null),this._scrollRAF=null,this._resizeRAF=null,this._history=[],this._historyIndex=-1,this._historySkip=!1,this._dragOffsets={}},mounted(){this.updateVirtualScroll(),this.$nextTick(this.syncHeaderViewportWidth),document.addEventListener("mousemove",this.onGlobalMouseMove),document.addEventListener("mouseup",this.onGlobalMouseUp),document.addEventListener("keydown",this.onGlobalKeyDown),document.addEventListener("mousedown",this._onDocMouseDownForDropdown,!0),window.addEventListener("resize",this.syncHeaderViewportWidth),window.addEventListener("scroll",this._onWindowScrollForDropdown,!0)},beforeDestroy(){document.removeEventListener("mousemove",this.onGlobalMouseMove),document.removeEventListener("mouseup",this.onGlobalMouseUp),document.removeEventListener("keydown",this.onGlobalKeyDown),document.removeEventListener("mousedown",this._onDocMouseDownForDropdown,!0),window.removeEventListener("resize",this.syncHeaderViewportWidth),window.removeEventListener("scroll",this._onWindowScrollForDropdown,!0)},methods:{updateVirtualScroll(){const e=this.hasFooter?this._footerRowH:0,n=this.height-this._headerRowH*this.headerDepth-e,t=function(e,n,t,o,i=5){if(0===t)return{startIndex:0,endIndex:-1,offsetTop:0,totalHeight:0};const l=o[t],r=e+n;let s=0,a=t-1;for(;s<a;){const n=s+a>>1;o[n+1]<=e?s=n+1:a=n}let c=s,d=c;for(;d<t-1&&o[d+1]<r;)d++;return c=Math.max(0,c-i),d=Math.min(t-1,d+i),{startIndex:c,endIndex:d,offsetTop:o[c],totalHeight:l}}(this.scrollTop,Math.max(n,100),this.totalRows,this.cumulativeHeights,8);this.virtualStartIndex=t.startIndex,this.virtualEndIndex=t.endIndex,this.virtualOffsetTop=t.offsetTop,this.totalVirtualHeight=t.totalHeight},onBodyScroll(e){const n=e.target;this.$refs.scrollColHeader&&(this.$refs.scrollColHeader.scrollLeft=n.scrollLeft),this.$refs.scrollFooter&&(this.$refs.scrollFooter.scrollLeft=n.scrollLeft),this.$refs.scrollRowHeaders&&(this.$refs.scrollRowHeaders.scrollTop=n.scrollTop),this.selectDropdown&&this.closeSelectDropdown(),this._scrollRAF||(this._scrollRAF=requestAnimationFrame(()=>{this._scrollRAF=null;const e=this.$refs.scrollBody;e&&(this.scrollTop=e.scrollTop,this.scrollLeft=e.scrollLeft,this.updateVirtualScroll())}))},onScroll(e){},syncHeaderViewportWidth(){const e=this.$refs.scrollBody;e&&this.headerViewportWidth!==e.clientWidth&&(this.headerViewportWidth=e.clientWidth)},isRowHidden(e){return this.hiddenRowSet.has(e)},isColHidden(e){return this.effectiveHiddenColSet.has(e)},getColW(e){return void 0!==this.colWidths[e]?this.colWidths[e]:this.leafCols[e]&&this.leafCols[e].width||100},getRowH(e){return this.isRowHidden(e)?0:this.rowHeights[e]||this._rowH},getColLeft(e){let n=0;for(let t=0;t<e&&t<this.leafCols.length;t++)this.isColHidden(t)||(n+=this.getColW(t));return n},getFrozenWidth(){return this.hasPinnedLeft?this.pinnedLeftWidth:0},isColumnPinnedLeft(e){return this.pinnedLeftSet.has(e)},isColumnPinnedRight(e){return this.pinnedRightSet.has(e)},isColumnScrollable(e){return!this.isColumnPinnedLeft(e)&&!this.isColumnPinnedRight(e)},getZoneColLeft(e,n){let t=0;if("left"===n)for(const n of this.pinnedLeftCols){if(n._flatIndex===e)break;this.isColHidden(n._flatIndex)||(t+=this.getColW(n._flatIndex))}else if("right"===n)for(const n of this.pinnedRightCols){if(n._flatIndex===e)break;this.isColHidden(n._flatIndex)||(t+=this.getColW(n._flatIndex))}else for(let n=0;n<this.leafCols.length;n++){const o=this.leafCols[n];if(o._flatIndex===e)break;!this.isColHidden(o._flatIndex)&&this.isColumnScrollable(o._flatIndex)&&(t+=this.getColW(o._flatIndex))}return t},isCellInZone(e,n,t){if(e.isGroup){const n=e._firstLeafFlatIndex,o=n+e.colspan-1;for(let e=n;e<=o;e++){if(this.isColHidden(e))continue;if((this.isColumnPinnedLeft(e)?"left":this.isColumnPinnedRight(e)?"right":"scroll")===t)return!0}return!1}const o=e.column._flatIndex;if(this.isColHidden(o))return!1;return(this.isColumnPinnedLeft(o)?"left":this.isColumnPinnedRight(o)?"right":"scroll")===t},getHeaderCellStyleForZone(e,n,t){let o=e._firstLeafFlatIndex;if(e.isGroup){const n=o+e.colspan-1;for(let e=o;e<=n;e++){if(this.isColHidden(e))continue;if((this.isColumnPinnedLeft(e)?"left":this.isColumnPinnedRight(e)?"right":"scroll")===t){o=e;break}}}const i=this.getZoneColLeft(o,t);let l=0;if(e.isGroup){const n=e._firstLeafFlatIndex,o=n+e.colspan-1;for(let e=n;e<=o;e++){if(this.isColHidden(e))continue;(this.isColumnPinnedLeft(e)?"left":this.isColumnPinnedRight(e)?"right":"scroll")===t&&(l+=this.getColW(e))}}else l=this.getColW(e.column._flatIndex);return{top:this._headerRowH*n+"px",left:i+"px",width:l+"px",height:this._headerRowH*e.rowspan+"px"}},getRangeWidth(e,n){let t=0;for(let o=e;o<=n&&o<this.leafCols.length;o++)this.isColHidden(o)||(t+=this.getColW(o));return t},getRangeHeight(e,n){let t=0;for(let o=e;o<=n&&o<this.totalRows;o++)this.isRowHidden(o)||(t+=this.getRowH(o));return t},getCellValue(e,n){const t=this.leafCols[n];if(!t)return"";const o=this._dataRaw[e];if(!o)return"";const i=o[t.key];return void 0!==i?i:""},isEditing(e,n){return this.editingCell&&this.editingCell.row===e&&this.editingCell.col===n},isMergedAway(e,n){const t=b(e,n,this.internalMerges);if(!t)return!1;const o=i(t);return!(o.startRow===e&&o.startCol===n)},getMergeSpan(e,n){const t=b(e,n,this.internalMerges);if(!t)return{rowspan:1,colspan:1};const o=i(t);return{rowspan:o.endRow-o.startRow+1,colspan:o.endCol-o.startCol+1}},isSelected(e,n){return t=e,o=n,this.selectionRanges.some(e=>l(t,o,e));var t,o},isActiveCell(e,n){return this.activeCell.row===e&&this.activeCell.col===n},isCopyHighlighted(e,n){return!(!this.clipboardRange||"copy"!==this.clipboardMode)&&l(e,n,this.clipboardRange)},getRowStyle(e){const n=this.getRowH(e),t=n;if(this._rowStyleCache[t])return this._rowStyleCache[t];const o={height:n+"px",minHeight:n+"px"};return this._rowStyleCache[t]=o,o},getRowHeaderStyle(e){const n=this.getRowH(e),t=n;if(this._rowHeaderStyleCache[t])return this._rowHeaderStyleCache[t];const o={height:n+"px"};return this._rowHeaderStyleCache[t]=o,o},getCellStyle(e,n){const t=b(e,n,this.internalMerges),o=t?i(t):null;let l=this.getColW(n),r=this.getRowH(e);o&&o.startRow===e&&o.startCol===n&&(l=this.getRangeWidth(o.startCol,o.endCol),r=this.getRangeHeight(o.startRow,o.endRow));const s=this.isColumnPinnedLeft(n)?"left":this.isColumnPinnedRight(n)?"right":"scroll",a=this.getZoneColLeft(n,s),c=l+"_"+r+"_"+a;if(this._cellStyleCache[c])return this._cellStyleCache[c];const d={position:"absolute",left:a+"px",top:"0px",width:l+"px",minWidth:l+"px",height:r+"px"};return this._cellStyleCache[c]=d,d},getCellClasses(e,n){const t=this.leafCols[n];return{"eg-cell-active":this.isActiveCell(e,n),"eg-cell-selected":this.isSelected(e,n)&&!this.isActiveCell(e,n),"eg-cell-fill-preview":this.isInFillPreview(e,n),"eg-cell-copy":this.isCopyHighlighted(e,n),"eg-cell-merged-hidden":this.isMergedAway(e,n),"eg-cell-select":!(!t||!this.isSelectLikeCol(t)),"eg-cell-checkbox":!(!t||"checkbox"!==t.type),"eg-cell-readonly":!this.isCellEditable(e,n),"eg-cell-invalid":!(!this.invalidCell||this.invalidCell.row!==e||this.invalidCell.col!==n),"eg-cell--has-suffix":!(!t||!this.hasSuffixSlot(t)),"eg-cell--drag-source":this.colDrag.active&&n>=this.colDrag.sourceFirstLeaf&&n<this.colDrag.sourceFirstLeaf+this.colDrag.sourceLeafCount}},isInFillPreview(e,n){if(!this.fillDrag.active||!this.fillDrag.sourceRange)return!1;const t=this.fillDrag.sourceRange,o=this.fillDrag.currentRow,i=this.fillDrag.currentCol;return o>t.endRow?e>t.endRow&&e<=o&&n>=t.startCol&&n<=t.endCol:i>t.endCol&&(n>t.endCol&&n<=i&&e>=t.startRow&&e<=t.endRow)},getHeaderCellStyle(e,n,t){const o=t?"left":"scroll";let i=e._firstLeafFlatIndex;if(e.isGroup){const n=i+e.colspan-1;for(let e=i;e<=n;e++)if(!this.isColHidden(e)&&(t?this.isColumnPinnedLeft(e):this.isColumnScrollable(e))){i=e;break}}const l=this.getZoneColLeft(i,o);let r=0;if(e.isGroup){const n=e._firstLeafFlatIndex,o=n+e.colspan-1;for(let e=n;e<=o;e++){if(this.isColHidden(e))continue;(t?this.isColumnPinnedLeft(e):this.isColumnScrollable(e))&&(r+=this.getColW(e))}}else r=this.getColW(e.column._flatIndex);return{top:this._headerRowH*n+"px",left:l+"px",width:r+"px",height:this._headerRowH*e.rowspan+"px"}},getHeaderDragTransform(e){if(!this.colDrag.active)return null;let n;if(e.isGroup){const t=e._firstLeafFlatIndex,o=t+e.colspan-1;for(let e=t;e<=o;e++)if(!this.isColHidden(e)&&this.leafCols[e]){n=this.leafCols[e].key;break}}else n=e.column.key;if(!n)return null;const t=this._dragOffsets[n];return t?{transform:`translateX(${t}px)`}:null},getCellDragTransform(e){if(!this.colDrag.active)return null;const n=this.leafCols[e];if(!n)return null;const t=this._dragOffsets[n.key];return t?{transform:`translateX(${t}px)`}:null},computeColumnTotals(){const e={},n=this._dataRaw||[];this.leafCols.forEach(t=>{if(!t.showTotal)return;let o=0,i=!1;for(let e=0;e<n.length;e++){const l=n[e],r=l?l[t.key]:void 0;"number"==typeof r&&isFinite(r)&&(o+=r,i=!0)}e[t._flatIndex]=i?Math.round(1e6*o)/1e6:null}),this.columnTotals=e},getColumnTotalDisplay(e){const n=this.leafCols[e];if(!n||!n.showTotal)return"";const t=this.columnTotals[e];return null==t?"-":t},getFooterCellStyle(e){const n=this.isColumnPinnedLeft(e)?"left":this.isColumnPinnedRight(e)?"right":"scroll",t=this.getZoneColLeft(e,n),o=this.getColW(e);return{position:"absolute",left:t+"px",top:"0px",width:o+"px",minWidth:o+"px",height:this._footerRowH+"px"}},isCellVisible(e,n,t){if(e.isGroup){const n=e._firstLeafFlatIndex,o=n+e.colspan-1;for(let e=n;e<=o;e++){if(this.isColHidden(e))continue;if(t?this.isColumnPinnedLeft(e):this.isColumnScrollable(e))return!0}return!1}const o=e.column._flatIndex;return!this.isColHidden(o)&&(t?this.isColumnPinnedLeft(o):this.isColumnScrollable(o))},getRowGroupBtnStyle(e){return{position:"absolute",top:g(e.startIndex,this._rowH,this.rowHeights)-this.scrollTop+"px",left:"2px",width:"16px",height:"16px",lineHeight:"16px",textAlign:"center",fontSize:"10px",cursor:"pointer",background:"var(--eg-color-accent-soft)",border:"1px solid var(--eg-color-group-border)",borderRadius:"2px",zIndex:5}},getColGroupBtnStyle(e){return{position:"absolute",left:this.getColLeft(e.startIndex)-this.scrollLeft+"px",top:"2px",width:"16px",height:"16px",lineHeight:"16px",textAlign:"center",fontSize:"10px",cursor:"pointer",background:"var(--eg-color-accent-soft)",border:"1px solid var(--eg-color-group-border)",borderRadius:"2px"}},selectCell(e,n,t=!1){e<0||e>=this.totalRows||n<0||n>=this.leafCols.length||(this.activeCell={row:e,col:n},t?this.selectionRanges.push(r(e,n)):this.selectionRanges=[r(e,n)],this.emitSelectionChange())},selectRange(e,n,t,o,i=!0){const l={startRow:e,startCol:n,endRow:t,endCol:o};i?this.selectionRanges=[l]:this.selectionRanges.push(l),this.emitSelectionChange()},selectRow(e){this.activeCell={row:e,col:0},this.selectionRanges=[{startRow:e,endRow:e,startCol:0,endCol:this.leafCols.length-1}],this.emitSelectionChange()},selectColumn(e){this.activeCell={row:0,col:e},this.selectionRanges=[{startRow:0,endRow:this.totalRows-1,startCol:e,endCol:e}],this.emitSelectionChange()},selectAll(){this.activeCell={row:0,col:0},this.selectionRanges=[{startRow:0,endRow:this.totalRows-1,startCol:0,endCol:this.leafCols.length-1}],this.emitSelectionChange()},emitSelectionChange(){this.$emit("selection-change",{activeCell:{...this.activeCell},ranges:this.selectionRanges.map(e=>i(e))})},onCellMouseDown(e,n,t){if(this.invalidCell=null,this.editingCell){const e=this.leafCols[this.editingCell.col];e&&this._hasCustomEdit(e)?this.cancelEdit():this.commitEdit()}if(this.hideContextMenu(),this.$refs.wrapper&&this.$refs.wrapper.focus(),e.ctrlKey||e.metaKey)this.selectDropdown&&this.closeSelectDropdown(),this.activeCell={row:n,col:t},this.mouseDownRange={startRow:n,startCol:t,endRow:n,endCol:t},this.selectionRanges.push(this.mouseDownRange),this.isCtrlDrag=!0;else if(e.shiftKey&&this.selectionRanges.length>0)this.selectDropdown&&this.closeSelectDropdown(),this.selectionRanges=[(o=this.activeCell,i={row:n,col:t},{startRow:o.row,startCol:o.col,endRow:i.row,endCol:i.col})];else{const o=this.activeCell.row===n&&this.activeCell.col===t;this.activeCell={row:n,col:t},this.mouseDownRange={startRow:n,startCol:t,endRow:n,endCol:t},this.selectionRanges=[this.mouseDownRange],this.isCtrlDrag=!1;const i=this.leafCols[t];if(o&&i&&this.isSelectLikeCol(i)&&!this._hasCustomEdit(i)&&this.isCellEditable(n,t))return this.openSelectDropdown(n,t,e),e.preventDefault(),this.isMouseDown=!0,void this.emitSelectionChange();this.selectDropdown&&this.closeSelectDropdown()}var o,i;this.isMouseDown=!0,this.emitSelectionChange(),e.preventDefault()},onCellMouseOver(e,n,t){if(this.isMouseDown&&!this.fillDrag.active)return this.dragMove.active?(this.dragMove.targetRow=n,void(this.dragMove.targetCol=t)):void(this.mouseDownRange&&(this.mouseDownRange.endRow=n,this.mouseDownRange.endCol=t,this.emitSelectionChange()))},onCellMouseUp(){this.isMouseDown=!1},onCellDblClick(e,n){const t=this.leafCols[n];this.isCellEditable(e,n)&&(t&&this.isSelectLikeCol(t)&&!this._hasCustomEdit(t)?this.openSelectDropdownForActive():t&&"checkbox"===t.type||this.startEditing(e,n,null,!0))},onRowHeaderMouseDown(e,n){const t=this.leafCols.length-1,o={startRow:n,endRow:n,startCol:0,endCol:t};if(e.ctrlKey||e.metaKey)if(e.shiftKey&&this.selectionRanges.length>0){const e=Math.min(this.activeCell.row,n),o=Math.max(this.activeCell.row,n);this.selectionRanges=[...this.selectionRanges,{startRow:e,endRow:o,startCol:0,endCol:t}]}else{const e=this.selectionRanges.findIndex(e=>e.startRow===n&&e.endRow===n&&0===e.startCol&&e.endCol===t);if(e>=0){const n=this.selectionRanges.filter((n,t)=>t!==e);this.selectionRanges=n.length?n:[o]}else this.activeCell={row:n,col:0},this.selectionRanges=[...this.selectionRanges,o]}else if(e.shiftKey&&this.selectionRanges.length>0){const e=Math.min(this.activeCell.row,n),o=Math.max(this.activeCell.row,n);this.selectionRanges=[{startRow:e,endRow:o,startCol:0,endCol:t}]}else this.activeCell={row:n,col:0},this.selectionRanges=[o];this.mouseDownRange=this.selectionRanges[this.selectionRanges.length-1],this.isMouseDown=!0,this.emitSelectionChange(),e.preventDefault()},onColHeaderMouseDown(e,n){if(!this.columnDraggable||e.shiftKey||e.ctrlKey||e.metaKey||(this.colDrag.pending=!0,this.colDrag.active=!1,this.colDrag.sourceFirstLeaf=n._firstLeafFlatIndex,this.colDrag.sourceLeafCount=n.isGroup?n.colspan:1,this.colDrag.startX=e.clientX,this.colDrag.startY=e.clientY,this.colDrag.ghostLabel=n.column.title||""),n.isGroup){const t=n._firstLeafFlatIndex,o=t+n.colspan-1;return this.activeCell={row:0,col:t},this.selectionRanges=[{startRow:0,endRow:this.totalRows-1,startCol:t,endCol:o}],this.isMouseDown=!0,this.mouseDownRange=this.selectionRanges[0],this.emitSelectionChange(),void e.preventDefault()}const t=n.column._flatIndex;if(e.shiftKey&&this.selectionRanges.length>0){const e=Math.min(this.activeCell.col,t),n=Math.max(this.activeCell.col,t);this.selectionRanges=[{startRow:0,endRow:this.totalRows-1,startCol:e,endCol:n}]}else this.activeCell={row:0,col:t},this.selectionRanges=[{startRow:0,endRow:this.totalRows-1,startCol:t,endCol:t}];this.isMouseDown=!0,this.mouseDownRange=this.selectionRanges[0],this.emitSelectionChange(),e.preventDefault()},onColHeaderDblClick(e,n){n.isGroup||this.autoFitColumn(n.column._flatIndex)},onColHeaderContextMenu(e,n){n.isGroup||(this.contextMenu={visible:!0,x:e.clientX,y:e.clientY,row:-1,col:n.column._flatIndex})},onRowContextMenu(e,n){this.contextMenu={visible:!0,x:e.clientX,y:e.clientY,row:n,col:-1}},onCellContextMenu(e,n,t){this.isSelected(n,t)||this.selectCell(n,t),this.contextMenu={visible:!0,x:e.clientX,y:e.clientY,row:n,col:t}},hideContextMenu(){this.contextMenu.visible=!1},onKeyDown(e){if(this.selectDropdown){const n=this.$refs.selectDropdownComp;return void(n&&n.handleKey&&n.handleKey(e))}if(this.editingCell)return;const n=e.key;if((e.ctrlKey||e.metaKey)&&"z"===n&&!e.shiftKey)return e.preventDefault(),void this.undo();if((e.ctrlKey||e.metaKey)&&("y"===n||"z"===n&&e.shiftKey))return e.preventDefault(),void this.redo();if("a"===n&&(e.ctrlKey||e.metaKey))return e.preventDefault(),void this.selectAll();if("c"===n&&(e.ctrlKey||e.metaKey))return e.preventDefault(),void this.copySelection();if("x"===n&&(e.ctrlKey||e.metaKey))return e.preventDefault(),void this.cutSelection();if("v"===n&&(e.ctrlKey||e.metaKey))return e.preventDefault(),void this.pasteAt(this.activeCell.row,this.activeCell.col);if("Delete"===n||"Backspace"===n)return e.preventDefault(),void this.clearSelection();if("F2"===n){e.preventDefault();const n=this.leafCols[this.activeCell.col];return void(n&&this.isSelectLikeCol(n)&&!this._hasCustomEdit(n)?this.openSelectDropdownForActive():n&&"checkbox"===n.type?this.toggleCheckbox(this.activeCell.row,this.activeCell.col):this.startEditing(this.activeCell.row,this.activeCell.col,null,!0))}if(" "===n){const n=this.leafCols[this.activeCell.col];if(n&&"checkbox"===n.type)return e.preventDefault(),void this.toggleCheckbox(this.activeCell.row,this.activeCell.col)}if("Escape"===n)return this.clipboardRange=null,this.clipboardMatrix=null,void(this.clipboardMode=null);if("Tab"===n)return e.preventDefault(),void this.moveActive(0,e.shiftKey?-1:1,e);if("Enter"===n)return e.preventDefault(),void this.moveActive(e.shiftKey?-1:1,0,e);const t={ArrowUp:[-1,0],ArrowDown:[1,0],ArrowLeft:[0,-1],ArrowRight:[0,1]};if(t[n]){e.preventDefault();const[o,l]=t[n];if(e.shiftKey){const e=this.primaryRange||r(this.activeCell.row,this.activeCell.col),n=i(e);-1===o&&(e.startRow=Math.max(0,n.startRow-1)),1===o&&(e.endRow=Math.min(this.totalRows-1,n.endRow+1)),-1===l&&(e.startCol=Math.max(0,n.startCol-1)),1===l&&(e.endCol=Math.min(this.leafCols.length-1,n.endCol+1)),this.selectionRanges=[e],this.emitSelectionChange()}else this.moveActive(o,l,e);return}if("Home"===n)return e.preventDefault(),void(e.ctrlKey?this.selectCell(0,0):this.selectCell(this.activeCell.row,0));if("End"===n)return e.preventDefault(),void(e.ctrlKey?this.selectCell(this.totalRows-1,this.leafCols.length-1):this.selectCell(this.activeCell.row,this.leafCols.length-1));if("PageUp"===n){e.preventDefault();const n=Math.floor((this.height-this._headerRowH*this.headerDepth)/this._rowH);return void this.moveActive(-n,0,e)}if("PageDown"===n){e.preventDefault();const n=Math.floor((this.height-this._headerRowH*this.headerDepth)/this._rowH);return void this.moveActive(n,0,e)}},onKeyPress(e){if(!this.editingCell&&!this.selectDropdown&&!(e.ctrlKey||e.metaKey||e.altKey)&&e.key&&1===e.key.length){const n=this.leafCols[this.activeCell.col];if(n&&this.isSelectLikeCol(n)&&!this._hasCustomEdit(n))return e.preventDefault(),void this.openSelectDropdownForActive();if(n&&"checkbox"===n.type)return void e.preventDefault();this.startEditing(this.activeCell.row,this.activeCell.col,e.key,!1)}},onGlobalKeyDown(e){"Escape"===e.key&&(this.colDrag.active||this.colDrag.pending)&&(this._resetColDrag(),e.preventDefault())},moveActive(e,n,t){let o=this.activeCell.row+e,l=this.activeCell.col+n;for(t&&"Tab"===t.key&&(l>=this.leafCols.length&&(l=0,o++),l<0&&(l=this.leafCols.length-1,o--)),o=Math.max(0,Math.min(this.totalRows-1,o)),l=Math.max(0,Math.min(this.leafCols.length-1,l));this.isColHidden(l)&&l>0&&l<this.leafCols.length-1;)l+=n>=0?1:-1;for(;this.isRowHidden(o)&&o>0&&o<this.totalRows-1;)o+=e>=0?1:-1;const s=function(e,n,t){const o=b(e,n,t);if(!o)return{row:e,col:n};const l=i(o);return{row:l.startRow,col:l.startCol}}(o,l,this.internalMerges);o=s.row,l=s.col,this.activeCell={row:o,col:l},this.selectionRanges=[r(o,l)],this.emitSelectionChange(),this.scrollToCell(o,l)},scrollToCell(e,n){const t=this.$refs.scrollBody;if(!t)return;const o=g(e,this._rowH,this.rowHeights),i=o+this.getRowH(e),l=this.getColLeft(n)-this.getFrozenWidth(),r=l+this.getColW(n);o<t.scrollTop&&(t.scrollTop=o),i>t.scrollTop+t.clientHeight&&(t.scrollTop=i-t.clientHeight),l<t.scrollLeft&&(t.scrollLeft=l),r>t.scrollLeft+t.clientWidth&&(t.scrollLeft=r-t.clientWidth)},startEditing(e,n,t=null,o=!1){const i=this.leafCols[n];if(i&&this.isCellEditable(e,n)&&!(e<0||e>=this.totalRows)){if(!this._hasCustomEdit(i)){if(this.isSelectLikeCol(i))return void this.openSelectDropdownForActive();if("checkbox"===i.type)return}this.invalidCell=null,this.editingCell={row:e,col:n},this.editValue=null!==t?t:o?String(this.getCellValue(e,n)||""):"",this.editOriginalValue=String(this.getCellValue(e,n)||""),this.$nextTick(()=>{const e=this.$refs.editInput;if(e){const n=Array.isArray(e)?e[0]:e;n&&(n.focus(),o&&n.setSelectionRange(n.value.length,n.value.length))}})}},commitEdit(){if(!this.editingCell)return;const{row:e,col:n}=this.editingCell,t=this.leafCols[n];if(!t)return void(this.editingCell=null);if(!this.isCellValueValid(e,n,this.editValue))return this._showInvalidCell(e,n,this.editValue),this.editingCell=null,void(this.$refs.wrapper&&this.$refs.wrapper.focus());this.invalidCell=null;const o=this.data,i=o.slice();i[e]={...o[e],[t.key]:this.editValue},this._emitDataChange(o,i),this.editingCell=null,this.$refs.wrapper&&this.$refs.wrapper.focus()},cancelEdit(){this.editingCell=null,this.$refs.wrapper&&this.$refs.wrapper.focus()},hasCellSlot(e){return!!(e&&e.key&&this.$scopedSlots&&this.$scopedSlots["cell-"+e.key])},hasLegacyEditSlot(e){return!!(e&&e.key&&this.$scopedSlots&&this.$scopedSlots["edit-"+e.key])},hasPrefixSlot(e){return!!(e&&e.key&&this.$scopedSlots&&this.$scopedSlots["prefix-"+e.key])},hasSuffixSlot(e){return!!(e&&e.key&&this.$scopedSlots&&this.$scopedSlots["suffix-"+e.key])},_hasCustomEdit(e){return"select"===e.type||"treeSelect"===e.type?this.hasLegacyEditSlot(e):this.hasCellSlot(e)||this.hasLegacyEditSlot(e)},commitEditSlot(e){if(!this.editingCell)return;const{row:n,col:t}=this.editingCell,o=this.leafCols[t];if(!o)return void(this.editingCell=null);if(!this.isCellValueValid(n,t,e))return this._showInvalidCell(n,t,e),this.editingCell=null,void(this.$refs.wrapper&&this.$refs.wrapper.focus());this.invalidCell=null;const i=this.data,l=i.slice();l[n]={...i[n],[o.key]:e},this._emitDataChange(i,l),this.editingCell=null,this.$refs.wrapper&&this.$refs.wrapper.focus()},isCheckboxChecked(e,n){const t=this.getCellValue(e,n);return!0===t||1===t||"string"==typeof t&&["true","1"].includes(t.trim().toLowerCase())},setCheckboxValue(e,n,t){const o=this.leafCols[n];if(!o||!this.isCellEditable(e,n))return;if(!this.isCellValueValid(e,n,t))return void this._showInvalidCell(e,n,t);this.invalidCell=null;const i=this.data,l=i.slice();l[e]={...i[e],[o.key]:t},this._emitDataChange(i,l)},toggleCheckbox(e,n){this.setCheckboxValue(e,n,!this.isCheckboxChecked(e,n))},isCellEditable(e,n){const t=this.leafCols[n];if(!t)return!1;const o=this._dataRaw[e]||{};return"function"==typeof this.cellEditable?!!this.cellEditable(o,e,t,n):"function"==typeof t.editable?!!t.editable(o,e):!1!==t.editable},isCellValueValid(e,n,t){if("function"!=typeof this.cellValidator)return!0;const o=this.leafCols[n];if(!o)return!0;const i=this._dataRaw[e]||{};return!!this.cellValidator(t,i,e,o,n)},_resolveValidationMessage(e,n,t){const o=this.leafCols[n],i=this._dataRaw[e]||{};return"function"==typeof this.cellValidationMessage?this.cellValidationMessage(t,i,e,o,n):"string"==typeof this.cellValidationMessage&&this.cellValidationMessage?this.cellValidationMessage:this.t.invalidValue},_invalidCellRect(){const e=this.$refs.editInput,n=Array.isArray(e)?e[0]:e;if(n)return n.getBoundingClientRect();const t=this.$el?this.$el.querySelector(".eg-cell-active"):null;return t?t.getBoundingClientRect():null},_showInvalidCell(e,n,t){const o=this._resolveValidationMessage(e,n,t);this.invalidCell={row:e,col:n,message:o,rect:this._invalidCellRect()},this.$emit("cell-validation-error",{row:e,col:n,value:t,message:o})},_emitBulkValidationError(e,n){const t=e.map(e=>({row:e.row,col:e.col,value:e.value,message:this._resolveValidationMessage(e.row,e.col,e.value)}));this.$emit("bulk-validation-error",{blocked:n,cells:t})},isSelectLikeCol:e=>!(!e||"select"!==e.type&&"treeSelect"!==e.type),treeOptionKeys:e=>({valueKey:e.optionValueKey||"value",labelKey:e.optionLabelKey||"label",childrenKey:e.optionChildrenKey||"children"}),_treeFindLabel(e,n,t){for(const o of e||[]){if(String(o[n.valueKey])===t)return null!=o[n.labelKey]?o[n.labelKey]:String(o[n.valueKey]);const e=this._treeFindLabel(o[n.childrenKey],n,t);if(null!=e)return e}return null},colOptions(e){const n=this.leafCols[e];return n&&Array.isArray(n.options)?n.options.map(e=>"string"==typeof e?{value:e,label:e}:{value:e.value,label:null!=e.label?e.label:String(e.value),color:e.color}):[]},getSelectLabel(e,n){const t=this.leafCols[e],o=null==n?"":String(n);if(t&&"treeSelect"===t.type){if(!Array.isArray(t.options))return o;const e=this._treeFindLabel(t.options,this.treeOptionKeys(t),o);return null!=e?e:o}const i=this.colOptions(e);if(!i.length)return o;const l=i.find(e=>String(e.value)===o);return l?l.label:o},_buildSelectDropdownState(e,n,t,o,i){const l={top:i.top,bottom:i.bottom,left:i.left,width:i.width};return{row:e,col:n,tree:"treeSelect"===t.type,keys:"treeSelect"===t.type?this.treeOptionKeys(t):null,rawOptions:t.options||[],currentValue:o,rect:l,enableSearch:!!t.enableSearch}},openSelectDropdown(e,n,t){const o=this.leafCols[n];if(!o||!Array.isArray(o.options))return;const i=t.currentTarget.getBoundingClientRect(),l=String(null!=this.getCellValue(e,n)?this.getCellValue(e,n):"");this.selectDropdown=this._buildSelectDropdownState(e,n,o,l,i)},openSelectDropdownForActive(){const{row:e,col:n}=this.activeCell,t=this.leafCols[n];t&&Array.isArray(t.options)&&this.$nextTick(()=>{const o=this.$el?this.$el.querySelector(".eg-cell-active"):null;if(!o)return;const i=o.getBoundingClientRect(),l=String(null!=this.getCellValue(e,n)?this.getCellValue(e,n):"");this.selectDropdown=this._buildSelectDropdownState(e,n,t,l,i)})},onComponentSelect({value:e,label:n}){if(!this.selectDropdown)return;const{row:t,col:o}=this.selectDropdown,i=this.leafCols[o];if(i){if(!this.isCellValueValid(t,o,e))return this._showInvalidCell(t,o,e),this.closeSelectDropdown(),void(this.$refs.wrapper&&this.$refs.wrapper.focus());this.invalidCell=null;const l=this.data,r=l.slice();r[t]={...l[t],[i.key]:e},this._emitDataChange(l,r),"function"==typeof i.onSelect&&i.onSelect({value:e,label:n},r[t],t,i)}this.closeSelectDropdown(),this.$refs.wrapper&&this.$refs.wrapper.focus()},closeSelectDropdown(){this.selectDropdown=null},_onWindowScrollForDropdown(e){if(!this.selectDropdown)return;const n=this.$refs.selectDropdownComp,t=n&&n.$el?n.$el:null;t&&t.contains(e.target)||this.closeSelectDropdown()},_onDocMouseDownForDropdown(e){if(!this.selectDropdown)return;const n=this.$refs.selectDropdownComp,t=n&&n.$el?n.$el:null;t&&t.contains(e.target)||this.closeSelectDropdown()},onEditKeyDown(e){"Escape"===e.key?(e.preventDefault(),this.cancelEdit()):"Enter"!==e.key||e.shiftKey?"Tab"===e.key&&(e.preventDefault(),this.commitEdit(),this.moveActive(0,e.shiftKey?-1:1,e)):(e.preventDefault(),this.commitEdit(),this.moveActive(1,0,e))},clearSelection(){if(!this.selectionRanges.length)return;const e=this.data,n=e.slice();let t=!1;const o=[];for(const e of this.selectionRanges){const i={startRow:Math.min(e.startRow,e.endRow),endRow:Math.max(e.startRow,e.endRow),startCol:Math.min(e.startCol,e.endCol),endCol:Math.max(e.startCol,e.endCol)};for(let e=i.startRow;e<=i.endRow&&e<n.length;e++){let l=null;for(let r=i.startCol;r<=i.endCol;r++){const i=this.leafCols[r];if(i&&this.isCellEditable(e,r)){if(!this.isCellValueValid(e,r,"")){o.push({row:e,col:r,value:""});continue}l||(l={...n[e]}),l[i.key]="",t=!0}}l&&(n[e]=l)}}this.strictBulkValidation&&o.length>0?this._emitBulkValidationError(o,!0):(t&&this._emitDataChange(e,n),o.length>0&&this._emitBulkValidationError(o,!1))},startFillDrag(e){const n=this.primaryRange;n&&(this.fillDrag.active=!0,this.fillDrag.sourceRange=i(n),this.fillDrag.currentRow=n.endRow,this.fillDrag.currentCol=n.endCol,e.preventDefault())},onGlobalMouseMove(e){this.colDrag.pending&&Math.abs(e.clientX-this.colDrag.startX)>5&&(this.colDrag.pending=!1,this.colDrag.active=!0,this.colDrag.currentX=e.clientX,this.colDrag.currentY=e.clientY,this.colDrag.dropIndex=this.colDrag.sourceFirstLeaf,this.isMouseDown=!1),this.colDrag.active?this.handleColDragMove(e):this.resizing.active?this.handleResizeMove(e):this.fillDrag.active?this.handleFillDragMove(e):this.dragMove.active&&this.handleDragMoveMove(e)},onGlobalMouseUp(e){this.colDrag.active?this.commitColDrag():(this.colDrag.pending&&this._resetColDrag(),this.resizing.active?this.commitResize():this.fillDrag.active?this.commitFillDrag():this.dragMove.active?this.commitDragMove(e):this.isMouseDown=!1)},handleFillDragMove(e){const n=this.$refs.scrollBody;if(!n)return;const t=n.getBoundingClientRect(),o=e.clientY-t.top+n.scrollTop,i=e.clientX-t.left+n.scrollLeft,l=this.cumulativeHeights,r=this.totalRows;let s=0,a=r-1;for(;s<a;){const e=s+a>>1;l[e+1]<=o?s=e+1:a=e}const c=Math.min(s,r-1);let d=this.getFrozenWidth(),h=0;for(let e=0;e<this.leafCols.length;e++)if(this.isColumnScrollable(e)){if(d+=this.getColW(e),i<d){h=e;break}h=e}this.fillDrag.currentRow=c,this.fillDrag.currentCol=h},commitFillDrag(){const e=this.fillDrag.sourceRange;if(!e)return void(this.fillDrag.active=!1);const n=this.fillDrag.currentRow,t=this.fillDrag.currentCol,o=this.data,i=o.slice();let l;const r=[];if(n>e.endRow){const t=n-e.endRow;for(let n=e.startCol;n<=e.endCol;n++){const l=this.leafCols[n];if(!l)continue;const s=[];for(let n=e.startRow;n<=e.endRow;n++)s.push(o[n]?o[n][l.key]:"");const a=w(s,t);for(let s=0;s<t;s++){const t=e.endRow+1+s;if(t<this.totalRows&&this.isCellEditable(t,n)){if(!this.isCellValueValid(t,n,a[s])){r.push({row:t,col:n,value:a[s]});continue}i[t]===o[t]&&(i[t]={...o[t]}),i[t][l.key]=a[s]}}}l={startRow:e.endRow+1,endRow:n,startCol:e.startCol,endCol:e.endCol}}else if(t>e.endCol){const n=t-e.endCol;for(let t=e.startRow;t<=e.endRow;t++){const l=[];for(let n=e.startCol;n<=e.endCol;n++){const e=this.leafCols[n];l.push(e&&o[t]?o[t][e.key]:"")}const s=w(l,n);for(let l=0;l<n;l++){const n=e.endCol+1+l;if(n<this.leafCols.length){const e=this.leafCols[n];if(e&&this.isCellEditable(t,n)){if(!this.isCellValueValid(t,n,s[l])){r.push({row:t,col:n,value:s[l]});continue}i[t]===o[t]&&(i[t]={...o[t]}),i[t][e.key]=s[l]}}}}l={startRow:e.startRow,endRow:e.endRow,startCol:e.endCol+1,endCol:t}}l&&(this.strictBulkValidation&&r.length>0?this._emitBulkValidationError(r,!0):(this._emitDataChange(o,i),this.$emit("fill",{sourceRange:e,targetRange:l,values:i}),r.length>0&&this._emitBulkValidationError(r,!1))),this.fillDrag.active=!1,this.fillDrag.sourceRange=null},doubleFillDown(){const e=this.primaryRange;if(!e)return;const n=i(e),t=n.startCol>0?n.startCol-1:n.endCol+1;if(t<0||t>=this.leafCols.length)return;const o=this.leafCols[t];if(!o)return;let l=n.endRow;for(let e=n.endRow+1;e<this.totalRows&&(this.data[e]&&""!==this.data[e][o.key]&&void 0!==this.data[e][o.key]);e++)l=e;if(l<=n.endRow)return;const r=l-n.endRow,s=this.data,a=s.slice(),c=[];for(let e=n.startCol;e<=n.endCol;e++){const t=this.leafCols[e];if(!t)continue;const o=[];for(let e=n.startRow;e<=n.endRow;e++)o.push(s[e]?s[e][t.key]:"");const i=w(o,r);for(let o=0;o<r;o++){const l=n.endRow+1+o;if(l<this.totalRows&&this.isCellEditable(l,e)){if(!this.isCellValueValid(l,e,i[o])){c.push({row:l,col:e,value:i[o]});continue}a[l]===s[l]&&(a[l]={...s[l]}),a[l][t.key]=i[o]}}}this.strictBulkValidation&&c.length>0?this._emitBulkValidationError(c,!0):(this._emitDataChange(s,a),c.length>0&&this._emitBulkValidationError(c,!1))},copySelection(){const e=this.primaryRange;if(!e)return;const n=i(e);this.clipboardMatrix=m(this.data,this.leafCols,n),this.clipboardRange=n,this.clipboardMode="copy";const t=this.clipboardMatrix.map(e=>e.map(e=>(null==e?"":String(e)).replace(/\t/g," ").replace(/\r?\n/g," ")).join("\t")).join("\n");navigator.clipboard&&navigator.clipboard.writeText(t).catch(()=>{})},cutSelection(){this.copySelection(),this.clipboardMode="cut"},async pasteAt(e,n,t={}){const{mode:o="all",transpose:l=!1}=t;let r=null;if(navigator.clipboard)try{const e=await navigator.clipboard.readText();e&&(r=(s=e)?s.split("\n").map(e=>e.split("\t")):[[""]])}catch(e){}var s;if(!r&&this.clipboardMatrix&&(r=this.clipboardMatrix),!r)return;l&&(r=function(e){if(!e||0===e.length)return[];const n=e.length,t=e[0].length;return Array.from({length:t},(t,o)=>Array.from({length:n},(n,t)=>e[t][o]))}(r));if(!this.clipboardMode||"copy"===this.clipboardMode){const t=this.primaryRange;if(t){const o=i(t),l=o.endRow-o.startRow+1,s=o.endCol-o.startCol+1,a=r.length,c=r[0]?r[0].length:0;(l>a||s>c)&&l%a===0&&s%c===0&&(r=function(e,n,t){const o=e.length,i=e[0]?e[0].length:0;if(!o||!i)return e;if(n%o!==0||t%i!==0)return e;const l=[];for(let r=0;r<n;r++){const n=[];for(let l=0;l<t;l++)n.push(e[r%o][l%i]);l.push(n)}return l}(r,l,s),e=o.startRow,n=o.startCol)}}const a=this.data,{newData:c,affectedRange:d,skipped:h}=x(a,this.leafCols,e,n,r,o,(e,n)=>this.isCellEditable(e,n),(e,n,t)=>this.isCellValueValid(e,n,t));if(this.strictBulkValidation&&h.length>0)this._emitBulkValidationError(h,!0);else{if("cut"===this.clipboardMode&&this.clipboardRange){const e=this.clipboardRange;for(let n=e.startRow;n<=e.endRow;n++){c[n]===a[n]&&(c[n]={...a[n]});for(let t=e.startCol;t<=e.endCol;t++){const e=this.leafCols[t];e&&this.isCellEditable(n,t)&&this.isCellValueValid(n,t,"")&&(c[n][e.key]="")}}this.clipboardRange=null,this.clipboardMode=null}this._emitDataChange(a,c),h.length>0&&this._emitBulkValidationError(h,!1)}},ctxCopy(){this.hideContextMenu(),this.copySelection()},ctxCut(){this.hideContextMenu(),this.cutSelection()},ctxPaste(){this.hideContextMenu(),this.pasteAt(this.activeCell.row,this.activeCell.col)},ctxPasteSpecial(e,n=!1){this.hideContextMenu(),this.pasteAt(this.activeCell.row,this.activeCell.col,{mode:e,transpose:n})},_computeDragOffsets(e){const{sourceFirstLeaf:n,sourceLeafCount:t}=this.colDrag;if(e<0||e>=n&&e<=n+t)return{};const o=s(h(this.columns,n,t,e)),i={};this.leafCols.forEach(e=>{i[e.key]=e});const l={};for(const e of["left","scroll","right"]){const n="left"===e?e=>this.isColumnPinnedLeft(e):"right"===e?e=>this.isColumnPinnedRight(e):e=>this.isColumnScrollable(e),t={};let r=0;this.leafCols.forEach(e=>{const o=e._flatIndex;!this.isColHidden(o)&&n(o)&&(t[e.key]=r,r+=this.getColW(o))});const s={};r=0;for(const e of o){const t=i[e.key];if(!t)continue;const o=t._flatIndex;!this.isColHidden(o)&&n(o)&&(s[e.key]=r,r+=this.getColW(o))}for(const e of Object.keys(t))l[e]=(void 0!==s[e]?s[e]:t[e])-t[e]}return l},_applyDragTransforms(e){this.$el&&(this.$el.querySelectorAll("[data-fi]").forEach(n=>{const t=parseInt(n.dataset.fi),o=this.leafCols[t],i=o&&e[o.key]||0;n.style.transform=i?`translateX(${i}px)`:""}),this.$el.querySelectorAll("[data-start]").forEach(n=>{const t=parseInt(n.dataset.start),o=parseInt(n.dataset.end);if(isNaN(t))return;let i=null;for(let e=t;e<=o;e++)if(!this.isColHidden(e)&&this.leafCols[e]){i=this.leafCols[e].key;break}const l=i&&e[i]||0;n.style.transform=l?`translateX(${l}px)`:""}))},_clearDragTransforms(){this.$el&&this.$el.querySelectorAll("[data-fi], [data-start]").forEach(e=>{e.style.transform=""})},handleColDragMove(e){this.colDrag.currentX=e.clientX,this.colDrag.currentY=e.clientY;const n=this.colDrag.dropIndex;this._updateColDragDropIndex(e.clientX);const t=this.colDrag.dropIndex;t!==n&&(this._dragOffsets=this._computeDragOffsets(t),this._applyDragTransforms(this._dragOffsets))},_updateColDragDropIndex(e){if(!this.$el)return;const n=this.leafCols.length;if(0===n)return void(this.colDrag.dropIndex=0);const t=Array.from(this.$el.querySelectorAll(".eg-header-cell:not(.eg-header-group)")).map(e=>{const n=parseInt(e.dataset.fi);if(isNaN(n))return null;const t=e.getBoundingClientRect(),o=(e.style.transform||"").match(/translateX\((-?[\d.]+)px\)/),i=o?parseFloat(o[1]):0;return{fi:n,left:t.left-i,right:t.right-i}}).filter(Boolean).sort((e,n)=>e.left-n.left);if(!t.length)return void(this.colDrag.dropIndex=n);let o=n;for(const{fi:n,left:i,right:l}of t)if(e<l){o=e<i+(l-i)/2?n:n+1;break}this.colDrag.dropIndex=o},commitColDrag(){const e=this.colDrag.sourceFirstLeaf,n=this.colDrag.sourceLeafCount,t=this.colDrag.dropIndex;if(this._clearDragTransforms(),this._dragOffsets={},this._resetColDrag(),e<0||t<0||n<1)return;if(t>=e&&t<=e+n)return;const o=h(this.columns,e,n,t);this.$emit("update:columns",o),this.$emit("column-reorder",{fromIndex:e,toIndex:t,columns:o})},_resetColDrag(){this._clearDragTransforms(),this._dragOffsets={},this.colDrag.pending=!1,this.colDrag.active=!1,this.colDrag.sourceFirstLeaf=-1,this.colDrag.sourceLeafCount=1,this.colDrag.dropIndex=-1,this.colDrag.ghostLabel=""},startColResize(e,n){this.$refs.wrapper.getBoundingClientRect(),this.resizing={active:!0,type:"col",index:n,startX:e.clientX,startY:e.clientY,startSize:this.getColW(n),currentPos:e.clientX},e.preventDefault()},startRowResize(e,n){this.resizing={active:!0,type:"row",index:n,startX:e.clientX,startY:e.clientY,startSize:this.getRowH(n),currentPos:e.clientY},e.preventDefault()},handleResizeMove(e){if("col"===this.resizing.type){this.resizing.currentPos=e.clientX;const n=Math.max(20,this.resizing.startSize+(e.clientX-this.resizing.startX));this.$set(this.colWidths,this.resizing.index,n),this._cellStyleCache=Object.create(null)}else this.resizing.currentPos=e.clientY,this._resizePreviewHeight=Math.max(10,this.resizing.startSize+(e.clientY-this.resizing.startY)),this._resizeRAF||(this._resizeRAF=requestAnimationFrame(()=>{this._resizeRAF=null,this._rowStyleCache=Object.create(null),this._rowHeaderStyleCache=Object.create(null),this._cellStyleCache=Object.create(null),this.$set(this.rowHeights,this.resizing.index,this._resizePreviewHeight),this.updateVirtualScroll()}))},commitResize(){if(this._resizeRAF&&(cancelAnimationFrame(this._resizeRAF),this._resizeRAF=null,"row"===this.resizing.type&&void 0!==this._resizePreviewHeight&&this.$set(this.rowHeights,this.resizing.index,this._resizePreviewHeight)),"col"===this.resizing.type){this._cellStyleCache=Object.create(null);const e=this.colWidths[this.resizing.index];this.$emit("column-resize",{index:this.resizing.index,newSize:e})}else{this._rowStyleCache=Object.create(null),this._rowHeaderStyleCache=Object.create(null),this._cellStyleCache=Object.create(null);const e=this.rowHeights[this.resizing.index];this.$emit("row-resize",{index:this.resizing.index,newSize:e}),this.updateVirtualScroll()}this.resizing.active=!1},autoFitColumn(e){const n=this.leafCols[e];if(!n)return;let t=(n.title||"").length;for(let e=0;e<Math.min(this.totalRows,500);e++){const o=this.data[e]?String(this.data[e][n.key]||""):"";o.length>t&&(t=o.length)}const o=Math.max(50,8*t+16);this.$set(this.colWidths,e,o),this._cellStyleCache=Object.create(null),this.$emit("column-resize",{index:e,newSize:o})},_applyAutoWidth(){this.autoWidth&&this.leafCols.length&&(this.leafCols.forEach((e,n)=>{let t=(e.title||"").length;for(let n=0;n<Math.min(this.totalRows,500);n++){const o=this.data[n]?String(this.data[n][e.key]||""):"";o.length>t&&(t=o.length)}this.$set(this.colWidths,n,Math.max(50,8*t+16))}),this._cellStyleCache=Object.create(null))},ctxHideRow(){this.hideContextMenu();const e=this.primaryRange;if(!e)return;const n=i(e),t=[...this.hiddenRows];for(let e=n.startRow;e<=n.endRow;e++)t.includes(e)||t.push(e);this.$emit("update:hiddenRows",t)},ctxHideColumn(){this.hideContextMenu();const e=this.primaryRange;if(!e)return;const n=i(e),t=[...this.hiddenColumns];for(let e=n.startCol;e<=n.endCol;e++)t.includes(e)||t.push(e);this.$emit("update:hiddenColumns",t)},ctxUnhideRows(){this.hideContextMenu(),this.$emit("update:hiddenRows",[])},ctxUnhideColumns(){this.hideContextMenu(),this.$emit("update:hiddenColumns",[])},ctxPinLeft(){const e=this.leafCols[this.contextMenu.col];e?(this.$emit("update:pinnedColumns",{...this.pinnedColumns,[e.key]:"left"}),this.hideContextMenu()):this.hideContextMenu()},ctxPinRight(){const e=this.leafCols[this.contextMenu.col];e?(this.$emit("update:pinnedColumns",{...this.pinnedColumns,[e.key]:"right"}),this.hideContextMenu()):this.hideContextMenu()},ctxUnpin(){const e=this.leafCols[this.contextMenu.col];if(!e)return void this.hideContextMenu();const n={...this.pinnedColumns};delete n[e.key],this.$emit("update:pinnedColumns",n),this.hideContextMenu()},isColPinned(e){const n=this.leafCols[e];return!(!n||!this.pinnedColumns[n.key])},mergeCells(e){const n=this.internalMerges.slice(),{merges:t,conflict:o}=function(e,n){const t=i(e);return t.startRow===t.endRow&&t.startCol===t.endCol?{merges:n,conflict:!1}:y(t,n)?{merges:n,conflict:!0}:{merges:[...n,t],conflict:!1}}(e,this.internalMerges);return o?(this.$emit("merge-error",{range:e,reason:"Overlaps existing merge"}),!1):(this.internalMerges=t,this._emitMergeChange(n,[...t]),!0)},unmergeCells(e,n){const t=this.internalMerges.slice(),o=function(e,n,t){return t.filter(t=>{const o=i(t);return!(e>=o.startRow&&e<=o.endRow&&n>=o.startCol&&n<=o.endCol)})}(e,n,this.internalMerges);this.internalMerges=o,this._emitMergeChange(t,[...o])},ctxMerge(){this.hideContextMenu();const e=this.primaryRange;e&&this.mergeCells(i(e))},ctxUnmerge(){this.hideContextMenu(),this.unmergeCells(this.activeCell.row,this.activeCell.col)},groupRows(e,n){this.internalGroups=k("row",e,n,this.internalGroups)},groupColumns(e,n){this.internalGroups=k("column",e,n,this.internalGroups)},ungroupRows(e,n){this.internalGroups=R("row",e,n,this.internalGroups)},ungroupColumns(e,n){this.internalGroups=R("column",e,n,this.internalGroups)},toggleGroup(e){this.internalCollapsedGroups=function(e,n){return n.find(n=>n.type===e.type&&n.startIndex===e.startIndex&&n.endIndex===e.endIndex)?n.filter(n=>!(n.type===e.type&&n.startIndex===e.startIndex&&n.endIndex===e.endIndex)):[...n,{type:e.type,startIndex:e.startIndex,endIndex:e.endIndex}]}(e,this.internalCollapsedGroups),this.$emit("update:collapsedGroups",[...this.internalCollapsedGroups]),this.$emit("group-toggle",{group:e,collapsed:S(e,this.internalCollapsedGroups)}),this.updateVirtualScroll()},isGroupCollapsed(e){return S(e,this.internalCollapsedGroups)},expandAll(){this.internalCollapsedGroups=[],this.$emit("update:collapsedGroups",[]),this.updateVirtualScroll()},collapseAll(){this.internalCollapsedGroups=[...this.internalGroups],this.$emit("update:collapsedGroups",[...this.internalGroups]),this.updateVirtualScroll()},startDragMove(e,n,t){const o=this.primaryRange;o&&(this.dragMove={active:!0,sourceRange:i(o),startX:e.clientX,startY:e.clientY,targetRow:n,targetCol:t,copyMode:e.ctrlKey||e.metaKey},this.$emit("cell-drag-start",{sourceRange:this.dragMove.sourceRange}),e.preventDefault())},handleDragMoveMove(e){this.dragMove.copyMode=e.ctrlKey||e.metaKey,this.$emit("cell-drag-move",{sourceRange:this.dragMove.sourceRange,targetRow:this.dragMove.targetRow,targetCol:this.dragMove.targetCol})},async commitDragMove(e){if(!this.dragMove.active)return;const{sourceRange:n,targetRow:t,targetCol:o,copyMode:i}=this.dragMove,l={startRow:t,startCol:o,endRow:t+(n.endRow-n.startRow),endCol:o+(n.endCol-n.startCol)};let r=!0;if(this.beforeDrop&&(r=await Promise.resolve(this.beforeDrop(n,l))),r){const e=this.data,r=m(e,this.leafCols,n),{newData:s}=x(e,this.leafCols,t,o,r,"all",(e,n)=>this.isCellEditable(e,n));if(!i)for(let t=n.startRow;t<=n.endRow;t++){s[t]===e[t]&&(s[t]={...e[t]});for(let e=n.startCol;e<=n.endCol;e++){const n=this.leafCols[e];n&&this.isCellEditable(t,e)&&(s[t][n.key]="")}}this._emitDataChange(e,s),this.$emit("cell-drop",{sourceRange:n,targetRange:l})}this.dragMove={active:!1,sourceRange:null,startX:0,startY:0,targetRow:-1,targetCol:-1,copyMode:!1},this.isMouseDown=!1},async exportToExcel(e={}){const{filename:n="export.xlsx",sheetName:t="Sheet1",scope:l="all",includeHidden:r=!1}=e;this.$emit("export-start"),this.exportState={active:!0};const d={data:this.data,columns:this.columns,leafCols:this.leafCols,merges:this.internalMerges,hiddenCols:[...this.effectiveHiddenColSet],hiddenRows:[...this.hiddenRowSet],range:"selection"===l?this.primaryRange:null,filename:n,sheetName:t,scope:l,includeHidden:r};try{null||function(e){const{data:n,columns:t,leafCols:l,merges:r=[],hiddenColSet:d=new Set,hiddenRowSet:h=new Set,range:g=null,filename:u="export.xlsx",sheetName:p="Sheet1",scope:f="all",includeHidden:A=!1}=e,C=l.filter((e,n)=>{if(!A&&d.has(n))return!1;if("selection"===f&&g){const e=i(g);if(n<e.startCol||n>e.endCol)return!1}return!0});let v=0,w=n.length-1;if("selection"===f&&g){const e=i(g);v=e.startRow,w=e.endRow}const m=[];for(let e=v;e<=w;e++)!A&&h.has(e)||m.push({rowIndex:e,data:n[e]});const x=a(t),y=c(t,x),b=o.utils.book_new(),k=[];for(let e=0;e<y.length;e++){const n=[];for(const t of y[e])if(t.isGroup){const e=s(t.column.children||[]).filter(e=>C.some(n=>n.key===e.key));if(0===e.length)continue;n.push(t.column.title||"");for(let t=1;t<e.length;t++)n.push(null)}else{if(!C.some(e=>e.key===t.column.key))continue;t.rowspan,n.push(t.column.title||"")}k.push(n)}for(const{data:e}of m){const n=C.map(n=>{const t=e?e[n.key]:"";return void 0!==t?t:""});k.push(n)}const R=o.utils.aoa_to_sheet(k);R["!cols"]=C.map(e=>({wch:Math.round((e.width||100)/7)}));const S=[];for(const e of r){const n=i(e),t="selection"===f&&g?i(g):{startRow:0,startCol:0};if("selection"===f){if(n.startRow<t.startRow||n.endRow>t.endRow)continue;if(n.startCol<t.startCol||n.endCol>t.endCol)continue}const o=C.findIndex(e=>l.indexOf(e)===n.startCol),r=C.findIndex(e=>l.indexOf(e)===n.endCol);if(o<0||r<0)continue;const s=m.filter(e=>e.rowIndex<n.startRow).length,a=m.filter(e=>e.rowIndex<=n.endRow).length;S.push({s:{r:x+s,c:o},e:{r:x+a-1,c:r}})}S.length&&(R["!merges"]=S),o.utils.book_append_sheet(b,R,p),o.writeFile(b,u)}({...d,hiddenColSet:this.effectiveHiddenColSet,hiddenRowSet:this.hiddenRowSet}),this.$emit("export-success")}catch(e){this.$emit("export-error",e)}finally{this.exportState={active:!1}}},_exportViaWorker:(e,n)=>new Promise((t,o)=>{let i=!1;const l=(n,t)=>{i||(i=!0,e.terminate(),n(t))};e.onmessage=e=>{const{type:n,buffer:i,filename:r,message:s}=e.data;if("result"===n){const e=new Blob([new Uint8Array(i)],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}),n=URL.createObjectURL(e),o=document.createElement("a");o.href=n,o.download=r,document.body.appendChild(o),o.click(),document.body.removeChild(o),URL.revokeObjectURL(n),l(t)}else"error"===n&&l(o,new Error(s))},e.onerror=e=>l(o,new Error(e.message||"Export worker xatosi")),e.postMessage(n)}),async importFromFile(e,n={}){this.importState={active:!0,percent:5,message:"Fayl o'qilmoqda..."};try{let t;null||(t=await z(e,this.columns,n,(e,n)=>{this.importState={active:!0,percent:e,message:n}}));const{columns:o,merges:i}=t,l=t.data.map(e=>Object.freeze(e));this.$emit("input",l),this.$emit("update:columns",o);const r=i&&i.length>0;this.internalMerges=r?i:[],this.$emit("update:merges",r?i:[]),this.$emit("update:collapsedGroups",[]),this.$emit("update:hiddenRows",[]),this.$emit("import-success",{data:l,columns:o,merges:i}),this.rowHeights={},this.scrollTop=0,this.scrollLeft=0,this.$nextTick(()=>{this.$refs.scrollBody&&(this.$refs.scrollBody.scrollTop=0,this.$refs.scrollBody.scrollLeft=0),this.$refs.scrollColHeader&&(this.$refs.scrollColHeader.scrollLeft=0),this.$refs.scrollFooter&&(this.$refs.scrollFooter.scrollLeft=0),this.$refs.scrollRowHeaders&&(this.$refs.scrollRowHeaders.scrollTop=0),this.updateVirtualScroll()})}catch(e){this.$emit("import-error",e)}finally{this.importState={active:!1,percent:0,message:""}}},_importViaWorker(e,n,t){return new Promise(async(o,i)=>{let l=!1;const r=(n,t)=>{l||(l=!0,e.terminate(),n(t))};e.onmessage=e=>{const{type:n,percent:t,message:l,data:s,columns:a,merges:c}=e.data;"progress"===n?this.importState={active:!0,percent:t,message:l}:"result"===n?r(o,{data:s,columns:a,merges:c}):"error"===n&&r(i,new Error(l))},e.onerror=e=>r(i,new Error(e.message||"Import worker xatosi"));try{const o=await n.arrayBuffer();e.postMessage({buffer:o,existingColumns:this.columns,options:t},[o])}catch(e){r(i,e)}})},_pushHistory(e){this._historyIndex<this._history.length-1&&this._history.splice(this._historyIndex+1),this._history.push(e),this._history.length>100?this._history.shift():this._historyIndex++},_emitDataChange(e,n){if(!this._historySkip){const t=[],o=[],i=[],l=Math.max(e.length,n.length);for(let r=0;r<l;r++)e[r]!==n[r]&&(t.push(r),o.push(e[r]),i.push(n[r]));t.length>0&&this._pushHistory({type:"data",before:{indices:t,rows:o},after:{indices:t,rows:i}})}this.$emit("input",n)},_emitMergeChange(e,n){this._historySkip||this._pushHistory({type:"merges",before:e,after:n}),this.$emit("update:merges",n)},undo(){if(this._historyIndex<0)return;const e=this._history[this._historyIndex--];this._historySkip=!0;try{if("data"===e.type){const n=this.data.slice();for(let t=0;t<e.before.indices.length;t++)n[e.before.indices[t]]=e.before.rows[t];this.$emit("input",n)}else"merges"===e.type&&(this.internalMerges=e.before.slice(),this.$emit("update:merges",e.before.slice()))}finally{this._historySkip=!1}},redo(){if(this._historyIndex>=this._history.length-1)return;const e=this._history[++this._historyIndex];this._historySkip=!0;try{if("data"===e.type){const n=this.data.slice();for(let t=0;t<e.after.indices.length;t++)n[e.after.indices[t]]=e.after.rows[t];this.$emit("input",n)}else"merges"===e.type&&(this.internalMerges=e.after.slice(),this.$emit("update:merges",e.after.slice()))}finally{this._historySkip=!1}}}};var Q=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{ref:"wrapper",staticClass:"eg-wrapper",class:"eg-size-"+e.size,style:e.wrapperStyle,attrs:{tabindex:"0"},on:{keydown:e.onKeyDown,keypress:e.onKeyPress}},[e.contextMenu.visible?t("div",{staticClass:"eg-context-menu",style:{top:e.contextMenu.y+"px",left:e.contextMenu.x+"px"},on:{click:function(e){e.stopPropagation()}}},[t("div",{staticClass:"eg-context-item",on:{click:e.ctxCopy}},[e._v(e._s(e.t.copy))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxCut}},[e._v(e._s(e.t.cut))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxPaste}},[e._v(e._s(e.t.paste))]),e._v(" "),t("div",{staticClass:"eg-context-separator"}),e._v(" "),t("div",{staticClass:"eg-context-item eg-context-submenu-parent"},[e._v("\n "+e._s(e.t.pasteSpecial)+"\n "),t("div",{staticClass:"eg-context-submenu"},[t("div",{staticClass:"eg-context-item",on:{click:function(n){return e.ctxPasteSpecial("all")}}},[e._v(e._s(e.t.pasteAll))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:function(n){return e.ctxPasteSpecial("values")}}},[e._v(e._s(e.t.pasteValues))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:function(n){return e.ctxPasteSpecial("formats")}}},[e._v(e._s(e.t.pasteFormats))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:function(n){return e.ctxPasteSpecial("all",!0)}}},[e._v(e._s(e.t.transpose))])])]),e._v(" "),t("div",{staticClass:"eg-context-separator"}),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxMerge}},[e._v(e._s(e.t.mergeCells))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxUnmerge}},[e._v(e._s(e.t.unmergeCells))]),e._v(" "),t("div",{staticClass:"eg-context-separator"}),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxHideRow}},[e._v(e._s(e.t.hideRows))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxHideColumn}},[e._v(e._s(e.t.hideColumns))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxUnhideRows}},[e._v(e._s(e.t.unhideRows))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxUnhideColumns}},[e._v(e._s(e.t.unhideColumns))]),e._v(" "),e.contextMenu.row<0&&e.contextMenu.col>=0?[t("div",{staticClass:"eg-context-separator"}),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxPinLeft}},[e._v(e._s(e.t.pinLeft))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxPinRight}},[e._v(e._s(e.t.pinRight))]),e._v(" "),e.isColPinned(e.contextMenu.col)?t("div",{staticClass:"eg-context-item",on:{click:e.ctxUnpin}},[e._v(e._s(e.t.unpin))]):e._e()]:e._e()],2):e._e(),e._v(" "),t("div",{ref:"container",staticClass:"eg-container",on:{scroll:e.onScroll,click:e.hideContextMenu}},[t("div",{staticClass:"eg-header-area",style:e.headerAreaStyle},[t("div",{staticClass:"eg-corner",style:e.cornerStyle,on:{click:e.selectAll}}),e._v(" "),e.rowGroups.length?t("div",{staticClass:"eg-row-outline-gutter",style:e.rowOutlineGutterStyle}):e._e(),e._v(" "),e.getFrozenWidth()>0?t("div",{staticClass:"eg-frozen-col-header",style:e.frozenColHeaderStyle},[t("div",{style:{position:"relative",height:e.headerRowHeight*e.headerDepth+"px"}},[e._l(e.headerRows,function(n,o){return[e._l(n,function(n){return[e.isCellVisible(n,o,!0)?[t("div",{key:"fh-"+o+"-"+(n.column.key||n.column.title),staticClass:"eg-header-cell",class:{"eg-header-group":n.isGroup,"eg-header-cell--drag-source":e.colDrag.active&&n._firstLeafFlatIndex>=e.colDrag.sourceFirstLeaf&&n._firstLeafFlatIndex<e.colDrag.sourceFirstLeaf+e.colDrag.sourceLeafCount},style:[e.getHeaderCellStyle(n,o,!0),e.getHeaderDragTransform(n)],attrs:{"data-fi":n.isGroup?void 0:n.column._flatIndex,"data-start":n.isGroup?n._firstLeafFlatIndex:void 0,"data-end":n.isGroup?n._firstLeafFlatIndex+n.colspan-1:void 0},on:{mousedown:function(t){return e.onColHeaderMouseDown(t,n)},dblclick:function(t){return e.onColHeaderDblClick(t,n)},contextmenu:function(t){return t.preventDefault(),e.onColHeaderContextMenu(t,n)}}},[n.isGroup?t("span",[e._v(e._s(n.column.title))]):e._t("header-"+n.column.key,function(){return[e._v("\n "+e._s(n.column.title)+"\n ")]},{column:n.column}),e._v(" "),n.isGroup?e._e():t("div",{staticClass:"eg-col-resize-handle",on:{mousedown:function(t){return t.stopPropagation(),e.startColResize(t,n.column._flatIndex)}}})],2)]:e._e()]})]})],2)]):e._e(),e._v(" "),t("div",{ref:"scrollColHeader",staticClass:"eg-scroll-col-header",style:e.scrollColHeaderStyle},[t("div",{staticClass:"eg-scroll-col-header-inner",style:{width:e.scrollContentWidth+"px",height:e.headerRowHeight*e.headerDepth+"px",position:"relative"}},[e._l(e.headerRows,function(n,o){return[e._l(n,function(n){return[e.isCellVisible(n,o,!1)?[t("div",{key:"sh-"+o+"-"+(n.column.key||n.column.title),staticClass:"eg-header-cell",class:{"eg-header-group":n.isGroup,"eg-header-cell--drag-source":e.colDrag.active&&n._firstLeafFlatIndex>=e.colDrag.sourceFirstLeaf&&n._firstLeafFlatIndex<e.colDrag.sourceFirstLeaf+e.colDrag.sourceLeafCount},style:[e.getHeaderCellStyle(n,o,!1),e.getHeaderDragTransform(n)],attrs:{"data-fi":n.isGroup?void 0:n.column._flatIndex,"data-start":n.isGroup?n._firstLeafFlatIndex:void 0,"data-end":n.isGroup?n._firstLeafFlatIndex+n.colspan-1:void 0},on:{mousedown:function(t){return e.onColHeaderMouseDown(t,n)},dblclick:function(t){return e.onColHeaderDblClick(t,n)},contextmenu:function(t){return t.preventDefault(),e.onColHeaderContextMenu(t,n)}}},[n.isGroup?t("span",[e._v(e._s(n.column.title))]):e._t("header-"+n.column.key,function(){return[e._v("\n "+e._s(n.column.title)+"\n ")]},{column:n.column}),e._v(" "),n.isGroup?e._e():t("div",{staticClass:"eg-col-resize-handle",on:{mousedown:function(t){return t.stopPropagation(),e.startColResize(t,n.column._flatIndex)}}})],2)]:e._e()]})]})],2)]),e._v(" "),e.hasPinnedRight?t("div",{staticClass:"eg-pinned-right-header",style:e.pinnedRightHeaderStyle},[t("div",{style:{position:"relative",height:e.headerRowHeight*e.headerDepth+"px"}},[e._l(e.headerRows,function(n,o){return[e._l(n,function(n){return[e.isCellInZone(n,o,"right")?[t("div",{key:"prh-"+o+"-"+(n.column.key||n.column.title),staticClass:"eg-header-cell",class:{"eg-header-group":n.isGroup,"eg-header-cell--drag-source":e.colDrag.active&&n._firstLeafFlatIndex>=e.colDrag.sourceFirstLeaf&&n._firstLeafFlatIndex<e.colDrag.sourceFirstLeaf+e.colDrag.sourceLeafCount},style:[e.getHeaderCellStyleForZone(n,o,"right"),e.getHeaderDragTransform(n)],attrs:{"data-fi":n.isGroup?void 0:n.column._flatIndex,"data-start":n.isGroup?n._firstLeafFlatIndex:void 0,"data-end":n.isGroup?n._firstLeafFlatIndex+n.colspan-1:void 0},on:{mousedown:function(t){return e.onColHeaderMouseDown(t,n)},dblclick:function(t){return e.onColHeaderDblClick(t,n)},contextmenu:function(t){return t.preventDefault(),e.onColHeaderContextMenu(t,n)}}},[n.isGroup?t("span",[e._v(e._s(n.column.title))]):e._t("header-"+n.column.key,function(){return[e._v("\n "+e._s(n.column.title)+"\n ")]},{column:n.column}),e._v(" "),n.isGroup?e._e():t("div",{staticClass:"eg-col-resize-handle",on:{mousedown:function(t){return t.stopPropagation(),e.startColResize(t,n.column._flatIndex)}}})],2)]:e._e()]})]})],2)]):e._e()]),e._v(" "),t("div",{staticClass:"eg-body-area",style:e.bodyAreaStyle},[t("div",{staticClass:"eg-row-header-col",style:e.rowHeaderColStyle},[t("div",{ref:"scrollRowHeaders",staticClass:"eg-scroll-row-headers",style:e.scrollRowHeadersStyle},[t("div",{style:{height:e.totalVirtualHeight+"px",position:"relative"}},[t("div",{style:{transform:"translateY("+e.virtualOffsetTop+"px)",willChange:"transform",contain:"layout style"}},[e._l(e.visibleRowRange,function(n){return[e.isRowHidden(n)?e._e():t("div",{key:"srh-"+n,staticClass:"eg-row-header-cell",style:e.getRowHeaderStyle(n),on:{mousedown:function(t){return e.onRowHeaderMouseDown(t,n)},contextmenu:function(t){return t.preventDefault(),e.onRowContextMenu(t,n)}}},[e._v("\n "+e._s(n+1)+"\n "),t("div",{staticClass:"eg-row-resize-handle",on:{mousedown:function(t){return t.stopPropagation(),e.startRowResize(t,n)}}})])]})],2)])])]),e._v(" "),e.rowGroups.length?t("div",{staticClass:"eg-row-outline-col",style:e.rowOutlineColStyle},[e._l(e.rowGroups,function(n){return[t("div",{key:"rg-"+n.startIndex+"-"+n.endIndex,staticClass:"eg-group-btn",class:{collapsed:e.isGroupCollapsed(n)},style:e.getRowGroupBtnStyle(n),on:{click:function(t){return e.toggleGroup(n)}}},[e._v(e._s(e.isGroupCollapsed(n)?"+":"−"))])]})],2):e._e(),e._v(" "),t("div",{ref:"scrollBody",staticClass:"eg-scroll-body",style:e.scrollBodyStyle,on:{scroll:e.onBodyScroll}},[t("div",{staticClass:"eg-scroll-body-inner",style:{width:e.scrollContentWidth+"px",height:e.totalVirtualHeight+"px",position:"relative"}},[e.getFrozenWidth()>0?t("div",{staticClass:"eg-frozen-col-body",style:e.frozenColBodyStyle},[t("div",{style:{height:e.totalVirtualHeight+"px",position:"relative"}},[t("div",{style:{transform:"translateY("+e.virtualOffsetTop+"px)",willChange:"transform",contain:"layout style"}},[e._l(e.visibleRowRange,function(n){return[e.isRowHidden(n)?e._e():t("div",{key:"fc-row-"+n,staticClass:"eg-row",class:{"eg-row--even":n%2==0},style:e.getRowStyle(n)},[e._l(e.leafCols,function(o,i){return[e.isColumnPinnedLeft(i)&&!e.isColHidden(i)?[t("div",{key:"fc-cell-"+n+"-"+i,staticClass:"eg-cell",class:e.getCellClasses(n,i),style:[e.getCellStyle(n,i),e.getCellDragTransform(i)],attrs:{"data-fi":i},on:{mousedown:function(t){return e.onCellMouseDown(t,n,i)},mouseover:function(t){return e.onCellMouseOver(t,n,i)},mouseup:e.onCellMouseUp,dblclick:function(t){return e.onCellDblClick(n,i)},contextmenu:function(t){return t.preventDefault(),e.onCellContextMenu(t,n,i)}}},[e.isMergedAway(n,i)?t("div",{staticStyle:{display:"none"}}):e.isEditing(n,i)?[e.hasCellSlot(o)?e._t("cell-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),isEditing:!0,done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):e.hasLegacyEditSlot(o)?e._t("edit-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):t("input",{directives:[{name:"model",rawName:"v-model",value:e.editValue,expression:"editValue"}],ref:"editInput",refInFor:!0,staticClass:"eg-cell-input",domProps:{value:e.editValue},on:{blur:e.commitEdit,keydown:function(n){return n.stopPropagation(),e.onEditKeyDown.apply(null,arguments)},input:function(n){n.target.composing||(e.editValue=n.target.value)}}})]:"checkbox"===o.type?[t("eg-checkbox",{attrs:{value:e.isCheckboxChecked(n,i),disabled:!e.isCellEditable(n,i)},on:{change:function(t){return e.setCheckboxValue(n,i,t)}}})]:[e._t("cell-"+o.key,function(){return[e.hasPrefixSlot(o)?e._t("prefix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i)}):e._e(),e.hasSuffixSlot(o)&&e.isSelectLikeCol(o)?[t("span",{staticClass:"eg-cell-select-trigger-wrap"},[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.getSelectLabel(i,e.getCellValue(n,i))))]),t("span",{staticClass:"eg-cell-select-caret-inline"},[e._v("▾")])])]:e.hasPrefixSlot(o)||e.hasSuffixSlot(o)?[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(i,e.getCellValue(n,i)):e.getCellValue(n,i)))])]:[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(i,e.getCellValue(n,i)):e.getCellValue(n,i)))],e.hasSuffixSlot(o)?t("span",{staticClass:"eg-cell-suffix-wrap"},[e._t("suffix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i)})],2):e._e()]},{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),isEditing:!1,done:null,cancel:null})]],2)]:e._e()]})],2)]})],2)])]):e._e(),e._v(" "),t("div",{staticClass:"eg-main-cells",style:e.mainCellsStyle},[t("div",{style:{height:e.totalVirtualHeight+"px",position:"relative",width:e.scrollableContentWidth+"px"}},[t("div",{style:{transform:"translateY("+e.virtualOffsetTop+"px)",willChange:"transform",contain:"layout style"}},[e._l(e.visibleRowRange,function(n){return[e.isRowHidden(n)?e._e():t("div",{key:"row-"+n,staticClass:"eg-row",class:{"eg-row--even":n%2==0},style:e.getRowStyle(n),attrs:{"data-row":n}},[e._l(e.leafCols,function(o,i){return[e.isColumnScrollable(i)&&!e.isColHidden(i)?[t("div",{key:"cell-"+n+"-"+i,staticClass:"eg-cell",class:e.getCellClasses(n,i),style:[e.getCellStyle(n,i),e.getCellDragTransform(i)],attrs:{"data-fi":i},on:{mousedown:function(t){return e.onCellMouseDown(t,n,i)},mouseover:function(t){return e.onCellMouseOver(t,n,i)},mouseup:e.onCellMouseUp,dblclick:function(t){return e.onCellDblClick(n,i)},contextmenu:function(t){return t.preventDefault(),e.onCellContextMenu(t,n,i)}}},[e.isMergedAway(n,i)?t("div",{staticStyle:{display:"none"}}):e.isEditing(n,i)?[e.hasCellSlot(o)?e._t("cell-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),isEditing:!0,done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):e.hasLegacyEditSlot(o)?e._t("edit-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):t("input",{directives:[{name:"model",rawName:"v-model",value:e.editValue,expression:"editValue"}],ref:"editInput",refInFor:!0,staticClass:"eg-cell-input",domProps:{value:e.editValue},on:{blur:e.commitEdit,keydown:function(n){return n.stopPropagation(),e.onEditKeyDown.apply(null,arguments)},input:function(n){n.target.composing||(e.editValue=n.target.value)}}})]:"checkbox"===o.type?[t("eg-checkbox",{attrs:{value:e.isCheckboxChecked(n,i),disabled:!e.isCellEditable(n,i)},on:{change:function(t){return e.setCheckboxValue(n,i,t)}}})]:[e._t("cell-"+o.key,function(){return[e.hasPrefixSlot(o)?e._t("prefix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i)}):e._e(),e.hasSuffixSlot(o)&&e.isSelectLikeCol(o)?[t("span",{staticClass:"eg-cell-select-trigger-wrap"},[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.getSelectLabel(i,e.getCellValue(n,i))))]),t("span",{staticClass:"eg-cell-select-caret-inline"},[e._v("▾")])])]:e.hasPrefixSlot(o)||e.hasSuffixSlot(o)?[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(i,e.getCellValue(n,i)):e.getCellValue(n,i)))])]:[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(i,e.getCellValue(n,i)):e.getCellValue(n,i)))],e.hasSuffixSlot(o)?t("span",{staticClass:"eg-cell-suffix-wrap"},[e._t("suffix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i)})],2):e._e()]},{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),isEditing:!1,done:null,cancel:null})]],2)]:e._e()]})],2)]})],2)])]),e._v(" "),e.hasPinnedRight?t("div",{staticClass:"eg-pinned-right-body",style:e.pinnedRightBodyStyle},[t("div",{style:{height:e.totalVirtualHeight+"px",position:"relative"}},[t("div",{style:{transform:"translateY("+e.virtualOffsetTop+"px)",willChange:"transform",contain:"layout style"}},[e._l(e.visibleRowRange,function(n){return[e.isRowHidden(n)?e._e():t("div",{key:"pr-row-"+n,staticClass:"eg-row",class:{"eg-row--even":n%2==0},style:e.getRowStyle(n)},[e._l(e.pinnedRightCols,function(o){return[t("div",{key:"pr-cell-"+n+"-"+o._flatIndex,staticClass:"eg-cell",class:e.getCellClasses(n,o._flatIndex),style:[e.getCellStyle(n,o._flatIndex),e.getCellDragTransform(o._flatIndex)],attrs:{"data-fi":o._flatIndex},on:{mousedown:function(t){return e.onCellMouseDown(t,n,o._flatIndex)},mouseover:function(t){return e.onCellMouseOver(t,n,o._flatIndex)},mouseup:e.onCellMouseUp,dblclick:function(t){return e.onCellDblClick(n,o._flatIndex)},contextmenu:function(t){return t.preventDefault(),e.onCellContextMenu(t,n,o._flatIndex)}}},[e.isMergedAway(n,o._flatIndex)?t("div",{staticStyle:{display:"none"}}):e.isEditing(n,o._flatIndex)?[e.hasCellSlot(o)?e._t("cell-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,o._flatIndex),isEditing:!0,done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):e.hasLegacyEditSlot(o)?e._t("edit-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,o._flatIndex),done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):t("input",{directives:[{name:"model",rawName:"v-model",value:e.editValue,expression:"editValue"}],ref:"editInput",refInFor:!0,staticClass:"eg-cell-input",domProps:{value:e.editValue},on:{blur:e.commitEdit,keydown:function(n){return n.stopPropagation(),e.onEditKeyDown.apply(null,arguments)},input:function(n){n.target.composing||(e.editValue=n.target.value)}}})]:"checkbox"===o.type?[t("eg-checkbox",{attrs:{value:e.isCheckboxChecked(n,o._flatIndex),disabled:!e.isCellEditable(n,o._flatIndex)},on:{change:function(t){return e.setCheckboxValue(n,o._flatIndex,t)}}})]:[e._t("cell-"+o.key,function(){return[e.hasPrefixSlot(o)?e._t("prefix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,o._flatIndex)}):e._e(),e.hasSuffixSlot(o)&&e.isSelectLikeCol(o)?[t("span",{staticClass:"eg-cell-select-trigger-wrap"},[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.getSelectLabel(o._flatIndex,e.getCellValue(n,o._flatIndex))))]),t("span",{staticClass:"eg-cell-select-caret-inline"},[e._v("▾")])])]:e.hasPrefixSlot(o)||e.hasSuffixSlot(o)?[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(o._flatIndex,e.getCellValue(n,o._flatIndex)):e.getCellValue(n,o._flatIndex)))])]:[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(o._flatIndex,e.getCellValue(n,o._flatIndex)):e.getCellValue(n,o._flatIndex)))],e.hasSuffixSlot(o)?t("span",{staticClass:"eg-cell-suffix-wrap"},[e._t("suffix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,o._flatIndex)})],2):e._e()]},{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,o._flatIndex),isEditing:!1,done:null,cancel:null})]],2)]})],2)]})],2)])]):e._e(),e._v(" "),e.fillHandleVisible?t("div",{staticClass:"eg-fill-handle",style:e.fillHandleStyle,on:{mousedown:function(n){return n.stopPropagation(),e.startFillDrag.apply(null,arguments)}}}):e._e(),e._v(" "),e.dragMove.active?t("div",{staticClass:"eg-drag-ghost",style:e.dragGhostStyle}):e._e()])]),e._v(" "),e.colGroups.length?t("div",{staticClass:"eg-col-outline-row",style:e.colOutlineRowStyle},[e._l(e.colGroups,function(n){return[t("div",{key:"cg-"+n.startIndex+"-"+n.endIndex,staticClass:"eg-group-btn",class:{collapsed:e.isGroupCollapsed(n)},style:e.getColGroupBtnStyle(n),on:{click:function(t){return e.toggleGroup(n)}}},[e._v(e._s(e.isGroupCollapsed(n)?"+":"−"))])]})],2):e._e()]),e._v(" "),e.hasFooter?t("div",{staticClass:"eg-footer-area",style:e.footerAreaStyle},[t("div",{staticClass:"eg-footer-label",style:e.footerLabelStyle},[e._v(e._s(e.t.total))]),e._v(" "),e.getFrozenWidth()>0?t("div",{staticClass:"eg-frozen-col-footer",style:e.frozenColFooterStyle},[t("div",{style:{position:"relative",height:e.footerRowHeight+"px"}},[e._l(e.leafCols,function(n,o){return[e.isColumnPinnedLeft(o)&&!e.isColHidden(o)?[t("div",{key:"ff-"+o,staticClass:"eg-footer-cell",style:e.getFooterCellStyle(o)},[e._v("\n "+e._s(e.getColumnTotalDisplay(o))+"\n ")])]:e._e()]})],2)]):e._e(),e._v(" "),t("div",{ref:"scrollFooter",staticClass:"eg-scroll-col-footer",style:e.scrollColHeaderStyle},[t("div",{staticClass:"eg-scroll-col-footer-inner",style:{width:e.scrollContentWidth+"px",height:e.footerRowHeight+"px",position:"relative"}},[e._l(e.leafCols,function(n,o){return[e.isColumnScrollable(o)&&!e.isColHidden(o)?[t("div",{key:"sf-"+o,staticClass:"eg-footer-cell",style:e.getFooterCellStyle(o)},[e._v("\n "+e._s(e.getColumnTotalDisplay(o))+"\n ")])]:e._e()]})],2)]),e._v(" "),e.hasPinnedRight?t("div",{staticClass:"eg-pinned-right-footer",style:e.pinnedRightFooterStyle},[t("div",{style:{position:"relative",height:e.footerRowHeight+"px"}},e._l(e.pinnedRightCols,function(n){return t("div",{key:"prf-"+n._flatIndex,staticClass:"eg-footer-cell",style:e.getFooterCellStyle(n._flatIndex)},[e._v(e._s(e.getColumnTotalDisplay(n._flatIndex)))])}),0)]):e._e()]):e._e(),e._v(" "),e.resizing.active?t("div",{staticClass:"eg-resize-line",style:e.resizeLineStyle}):e._e()]),e._v(" "),e.importState.active?t("div",{staticClass:"eg-import-overlay"},[t("div",{staticClass:"eg-import-dialog"},[t("div",{staticClass:"eg-import-title"},[e._v("Fayl import qilinmoqda")]),e._v(" "),t("div",{staticClass:"eg-import-bar-wrap"},[t("div",{staticClass:"eg-import-bar",style:{width:e.importState.percent+"%"}})]),e._v(" "),t("div",{staticClass:"eg-import-msg"},[e._v(e._s(e.importState.message))]),e._v(" "),t("div",{staticClass:"eg-import-pct"},[e._v(e._s(e.importState.percent)+"%")])])]):e._e(),e._v(" "),e.exportState.active?t("div",{staticClass:"eg-import-overlay"},[e._m(0)]):e._e(),e._v(" "),e.selectDropdown&&!e.selectDropdown.tree?t("eg-select",{ref:"selectDropdownComp",attrs:{value:e.selectDropdown.currentValue,options:e.selectDropdown.rawOptions,"enable-search":e.selectDropdown.enableSearch,"trigger-rect":e.selectDropdown.rect,"dropdown-only":!0},on:{select:e.onComponentSelect,close:e.closeSelectDropdown}}):e._e(),e._v(" "),e.selectDropdown&&e.selectDropdown.tree?t("eg-tree-select",{ref:"selectDropdownComp",attrs:{value:e.selectDropdown.currentValue,options:e.selectDropdown.rawOptions,"value-key":e.selectDropdown.keys.valueKey,"label-key":e.selectDropdown.keys.labelKey,"children-key":e.selectDropdown.keys.childrenKey,"enable-search":e.selectDropdown.enableSearch,"trigger-rect":e.selectDropdown.rect,"dropdown-only":!0},on:{select:e.onComponentSelect,close:e.closeSelectDropdown}}):e._e(),e._v(" "),e.invalidCell&&e.invalidCell.rect?t("div",{staticClass:"eg-validation-tooltip",style:e.invalidTooltipStyle},[e._v(e._s(e.invalidCell.message))]):e._e(),e._v(" "),e.colDrag.active?t("div",{staticClass:"eg-col-drag-ghost",style:{left:e.colDrag.currentX+16+"px",top:e.colDrag.currentY-14+"px"}},[e._v(e._s(e.colDrag.ghostLabel))]):e._e()],1)};Q._withStripped=!0;const J=L({render:Q,staticRenderFns:[function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"eg-import-dialog"},[t("div",{staticClass:"eg-import-title"},[e._v("Fayl export qilinmoqda...")]),e._v(" "),t("div",{staticClass:"eg-export-spinner"})])}]},function(e){e&&(e("data-v-130dba58_0",{source:"\n.eg-wrapper[data-v-130dba58] {\n /* ── Design tokens (Excel 365 defaults) — override on :root or any ancestor of <excel-grid> ──\n Full reference: docs/theming.md\n */\n\n /* --- Typography --- */\n --eg-font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;\n --eg-font-size: 14px;\n --eg-font-size-header: 11px;\n\n /* --- Shape --- */\n --eg-radius: 0px;\n --eg-cell-padding-x: 3px;\n\n /* --- Accent (Excel green) --- */\n --eg-color-accent: #217346;\n --eg-color-accent-dark: #185a30;\n --eg-color-accent-soft: rgba(33, 115, 70, 0.15);\n\n /* --- Error / Validation --- */\n --eg-color-error: #c00000;\n --eg-color-error-soft: #fff2f2;\n --eg-color-error-dark: #9b0000;\n\n /* --- Borders --- */\n --eg-color-border: #d9d9d9;\n --eg-color-border-cell: #d9d9d9;\n --eg-color-border-strong: #bfbfbf;\n\n /* --- Header --- */\n --eg-color-header-bg: #f2f2f2;\n --eg-color-header-group-bg: #f2f2f2;\n --eg-color-group-border: #92d050;\n --eg-color-group-bg-collapsed: #70ad47;\n\n /* --- Cell states --- */\n --eg-color-cell-bg: #ffffff;\n --eg-color-cell-selected: #bdd7ee;\n --eg-color-cell-fill-preview: #9bc2e6;\n --eg-color-cell-readonly: #f2f2f2;\n --eg-color-cell-readonly-selected: #a9c9e4;\n --eg-color-footer-bg: #f2f2f2;\n\n /* --- Text --- */\n --eg-color-text: #000000;\n --eg-color-text-secondary: #595959;\n --eg-color-text-muted: #767676;\n\n /* --- Shadows --- */\n --eg-shadow-dropdown: 1px 2px 8px rgba(0, 0, 0, 0.18);\n --eg-shadow-dialog: 0 2px 12px rgba(0, 0, 0, 0.22);\n --eg-shadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.18);\n --eg-color-freeze-shadow: rgba(0, 0, 0, 0.12);\n\n /* --- Overlay & dropdown options --- */\n --eg-color-overlay-bg: rgba(255, 255, 255, 0.88);\n --eg-color-option-hover-bg: #e2efda;\n --eg-color-option-active-hover-bg: #c6e0b4;\n\n /* --- Checkbox --- */\n --eg-color-checkbox-border: #767676;\n --eg-color-checkbox-disabled-checked: #bfbfbf;\n\n /* --- Row effects (off by default) --- */\n --eg-color-row-hover: transparent;\n --eg-color-row-stripe: transparent;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n font-family: var(--eg-font-family);\n}\n.eg-container[data-v-130dba58] {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: auto;\n position: relative;\n}\n.eg-header-area[data-v-130dba58] {\n display: flex;\n flex-shrink: 0;\n box-shadow: 0 2px 0 0 var(--eg-color-border-cell);\n position: relative;\n z-index: 31;\n}\n.eg-header-cell[data-v-130dba58] {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border);\n border-bottom: 1px solid var(--eg-color-border);\n background: var(--eg-color-header-bg);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n position: absolute;\n user-select: none;\n cursor: pointer;\n}\n.eg-header-cell[data-v-130dba58]:hover { background: var(--eg-color-border-cell);\n}\n.eg-header-group[data-v-130dba58] { background: var(--eg-color-header-group-bg);\n}\n.eg-col-resize-handle[data-v-130dba58] {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 5px;\n cursor: col-resize;\n z-index: 5;\n}\n.eg-body-area[data-v-130dba58] {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n/* ===== FOOTER AREA (column totals) ===== */\n.eg-footer-area[data-v-130dba58] {\n border-top: 1px solid var(--eg-color-border);\n}\n.eg-frozen-col-footer[data-v-130dba58],\n.eg-scroll-col-footer[data-v-130dba58],\n.eg-pinned-right-footer[data-v-130dba58] {\n position: relative;\n}\n.eg-footer-cell[data-v-130dba58] {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n font-weight: 600;\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-footer-bg);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n.eg-row[data-v-130dba58] {\n position: relative;\n}\n.eg-cell[data-v-130dba58] {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n border-bottom: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-cell-bg);\n cursor: default;\n display: flex;\n align-items: center;\n}\n.eg-cell-value[data-v-130dba58] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n.eg-cell--has-suffix.eg-cell-select[data-v-130dba58]::after { display: none;\n}\n.eg-cell-select-trigger-wrap[data-v-130dba58] {\n flex: 1;\n display: flex;\n align-items: center;\n overflow: hidden;\n min-width: 0;\n}\n.eg-cell-select-caret-inline[data-v-130dba58] {\n flex-shrink: 0;\n color: var(--eg-color-text-muted);\n font-size: 11px;\n margin-left: 2px;\n}\n.eg-cell-suffix-wrap[data-v-130dba58] {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n}\n.eg-cell-active[data-v-130dba58] {\n outline: 2px solid var(--eg-color-accent) !important;\n outline-offset: -2px;\n z-index: 3;\n}\n.eg-cell-selected[data-v-130dba58] {\n background: var(--eg-color-cell-selected) !important;\n}\n.eg-cell-fill-preview[data-v-130dba58] {\n background: var(--eg-color-cell-fill-preview) !important;\n outline: 1px dashed var(--eg-color-accent-dark);\n outline-offset: -1px;\n}\n.eg-cell-copy[data-v-130dba58] {\n outline: 1px dashed var(--eg-color-accent);\n outline-offset: -1px;\n}\n.eg-cell-merged-hidden[data-v-130dba58] {\n display: none !important;\n}\n.eg-cell-invalid[data-v-130dba58] {\n outline: 2px solid var(--eg-color-error) !important;\n outline-offset: -2px;\n z-index: 4;\n}\n.eg-cell-input[data-v-130dba58] {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: var(--eg-color-cell-bg);\n font-size: var(--eg-font-size);\n font-family: inherit;\n padding: 0;\n}\n.eg-row-header-cell[data-v-130dba58] {\n box-sizing: border-box;\n background: var(--eg-color-header-bg);\n border-bottom: 1px solid var(--eg-color-border-cell);\n border-right: 2px solid var(--eg-color-border-strong);\n text-align: center;\n font-size: 11px;\n color: var(--eg-color-text-secondary);\n cursor: pointer;\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.eg-row-resize-handle[data-v-130dba58] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 4px;\n cursor: row-resize;\n z-index: 5;\n}\n.eg-fill-handle[data-v-130dba58] {\n position: absolute;\n width: 6px;\n height: 6px;\n background: var(--eg-color-accent);\n border: 1px solid white;\n cursor: crosshair;\n z-index: 10;\n}\n.eg-context-menu[data-v-130dba58] {\n position: fixed;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n z-index: 9999;\n min-width: 160px;\n font-size: var(--eg-font-size);\n padding: 4px 0;\n}\n.eg-context-item[data-v-130dba58] {\n padding: 6px 16px;\n cursor: pointer;\n position: relative;\n}\n.eg-context-item[data-v-130dba58]:hover { background: var(--eg-color-header-bg);\n}\n.eg-context-separator[data-v-130dba58] {\n height: 1px;\n background: var(--eg-color-border-cell);\n margin: 4px 0;\n}\n.eg-context-submenu-parent[data-v-130dba58]::after { content: ' ▶'; float: right;\n}\n.eg-context-submenu[data-v-130dba58] {\n display: none;\n position: absolute;\n left: 100%;\n top: -4px;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n min-width: 160px;\n padding: 4px 0;\n z-index: 10000;\n}\n.eg-context-submenu-parent:hover .eg-context-submenu[data-v-130dba58] { display: block;\n}\n.eg-group-btn[data-v-130dba58] {\n position: absolute;\n width: 16px;\n height: 16px;\n line-height: 14px;\n text-align: center;\n font-size: 10px;\n cursor: pointer;\n background: var(--eg-color-header-group-bg);\n border: 1px solid var(--eg-color-group-border);\n border-radius: 2px;\n z-index: 5;\n user-select: none;\n}\n.eg-group-btn.collapsed[data-v-130dba58] { background: var(--eg-color-group-bg-collapsed);\n}\n.eg-drag-ghost[data-v-130dba58] {\n position: absolute;\n border: 2px dashed var(--eg-color-accent);\n pointer-events: none;\n z-index: 20;\n}\n\n/* Column drag-and-drop */\n.eg-header-cell--drag-source[data-v-130dba58] {\n opacity: 0.5;\n outline: 1px solid var(--eg-color-accent);\n outline-offset: -1px;\n}\n.eg-cell--drag-source[data-v-130dba58] {\n opacity: 0.4;\n}\n.eg-col-drag-ghost[data-v-130dba58] {\n position: fixed;\n padding: 3px 10px;\n background: var(--eg-color-header-bg);\n border: 1px solid var(--eg-color-accent);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n color: var(--eg-color-text);\n white-space: nowrap;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.92;\n transform: translateY(-2px);\n}\n.eg-resize-line[data-v-130dba58] {\n pointer-events: none;\n z-index: 9999;\n}\n\n/* Pin left separator shadow */\n.eg-frozen-col-body[data-v-130dba58]::after {\n content: '';\n position: absolute;\n top: 0;\n right: -4px;\n width: 4px;\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n.eg-pinned-right-body[data-v-130dba58] {\n position: sticky;\n right: 0;\n z-index: 10;\n background: var(--eg-color-cell-bg);\n flex-shrink: 0;\n}\n.eg-pinned-right-body[data-v-130dba58]::before {\n content: '';\n position: absolute;\n top: 0;\n left: -4px;\n bottom: 0;\n width: 4px;\n background: linear-gradient(to left, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n.eg-pinned-right-header[data-v-130dba58] {\n overflow: hidden;\n flex-shrink: 0;\n border-left: 2px solid var(--eg-color-border-strong);\n background: var(--eg-color-header-bg);\n}\n.eg-import-overlay[data-v-130dba58] {\n position: absolute;\n inset: 0;\n background: var(--eg-color-overlay-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n border-radius: var(--eg-radius);\n}\n.eg-import-dialog[data-v-130dba58] {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: 8px;\n padding: 24px 32px;\n min-width: 280px;\n box-shadow: var(--eg-shadow-dialog);\n text-align: center;\n}\n.eg-import-title[data-v-130dba58] {\n font-size: 14px;\n font-weight: 600;\n color: var(--eg-color-text);\n margin-bottom: 16px;\n}\n.eg-import-bar-wrap[data-v-130dba58] {\n height: 8px;\n background: var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n overflow: hidden;\n margin-bottom: 10px;\n}\n.eg-import-bar[data-v-130dba58] {\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-accent), #4caf50);\n border-radius: var(--eg-radius);\n transition: width 0.15s ease;\n}\n.eg-import-msg[data-v-130dba58] {\n font-size: 12px;\n color: var(--eg-color-text-secondary);\n margin-bottom: 4px;\n}\n.eg-import-pct[data-v-130dba58] {\n font-size: var(--eg-font-size);\n font-weight: 600;\n color: var(--eg-color-accent);\n}\n.eg-export-spinner[data-v-130dba58] {\n width: 32px;\n height: 32px;\n margin: 12px auto 0;\n border: 3px solid var(--eg-color-border-cell);\n border-top-color: var(--eg-color-accent);\n border-radius: 50%;\n animation: eg-spin-data-v-130dba58 0.8s linear infinite;\n}\n@keyframes eg-spin-data-v-130dba58 {\nto { transform: rotate(360deg);\n}\n}\n\n/* ===== READONLY CELL ===== */\n.eg-cell-readonly[data-v-130dba58] {\n background: var(--eg-color-cell-readonly);\n cursor: default;\n}\n.eg-cell-readonly.eg-cell-selected[data-v-130dba58] {\n background: var(--eg-color-cell-readonly-selected);\n}\n.eg-cell-readonly.eg-cell-active[data-v-130dba58] {\n outline-color: var(--eg-color-text-muted);\n}\n\n/* ===== SELECT DROPDOWN ===== */\n.eg-cell-select[data-v-130dba58] {\n cursor: pointer;\n}\n.eg-cell-select[data-v-130dba58]::after {\n content: '▾';\n position: absolute;\n right: 4px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--eg-color-text-muted);\n font-size: 11px;\n pointer-events: none;\n line-height: 1;\n}\n\n/* ===== CHECKBOX CELL ===== */\n.eg-cell-checkbox[data-v-130dba58] {\n justify-content: center;\n padding: 0 2px;\n}\n.eg-validation-tooltip[data-v-130dba58] {\n background: var(--eg-color-error-soft);\n border: 1px solid var(--eg-color-error);\n color: var(--eg-color-error-dark);\n font-size: 12px;\n padding: 4px 8px;\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-tooltip);\n white-space: nowrap;\n pointer-events: none;\n}\n\n/* ===== ROW STRIPE & HOVER ===== */\n.eg-row--even .eg-cell[data-v-130dba58]:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-stripe);\n}\n.eg-row:hover .eg-cell[data-v-130dba58]:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-hover);\n}\n\n/* ===== SIZE VARIANTS ===== */\n\n/* small */\n.eg-size-small .eg-cell[data-v-130dba58] {\n font-size: 12px;\n padding: 0 3px;\n}\n.eg-size-small .eg-cell-input[data-v-130dba58] {\n font-size: 12px;\n}\n.eg-size-small .eg-header-cell[data-v-130dba58] {\n font-size: 11px;\n}\n.eg-size-small .eg-footer-cell[data-v-130dba58] {\n font-size: 12px;\n}\n.eg-size-small .eg-row-header-cell[data-v-130dba58] {\n font-size: 10px;\n}\n.eg-size-small .eg-select-option[data-v-130dba58] {\n font-size: 12px;\n padding: 4px 10px;\n}\n.eg-size-small .eg-context-menu[data-v-130dba58],\n.eg-size-small .eg-context-item[data-v-130dba58] {\n font-size: 12px;\n}\n.eg-size-small .eg-context-item[data-v-130dba58] {\n padding: 4px 14px;\n}\n\n/* large */\n.eg-size-large .eg-cell[data-v-130dba58] {\n font-size: 14px;\n padding: 0 6px;\n}\n.eg-size-large .eg-cell-input[data-v-130dba58] {\n font-size: 14px;\n}\n.eg-size-large .eg-header-cell[data-v-130dba58] {\n font-size: var(--eg-font-size);\n}\n.eg-size-large .eg-footer-cell[data-v-130dba58] {\n font-size: 14px;\n}\n.eg-size-large .eg-row-header-cell[data-v-130dba58] {\n font-size: 12px;\n}\n.eg-size-large .eg-select-option[data-v-130dba58] {\n font-size: 14px;\n padding: 8px 14px;\n}\n.eg-size-large .eg-context-menu[data-v-130dba58],\n.eg-size-large .eg-context-item[data-v-130dba58] {\n font-size: 14px;\n}\n.eg-size-large .eg-context-item[data-v-130dba58] {\n padding: 8px 18px;\n}\n",map:{version:3,sources:["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/ExcelGrid.vue"],names:[],mappings:";AAojHA;EACA;;GAEA;;EAEA,uBAAA;EACA,sEAAA;EACA,kCAAA;EACA,kCAAA;;EAEA,kBAAA;EACA,iCAAA;EACA,iCAAA;;EAEA,iCAAA;EACA,qCAAA;EACA,qCAAA;EACA,qDAAA;;EAEA,+BAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;;EAEA,oBAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;;EAEA,mBAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;EACA,sCAAA;;EAEA,wBAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;EACA,0CAAA;EACA,qCAAA;;EAEA,iBAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;;EAEA,oBAAA;EACA,sDAAA;EACA,qDAAA;EACA,oDAAA;EACA,6CAAA;;EAEA,uCAAA;EACA,4DAAA;EACA,0CAAA;EACA,0CAAA;;EAEA,qBAAA;EACA,6CAAA;EACA,6CAAA;;EAEA,yCAAA;EACA,kCAAA;EACA,kCAAA;;EAEA,aAAA;EACA,sBAAA;EACA,gBAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,kCAAA;AACA;AAEA;EACA,aAAA;EACA,sBAAA;EACA,OAAA;EACA,cAAA;EACA,kBAAA;AACA;AAEA;EACA,aAAA;EACA,cAAA;EACA,iDAAA;EACA,kBAAA;EACA,WAAA;AACA;AAEA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,sBAAA;EACA,8CAAA;EACA,+CAAA;EACA,qCAAA;EACA,qCAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;AACA;AAEA,yCAAA,uCAAA;AAAA;AACA,oCAAA,2CAAA;AAAA;AAEA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,SAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,OAAA;EACA,gBAAA;AACA;;AAEA,4CAAA;AACA;EACA,4CAAA;AACA;AAEA;;;EAGA,kBAAA;AACA;AAEA;EACA,sBAAA;EACA,mDAAA;EACA,gBAAA;EACA,mBAAA;EACA,8BAAA;EACA,gBAAA;EACA,mCAAA;EACA,kBAAA;EACA,MAAA;EACA,qCAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,sBAAA;EACA,mDAAA;EACA,oDAAA;EACA,gBAAA;EACA,mBAAA;EACA,8BAAA;EACA,mCAAA;EACA,kBAAA;EACA,MAAA;EACA,mCAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;AACA;AAEA;EACA,OAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;AACA;AACA,8DAAA,aAAA;AAAA;AACA;EACA,OAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;AACA;AACA;EACA,cAAA;EACA,iCAAA;EACA,eAAA;EACA,gBAAA;AACA;AACA;EACA,cAAA;EACA,oBAAA;EACA,mBAAA;AACA;AACA;EACA,oDAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,oDAAA;AACA;AAEA;EACA,wDAAA;EACA,+CAAA;EACA,oBAAA;AACA;AAEA;EACA,0CAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA;AACA;AAEA;EACA,mDAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,mCAAA;EACA,8BAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,sBAAA;EACA,qCAAA;EACA,oDAAA;EACA,qDAAA;EACA,kBAAA;EACA,eAAA;EACA,qCAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;AACA;AAEA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,WAAA;EACA,kBAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,kCAAA;EACA,uBAAA;EACA,iBAAA;EACA,WAAA;AACA;AAEA;EACA,eAAA;EACA,mCAAA;EACA,wCAAA;EACA,+BAAA;EACA,qCAAA;EACA,aAAA;EACA,gBAAA;EACA,8BAAA;EACA,cAAA;AACA;AAEA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA,0CAAA,qCAAA;AAAA;AAEA;EACA,WAAA;EACA,uCAAA;EACA,aAAA;AACA;AAEA,qDAAA,aAAA,EAAA,YAAA;AAAA;AAEA;EACA,aAAA;EACA,kBAAA;EACA,UAAA;EACA,SAAA;EACA,mCAAA;EACA,wCAAA;EACA,+BAAA;EACA,qCAAA;EACA,gBAAA;EACA,cAAA;EACA,cAAA;AACA;AAEA,wEAAA,cAAA;AAAA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;EACA,eAAA;EACA,2CAAA;EACA,8CAAA;EACA,kBAAA;EACA,UAAA;EACA,iBAAA;AACA;AAEA,2CAAA,8CAAA;AAAA;AAEA;EACA,kBAAA;EACA,yCAAA;EACA,oBAAA;EACA,WAAA;AACA;;AAEA,yBAAA;AACA;EACA,YAAA;EACA,yCAAA;EACA,oBAAA;AACA;AACA;EACA,YAAA;AACA;AACA;EACA,eAAA;EACA,iBAAA;EACA,qCAAA;EACA,wCAAA;EACA,+BAAA;EACA,qCAAA;EACA,qCAAA;EACA,gBAAA;EACA,2BAAA;EACA,mBAAA;EACA,oBAAA;EACA,aAAA;EACA,aAAA;EACA,2BAAA;AACA;AAEA;EACA,oBAAA;EACA,aAAA;AACA;;AAEA,8BAAA;AACA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,iFAAA;EACA,oBAAA;AACA;AAEA;EACA,gBAAA;EACA,QAAA;EACA,WAAA;EACA,mCAAA;EACA,cAAA;AACA;AAEA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,UAAA;EACA,SAAA;EACA,UAAA;EACA,gFAAA;EACA,oBAAA;AACA;AAEA;EACA,gBAAA;EACA,cAAA;EACA,oDAAA;EACA,qCAAA;AACA;AAEA;EACA,kBAAA;EACA,QAAA;EACA,sCAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,+BAAA;AACA;AAEA;EACA,mCAAA;EACA,6CAAA;EACA,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,mCAAA;EACA,kBAAA;AACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,2BAAA;EACA,mBAAA;AACA;AAEA;EACA,WAAA;EACA,uCAAA;EACA,+BAAA;EACA,gBAAA;EACA,mBAAA;AACA;AAEA;EACA,YAAA;EACA,sEAAA;EACA,+BAAA;EACA,4BAAA;AACA;AAEA;EACA,eAAA;EACA,qCAAA;EACA,kBAAA;AACA;AAEA;EACA,8BAAA;EACA,gBAAA;EACA,6BAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,6CAAA;EACA,wCAAA;EACA,kBAAA;EACA,uDAAA;AACA;AACA;AACA,KAAA,yBAAA;AAAA;AACA;;AAEA,8BAAA;AACA;EACA,yCAAA;EACA,eAAA;AACA;AACA;EACA,kDAAA;AACA;AACA;EACA,yCAAA;AACA;;AAEA,gCAAA;AACA;EACA,eAAA;AACA;AACA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,2BAAA;EACA,iCAAA;EACA,eAAA;EACA,oBAAA;EACA,cAAA;AACA;;AAEA,8BAAA;AACA;EACA,uBAAA;EACA,cAAA;AACA;AACA;EACA,sCAAA;EACA,uCAAA;EACA,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,+BAAA;EACA,oCAAA;EACA,mBAAA;EACA,oBAAA;AACA;;AAEA,mCAAA;AACA;EACA,sCAAA;AACA;AACA;EACA,qCAAA;AACA;;AAEA,8BAAA;;AAEA,UAAA;AACA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;EACA,iBAAA;AACA;AACA;;EAEA,eAAA;AACA;AACA;EACA,iBAAA;AACA;;AAEA,UAAA;AACA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,8BAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;EACA,iBAAA;AACA;AACA;;EAEA,eAAA;AACA;AACA;EACA,iBAAA;AACA",file:"ExcelGrid.vue",sourcesContent:["<template>\n <div\n class=\"eg-wrapper\"\n :class=\"'eg-size-' + size\"\n :style=\"wrapperStyle\"\n tabindex=\"0\"\n @keydown=\"onKeyDown\"\n @keypress=\"onKeyPress\"\n ref=\"wrapper\"\n >\n \x3c!-- Context menu --\x3e\n <div\n v-if=\"contextMenu.visible\"\n class=\"eg-context-menu\"\n :style=\"{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }\"\n @click.stop\n >\n <div class=\"eg-context-item\" @click=\"ctxCopy\">{{ t.copy }}</div>\n <div class=\"eg-context-item\" @click=\"ctxCut\">{{ t.cut }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPaste\">{{ t.paste }}</div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item eg-context-submenu-parent\">\n {{ t.pasteSpecial }}\n <div class=\"eg-context-submenu\">\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('all')\">{{ t.pasteAll }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('values')\">{{ t.pasteValues }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('formats')\">{{ t.pasteFormats }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('all', true)\">{{ t.transpose }}</div>\n </div>\n </div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxMerge\">{{ t.mergeCells }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnmerge\">{{ t.unmergeCells }}</div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxHideRow\">{{ t.hideRows }}</div>\n <div class=\"eg-context-item\" @click=\"ctxHideColumn\">{{ t.hideColumns }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnhideRows\">{{ t.unhideRows }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnhideColumns\">{{ t.unhideColumns }}</div>\n <template v-if=\"contextMenu.row < 0 && contextMenu.col >= 0\">\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxPinLeft\">{{ t.pinLeft }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPinRight\">{{ t.pinRight }}</div>\n <div class=\"eg-context-item\" v-if=\"isColPinned(contextMenu.col)\" @click=\"ctxUnpin\">{{ t.unpin }}</div>\n </template>\n </div>\n\n \x3c!-- Scroll container --\x3e\n <div class=\"eg-container\" ref=\"container\" @scroll=\"onScroll\" @click=\"hideContextMenu\">\n\n \x3c!-- ===== HEADER AREA ===== --\x3e\n <div class=\"eg-header-area\" :style=\"headerAreaStyle\">\n\n \x3c!-- Corner cell --\x3e\n <div\n class=\"eg-corner\"\n :style=\"cornerStyle\"\n @click=\"selectAll\"\n ></div>\n\n \x3c!-- Row group outline gutter (left) --\x3e\n <div v-if=\"rowGroups.length\" class=\"eg-row-outline-gutter\" :style=\"rowOutlineGutterStyle\"></div>\n\n \x3c!-- Frozen columns header --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-header\" :style=\"frozenColHeaderStyle\">\n <div :style=\"{ position: 'relative', height: (headerRowHeight * headerDepth) + 'px' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellVisible(cell, rowIdx, true)\">\n <div\n :key=\"'fh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"[getHeaderCellStyle(cell, rowIdx, true), getHeaderDragTransform(cell)]\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Scrollable columns header --\x3e\n <div class=\"eg-scroll-col-header\" ref=\"scrollColHeader\" :style=\"scrollColHeaderStyle\">\n <div class=\"eg-scroll-col-header-inner\" :style=\"{ width: scrollContentWidth + 'px', height: (headerRowHeight * headerDepth) + 'px', position: 'relative' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellVisible(cell, rowIdx, false)\">\n <div\n :key=\"'sh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"[getHeaderCellStyle(cell, rowIdx, false), getHeaderDragTransform(cell)]\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Pinned Right columns header --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-header\" :style=\"pinnedRightHeaderStyle\">\n <div :style=\"{ position: 'relative', height: (headerRowHeight * headerDepth) + 'px' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellInZone(cell, rowIdx, 'right')\">\n <div\n :key=\"'prh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"[getHeaderCellStyleForZone(cell, rowIdx, 'right'), getHeaderDragTransform(cell)]\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- ===== BODY AREA ===== --\x3e\n <div class=\"eg-body-area\" :style=\"bodyAreaStyle\">\n\n \x3c!-- Row number header column --\x3e\n <div class=\"eg-row-header-col\" :style=\"rowHeaderColStyle\">\n \x3c!-- Scrollable row headers --\x3e\n <div class=\"eg-scroll-row-headers\" :style=\"scrollRowHeadersStyle\" ref=\"scrollRowHeaders\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div\n v-if=\"!isRowHidden(ri)\"\n :key=\"'srh-' + ri\"\n class=\"eg-row-header-cell\"\n :style=\"getRowHeaderStyle(ri)\"\n @mousedown=\"onRowHeaderMouseDown($event, ri)\"\n @contextmenu.prevent=\"onRowContextMenu($event, ri)\"\n >\n {{ ri + 1 }}\n <div class=\"eg-row-resize-handle\" @mousedown.stop=\"startRowResize($event, ri)\"></div>\n </div>\n </template>\n </div>\n </div>\n </div>\n </div>\n\n \x3c!-- Row group outline gutter (left side of rows) --\x3e\n <div v-if=\"rowGroups.length\" class=\"eg-row-outline-col\" :style=\"rowOutlineColStyle\">\n <template v-for=\"group in rowGroups\">\n <div\n :key=\"'rg-' + group.startIndex + '-' + group.endIndex\"\n class=\"eg-group-btn\"\n :class=\"{ collapsed: isGroupCollapsed(group) }\"\n :style=\"getRowGroupBtnStyle(group)\"\n @click=\"toggleGroup(group)\"\n >{{ isGroupCollapsed(group) ? '+' : '−' }}</div>\n </template>\n </div>\n\n \x3c!-- Main scroll body --\x3e\n <div class=\"eg-scroll-body\" ref=\"scrollBody\" :style=\"scrollBodyStyle\" @scroll=\"onBodyScroll\">\n <div class=\"eg-scroll-body-inner\" :style=\"{ width: scrollContentWidth + 'px', height: totalVirtualHeight + 'px', position: 'relative' }\">\n\n \x3c!-- Pinned left column body --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-body\" :style=\"frozenColBodyStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div v-if=\"!isRowHidden(ri)\" :key=\"'fc-row-' + ri\" class=\"eg-row\" :class=\"{ 'eg-row--even': ri % 2 === 0 }\" :style=\"getRowStyle(ri)\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnPinnedLeft(ci) && !isColHidden(ci)\">\n <div\n :key=\"'fc-cell-' + ri + '-' + ci\"\n class=\"eg-cell\"\n :data-fi=\"ci\"\n :class=\"getCellClasses(ri, ci)\"\n :style=\"[getCellStyle(ri, ci), getCellDragTransform(ci)]\"\n @mousedown=\"onCellMouseDown($event, ri, ci)\"\n @mouseover=\"onCellMouseOver($event, ri, ci)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, ci)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, ci)\"\n >\n <div v-if=\"isMergedAway(ri, ci)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, ci)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input v-else ref=\"editInput\" class=\"eg-cell-input\" v-model=\"editValue\" @blur=\"commitEdit\" @keydown.stop=\"onEditKeyDown\" />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, ci)\"\n :disabled=\"!isCellEditable(ri, ci)\"\n @change=\"(v) => setCheckboxValue(ri, ci, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(ci, getCellValue(ri, ci)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Main data cells --\x3e\n <div class=\"eg-main-cells\" :style=\"mainCellsStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative', width: scrollableContentWidth + 'px' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div\n v-if=\"!isRowHidden(ri)\"\n :key=\"'row-' + ri\"\n class=\"eg-row\"\n :class=\"{ 'eg-row--even': ri % 2 === 0 }\"\n :style=\"getRowStyle(ri)\"\n :data-row=\"ri\"\n >\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnScrollable(ci) && !isColHidden(ci)\">\n <div\n :key=\"'cell-' + ri + '-' + ci\"\n class=\"eg-cell\"\n :data-fi=\"ci\"\n :class=\"getCellClasses(ri, ci)\"\n :style=\"[getCellStyle(ri, ci), getCellDragTransform(ci)]\"\n @mousedown=\"onCellMouseDown($event, ri, ci)\"\n @mouseover=\"onCellMouseOver($event, ri, ci)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, ci)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, ci)\"\n >\n <div v-if=\"isMergedAway(ri, ci)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, ci)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input\n v-else\n ref=\"editInput\"\n class=\"eg-cell-input\"\n v-model=\"editValue\"\n @blur=\"commitEdit\"\n @keydown.stop=\"onEditKeyDown\"\n />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, ci)\"\n :disabled=\"!isCellEditable(ri, ci)\"\n @change=\"(v) => setCheckboxValue(ri, ci, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(ci, getCellValue(ri, ci)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Pinned Right column body --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-body\" :style=\"pinnedRightBodyStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div v-if=\"!isRowHidden(ri)\" :key=\"'pr-row-' + ri\" class=\"eg-row\" :class=\"{ 'eg-row--even': ri % 2 === 0 }\" :style=\"getRowStyle(ri)\">\n <template v-for=\"col in pinnedRightCols\">\n <div\n :key=\"'pr-cell-' + ri + '-' + col._flatIndex\"\n class=\"eg-cell\"\n :data-fi=\"col._flatIndex\"\n :class=\"getCellClasses(ri, col._flatIndex)\"\n :style=\"[getCellStyle(ri, col._flatIndex), getCellDragTransform(col._flatIndex)]\"\n @mousedown=\"onCellMouseDown($event, ri, col._flatIndex)\"\n @mouseover=\"onCellMouseOver($event, ri, col._flatIndex)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, col._flatIndex)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, col._flatIndex)\"\n >\n <div v-if=\"isMergedAway(ri, col._flatIndex)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, col._flatIndex)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input v-else ref=\"editInput\" class=\"eg-cell-input\" v-model=\"editValue\" @blur=\"commitEdit\" @keydown.stop=\"onEditKeyDown\" />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, col._flatIndex)\"\n :disabled=\"!isCellEditable(ri, col._flatIndex)\"\n @change=\"(v) => setCheckboxValue(ri, col._flatIndex, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Fill handle (shown on primary range) --\x3e\n <div\n v-if=\"fillHandleVisible\"\n class=\"eg-fill-handle\"\n :style=\"fillHandleStyle\"\n @mousedown.stop=\"startFillDrag\"\n ></div>\n\n \x3c!-- Drag move ghost border --\x3e\n <div\n v-if=\"dragMove.active\"\n class=\"eg-drag-ghost\"\n :style=\"dragGhostStyle\"\n ></div>\n </div>\n </div>\n\n \x3c!-- Column group outline row (top, above body) --\x3e\n <div v-if=\"colGroups.length\" class=\"eg-col-outline-row\" :style=\"colOutlineRowStyle\">\n <template v-for=\"group in colGroups\">\n <div\n :key=\"'cg-' + group.startIndex + '-' + group.endIndex\"\n class=\"eg-group-btn\"\n :class=\"{ collapsed: isGroupCollapsed(group) }\"\n :style=\"getColGroupBtnStyle(group)\"\n @click=\"toggleGroup(group)\"\n >{{ isGroupCollapsed(group) ? '+' : '−' }}</div>\n </template>\n </div>\n\n </div>\x3c!-- end body-area --\x3e\n\n \x3c!-- ===== FOOTER AREA (column totals) ===== --\x3e\n <div v-if=\"hasFooter\" class=\"eg-footer-area\" :style=\"footerAreaStyle\">\n\n \x3c!-- \"Jami\" label cell (mirrors corner cell) --\x3e\n <div class=\"eg-footer-label\" :style=\"footerLabelStyle\">{{ t.total }}</div>\n\n \x3c!-- Frozen columns footer --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-footer\" :style=\"frozenColFooterStyle\">\n <div :style=\"{ position: 'relative', height: footerRowHeight + 'px' }\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnPinnedLeft(ci) && !isColHidden(ci)\">\n <div :key=\"'ff-' + ci\" class=\"eg-footer-cell\" :style=\"getFooterCellStyle(ci)\">\n {{ getColumnTotalDisplay(ci) }}\n </div>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Scrollable footer (horizontally synced with body via scrollFooter ref) --\x3e\n <div class=\"eg-scroll-col-footer\" ref=\"scrollFooter\" :style=\"scrollColHeaderStyle\">\n <div class=\"eg-scroll-col-footer-inner\" :style=\"{ width: scrollContentWidth + 'px', height: footerRowHeight + 'px', position: 'relative' }\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnScrollable(ci) && !isColHidden(ci)\">\n <div :key=\"'sf-' + ci\" class=\"eg-footer-cell\" :style=\"getFooterCellStyle(ci)\">\n {{ getColumnTotalDisplay(ci) }}\n </div>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Pinned Right columns footer --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-footer\" :style=\"pinnedRightFooterStyle\">\n <div :style=\"{ position: 'relative', height: footerRowHeight + 'px' }\">\n <div\n v-for=\"col in pinnedRightCols\"\n :key=\"'prf-' + col._flatIndex\"\n class=\"eg-footer-cell\"\n :style=\"getFooterCellStyle(col._flatIndex)\"\n >{{ getColumnTotalDisplay(col._flatIndex) }}</div>\n </div>\n </div>\n </div>\x3c!-- end footer-area --\x3e\n\n \x3c!-- Resize indicator line --\x3e\n <div v-if=\"resizing.active\" class=\"eg-resize-line\" :style=\"resizeLineStyle\"></div>\n </div>\x3c!-- end container --\x3e\n\n \x3c!-- Import progress overlay --\x3e\n <div v-if=\"importState.active\" class=\"eg-import-overlay\">\n <div class=\"eg-import-dialog\">\n <div class=\"eg-import-title\">Fayl import qilinmoqda</div>\n <div class=\"eg-import-bar-wrap\">\n <div class=\"eg-import-bar\" :style=\"{ width: importState.percent + '%' }\"></div>\n </div>\n <div class=\"eg-import-msg\">{{ importState.message }}</div>\n <div class=\"eg-import-pct\">{{ importState.percent }}%</div>\n </div>\n </div>\n\n \x3c!-- Export progress overlay --\x3e\n <div v-if=\"exportState.active\" class=\"eg-import-overlay\">\n <div class=\"eg-import-dialog\">\n <div class=\"eg-import-title\">Fayl export qilinmoqda...</div>\n <div class=\"eg-export-spinner\"></div>\n </div>\n </div>\n\n \x3c!-- Select dropdown overlay (flat select) --\x3e\n <eg-select\n v-if=\"selectDropdown && !selectDropdown.tree\"\n ref=\"selectDropdownComp\"\n :value=\"selectDropdown.currentValue\"\n :options=\"selectDropdown.rawOptions\"\n :enable-search=\"selectDropdown.enableSearch\"\n :trigger-rect=\"selectDropdown.rect\"\n :dropdown-only=\"true\"\n @select=\"onComponentSelect\"\n @close=\"closeSelectDropdown\"\n />\n \x3c!-- Tree select dropdown overlay --\x3e\n <eg-tree-select\n v-if=\"selectDropdown && selectDropdown.tree\"\n ref=\"selectDropdownComp\"\n :value=\"selectDropdown.currentValue\"\n :options=\"selectDropdown.rawOptions\"\n :value-key=\"selectDropdown.keys.valueKey\"\n :label-key=\"selectDropdown.keys.labelKey\"\n :children-key=\"selectDropdown.keys.childrenKey\"\n :enable-search=\"selectDropdown.enableSearch\"\n :trigger-rect=\"selectDropdown.rect\"\n :dropdown-only=\"true\"\n @select=\"onComponentSelect\"\n @close=\"closeSelectDropdown\"\n />\n\n \x3c!-- Validation error tooltip (cellValidator) --\x3e\n <div\n v-if=\"invalidCell && invalidCell.rect\"\n class=\"eg-validation-tooltip\"\n :style=\"invalidTooltipStyle\"\n >{{ invalidCell.message }}</div>\n\n \x3c!-- Column drag ghost (follows mouse) --\x3e\n <div\n v-if=\"colDrag.active\"\n class=\"eg-col-drag-ghost\"\n :style=\"{ left: (colDrag.currentX + 16) + 'px', top: (colDrag.currentY - 14) + 'px' }\"\n >{{ colDrag.ghostLabel }}</div>\n\n </div>\n</template>\n\n<script>\nimport {\n normalizeRange, isCellInRange, isCellInAnyRange,\n buildRange, singleCellRange, getPrimaryRange\n} from '../utils/selection.js'\nimport { flattenColumns, buildHeaderRows, columnTreeDepth, moveColumnNodeInTree } from '../utils/headerTree.js'\nimport { calcVisibleRows, buildCumulativeHeights, findVisibleRange, getRowTop, getRowHeight } from '../utils/virtualScroll.js'\nimport { generateFillValues } from '../utils/fillHandle.js'\nimport {\n matrixToTSV, tsvToMatrix, extractMatrix, transposeMatrix, applyMatrix, tileMatrix\n} from '../utils/clipboard.js'\nimport {\n mergeHasConflict, findMergeAtCell, isMergeAnchor, addMerge,\n removeMergeAt, resolveMergeAnchor\n} from '../utils/merge.js'\nimport {\n addGroup, removeGroup, toggleGroupCollapse, isGroupCollapsed as _isGroupCollapsed,\n getCollapsedRowIndices, getCollapsedColIndices\n} from '../utils/outline.js'\nimport { exportToExcel as _exportToExcel } from '../utils/excelExport.js'\nimport { importFromFile as _importFromFile } from '../utils/excelImport.js'\nimport { createExcelImportWorker, createExcelExportWorker } from '../utils/workerFactory'\nimport { getMessages } from '../utils/i18n.js'\nimport EgCheckbox from './EgCheckbox.vue'\nimport EgSelect from './EgSelect.vue'\nimport EgTreeSelect from './EgTreeSelect.vue'\n\nconst SIZE_CONFIG = {\n small: { row: 22, header: 24, footer: 24 },\n middle: { row: 28, header: 28, footer: 28 },\n large: { row: 36, header: 36, footer: 36 }\n}\nconst ROW_HEADER_WIDTH = 50\nconst DEFAULT_COL_WIDTH = 100\nconst OUTLINE_GUTTER = 20\n\nexport default {\n name: 'ExcelGrid',\n\n components: { EgCheckbox, EgSelect, EgTreeSelect },\n\n // v-model → :data + @input\n model: { prop: 'data', event: 'input' },\n\n props: {\n /** Array of row objects keyed by columns[].key */\n data: { type: Array, default: () => [] },\n\n /** Column definitions (may be nested via children[]) */\n columns: { type: Array, default: () => [] },\n\n /** Indices of hidden leaf columns */\n hiddenColumns: { type: Array, default: () => [] },\n\n /** Indices of hidden rows */\n hiddenRows: { type: Array, default: () => [] },\n\n /** Initial merge descriptors [{ startRow, startCol, endRow, endCol }] */\n merges: { type: Array, default: () => [] },\n\n /** Collapsed group descriptors [{ type, startIndex, endIndex }] */\n collapsedGroups: { type: Array, default: () => [] },\n\n /** Height of the grid container in px */\n height: { type: Number, default: 400 },\n\n /** Width of the grid container (px or 'auto') */\n width: { type: [Number, String], default: '100%' },\n\n /**\n * Called before drag-drop: (sourceRange, targetRange) => bool\n * Return false to cancel the drop.\n */\n beforeDrop: { type: Function, default: null },\n\n /**\n * UI locale for the context menu.\n * Supported: 'en' | 'ru' | 'uz' | 'uz-Cyrl'\n */\n locale: { type: String, default: 'en' },\n\n /**\n * Pinned columns map: { [colKey]: 'left' | 'right' }\n * Pinned-left columns render as a fixed zone on the left.\n * Pinned-right columns render as a fixed zone on the right.\n * Emit 'update:pinnedColumns' to support .sync modifier.\n */\n pinnedColumns: { type: Object, default: () => ({}) },\n\n /**\n * Dynamic cell editability: (row, rowIndex, col, colIndex) => boolean\n * Overrides column-level editable when provided.\n * row = plain data object, col = column definition.\n */\n cellEditable: { type: Function, default: null },\n\n /**\n * Cell value validation: (value, row, rowIndex, col, colIndex) => boolean\n * Return false to reject the write — the cell keeps its old value and\n * an error tooltip is shown anchored to that cell.\n */\n cellValidator: { type: Function, default: null },\n\n /**\n * Error tooltip text for a rejected value.\n * Function: (value, row, rowIndex, col, colIndex) => string\n * String: same message for every rejected cell.\n * Default: locale's \"invalidValue\" message.\n */\n cellValidationMessage: { type: [Function, String], default: null },\n\n /**\n * Bulk-write strictness (paste / fill handle / Delete).\n * false (default): invalid cells in the affected range are skipped,\n * the rest of the operation still applies.\n * true: if ANY cell in the affected range fails validation, the whole\n * bulk operation is rejected — nothing is written.\n */\n strictBulkValidation: { type: Boolean, default: false },\n\n /** Visual size of the grid. Affects row/header height and font sizes. */\n size: { type: String, default: 'middle' },\n\n /** Auto-fit all column widths to content (same as double-clicking each resize handle). Re-applies on data/columns change. */\n autoWidth: { type: Boolean, default: false },\n\n /**\n * Allow columns to be reordered by dragging their headers.\n * On drop, emits 'update:columns' (compatible with .sync) and 'column-reorder'.\n */\n columnDraggable: { type: Boolean, default: true }\n },\n\n data() {\n return {\n // Selection\n activeCell: { row: 0, col: 0 },\n selectionRanges: [], // [{ startRow, startCol, endRow, endCol }]\n isMouseDown: false,\n mouseDownRange: null,\n isCtrlDrag: false,\n\n // Edit\n editingCell: null, // { row, col }\n editValue: '',\n editOriginalValue: '',\n\n // Scroll\n scrollTop: 0,\n scrollLeft: 0,\n headerViewportWidth: null,\n\n // Virtual scroll\n virtualStartIndex: 0,\n virtualEndIndex: 0,\n virtualOffsetTop: 0,\n totalVirtualHeight: 0,\n\n // Column widths (flat index → px)\n colWidths: {},\n\n // Row heights (row index → px)\n rowHeights: {},\n\n // Import/export progress\n importState: { active: false, percent: 0, message: '' },\n exportState: { active: false },\n\n resizing: {\n active: false,\n type: null, // 'col' | 'row'\n index: -1,\n startX: 0,\n startY: 0,\n startSize: 0,\n currentPos: 0\n },\n\n // Fill handle\n fillDrag: {\n active: false,\n sourceRange: null,\n currentRow: -1,\n currentCol: -1\n },\n\n // Drag-move\n dragMove: {\n active: false,\n sourceRange: null,\n startX: 0,\n startY: 0,\n targetRow: -1,\n targetCol: -1,\n copyMode: false\n },\n\n // Clipboard (internal)\n clipboardMatrix: null,\n clipboardRange: null,\n clipboardMode: null, // 'copy' | 'cut'\n\n // Context menu\n contextMenu: { visible: false, x: 0, y: 0, row: -1, col: -1 },\n\n // Select dropdown\n selectDropdown: null, // { row, col, options, currentValue, rect }\n\n // Cell value validation (cellValidator)\n invalidCell: null, // { row, col, message, rect }\n\n // Merges (controlled via prop + update:merges)\n internalMerges: [],\n\n // Groups\n internalGroups: [], // [{ type, startIndex, endIndex }]\n internalCollapsedGroups: [],\n\n // Header\n headerDepth: 1,\n headerRows: [],\n\n // Leaf columns cache\n leafCols: [],\n\n // Footer column totals (flat col index → number | null)\n columnTotals: {},\n\n // Column drag-and-drop state\n colDrag: {\n pending: false, // mousedown received, waiting for movement threshold\n active: false, // drag in progress\n sourceFirstLeaf: -1, // first leaf flat-index of the dragged node\n sourceLeafCount: 1, // number of leaves in the dragged node (1=leaf, N=group)\n dropIndex: -1, // insert-before flat index (0..N)\n startX: 0,\n startY: 0,\n currentX: 0,\n currentY: 0,\n ghostLabel: ''\n },\n }\n },\n\n computed: {\n t() { return getMessages(this.locale) },\n\n pinnedLeftSet() {\n const s = new Set()\n this.leafCols.forEach(col => { if (this.pinnedColumns[col.key] === 'left') s.add(col._flatIndex) })\n return s\n },\n\n pinnedRightSet() {\n const s = new Set()\n this.leafCols.forEach(col => { if (this.pinnedColumns[col.key] === 'right') s.add(col._flatIndex) })\n return s\n },\n\n pinnedLeftCols() { return this.leafCols.filter(col => this.pinnedLeftSet.has(col._flatIndex)) },\n pinnedRightCols() { return this.leafCols.filter(col => this.pinnedRightSet.has(col._flatIndex)) },\n\n hasPinnedLeft() { return this.pinnedLeftSet.size > 0 },\n hasPinnedRight() { return this.pinnedRightSet.size > 0 },\n\n hasFooter() { return this.leafCols.some(col => col.showTotal) },\n\n pinnedLeftWidth() {\n let w = 0\n for (const col of this.pinnedLeftCols) {\n if (!this.isColHidden(col._flatIndex)) w += this.getColW(col._flatIndex)\n }\n return w\n },\n\n pinnedRightWidth() {\n let w = 0\n for (const col of this.pinnedRightCols) {\n if (!this.isColHidden(col._flatIndex)) w += this.getColW(col._flatIndex)\n }\n return w\n },\n\n totalRows() { return this.data.length },\n\n _sizeConf() { return SIZE_CONFIG[this.size] || SIZE_CONFIG.middle },\n _rowH() { return this._sizeConf.row },\n _headerRowH() { return this._sizeConf.header },\n _footerRowH() { return this._sizeConf.footer },\n\n headerRowHeight() { return this._headerRowH },\n footerRowHeight() { return this._footerRowH },\n\n // Pre-built cumulative height array — O(n) once, then cached by Vue.\n // findVisibleRange() uses binary search against this cached array → O(log n) per scroll.\n // Invalidated only when row count, custom heights, or hidden rows change.\n cumulativeHeights() {\n return buildCumulativeHeights(this.totalRows, this._rowH, this.rowHeights, this.hiddenRowSet)\n },\n\n hiddenColSet() { return new Set(this.hiddenColumns) },\n\n hiddenRowSet() {\n const s = new Set(this.hiddenRows)\n // Also add rows hidden by collapsed row groups\n const collapsed = getCollapsedRowIndices(this.internalGroups, this.internalCollapsedGroups)\n collapsed.forEach(i => s.add(i))\n return s\n },\n\n hiddenColFromGroupSet() {\n return getCollapsedColIndices(this.internalGroups, this.internalCollapsedGroups)\n },\n\n effectiveHiddenColSet() {\n const s = new Set(this.hiddenColSet)\n this.hiddenColFromGroupSet.forEach(i => s.add(i))\n return s\n },\n\n rowGroups() { return this.internalGroups.filter(g => g.type === 'row') },\n colGroups() { return this.internalGroups.filter(g => g.type === 'column') },\n\n visibleRowRange() {\n const rows = []\n for (let i = this.virtualStartIndex; i <= this.virtualEndIndex; i++) rows.push(i)\n return rows\n },\n\n primaryRange() {\n return getPrimaryRange(this.selectionRanges, this.activeCell)\n },\n\n fillHandleVisible() {\n return this.primaryRange && !this.editingCell\n },\n\n fillHandleStyle() {\n if (!this.primaryRange) return {}\n const r = normalizeRange(this.primaryRange)\n // O(1) lookup via cumulativeHeights instead of O(endRow) getRowTop loop\n const bottom = this.cumulativeHeights[r.endRow + 1] || 0\n const right = this.getColLeft(r.endCol + 1)\n return {\n position: 'absolute',\n width: '6px',\n height: '6px',\n background: 'var(--eg-color-accent)',\n border: '1px solid white',\n bottom: (this.totalVirtualHeight - bottom + 1) + 'px',\n right: (this.scrollContentWidth - right + 1) + 'px',\n cursor: 'crosshair',\n zIndex: 10\n }\n },\n\n\n invalidTooltipStyle() {\n if (!this.invalidCell || !this.invalidCell.rect) return {}\n const { rect } = this.invalidCell\n return {\n position: 'fixed',\n top: (rect.bottom + 4) + 'px',\n left: rect.left + 'px',\n zIndex: 9999\n }\n },\n\n dragGhostStyle() {\n if (!this.dragMove.active || this.dragMove.targetRow < 0) return {}\n const r = normalizeRange(this.dragMove.sourceRange)\n const rows = r.endRow - r.startRow\n const cols = r.endCol - r.startCol\n // O(1) lookup via cumulativeHeights instead of O(targetRow) getRowTop loop\n const top = this.cumulativeHeights[this.dragMove.targetRow] || 0\n const left = this.getColLeft(this.dragMove.targetCol)\n const width = this.getRangeWidth(this.dragMove.targetCol, this.dragMove.targetCol + cols)\n const height = this.getRangeHeight(this.dragMove.targetRow, this.dragMove.targetRow + rows)\n return {\n position: 'absolute',\n top: top + 'px',\n left: left + 'px',\n width: width + 'px',\n height: height + 'px',\n border: '2px dashed #1a73e8',\n pointerEvents: 'none',\n zIndex: 20\n }\n },\n\n wrapperStyle() {\n return {\n width: typeof this.width === 'number' ? this.width + 'px' : this.width,\n height: this.height + 'px',\n position: 'relative',\n outline: 'none',\n userSelect: 'none'\n }\n },\n\n headerAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n position: 'sticky',\n top: 0,\n zIndex: 30,\n background: 'var(--eg-color-header-bg)'\n }\n },\n\n cornerStyle() {\n const outlineW = this.rowGroups.length ? OUTLINE_GUTTER : 0\n return {\n width: (ROW_HEADER_WIDTH + outlineW) + 'px',\n minWidth: (ROW_HEADER_WIDTH + outlineW) + 'px',\n height: (this._headerRowH * this.headerDepth) + 'px',\n background: 'var(--eg-color-header-bg)',\n borderRight: '1px solid var(--eg-color-border)',\n borderBottom: '1px solid var(--eg-color-border)',\n boxSizing: 'border-box',\n flexShrink: 0\n }\n },\n\n rowOutlineGutterStyle() {\n return { width: OUTLINE_GUTTER + 'px', flexShrink: 0 }\n },\n\n frozenColHeaderStyle() {\n const w = this.getFrozenWidth()\n return {\n width: w + 'px',\n minWidth: w + 'px',\n overflow: 'hidden',\n flexShrink: 0\n }\n },\n\n scrollColHeaderStyle() {\n // Once measured, lock the header to the body's exact clientWidth (flex: 0 0 <px>)\n // instead of growing independently via flex:1 — this guarantees identical\n // scrollWidth-clientWidth (max scrollLeft) on both, so syncing scrollLeft never clamps\n // one before the other. (padding-right can't do this: clientWidth always includes\n // padding, so padding never actually shrinks it.)\n if (this.headerViewportWidth != null) {\n return { flex: '0 0 ' + this.headerViewportWidth + 'px', overflow: 'hidden' }\n }\n return { flex: 1, overflow: 'hidden' }\n },\n\n bodyAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n flex: 1,\n position: 'relative'\n }\n },\n\n rowHeaderColStyle() {\n return {\n width: ROW_HEADER_WIDTH + 'px',\n minWidth: ROW_HEADER_WIDTH + 'px',\n flexShrink: 0,\n display: 'flex',\n flexDirection: 'column',\n position: 'sticky',\n left: 0,\n zIndex: 20,\n background: 'var(--eg-color-header-bg)'\n }\n },\n\n rowOutlineColStyle() {\n return {\n width: OUTLINE_GUTTER + 'px',\n minWidth: OUTLINE_GUTTER + 'px',\n flexShrink: 0,\n position: 'relative',\n background: 'var(--eg-color-cell-bg)'\n }\n },\n\n scrollBodyStyle() {\n return {\n flex: 1,\n overflow: 'auto',\n position: 'relative',\n overflowAnchor: 'none' /* prevent Chrome scroll anchoring from fighting virtual scroll translateY */\n }\n },\n\n frozenColBodyStyle() {\n const w = this.getFrozenWidth()\n return {\n position: 'sticky',\n left: 0,\n width: w + 'px',\n zIndex: 10,\n background: 'white',\n overflow: 'hidden'\n }\n },\n\n mainCellsStyle() {\n const left = this.getFrozenWidth()\n return {\n position: 'absolute',\n left: left + 'px',\n top: 0,\n bottom: 0\n }\n },\n\n scrollContentWidth() {\n let w = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColHidden(i) && !this.pinnedRightSet.has(i)) w += this.getColW(i)\n }\n // Extra right padding so pinned-right zone doesn't cover the last scrollable column\n if (this.hasPinnedRight) w += this.pinnedRightWidth\n return w\n },\n\n scrollableContentWidth() {\n let w = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColHidden(i) && this.isColumnScrollable(i)) w += this.getColW(i)\n }\n return w\n },\n\n pinnedRightBodyStyle() {\n return {\n position: 'sticky',\n right: 0,\n width: this.pinnedRightWidth + 'px',\n zIndex: 10,\n background: 'white',\n flexShrink: 0\n }\n },\n\n pinnedRightHeaderStyle() {\n return {\n width: this.pinnedRightWidth + 'px',\n minWidth: this.pinnedRightWidth + 'px',\n overflow: 'hidden',\n flexShrink: 0,\n borderLeft: '1px solid var(--eg-color-border)'\n }\n },\n\n scrollRowHeadersStyle() {\n return { flex: 1, overflow: 'hidden', position: 'relative', overflowAnchor: 'none' }\n },\n\n footerAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n position: 'sticky',\n bottom: 0,\n zIndex: 30,\n background: 'var(--eg-color-footer-bg)',\n boxShadow: '0 -2px 0 0 var(--eg-color-border-strong)'\n }\n },\n\n footerLabelStyle() {\n const outlineW = this.rowGroups.length ? OUTLINE_GUTTER : 0\n return {\n width: (ROW_HEADER_WIDTH + outlineW) + 'px',\n minWidth: (ROW_HEADER_WIDTH + outlineW) + 'px',\n height: this._footerRowH + 'px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'var(--eg-color-footer-bg)',\n borderRight: '1px solid var(--eg-color-border)',\n borderTop: '1px solid var(--eg-color-border)',\n boxSizing: 'border-box',\n flexShrink: 0,\n fontSize: 'var(--eg-font-size-header)',\n fontWeight: 600\n }\n },\n\n frozenColFooterStyle() {\n const w = this.getFrozenWidth()\n return {\n width: w + 'px',\n minWidth: w + 'px',\n height: this._footerRowH + 'px',\n overflow: 'hidden',\n flexShrink: 0\n }\n },\n\n pinnedRightFooterStyle() {\n return {\n width: this.pinnedRightWidth + 'px',\n minWidth: this.pinnedRightWidth + 'px',\n height: this._footerRowH + 'px',\n overflow: 'hidden',\n flexShrink: 0,\n borderLeft: '1px solid var(--eg-color-border)'\n }\n },\n\n colOutlineRowStyle() {\n return {\n position: 'absolute',\n top: -OUTLINE_GUTTER + 'px',\n left: 0,\n right: 0,\n height: OUTLINE_GUTTER + 'px'\n }\n },\n\n resizeLineStyle() {\n if (!this.resizing.active) return {}\n if (this.resizing.type === 'col') {\n return {\n position: 'fixed',\n top: 0,\n left: this.resizing.currentPos + 'px',\n width: '2px',\n height: '100%',\n background: 'var(--eg-color-accent)',\n pointerEvents: 'none',\n zIndex: 9999\n }\n } else {\n return {\n position: 'fixed',\n left: 0,\n top: this.resizing.currentPos + 'px',\n height: '2px',\n width: '100%',\n background: 'var(--eg-color-accent)',\n pointerEvents: 'none',\n zIndex: 9999\n }\n }\n }\n },\n\n watch: {\n size() {\n this.rowHeights = {}\n this.$nextTick(() => this.updateVirtualScroll())\n },\n\n autoWidth(v) {\n if (v) this._applyAutoWidth()\n },\n\n columns: {\n immediate: true,\n handler(cols) {\n this.leafCols = flattenColumns(cols)\n this.headerDepth = columnTreeDepth(cols)\n this.headerRows = buildHeaderRows(cols, this.headerDepth)\n // Init colWidths\n this.leafCols.forEach(col => {\n if (this.colWidths[col._flatIndex] === undefined) {\n this.colWidths[col._flatIndex] = col.width || DEFAULT_COL_WIDTH\n }\n })\n this.computeColumnTotals()\n this.updateVirtualScroll()\n this._applyAutoWidth()\n }\n },\n merges: {\n immediate: true,\n handler(v) { this.internalMerges = v ? [...v] : [] }\n },\n collapsedGroups: {\n immediate: true,\n handler(v) { this.internalCollapsedGroups = v ? [...v] : [] }\n },\n data: {\n immediate: true,\n handler(newData) {\n // Keep _dataRaw in sync so template uses fresh data without triggering dependArray\n this._dataRaw = newData || []\n this.updateVirtualScroll()\n this.computeColumnTotals()\n // Force re-render so cell values refresh even when virtualScroll indices don't change\n // (e.g. editing a cell: same row count, same scroll position, only content changed)\n this.$forceUpdate()\n this._applyAutoWidth()\n }\n },\n totalRows() { this.updateVirtualScroll() },\n hiddenRowSet() { this.updateVirtualScroll() },\n totalVirtualHeight() { this.$nextTick(this.syncHeaderViewportWidth) }\n },\n\n created() {\n // Non-reactive row data reference — avoids Vue 2 dependArray(data) O(n) loop.\n // Vue 2 calls dependArray() for EVERY `data[ri]` access in the template,\n // iterating all 50,000 rows each time. With 1200 cells per render that's\n // 60 million iterations per render (~600ms). _dataRaw bypasses this.\n this._dataRaw = this.data || []\n\n // Non-reactive caches: same (w,h) → same style object → Vue 2 skips DOM style writes\n this._cellStyleCache = Object.create(null)\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n // rAF handles for scroll/resize throttle\n this._scrollRAF = null\n this._resizeRAF = null\n\n // Undo/redo history — non-reactive to avoid Vue overhead.\n // Each entry: { type: 'data'|'merges', before: {...}, after: {...} }\n // 'data' stores only diff rows: { indices: number[], rows: object[] }\n this._history = []\n this._historyIndex = -1\n this._historySkip = false // true while undo/redo is in progress\n\n // Column drag preview offsets — non-reactive so direct DOM updates bypass Vue re-renders.\n // Keys are column keys, values are pixel offsets.\n this._dragOffsets = {}\n\n },\n\n mounted() {\n this.updateVirtualScroll()\n this.$nextTick(this.syncHeaderViewportWidth)\n document.addEventListener('mousemove', this.onGlobalMouseMove)\n document.addEventListener('mouseup', this.onGlobalMouseUp)\n document.addEventListener('keydown', this.onGlobalKeyDown)\n document.addEventListener('mousedown', this._onDocMouseDownForDropdown, true)\n window.addEventListener('resize', this.syncHeaderViewportWidth)\n window.addEventListener('scroll', this._onWindowScrollForDropdown, true)\n },\n\n beforeDestroy() {\n document.removeEventListener('mousemove', this.onGlobalMouseMove)\n document.removeEventListener('mouseup', this.onGlobalMouseUp)\n document.removeEventListener('keydown', this.onGlobalKeyDown)\n document.removeEventListener('mousedown', this._onDocMouseDownForDropdown, true)\n window.removeEventListener('resize', this.syncHeaderViewportWidth)\n window.removeEventListener('scroll', this._onWindowScrollForDropdown, true)\n },\n\n methods: {\n // =========================================================\n // VIRTUAL SCROLL\n // =========================================================\n updateVirtualScroll() {\n const footerH = this.hasFooter ? this._footerRowH : 0\n const containerH = this.height - (this._headerRowH * this.headerDepth) - footerH\n // Use binary search against the Vue-cached cumulativeHeights → O(log n) per scroll.\n // overscan=8 (≈224px at default row height) gives enough buffer for fast scroll\n // without blank-band artifacts between rAF updates.\n const result = findVisibleRange(\n this.scrollTop, Math.max(containerH, 100), this.totalRows, this.cumulativeHeights, 8\n )\n this.virtualStartIndex = result.startIndex\n this.virtualEndIndex = result.endIndex\n this.virtualOffsetTop = result.offsetTop\n this.totalVirtualHeight = result.totalHeight\n },\n\n onBodyScroll(e) {\n const target = e.target\n // Sync sibling scroll containers immediately (visual alignment, no layout trigger)\n if (this.$refs.scrollColHeader) this.$refs.scrollColHeader.scrollLeft = target.scrollLeft\n if (this.$refs.scrollFooter) this.$refs.scrollFooter.scrollLeft = target.scrollLeft\n if (this.$refs.scrollRowHeaders) this.$refs.scrollRowHeaders.scrollTop = target.scrollTop\n\n // Close dropdown on scroll — fixed-position dropdown drifts away from the moving cell\n if (this.selectDropdown) this.closeSelectDropdown()\n\n // Throttle reactive state updates + virtual scroll recalc to one rAF per frame.\n // Read scrollTop from the DOM ref at rAF time (not from the stale event closure)\n // so that multiple scroll events arriving between frames still resolve to the\n // final position — eliminates the flickering caused by render/scroll mismatch.\n if (!this._scrollRAF) {\n this._scrollRAF = requestAnimationFrame(() => {\n this._scrollRAF = null\n const sb = this.$refs.scrollBody\n if (!sb) return\n this.scrollTop = sb.scrollTop\n this.scrollLeft = sb.scrollLeft\n this.updateVirtualScroll()\n })\n }\n },\n\n onScroll(e) {},\n\n // .eg-scroll-col-header (overflow:hidden, synced via JS) has no native scrollbar, but\n // .eg-scroll-body (overflow:auto) does — its real vertical scrollbar eats into its\n // clientWidth. If both containers just grow via flex:1, the header ends up wider than\n // the body, so its max scrollLeft is smaller and syncing clamps it before the body\n // reaches its rightmost scroll position — column borders desync right at the scroll\n // end. Locking the header to the body's exact measured clientWidth (scrollColHeaderStyle)\n // makes both max scrollLeft values identical.\n syncHeaderViewportWidth() {\n const el = this.$refs.scrollBody\n if (!el) return\n if (this.headerViewportWidth !== el.clientWidth) this.headerViewportWidth = el.clientWidth\n },\n\n // =========================================================\n // HELPERS\n // =========================================================\n isRowHidden(ri) { return this.hiddenRowSet.has(ri) },\n isColHidden(ci) { return this.effectiveHiddenColSet.has(ci) },\n\n getColW(ci) {\n return this.colWidths[ci] !== undefined ? this.colWidths[ci] : (this.leafCols[ci] ? this.leafCols[ci].width || DEFAULT_COL_WIDTH : DEFAULT_COL_WIDTH)\n },\n\n getRowH(ri) {\n if (this.isRowHidden(ri)) return 0\n return this.rowHeights[ri] || this._rowH\n },\n\n getColLeft(ci) {\n let left = 0\n for (let i = 0; i < ci && i < this.leafCols.length; i++) {\n if (!this.isColHidden(i)) left += this.getColW(i)\n }\n return left\n },\n\n getFrozenWidth() {\n return this.hasPinnedLeft ? this.pinnedLeftWidth : 0\n },\n\n isColumnPinnedLeft(ci) {\n return this.pinnedLeftSet.has(ci)\n },\n\n isColumnPinnedRight(ci) {\n return this.pinnedRightSet.has(ci)\n },\n\n isColumnScrollable(ci) {\n return !this.isColumnPinnedLeft(ci) && !this.isColumnPinnedRight(ci)\n },\n\n getZoneColLeft(ci, zone) {\n let left = 0\n if (zone === 'left') {\n for (const col of this.pinnedLeftCols) {\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex)) left += this.getColW(col._flatIndex)\n }\n } else if (zone === 'right') {\n for (const col of this.pinnedRightCols) {\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex)) left += this.getColW(col._flatIndex)\n }\n } else {\n for (let i = 0; i < this.leafCols.length; i++) {\n const col = this.leafCols[i]\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex) && this.isColumnScrollable(col._flatIndex)) {\n left += this.getColW(col._flatIndex)\n }\n }\n }\n return left\n },\n\n isCellInZone(cell, rowIdx, zone) {\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z === zone) return true\n }\n return false\n }\n const ci = cell.column._flatIndex\n if (this.isColHidden(ci)) return false\n const z = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n return z === zone\n },\n\n getHeaderCellStyleForZone(cell, rowIndex, zone) {\n let leftLeafIdx = cell._firstLeafFlatIndex\n if (cell.isGroup) {\n const end = leftLeafIdx + cell.colspan - 1\n for (let i = leftLeafIdx; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z === zone) { leftLeafIdx = i; break }\n }\n }\n const left = this.getZoneColLeft(leftLeafIdx, zone)\n let width = 0\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z !== zone) continue\n width += this.getColW(i)\n }\n } else {\n width = this.getColW(cell.column._flatIndex)\n }\n return {\n top: (this._headerRowH * rowIndex) + 'px',\n left: left + 'px',\n width: width + 'px',\n height: (this._headerRowH * cell.rowspan) + 'px'\n }\n },\n\n getRangeWidth(startCol, endCol) {\n let w = 0\n for (let i = startCol; i <= endCol && i < this.leafCols.length; i++) {\n if (!this.isColHidden(i)) w += this.getColW(i)\n }\n return w\n },\n\n getRangeHeight(startRow, endRow) {\n let h = 0\n for (let i = startRow; i <= endRow && i < this.totalRows; i++) {\n if (!this.isRowHidden(i)) h += this.getRowH(i)\n }\n return h\n },\n\n getCellValue(ri, ci) {\n const col = this.leafCols[ci]\n if (!col) return ''\n const row = this._dataRaw[ri]\n if (!row) return ''\n const v = row[col.key]\n return v !== undefined ? v : ''\n },\n\n isEditing(ri, ci) {\n return this.editingCell && this.editingCell.row === ri && this.editingCell.col === ci\n },\n\n isMergedAway(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n if (!merge) return false\n const nm = normalizeRange(merge)\n return !(nm.startRow === ri && nm.startCol === ci)\n },\n\n getMergeSpan(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n if (!merge) return { rowspan: 1, colspan: 1 }\n const nm = normalizeRange(merge)\n return {\n rowspan: nm.endRow - nm.startRow + 1,\n colspan: nm.endCol - nm.startCol + 1\n }\n },\n\n isSelected(ri, ci) {\n return isCellInAnyRange(ri, ci, this.selectionRanges)\n },\n\n isActiveCell(ri, ci) {\n return this.activeCell.row === ri && this.activeCell.col === ci\n },\n\n isCopyHighlighted(ri, ci) {\n if (!this.clipboardRange || this.clipboardMode !== 'copy') return false\n return isCellInRange(ri, ci, this.clipboardRange)\n },\n\n // =========================================================\n // STYLES\n // =========================================================\n getRowStyle(ri) {\n const h = this.getRowH(ri)\n const key = h\n if (this._rowStyleCache[key]) return this._rowStyleCache[key]\n const style = { height: h + 'px', minHeight: h + 'px' }\n this._rowStyleCache[key] = style\n return style\n },\n\n getRowHeaderStyle(ri) {\n const h = this.getRowH(ri)\n const key = h\n if (this._rowHeaderStyleCache[key]) return this._rowHeaderStyleCache[key]\n const style = { height: h + 'px' }\n this._rowHeaderStyleCache[key] = style\n return style\n },\n\n getCellStyle(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n const nm = merge ? normalizeRange(merge) : null\n let w = this.getColW(ci)\n let h = this.getRowH(ri)\n\n if (nm && nm.startRow === ri && nm.startCol === ci) {\n w = this.getRangeWidth(nm.startCol, nm.endCol)\n h = this.getRangeHeight(nm.startRow, nm.endRow)\n }\n\n // Position cells with the same absolute-left arithmetic the header uses\n // (getZoneColLeft), instead of relying on flex layout to accumulate widths —\n // flex and a JS integer sum can drift apart by a few px over many columns,\n // desyncing the body's column borders from the header's.\n const zone = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n const left = this.getZoneColLeft(ci, zone)\n\n // Cache by dimensions+position — same (w,h,left) → same object ref → Vue 2 skips DOM style writes\n const key = w + '_' + h + '_' + left\n if (this._cellStyleCache[key]) return this._cellStyleCache[key]\n const style = { position: 'absolute', left: left + 'px', top: '0px', width: w + 'px', minWidth: w + 'px', height: h + 'px' }\n this._cellStyleCache[key] = style\n return style\n },\n\n getCellClasses(ri, ci) {\n const col = this.leafCols[ci]\n return {\n 'eg-cell-active': this.isActiveCell(ri, ci),\n 'eg-cell-selected': this.isSelected(ri, ci) && !this.isActiveCell(ri, ci),\n 'eg-cell-fill-preview': this.isInFillPreview(ri, ci),\n 'eg-cell-copy': this.isCopyHighlighted(ri, ci),\n 'eg-cell-merged-hidden': this.isMergedAway(ri, ci),\n 'eg-cell-select': !!(col && this.isSelectLikeCol(col)),\n 'eg-cell-checkbox': !!(col && col.type === 'checkbox'),\n 'eg-cell-readonly': !this.isCellEditable(ri, ci),\n 'eg-cell-invalid': !!(this.invalidCell && this.invalidCell.row === ri && this.invalidCell.col === ci),\n 'eg-cell--has-suffix': !!(col && this.hasSuffixSlot(col)),\n 'eg-cell--drag-source': this.colDrag.active && ci >= this.colDrag.sourceFirstLeaf && ci < this.colDrag.sourceFirstLeaf + this.colDrag.sourceLeafCount\n }\n },\n\n isInFillPreview(ri, ci) {\n if (!this.fillDrag.active || !this.fillDrag.sourceRange) return false\n const src = this.fillDrag.sourceRange\n const targetRow = this.fillDrag.currentRow\n const targetCol = this.fillDrag.currentCol\n if (targetRow > src.endRow) {\n return ri > src.endRow && ri <= targetRow && ci >= src.startCol && ci <= src.endCol\n }\n if (targetCol > src.endCol) {\n return ci > src.endCol && ci <= targetCol && ri >= src.startRow && ri <= src.endRow\n }\n return false\n },\n\n getHeaderCellStyle(cell, rowIndex, isFrozen) {\n const zone = isFrozen ? 'left' : 'scroll'\n let leftLeafIdx = cell._firstLeafFlatIndex\n if (cell.isGroup) {\n const end = leftLeafIdx + cell.colspan - 1\n for (let i = leftLeafIdx; i <= end; i++) {\n if (this.isColHidden(i)) continue\n if (isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)) { leftLeafIdx = i; break }\n }\n }\n const left = this.getZoneColLeft(leftLeafIdx, zone)\n\n let width = 0\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const inZone = isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)\n if (!inZone) continue\n width += this.getColW(i)\n }\n } else {\n width = this.getColW(cell.column._flatIndex)\n }\n\n return {\n top: (this._headerRowH * rowIndex) + 'px',\n left: left + 'px',\n width: width + 'px',\n height: (this._headerRowH * cell.rowspan) + 'px'\n }\n },\n\n getHeaderDragTransform(cell) {\n if (!this.colDrag.active) return null\n // Read from non-reactive _dragOffsets — no Vue dependency tracking, no re-render on offset change\n let key\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (!this.isColHidden(i) && this.leafCols[i]) { key = this.leafCols[i].key; break }\n }\n } else {\n key = cell.column.key\n }\n if (!key) return null\n const dx = this._dragOffsets[key]\n if (!dx) return null\n return { transform: `translateX(${dx}px)` }\n },\n\n getCellDragTransform(ci) {\n if (!this.colDrag.active) return null\n // Read from non-reactive _dragOffsets — no Vue dependency tracking\n const col = this.leafCols[ci]\n if (!col) return null\n const dx = this._dragOffsets[col.key]\n if (!dx) return null\n return { transform: `translateX(${dx}px)` }\n },\n\n // =========================================================\n // FOOTER (column totals)\n // =========================================================\n computeColumnTotals() {\n const totals = {}\n const rows = this._dataRaw || []\n this.leafCols.forEach(col => {\n if (!col.showTotal) return\n let sum = 0\n let hasNumber = false\n for (let ri = 0; ri < rows.length; ri++) {\n const row = rows[ri]\n const v = row ? row[col.key] : undefined\n if (typeof v === 'number' && isFinite(v)) {\n sum += v\n hasNumber = true\n }\n }\n totals[col._flatIndex] = hasNumber ? Math.round(sum * 1e6) / 1e6 : null\n })\n this.columnTotals = totals\n },\n\n getColumnTotalDisplay(ci) {\n const col = this.leafCols[ci]\n if (!col || !col.showTotal) return ''\n const v = this.columnTotals[ci]\n return v === null || v === undefined ? '-' : v\n },\n\n getFooterCellStyle(ci) {\n const zone = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n const left = this.getZoneColLeft(ci, zone)\n const w = this.getColW(ci)\n return {\n position: 'absolute',\n left: left + 'px',\n top: '0px',\n width: w + 'px',\n minWidth: w + 'px',\n height: this._footerRowH + 'px'\n }\n },\n\n isCellVisible(cell, rowIndex, isFrozen) {\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const inZone = isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)\n if (inZone) return true\n }\n return false\n }\n const ci = cell.column._flatIndex\n if (this.isColHidden(ci)) return false\n return isFrozen ? this.isColumnPinnedLeft(ci) : this.isColumnScrollable(ci)\n },\n\n getRowGroupBtnStyle(group) {\n const top = getRowTop(group.startIndex, this._rowH, this.rowHeights) - this.scrollTop\n return {\n position: 'absolute',\n top: top + 'px',\n left: '2px',\n width: '16px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n fontSize: '10px',\n cursor: 'pointer',\n background: 'var(--eg-color-accent-soft)',\n border: '1px solid var(--eg-color-group-border)',\n borderRadius: '2px',\n zIndex: 5\n }\n },\n\n getColGroupBtnStyle(group) {\n const left = this.getColLeft(group.startIndex) - this.scrollLeft\n return {\n position: 'absolute',\n left: left + 'px',\n top: '2px',\n width: '16px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n fontSize: '10px',\n cursor: 'pointer',\n background: 'var(--eg-color-accent-soft)',\n border: '1px solid var(--eg-color-group-border)',\n borderRadius: '2px'\n }\n },\n\n // =========================================================\n // CELL SELECTION (3.1)\n // =========================================================\n selectCell(row, col, addToSelection = false) {\n if (row < 0 || row >= this.totalRows || col < 0 || col >= this.leafCols.length) return\n this.activeCell = { row, col }\n if (addToSelection) {\n this.selectionRanges.push(singleCellRange(row, col))\n } else {\n this.selectionRanges = [singleCellRange(row, col)]\n }\n this.emitSelectionChange()\n },\n\n selectRange(startRow, startCol, endRow, endCol, replace = true) {\n const range = { startRow, startCol, endRow, endCol }\n if (replace) {\n this.selectionRanges = [range]\n } else {\n this.selectionRanges.push(range)\n }\n this.emitSelectionChange()\n },\n\n selectRow(ri) {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [{ startRow: ri, endRow: ri, startCol: 0, endCol: this.leafCols.length - 1 }]\n this.emitSelectionChange()\n },\n\n selectColumn(ci) {\n this.activeCell = { row: 0, col: ci }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: ci, endCol: ci }]\n this.emitSelectionChange()\n },\n\n selectAll() {\n this.activeCell = { row: 0, col: 0 }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: 0, endCol: this.leafCols.length - 1 }]\n this.emitSelectionChange()\n },\n\n emitSelectionChange() {\n this.$emit('selection-change', {\n activeCell: { ...this.activeCell },\n ranges: this.selectionRanges.map(r => normalizeRange(r))\n })\n },\n\n onCellMouseDown(e, ri, ci) {\n this.invalidCell = null\n if (this.editingCell) {\n const editCol = this.leafCols[this.editingCell.col]\n if (editCol && this._hasCustomEdit(editCol)) {\n this.cancelEdit()\n } else {\n this.commitEdit()\n }\n }\n this.hideContextMenu()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n\n if (e.ctrlKey || e.metaKey) {\n if (this.selectDropdown) this.closeSelectDropdown()\n // Ctrl+click: start new independent range\n this.activeCell = { row: ri, col: ci }\n this.mouseDownRange = { startRow: ri, startCol: ci, endRow: ri, endCol: ci }\n this.selectionRanges.push(this.mouseDownRange)\n this.isCtrlDrag = true\n } else if (e.shiftKey && this.selectionRanges.length > 0) {\n if (this.selectDropdown) this.closeSelectDropdown()\n // Shift+click: extend primary range to this cell\n this.selectionRanges = [buildRange(this.activeCell, { row: ri, col: ci })]\n } else {\n const wasActive = this.activeCell.row === ri && this.activeCell.col === ci\n this.activeCell = { row: ri, col: ci }\n this.mouseDownRange = { startRow: ri, startCol: ci, endRow: ri, endCol: ci }\n this.selectionRanges = [this.mouseDownRange]\n this.isCtrlDrag = false\n\n // Open select dropdown on click if cell was already active (2nd click)\n const col = this.leafCols[ci]\n if (wasActive && col && this.isSelectLikeCol(col) && !this._hasCustomEdit(col) && this.isCellEditable(ri, ci)) {\n this.openSelectDropdown(ri, ci, e)\n e.preventDefault()\n this.isMouseDown = true\n this.emitSelectionChange()\n return\n }\n if (this.selectDropdown) this.closeSelectDropdown()\n }\n\n this.isMouseDown = true\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onCellMouseOver(e, ri, ci) {\n if (!this.isMouseDown) return\n if (this.fillDrag.active) return\n if (this.dragMove.active) {\n this.dragMove.targetRow = ri\n this.dragMove.targetCol = ci\n return\n }\n\n // Extend current drag range\n if (this.mouseDownRange) {\n this.mouseDownRange.endRow = ri\n this.mouseDownRange.endCol = ci\n this.emitSelectionChange()\n }\n },\n\n onCellMouseUp() {\n this.isMouseDown = false\n },\n\n onCellDblClick(ri, ci) {\n const col = this.leafCols[ci]\n if (!this.isCellEditable(ri, ci)) return\n if (col && this.isSelectLikeCol(col) && !this._hasCustomEdit(col)) {\n this.openSelectDropdownForActive()\n return\n }\n if (col && col.type === 'checkbox') return\n this.startEditing(ri, ci, null, true)\n },\n\n onRowHeaderMouseDown(e, ri) {\n const endCol = this.leafCols.length - 1\n const fullRow = { startRow: ri, endRow: ri, startCol: 0, endCol }\n\n if (e.ctrlKey || e.metaKey) {\n if (e.shiftKey && this.selectionRanges.length > 0) {\n // Ctrl+Shift: active qatordan ri gacha yangi range qo'sh\n const sr = Math.min(this.activeCell.row, ri)\n const er = Math.max(this.activeCell.row, ri)\n this.selectionRanges = [...this.selectionRanges, { startRow: sr, endRow: er, startCol: 0, endCol }]\n } else {\n // Ctrl+click: qatorni toggle qil\n const idx = this.selectionRanges.findIndex(r =>\n r.startRow === ri && r.endRow === ri && r.startCol === 0 && r.endCol === endCol\n )\n if (idx >= 0) {\n const next = this.selectionRanges.filter((_, i) => i !== idx)\n this.selectionRanges = next.length ? next : [fullRow]\n } else {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [...this.selectionRanges, fullRow]\n }\n }\n } else if (e.shiftKey && this.selectionRanges.length > 0) {\n const sr = Math.min(this.activeCell.row, ri)\n const er = Math.max(this.activeCell.row, ri)\n this.selectionRanges = [{ startRow: sr, endRow: er, startCol: 0, endCol }]\n } else {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [fullRow]\n }\n\n this.mouseDownRange = this.selectionRanges[this.selectionRanges.length - 1]\n this.isMouseDown = true\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onColHeaderMouseDown(e, cell) {\n // Start pending drag (activates after 5 px horizontal movement)\n // Works for both leaf and group headers\n if (this.columnDraggable && !e.shiftKey && !e.ctrlKey && !e.metaKey) {\n this.colDrag.pending = true\n this.colDrag.active = false\n this.colDrag.sourceFirstLeaf = cell._firstLeafFlatIndex\n this.colDrag.sourceLeafCount = cell.isGroup ? cell.colspan : 1\n this.colDrag.startX = e.clientX\n this.colDrag.startY = e.clientY\n this.colDrag.ghostLabel = cell.column.title || ''\n }\n\n if (cell.isGroup) {\n // Group header click: select all leaf columns within the group\n const startCol = cell._firstLeafFlatIndex\n const endCol = startCol + cell.colspan - 1\n this.activeCell = { row: 0, col: startCol }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol, endCol }]\n this.isMouseDown = true\n this.mouseDownRange = this.selectionRanges[0]\n this.emitSelectionChange()\n e.preventDefault()\n return\n }\n\n const ci = cell.column._flatIndex\n if (e.shiftKey && this.selectionRanges.length > 0) {\n const sc = Math.min(this.activeCell.col, ci)\n const ec = Math.max(this.activeCell.col, ci)\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: sc, endCol: ec }]\n } else {\n this.activeCell = { row: 0, col: ci }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: ci, endCol: ci }]\n }\n this.isMouseDown = true\n this.mouseDownRange = this.selectionRanges[0]\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onColHeaderDblClick(e, cell) {\n if (cell.isGroup) return\n this.autoFitColumn(cell.column._flatIndex)\n },\n\n onColHeaderContextMenu(e, cell) {\n if (!cell.isGroup) {\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: -1, col: cell.column._flatIndex }\n }\n },\n\n onRowContextMenu(e, ri) {\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: ri, col: -1 }\n },\n\n onCellContextMenu(e, ri, ci) {\n if (!this.isSelected(ri, ci)) {\n this.selectCell(ri, ci)\n }\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: ri, col: ci }\n },\n\n hideContextMenu() {\n this.contextMenu.visible = false\n },\n\n // =========================================================\n // KEYBOARD NAVIGATION (3.2)\n // =========================================================\n onKeyDown(e) {\n // Delegate keyboard navigation to the active dropdown component\n if (this.selectDropdown) {\n const comp = this.$refs.selectDropdownComp\n if (comp && comp.handleKey) comp.handleKey(e)\n return\n }\n\n if (this.editingCell) return // handled by onEditKeyDown\n const key = e.key\n\n if ((e.ctrlKey || e.metaKey) && key === 'z' && !e.shiftKey) {\n e.preventDefault()\n this.undo()\n return\n }\n if ((e.ctrlKey || e.metaKey) && (key === 'y' || (key === 'z' && e.shiftKey))) {\n e.preventDefault()\n this.redo()\n return\n }\n\n if (key === 'a' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.selectAll()\n return\n }\n\n if (key === 'c' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.copySelection()\n return\n }\n if (key === 'x' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.cutSelection()\n return\n }\n if (key === 'v' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.pasteAt(this.activeCell.row, this.activeCell.col)\n return\n }\n\n if (key === 'Delete' || key === 'Backspace') {\n e.preventDefault()\n this.clearSelection()\n return\n }\n\n if (key === 'F2') {\n e.preventDefault()\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && this.isSelectLikeCol(activeCol) && !this._hasCustomEdit(activeCol)) {\n this.openSelectDropdownForActive()\n } else if (activeCol && activeCol.type === 'checkbox') {\n this.toggleCheckbox(this.activeCell.row, this.activeCell.col)\n } else {\n this.startEditing(this.activeCell.row, this.activeCell.col, null, true)\n }\n return\n }\n\n if (key === ' ') {\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && activeCol.type === 'checkbox') {\n e.preventDefault()\n this.toggleCheckbox(this.activeCell.row, this.activeCell.col)\n return\n }\n }\n\n if (key === 'Escape') {\n this.clipboardRange = null\n this.clipboardMatrix = null\n this.clipboardMode = null\n return\n }\n\n if (key === 'Tab') {\n e.preventDefault()\n this.moveActive(0, e.shiftKey ? -1 : 1, e)\n return\n }\n if (key === 'Enter') {\n e.preventDefault()\n this.moveActive(e.shiftKey ? -1 : 1, 0, e)\n return\n }\n\n const arrows = { ArrowUp: [-1,0], ArrowDown: [1,0], ArrowLeft: [0,-1], ArrowRight: [0,1] }\n if (arrows[key]) {\n e.preventDefault()\n const [dr, dc] = arrows[key]\n if (e.shiftKey) {\n // Extend selection\n const pr = this.primaryRange || singleCellRange(this.activeCell.row, this.activeCell.col)\n const nm = normalizeRange(pr)\n // Determine which edge to extend\n if (dr === -1) pr.startRow = Math.max(0, nm.startRow - 1)\n if (dr === 1) pr.endRow = Math.min(this.totalRows - 1, nm.endRow + 1)\n if (dc === -1) pr.startCol = Math.max(0, nm.startCol - 1)\n if (dc === 1) pr.endCol = Math.min(this.leafCols.length - 1, nm.endCol + 1)\n this.selectionRanges = [pr]\n this.emitSelectionChange()\n } else {\n this.moveActive(dr, dc, e)\n }\n return\n }\n\n if (key === 'Home') {\n e.preventDefault()\n if (e.ctrlKey) {\n this.selectCell(0, 0)\n } else {\n this.selectCell(this.activeCell.row, 0)\n }\n return\n }\n if (key === 'End') {\n e.preventDefault()\n if (e.ctrlKey) {\n this.selectCell(this.totalRows - 1, this.leafCols.length - 1)\n } else {\n this.selectCell(this.activeCell.row, this.leafCols.length - 1)\n }\n return\n }\n if (key === 'PageUp') {\n e.preventDefault()\n const visibleRows = Math.floor((this.height - this._headerRowH * this.headerDepth) / this._rowH)\n this.moveActive(-visibleRows, 0, e)\n return\n }\n if (key === 'PageDown') {\n e.preventDefault()\n const visibleRows = Math.floor((this.height - this._headerRowH * this.headerDepth) / this._rowH)\n this.moveActive(visibleRows, 0, e)\n return\n }\n },\n\n onKeyPress(e) {\n if (this.editingCell) return\n if (this.selectDropdown) return\n if (e.ctrlKey || e.metaKey || e.altKey) return\n if (e.key && e.key.length === 1) {\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && this.isSelectLikeCol(activeCol) && !this._hasCustomEdit(activeCol)) {\n e.preventDefault()\n this.openSelectDropdownForActive()\n return\n }\n if (activeCol && activeCol.type === 'checkbox') {\n e.preventDefault()\n return\n }\n this.startEditing(this.activeCell.row, this.activeCell.col, e.key, false)\n }\n },\n\n onGlobalKeyDown(e) {\n if (e.key === 'Escape' && (this.colDrag.active || this.colDrag.pending)) {\n this._resetColDrag()\n e.preventDefault()\n }\n },\n\n moveActive(dr, dc, e) {\n let row = this.activeCell.row + dr\n let col = this.activeCell.col + dc\n\n // Tab: wrap around rows\n if (e && e.key === 'Tab') {\n if (col >= this.leafCols.length) { col = 0; row++ }\n if (col < 0) { col = this.leafCols.length - 1; row-- }\n }\n\n row = Math.max(0, Math.min(this.totalRows - 1, row))\n col = Math.max(0, Math.min(this.leafCols.length - 1, col))\n\n // Skip hidden cols\n while (this.isColHidden(col) && col > 0 && col < this.leafCols.length - 1) {\n col += dc >= 0 ? 1 : -1\n }\n // Skip hidden rows\n while (this.isRowHidden(row) && row > 0 && row < this.totalRows - 1) {\n row += dr >= 0 ? 1 : -1\n }\n\n // Handle merge navigation\n const resolved = resolveMergeAnchor(row, col, this.internalMerges)\n row = resolved.row\n col = resolved.col\n\n this.activeCell = { row, col }\n this.selectionRanges = [singleCellRange(row, col)]\n this.emitSelectionChange()\n this.scrollToCell(row, col)\n },\n\n scrollToCell(ri, ci) {\n const scrollBody = this.$refs.scrollBody\n if (!scrollBody) return\n const rowTop = getRowTop(ri, this._rowH, this.rowHeights)\n const rowBottom = rowTop + this.getRowH(ri)\n const colLeft = this.getColLeft(ci) - this.getFrozenWidth()\n const colRight = colLeft + this.getColW(ci)\n\n if (rowTop < scrollBody.scrollTop) scrollBody.scrollTop = rowTop\n if (rowBottom > scrollBody.scrollTop + scrollBody.clientHeight) {\n scrollBody.scrollTop = rowBottom - scrollBody.clientHeight\n }\n if (colLeft < scrollBody.scrollLeft) scrollBody.scrollLeft = colLeft\n if (colRight > scrollBody.scrollLeft + scrollBody.clientWidth) {\n scrollBody.scrollLeft = colRight - scrollBody.clientWidth\n }\n },\n\n // =========================================================\n // EDITING (used by 3.1 + 3.2)\n // =========================================================\n startEditing(ri, ci, initialChar = null, keepValue = false) {\n const col = this.leafCols[ci]\n if (!col || !this.isCellEditable(ri, ci)) return\n if (ri < 0 || ri >= this.totalRows) return\n if (!this._hasCustomEdit(col)) {\n if (this.isSelectLikeCol(col)) { this.openSelectDropdownForActive(); return }\n if (col.type === 'checkbox') return\n }\n\n this.invalidCell = null\n this.editingCell = { row: ri, col: ci }\n if (initialChar !== null) {\n this.editValue = initialChar\n } else if (keepValue) {\n this.editValue = String(this.getCellValue(ri, ci) || '')\n } else {\n this.editValue = ''\n }\n this.editOriginalValue = String(this.getCellValue(ri, ci) || '')\n\n this.$nextTick(() => {\n const inputs = this.$refs.editInput\n if (inputs) {\n const input = Array.isArray(inputs) ? inputs[0] : inputs\n if (input) {\n input.focus()\n if (keepValue) {\n input.setSelectionRange(input.value.length, input.value.length)\n }\n }\n }\n })\n },\n\n commitEdit() {\n if (!this.editingCell) return\n const { row, col } = this.editingCell\n const colDef = this.leafCols[col]\n if (!colDef) { this.editingCell = null; return }\n\n if (!this.isCellValueValid(row, col, this.editValue)) {\n this._showInvalidCell(row, col, this.editValue)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: this.editValue }\n this._emitDataChange(oldData, newData)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n cancelEdit() {\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n hasCellSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['cell-' + col.key])\n },\n hasLegacyEditSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['edit-' + col.key])\n },\n hasPrefixSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['prefix-' + col.key])\n },\n hasSuffixSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['suffix-' + col.key])\n },\n _hasCustomEdit(col) {\n // For select/treeSelect: cell-{key} slot only customizes display; dropdown still opens normally\n if (col.type === 'select' || col.type === 'treeSelect') {\n return this.hasLegacyEditSlot(col)\n }\n return this.hasCellSlot(col) || this.hasLegacyEditSlot(col)\n },\n\n commitEditSlot(value) {\n if (!this.editingCell) return\n const { row, col } = this.editingCell\n const colDef = this.leafCols[col]\n if (!colDef) { this.editingCell = null; return }\n if (!this.isCellValueValid(row, col, value)) {\n this._showInvalidCell(row, col, value)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: value }\n this._emitDataChange(oldData, newData)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n // =========================================================\n // CHECKBOX CELLS\n // =========================================================\n\n isCheckboxChecked(ri, ci) {\n const v = this.getCellValue(ri, ci)\n if (v === true || v === 1) return true\n if (typeof v === 'string') return ['true', '1'].includes(v.trim().toLowerCase())\n return false\n },\n\n setCheckboxValue(ri, ci, value) {\n const col = this.leafCols[ci]\n if (!col || !this.isCellEditable(ri, ci)) return\n if (!this.isCellValueValid(ri, ci, value)) {\n this._showInvalidCell(ri, ci, value)\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[ri] = { ...oldData[ri], [col.key]: value }\n this._emitDataChange(oldData, newData)\n },\n\n toggleCheckbox(ri, ci) {\n this.setCheckboxValue(ri, ci, !this.isCheckboxChecked(ri, ci))\n },\n\n // =========================================================\n // CELL EDITABILITY (3.17)\n // =========================================================\n\n isCellEditable(ri, ci) {\n const col = this.leafCols[ci]\n if (!col) return false\n const row = this._dataRaw[ri] || {}\n if (typeof this.cellEditable === 'function') return !!this.cellEditable(row, ri, col, ci)\n if (typeof col.editable === 'function') return !!col.editable(row, ri)\n if (col.editable === false) return false\n return true\n },\n\n // =========================================================\n // CELL VALUE VALIDATION (cellValidator)\n // =========================================================\n\n isCellValueValid(ri, ci, value) {\n if (typeof this.cellValidator !== 'function') return true\n const col = this.leafCols[ci]\n if (!col) return true\n const row = this._dataRaw[ri] || {}\n return !!this.cellValidator(value, row, ri, col, ci)\n },\n\n _resolveValidationMessage(ri, ci, value) {\n const col = this.leafCols[ci]\n const row = this._dataRaw[ri] || {}\n if (typeof this.cellValidationMessage === 'function') return this.cellValidationMessage(value, row, ri, col, ci)\n if (typeof this.cellValidationMessage === 'string' && this.cellValidationMessage) return this.cellValidationMessage\n return this.t.invalidValue\n },\n\n // Find the on-screen rect of the cell currently being committed — the edit\n // input if still mounted (commitEdit, before editingCell is cleared), else\n // the active cell element (checkbox/select commits, which never enter edit mode).\n _invalidCellRect() {\n const inputs = this.$refs.editInput\n const input = Array.isArray(inputs) ? inputs[0] : inputs\n if (input) return input.getBoundingClientRect()\n const el = this.$el ? this.$el.querySelector('.eg-cell-active') : null\n return el ? el.getBoundingClientRect() : null\n },\n\n _showInvalidCell(ri, ci, value) {\n const message = this._resolveValidationMessage(ri, ci, value)\n this.invalidCell = { row: ri, col: ci, message, rect: this._invalidCellRect() }\n this.$emit('cell-validation-error', { row: ri, col: ci, value, message })\n },\n\n // Resolve+emit messages for a batch of rejected { row, col, value } entries\n // from a bulk write (paste / fill / clear). blocked=true means the whole\n // operation was aborted (strictBulkValidation); false means these cells\n // were skipped but the rest of the write still applied.\n _emitBulkValidationError(skipped, blocked) {\n const cells = skipped.map(c => ({\n row: c.row, col: c.col, value: c.value,\n message: this._resolveValidationMessage(c.row, c.col, c.value)\n }))\n this.$emit('bulk-validation-error', { blocked, cells })\n },\n\n // =========================================================\n // SELECT DROPDOWN (3.16) + TREE SELECT (3.22)\n // =========================================================\n\n isSelectLikeCol(col) {\n return !!(col && (col.type === 'select' || col.type === 'treeSelect'))\n },\n\n treeOptionKeys(col) {\n return {\n valueKey: col.optionValueKey || 'value',\n labelKey: col.optionLabelKey || 'label',\n childrenKey: col.optionChildrenKey || 'children'\n }\n },\n\n _treeFindLabel(nodes, keys, value) {\n for (const node of (nodes || [])) {\n if (String(node[keys.valueKey]) === value) {\n return node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])\n }\n const found = this._treeFindLabel(node[keys.childrenKey], keys, value)\n if (found != null) return found\n }\n return null\n },\n\n colOptions(ci) {\n const col = this.leafCols[ci]\n if (!col || !Array.isArray(col.options)) return []\n return col.options.map(o =>\n typeof o === 'string' ? { value: o, label: o } : { value: o.value, label: o.label != null ? o.label : String(o.value), color: o.color }\n )\n },\n\n getSelectLabel(ci, value) {\n const col = this.leafCols[ci]\n const v = value == null ? '' : String(value)\n if (col && col.type === 'treeSelect') {\n if (!Array.isArray(col.options)) return v\n const found = this._treeFindLabel(col.options, this.treeOptionKeys(col), v)\n return found != null ? found : v\n }\n const opts = this.colOptions(ci)\n if (!opts.length) return v\n const found = opts.find(o => String(o.value) === v)\n return found ? found.label : v\n },\n\n _buildSelectDropdownState(ri, ci, col, currentValue, rect) {\n const rectObj = { top: rect.top, bottom: rect.bottom, left: rect.left, width: rect.width }\n return {\n row: ri, col: ci,\n tree: col.type === 'treeSelect',\n keys: col.type === 'treeSelect' ? this.treeOptionKeys(col) : null,\n rawOptions: col.options || [],\n currentValue,\n rect: rectObj,\n enableSearch: !!col.enableSearch\n }\n },\n\n openSelectDropdown(ri, ci, e) {\n const col = this.leafCols[ci]\n if (!col || !Array.isArray(col.options)) return\n const el = e.currentTarget\n const rect = el.getBoundingClientRect()\n const currentValue = String(this.getCellValue(ri, ci) != null ? this.getCellValue(ri, ci) : '')\n this.selectDropdown = this._buildSelectDropdownState(ri, ci, col, currentValue, rect)\n },\n\n openSelectDropdownForActive() {\n const { row, col } = this.activeCell\n const colDef = this.leafCols[col]\n if (!colDef || !Array.isArray(colDef.options)) return\n this.$nextTick(() => {\n const el = this.$el ? this.$el.querySelector('.eg-cell-active') : null\n if (!el) return\n const rect = el.getBoundingClientRect()\n const currentValue = String(this.getCellValue(row, col) != null ? this.getCellValue(row, col) : '')\n this.selectDropdown = this._buildSelectDropdownState(row, col, colDef, currentValue, rect)\n })\n },\n\n onComponentSelect({ value, label }) {\n if (!this.selectDropdown) return\n const { row, col } = this.selectDropdown\n const colDef = this.leafCols[col]\n if (colDef) {\n if (!this.isCellValueValid(row, col, value)) {\n this._showInvalidCell(row, col, value)\n this.closeSelectDropdown()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: value }\n this._emitDataChange(oldData, newData)\n if (typeof colDef.onSelect === 'function') {\n colDef.onSelect({ value, label }, newData[row], row, colDef)\n }\n }\n this.closeSelectDropdown()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n closeSelectDropdown() {\n this.selectDropdown = null\n },\n\n _onWindowScrollForDropdown(e) {\n if (!this.selectDropdown) return\n const comp = this.$refs.selectDropdownComp\n const dd = comp && comp.$el ? comp.$el : null\n if (dd && dd.contains(e.target)) return\n this.closeSelectDropdown()\n },\n\n _onDocMouseDownForDropdown(e) {\n if (!this.selectDropdown) return\n const comp = this.$refs.selectDropdownComp\n const dd = comp && comp.$el ? comp.$el : null\n if (dd && dd.contains(e.target)) return\n this.closeSelectDropdown()\n },\n\n onEditKeyDown(e) {\n if (e.key === 'Escape') {\n e.preventDefault()\n this.cancelEdit()\n } else if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault()\n this.commitEdit()\n this.moveActive(1, 0, e)\n } else if (e.key === 'Tab') {\n e.preventDefault()\n this.commitEdit()\n this.moveActive(0, e.shiftKey ? -1 : 1, e)\n }\n },\n\n clearSelection() {\n if (!this.selectionRanges.length) return\n const oldData = this.data\n const newData = oldData.slice()\n let hasChanges = false\n const skipped = []\n for (const range of this.selectionRanges) {\n const r = {\n startRow: Math.min(range.startRow, range.endRow),\n endRow: Math.max(range.startRow, range.endRow),\n startCol: Math.min(range.startCol, range.endCol),\n endCol: Math.max(range.startCol, range.endCol)\n }\n for (let ri = r.startRow; ri <= r.endRow && ri < newData.length; ri++) {\n let rowUpdated = null\n for (let ci = r.startCol; ci <= r.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, '')) { skipped.push({ row: ri, col: ci, value: '' }); continue }\n if (!rowUpdated) rowUpdated = { ...newData[ri] }\n rowUpdated[col.key] = ''\n hasChanges = true\n }\n }\n if (rowUpdated) newData[ri] = rowUpdated\n }\n }\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n if (hasChanges) this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n // =========================================================\n // FILL HANDLE (3.3)\n // =========================================================\n startFillDrag(e) {\n const pr = this.primaryRange\n if (!pr) return\n this.fillDrag.active = true\n this.fillDrag.sourceRange = normalizeRange(pr)\n this.fillDrag.currentRow = pr.endRow\n this.fillDrag.currentCol = pr.endCol\n e.preventDefault()\n },\n\n onGlobalMouseMove(e) {\n // Detect column drag threshold (5 px)\n if (this.colDrag.pending) {\n if (Math.abs(e.clientX - this.colDrag.startX) > 5) {\n this.colDrag.pending = false\n this.colDrag.active = true\n this.colDrag.currentX = e.clientX\n this.colDrag.currentY = e.clientY\n this.colDrag.dropIndex = this.colDrag.sourceFirstLeaf\n this.isMouseDown = false // cancel cell-selection drag\n }\n }\n if (this.colDrag.active) {\n this.handleColDragMove(e)\n return\n }\n\n if (this.resizing.active) {\n this.handleResizeMove(e)\n return\n }\n if (this.fillDrag.active) {\n this.handleFillDragMove(e)\n return\n }\n if (this.dragMove.active) {\n this.handleDragMoveMove(e)\n return\n }\n },\n\n onGlobalMouseUp(e) {\n if (this.colDrag.active) {\n this.commitColDrag()\n return\n }\n if (this.colDrag.pending) {\n this._resetColDrag()\n // fall through — normal mouseup\n }\n\n if (this.resizing.active) {\n this.commitResize()\n return\n }\n if (this.fillDrag.active) {\n this.commitFillDrag()\n return\n }\n if (this.dragMove.active) {\n this.commitDragMove(e)\n return\n }\n this.isMouseDown = false\n },\n\n handleFillDragMove(e) {\n const scrollBody = this.$refs.scrollBody\n if (!scrollBody) return\n const rect = scrollBody.getBoundingClientRect()\n const relY = e.clientY - rect.top + scrollBody.scrollTop\n const relX = e.clientX - rect.left + scrollBody.scrollLeft\n\n // Binary search on cumulativeHeights — O(log n) instead of O(n)\n const cum = this.cumulativeHeights\n const total = this.totalRows\n let lo = 0, hi = total - 1\n while (lo < hi) {\n const mid = (lo + hi) >> 1\n if (cum[mid + 1] <= relY) lo = mid + 1\n else hi = mid\n }\n const row = Math.min(lo, total - 1)\n\n // Columns are few — O(columns) is fast\n let left = this.getFrozenWidth()\n let col = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColumnScrollable(i)) continue\n left += this.getColW(i)\n if (relX < left) { col = i; break }\n col = i\n }\n\n this.fillDrag.currentRow = row\n this.fillDrag.currentCol = col\n },\n\n commitFillDrag() {\n const src = this.fillDrag.sourceRange\n if (!src) { this.fillDrag.active = false; return }\n\n const targetRow = this.fillDrag.currentRow\n const targetCol = this.fillDrag.currentCol\n\n const oldData = this.data\n const newData = oldData.slice() // only affected rows get new objects\n let targetRange\n const skipped = []\n\n if (targetRow > src.endRow) {\n // Fill down\n const count = targetRow - src.endRow\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (!col) continue\n const srcValues = []\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n srcValues.push(oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ri = src.endRow + 1 + k\n if (ri < this.totalRows && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n targetRange = { startRow: src.endRow + 1, endRow: targetRow, startCol: src.startCol, endCol: src.endCol }\n } else if (targetCol > src.endCol) {\n // Fill right\n const count = targetCol - src.endCol\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n const srcValues = []\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n srcValues.push(col && oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ci = src.endCol + 1 + k\n if (ci < this.leafCols.length) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n }\n targetRange = { startRow: src.startRow, endRow: src.endRow, startCol: src.endCol + 1, endCol: targetCol }\n }\n\n if (targetRange) {\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n } else {\n this._emitDataChange(oldData, newData)\n this.$emit('fill', { sourceRange: src, targetRange, values: newData })\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n }\n }\n\n this.fillDrag.active = false\n this.fillDrag.sourceRange = null\n },\n\n doubleFillDown() {\n const pr = this.primaryRange\n if (!pr) return\n const src = normalizeRange(pr)\n // Find adjacent column filled length\n const adjCol = src.startCol > 0 ? src.startCol - 1 : src.endCol + 1\n if (adjCol < 0 || adjCol >= this.leafCols.length) return\n const adjColDef = this.leafCols[adjCol]\n if (!adjColDef) return\n let lastFilledRow = src.endRow\n for (let ri = src.endRow + 1; ri < this.totalRows; ri++) {\n if (this.data[ri] && this.data[ri][adjColDef.key] !== '' && this.data[ri][adjColDef.key] !== undefined) {\n lastFilledRow = ri\n } else break\n }\n if (lastFilledRow <= src.endRow) return\n\n const count = lastFilledRow - src.endRow\n const oldData = this.data\n const newData = oldData.slice()\n const skipped = []\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (!col) continue\n const srcValues = []\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n srcValues.push(oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ri = src.endRow + 1 + k\n if (ri < this.totalRows && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n // =========================================================\n // COPY / PASTE (3.4)\n // =========================================================\n copySelection() {\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n this.clipboardMatrix = extractMatrix(this.data, this.leafCols, r)\n this.clipboardRange = r\n this.clipboardMode = 'copy'\n\n // Write to system clipboard as TSV\n const tsv = matrixToTSV(this.clipboardMatrix)\n if (navigator.clipboard) {\n navigator.clipboard.writeText(tsv).catch(() => {})\n }\n },\n\n cutSelection() {\n this.copySelection()\n this.clipboardMode = 'cut'\n },\n\n async pasteAt(targetRow, targetCol, options = {}) {\n const { mode = 'all', transpose = false } = options\n\n let matrix = null\n\n // Try system clipboard first\n if (navigator.clipboard) {\n try {\n const text = await navigator.clipboard.readText()\n if (text) matrix = tsvToMatrix(text)\n } catch (_) {}\n }\n\n // Fall back to internal clipboard\n if (!matrix && this.clipboardMatrix) {\n matrix = this.clipboardMatrix\n }\n\n if (!matrix) return\n\n if (transpose) matrix = transposeMatrix(matrix)\n\n // ── Excel-style selection broadcast / tiling ──────────────────────────\n // When pasting over a multi-cell selection and the clipboard matrix is\n // smaller than the selection, tile the matrix to fill the selection —\n // provided the selection dimensions are exact multiples of the matrix\n // dimensions (matches Excel's tiling rule exactly).\n // Cut-paste is never tiled (source must be cleared exactly once).\n const isCopyPaste = !this.clipboardMode || this.clipboardMode === 'copy'\n if (isCopyPaste) {\n const pr = this.primaryRange\n if (pr) {\n const sel = normalizeRange(pr)\n const selRows = sel.endRow - sel.startRow + 1\n const selCols = sel.endCol - sel.startCol + 1\n const matRows = matrix.length\n const matCols = matrix[0] ? matrix[0].length : 0\n\n // Only tile when selection is strictly larger than clipboard\n if ((selRows > matRows || selCols > matCols) &&\n selRows % matRows === 0 && selCols % matCols === 0) {\n matrix = tileMatrix(matrix, selRows, selCols)\n // Paste at selection origin, not just at the active cell\n targetRow = sel.startRow\n targetCol = sel.startCol\n }\n }\n }\n\n const oldData = this.data\n const { newData, affectedRange, skipped } = applyMatrix(\n oldData, this.leafCols, targetRow, targetCol, matrix, mode,\n (ri, ci) => this.isCellEditable(ri, ci),\n (ri, ci, v) => this.isCellValueValid(ri, ci, v)\n )\n\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n\n if (this.clipboardMode === 'cut' && this.clipboardRange) {\n // Clear source — ensure each source row is a new copy before mutation\n const src = this.clipboardRange\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci) && this.isCellValueValid(ri, ci, '')) {\n newData[ri][col.key] = ''\n }\n }\n }\n this.clipboardRange = null\n this.clipboardMode = null\n }\n\n this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n ctxCopy() { this.hideContextMenu(); this.copySelection() },\n ctxCut() { this.hideContextMenu(); this.cutSelection() },\n ctxPaste() { this.hideContextMenu(); this.pasteAt(this.activeCell.row, this.activeCell.col) },\n ctxPasteSpecial(mode, transpose = false) {\n this.hideContextMenu()\n this.pasteAt(this.activeCell.row, this.activeCell.col, { mode, transpose })\n },\n\n // =========================================================\n // COLUMN DRAG-AND-DROP\n // =========================================================\n\n _computeDragOffsets(dropIndex) {\n const { sourceFirstLeaf, sourceLeafCount } = this.colDrag\n if (dropIndex < 0 || (dropIndex >= sourceFirstLeaf && dropIndex <= sourceFirstLeaf + sourceLeafCount)) return {}\n\n const previewCols = moveColumnNodeInTree(this.columns, sourceFirstLeaf, sourceLeafCount, dropIndex)\n const previewLeaves = flattenColumns(previewCols)\n\n const byKey = {}\n this.leafCols.forEach(c => { byKey[c.key] = c })\n\n const offsets = {}\n for (const zone of ['left', 'scroll', 'right']) {\n const inZone = zone === 'left'\n ? ci => this.isColumnPinnedLeft(ci)\n : zone === 'right'\n ? ci => this.isColumnPinnedRight(ci)\n : ci => this.isColumnScrollable(ci)\n\n const origPos = {}\n let acc = 0\n this.leafCols.forEach(col => {\n const ci = col._flatIndex\n if (this.isColHidden(ci) || !inZone(ci)) return\n origPos[col.key] = acc\n acc += this.getColW(ci)\n })\n\n const previewPos = {}\n acc = 0\n for (const col of previewLeaves) {\n const origCol = byKey[col.key]\n if (!origCol) continue\n const ci = origCol._flatIndex\n if (this.isColHidden(ci) || !inZone(ci)) continue\n previewPos[col.key] = acc\n acc += this.getColW(ci)\n }\n\n for (const key of Object.keys(origPos)) {\n offsets[key] = (previewPos[key] !== undefined ? previewPos[key] : origPos[key]) - origPos[key]\n }\n }\n return offsets\n },\n\n _applyDragTransforms(offsets) {\n if (!this.$el) return\n // Leaf header cells + all body cells (data-fi = flat column index)\n this.$el.querySelectorAll('[data-fi]').forEach(el => {\n const fi = parseInt(el.dataset.fi)\n const col = this.leafCols[fi]\n const dx = col ? (offsets[col.key] || 0) : 0\n el.style.transform = dx ? `translateX(${dx}px)` : ''\n })\n // Group header cells (data-start/data-end = leaf range)\n this.$el.querySelectorAll('[data-start]').forEach(el => {\n const start = parseInt(el.dataset.start)\n const end = parseInt(el.dataset.end)\n if (isNaN(start)) return\n let key = null\n for (let i = start; i <= end; i++) {\n if (!this.isColHidden(i) && this.leafCols[i]) { key = this.leafCols[i].key; break }\n }\n const dx = key ? (offsets[key] || 0) : 0\n el.style.transform = dx ? `translateX(${dx}px)` : ''\n })\n },\n\n _clearDragTransforms() {\n if (!this.$el) return\n this.$el.querySelectorAll('[data-fi], [data-start]').forEach(el => {\n el.style.transform = ''\n })\n },\n\n handleColDragMove(e) {\n this.colDrag.currentX = e.clientX\n this.colDrag.currentY = e.clientY\n\n const prevDrop = this.colDrag.dropIndex\n this._updateColDragDropIndex(e.clientX)\n const newDrop = this.colDrag.dropIndex\n\n if (newDrop !== prevDrop) {\n this._dragOffsets = this._computeDragOffsets(newDrop)\n this._applyDragTransforms(this._dragOffsets)\n }\n },\n\n _updateColDragDropIndex(clientX) {\n if (!this.$el) return\n const n = this.leafCols.length\n if (n === 0) { this.colDrag.dropIndex = 0; return }\n\n // Use DOM cell rects but subtract CSS transforms so we get ORIGINAL positions.\n // This avoids circular dependency: live-preview transforms don't affect drop calc.\n const cells = Array.from(this.$el.querySelectorAll('.eg-header-cell:not(.eg-header-group)'))\n .map(el => {\n const fi = parseInt(el.dataset.fi)\n if (isNaN(fi)) return null\n const rect = el.getBoundingClientRect()\n const m = (el.style.transform || '').match(/translateX\\((-?[\\d.]+)px\\)/)\n const dx = m ? parseFloat(m[1]) : 0\n return { fi, left: rect.left - dx, right: rect.right - dx }\n })\n .filter(Boolean)\n .sort((a, b) => a.left - b.left)\n\n if (!cells.length) { this.colDrag.dropIndex = n; return }\n\n let dropIndex = n\n for (const { fi, left, right } of cells) {\n if (clientX < right) {\n dropIndex = clientX < left + (right - left) / 2 ? fi : fi + 1\n break\n }\n }\n this.colDrag.dropIndex = dropIndex\n },\n\n commitColDrag() {\n const from = this.colDrag.sourceFirstLeaf\n const leafCount = this.colDrag.sourceLeafCount\n const to = this.colDrag.dropIndex\n\n // Clear DOM transforms BEFORE any Vue state change so the browser never sees\n // a frame with stale transforms + new column positions (the flicker source).\n this._clearDragTransforms()\n this._dragOffsets = {}\n this._resetColDrag()\n\n if (from < 0 || to < 0 || leafCount < 1) return\n if (to >= from && to <= from + leafCount) return\n\n const newCols = moveColumnNodeInTree(this.columns, from, leafCount, to)\n this.$emit('update:columns', newCols)\n this.$emit('column-reorder', { fromIndex: from, toIndex: to, columns: newCols })\n },\n\n _resetColDrag() {\n this._clearDragTransforms()\n this._dragOffsets = {}\n this.colDrag.pending = false\n this.colDrag.active = false\n this.colDrag.sourceFirstLeaf = -1\n this.colDrag.sourceLeafCount = 1\n this.colDrag.dropIndex = -1\n this.colDrag.ghostLabel = ''\n },\n\n // =========================================================\n // RESIZE (3.5)\n // =========================================================\n startColResize(e, ci) {\n const rect = this.$refs.wrapper.getBoundingClientRect()\n this.resizing = {\n active: true,\n type: 'col',\n index: ci,\n startX: e.clientX,\n startY: e.clientY,\n startSize: this.getColW(ci),\n currentPos: e.clientX\n }\n e.preventDefault()\n },\n\n startRowResize(e, ri) {\n this.resizing = {\n active: true,\n type: 'row',\n index: ri,\n startX: e.clientX,\n startY: e.clientY,\n startSize: this.getRowH(ri),\n currentPos: e.clientY\n }\n e.preventDefault()\n },\n\n handleResizeMove(e) {\n if (this.resizing.type === 'col') {\n this.resizing.currentPos = e.clientX\n const newWidth = Math.max(20, this.resizing.startSize + (e.clientX - this.resizing.startX))\n this.$set(this.colWidths, this.resizing.index, newWidth)\n this._cellStyleCache = Object.create(null)\n } else {\n this.resizing.currentPos = e.clientY\n this._resizePreviewHeight = Math.max(10, this.resizing.startSize + (e.clientY - this.resizing.startY))\n // Batch $set + updateVirtualScroll to rAF — prevents O(n) cumulativeHeights rebuild\n // on every mousemove (200+ Hz). At most 60 rebuilds/sec instead of 200+.\n if (!this._resizeRAF) {\n this._resizeRAF = requestAnimationFrame(() => {\n this._resizeRAF = null\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n this._cellStyleCache = Object.create(null)\n this.$set(this.rowHeights, this.resizing.index, this._resizePreviewHeight)\n this.updateVirtualScroll()\n })\n }\n }\n },\n\n commitResize() {\n if (this._resizeRAF) {\n cancelAnimationFrame(this._resizeRAF)\n this._resizeRAF = null\n // Apply the last pending preview height immediately on commit\n if (this.resizing.type === 'row' && this._resizePreviewHeight !== undefined) {\n this.$set(this.rowHeights, this.resizing.index, this._resizePreviewHeight)\n }\n }\n if (this.resizing.type === 'col') {\n this._cellStyleCache = Object.create(null)\n const newSize = this.colWidths[this.resizing.index]\n this.$emit('column-resize', { index: this.resizing.index, newSize })\n } else {\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n this._cellStyleCache = Object.create(null)\n const newSize = this.rowHeights[this.resizing.index]\n this.$emit('row-resize', { index: this.resizing.index, newSize })\n this.updateVirtualScroll()\n }\n this.resizing.active = false\n },\n\n autoFitColumn(ci) {\n const col = this.leafCols[ci]\n if (!col) return\n let maxLen = (col.title || '').length\n for (let ri = 0; ri < Math.min(this.totalRows, 500); ri++) {\n const v = this.data[ri] ? String(this.data[ri][col.key] || '') : ''\n if (v.length > maxLen) maxLen = v.length\n }\n const newWidth = Math.max(50, maxLen * 8 + 16)\n this.$set(this.colWidths, ci, newWidth)\n this._cellStyleCache = Object.create(null)\n this.$emit('column-resize', { index: ci, newSize: newWidth })\n },\n\n _applyAutoWidth() {\n if (!this.autoWidth || !this.leafCols.length) return\n this.leafCols.forEach((col, ci) => {\n let maxLen = (col.title || '').length\n for (let ri = 0; ri < Math.min(this.totalRows, 500); ri++) {\n const v = this.data[ri] ? String(this.data[ri][col.key] || '') : ''\n if (v.length > maxLen) maxLen = v.length\n }\n this.$set(this.colWidths, ci, Math.max(50, maxLen * 8 + 16))\n })\n this._cellStyleCache = Object.create(null)\n },\n\n ctxHideRow() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n const newHidden = [...this.hiddenRows]\n for (let ri = r.startRow; ri <= r.endRow; ri++) {\n if (!newHidden.includes(ri)) newHidden.push(ri)\n }\n this.$emit('update:hiddenRows', newHidden)\n },\n\n ctxHideColumn() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n const newHidden = [...this.hiddenColumns]\n for (let ci = r.startCol; ci <= r.endCol; ci++) {\n if (!newHidden.includes(ci)) newHidden.push(ci)\n }\n this.$emit('update:hiddenColumns', newHidden)\n },\n\n ctxUnhideRows() {\n this.hideContextMenu()\n this.$emit('update:hiddenRows', [])\n },\n\n ctxUnhideColumns() {\n this.hideContextMenu()\n this.$emit('update:hiddenColumns', [])\n },\n\n ctxPinLeft() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n this.$emit('update:pinnedColumns', { ...this.pinnedColumns, [col.key]: 'left' })\n this.hideContextMenu()\n },\n\n ctxPinRight() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n this.$emit('update:pinnedColumns', { ...this.pinnedColumns, [col.key]: 'right' })\n this.hideContextMenu()\n },\n\n ctxUnpin() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n const next = { ...this.pinnedColumns }\n delete next[col.key]\n this.$emit('update:pinnedColumns', next)\n this.hideContextMenu()\n },\n\n isColPinned(ci) {\n const col = this.leafCols[ci]\n return !!(col && this.pinnedColumns[col.key])\n },\n\n // =========================================================\n // MERGE CELLS (3.8)\n // =========================================================\n mergeCells(range) {\n const oldMerges = this.internalMerges.slice()\n const { merges: newMerges, conflict } = addMerge(range, this.internalMerges)\n if (conflict) {\n this.$emit('merge-error', { range, reason: 'Overlaps existing merge' })\n return false\n }\n this.internalMerges = newMerges\n this._emitMergeChange(oldMerges, [...newMerges])\n return true\n },\n\n unmergeCells(row, col) {\n const oldMerges = this.internalMerges.slice()\n const newMerges = removeMergeAt(row, col, this.internalMerges)\n this.internalMerges = newMerges\n this._emitMergeChange(oldMerges, [...newMerges])\n },\n\n ctxMerge() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n this.mergeCells(normalizeRange(pr))\n },\n\n ctxUnmerge() {\n this.hideContextMenu()\n this.unmergeCells(this.activeCell.row, this.activeCell.col)\n },\n\n // =========================================================\n // GROUPING (3.7)\n // =========================================================\n groupRows(startIndex, endIndex) {\n this.internalGroups = addGroup('row', startIndex, endIndex, this.internalGroups)\n },\n\n groupColumns(startIndex, endIndex) {\n this.internalGroups = addGroup('column', startIndex, endIndex, this.internalGroups)\n },\n\n ungroupRows(startIndex, endIndex) {\n this.internalGroups = removeGroup('row', startIndex, endIndex, this.internalGroups)\n },\n\n ungroupColumns(startIndex, endIndex) {\n this.internalGroups = removeGroup('column', startIndex, endIndex, this.internalGroups)\n },\n\n toggleGroup(group) {\n this.internalCollapsedGroups = toggleGroupCollapse(group, this.internalCollapsedGroups)\n this.$emit('update:collapsedGroups', [...this.internalCollapsedGroups])\n this.$emit('group-toggle', { group, collapsed: _isGroupCollapsed(group, this.internalCollapsedGroups) })\n this.updateVirtualScroll()\n },\n\n isGroupCollapsed(group) {\n return _isGroupCollapsed(group, this.internalCollapsedGroups)\n },\n\n expandAll() {\n this.internalCollapsedGroups = []\n this.$emit('update:collapsedGroups', [])\n this.updateVirtualScroll()\n },\n\n collapseAll() {\n this.internalCollapsedGroups = [...this.internalGroups]\n this.$emit('update:collapsedGroups', [...this.internalGroups])\n this.updateVirtualScroll()\n },\n\n // =========================================================\n // DRAG AND DROP (3.9)\n // =========================================================\n startDragMove(e, ri, ci) {\n const pr = this.primaryRange\n if (!pr) return\n this.dragMove = {\n active: true,\n sourceRange: normalizeRange(pr),\n startX: e.clientX,\n startY: e.clientY,\n targetRow: ri,\n targetCol: ci,\n copyMode: e.ctrlKey || e.metaKey\n }\n this.$emit('cell-drag-start', { sourceRange: this.dragMove.sourceRange })\n e.preventDefault()\n },\n\n handleDragMoveMove(e) {\n this.dragMove.copyMode = e.ctrlKey || e.metaKey\n this.$emit('cell-drag-move', {\n sourceRange: this.dragMove.sourceRange,\n targetRow: this.dragMove.targetRow,\n targetCol: this.dragMove.targetCol\n })\n },\n\n async commitDragMove(e) {\n if (!this.dragMove.active) return\n const { sourceRange, targetRow, targetCol, copyMode } = this.dragMove\n\n const targetRange = {\n startRow: targetRow,\n startCol: targetCol,\n endRow: targetRow + (sourceRange.endRow - sourceRange.startRow),\n endCol: targetCol + (sourceRange.endCol - sourceRange.startCol)\n }\n\n let proceed = true\n if (this.beforeDrop) {\n proceed = await Promise.resolve(this.beforeDrop(sourceRange, targetRange))\n }\n\n if (proceed) {\n const oldData = this.data\n const matrix = extractMatrix(oldData, this.leafCols, sourceRange)\n const { newData } = applyMatrix(oldData, this.leafCols, targetRow, targetCol, matrix, 'all', (ri, ci) => this.isCellEditable(ri, ci))\n\n if (!copyMode) {\n // Clear source — ensure each source row is a new copy before mutation\n for (let ri = sourceRange.startRow; ri <= sourceRange.endRow; ri++) {\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n for (let ci = sourceRange.startCol; ci <= sourceRange.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) newData[ri][col.key] = ''\n }\n }\n }\n this._emitDataChange(oldData, newData)\n this.$emit('cell-drop', { sourceRange, targetRange })\n }\n\n this.dragMove = { active: false, sourceRange: null, startX: 0, startY: 0, targetRow: -1, targetCol: -1, copyMode: false }\n this.isMouseDown = false\n },\n\n // =========================================================\n // EXCEL EXPORT (3.11)\n // =========================================================\n async exportToExcel(options = {}) {\n const {\n filename = 'export.xlsx',\n sheetName = 'Sheet1',\n scope = 'all',\n includeHidden = false\n } = options\n\n this.$emit('export-start')\n this.exportState = { active: true }\n\n const workerPayload = {\n data: this.data,\n columns: this.columns,\n leafCols: this.leafCols,\n merges: this.internalMerges,\n hiddenCols: [...this.effectiveHiddenColSet],\n hiddenRows: [...this.hiddenRowSet],\n range: scope === 'selection' ? this.primaryRange : null,\n filename,\n sheetName,\n scope,\n includeHidden\n }\n\n try {\n const worker = createExcelExportWorker()\n if (worker) {\n await this._exportViaWorker(worker, workerPayload)\n } else {\n // Fallback: synchronous export on main thread\n _exportToExcel({\n ...workerPayload,\n hiddenColSet: this.effectiveHiddenColSet,\n hiddenRowSet: this.hiddenRowSet\n })\n }\n this.$emit('export-success')\n } catch (err) {\n this.$emit('export-error', err)\n } finally {\n this.exportState = { active: false }\n }\n },\n\n _exportViaWorker(worker, payload) {\n return new Promise((resolve, reject) => {\n let done = false\n const finish = (fn, val) => {\n if (done) return\n done = true\n worker.terminate()\n fn(val)\n }\n\n worker.onmessage = (e) => {\n const { type, buffer, filename, message } = e.data\n if (type === 'result') {\n // Trigger browser download from the main thread (DOM required)\n const blob = new Blob([new Uint8Array(buffer)], {\n type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'\n })\n const url = URL.createObjectURL(blob)\n const a = document.createElement('a')\n a.href = url\n a.download = filename\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n finish(resolve)\n } else if (type === 'error') {\n finish(reject, new Error(message))\n }\n }\n\n worker.onerror = (err) => finish(reject, new Error(err.message || 'Export worker xatosi'))\n\n worker.postMessage(payload)\n })\n },\n\n // =========================================================\n // EXCEL IMPORT (3.12)\n // =========================================================\n async importFromFile(file, options = {}) {\n this.importState = { active: true, percent: 5, message: \"Fayl o'qilmoqda...\" }\n\n try {\n let result\n const worker = createExcelImportWorker()\n\n if (worker) {\n result = await this._importViaWorker(worker, file, options)\n } else {\n // Fallback: chunked async on main thread\n result = await _importFromFile(\n file,\n this.columns,\n options,\n (percent, message) => { this.importState = { active: true, percent, message } }\n )\n }\n\n const { columns, merges } = result\n // Freeze each row so Vue 2 skips deep Object.defineProperty observation.\n // Vue 2 checks Object.isExtensible() — frozen objects are skipped entirely.\n // All edit paths already use spread ({ ...row }) so frozen rows are safe.\n const data = result.data.map(row => Object.freeze(row))\n this.$emit('input', data)\n this.$emit('update:columns', columns)\n\n const hasMerges = merges && merges.length > 0\n this.internalMerges = hasMerges ? merges : []\n this.$emit('update:merges', hasMerges ? merges : [])\n this.$emit('update:collapsedGroups', [])\n this.$emit('update:hiddenRows', [])\n this.$emit('import-success', { data, columns, merges })\n\n // Reset scroll state and re-derive virtual scroll after DOM settles.\n // Without this, stale scrollTop + old rowHeights cause blank bands on scroll.\n this.rowHeights = {}\n this.scrollTop = 0\n this.scrollLeft = 0\n this.$nextTick(() => {\n if (this.$refs.scrollBody) {\n this.$refs.scrollBody.scrollTop = 0\n this.$refs.scrollBody.scrollLeft = 0\n }\n if (this.$refs.scrollColHeader) this.$refs.scrollColHeader.scrollLeft = 0\n if (this.$refs.scrollFooter) this.$refs.scrollFooter.scrollLeft = 0\n if (this.$refs.scrollRowHeaders) this.$refs.scrollRowHeaders.scrollTop = 0\n this.updateVirtualScroll()\n })\n } catch (err) {\n this.$emit('import-error', err)\n } finally {\n this.importState = { active: false, percent: 0, message: '' }\n }\n },\n\n _importViaWorker(worker, file, options) {\n return new Promise(async (resolve, reject) => {\n let done = false\n const finish = (fn, val) => {\n if (done) return\n done = true\n worker.terminate()\n fn(val)\n }\n\n worker.onmessage = (e) => {\n const { type, percent, message, data, columns, merges } = e.data\n if (type === 'progress') {\n this.importState = { active: true, percent, message }\n } else if (type === 'result') {\n finish(resolve, { data, columns, merges })\n } else if (type === 'error') {\n finish(reject, new Error(message))\n }\n }\n\n worker.onerror = (err) => finish(reject, new Error(err.message || 'Import worker xatosi'))\n\n try {\n // Transfer the ArrayBuffer zero-copy into the worker\n const buffer = await file.arrayBuffer()\n worker.postMessage(\n { buffer, existingColumns: this.columns, options },\n [buffer]\n )\n } catch (err) {\n finish(reject, err)\n }\n })\n },\n\n // =========================================================\n // UNDO / REDO (3.13)\n // =========================================================\n\n // Push one entry onto the non-reactive history stack.\n // Truncates the redo tail, caps at 100 entries.\n _pushHistory(entry) {\n if (this._historyIndex < this._history.length - 1) {\n this._history.splice(this._historyIndex + 1)\n }\n this._history.push(entry)\n if (this._history.length > 100) {\n this._history.shift()\n // historyIndex stays the same — it now points to the new last entry\n } else {\n this._historyIndex++\n }\n },\n\n // Emit 'input' and record a data diff entry (only changed row indices).\n // Use slice() + per-row spread in callers so unchanged rows keep the\n // same reference — then the identity check here catches only real changes.\n _emitDataChange(oldData, newData) {\n if (!this._historySkip) {\n const indices = []\n const beforeRows = []\n const afterRows = []\n const len = Math.max(oldData.length, newData.length)\n for (let i = 0; i < len; i++) {\n if (oldData[i] !== newData[i]) {\n indices.push(i)\n beforeRows.push(oldData[i])\n afterRows.push(newData[i])\n }\n }\n if (indices.length > 0) {\n this._pushHistory({\n type: 'data',\n before: { indices, rows: beforeRows },\n after: { indices, rows: afterRows }\n })\n }\n }\n this.$emit('input', newData)\n },\n\n // Emit 'update:merges' and record a merges diff entry.\n _emitMergeChange(oldMerges, newMerges) {\n if (!this._historySkip) {\n this._pushHistory({\n type: 'merges',\n before: oldMerges,\n after: newMerges\n })\n }\n this.$emit('update:merges', newMerges)\n },\n\n undo() {\n if (this._historyIndex < 0) return\n const entry = this._history[this._historyIndex--]\n this._historySkip = true\n try {\n if (entry.type === 'data') {\n const newData = this.data.slice()\n for (let i = 0; i < entry.before.indices.length; i++) {\n newData[entry.before.indices[i]] = entry.before.rows[i]\n }\n this.$emit('input', newData)\n } else if (entry.type === 'merges') {\n this.internalMerges = entry.before.slice()\n this.$emit('update:merges', entry.before.slice())\n }\n } finally {\n this._historySkip = false\n }\n },\n\n redo() {\n if (this._historyIndex >= this._history.length - 1) return\n const entry = this._history[++this._historyIndex]\n this._historySkip = true\n try {\n if (entry.type === 'data') {\n const newData = this.data.slice()\n for (let i = 0; i < entry.after.indices.length; i++) {\n newData[entry.after.indices[i]] = entry.after.rows[i]\n }\n this.$emit('input', newData)\n } else if (entry.type === 'merges') {\n this.internalMerges = entry.after.slice()\n this.$emit('update:merges', entry.after.slice())\n }\n } finally {\n this._historySkip = false\n }\n }\n }\n}\n<\/script>\n\n<style scoped>\n.eg-wrapper {\n /* ── Design tokens (Excel 365 defaults) — override on :root or any ancestor of <excel-grid> ──\n Full reference: docs/theming.md\n */\n\n /* --- Typography --- */\n --eg-font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;\n --eg-font-size: 14px;\n --eg-font-size-header: 11px;\n\n /* --- Shape --- */\n --eg-radius: 0px;\n --eg-cell-padding-x: 3px;\n\n /* --- Accent (Excel green) --- */\n --eg-color-accent: #217346;\n --eg-color-accent-dark: #185a30;\n --eg-color-accent-soft: rgba(33, 115, 70, 0.15);\n\n /* --- Error / Validation --- */\n --eg-color-error: #c00000;\n --eg-color-error-soft: #fff2f2;\n --eg-color-error-dark: #9b0000;\n\n /* --- Borders --- */\n --eg-color-border: #d9d9d9;\n --eg-color-border-cell: #d9d9d9;\n --eg-color-border-strong: #bfbfbf;\n\n /* --- Header --- */\n --eg-color-header-bg: #f2f2f2;\n --eg-color-header-group-bg: #f2f2f2;\n --eg-color-group-border: #92d050;\n --eg-color-group-bg-collapsed: #70ad47;\n\n /* --- Cell states --- */\n --eg-color-cell-bg: #ffffff;\n --eg-color-cell-selected: #bdd7ee;\n --eg-color-cell-fill-preview: #9bc2e6;\n --eg-color-cell-readonly: #f2f2f2;\n --eg-color-cell-readonly-selected: #a9c9e4;\n --eg-color-footer-bg: #f2f2f2;\n\n /* --- Text --- */\n --eg-color-text: #000000;\n --eg-color-text-secondary: #595959;\n --eg-color-text-muted: #767676;\n\n /* --- Shadows --- */\n --eg-shadow-dropdown: 1px 2px 8px rgba(0, 0, 0, 0.18);\n --eg-shadow-dialog: 0 2px 12px rgba(0, 0, 0, 0.22);\n --eg-shadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.18);\n --eg-color-freeze-shadow: rgba(0, 0, 0, 0.12);\n\n /* --- Overlay & dropdown options --- */\n --eg-color-overlay-bg: rgba(255, 255, 255, 0.88);\n --eg-color-option-hover-bg: #e2efda;\n --eg-color-option-active-hover-bg: #c6e0b4;\n\n /* --- Checkbox --- */\n --eg-color-checkbox-border: #767676;\n --eg-color-checkbox-disabled-checked: #bfbfbf;\n\n /* --- Row effects (off by default) --- */\n --eg-color-row-hover: transparent;\n --eg-color-row-stripe: transparent;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n font-family: var(--eg-font-family);\n}\n\n.eg-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: auto;\n position: relative;\n}\n\n.eg-header-area {\n display: flex;\n flex-shrink: 0;\n box-shadow: 0 2px 0 0 var(--eg-color-border-cell);\n position: relative;\n z-index: 31;\n}\n\n.eg-header-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border);\n border-bottom: 1px solid var(--eg-color-border);\n background: var(--eg-color-header-bg);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n position: absolute;\n user-select: none;\n cursor: pointer;\n}\n\n.eg-header-cell:hover { background: var(--eg-color-border-cell); }\n.eg-header-group { background: var(--eg-color-header-group-bg); }\n\n.eg-col-resize-handle {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 5px;\n cursor: col-resize;\n z-index: 5;\n}\n\n.eg-body-area {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n/* ===== FOOTER AREA (column totals) ===== */\n.eg-footer-area {\n border-top: 1px solid var(--eg-color-border);\n}\n\n.eg-frozen-col-footer,\n.eg-scroll-col-footer,\n.eg-pinned-right-footer {\n position: relative;\n}\n\n.eg-footer-cell {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n font-weight: 600;\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-footer-bg);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n\n.eg-row {\n position: relative;\n}\n\n.eg-cell {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n border-bottom: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-cell-bg);\n cursor: default;\n display: flex;\n align-items: center;\n}\n\n.eg-cell-value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n.eg-cell--has-suffix.eg-cell-select::after { display: none; }\n.eg-cell-select-trigger-wrap {\n flex: 1;\n display: flex;\n align-items: center;\n overflow: hidden;\n min-width: 0;\n}\n.eg-cell-select-caret-inline {\n flex-shrink: 0;\n color: var(--eg-color-text-muted);\n font-size: 11px;\n margin-left: 2px;\n}\n.eg-cell-suffix-wrap {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n}\n.eg-cell-active {\n outline: 2px solid var(--eg-color-accent) !important;\n outline-offset: -2px;\n z-index: 3;\n}\n\n.eg-cell-selected {\n background: var(--eg-color-cell-selected) !important;\n}\n\n.eg-cell-fill-preview {\n background: var(--eg-color-cell-fill-preview) !important;\n outline: 1px dashed var(--eg-color-accent-dark);\n outline-offset: -1px;\n}\n\n.eg-cell-copy {\n outline: 1px dashed var(--eg-color-accent);\n outline-offset: -1px;\n}\n\n.eg-cell-merged-hidden {\n display: none !important;\n}\n\n.eg-cell-invalid {\n outline: 2px solid var(--eg-color-error) !important;\n outline-offset: -2px;\n z-index: 4;\n}\n\n.eg-cell-input {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: var(--eg-color-cell-bg);\n font-size: var(--eg-font-size);\n font-family: inherit;\n padding: 0;\n}\n\n.eg-row-header-cell {\n box-sizing: border-box;\n background: var(--eg-color-header-bg);\n border-bottom: 1px solid var(--eg-color-border-cell);\n border-right: 2px solid var(--eg-color-border-strong);\n text-align: center;\n font-size: 11px;\n color: var(--eg-color-text-secondary);\n cursor: pointer;\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.eg-row-resize-handle {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 4px;\n cursor: row-resize;\n z-index: 5;\n}\n\n.eg-fill-handle {\n position: absolute;\n width: 6px;\n height: 6px;\n background: var(--eg-color-accent);\n border: 1px solid white;\n cursor: crosshair;\n z-index: 10;\n}\n\n.eg-context-menu {\n position: fixed;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n z-index: 9999;\n min-width: 160px;\n font-size: var(--eg-font-size);\n padding: 4px 0;\n}\n\n.eg-context-item {\n padding: 6px 16px;\n cursor: pointer;\n position: relative;\n}\n\n.eg-context-item:hover { background: var(--eg-color-header-bg); }\n\n.eg-context-separator {\n height: 1px;\n background: var(--eg-color-border-cell);\n margin: 4px 0;\n}\n\n.eg-context-submenu-parent::after { content: ' ▶'; float: right; }\n\n.eg-context-submenu {\n display: none;\n position: absolute;\n left: 100%;\n top: -4px;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n min-width: 160px;\n padding: 4px 0;\n z-index: 10000;\n}\n\n.eg-context-submenu-parent:hover .eg-context-submenu { display: block; }\n\n.eg-group-btn {\n position: absolute;\n width: 16px;\n height: 16px;\n line-height: 14px;\n text-align: center;\n font-size: 10px;\n cursor: pointer;\n background: var(--eg-color-header-group-bg);\n border: 1px solid var(--eg-color-group-border);\n border-radius: 2px;\n z-index: 5;\n user-select: none;\n}\n\n.eg-group-btn.collapsed { background: var(--eg-color-group-bg-collapsed); }\n\n.eg-drag-ghost {\n position: absolute;\n border: 2px dashed var(--eg-color-accent);\n pointer-events: none;\n z-index: 20;\n}\n\n/* Column drag-and-drop */\n.eg-header-cell--drag-source {\n opacity: 0.5;\n outline: 1px solid var(--eg-color-accent);\n outline-offset: -1px;\n}\n.eg-cell--drag-source {\n opacity: 0.4;\n}\n.eg-col-drag-ghost {\n position: fixed;\n padding: 3px 10px;\n background: var(--eg-color-header-bg);\n border: 1px solid var(--eg-color-accent);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n color: var(--eg-color-text);\n white-space: nowrap;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.92;\n transform: translateY(-2px);\n}\n\n.eg-resize-line {\n pointer-events: none;\n z-index: 9999;\n}\n\n/* Pin left separator shadow */\n.eg-frozen-col-body::after {\n content: '';\n position: absolute;\n top: 0;\n right: -4px;\n width: 4px;\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n\n.eg-pinned-right-body {\n position: sticky;\n right: 0;\n z-index: 10;\n background: var(--eg-color-cell-bg);\n flex-shrink: 0;\n}\n\n.eg-pinned-right-body::before {\n content: '';\n position: absolute;\n top: 0;\n left: -4px;\n bottom: 0;\n width: 4px;\n background: linear-gradient(to left, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n\n.eg-pinned-right-header {\n overflow: hidden;\n flex-shrink: 0;\n border-left: 2px solid var(--eg-color-border-strong);\n background: var(--eg-color-header-bg);\n}\n\n.eg-import-overlay {\n position: absolute;\n inset: 0;\n background: var(--eg-color-overlay-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n border-radius: var(--eg-radius);\n}\n\n.eg-import-dialog {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: 8px;\n padding: 24px 32px;\n min-width: 280px;\n box-shadow: var(--eg-shadow-dialog);\n text-align: center;\n}\n\n.eg-import-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--eg-color-text);\n margin-bottom: 16px;\n}\n\n.eg-import-bar-wrap {\n height: 8px;\n background: var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n overflow: hidden;\n margin-bottom: 10px;\n}\n\n.eg-import-bar {\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-accent), #4caf50);\n border-radius: var(--eg-radius);\n transition: width 0.15s ease;\n}\n\n.eg-import-msg {\n font-size: 12px;\n color: var(--eg-color-text-secondary);\n margin-bottom: 4px;\n}\n\n.eg-import-pct {\n font-size: var(--eg-font-size);\n font-weight: 600;\n color: var(--eg-color-accent);\n}\n.eg-export-spinner {\n width: 32px;\n height: 32px;\n margin: 12px auto 0;\n border: 3px solid var(--eg-color-border-cell);\n border-top-color: var(--eg-color-accent);\n border-radius: 50%;\n animation: eg-spin 0.8s linear infinite;\n}\n@keyframes eg-spin {\n to { transform: rotate(360deg); }\n}\n\n/* ===== READONLY CELL ===== */\n.eg-cell-readonly {\n background: var(--eg-color-cell-readonly);\n cursor: default;\n}\n.eg-cell-readonly.eg-cell-selected {\n background: var(--eg-color-cell-readonly-selected);\n}\n.eg-cell-readonly.eg-cell-active {\n outline-color: var(--eg-color-text-muted);\n}\n\n/* ===== SELECT DROPDOWN ===== */\n.eg-cell-select {\n cursor: pointer;\n}\n.eg-cell-select::after {\n content: '▾';\n position: absolute;\n right: 4px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--eg-color-text-muted);\n font-size: 11px;\n pointer-events: none;\n line-height: 1;\n}\n\n/* ===== CHECKBOX CELL ===== */\n.eg-cell-checkbox {\n justify-content: center;\n padding: 0 2px;\n}\n.eg-validation-tooltip {\n background: var(--eg-color-error-soft);\n border: 1px solid var(--eg-color-error);\n color: var(--eg-color-error-dark);\n font-size: 12px;\n padding: 4px 8px;\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-tooltip);\n white-space: nowrap;\n pointer-events: none;\n}\n\n/* ===== ROW STRIPE & HOVER ===== */\n.eg-row--even .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-stripe);\n}\n.eg-row:hover .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-hover);\n}\n\n/* ===== SIZE VARIANTS ===== */\n\n/* small */\n.eg-size-small .eg-cell {\n font-size: 12px;\n padding: 0 3px;\n}\n.eg-size-small .eg-cell-input {\n font-size: 12px;\n}\n.eg-size-small .eg-header-cell {\n font-size: 11px;\n}\n.eg-size-small .eg-footer-cell {\n font-size: 12px;\n}\n.eg-size-small .eg-row-header-cell {\n font-size: 10px;\n}\n.eg-size-small .eg-select-option {\n font-size: 12px;\n padding: 4px 10px;\n}\n.eg-size-small .eg-context-menu,\n.eg-size-small .eg-context-item {\n font-size: 12px;\n}\n.eg-size-small .eg-context-item {\n padding: 4px 14px;\n}\n\n/* large */\n.eg-size-large .eg-cell {\n font-size: 14px;\n padding: 0 6px;\n}\n.eg-size-large .eg-cell-input {\n font-size: 14px;\n}\n.eg-size-large .eg-header-cell {\n font-size: var(--eg-font-size);\n}\n.eg-size-large .eg-footer-cell {\n font-size: 14px;\n}\n.eg-size-large .eg-row-header-cell {\n font-size: 12px;\n}\n.eg-size-large .eg-select-option {\n font-size: 14px;\n padding: 8px 14px;\n}\n.eg-size-large .eg-context-menu,\n.eg-size-large .eg-context-item {\n font-size: 14px;\n}\n.eg-size-large .eg-context-item {\n padding: 8px 18px;\n}\n</style>\n\n<style>\n/* ── EgSelect / EgTreeSelect dropdown (non-scoped: injected by ExcelGrid on mount) ── */\n.eg-select-wrapper {\n position: relative;\n display: inline-block;\n min-width: 120px;\n font-size: var(--eg-font-size);\n font-family: inherit;\n}\n.eg-select-trigger {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-height: 30px;\n padding: 4px 8px;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n background: var(--eg-color-cell-bg);\n cursor: pointer;\n user-select: none;\n color: var(--eg-color-text);\n transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover { border-color: var(--eg-color-accent); }\n.eg-select-trigger--open {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled { background: var(--eg-color-cell-readonly); cursor: default; color: var(--eg-color-text-muted); }\n.eg-select-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.eg-select-placeholder { color: var(--eg-color-text-muted); }\n.eg-select-caret { flex-shrink: 0; color: var(--eg-color-text-muted); font-size: 12px; }\n.eg-select-dropdown {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n overflow-y: auto;\n max-height: 320px;\n padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n z-index: 999;\n margin-top: 2px;\n}\n.eg-select-search {\n padding: 6px 8px;\n border-bottom: 1px solid var(--eg-color-border-cell);\n position: sticky;\n top: 0;\n background: var(--eg-color-cell-bg);\n z-index: 1;\n}\n.eg-select-search-input {\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n padding: 4px 8px;\n font-size: var(--eg-font-size);\n outline: none;\n color: var(--eg-color-text);\n background: var(--eg-color-cell-bg);\n font-family: inherit;\n}\n.eg-select-search-input:focus {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-option {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 12px;\n font-size: var(--eg-font-size);\n cursor: pointer;\n white-space: normal;\n word-break: break-word;\n user-select: none;\n color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted { background: var(--eg-color-option-hover-bg); }\n.eg-select-option--active { font-weight: 600; color: var(--eg-color-accent); }\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover { background: var(--eg-color-option-active-hover-bg); }\n.eg-select-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n flex-shrink: 0;\n display: inline-block;\n margin-top: 3px;\n}\n/* Tree toggle */\n.eg-tree-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--eg-color-text-muted);\n margin-top: 1px;\n}\n.eg-tree-toggle--leaf { visibility: hidden; }\n/* EgCheckbox */\n.eg-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.eg-checkbox-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.eg-checkbox-box {\n position: relative;\n display: block;\n width: 19px;\n height: 19px;\n box-sizing: border-box;\n background-color: var(--eg-color-cell-bg);\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0 0;\n border: 1.5px solid var(--eg-color-checkbox-border);\n border-radius: var(--eg-radius);\n transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;\n}\n.eg-checkbox:hover .eg-checkbox-box { border-color: var(--eg-color-accent); }\n.eg-checkbox-input:checked + .eg-checkbox-box {\n background-color: var(--eg-color-accent);\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==\");\n background-size: 70% 70%;\n border-color: var(--eg-color-accent);\n}\n.eg-checkbox-input:focus-visible + .eg-checkbox-box { box-shadow: 0 0 0 3px var(--eg-color-accent-soft); }\n.eg-checkbox--disabled,\n.eg-checkbox--disabled .eg-checkbox-input { cursor: default; }\n.eg-checkbox-input:disabled + .eg-checkbox-box { background-color: var(--eg-color-cell-readonly); border-color: var(--eg-color-border-cell); }\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box { background-color: var(--eg-color-checkbox-disabled-checked); border-color: var(--eg-color-checkbox-disabled-checked); }\n</style>\n"]},media:void 0}),e("data-v-130dba58_1",{source:'\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* ── EgSelect / EgTreeSelect dropdown (non-scoped: injected by ExcelGrid on mount) ── */\n.eg-select-wrapper {\n position: relative;\n display: inline-block;\n min-width: 120px;\n font-size: var(--eg-font-size);\n font-family: inherit;\n}\n.eg-select-trigger {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-height: 30px;\n padding: 4px 8px;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n background: var(--eg-color-cell-bg);\n cursor: pointer;\n user-select: none;\n color: var(--eg-color-text);\n transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover { border-color: var(--eg-color-accent);\n}\n.eg-select-trigger--open {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled { background: var(--eg-color-cell-readonly); cursor: default; color: var(--eg-color-text-muted);\n}\n.eg-select-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.eg-select-placeholder { color: var(--eg-color-text-muted);\n}\n.eg-select-caret { flex-shrink: 0; color: var(--eg-color-text-muted); font-size: 12px;\n}\n.eg-select-dropdown {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n overflow-y: auto;\n max-height: 320px;\n padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n z-index: 999;\n margin-top: 2px;\n}\n.eg-select-search {\n padding: 6px 8px;\n border-bottom: 1px solid var(--eg-color-border-cell);\n position: sticky;\n top: 0;\n background: var(--eg-color-cell-bg);\n z-index: 1;\n}\n.eg-select-search-input {\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n padding: 4px 8px;\n font-size: var(--eg-font-size);\n outline: none;\n color: var(--eg-color-text);\n background: var(--eg-color-cell-bg);\n font-family: inherit;\n}\n.eg-select-search-input:focus {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-option {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 12px;\n font-size: var(--eg-font-size);\n cursor: pointer;\n white-space: normal;\n word-break: break-word;\n user-select: none;\n color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted { background: var(--eg-color-option-hover-bg);\n}\n.eg-select-option--active { font-weight: 600; color: var(--eg-color-accent);\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover { background: var(--eg-color-option-active-hover-bg);\n}\n.eg-select-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n flex-shrink: 0;\n display: inline-block;\n margin-top: 3px;\n}\n/* Tree toggle */\n.eg-tree-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--eg-color-text-muted);\n margin-top: 1px;\n}\n.eg-tree-toggle--leaf { visibility: hidden;\n}\n/* EgCheckbox */\n.eg-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.eg-checkbox-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.eg-checkbox-box {\n position: relative;\n display: block;\n width: 19px;\n height: 19px;\n box-sizing: border-box;\n background-color: var(--eg-color-cell-bg);\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0 0;\n border: 1.5px solid var(--eg-color-checkbox-border);\n border-radius: var(--eg-radius);\n transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;\n}\n.eg-checkbox:hover .eg-checkbox-box { border-color: var(--eg-color-accent);\n}\n.eg-checkbox-input:checked + .eg-checkbox-box {\n background-color: var(--eg-color-accent);\n background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");\n background-size: 70% 70%;\n border-color: var(--eg-color-accent);\n}\n.eg-checkbox-input:focus-visible + .eg-checkbox-box { box-shadow: 0 0 0 3px var(--eg-color-accent-soft);\n}\n.eg-checkbox--disabled,\n.eg-checkbox--disabled .eg-checkbox-input { cursor: default;\n}\n.eg-checkbox-input:disabled + .eg-checkbox-box { background-color: var(--eg-color-cell-readonly); border-color: var(--eg-color-border-cell);\n}\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box { background-color: var(--eg-color-checkbox-disabled-checked); border-color: var(--eg-color-checkbox-disabled-checked);\n}\n',map:{version:3,sources:["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/ExcelGrid.vue"],names:[],mappings:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0oIA,wFAAA;AACA;EACA,kBAAA;EACA,qBAAA;EACA,gBAAA;EACA,8BAAA;EACA,oBAAA;AACA;AACA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,mCAAA;EACA,eAAA;EACA,iBAAA;EACA,2BAAA;EACA,wDAAA;AACA;AACA,2BAAA,oCAAA;AAAA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;AACA,+BAAA,yCAAA,EAAA,eAAA,EAAA,iCAAA;AAAA;AACA,2BAAA,OAAA,EAAA,gBAAA,EAAA,uBAAA,EAAA,mBAAA;AAAA;AACA,yBAAA,iCAAA;AAAA;AACA,mBAAA,cAAA,EAAA,iCAAA,EAAA,eAAA;AAAA;AACA;EACA,mCAAA;EACA,6CAAA;EACA,+BAAA;EACA,qCAAA;EACA,gBAAA;EACA,iBAAA;EACA,cAAA;AACA;AACA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,eAAA;EACA,YAAA;EACA,eAAA;AACA;AACA;EACA,gBAAA;EACA,oDAAA;EACA,gBAAA;EACA,MAAA;EACA,mCAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,gBAAA;EACA,8BAAA;EACA,aAAA;EACA,2BAAA;EACA,mCAAA;EACA,oBAAA;AACA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;AACA;EACA,aAAA;EACA,uBAAA;EACA,QAAA;EACA,iBAAA;EACA,8BAAA;EACA,eAAA;EACA,mBAAA;EACA,sBAAA;EACA,iBAAA;EACA,2BAAA;AACA;AACA;iCACA,2CAAA;AAAA;AACA,4BAAA,gBAAA,EAAA,6BAAA;AAAA;AACA;kCACA,kDAAA;AAAA;AACA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAAA;EACA,eAAA;AACA;AACA,gBAAA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;EACA,iCAAA;EACA,eAAA;AACA;AACA,wBAAA,kBAAA;AAAA;AACA,eAAA;AACA;EACA,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,yCAAA;EACA,4BAAA;EACA,2BAAA;EACA,oBAAA;EACA,mDAAA;EACA,+BAAA;EACA,yFAAA;AACA;AACA,sCAAA,oCAAA;AAAA;AACA;EACA,wCAAA;EACA,+SAAA;EACA,wBAAA;EACA,oCAAA;AACA;AACA,sDAAA,iDAAA;AAAA;AACA;4CACA,eAAA;AAAA;AACA,iDAAA,+CAAA,EAAA,yCAAA;AAAA;AACA,yDAAA,2DAAA,EAAA,uDAAA;AAAA",file:"ExcelGrid.vue",sourcesContent:["<template>\n <div\n class=\"eg-wrapper\"\n :class=\"'eg-size-' + size\"\n :style=\"wrapperStyle\"\n tabindex=\"0\"\n @keydown=\"onKeyDown\"\n @keypress=\"onKeyPress\"\n ref=\"wrapper\"\n >\n \x3c!-- Context menu --\x3e\n <div\n v-if=\"contextMenu.visible\"\n class=\"eg-context-menu\"\n :style=\"{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }\"\n @click.stop\n >\n <div class=\"eg-context-item\" @click=\"ctxCopy\">{{ t.copy }}</div>\n <div class=\"eg-context-item\" @click=\"ctxCut\">{{ t.cut }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPaste\">{{ t.paste }}</div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item eg-context-submenu-parent\">\n {{ t.pasteSpecial }}\n <div class=\"eg-context-submenu\">\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('all')\">{{ t.pasteAll }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('values')\">{{ t.pasteValues }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('formats')\">{{ t.pasteFormats }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('all', true)\">{{ t.transpose }}</div>\n </div>\n </div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxMerge\">{{ t.mergeCells }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnmerge\">{{ t.unmergeCells }}</div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxHideRow\">{{ t.hideRows }}</div>\n <div class=\"eg-context-item\" @click=\"ctxHideColumn\">{{ t.hideColumns }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnhideRows\">{{ t.unhideRows }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnhideColumns\">{{ t.unhideColumns }}</div>\n <template v-if=\"contextMenu.row < 0 && contextMenu.col >= 0\">\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxPinLeft\">{{ t.pinLeft }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPinRight\">{{ t.pinRight }}</div>\n <div class=\"eg-context-item\" v-if=\"isColPinned(contextMenu.col)\" @click=\"ctxUnpin\">{{ t.unpin }}</div>\n </template>\n </div>\n\n \x3c!-- Scroll container --\x3e\n <div class=\"eg-container\" ref=\"container\" @scroll=\"onScroll\" @click=\"hideContextMenu\">\n\n \x3c!-- ===== HEADER AREA ===== --\x3e\n <div class=\"eg-header-area\" :style=\"headerAreaStyle\">\n\n \x3c!-- Corner cell --\x3e\n <div\n class=\"eg-corner\"\n :style=\"cornerStyle\"\n @click=\"selectAll\"\n ></div>\n\n \x3c!-- Row group outline gutter (left) --\x3e\n <div v-if=\"rowGroups.length\" class=\"eg-row-outline-gutter\" :style=\"rowOutlineGutterStyle\"></div>\n\n \x3c!-- Frozen columns header --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-header\" :style=\"frozenColHeaderStyle\">\n <div :style=\"{ position: 'relative', height: (headerRowHeight * headerDepth) + 'px' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellVisible(cell, rowIdx, true)\">\n <div\n :key=\"'fh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"[getHeaderCellStyle(cell, rowIdx, true), getHeaderDragTransform(cell)]\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Scrollable columns header --\x3e\n <div class=\"eg-scroll-col-header\" ref=\"scrollColHeader\" :style=\"scrollColHeaderStyle\">\n <div class=\"eg-scroll-col-header-inner\" :style=\"{ width: scrollContentWidth + 'px', height: (headerRowHeight * headerDepth) + 'px', position: 'relative' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellVisible(cell, rowIdx, false)\">\n <div\n :key=\"'sh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"[getHeaderCellStyle(cell, rowIdx, false), getHeaderDragTransform(cell)]\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Pinned Right columns header --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-header\" :style=\"pinnedRightHeaderStyle\">\n <div :style=\"{ position: 'relative', height: (headerRowHeight * headerDepth) + 'px' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellInZone(cell, rowIdx, 'right')\">\n <div\n :key=\"'prh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"[getHeaderCellStyleForZone(cell, rowIdx, 'right'), getHeaderDragTransform(cell)]\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- ===== BODY AREA ===== --\x3e\n <div class=\"eg-body-area\" :style=\"bodyAreaStyle\">\n\n \x3c!-- Row number header column --\x3e\n <div class=\"eg-row-header-col\" :style=\"rowHeaderColStyle\">\n \x3c!-- Scrollable row headers --\x3e\n <div class=\"eg-scroll-row-headers\" :style=\"scrollRowHeadersStyle\" ref=\"scrollRowHeaders\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div\n v-if=\"!isRowHidden(ri)\"\n :key=\"'srh-' + ri\"\n class=\"eg-row-header-cell\"\n :style=\"getRowHeaderStyle(ri)\"\n @mousedown=\"onRowHeaderMouseDown($event, ri)\"\n @contextmenu.prevent=\"onRowContextMenu($event, ri)\"\n >\n {{ ri + 1 }}\n <div class=\"eg-row-resize-handle\" @mousedown.stop=\"startRowResize($event, ri)\"></div>\n </div>\n </template>\n </div>\n </div>\n </div>\n </div>\n\n \x3c!-- Row group outline gutter (left side of rows) --\x3e\n <div v-if=\"rowGroups.length\" class=\"eg-row-outline-col\" :style=\"rowOutlineColStyle\">\n <template v-for=\"group in rowGroups\">\n <div\n :key=\"'rg-' + group.startIndex + '-' + group.endIndex\"\n class=\"eg-group-btn\"\n :class=\"{ collapsed: isGroupCollapsed(group) }\"\n :style=\"getRowGroupBtnStyle(group)\"\n @click=\"toggleGroup(group)\"\n >{{ isGroupCollapsed(group) ? '+' : '−' }}</div>\n </template>\n </div>\n\n \x3c!-- Main scroll body --\x3e\n <div class=\"eg-scroll-body\" ref=\"scrollBody\" :style=\"scrollBodyStyle\" @scroll=\"onBodyScroll\">\n <div class=\"eg-scroll-body-inner\" :style=\"{ width: scrollContentWidth + 'px', height: totalVirtualHeight + 'px', position: 'relative' }\">\n\n \x3c!-- Pinned left column body --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-body\" :style=\"frozenColBodyStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div v-if=\"!isRowHidden(ri)\" :key=\"'fc-row-' + ri\" class=\"eg-row\" :class=\"{ 'eg-row--even': ri % 2 === 0 }\" :style=\"getRowStyle(ri)\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnPinnedLeft(ci) && !isColHidden(ci)\">\n <div\n :key=\"'fc-cell-' + ri + '-' + ci\"\n class=\"eg-cell\"\n :data-fi=\"ci\"\n :class=\"getCellClasses(ri, ci)\"\n :style=\"[getCellStyle(ri, ci), getCellDragTransform(ci)]\"\n @mousedown=\"onCellMouseDown($event, ri, ci)\"\n @mouseover=\"onCellMouseOver($event, ri, ci)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, ci)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, ci)\"\n >\n <div v-if=\"isMergedAway(ri, ci)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, ci)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input v-else ref=\"editInput\" class=\"eg-cell-input\" v-model=\"editValue\" @blur=\"commitEdit\" @keydown.stop=\"onEditKeyDown\" />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, ci)\"\n :disabled=\"!isCellEditable(ri, ci)\"\n @change=\"(v) => setCheckboxValue(ri, ci, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(ci, getCellValue(ri, ci)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Main data cells --\x3e\n <div class=\"eg-main-cells\" :style=\"mainCellsStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative', width: scrollableContentWidth + 'px' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div\n v-if=\"!isRowHidden(ri)\"\n :key=\"'row-' + ri\"\n class=\"eg-row\"\n :class=\"{ 'eg-row--even': ri % 2 === 0 }\"\n :style=\"getRowStyle(ri)\"\n :data-row=\"ri\"\n >\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnScrollable(ci) && !isColHidden(ci)\">\n <div\n :key=\"'cell-' + ri + '-' + ci\"\n class=\"eg-cell\"\n :data-fi=\"ci\"\n :class=\"getCellClasses(ri, ci)\"\n :style=\"[getCellStyle(ri, ci), getCellDragTransform(ci)]\"\n @mousedown=\"onCellMouseDown($event, ri, ci)\"\n @mouseover=\"onCellMouseOver($event, ri, ci)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, ci)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, ci)\"\n >\n <div v-if=\"isMergedAway(ri, ci)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, ci)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input\n v-else\n ref=\"editInput\"\n class=\"eg-cell-input\"\n v-model=\"editValue\"\n @blur=\"commitEdit\"\n @keydown.stop=\"onEditKeyDown\"\n />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, ci)\"\n :disabled=\"!isCellEditable(ri, ci)\"\n @change=\"(v) => setCheckboxValue(ri, ci, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(ci, getCellValue(ri, ci)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Pinned Right column body --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-body\" :style=\"pinnedRightBodyStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div v-if=\"!isRowHidden(ri)\" :key=\"'pr-row-' + ri\" class=\"eg-row\" :class=\"{ 'eg-row--even': ri % 2 === 0 }\" :style=\"getRowStyle(ri)\">\n <template v-for=\"col in pinnedRightCols\">\n <div\n :key=\"'pr-cell-' + ri + '-' + col._flatIndex\"\n class=\"eg-cell\"\n :data-fi=\"col._flatIndex\"\n :class=\"getCellClasses(ri, col._flatIndex)\"\n :style=\"[getCellStyle(ri, col._flatIndex), getCellDragTransform(col._flatIndex)]\"\n @mousedown=\"onCellMouseDown($event, ri, col._flatIndex)\"\n @mouseover=\"onCellMouseOver($event, ri, col._flatIndex)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, col._flatIndex)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, col._flatIndex)\"\n >\n <div v-if=\"isMergedAway(ri, col._flatIndex)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, col._flatIndex)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input v-else ref=\"editInput\" class=\"eg-cell-input\" v-model=\"editValue\" @blur=\"commitEdit\" @keydown.stop=\"onEditKeyDown\" />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, col._flatIndex)\"\n :disabled=\"!isCellEditable(ri, col._flatIndex)\"\n @change=\"(v) => setCheckboxValue(ri, col._flatIndex, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Fill handle (shown on primary range) --\x3e\n <div\n v-if=\"fillHandleVisible\"\n class=\"eg-fill-handle\"\n :style=\"fillHandleStyle\"\n @mousedown.stop=\"startFillDrag\"\n ></div>\n\n \x3c!-- Drag move ghost border --\x3e\n <div\n v-if=\"dragMove.active\"\n class=\"eg-drag-ghost\"\n :style=\"dragGhostStyle\"\n ></div>\n </div>\n </div>\n\n \x3c!-- Column group outline row (top, above body) --\x3e\n <div v-if=\"colGroups.length\" class=\"eg-col-outline-row\" :style=\"colOutlineRowStyle\">\n <template v-for=\"group in colGroups\">\n <div\n :key=\"'cg-' + group.startIndex + '-' + group.endIndex\"\n class=\"eg-group-btn\"\n :class=\"{ collapsed: isGroupCollapsed(group) }\"\n :style=\"getColGroupBtnStyle(group)\"\n @click=\"toggleGroup(group)\"\n >{{ isGroupCollapsed(group) ? '+' : '−' }}</div>\n </template>\n </div>\n\n </div>\x3c!-- end body-area --\x3e\n\n \x3c!-- ===== FOOTER AREA (column totals) ===== --\x3e\n <div v-if=\"hasFooter\" class=\"eg-footer-area\" :style=\"footerAreaStyle\">\n\n \x3c!-- \"Jami\" label cell (mirrors corner cell) --\x3e\n <div class=\"eg-footer-label\" :style=\"footerLabelStyle\">{{ t.total }}</div>\n\n \x3c!-- Frozen columns footer --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-footer\" :style=\"frozenColFooterStyle\">\n <div :style=\"{ position: 'relative', height: footerRowHeight + 'px' }\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnPinnedLeft(ci) && !isColHidden(ci)\">\n <div :key=\"'ff-' + ci\" class=\"eg-footer-cell\" :style=\"getFooterCellStyle(ci)\">\n {{ getColumnTotalDisplay(ci) }}\n </div>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Scrollable footer (horizontally synced with body via scrollFooter ref) --\x3e\n <div class=\"eg-scroll-col-footer\" ref=\"scrollFooter\" :style=\"scrollColHeaderStyle\">\n <div class=\"eg-scroll-col-footer-inner\" :style=\"{ width: scrollContentWidth + 'px', height: footerRowHeight + 'px', position: 'relative' }\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnScrollable(ci) && !isColHidden(ci)\">\n <div :key=\"'sf-' + ci\" class=\"eg-footer-cell\" :style=\"getFooterCellStyle(ci)\">\n {{ getColumnTotalDisplay(ci) }}\n </div>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Pinned Right columns footer --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-footer\" :style=\"pinnedRightFooterStyle\">\n <div :style=\"{ position: 'relative', height: footerRowHeight + 'px' }\">\n <div\n v-for=\"col in pinnedRightCols\"\n :key=\"'prf-' + col._flatIndex\"\n class=\"eg-footer-cell\"\n :style=\"getFooterCellStyle(col._flatIndex)\"\n >{{ getColumnTotalDisplay(col._flatIndex) }}</div>\n </div>\n </div>\n </div>\x3c!-- end footer-area --\x3e\n\n \x3c!-- Resize indicator line --\x3e\n <div v-if=\"resizing.active\" class=\"eg-resize-line\" :style=\"resizeLineStyle\"></div>\n </div>\x3c!-- end container --\x3e\n\n \x3c!-- Import progress overlay --\x3e\n <div v-if=\"importState.active\" class=\"eg-import-overlay\">\n <div class=\"eg-import-dialog\">\n <div class=\"eg-import-title\">Fayl import qilinmoqda</div>\n <div class=\"eg-import-bar-wrap\">\n <div class=\"eg-import-bar\" :style=\"{ width: importState.percent + '%' }\"></div>\n </div>\n <div class=\"eg-import-msg\">{{ importState.message }}</div>\n <div class=\"eg-import-pct\">{{ importState.percent }}%</div>\n </div>\n </div>\n\n \x3c!-- Export progress overlay --\x3e\n <div v-if=\"exportState.active\" class=\"eg-import-overlay\">\n <div class=\"eg-import-dialog\">\n <div class=\"eg-import-title\">Fayl export qilinmoqda...</div>\n <div class=\"eg-export-spinner\"></div>\n </div>\n </div>\n\n \x3c!-- Select dropdown overlay (flat select) --\x3e\n <eg-select\n v-if=\"selectDropdown && !selectDropdown.tree\"\n ref=\"selectDropdownComp\"\n :value=\"selectDropdown.currentValue\"\n :options=\"selectDropdown.rawOptions\"\n :enable-search=\"selectDropdown.enableSearch\"\n :trigger-rect=\"selectDropdown.rect\"\n :dropdown-only=\"true\"\n @select=\"onComponentSelect\"\n @close=\"closeSelectDropdown\"\n />\n \x3c!-- Tree select dropdown overlay --\x3e\n <eg-tree-select\n v-if=\"selectDropdown && selectDropdown.tree\"\n ref=\"selectDropdownComp\"\n :value=\"selectDropdown.currentValue\"\n :options=\"selectDropdown.rawOptions\"\n :value-key=\"selectDropdown.keys.valueKey\"\n :label-key=\"selectDropdown.keys.labelKey\"\n :children-key=\"selectDropdown.keys.childrenKey\"\n :enable-search=\"selectDropdown.enableSearch\"\n :trigger-rect=\"selectDropdown.rect\"\n :dropdown-only=\"true\"\n @select=\"onComponentSelect\"\n @close=\"closeSelectDropdown\"\n />\n\n \x3c!-- Validation error tooltip (cellValidator) --\x3e\n <div\n v-if=\"invalidCell && invalidCell.rect\"\n class=\"eg-validation-tooltip\"\n :style=\"invalidTooltipStyle\"\n >{{ invalidCell.message }}</div>\n\n \x3c!-- Column drag ghost (follows mouse) --\x3e\n <div\n v-if=\"colDrag.active\"\n class=\"eg-col-drag-ghost\"\n :style=\"{ left: (colDrag.currentX + 16) + 'px', top: (colDrag.currentY - 14) + 'px' }\"\n >{{ colDrag.ghostLabel }}</div>\n\n </div>\n</template>\n\n<script>\nimport {\n normalizeRange, isCellInRange, isCellInAnyRange,\n buildRange, singleCellRange, getPrimaryRange\n} from '../utils/selection.js'\nimport { flattenColumns, buildHeaderRows, columnTreeDepth, moveColumnNodeInTree } from '../utils/headerTree.js'\nimport { calcVisibleRows, buildCumulativeHeights, findVisibleRange, getRowTop, getRowHeight } from '../utils/virtualScroll.js'\nimport { generateFillValues } from '../utils/fillHandle.js'\nimport {\n matrixToTSV, tsvToMatrix, extractMatrix, transposeMatrix, applyMatrix, tileMatrix\n} from '../utils/clipboard.js'\nimport {\n mergeHasConflict, findMergeAtCell, isMergeAnchor, addMerge,\n removeMergeAt, resolveMergeAnchor\n} from '../utils/merge.js'\nimport {\n addGroup, removeGroup, toggleGroupCollapse, isGroupCollapsed as _isGroupCollapsed,\n getCollapsedRowIndices, getCollapsedColIndices\n} from '../utils/outline.js'\nimport { exportToExcel as _exportToExcel } from '../utils/excelExport.js'\nimport { importFromFile as _importFromFile } from '../utils/excelImport.js'\nimport { createExcelImportWorker, createExcelExportWorker } from '../utils/workerFactory'\nimport { getMessages } from '../utils/i18n.js'\nimport EgCheckbox from './EgCheckbox.vue'\nimport EgSelect from './EgSelect.vue'\nimport EgTreeSelect from './EgTreeSelect.vue'\n\nconst SIZE_CONFIG = {\n small: { row: 22, header: 24, footer: 24 },\n middle: { row: 28, header: 28, footer: 28 },\n large: { row: 36, header: 36, footer: 36 }\n}\nconst ROW_HEADER_WIDTH = 50\nconst DEFAULT_COL_WIDTH = 100\nconst OUTLINE_GUTTER = 20\n\nexport default {\n name: 'ExcelGrid',\n\n components: { EgCheckbox, EgSelect, EgTreeSelect },\n\n // v-model → :data + @input\n model: { prop: 'data', event: 'input' },\n\n props: {\n /** Array of row objects keyed by columns[].key */\n data: { type: Array, default: () => [] },\n\n /** Column definitions (may be nested via children[]) */\n columns: { type: Array, default: () => [] },\n\n /** Indices of hidden leaf columns */\n hiddenColumns: { type: Array, default: () => [] },\n\n /** Indices of hidden rows */\n hiddenRows: { type: Array, default: () => [] },\n\n /** Initial merge descriptors [{ startRow, startCol, endRow, endCol }] */\n merges: { type: Array, default: () => [] },\n\n /** Collapsed group descriptors [{ type, startIndex, endIndex }] */\n collapsedGroups: { type: Array, default: () => [] },\n\n /** Height of the grid container in px */\n height: { type: Number, default: 400 },\n\n /** Width of the grid container (px or 'auto') */\n width: { type: [Number, String], default: '100%' },\n\n /**\n * Called before drag-drop: (sourceRange, targetRange) => bool\n * Return false to cancel the drop.\n */\n beforeDrop: { type: Function, default: null },\n\n /**\n * UI locale for the context menu.\n * Supported: 'en' | 'ru' | 'uz' | 'uz-Cyrl'\n */\n locale: { type: String, default: 'en' },\n\n /**\n * Pinned columns map: { [colKey]: 'left' | 'right' }\n * Pinned-left columns render as a fixed zone on the left.\n * Pinned-right columns render as a fixed zone on the right.\n * Emit 'update:pinnedColumns' to support .sync modifier.\n */\n pinnedColumns: { type: Object, default: () => ({}) },\n\n /**\n * Dynamic cell editability: (row, rowIndex, col, colIndex) => boolean\n * Overrides column-level editable when provided.\n * row = plain data object, col = column definition.\n */\n cellEditable: { type: Function, default: null },\n\n /**\n * Cell value validation: (value, row, rowIndex, col, colIndex) => boolean\n * Return false to reject the write — the cell keeps its old value and\n * an error tooltip is shown anchored to that cell.\n */\n cellValidator: { type: Function, default: null },\n\n /**\n * Error tooltip text for a rejected value.\n * Function: (value, row, rowIndex, col, colIndex) => string\n * String: same message for every rejected cell.\n * Default: locale's \"invalidValue\" message.\n */\n cellValidationMessage: { type: [Function, String], default: null },\n\n /**\n * Bulk-write strictness (paste / fill handle / Delete).\n * false (default): invalid cells in the affected range are skipped,\n * the rest of the operation still applies.\n * true: if ANY cell in the affected range fails validation, the whole\n * bulk operation is rejected — nothing is written.\n */\n strictBulkValidation: { type: Boolean, default: false },\n\n /** Visual size of the grid. Affects row/header height and font sizes. */\n size: { type: String, default: 'middle' },\n\n /** Auto-fit all column widths to content (same as double-clicking each resize handle). Re-applies on data/columns change. */\n autoWidth: { type: Boolean, default: false },\n\n /**\n * Allow columns to be reordered by dragging their headers.\n * On drop, emits 'update:columns' (compatible with .sync) and 'column-reorder'.\n */\n columnDraggable: { type: Boolean, default: true }\n },\n\n data() {\n return {\n // Selection\n activeCell: { row: 0, col: 0 },\n selectionRanges: [], // [{ startRow, startCol, endRow, endCol }]\n isMouseDown: false,\n mouseDownRange: null,\n isCtrlDrag: false,\n\n // Edit\n editingCell: null, // { row, col }\n editValue: '',\n editOriginalValue: '',\n\n // Scroll\n scrollTop: 0,\n scrollLeft: 0,\n headerViewportWidth: null,\n\n // Virtual scroll\n virtualStartIndex: 0,\n virtualEndIndex: 0,\n virtualOffsetTop: 0,\n totalVirtualHeight: 0,\n\n // Column widths (flat index → px)\n colWidths: {},\n\n // Row heights (row index → px)\n rowHeights: {},\n\n // Import/export progress\n importState: { active: false, percent: 0, message: '' },\n exportState: { active: false },\n\n resizing: {\n active: false,\n type: null, // 'col' | 'row'\n index: -1,\n startX: 0,\n startY: 0,\n startSize: 0,\n currentPos: 0\n },\n\n // Fill handle\n fillDrag: {\n active: false,\n sourceRange: null,\n currentRow: -1,\n currentCol: -1\n },\n\n // Drag-move\n dragMove: {\n active: false,\n sourceRange: null,\n startX: 0,\n startY: 0,\n targetRow: -1,\n targetCol: -1,\n copyMode: false\n },\n\n // Clipboard (internal)\n clipboardMatrix: null,\n clipboardRange: null,\n clipboardMode: null, // 'copy' | 'cut'\n\n // Context menu\n contextMenu: { visible: false, x: 0, y: 0, row: -1, col: -1 },\n\n // Select dropdown\n selectDropdown: null, // { row, col, options, currentValue, rect }\n\n // Cell value validation (cellValidator)\n invalidCell: null, // { row, col, message, rect }\n\n // Merges (controlled via prop + update:merges)\n internalMerges: [],\n\n // Groups\n internalGroups: [], // [{ type, startIndex, endIndex }]\n internalCollapsedGroups: [],\n\n // Header\n headerDepth: 1,\n headerRows: [],\n\n // Leaf columns cache\n leafCols: [],\n\n // Footer column totals (flat col index → number | null)\n columnTotals: {},\n\n // Column drag-and-drop state\n colDrag: {\n pending: false, // mousedown received, waiting for movement threshold\n active: false, // drag in progress\n sourceFirstLeaf: -1, // first leaf flat-index of the dragged node\n sourceLeafCount: 1, // number of leaves in the dragged node (1=leaf, N=group)\n dropIndex: -1, // insert-before flat index (0..N)\n startX: 0,\n startY: 0,\n currentX: 0,\n currentY: 0,\n ghostLabel: ''\n },\n }\n },\n\n computed: {\n t() { return getMessages(this.locale) },\n\n pinnedLeftSet() {\n const s = new Set()\n this.leafCols.forEach(col => { if (this.pinnedColumns[col.key] === 'left') s.add(col._flatIndex) })\n return s\n },\n\n pinnedRightSet() {\n const s = new Set()\n this.leafCols.forEach(col => { if (this.pinnedColumns[col.key] === 'right') s.add(col._flatIndex) })\n return s\n },\n\n pinnedLeftCols() { return this.leafCols.filter(col => this.pinnedLeftSet.has(col._flatIndex)) },\n pinnedRightCols() { return this.leafCols.filter(col => this.pinnedRightSet.has(col._flatIndex)) },\n\n hasPinnedLeft() { return this.pinnedLeftSet.size > 0 },\n hasPinnedRight() { return this.pinnedRightSet.size > 0 },\n\n hasFooter() { return this.leafCols.some(col => col.showTotal) },\n\n pinnedLeftWidth() {\n let w = 0\n for (const col of this.pinnedLeftCols) {\n if (!this.isColHidden(col._flatIndex)) w += this.getColW(col._flatIndex)\n }\n return w\n },\n\n pinnedRightWidth() {\n let w = 0\n for (const col of this.pinnedRightCols) {\n if (!this.isColHidden(col._flatIndex)) w += this.getColW(col._flatIndex)\n }\n return w\n },\n\n totalRows() { return this.data.length },\n\n _sizeConf() { return SIZE_CONFIG[this.size] || SIZE_CONFIG.middle },\n _rowH() { return this._sizeConf.row },\n _headerRowH() { return this._sizeConf.header },\n _footerRowH() { return this._sizeConf.footer },\n\n headerRowHeight() { return this._headerRowH },\n footerRowHeight() { return this._footerRowH },\n\n // Pre-built cumulative height array — O(n) once, then cached by Vue.\n // findVisibleRange() uses binary search against this cached array → O(log n) per scroll.\n // Invalidated only when row count, custom heights, or hidden rows change.\n cumulativeHeights() {\n return buildCumulativeHeights(this.totalRows, this._rowH, this.rowHeights, this.hiddenRowSet)\n },\n\n hiddenColSet() { return new Set(this.hiddenColumns) },\n\n hiddenRowSet() {\n const s = new Set(this.hiddenRows)\n // Also add rows hidden by collapsed row groups\n const collapsed = getCollapsedRowIndices(this.internalGroups, this.internalCollapsedGroups)\n collapsed.forEach(i => s.add(i))\n return s\n },\n\n hiddenColFromGroupSet() {\n return getCollapsedColIndices(this.internalGroups, this.internalCollapsedGroups)\n },\n\n effectiveHiddenColSet() {\n const s = new Set(this.hiddenColSet)\n this.hiddenColFromGroupSet.forEach(i => s.add(i))\n return s\n },\n\n rowGroups() { return this.internalGroups.filter(g => g.type === 'row') },\n colGroups() { return this.internalGroups.filter(g => g.type === 'column') },\n\n visibleRowRange() {\n const rows = []\n for (let i = this.virtualStartIndex; i <= this.virtualEndIndex; i++) rows.push(i)\n return rows\n },\n\n primaryRange() {\n return getPrimaryRange(this.selectionRanges, this.activeCell)\n },\n\n fillHandleVisible() {\n return this.primaryRange && !this.editingCell\n },\n\n fillHandleStyle() {\n if (!this.primaryRange) return {}\n const r = normalizeRange(this.primaryRange)\n // O(1) lookup via cumulativeHeights instead of O(endRow) getRowTop loop\n const bottom = this.cumulativeHeights[r.endRow + 1] || 0\n const right = this.getColLeft(r.endCol + 1)\n return {\n position: 'absolute',\n width: '6px',\n height: '6px',\n background: 'var(--eg-color-accent)',\n border: '1px solid white',\n bottom: (this.totalVirtualHeight - bottom + 1) + 'px',\n right: (this.scrollContentWidth - right + 1) + 'px',\n cursor: 'crosshair',\n zIndex: 10\n }\n },\n\n\n invalidTooltipStyle() {\n if (!this.invalidCell || !this.invalidCell.rect) return {}\n const { rect } = this.invalidCell\n return {\n position: 'fixed',\n top: (rect.bottom + 4) + 'px',\n left: rect.left + 'px',\n zIndex: 9999\n }\n },\n\n dragGhostStyle() {\n if (!this.dragMove.active || this.dragMove.targetRow < 0) return {}\n const r = normalizeRange(this.dragMove.sourceRange)\n const rows = r.endRow - r.startRow\n const cols = r.endCol - r.startCol\n // O(1) lookup via cumulativeHeights instead of O(targetRow) getRowTop loop\n const top = this.cumulativeHeights[this.dragMove.targetRow] || 0\n const left = this.getColLeft(this.dragMove.targetCol)\n const width = this.getRangeWidth(this.dragMove.targetCol, this.dragMove.targetCol + cols)\n const height = this.getRangeHeight(this.dragMove.targetRow, this.dragMove.targetRow + rows)\n return {\n position: 'absolute',\n top: top + 'px',\n left: left + 'px',\n width: width + 'px',\n height: height + 'px',\n border: '2px dashed #1a73e8',\n pointerEvents: 'none',\n zIndex: 20\n }\n },\n\n wrapperStyle() {\n return {\n width: typeof this.width === 'number' ? this.width + 'px' : this.width,\n height: this.height + 'px',\n position: 'relative',\n outline: 'none',\n userSelect: 'none'\n }\n },\n\n headerAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n position: 'sticky',\n top: 0,\n zIndex: 30,\n background: 'var(--eg-color-header-bg)'\n }\n },\n\n cornerStyle() {\n const outlineW = this.rowGroups.length ? OUTLINE_GUTTER : 0\n return {\n width: (ROW_HEADER_WIDTH + outlineW) + 'px',\n minWidth: (ROW_HEADER_WIDTH + outlineW) + 'px',\n height: (this._headerRowH * this.headerDepth) + 'px',\n background: 'var(--eg-color-header-bg)',\n borderRight: '1px solid var(--eg-color-border)',\n borderBottom: '1px solid var(--eg-color-border)',\n boxSizing: 'border-box',\n flexShrink: 0\n }\n },\n\n rowOutlineGutterStyle() {\n return { width: OUTLINE_GUTTER + 'px', flexShrink: 0 }\n },\n\n frozenColHeaderStyle() {\n const w = this.getFrozenWidth()\n return {\n width: w + 'px',\n minWidth: w + 'px',\n overflow: 'hidden',\n flexShrink: 0\n }\n },\n\n scrollColHeaderStyle() {\n // Once measured, lock the header to the body's exact clientWidth (flex: 0 0 <px>)\n // instead of growing independently via flex:1 — this guarantees identical\n // scrollWidth-clientWidth (max scrollLeft) on both, so syncing scrollLeft never clamps\n // one before the other. (padding-right can't do this: clientWidth always includes\n // padding, so padding never actually shrinks it.)\n if (this.headerViewportWidth != null) {\n return { flex: '0 0 ' + this.headerViewportWidth + 'px', overflow: 'hidden' }\n }\n return { flex: 1, overflow: 'hidden' }\n },\n\n bodyAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n flex: 1,\n position: 'relative'\n }\n },\n\n rowHeaderColStyle() {\n return {\n width: ROW_HEADER_WIDTH + 'px',\n minWidth: ROW_HEADER_WIDTH + 'px',\n flexShrink: 0,\n display: 'flex',\n flexDirection: 'column',\n position: 'sticky',\n left: 0,\n zIndex: 20,\n background: 'var(--eg-color-header-bg)'\n }\n },\n\n rowOutlineColStyle() {\n return {\n width: OUTLINE_GUTTER + 'px',\n minWidth: OUTLINE_GUTTER + 'px',\n flexShrink: 0,\n position: 'relative',\n background: 'var(--eg-color-cell-bg)'\n }\n },\n\n scrollBodyStyle() {\n return {\n flex: 1,\n overflow: 'auto',\n position: 'relative',\n overflowAnchor: 'none' /* prevent Chrome scroll anchoring from fighting virtual scroll translateY */\n }\n },\n\n frozenColBodyStyle() {\n const w = this.getFrozenWidth()\n return {\n position: 'sticky',\n left: 0,\n width: w + 'px',\n zIndex: 10,\n background: 'white',\n overflow: 'hidden'\n }\n },\n\n mainCellsStyle() {\n const left = this.getFrozenWidth()\n return {\n position: 'absolute',\n left: left + 'px',\n top: 0,\n bottom: 0\n }\n },\n\n scrollContentWidth() {\n let w = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColHidden(i) && !this.pinnedRightSet.has(i)) w += this.getColW(i)\n }\n // Extra right padding so pinned-right zone doesn't cover the last scrollable column\n if (this.hasPinnedRight) w += this.pinnedRightWidth\n return w\n },\n\n scrollableContentWidth() {\n let w = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColHidden(i) && this.isColumnScrollable(i)) w += this.getColW(i)\n }\n return w\n },\n\n pinnedRightBodyStyle() {\n return {\n position: 'sticky',\n right: 0,\n width: this.pinnedRightWidth + 'px',\n zIndex: 10,\n background: 'white',\n flexShrink: 0\n }\n },\n\n pinnedRightHeaderStyle() {\n return {\n width: this.pinnedRightWidth + 'px',\n minWidth: this.pinnedRightWidth + 'px',\n overflow: 'hidden',\n flexShrink: 0,\n borderLeft: '1px solid var(--eg-color-border)'\n }\n },\n\n scrollRowHeadersStyle() {\n return { flex: 1, overflow: 'hidden', position: 'relative', overflowAnchor: 'none' }\n },\n\n footerAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n position: 'sticky',\n bottom: 0,\n zIndex: 30,\n background: 'var(--eg-color-footer-bg)',\n boxShadow: '0 -2px 0 0 var(--eg-color-border-strong)'\n }\n },\n\n footerLabelStyle() {\n const outlineW = this.rowGroups.length ? OUTLINE_GUTTER : 0\n return {\n width: (ROW_HEADER_WIDTH + outlineW) + 'px',\n minWidth: (ROW_HEADER_WIDTH + outlineW) + 'px',\n height: this._footerRowH + 'px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'var(--eg-color-footer-bg)',\n borderRight: '1px solid var(--eg-color-border)',\n borderTop: '1px solid var(--eg-color-border)',\n boxSizing: 'border-box',\n flexShrink: 0,\n fontSize: 'var(--eg-font-size-header)',\n fontWeight: 600\n }\n },\n\n frozenColFooterStyle() {\n const w = this.getFrozenWidth()\n return {\n width: w + 'px',\n minWidth: w + 'px',\n height: this._footerRowH + 'px',\n overflow: 'hidden',\n flexShrink: 0\n }\n },\n\n pinnedRightFooterStyle() {\n return {\n width: this.pinnedRightWidth + 'px',\n minWidth: this.pinnedRightWidth + 'px',\n height: this._footerRowH + 'px',\n overflow: 'hidden',\n flexShrink: 0,\n borderLeft: '1px solid var(--eg-color-border)'\n }\n },\n\n colOutlineRowStyle() {\n return {\n position: 'absolute',\n top: -OUTLINE_GUTTER + 'px',\n left: 0,\n right: 0,\n height: OUTLINE_GUTTER + 'px'\n }\n },\n\n resizeLineStyle() {\n if (!this.resizing.active) return {}\n if (this.resizing.type === 'col') {\n return {\n position: 'fixed',\n top: 0,\n left: this.resizing.currentPos + 'px',\n width: '2px',\n height: '100%',\n background: 'var(--eg-color-accent)',\n pointerEvents: 'none',\n zIndex: 9999\n }\n } else {\n return {\n position: 'fixed',\n left: 0,\n top: this.resizing.currentPos + 'px',\n height: '2px',\n width: '100%',\n background: 'var(--eg-color-accent)',\n pointerEvents: 'none',\n zIndex: 9999\n }\n }\n }\n },\n\n watch: {\n size() {\n this.rowHeights = {}\n this.$nextTick(() => this.updateVirtualScroll())\n },\n\n autoWidth(v) {\n if (v) this._applyAutoWidth()\n },\n\n columns: {\n immediate: true,\n handler(cols) {\n this.leafCols = flattenColumns(cols)\n this.headerDepth = columnTreeDepth(cols)\n this.headerRows = buildHeaderRows(cols, this.headerDepth)\n // Init colWidths\n this.leafCols.forEach(col => {\n if (this.colWidths[col._flatIndex] === undefined) {\n this.colWidths[col._flatIndex] = col.width || DEFAULT_COL_WIDTH\n }\n })\n this.computeColumnTotals()\n this.updateVirtualScroll()\n this._applyAutoWidth()\n }\n },\n merges: {\n immediate: true,\n handler(v) { this.internalMerges = v ? [...v] : [] }\n },\n collapsedGroups: {\n immediate: true,\n handler(v) { this.internalCollapsedGroups = v ? [...v] : [] }\n },\n data: {\n immediate: true,\n handler(newData) {\n // Keep _dataRaw in sync so template uses fresh data without triggering dependArray\n this._dataRaw = newData || []\n this.updateVirtualScroll()\n this.computeColumnTotals()\n // Force re-render so cell values refresh even when virtualScroll indices don't change\n // (e.g. editing a cell: same row count, same scroll position, only content changed)\n this.$forceUpdate()\n this._applyAutoWidth()\n }\n },\n totalRows() { this.updateVirtualScroll() },\n hiddenRowSet() { this.updateVirtualScroll() },\n totalVirtualHeight() { this.$nextTick(this.syncHeaderViewportWidth) }\n },\n\n created() {\n // Non-reactive row data reference — avoids Vue 2 dependArray(data) O(n) loop.\n // Vue 2 calls dependArray() for EVERY `data[ri]` access in the template,\n // iterating all 50,000 rows each time. With 1200 cells per render that's\n // 60 million iterations per render (~600ms). _dataRaw bypasses this.\n this._dataRaw = this.data || []\n\n // Non-reactive caches: same (w,h) → same style object → Vue 2 skips DOM style writes\n this._cellStyleCache = Object.create(null)\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n // rAF handles for scroll/resize throttle\n this._scrollRAF = null\n this._resizeRAF = null\n\n // Undo/redo history — non-reactive to avoid Vue overhead.\n // Each entry: { type: 'data'|'merges', before: {...}, after: {...} }\n // 'data' stores only diff rows: { indices: number[], rows: object[] }\n this._history = []\n this._historyIndex = -1\n this._historySkip = false // true while undo/redo is in progress\n\n // Column drag preview offsets — non-reactive so direct DOM updates bypass Vue re-renders.\n // Keys are column keys, values are pixel offsets.\n this._dragOffsets = {}\n\n },\n\n mounted() {\n this.updateVirtualScroll()\n this.$nextTick(this.syncHeaderViewportWidth)\n document.addEventListener('mousemove', this.onGlobalMouseMove)\n document.addEventListener('mouseup', this.onGlobalMouseUp)\n document.addEventListener('keydown', this.onGlobalKeyDown)\n document.addEventListener('mousedown', this._onDocMouseDownForDropdown, true)\n window.addEventListener('resize', this.syncHeaderViewportWidth)\n window.addEventListener('scroll', this._onWindowScrollForDropdown, true)\n },\n\n beforeDestroy() {\n document.removeEventListener('mousemove', this.onGlobalMouseMove)\n document.removeEventListener('mouseup', this.onGlobalMouseUp)\n document.removeEventListener('keydown', this.onGlobalKeyDown)\n document.removeEventListener('mousedown', this._onDocMouseDownForDropdown, true)\n window.removeEventListener('resize', this.syncHeaderViewportWidth)\n window.removeEventListener('scroll', this._onWindowScrollForDropdown, true)\n },\n\n methods: {\n // =========================================================\n // VIRTUAL SCROLL\n // =========================================================\n updateVirtualScroll() {\n const footerH = this.hasFooter ? this._footerRowH : 0\n const containerH = this.height - (this._headerRowH * this.headerDepth) - footerH\n // Use binary search against the Vue-cached cumulativeHeights → O(log n) per scroll.\n // overscan=8 (≈224px at default row height) gives enough buffer for fast scroll\n // without blank-band artifacts between rAF updates.\n const result = findVisibleRange(\n this.scrollTop, Math.max(containerH, 100), this.totalRows, this.cumulativeHeights, 8\n )\n this.virtualStartIndex = result.startIndex\n this.virtualEndIndex = result.endIndex\n this.virtualOffsetTop = result.offsetTop\n this.totalVirtualHeight = result.totalHeight\n },\n\n onBodyScroll(e) {\n const target = e.target\n // Sync sibling scroll containers immediately (visual alignment, no layout trigger)\n if (this.$refs.scrollColHeader) this.$refs.scrollColHeader.scrollLeft = target.scrollLeft\n if (this.$refs.scrollFooter) this.$refs.scrollFooter.scrollLeft = target.scrollLeft\n if (this.$refs.scrollRowHeaders) this.$refs.scrollRowHeaders.scrollTop = target.scrollTop\n\n // Close dropdown on scroll — fixed-position dropdown drifts away from the moving cell\n if (this.selectDropdown) this.closeSelectDropdown()\n\n // Throttle reactive state updates + virtual scroll recalc to one rAF per frame.\n // Read scrollTop from the DOM ref at rAF time (not from the stale event closure)\n // so that multiple scroll events arriving between frames still resolve to the\n // final position — eliminates the flickering caused by render/scroll mismatch.\n if (!this._scrollRAF) {\n this._scrollRAF = requestAnimationFrame(() => {\n this._scrollRAF = null\n const sb = this.$refs.scrollBody\n if (!sb) return\n this.scrollTop = sb.scrollTop\n this.scrollLeft = sb.scrollLeft\n this.updateVirtualScroll()\n })\n }\n },\n\n onScroll(e) {},\n\n // .eg-scroll-col-header (overflow:hidden, synced via JS) has no native scrollbar, but\n // .eg-scroll-body (overflow:auto) does — its real vertical scrollbar eats into its\n // clientWidth. If both containers just grow via flex:1, the header ends up wider than\n // the body, so its max scrollLeft is smaller and syncing clamps it before the body\n // reaches its rightmost scroll position — column borders desync right at the scroll\n // end. Locking the header to the body's exact measured clientWidth (scrollColHeaderStyle)\n // makes both max scrollLeft values identical.\n syncHeaderViewportWidth() {\n const el = this.$refs.scrollBody\n if (!el) return\n if (this.headerViewportWidth !== el.clientWidth) this.headerViewportWidth = el.clientWidth\n },\n\n // =========================================================\n // HELPERS\n // =========================================================\n isRowHidden(ri) { return this.hiddenRowSet.has(ri) },\n isColHidden(ci) { return this.effectiveHiddenColSet.has(ci) },\n\n getColW(ci) {\n return this.colWidths[ci] !== undefined ? this.colWidths[ci] : (this.leafCols[ci] ? this.leafCols[ci].width || DEFAULT_COL_WIDTH : DEFAULT_COL_WIDTH)\n },\n\n getRowH(ri) {\n if (this.isRowHidden(ri)) return 0\n return this.rowHeights[ri] || this._rowH\n },\n\n getColLeft(ci) {\n let left = 0\n for (let i = 0; i < ci && i < this.leafCols.length; i++) {\n if (!this.isColHidden(i)) left += this.getColW(i)\n }\n return left\n },\n\n getFrozenWidth() {\n return this.hasPinnedLeft ? this.pinnedLeftWidth : 0\n },\n\n isColumnPinnedLeft(ci) {\n return this.pinnedLeftSet.has(ci)\n },\n\n isColumnPinnedRight(ci) {\n return this.pinnedRightSet.has(ci)\n },\n\n isColumnScrollable(ci) {\n return !this.isColumnPinnedLeft(ci) && !this.isColumnPinnedRight(ci)\n },\n\n getZoneColLeft(ci, zone) {\n let left = 0\n if (zone === 'left') {\n for (const col of this.pinnedLeftCols) {\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex)) left += this.getColW(col._flatIndex)\n }\n } else if (zone === 'right') {\n for (const col of this.pinnedRightCols) {\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex)) left += this.getColW(col._flatIndex)\n }\n } else {\n for (let i = 0; i < this.leafCols.length; i++) {\n const col = this.leafCols[i]\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex) && this.isColumnScrollable(col._flatIndex)) {\n left += this.getColW(col._flatIndex)\n }\n }\n }\n return left\n },\n\n isCellInZone(cell, rowIdx, zone) {\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z === zone) return true\n }\n return false\n }\n const ci = cell.column._flatIndex\n if (this.isColHidden(ci)) return false\n const z = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n return z === zone\n },\n\n getHeaderCellStyleForZone(cell, rowIndex, zone) {\n let leftLeafIdx = cell._firstLeafFlatIndex\n if (cell.isGroup) {\n const end = leftLeafIdx + cell.colspan - 1\n for (let i = leftLeafIdx; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z === zone) { leftLeafIdx = i; break }\n }\n }\n const left = this.getZoneColLeft(leftLeafIdx, zone)\n let width = 0\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z !== zone) continue\n width += this.getColW(i)\n }\n } else {\n width = this.getColW(cell.column._flatIndex)\n }\n return {\n top: (this._headerRowH * rowIndex) + 'px',\n left: left + 'px',\n width: width + 'px',\n height: (this._headerRowH * cell.rowspan) + 'px'\n }\n },\n\n getRangeWidth(startCol, endCol) {\n let w = 0\n for (let i = startCol; i <= endCol && i < this.leafCols.length; i++) {\n if (!this.isColHidden(i)) w += this.getColW(i)\n }\n return w\n },\n\n getRangeHeight(startRow, endRow) {\n let h = 0\n for (let i = startRow; i <= endRow && i < this.totalRows; i++) {\n if (!this.isRowHidden(i)) h += this.getRowH(i)\n }\n return h\n },\n\n getCellValue(ri, ci) {\n const col = this.leafCols[ci]\n if (!col) return ''\n const row = this._dataRaw[ri]\n if (!row) return ''\n const v = row[col.key]\n return v !== undefined ? v : ''\n },\n\n isEditing(ri, ci) {\n return this.editingCell && this.editingCell.row === ri && this.editingCell.col === ci\n },\n\n isMergedAway(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n if (!merge) return false\n const nm = normalizeRange(merge)\n return !(nm.startRow === ri && nm.startCol === ci)\n },\n\n getMergeSpan(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n if (!merge) return { rowspan: 1, colspan: 1 }\n const nm = normalizeRange(merge)\n return {\n rowspan: nm.endRow - nm.startRow + 1,\n colspan: nm.endCol - nm.startCol + 1\n }\n },\n\n isSelected(ri, ci) {\n return isCellInAnyRange(ri, ci, this.selectionRanges)\n },\n\n isActiveCell(ri, ci) {\n return this.activeCell.row === ri && this.activeCell.col === ci\n },\n\n isCopyHighlighted(ri, ci) {\n if (!this.clipboardRange || this.clipboardMode !== 'copy') return false\n return isCellInRange(ri, ci, this.clipboardRange)\n },\n\n // =========================================================\n // STYLES\n // =========================================================\n getRowStyle(ri) {\n const h = this.getRowH(ri)\n const key = h\n if (this._rowStyleCache[key]) return this._rowStyleCache[key]\n const style = { height: h + 'px', minHeight: h + 'px' }\n this._rowStyleCache[key] = style\n return style\n },\n\n getRowHeaderStyle(ri) {\n const h = this.getRowH(ri)\n const key = h\n if (this._rowHeaderStyleCache[key]) return this._rowHeaderStyleCache[key]\n const style = { height: h + 'px' }\n this._rowHeaderStyleCache[key] = style\n return style\n },\n\n getCellStyle(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n const nm = merge ? normalizeRange(merge) : null\n let w = this.getColW(ci)\n let h = this.getRowH(ri)\n\n if (nm && nm.startRow === ri && nm.startCol === ci) {\n w = this.getRangeWidth(nm.startCol, nm.endCol)\n h = this.getRangeHeight(nm.startRow, nm.endRow)\n }\n\n // Position cells with the same absolute-left arithmetic the header uses\n // (getZoneColLeft), instead of relying on flex layout to accumulate widths —\n // flex and a JS integer sum can drift apart by a few px over many columns,\n // desyncing the body's column borders from the header's.\n const zone = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n const left = this.getZoneColLeft(ci, zone)\n\n // Cache by dimensions+position — same (w,h,left) → same object ref → Vue 2 skips DOM style writes\n const key = w + '_' + h + '_' + left\n if (this._cellStyleCache[key]) return this._cellStyleCache[key]\n const style = { position: 'absolute', left: left + 'px', top: '0px', width: w + 'px', minWidth: w + 'px', height: h + 'px' }\n this._cellStyleCache[key] = style\n return style\n },\n\n getCellClasses(ri, ci) {\n const col = this.leafCols[ci]\n return {\n 'eg-cell-active': this.isActiveCell(ri, ci),\n 'eg-cell-selected': this.isSelected(ri, ci) && !this.isActiveCell(ri, ci),\n 'eg-cell-fill-preview': this.isInFillPreview(ri, ci),\n 'eg-cell-copy': this.isCopyHighlighted(ri, ci),\n 'eg-cell-merged-hidden': this.isMergedAway(ri, ci),\n 'eg-cell-select': !!(col && this.isSelectLikeCol(col)),\n 'eg-cell-checkbox': !!(col && col.type === 'checkbox'),\n 'eg-cell-readonly': !this.isCellEditable(ri, ci),\n 'eg-cell-invalid': !!(this.invalidCell && this.invalidCell.row === ri && this.invalidCell.col === ci),\n 'eg-cell--has-suffix': !!(col && this.hasSuffixSlot(col)),\n 'eg-cell--drag-source': this.colDrag.active && ci >= this.colDrag.sourceFirstLeaf && ci < this.colDrag.sourceFirstLeaf + this.colDrag.sourceLeafCount\n }\n },\n\n isInFillPreview(ri, ci) {\n if (!this.fillDrag.active || !this.fillDrag.sourceRange) return false\n const src = this.fillDrag.sourceRange\n const targetRow = this.fillDrag.currentRow\n const targetCol = this.fillDrag.currentCol\n if (targetRow > src.endRow) {\n return ri > src.endRow && ri <= targetRow && ci >= src.startCol && ci <= src.endCol\n }\n if (targetCol > src.endCol) {\n return ci > src.endCol && ci <= targetCol && ri >= src.startRow && ri <= src.endRow\n }\n return false\n },\n\n getHeaderCellStyle(cell, rowIndex, isFrozen) {\n const zone = isFrozen ? 'left' : 'scroll'\n let leftLeafIdx = cell._firstLeafFlatIndex\n if (cell.isGroup) {\n const end = leftLeafIdx + cell.colspan - 1\n for (let i = leftLeafIdx; i <= end; i++) {\n if (this.isColHidden(i)) continue\n if (isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)) { leftLeafIdx = i; break }\n }\n }\n const left = this.getZoneColLeft(leftLeafIdx, zone)\n\n let width = 0\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const inZone = isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)\n if (!inZone) continue\n width += this.getColW(i)\n }\n } else {\n width = this.getColW(cell.column._flatIndex)\n }\n\n return {\n top: (this._headerRowH * rowIndex) + 'px',\n left: left + 'px',\n width: width + 'px',\n height: (this._headerRowH * cell.rowspan) + 'px'\n }\n },\n\n getHeaderDragTransform(cell) {\n if (!this.colDrag.active) return null\n // Read from non-reactive _dragOffsets — no Vue dependency tracking, no re-render on offset change\n let key\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (!this.isColHidden(i) && this.leafCols[i]) { key = this.leafCols[i].key; break }\n }\n } else {\n key = cell.column.key\n }\n if (!key) return null\n const dx = this._dragOffsets[key]\n if (!dx) return null\n return { transform: `translateX(${dx}px)` }\n },\n\n getCellDragTransform(ci) {\n if (!this.colDrag.active) return null\n // Read from non-reactive _dragOffsets — no Vue dependency tracking\n const col = this.leafCols[ci]\n if (!col) return null\n const dx = this._dragOffsets[col.key]\n if (!dx) return null\n return { transform: `translateX(${dx}px)` }\n },\n\n // =========================================================\n // FOOTER (column totals)\n // =========================================================\n computeColumnTotals() {\n const totals = {}\n const rows = this._dataRaw || []\n this.leafCols.forEach(col => {\n if (!col.showTotal) return\n let sum = 0\n let hasNumber = false\n for (let ri = 0; ri < rows.length; ri++) {\n const row = rows[ri]\n const v = row ? row[col.key] : undefined\n if (typeof v === 'number' && isFinite(v)) {\n sum += v\n hasNumber = true\n }\n }\n totals[col._flatIndex] = hasNumber ? Math.round(sum * 1e6) / 1e6 : null\n })\n this.columnTotals = totals\n },\n\n getColumnTotalDisplay(ci) {\n const col = this.leafCols[ci]\n if (!col || !col.showTotal) return ''\n const v = this.columnTotals[ci]\n return v === null || v === undefined ? '-' : v\n },\n\n getFooterCellStyle(ci) {\n const zone = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n const left = this.getZoneColLeft(ci, zone)\n const w = this.getColW(ci)\n return {\n position: 'absolute',\n left: left + 'px',\n top: '0px',\n width: w + 'px',\n minWidth: w + 'px',\n height: this._footerRowH + 'px'\n }\n },\n\n isCellVisible(cell, rowIndex, isFrozen) {\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const inZone = isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)\n if (inZone) return true\n }\n return false\n }\n const ci = cell.column._flatIndex\n if (this.isColHidden(ci)) return false\n return isFrozen ? this.isColumnPinnedLeft(ci) : this.isColumnScrollable(ci)\n },\n\n getRowGroupBtnStyle(group) {\n const top = getRowTop(group.startIndex, this._rowH, this.rowHeights) - this.scrollTop\n return {\n position: 'absolute',\n top: top + 'px',\n left: '2px',\n width: '16px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n fontSize: '10px',\n cursor: 'pointer',\n background: 'var(--eg-color-accent-soft)',\n border: '1px solid var(--eg-color-group-border)',\n borderRadius: '2px',\n zIndex: 5\n }\n },\n\n getColGroupBtnStyle(group) {\n const left = this.getColLeft(group.startIndex) - this.scrollLeft\n return {\n position: 'absolute',\n left: left + 'px',\n top: '2px',\n width: '16px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n fontSize: '10px',\n cursor: 'pointer',\n background: 'var(--eg-color-accent-soft)',\n border: '1px solid var(--eg-color-group-border)',\n borderRadius: '2px'\n }\n },\n\n // =========================================================\n // CELL SELECTION (3.1)\n // =========================================================\n selectCell(row, col, addToSelection = false) {\n if (row < 0 || row >= this.totalRows || col < 0 || col >= this.leafCols.length) return\n this.activeCell = { row, col }\n if (addToSelection) {\n this.selectionRanges.push(singleCellRange(row, col))\n } else {\n this.selectionRanges = [singleCellRange(row, col)]\n }\n this.emitSelectionChange()\n },\n\n selectRange(startRow, startCol, endRow, endCol, replace = true) {\n const range = { startRow, startCol, endRow, endCol }\n if (replace) {\n this.selectionRanges = [range]\n } else {\n this.selectionRanges.push(range)\n }\n this.emitSelectionChange()\n },\n\n selectRow(ri) {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [{ startRow: ri, endRow: ri, startCol: 0, endCol: this.leafCols.length - 1 }]\n this.emitSelectionChange()\n },\n\n selectColumn(ci) {\n this.activeCell = { row: 0, col: ci }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: ci, endCol: ci }]\n this.emitSelectionChange()\n },\n\n selectAll() {\n this.activeCell = { row: 0, col: 0 }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: 0, endCol: this.leafCols.length - 1 }]\n this.emitSelectionChange()\n },\n\n emitSelectionChange() {\n this.$emit('selection-change', {\n activeCell: { ...this.activeCell },\n ranges: this.selectionRanges.map(r => normalizeRange(r))\n })\n },\n\n onCellMouseDown(e, ri, ci) {\n this.invalidCell = null\n if (this.editingCell) {\n const editCol = this.leafCols[this.editingCell.col]\n if (editCol && this._hasCustomEdit(editCol)) {\n this.cancelEdit()\n } else {\n this.commitEdit()\n }\n }\n this.hideContextMenu()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n\n if (e.ctrlKey || e.metaKey) {\n if (this.selectDropdown) this.closeSelectDropdown()\n // Ctrl+click: start new independent range\n this.activeCell = { row: ri, col: ci }\n this.mouseDownRange = { startRow: ri, startCol: ci, endRow: ri, endCol: ci }\n this.selectionRanges.push(this.mouseDownRange)\n this.isCtrlDrag = true\n } else if (e.shiftKey && this.selectionRanges.length > 0) {\n if (this.selectDropdown) this.closeSelectDropdown()\n // Shift+click: extend primary range to this cell\n this.selectionRanges = [buildRange(this.activeCell, { row: ri, col: ci })]\n } else {\n const wasActive = this.activeCell.row === ri && this.activeCell.col === ci\n this.activeCell = { row: ri, col: ci }\n this.mouseDownRange = { startRow: ri, startCol: ci, endRow: ri, endCol: ci }\n this.selectionRanges = [this.mouseDownRange]\n this.isCtrlDrag = false\n\n // Open select dropdown on click if cell was already active (2nd click)\n const col = this.leafCols[ci]\n if (wasActive && col && this.isSelectLikeCol(col) && !this._hasCustomEdit(col) && this.isCellEditable(ri, ci)) {\n this.openSelectDropdown(ri, ci, e)\n e.preventDefault()\n this.isMouseDown = true\n this.emitSelectionChange()\n return\n }\n if (this.selectDropdown) this.closeSelectDropdown()\n }\n\n this.isMouseDown = true\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onCellMouseOver(e, ri, ci) {\n if (!this.isMouseDown) return\n if (this.fillDrag.active) return\n if (this.dragMove.active) {\n this.dragMove.targetRow = ri\n this.dragMove.targetCol = ci\n return\n }\n\n // Extend current drag range\n if (this.mouseDownRange) {\n this.mouseDownRange.endRow = ri\n this.mouseDownRange.endCol = ci\n this.emitSelectionChange()\n }\n },\n\n onCellMouseUp() {\n this.isMouseDown = false\n },\n\n onCellDblClick(ri, ci) {\n const col = this.leafCols[ci]\n if (!this.isCellEditable(ri, ci)) return\n if (col && this.isSelectLikeCol(col) && !this._hasCustomEdit(col)) {\n this.openSelectDropdownForActive()\n return\n }\n if (col && col.type === 'checkbox') return\n this.startEditing(ri, ci, null, true)\n },\n\n onRowHeaderMouseDown(e, ri) {\n const endCol = this.leafCols.length - 1\n const fullRow = { startRow: ri, endRow: ri, startCol: 0, endCol }\n\n if (e.ctrlKey || e.metaKey) {\n if (e.shiftKey && this.selectionRanges.length > 0) {\n // Ctrl+Shift: active qatordan ri gacha yangi range qo'sh\n const sr = Math.min(this.activeCell.row, ri)\n const er = Math.max(this.activeCell.row, ri)\n this.selectionRanges = [...this.selectionRanges, { startRow: sr, endRow: er, startCol: 0, endCol }]\n } else {\n // Ctrl+click: qatorni toggle qil\n const idx = this.selectionRanges.findIndex(r =>\n r.startRow === ri && r.endRow === ri && r.startCol === 0 && r.endCol === endCol\n )\n if (idx >= 0) {\n const next = this.selectionRanges.filter((_, i) => i !== idx)\n this.selectionRanges = next.length ? next : [fullRow]\n } else {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [...this.selectionRanges, fullRow]\n }\n }\n } else if (e.shiftKey && this.selectionRanges.length > 0) {\n const sr = Math.min(this.activeCell.row, ri)\n const er = Math.max(this.activeCell.row, ri)\n this.selectionRanges = [{ startRow: sr, endRow: er, startCol: 0, endCol }]\n } else {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [fullRow]\n }\n\n this.mouseDownRange = this.selectionRanges[this.selectionRanges.length - 1]\n this.isMouseDown = true\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onColHeaderMouseDown(e, cell) {\n // Start pending drag (activates after 5 px horizontal movement)\n // Works for both leaf and group headers\n if (this.columnDraggable && !e.shiftKey && !e.ctrlKey && !e.metaKey) {\n this.colDrag.pending = true\n this.colDrag.active = false\n this.colDrag.sourceFirstLeaf = cell._firstLeafFlatIndex\n this.colDrag.sourceLeafCount = cell.isGroup ? cell.colspan : 1\n this.colDrag.startX = e.clientX\n this.colDrag.startY = e.clientY\n this.colDrag.ghostLabel = cell.column.title || ''\n }\n\n if (cell.isGroup) {\n // Group header click: select all leaf columns within the group\n const startCol = cell._firstLeafFlatIndex\n const endCol = startCol + cell.colspan - 1\n this.activeCell = { row: 0, col: startCol }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol, endCol }]\n this.isMouseDown = true\n this.mouseDownRange = this.selectionRanges[0]\n this.emitSelectionChange()\n e.preventDefault()\n return\n }\n\n const ci = cell.column._flatIndex\n if (e.shiftKey && this.selectionRanges.length > 0) {\n const sc = Math.min(this.activeCell.col, ci)\n const ec = Math.max(this.activeCell.col, ci)\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: sc, endCol: ec }]\n } else {\n this.activeCell = { row: 0, col: ci }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: ci, endCol: ci }]\n }\n this.isMouseDown = true\n this.mouseDownRange = this.selectionRanges[0]\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onColHeaderDblClick(e, cell) {\n if (cell.isGroup) return\n this.autoFitColumn(cell.column._flatIndex)\n },\n\n onColHeaderContextMenu(e, cell) {\n if (!cell.isGroup) {\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: -1, col: cell.column._flatIndex }\n }\n },\n\n onRowContextMenu(e, ri) {\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: ri, col: -1 }\n },\n\n onCellContextMenu(e, ri, ci) {\n if (!this.isSelected(ri, ci)) {\n this.selectCell(ri, ci)\n }\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: ri, col: ci }\n },\n\n hideContextMenu() {\n this.contextMenu.visible = false\n },\n\n // =========================================================\n // KEYBOARD NAVIGATION (3.2)\n // =========================================================\n onKeyDown(e) {\n // Delegate keyboard navigation to the active dropdown component\n if (this.selectDropdown) {\n const comp = this.$refs.selectDropdownComp\n if (comp && comp.handleKey) comp.handleKey(e)\n return\n }\n\n if (this.editingCell) return // handled by onEditKeyDown\n const key = e.key\n\n if ((e.ctrlKey || e.metaKey) && key === 'z' && !e.shiftKey) {\n e.preventDefault()\n this.undo()\n return\n }\n if ((e.ctrlKey || e.metaKey) && (key === 'y' || (key === 'z' && e.shiftKey))) {\n e.preventDefault()\n this.redo()\n return\n }\n\n if (key === 'a' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.selectAll()\n return\n }\n\n if (key === 'c' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.copySelection()\n return\n }\n if (key === 'x' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.cutSelection()\n return\n }\n if (key === 'v' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.pasteAt(this.activeCell.row, this.activeCell.col)\n return\n }\n\n if (key === 'Delete' || key === 'Backspace') {\n e.preventDefault()\n this.clearSelection()\n return\n }\n\n if (key === 'F2') {\n e.preventDefault()\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && this.isSelectLikeCol(activeCol) && !this._hasCustomEdit(activeCol)) {\n this.openSelectDropdownForActive()\n } else if (activeCol && activeCol.type === 'checkbox') {\n this.toggleCheckbox(this.activeCell.row, this.activeCell.col)\n } else {\n this.startEditing(this.activeCell.row, this.activeCell.col, null, true)\n }\n return\n }\n\n if (key === ' ') {\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && activeCol.type === 'checkbox') {\n e.preventDefault()\n this.toggleCheckbox(this.activeCell.row, this.activeCell.col)\n return\n }\n }\n\n if (key === 'Escape') {\n this.clipboardRange = null\n this.clipboardMatrix = null\n this.clipboardMode = null\n return\n }\n\n if (key === 'Tab') {\n e.preventDefault()\n this.moveActive(0, e.shiftKey ? -1 : 1, e)\n return\n }\n if (key === 'Enter') {\n e.preventDefault()\n this.moveActive(e.shiftKey ? -1 : 1, 0, e)\n return\n }\n\n const arrows = { ArrowUp: [-1,0], ArrowDown: [1,0], ArrowLeft: [0,-1], ArrowRight: [0,1] }\n if (arrows[key]) {\n e.preventDefault()\n const [dr, dc] = arrows[key]\n if (e.shiftKey) {\n // Extend selection\n const pr = this.primaryRange || singleCellRange(this.activeCell.row, this.activeCell.col)\n const nm = normalizeRange(pr)\n // Determine which edge to extend\n if (dr === -1) pr.startRow = Math.max(0, nm.startRow - 1)\n if (dr === 1) pr.endRow = Math.min(this.totalRows - 1, nm.endRow + 1)\n if (dc === -1) pr.startCol = Math.max(0, nm.startCol - 1)\n if (dc === 1) pr.endCol = Math.min(this.leafCols.length - 1, nm.endCol + 1)\n this.selectionRanges = [pr]\n this.emitSelectionChange()\n } else {\n this.moveActive(dr, dc, e)\n }\n return\n }\n\n if (key === 'Home') {\n e.preventDefault()\n if (e.ctrlKey) {\n this.selectCell(0, 0)\n } else {\n this.selectCell(this.activeCell.row, 0)\n }\n return\n }\n if (key === 'End') {\n e.preventDefault()\n if (e.ctrlKey) {\n this.selectCell(this.totalRows - 1, this.leafCols.length - 1)\n } else {\n this.selectCell(this.activeCell.row, this.leafCols.length - 1)\n }\n return\n }\n if (key === 'PageUp') {\n e.preventDefault()\n const visibleRows = Math.floor((this.height - this._headerRowH * this.headerDepth) / this._rowH)\n this.moveActive(-visibleRows, 0, e)\n return\n }\n if (key === 'PageDown') {\n e.preventDefault()\n const visibleRows = Math.floor((this.height - this._headerRowH * this.headerDepth) / this._rowH)\n this.moveActive(visibleRows, 0, e)\n return\n }\n },\n\n onKeyPress(e) {\n if (this.editingCell) return\n if (this.selectDropdown) return\n if (e.ctrlKey || e.metaKey || e.altKey) return\n if (e.key && e.key.length === 1) {\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && this.isSelectLikeCol(activeCol) && !this._hasCustomEdit(activeCol)) {\n e.preventDefault()\n this.openSelectDropdownForActive()\n return\n }\n if (activeCol && activeCol.type === 'checkbox') {\n e.preventDefault()\n return\n }\n this.startEditing(this.activeCell.row, this.activeCell.col, e.key, false)\n }\n },\n\n onGlobalKeyDown(e) {\n if (e.key === 'Escape' && (this.colDrag.active || this.colDrag.pending)) {\n this._resetColDrag()\n e.preventDefault()\n }\n },\n\n moveActive(dr, dc, e) {\n let row = this.activeCell.row + dr\n let col = this.activeCell.col + dc\n\n // Tab: wrap around rows\n if (e && e.key === 'Tab') {\n if (col >= this.leafCols.length) { col = 0; row++ }\n if (col < 0) { col = this.leafCols.length - 1; row-- }\n }\n\n row = Math.max(0, Math.min(this.totalRows - 1, row))\n col = Math.max(0, Math.min(this.leafCols.length - 1, col))\n\n // Skip hidden cols\n while (this.isColHidden(col) && col > 0 && col < this.leafCols.length - 1) {\n col += dc >= 0 ? 1 : -1\n }\n // Skip hidden rows\n while (this.isRowHidden(row) && row > 0 && row < this.totalRows - 1) {\n row += dr >= 0 ? 1 : -1\n }\n\n // Handle merge navigation\n const resolved = resolveMergeAnchor(row, col, this.internalMerges)\n row = resolved.row\n col = resolved.col\n\n this.activeCell = { row, col }\n this.selectionRanges = [singleCellRange(row, col)]\n this.emitSelectionChange()\n this.scrollToCell(row, col)\n },\n\n scrollToCell(ri, ci) {\n const scrollBody = this.$refs.scrollBody\n if (!scrollBody) return\n const rowTop = getRowTop(ri, this._rowH, this.rowHeights)\n const rowBottom = rowTop + this.getRowH(ri)\n const colLeft = this.getColLeft(ci) - this.getFrozenWidth()\n const colRight = colLeft + this.getColW(ci)\n\n if (rowTop < scrollBody.scrollTop) scrollBody.scrollTop = rowTop\n if (rowBottom > scrollBody.scrollTop + scrollBody.clientHeight) {\n scrollBody.scrollTop = rowBottom - scrollBody.clientHeight\n }\n if (colLeft < scrollBody.scrollLeft) scrollBody.scrollLeft = colLeft\n if (colRight > scrollBody.scrollLeft + scrollBody.clientWidth) {\n scrollBody.scrollLeft = colRight - scrollBody.clientWidth\n }\n },\n\n // =========================================================\n // EDITING (used by 3.1 + 3.2)\n // =========================================================\n startEditing(ri, ci, initialChar = null, keepValue = false) {\n const col = this.leafCols[ci]\n if (!col || !this.isCellEditable(ri, ci)) return\n if (ri < 0 || ri >= this.totalRows) return\n if (!this._hasCustomEdit(col)) {\n if (this.isSelectLikeCol(col)) { this.openSelectDropdownForActive(); return }\n if (col.type === 'checkbox') return\n }\n\n this.invalidCell = null\n this.editingCell = { row: ri, col: ci }\n if (initialChar !== null) {\n this.editValue = initialChar\n } else if (keepValue) {\n this.editValue = String(this.getCellValue(ri, ci) || '')\n } else {\n this.editValue = ''\n }\n this.editOriginalValue = String(this.getCellValue(ri, ci) || '')\n\n this.$nextTick(() => {\n const inputs = this.$refs.editInput\n if (inputs) {\n const input = Array.isArray(inputs) ? inputs[0] : inputs\n if (input) {\n input.focus()\n if (keepValue) {\n input.setSelectionRange(input.value.length, input.value.length)\n }\n }\n }\n })\n },\n\n commitEdit() {\n if (!this.editingCell) return\n const { row, col } = this.editingCell\n const colDef = this.leafCols[col]\n if (!colDef) { this.editingCell = null; return }\n\n if (!this.isCellValueValid(row, col, this.editValue)) {\n this._showInvalidCell(row, col, this.editValue)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: this.editValue }\n this._emitDataChange(oldData, newData)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n cancelEdit() {\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n hasCellSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['cell-' + col.key])\n },\n hasLegacyEditSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['edit-' + col.key])\n },\n hasPrefixSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['prefix-' + col.key])\n },\n hasSuffixSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['suffix-' + col.key])\n },\n _hasCustomEdit(col) {\n // For select/treeSelect: cell-{key} slot only customizes display; dropdown still opens normally\n if (col.type === 'select' || col.type === 'treeSelect') {\n return this.hasLegacyEditSlot(col)\n }\n return this.hasCellSlot(col) || this.hasLegacyEditSlot(col)\n },\n\n commitEditSlot(value) {\n if (!this.editingCell) return\n const { row, col } = this.editingCell\n const colDef = this.leafCols[col]\n if (!colDef) { this.editingCell = null; return }\n if (!this.isCellValueValid(row, col, value)) {\n this._showInvalidCell(row, col, value)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: value }\n this._emitDataChange(oldData, newData)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n // =========================================================\n // CHECKBOX CELLS\n // =========================================================\n\n isCheckboxChecked(ri, ci) {\n const v = this.getCellValue(ri, ci)\n if (v === true || v === 1) return true\n if (typeof v === 'string') return ['true', '1'].includes(v.trim().toLowerCase())\n return false\n },\n\n setCheckboxValue(ri, ci, value) {\n const col = this.leafCols[ci]\n if (!col || !this.isCellEditable(ri, ci)) return\n if (!this.isCellValueValid(ri, ci, value)) {\n this._showInvalidCell(ri, ci, value)\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[ri] = { ...oldData[ri], [col.key]: value }\n this._emitDataChange(oldData, newData)\n },\n\n toggleCheckbox(ri, ci) {\n this.setCheckboxValue(ri, ci, !this.isCheckboxChecked(ri, ci))\n },\n\n // =========================================================\n // CELL EDITABILITY (3.17)\n // =========================================================\n\n isCellEditable(ri, ci) {\n const col = this.leafCols[ci]\n if (!col) return false\n const row = this._dataRaw[ri] || {}\n if (typeof this.cellEditable === 'function') return !!this.cellEditable(row, ri, col, ci)\n if (typeof col.editable === 'function') return !!col.editable(row, ri)\n if (col.editable === false) return false\n return true\n },\n\n // =========================================================\n // CELL VALUE VALIDATION (cellValidator)\n // =========================================================\n\n isCellValueValid(ri, ci, value) {\n if (typeof this.cellValidator !== 'function') return true\n const col = this.leafCols[ci]\n if (!col) return true\n const row = this._dataRaw[ri] || {}\n return !!this.cellValidator(value, row, ri, col, ci)\n },\n\n _resolveValidationMessage(ri, ci, value) {\n const col = this.leafCols[ci]\n const row = this._dataRaw[ri] || {}\n if (typeof this.cellValidationMessage === 'function') return this.cellValidationMessage(value, row, ri, col, ci)\n if (typeof this.cellValidationMessage === 'string' && this.cellValidationMessage) return this.cellValidationMessage\n return this.t.invalidValue\n },\n\n // Find the on-screen rect of the cell currently being committed — the edit\n // input if still mounted (commitEdit, before editingCell is cleared), else\n // the active cell element (checkbox/select commits, which never enter edit mode).\n _invalidCellRect() {\n const inputs = this.$refs.editInput\n const input = Array.isArray(inputs) ? inputs[0] : inputs\n if (input) return input.getBoundingClientRect()\n const el = this.$el ? this.$el.querySelector('.eg-cell-active') : null\n return el ? el.getBoundingClientRect() : null\n },\n\n _showInvalidCell(ri, ci, value) {\n const message = this._resolveValidationMessage(ri, ci, value)\n this.invalidCell = { row: ri, col: ci, message, rect: this._invalidCellRect() }\n this.$emit('cell-validation-error', { row: ri, col: ci, value, message })\n },\n\n // Resolve+emit messages for a batch of rejected { row, col, value } entries\n // from a bulk write (paste / fill / clear). blocked=true means the whole\n // operation was aborted (strictBulkValidation); false means these cells\n // were skipped but the rest of the write still applied.\n _emitBulkValidationError(skipped, blocked) {\n const cells = skipped.map(c => ({\n row: c.row, col: c.col, value: c.value,\n message: this._resolveValidationMessage(c.row, c.col, c.value)\n }))\n this.$emit('bulk-validation-error', { blocked, cells })\n },\n\n // =========================================================\n // SELECT DROPDOWN (3.16) + TREE SELECT (3.22)\n // =========================================================\n\n isSelectLikeCol(col) {\n return !!(col && (col.type === 'select' || col.type === 'treeSelect'))\n },\n\n treeOptionKeys(col) {\n return {\n valueKey: col.optionValueKey || 'value',\n labelKey: col.optionLabelKey || 'label',\n childrenKey: col.optionChildrenKey || 'children'\n }\n },\n\n _treeFindLabel(nodes, keys, value) {\n for (const node of (nodes || [])) {\n if (String(node[keys.valueKey]) === value) {\n return node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])\n }\n const found = this._treeFindLabel(node[keys.childrenKey], keys, value)\n if (found != null) return found\n }\n return null\n },\n\n colOptions(ci) {\n const col = this.leafCols[ci]\n if (!col || !Array.isArray(col.options)) return []\n return col.options.map(o =>\n typeof o === 'string' ? { value: o, label: o } : { value: o.value, label: o.label != null ? o.label : String(o.value), color: o.color }\n )\n },\n\n getSelectLabel(ci, value) {\n const col = this.leafCols[ci]\n const v = value == null ? '' : String(value)\n if (col && col.type === 'treeSelect') {\n if (!Array.isArray(col.options)) return v\n const found = this._treeFindLabel(col.options, this.treeOptionKeys(col), v)\n return found != null ? found : v\n }\n const opts = this.colOptions(ci)\n if (!opts.length) return v\n const found = opts.find(o => String(o.value) === v)\n return found ? found.label : v\n },\n\n _buildSelectDropdownState(ri, ci, col, currentValue, rect) {\n const rectObj = { top: rect.top, bottom: rect.bottom, left: rect.left, width: rect.width }\n return {\n row: ri, col: ci,\n tree: col.type === 'treeSelect',\n keys: col.type === 'treeSelect' ? this.treeOptionKeys(col) : null,\n rawOptions: col.options || [],\n currentValue,\n rect: rectObj,\n enableSearch: !!col.enableSearch\n }\n },\n\n openSelectDropdown(ri, ci, e) {\n const col = this.leafCols[ci]\n if (!col || !Array.isArray(col.options)) return\n const el = e.currentTarget\n const rect = el.getBoundingClientRect()\n const currentValue = String(this.getCellValue(ri, ci) != null ? this.getCellValue(ri, ci) : '')\n this.selectDropdown = this._buildSelectDropdownState(ri, ci, col, currentValue, rect)\n },\n\n openSelectDropdownForActive() {\n const { row, col } = this.activeCell\n const colDef = this.leafCols[col]\n if (!colDef || !Array.isArray(colDef.options)) return\n this.$nextTick(() => {\n const el = this.$el ? this.$el.querySelector('.eg-cell-active') : null\n if (!el) return\n const rect = el.getBoundingClientRect()\n const currentValue = String(this.getCellValue(row, col) != null ? this.getCellValue(row, col) : '')\n this.selectDropdown = this._buildSelectDropdownState(row, col, colDef, currentValue, rect)\n })\n },\n\n onComponentSelect({ value, label }) {\n if (!this.selectDropdown) return\n const { row, col } = this.selectDropdown\n const colDef = this.leafCols[col]\n if (colDef) {\n if (!this.isCellValueValid(row, col, value)) {\n this._showInvalidCell(row, col, value)\n this.closeSelectDropdown()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: value }\n this._emitDataChange(oldData, newData)\n if (typeof colDef.onSelect === 'function') {\n colDef.onSelect({ value, label }, newData[row], row, colDef)\n }\n }\n this.closeSelectDropdown()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n closeSelectDropdown() {\n this.selectDropdown = null\n },\n\n _onWindowScrollForDropdown(e) {\n if (!this.selectDropdown) return\n const comp = this.$refs.selectDropdownComp\n const dd = comp && comp.$el ? comp.$el : null\n if (dd && dd.contains(e.target)) return\n this.closeSelectDropdown()\n },\n\n _onDocMouseDownForDropdown(e) {\n if (!this.selectDropdown) return\n const comp = this.$refs.selectDropdownComp\n const dd = comp && comp.$el ? comp.$el : null\n if (dd && dd.contains(e.target)) return\n this.closeSelectDropdown()\n },\n\n onEditKeyDown(e) {\n if (e.key === 'Escape') {\n e.preventDefault()\n this.cancelEdit()\n } else if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault()\n this.commitEdit()\n this.moveActive(1, 0, e)\n } else if (e.key === 'Tab') {\n e.preventDefault()\n this.commitEdit()\n this.moveActive(0, e.shiftKey ? -1 : 1, e)\n }\n },\n\n clearSelection() {\n if (!this.selectionRanges.length) return\n const oldData = this.data\n const newData = oldData.slice()\n let hasChanges = false\n const skipped = []\n for (const range of this.selectionRanges) {\n const r = {\n startRow: Math.min(range.startRow, range.endRow),\n endRow: Math.max(range.startRow, range.endRow),\n startCol: Math.min(range.startCol, range.endCol),\n endCol: Math.max(range.startCol, range.endCol)\n }\n for (let ri = r.startRow; ri <= r.endRow && ri < newData.length; ri++) {\n let rowUpdated = null\n for (let ci = r.startCol; ci <= r.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, '')) { skipped.push({ row: ri, col: ci, value: '' }); continue }\n if (!rowUpdated) rowUpdated = { ...newData[ri] }\n rowUpdated[col.key] = ''\n hasChanges = true\n }\n }\n if (rowUpdated) newData[ri] = rowUpdated\n }\n }\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n if (hasChanges) this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n // =========================================================\n // FILL HANDLE (3.3)\n // =========================================================\n startFillDrag(e) {\n const pr = this.primaryRange\n if (!pr) return\n this.fillDrag.active = true\n this.fillDrag.sourceRange = normalizeRange(pr)\n this.fillDrag.currentRow = pr.endRow\n this.fillDrag.currentCol = pr.endCol\n e.preventDefault()\n },\n\n onGlobalMouseMove(e) {\n // Detect column drag threshold (5 px)\n if (this.colDrag.pending) {\n if (Math.abs(e.clientX - this.colDrag.startX) > 5) {\n this.colDrag.pending = false\n this.colDrag.active = true\n this.colDrag.currentX = e.clientX\n this.colDrag.currentY = e.clientY\n this.colDrag.dropIndex = this.colDrag.sourceFirstLeaf\n this.isMouseDown = false // cancel cell-selection drag\n }\n }\n if (this.colDrag.active) {\n this.handleColDragMove(e)\n return\n }\n\n if (this.resizing.active) {\n this.handleResizeMove(e)\n return\n }\n if (this.fillDrag.active) {\n this.handleFillDragMove(e)\n return\n }\n if (this.dragMove.active) {\n this.handleDragMoveMove(e)\n return\n }\n },\n\n onGlobalMouseUp(e) {\n if (this.colDrag.active) {\n this.commitColDrag()\n return\n }\n if (this.colDrag.pending) {\n this._resetColDrag()\n // fall through — normal mouseup\n }\n\n if (this.resizing.active) {\n this.commitResize()\n return\n }\n if (this.fillDrag.active) {\n this.commitFillDrag()\n return\n }\n if (this.dragMove.active) {\n this.commitDragMove(e)\n return\n }\n this.isMouseDown = false\n },\n\n handleFillDragMove(e) {\n const scrollBody = this.$refs.scrollBody\n if (!scrollBody) return\n const rect = scrollBody.getBoundingClientRect()\n const relY = e.clientY - rect.top + scrollBody.scrollTop\n const relX = e.clientX - rect.left + scrollBody.scrollLeft\n\n // Binary search on cumulativeHeights — O(log n) instead of O(n)\n const cum = this.cumulativeHeights\n const total = this.totalRows\n let lo = 0, hi = total - 1\n while (lo < hi) {\n const mid = (lo + hi) >> 1\n if (cum[mid + 1] <= relY) lo = mid + 1\n else hi = mid\n }\n const row = Math.min(lo, total - 1)\n\n // Columns are few — O(columns) is fast\n let left = this.getFrozenWidth()\n let col = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColumnScrollable(i)) continue\n left += this.getColW(i)\n if (relX < left) { col = i; break }\n col = i\n }\n\n this.fillDrag.currentRow = row\n this.fillDrag.currentCol = col\n },\n\n commitFillDrag() {\n const src = this.fillDrag.sourceRange\n if (!src) { this.fillDrag.active = false; return }\n\n const targetRow = this.fillDrag.currentRow\n const targetCol = this.fillDrag.currentCol\n\n const oldData = this.data\n const newData = oldData.slice() // only affected rows get new objects\n let targetRange\n const skipped = []\n\n if (targetRow > src.endRow) {\n // Fill down\n const count = targetRow - src.endRow\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (!col) continue\n const srcValues = []\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n srcValues.push(oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ri = src.endRow + 1 + k\n if (ri < this.totalRows && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n targetRange = { startRow: src.endRow + 1, endRow: targetRow, startCol: src.startCol, endCol: src.endCol }\n } else if (targetCol > src.endCol) {\n // Fill right\n const count = targetCol - src.endCol\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n const srcValues = []\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n srcValues.push(col && oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ci = src.endCol + 1 + k\n if (ci < this.leafCols.length) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n }\n targetRange = { startRow: src.startRow, endRow: src.endRow, startCol: src.endCol + 1, endCol: targetCol }\n }\n\n if (targetRange) {\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n } else {\n this._emitDataChange(oldData, newData)\n this.$emit('fill', { sourceRange: src, targetRange, values: newData })\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n }\n }\n\n this.fillDrag.active = false\n this.fillDrag.sourceRange = null\n },\n\n doubleFillDown() {\n const pr = this.primaryRange\n if (!pr) return\n const src = normalizeRange(pr)\n // Find adjacent column filled length\n const adjCol = src.startCol > 0 ? src.startCol - 1 : src.endCol + 1\n if (adjCol < 0 || adjCol >= this.leafCols.length) return\n const adjColDef = this.leafCols[adjCol]\n if (!adjColDef) return\n let lastFilledRow = src.endRow\n for (let ri = src.endRow + 1; ri < this.totalRows; ri++) {\n if (this.data[ri] && this.data[ri][adjColDef.key] !== '' && this.data[ri][adjColDef.key] !== undefined) {\n lastFilledRow = ri\n } else break\n }\n if (lastFilledRow <= src.endRow) return\n\n const count = lastFilledRow - src.endRow\n const oldData = this.data\n const newData = oldData.slice()\n const skipped = []\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (!col) continue\n const srcValues = []\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n srcValues.push(oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ri = src.endRow + 1 + k\n if (ri < this.totalRows && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n // =========================================================\n // COPY / PASTE (3.4)\n // =========================================================\n copySelection() {\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n this.clipboardMatrix = extractMatrix(this.data, this.leafCols, r)\n this.clipboardRange = r\n this.clipboardMode = 'copy'\n\n // Write to system clipboard as TSV\n const tsv = matrixToTSV(this.clipboardMatrix)\n if (navigator.clipboard) {\n navigator.clipboard.writeText(tsv).catch(() => {})\n }\n },\n\n cutSelection() {\n this.copySelection()\n this.clipboardMode = 'cut'\n },\n\n async pasteAt(targetRow, targetCol, options = {}) {\n const { mode = 'all', transpose = false } = options\n\n let matrix = null\n\n // Try system clipboard first\n if (navigator.clipboard) {\n try {\n const text = await navigator.clipboard.readText()\n if (text) matrix = tsvToMatrix(text)\n } catch (_) {}\n }\n\n // Fall back to internal clipboard\n if (!matrix && this.clipboardMatrix) {\n matrix = this.clipboardMatrix\n }\n\n if (!matrix) return\n\n if (transpose) matrix = transposeMatrix(matrix)\n\n // ── Excel-style selection broadcast / tiling ──────────────────────────\n // When pasting over a multi-cell selection and the clipboard matrix is\n // smaller than the selection, tile the matrix to fill the selection —\n // provided the selection dimensions are exact multiples of the matrix\n // dimensions (matches Excel's tiling rule exactly).\n // Cut-paste is never tiled (source must be cleared exactly once).\n const isCopyPaste = !this.clipboardMode || this.clipboardMode === 'copy'\n if (isCopyPaste) {\n const pr = this.primaryRange\n if (pr) {\n const sel = normalizeRange(pr)\n const selRows = sel.endRow - sel.startRow + 1\n const selCols = sel.endCol - sel.startCol + 1\n const matRows = matrix.length\n const matCols = matrix[0] ? matrix[0].length : 0\n\n // Only tile when selection is strictly larger than clipboard\n if ((selRows > matRows || selCols > matCols) &&\n selRows % matRows === 0 && selCols % matCols === 0) {\n matrix = tileMatrix(matrix, selRows, selCols)\n // Paste at selection origin, not just at the active cell\n targetRow = sel.startRow\n targetCol = sel.startCol\n }\n }\n }\n\n const oldData = this.data\n const { newData, affectedRange, skipped } = applyMatrix(\n oldData, this.leafCols, targetRow, targetCol, matrix, mode,\n (ri, ci) => this.isCellEditable(ri, ci),\n (ri, ci, v) => this.isCellValueValid(ri, ci, v)\n )\n\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n\n if (this.clipboardMode === 'cut' && this.clipboardRange) {\n // Clear source — ensure each source row is a new copy before mutation\n const src = this.clipboardRange\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci) && this.isCellValueValid(ri, ci, '')) {\n newData[ri][col.key] = ''\n }\n }\n }\n this.clipboardRange = null\n this.clipboardMode = null\n }\n\n this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n ctxCopy() { this.hideContextMenu(); this.copySelection() },\n ctxCut() { this.hideContextMenu(); this.cutSelection() },\n ctxPaste() { this.hideContextMenu(); this.pasteAt(this.activeCell.row, this.activeCell.col) },\n ctxPasteSpecial(mode, transpose = false) {\n this.hideContextMenu()\n this.pasteAt(this.activeCell.row, this.activeCell.col, { mode, transpose })\n },\n\n // =========================================================\n // COLUMN DRAG-AND-DROP\n // =========================================================\n\n _computeDragOffsets(dropIndex) {\n const { sourceFirstLeaf, sourceLeafCount } = this.colDrag\n if (dropIndex < 0 || (dropIndex >= sourceFirstLeaf && dropIndex <= sourceFirstLeaf + sourceLeafCount)) return {}\n\n const previewCols = moveColumnNodeInTree(this.columns, sourceFirstLeaf, sourceLeafCount, dropIndex)\n const previewLeaves = flattenColumns(previewCols)\n\n const byKey = {}\n this.leafCols.forEach(c => { byKey[c.key] = c })\n\n const offsets = {}\n for (const zone of ['left', 'scroll', 'right']) {\n const inZone = zone === 'left'\n ? ci => this.isColumnPinnedLeft(ci)\n : zone === 'right'\n ? ci => this.isColumnPinnedRight(ci)\n : ci => this.isColumnScrollable(ci)\n\n const origPos = {}\n let acc = 0\n this.leafCols.forEach(col => {\n const ci = col._flatIndex\n if (this.isColHidden(ci) || !inZone(ci)) return\n origPos[col.key] = acc\n acc += this.getColW(ci)\n })\n\n const previewPos = {}\n acc = 0\n for (const col of previewLeaves) {\n const origCol = byKey[col.key]\n if (!origCol) continue\n const ci = origCol._flatIndex\n if (this.isColHidden(ci) || !inZone(ci)) continue\n previewPos[col.key] = acc\n acc += this.getColW(ci)\n }\n\n for (const key of Object.keys(origPos)) {\n offsets[key] = (previewPos[key] !== undefined ? previewPos[key] : origPos[key]) - origPos[key]\n }\n }\n return offsets\n },\n\n _applyDragTransforms(offsets) {\n if (!this.$el) return\n // Leaf header cells + all body cells (data-fi = flat column index)\n this.$el.querySelectorAll('[data-fi]').forEach(el => {\n const fi = parseInt(el.dataset.fi)\n const col = this.leafCols[fi]\n const dx = col ? (offsets[col.key] || 0) : 0\n el.style.transform = dx ? `translateX(${dx}px)` : ''\n })\n // Group header cells (data-start/data-end = leaf range)\n this.$el.querySelectorAll('[data-start]').forEach(el => {\n const start = parseInt(el.dataset.start)\n const end = parseInt(el.dataset.end)\n if (isNaN(start)) return\n let key = null\n for (let i = start; i <= end; i++) {\n if (!this.isColHidden(i) && this.leafCols[i]) { key = this.leafCols[i].key; break }\n }\n const dx = key ? (offsets[key] || 0) : 0\n el.style.transform = dx ? `translateX(${dx}px)` : ''\n })\n },\n\n _clearDragTransforms() {\n if (!this.$el) return\n this.$el.querySelectorAll('[data-fi], [data-start]').forEach(el => {\n el.style.transform = ''\n })\n },\n\n handleColDragMove(e) {\n this.colDrag.currentX = e.clientX\n this.colDrag.currentY = e.clientY\n\n const prevDrop = this.colDrag.dropIndex\n this._updateColDragDropIndex(e.clientX)\n const newDrop = this.colDrag.dropIndex\n\n if (newDrop !== prevDrop) {\n this._dragOffsets = this._computeDragOffsets(newDrop)\n this._applyDragTransforms(this._dragOffsets)\n }\n },\n\n _updateColDragDropIndex(clientX) {\n if (!this.$el) return\n const n = this.leafCols.length\n if (n === 0) { this.colDrag.dropIndex = 0; return }\n\n // Use DOM cell rects but subtract CSS transforms so we get ORIGINAL positions.\n // This avoids circular dependency: live-preview transforms don't affect drop calc.\n const cells = Array.from(this.$el.querySelectorAll('.eg-header-cell:not(.eg-header-group)'))\n .map(el => {\n const fi = parseInt(el.dataset.fi)\n if (isNaN(fi)) return null\n const rect = el.getBoundingClientRect()\n const m = (el.style.transform || '').match(/translateX\\((-?[\\d.]+)px\\)/)\n const dx = m ? parseFloat(m[1]) : 0\n return { fi, left: rect.left - dx, right: rect.right - dx }\n })\n .filter(Boolean)\n .sort((a, b) => a.left - b.left)\n\n if (!cells.length) { this.colDrag.dropIndex = n; return }\n\n let dropIndex = n\n for (const { fi, left, right } of cells) {\n if (clientX < right) {\n dropIndex = clientX < left + (right - left) / 2 ? fi : fi + 1\n break\n }\n }\n this.colDrag.dropIndex = dropIndex\n },\n\n commitColDrag() {\n const from = this.colDrag.sourceFirstLeaf\n const leafCount = this.colDrag.sourceLeafCount\n const to = this.colDrag.dropIndex\n\n // Clear DOM transforms BEFORE any Vue state change so the browser never sees\n // a frame with stale transforms + new column positions (the flicker source).\n this._clearDragTransforms()\n this._dragOffsets = {}\n this._resetColDrag()\n\n if (from < 0 || to < 0 || leafCount < 1) return\n if (to >= from && to <= from + leafCount) return\n\n const newCols = moveColumnNodeInTree(this.columns, from, leafCount, to)\n this.$emit('update:columns', newCols)\n this.$emit('column-reorder', { fromIndex: from, toIndex: to, columns: newCols })\n },\n\n _resetColDrag() {\n this._clearDragTransforms()\n this._dragOffsets = {}\n this.colDrag.pending = false\n this.colDrag.active = false\n this.colDrag.sourceFirstLeaf = -1\n this.colDrag.sourceLeafCount = 1\n this.colDrag.dropIndex = -1\n this.colDrag.ghostLabel = ''\n },\n\n // =========================================================\n // RESIZE (3.5)\n // =========================================================\n startColResize(e, ci) {\n const rect = this.$refs.wrapper.getBoundingClientRect()\n this.resizing = {\n active: true,\n type: 'col',\n index: ci,\n startX: e.clientX,\n startY: e.clientY,\n startSize: this.getColW(ci),\n currentPos: e.clientX\n }\n e.preventDefault()\n },\n\n startRowResize(e, ri) {\n this.resizing = {\n active: true,\n type: 'row',\n index: ri,\n startX: e.clientX,\n startY: e.clientY,\n startSize: this.getRowH(ri),\n currentPos: e.clientY\n }\n e.preventDefault()\n },\n\n handleResizeMove(e) {\n if (this.resizing.type === 'col') {\n this.resizing.currentPos = e.clientX\n const newWidth = Math.max(20, this.resizing.startSize + (e.clientX - this.resizing.startX))\n this.$set(this.colWidths, this.resizing.index, newWidth)\n this._cellStyleCache = Object.create(null)\n } else {\n this.resizing.currentPos = e.clientY\n this._resizePreviewHeight = Math.max(10, this.resizing.startSize + (e.clientY - this.resizing.startY))\n // Batch $set + updateVirtualScroll to rAF — prevents O(n) cumulativeHeights rebuild\n // on every mousemove (200+ Hz). At most 60 rebuilds/sec instead of 200+.\n if (!this._resizeRAF) {\n this._resizeRAF = requestAnimationFrame(() => {\n this._resizeRAF = null\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n this._cellStyleCache = Object.create(null)\n this.$set(this.rowHeights, this.resizing.index, this._resizePreviewHeight)\n this.updateVirtualScroll()\n })\n }\n }\n },\n\n commitResize() {\n if (this._resizeRAF) {\n cancelAnimationFrame(this._resizeRAF)\n this._resizeRAF = null\n // Apply the last pending preview height immediately on commit\n if (this.resizing.type === 'row' && this._resizePreviewHeight !== undefined) {\n this.$set(this.rowHeights, this.resizing.index, this._resizePreviewHeight)\n }\n }\n if (this.resizing.type === 'col') {\n this._cellStyleCache = Object.create(null)\n const newSize = this.colWidths[this.resizing.index]\n this.$emit('column-resize', { index: this.resizing.index, newSize })\n } else {\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n this._cellStyleCache = Object.create(null)\n const newSize = this.rowHeights[this.resizing.index]\n this.$emit('row-resize', { index: this.resizing.index, newSize })\n this.updateVirtualScroll()\n }\n this.resizing.active = false\n },\n\n autoFitColumn(ci) {\n const col = this.leafCols[ci]\n if (!col) return\n let maxLen = (col.title || '').length\n for (let ri = 0; ri < Math.min(this.totalRows, 500); ri++) {\n const v = this.data[ri] ? String(this.data[ri][col.key] || '') : ''\n if (v.length > maxLen) maxLen = v.length\n }\n const newWidth = Math.max(50, maxLen * 8 + 16)\n this.$set(this.colWidths, ci, newWidth)\n this._cellStyleCache = Object.create(null)\n this.$emit('column-resize', { index: ci, newSize: newWidth })\n },\n\n _applyAutoWidth() {\n if (!this.autoWidth || !this.leafCols.length) return\n this.leafCols.forEach((col, ci) => {\n let maxLen = (col.title || '').length\n for (let ri = 0; ri < Math.min(this.totalRows, 500); ri++) {\n const v = this.data[ri] ? String(this.data[ri][col.key] || '') : ''\n if (v.length > maxLen) maxLen = v.length\n }\n this.$set(this.colWidths, ci, Math.max(50, maxLen * 8 + 16))\n })\n this._cellStyleCache = Object.create(null)\n },\n\n ctxHideRow() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n const newHidden = [...this.hiddenRows]\n for (let ri = r.startRow; ri <= r.endRow; ri++) {\n if (!newHidden.includes(ri)) newHidden.push(ri)\n }\n this.$emit('update:hiddenRows', newHidden)\n },\n\n ctxHideColumn() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n const newHidden = [...this.hiddenColumns]\n for (let ci = r.startCol; ci <= r.endCol; ci++) {\n if (!newHidden.includes(ci)) newHidden.push(ci)\n }\n this.$emit('update:hiddenColumns', newHidden)\n },\n\n ctxUnhideRows() {\n this.hideContextMenu()\n this.$emit('update:hiddenRows', [])\n },\n\n ctxUnhideColumns() {\n this.hideContextMenu()\n this.$emit('update:hiddenColumns', [])\n },\n\n ctxPinLeft() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n this.$emit('update:pinnedColumns', { ...this.pinnedColumns, [col.key]: 'left' })\n this.hideContextMenu()\n },\n\n ctxPinRight() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n this.$emit('update:pinnedColumns', { ...this.pinnedColumns, [col.key]: 'right' })\n this.hideContextMenu()\n },\n\n ctxUnpin() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n const next = { ...this.pinnedColumns }\n delete next[col.key]\n this.$emit('update:pinnedColumns', next)\n this.hideContextMenu()\n },\n\n isColPinned(ci) {\n const col = this.leafCols[ci]\n return !!(col && this.pinnedColumns[col.key])\n },\n\n // =========================================================\n // MERGE CELLS (3.8)\n // =========================================================\n mergeCells(range) {\n const oldMerges = this.internalMerges.slice()\n const { merges: newMerges, conflict } = addMerge(range, this.internalMerges)\n if (conflict) {\n this.$emit('merge-error', { range, reason: 'Overlaps existing merge' })\n return false\n }\n this.internalMerges = newMerges\n this._emitMergeChange(oldMerges, [...newMerges])\n return true\n },\n\n unmergeCells(row, col) {\n const oldMerges = this.internalMerges.slice()\n const newMerges = removeMergeAt(row, col, this.internalMerges)\n this.internalMerges = newMerges\n this._emitMergeChange(oldMerges, [...newMerges])\n },\n\n ctxMerge() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n this.mergeCells(normalizeRange(pr))\n },\n\n ctxUnmerge() {\n this.hideContextMenu()\n this.unmergeCells(this.activeCell.row, this.activeCell.col)\n },\n\n // =========================================================\n // GROUPING (3.7)\n // =========================================================\n groupRows(startIndex, endIndex) {\n this.internalGroups = addGroup('row', startIndex, endIndex, this.internalGroups)\n },\n\n groupColumns(startIndex, endIndex) {\n this.internalGroups = addGroup('column', startIndex, endIndex, this.internalGroups)\n },\n\n ungroupRows(startIndex, endIndex) {\n this.internalGroups = removeGroup('row', startIndex, endIndex, this.internalGroups)\n },\n\n ungroupColumns(startIndex, endIndex) {\n this.internalGroups = removeGroup('column', startIndex, endIndex, this.internalGroups)\n },\n\n toggleGroup(group) {\n this.internalCollapsedGroups = toggleGroupCollapse(group, this.internalCollapsedGroups)\n this.$emit('update:collapsedGroups', [...this.internalCollapsedGroups])\n this.$emit('group-toggle', { group, collapsed: _isGroupCollapsed(group, this.internalCollapsedGroups) })\n this.updateVirtualScroll()\n },\n\n isGroupCollapsed(group) {\n return _isGroupCollapsed(group, this.internalCollapsedGroups)\n },\n\n expandAll() {\n this.internalCollapsedGroups = []\n this.$emit('update:collapsedGroups', [])\n this.updateVirtualScroll()\n },\n\n collapseAll() {\n this.internalCollapsedGroups = [...this.internalGroups]\n this.$emit('update:collapsedGroups', [...this.internalGroups])\n this.updateVirtualScroll()\n },\n\n // =========================================================\n // DRAG AND DROP (3.9)\n // =========================================================\n startDragMove(e, ri, ci) {\n const pr = this.primaryRange\n if (!pr) return\n this.dragMove = {\n active: true,\n sourceRange: normalizeRange(pr),\n startX: e.clientX,\n startY: e.clientY,\n targetRow: ri,\n targetCol: ci,\n copyMode: e.ctrlKey || e.metaKey\n }\n this.$emit('cell-drag-start', { sourceRange: this.dragMove.sourceRange })\n e.preventDefault()\n },\n\n handleDragMoveMove(e) {\n this.dragMove.copyMode = e.ctrlKey || e.metaKey\n this.$emit('cell-drag-move', {\n sourceRange: this.dragMove.sourceRange,\n targetRow: this.dragMove.targetRow,\n targetCol: this.dragMove.targetCol\n })\n },\n\n async commitDragMove(e) {\n if (!this.dragMove.active) return\n const { sourceRange, targetRow, targetCol, copyMode } = this.dragMove\n\n const targetRange = {\n startRow: targetRow,\n startCol: targetCol,\n endRow: targetRow + (sourceRange.endRow - sourceRange.startRow),\n endCol: targetCol + (sourceRange.endCol - sourceRange.startCol)\n }\n\n let proceed = true\n if (this.beforeDrop) {\n proceed = await Promise.resolve(this.beforeDrop(sourceRange, targetRange))\n }\n\n if (proceed) {\n const oldData = this.data\n const matrix = extractMatrix(oldData, this.leafCols, sourceRange)\n const { newData } = applyMatrix(oldData, this.leafCols, targetRow, targetCol, matrix, 'all', (ri, ci) => this.isCellEditable(ri, ci))\n\n if (!copyMode) {\n // Clear source — ensure each source row is a new copy before mutation\n for (let ri = sourceRange.startRow; ri <= sourceRange.endRow; ri++) {\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n for (let ci = sourceRange.startCol; ci <= sourceRange.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) newData[ri][col.key] = ''\n }\n }\n }\n this._emitDataChange(oldData, newData)\n this.$emit('cell-drop', { sourceRange, targetRange })\n }\n\n this.dragMove = { active: false, sourceRange: null, startX: 0, startY: 0, targetRow: -1, targetCol: -1, copyMode: false }\n this.isMouseDown = false\n },\n\n // =========================================================\n // EXCEL EXPORT (3.11)\n // =========================================================\n async exportToExcel(options = {}) {\n const {\n filename = 'export.xlsx',\n sheetName = 'Sheet1',\n scope = 'all',\n includeHidden = false\n } = options\n\n this.$emit('export-start')\n this.exportState = { active: true }\n\n const workerPayload = {\n data: this.data,\n columns: this.columns,\n leafCols: this.leafCols,\n merges: this.internalMerges,\n hiddenCols: [...this.effectiveHiddenColSet],\n hiddenRows: [...this.hiddenRowSet],\n range: scope === 'selection' ? this.primaryRange : null,\n filename,\n sheetName,\n scope,\n includeHidden\n }\n\n try {\n const worker = createExcelExportWorker()\n if (worker) {\n await this._exportViaWorker(worker, workerPayload)\n } else {\n // Fallback: synchronous export on main thread\n _exportToExcel({\n ...workerPayload,\n hiddenColSet: this.effectiveHiddenColSet,\n hiddenRowSet: this.hiddenRowSet\n })\n }\n this.$emit('export-success')\n } catch (err) {\n this.$emit('export-error', err)\n } finally {\n this.exportState = { active: false }\n }\n },\n\n _exportViaWorker(worker, payload) {\n return new Promise((resolve, reject) => {\n let done = false\n const finish = (fn, val) => {\n if (done) return\n done = true\n worker.terminate()\n fn(val)\n }\n\n worker.onmessage = (e) => {\n const { type, buffer, filename, message } = e.data\n if (type === 'result') {\n // Trigger browser download from the main thread (DOM required)\n const blob = new Blob([new Uint8Array(buffer)], {\n type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'\n })\n const url = URL.createObjectURL(blob)\n const a = document.createElement('a')\n a.href = url\n a.download = filename\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n finish(resolve)\n } else if (type === 'error') {\n finish(reject, new Error(message))\n }\n }\n\n worker.onerror = (err) => finish(reject, new Error(err.message || 'Export worker xatosi'))\n\n worker.postMessage(payload)\n })\n },\n\n // =========================================================\n // EXCEL IMPORT (3.12)\n // =========================================================\n async importFromFile(file, options = {}) {\n this.importState = { active: true, percent: 5, message: \"Fayl o'qilmoqda...\" }\n\n try {\n let result\n const worker = createExcelImportWorker()\n\n if (worker) {\n result = await this._importViaWorker(worker, file, options)\n } else {\n // Fallback: chunked async on main thread\n result = await _importFromFile(\n file,\n this.columns,\n options,\n (percent, message) => { this.importState = { active: true, percent, message } }\n )\n }\n\n const { columns, merges } = result\n // Freeze each row so Vue 2 skips deep Object.defineProperty observation.\n // Vue 2 checks Object.isExtensible() — frozen objects are skipped entirely.\n // All edit paths already use spread ({ ...row }) so frozen rows are safe.\n const data = result.data.map(row => Object.freeze(row))\n this.$emit('input', data)\n this.$emit('update:columns', columns)\n\n const hasMerges = merges && merges.length > 0\n this.internalMerges = hasMerges ? merges : []\n this.$emit('update:merges', hasMerges ? merges : [])\n this.$emit('update:collapsedGroups', [])\n this.$emit('update:hiddenRows', [])\n this.$emit('import-success', { data, columns, merges })\n\n // Reset scroll state and re-derive virtual scroll after DOM settles.\n // Without this, stale scrollTop + old rowHeights cause blank bands on scroll.\n this.rowHeights = {}\n this.scrollTop = 0\n this.scrollLeft = 0\n this.$nextTick(() => {\n if (this.$refs.scrollBody) {\n this.$refs.scrollBody.scrollTop = 0\n this.$refs.scrollBody.scrollLeft = 0\n }\n if (this.$refs.scrollColHeader) this.$refs.scrollColHeader.scrollLeft = 0\n if (this.$refs.scrollFooter) this.$refs.scrollFooter.scrollLeft = 0\n if (this.$refs.scrollRowHeaders) this.$refs.scrollRowHeaders.scrollTop = 0\n this.updateVirtualScroll()\n })\n } catch (err) {\n this.$emit('import-error', err)\n } finally {\n this.importState = { active: false, percent: 0, message: '' }\n }\n },\n\n _importViaWorker(worker, file, options) {\n return new Promise(async (resolve, reject) => {\n let done = false\n const finish = (fn, val) => {\n if (done) return\n done = true\n worker.terminate()\n fn(val)\n }\n\n worker.onmessage = (e) => {\n const { type, percent, message, data, columns, merges } = e.data\n if (type === 'progress') {\n this.importState = { active: true, percent, message }\n } else if (type === 'result') {\n finish(resolve, { data, columns, merges })\n } else if (type === 'error') {\n finish(reject, new Error(message))\n }\n }\n\n worker.onerror = (err) => finish(reject, new Error(err.message || 'Import worker xatosi'))\n\n try {\n // Transfer the ArrayBuffer zero-copy into the worker\n const buffer = await file.arrayBuffer()\n worker.postMessage(\n { buffer, existingColumns: this.columns, options },\n [buffer]\n )\n } catch (err) {\n finish(reject, err)\n }\n })\n },\n\n // =========================================================\n // UNDO / REDO (3.13)\n // =========================================================\n\n // Push one entry onto the non-reactive history stack.\n // Truncates the redo tail, caps at 100 entries.\n _pushHistory(entry) {\n if (this._historyIndex < this._history.length - 1) {\n this._history.splice(this._historyIndex + 1)\n }\n this._history.push(entry)\n if (this._history.length > 100) {\n this._history.shift()\n // historyIndex stays the same — it now points to the new last entry\n } else {\n this._historyIndex++\n }\n },\n\n // Emit 'input' and record a data diff entry (only changed row indices).\n // Use slice() + per-row spread in callers so unchanged rows keep the\n // same reference — then the identity check here catches only real changes.\n _emitDataChange(oldData, newData) {\n if (!this._historySkip) {\n const indices = []\n const beforeRows = []\n const afterRows = []\n const len = Math.max(oldData.length, newData.length)\n for (let i = 0; i < len; i++) {\n if (oldData[i] !== newData[i]) {\n indices.push(i)\n beforeRows.push(oldData[i])\n afterRows.push(newData[i])\n }\n }\n if (indices.length > 0) {\n this._pushHistory({\n type: 'data',\n before: { indices, rows: beforeRows },\n after: { indices, rows: afterRows }\n })\n }\n }\n this.$emit('input', newData)\n },\n\n // Emit 'update:merges' and record a merges diff entry.\n _emitMergeChange(oldMerges, newMerges) {\n if (!this._historySkip) {\n this._pushHistory({\n type: 'merges',\n before: oldMerges,\n after: newMerges\n })\n }\n this.$emit('update:merges', newMerges)\n },\n\n undo() {\n if (this._historyIndex < 0) return\n const entry = this._history[this._historyIndex--]\n this._historySkip = true\n try {\n if (entry.type === 'data') {\n const newData = this.data.slice()\n for (let i = 0; i < entry.before.indices.length; i++) {\n newData[entry.before.indices[i]] = entry.before.rows[i]\n }\n this.$emit('input', newData)\n } else if (entry.type === 'merges') {\n this.internalMerges = entry.before.slice()\n this.$emit('update:merges', entry.before.slice())\n }\n } finally {\n this._historySkip = false\n }\n },\n\n redo() {\n if (this._historyIndex >= this._history.length - 1) return\n const entry = this._history[++this._historyIndex]\n this._historySkip = true\n try {\n if (entry.type === 'data') {\n const newData = this.data.slice()\n for (let i = 0; i < entry.after.indices.length; i++) {\n newData[entry.after.indices[i]] = entry.after.rows[i]\n }\n this.$emit('input', newData)\n } else if (entry.type === 'merges') {\n this.internalMerges = entry.after.slice()\n this.$emit('update:merges', entry.after.slice())\n }\n } finally {\n this._historySkip = false\n }\n }\n }\n}\n<\/script>\n\n<style scoped>\n.eg-wrapper {\n /* ── Design tokens (Excel 365 defaults) — override on :root or any ancestor of <excel-grid> ──\n Full reference: docs/theming.md\n */\n\n /* --- Typography --- */\n --eg-font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;\n --eg-font-size: 14px;\n --eg-font-size-header: 11px;\n\n /* --- Shape --- */\n --eg-radius: 0px;\n --eg-cell-padding-x: 3px;\n\n /* --- Accent (Excel green) --- */\n --eg-color-accent: #217346;\n --eg-color-accent-dark: #185a30;\n --eg-color-accent-soft: rgba(33, 115, 70, 0.15);\n\n /* --- Error / Validation --- */\n --eg-color-error: #c00000;\n --eg-color-error-soft: #fff2f2;\n --eg-color-error-dark: #9b0000;\n\n /* --- Borders --- */\n --eg-color-border: #d9d9d9;\n --eg-color-border-cell: #d9d9d9;\n --eg-color-border-strong: #bfbfbf;\n\n /* --- Header --- */\n --eg-color-header-bg: #f2f2f2;\n --eg-color-header-group-bg: #f2f2f2;\n --eg-color-group-border: #92d050;\n --eg-color-group-bg-collapsed: #70ad47;\n\n /* --- Cell states --- */\n --eg-color-cell-bg: #ffffff;\n --eg-color-cell-selected: #bdd7ee;\n --eg-color-cell-fill-preview: #9bc2e6;\n --eg-color-cell-readonly: #f2f2f2;\n --eg-color-cell-readonly-selected: #a9c9e4;\n --eg-color-footer-bg: #f2f2f2;\n\n /* --- Text --- */\n --eg-color-text: #000000;\n --eg-color-text-secondary: #595959;\n --eg-color-text-muted: #767676;\n\n /* --- Shadows --- */\n --eg-shadow-dropdown: 1px 2px 8px rgba(0, 0, 0, 0.18);\n --eg-shadow-dialog: 0 2px 12px rgba(0, 0, 0, 0.22);\n --eg-shadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.18);\n --eg-color-freeze-shadow: rgba(0, 0, 0, 0.12);\n\n /* --- Overlay & dropdown options --- */\n --eg-color-overlay-bg: rgba(255, 255, 255, 0.88);\n --eg-color-option-hover-bg: #e2efda;\n --eg-color-option-active-hover-bg: #c6e0b4;\n\n /* --- Checkbox --- */\n --eg-color-checkbox-border: #767676;\n --eg-color-checkbox-disabled-checked: #bfbfbf;\n\n /* --- Row effects (off by default) --- */\n --eg-color-row-hover: transparent;\n --eg-color-row-stripe: transparent;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n font-family: var(--eg-font-family);\n}\n\n.eg-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: auto;\n position: relative;\n}\n\n.eg-header-area {\n display: flex;\n flex-shrink: 0;\n box-shadow: 0 2px 0 0 var(--eg-color-border-cell);\n position: relative;\n z-index: 31;\n}\n\n.eg-header-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border);\n border-bottom: 1px solid var(--eg-color-border);\n background: var(--eg-color-header-bg);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n position: absolute;\n user-select: none;\n cursor: pointer;\n}\n\n.eg-header-cell:hover { background: var(--eg-color-border-cell); }\n.eg-header-group { background: var(--eg-color-header-group-bg); }\n\n.eg-col-resize-handle {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 5px;\n cursor: col-resize;\n z-index: 5;\n}\n\n.eg-body-area {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n/* ===== FOOTER AREA (column totals) ===== */\n.eg-footer-area {\n border-top: 1px solid var(--eg-color-border);\n}\n\n.eg-frozen-col-footer,\n.eg-scroll-col-footer,\n.eg-pinned-right-footer {\n position: relative;\n}\n\n.eg-footer-cell {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n font-weight: 600;\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-footer-bg);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n\n.eg-row {\n position: relative;\n}\n\n.eg-cell {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n border-bottom: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-cell-bg);\n cursor: default;\n display: flex;\n align-items: center;\n}\n\n.eg-cell-value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n.eg-cell--has-suffix.eg-cell-select::after { display: none; }\n.eg-cell-select-trigger-wrap {\n flex: 1;\n display: flex;\n align-items: center;\n overflow: hidden;\n min-width: 0;\n}\n.eg-cell-select-caret-inline {\n flex-shrink: 0;\n color: var(--eg-color-text-muted);\n font-size: 11px;\n margin-left: 2px;\n}\n.eg-cell-suffix-wrap {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n}\n.eg-cell-active {\n outline: 2px solid var(--eg-color-accent) !important;\n outline-offset: -2px;\n z-index: 3;\n}\n\n.eg-cell-selected {\n background: var(--eg-color-cell-selected) !important;\n}\n\n.eg-cell-fill-preview {\n background: var(--eg-color-cell-fill-preview) !important;\n outline: 1px dashed var(--eg-color-accent-dark);\n outline-offset: -1px;\n}\n\n.eg-cell-copy {\n outline: 1px dashed var(--eg-color-accent);\n outline-offset: -1px;\n}\n\n.eg-cell-merged-hidden {\n display: none !important;\n}\n\n.eg-cell-invalid {\n outline: 2px solid var(--eg-color-error) !important;\n outline-offset: -2px;\n z-index: 4;\n}\n\n.eg-cell-input {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: var(--eg-color-cell-bg);\n font-size: var(--eg-font-size);\n font-family: inherit;\n padding: 0;\n}\n\n.eg-row-header-cell {\n box-sizing: border-box;\n background: var(--eg-color-header-bg);\n border-bottom: 1px solid var(--eg-color-border-cell);\n border-right: 2px solid var(--eg-color-border-strong);\n text-align: center;\n font-size: 11px;\n color: var(--eg-color-text-secondary);\n cursor: pointer;\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.eg-row-resize-handle {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 4px;\n cursor: row-resize;\n z-index: 5;\n}\n\n.eg-fill-handle {\n position: absolute;\n width: 6px;\n height: 6px;\n background: var(--eg-color-accent);\n border: 1px solid white;\n cursor: crosshair;\n z-index: 10;\n}\n\n.eg-context-menu {\n position: fixed;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n z-index: 9999;\n min-width: 160px;\n font-size: var(--eg-font-size);\n padding: 4px 0;\n}\n\n.eg-context-item {\n padding: 6px 16px;\n cursor: pointer;\n position: relative;\n}\n\n.eg-context-item:hover { background: var(--eg-color-header-bg); }\n\n.eg-context-separator {\n height: 1px;\n background: var(--eg-color-border-cell);\n margin: 4px 0;\n}\n\n.eg-context-submenu-parent::after { content: ' ▶'; float: right; }\n\n.eg-context-submenu {\n display: none;\n position: absolute;\n left: 100%;\n top: -4px;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n min-width: 160px;\n padding: 4px 0;\n z-index: 10000;\n}\n\n.eg-context-submenu-parent:hover .eg-context-submenu { display: block; }\n\n.eg-group-btn {\n position: absolute;\n width: 16px;\n height: 16px;\n line-height: 14px;\n text-align: center;\n font-size: 10px;\n cursor: pointer;\n background: var(--eg-color-header-group-bg);\n border: 1px solid var(--eg-color-group-border);\n border-radius: 2px;\n z-index: 5;\n user-select: none;\n}\n\n.eg-group-btn.collapsed { background: var(--eg-color-group-bg-collapsed); }\n\n.eg-drag-ghost {\n position: absolute;\n border: 2px dashed var(--eg-color-accent);\n pointer-events: none;\n z-index: 20;\n}\n\n/* Column drag-and-drop */\n.eg-header-cell--drag-source {\n opacity: 0.5;\n outline: 1px solid var(--eg-color-accent);\n outline-offset: -1px;\n}\n.eg-cell--drag-source {\n opacity: 0.4;\n}\n.eg-col-drag-ghost {\n position: fixed;\n padding: 3px 10px;\n background: var(--eg-color-header-bg);\n border: 1px solid var(--eg-color-accent);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n color: var(--eg-color-text);\n white-space: nowrap;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.92;\n transform: translateY(-2px);\n}\n\n.eg-resize-line {\n pointer-events: none;\n z-index: 9999;\n}\n\n/* Pin left separator shadow */\n.eg-frozen-col-body::after {\n content: '';\n position: absolute;\n top: 0;\n right: -4px;\n width: 4px;\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n\n.eg-pinned-right-body {\n position: sticky;\n right: 0;\n z-index: 10;\n background: var(--eg-color-cell-bg);\n flex-shrink: 0;\n}\n\n.eg-pinned-right-body::before {\n content: '';\n position: absolute;\n top: 0;\n left: -4px;\n bottom: 0;\n width: 4px;\n background: linear-gradient(to left, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n\n.eg-pinned-right-header {\n overflow: hidden;\n flex-shrink: 0;\n border-left: 2px solid var(--eg-color-border-strong);\n background: var(--eg-color-header-bg);\n}\n\n.eg-import-overlay {\n position: absolute;\n inset: 0;\n background: var(--eg-color-overlay-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n border-radius: var(--eg-radius);\n}\n\n.eg-import-dialog {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: 8px;\n padding: 24px 32px;\n min-width: 280px;\n box-shadow: var(--eg-shadow-dialog);\n text-align: center;\n}\n\n.eg-import-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--eg-color-text);\n margin-bottom: 16px;\n}\n\n.eg-import-bar-wrap {\n height: 8px;\n background: var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n overflow: hidden;\n margin-bottom: 10px;\n}\n\n.eg-import-bar {\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-accent), #4caf50);\n border-radius: var(--eg-radius);\n transition: width 0.15s ease;\n}\n\n.eg-import-msg {\n font-size: 12px;\n color: var(--eg-color-text-secondary);\n margin-bottom: 4px;\n}\n\n.eg-import-pct {\n font-size: var(--eg-font-size);\n font-weight: 600;\n color: var(--eg-color-accent);\n}\n.eg-export-spinner {\n width: 32px;\n height: 32px;\n margin: 12px auto 0;\n border: 3px solid var(--eg-color-border-cell);\n border-top-color: var(--eg-color-accent);\n border-radius: 50%;\n animation: eg-spin 0.8s linear infinite;\n}\n@keyframes eg-spin {\n to { transform: rotate(360deg); }\n}\n\n/* ===== READONLY CELL ===== */\n.eg-cell-readonly {\n background: var(--eg-color-cell-readonly);\n cursor: default;\n}\n.eg-cell-readonly.eg-cell-selected {\n background: var(--eg-color-cell-readonly-selected);\n}\n.eg-cell-readonly.eg-cell-active {\n outline-color: var(--eg-color-text-muted);\n}\n\n/* ===== SELECT DROPDOWN ===== */\n.eg-cell-select {\n cursor: pointer;\n}\n.eg-cell-select::after {\n content: '▾';\n position: absolute;\n right: 4px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--eg-color-text-muted);\n font-size: 11px;\n pointer-events: none;\n line-height: 1;\n}\n\n/* ===== CHECKBOX CELL ===== */\n.eg-cell-checkbox {\n justify-content: center;\n padding: 0 2px;\n}\n.eg-validation-tooltip {\n background: var(--eg-color-error-soft);\n border: 1px solid var(--eg-color-error);\n color: var(--eg-color-error-dark);\n font-size: 12px;\n padding: 4px 8px;\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-tooltip);\n white-space: nowrap;\n pointer-events: none;\n}\n\n/* ===== ROW STRIPE & HOVER ===== */\n.eg-row--even .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-stripe);\n}\n.eg-row:hover .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-hover);\n}\n\n/* ===== SIZE VARIANTS ===== */\n\n/* small */\n.eg-size-small .eg-cell {\n font-size: 12px;\n padding: 0 3px;\n}\n.eg-size-small .eg-cell-input {\n font-size: 12px;\n}\n.eg-size-small .eg-header-cell {\n font-size: 11px;\n}\n.eg-size-small .eg-footer-cell {\n font-size: 12px;\n}\n.eg-size-small .eg-row-header-cell {\n font-size: 10px;\n}\n.eg-size-small .eg-select-option {\n font-size: 12px;\n padding: 4px 10px;\n}\n.eg-size-small .eg-context-menu,\n.eg-size-small .eg-context-item {\n font-size: 12px;\n}\n.eg-size-small .eg-context-item {\n padding: 4px 14px;\n}\n\n/* large */\n.eg-size-large .eg-cell {\n font-size: 14px;\n padding: 0 6px;\n}\n.eg-size-large .eg-cell-input {\n font-size: 14px;\n}\n.eg-size-large .eg-header-cell {\n font-size: var(--eg-font-size);\n}\n.eg-size-large .eg-footer-cell {\n font-size: 14px;\n}\n.eg-size-large .eg-row-header-cell {\n font-size: 12px;\n}\n.eg-size-large .eg-select-option {\n font-size: 14px;\n padding: 8px 14px;\n}\n.eg-size-large .eg-context-menu,\n.eg-size-large .eg-context-item {\n font-size: 14px;\n}\n.eg-size-large .eg-context-item {\n padding: 8px 18px;\n}\n</style>\n\n<style>\n/* ── EgSelect / EgTreeSelect dropdown (non-scoped: injected by ExcelGrid on mount) ── */\n.eg-select-wrapper {\n position: relative;\n display: inline-block;\n min-width: 120px;\n font-size: var(--eg-font-size);\n font-family: inherit;\n}\n.eg-select-trigger {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-height: 30px;\n padding: 4px 8px;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n background: var(--eg-color-cell-bg);\n cursor: pointer;\n user-select: none;\n color: var(--eg-color-text);\n transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover { border-color: var(--eg-color-accent); }\n.eg-select-trigger--open {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled { background: var(--eg-color-cell-readonly); cursor: default; color: var(--eg-color-text-muted); }\n.eg-select-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.eg-select-placeholder { color: var(--eg-color-text-muted); }\n.eg-select-caret { flex-shrink: 0; color: var(--eg-color-text-muted); font-size: 12px; }\n.eg-select-dropdown {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n overflow-y: auto;\n max-height: 320px;\n padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n z-index: 999;\n margin-top: 2px;\n}\n.eg-select-search {\n padding: 6px 8px;\n border-bottom: 1px solid var(--eg-color-border-cell);\n position: sticky;\n top: 0;\n background: var(--eg-color-cell-bg);\n z-index: 1;\n}\n.eg-select-search-input {\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n padding: 4px 8px;\n font-size: var(--eg-font-size);\n outline: none;\n color: var(--eg-color-text);\n background: var(--eg-color-cell-bg);\n font-family: inherit;\n}\n.eg-select-search-input:focus {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-option {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 12px;\n font-size: var(--eg-font-size);\n cursor: pointer;\n white-space: normal;\n word-break: break-word;\n user-select: none;\n color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted { background: var(--eg-color-option-hover-bg); }\n.eg-select-option--active { font-weight: 600; color: var(--eg-color-accent); }\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover { background: var(--eg-color-option-active-hover-bg); }\n.eg-select-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n flex-shrink: 0;\n display: inline-block;\n margin-top: 3px;\n}\n/* Tree toggle */\n.eg-tree-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--eg-color-text-muted);\n margin-top: 1px;\n}\n.eg-tree-toggle--leaf { visibility: hidden; }\n/* EgCheckbox */\n.eg-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.eg-checkbox-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.eg-checkbox-box {\n position: relative;\n display: block;\n width: 19px;\n height: 19px;\n box-sizing: border-box;\n background-color: var(--eg-color-cell-bg);\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0 0;\n border: 1.5px solid var(--eg-color-checkbox-border);\n border-radius: var(--eg-radius);\n transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;\n}\n.eg-checkbox:hover .eg-checkbox-box { border-color: var(--eg-color-accent); }\n.eg-checkbox-input:checked + .eg-checkbox-box {\n background-color: var(--eg-color-accent);\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==\");\n background-size: 70% 70%;\n border-color: var(--eg-color-accent);\n}\n.eg-checkbox-input:focus-visible + .eg-checkbox-box { box-shadow: 0 0 0 3px var(--eg-color-accent-soft); }\n.eg-checkbox--disabled,\n.eg-checkbox--disabled .eg-checkbox-input { cursor: default; }\n.eg-checkbox-input:disabled + .eg-checkbox-box { background-color: var(--eg-color-cell-readonly); border-color: var(--eg-color-border-cell); }\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box { background-color: var(--eg-color-checkbox-disabled-checked); border-color: var(--eg-color-checkbox-disabled-checked); }\n</style>\n"]},media:void 0}))},Z,"data-v-130dba58",false,void 0,!1,B,void 0,void 0);var ee={install(e){e.component("ExcelGrid",J),e.component("EgCheckbox",W),e.component("EgSelect",K),e.component("EgTreeSelect",N)}};e.EgCheckbox=W,e.EgSelect=K,e.EgTreeSelect=N,e.ExcelGrid=J,e.default=ee,Object.defineProperty(e,"__esModule",{value:!0})});
|
|
6
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("xlsx")):"function"==typeof define&&define.amd?define(["exports","xlsx"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).Vue2ExcelGrid={},e.XLSX)}(this,function(e,n){"use strict";function t(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,Object.freeze(n)}var o=t(n);function i(e){return{startRow:Math.min(e.startRow,e.endRow),endRow:Math.max(e.startRow,e.endRow),startCol:Math.min(e.startCol,e.endCol),endCol:Math.max(e.startCol,e.endCol)}}function l(e,n,t){const o=i(t);return e>=o.startRow&&e<=o.endRow&&n>=o.startCol&&n<=o.endCol}function r(e,n){return{startRow:e,endRow:e,startCol:n,endCol:n}}function s(e){const n=[];return function e(t){for(const o of t)o.children&&o.children.length?e(o.children):n.push({...o,_flatIndex:n.length})}(e),n}function a(e){return function e(n){let t=0;for(const o of n)t=o.children&&o.children.length?Math.max(t,1+e(o.children)):Math.max(t,1);return t}(e)}function c(e,n){const t=Array.from({length:n},()=>[]);let o=0;return function e(i,l){for(const r of i)if(r.children&&r.children.length){const n=d(r),i=o;t[l].push({column:r,colspan:n,rowspan:1,isGroup:!0,_firstLeafFlatIndex:i}),e(r.children,l+1)}else{const e=n-l;t[l].push({column:{...r,_flatIndex:o},colspan:1,rowspan:e,isGroup:!1,_firstLeafFlatIndex:o}),o++}}(e,0),t}function d(e){return e.children&&0!==e.children.length?e.children.reduce((e,n)=>e+d(n),0):1}function h(e,n,t,o){const i=n+t;if(o>=n&&o<=i)return e;const l=o>n?Math.max(0,o-t):o;function r(e){return e.children&&e.children.length?e.children.reduce((e,n)=>e+r(n),0):1}let s=0,a=null;const c=function e(t){const o=[];for(const l of t){const t=r(l);s===n&&s+t===i?(a=l,s+=t):s<i&&s+t>n?o.push({...l,children:e(l.children)}):(o.push(l),s+=t)}return o}(e);if(!a)return e;let d=0,h=!1;return function e(n){const t=[];for(let o=0;o<n.length;o++){!h&&d>=l&&(t.push(a),h=!0);const i=n[o],s=r(i);!h&&d+s>l?t.push({...i,children:e(i.children)}):(t.push(i),d+=s)}return h||(t.push(a),h=!0),t}(c)}function u(e,n,t=[]){let o=0;for(let i=0;i<e;i++)o+=void 0!==t[i]?t[i]:n;return o}const g=["Dushanba","Seshanba","Chorshanba","Payshanba","Juma","Shanba","Yakshanba"],p=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],f=["January","February","March","April","May","June","July","August","September","October","November","December"],A=/^\d{4}[-/]\d{2}[-/]\d{2}$/;function v(e){return"string"==typeof e&&A.test(e.trim())}function C(e){if("boolean"==typeof e)return!1;const n=String(e).trim();return""!==n&&(!v(n)&&!isNaN(Number(n)))}function m(e,n){const t=function(e){if(0===e.length)return{type:"copy",step:0,base:null};if(1===e.length)return{type:"copy",step:0,base:e[0]};const n=e.map(e=>g.indexOf(e));if(n.every(e=>e>=0))return{type:"weekday_uz",step:e.length>=2&&(n[1]-n[0]+7)%7||1,base:n[0]};const t=e.map(e=>p.indexOf(e));if(t.every(e=>e>=0))return{type:"weekday_en",step:e.length>=2&&(t[1]-t[0]+7)%7||1,base:t[0]};const o=e.map(e=>f.indexOf(e));if(o.every(e=>e>=0))return{type:"month",step:e.length>=2&&(o[1]-o[0]+12)%12||1,base:o[0]};if(e.every(v)){const n=e.map(e=>new Date(e).getTime());if(n.every(e=>!isNaN(e))){const e=n.slice(1).map((e,t)=>e-n[t]);if(e.every(n=>Math.abs(n-e[0])<864e5))return{type:"date",step:e[0],base:n[0]}}}if(e.every(C)){const n=e.map(e=>Number(e)),t=n.slice(1).map((e,t)=>e-n[t]);if(t.every(e=>Math.abs(e-t[0])<1e-10))return{type:"number",step:t[0],base:n[0]}}return{type:"copy",step:0,base:e[0]}}(e),o=e.length,i=[];for(let l=0;l<n;l++){const n=o+l;switch(t.type){case"number":i.push(t.base+t.step*n);break;case"weekday_uz":i.push(g[(t.base+t.step*n)%7]);break;case"weekday_en":i.push(p[(t.base+t.step*n)%7]);break;case"month":i.push(f[(t.base+t.step*n)%12]);break;case"date":{const e=new Date(t.base+t.step*n);i.push(e.toISOString().split("T")[0]);break}default:i.push(e[n%o])}}return i}function w(e,n,t){const o=[];for(let i=t.startRow;i<=t.endRow;i++){const l=[];for(let o=t.startCol;o<=t.endCol;o++){const t=n[o],r=t&&e[i]?e[i][t.key]:"";l.push(void 0!==r?r:"")}o.push(l)}return o}function x(e,n,t,o,i,l="all",r=null,s=null){const a=e.slice(),c=Math.min(t+i.length-1,e.length-1),d=Math.min(o+(i[0]?i[0].length-1:0),n.length-1),h=[];for(let u=t;u<=c;u++){const c=i[u-t];if(!c)continue;let g=null;for(let t=o;t<=d;t++){const i=n[t];if(i&&((r?r(u,t):!1!==i.editable)&&("all"===l||"values"===l))){const n=c[t-o],l=void 0!==n?n:"";if(s&&!s(u,t,l)){h.push({row:u,col:t,value:l});continue}g||(g={...e[u]||{}},a[u]=g),g[i.key]=l}}}return{newData:a,affectedRange:{startRow:t,endRow:c,startCol:o,endCol:d},skipped:h}}function y(e,n){const t=i(e);return n.some(e=>function(e,n){const t=i(e),o=i(n);return!(t.endRow<o.startRow||t.startRow>o.endRow||t.endCol<o.startCol||t.startCol>o.endCol)}(t,i(e)))}function b(e,n,t){return t.find(t=>{const o=i(t);return e>=o.startRow&&e<=o.endRow&&n>=o.startCol&&n<=o.endCol})||null}function k(e,n,t,o){if(!function(e,n){return Number.isInteger(e)&&Number.isInteger(n)&&e<=n&&e>=0}(n,t))return o;return o.find(o=>o.type===e&&o.startIndex===n&&o.endIndex===t)?o:[...o,{type:e,startIndex:n,endIndex:t}]}function R(e,n,t,o){return o.filter(o=>!(o.type===e&&o.startIndex===n&&o.endIndex===t))}function S(e,n){return n.some(n=>n.type===e.type&&n.startIndex===e.startIndex&&n.endIndex===e.endIndex)}function D(e){const n=[];for(const t of e||[])t.children&&t.children.length?n.push(...D(t.children)):t.key&&n.push(t);return n}function E(e,n,t,o,i){for(let l=n;l<=t;l++)for(let n=o;n<=i;n++)if(""!==((e[l]||[])[n]||"").toString().trim())return!0;return!1}function _(e,n,t){return String((e[n]||[])[t]||"").trim().replace(/\n/g," ")}function I(){return new Promise(e=>setTimeout(e,0))}async function M(e,n,t={},i){const l=(e,n)=>i&&i(e,n);l(5,"Fayl o'qilmoqda..."),await I();const r=await e.arrayBuffer();let s;l(20,"Excel tahlil qilinmoqda..."),await I();try{s=o.read(r,{type:"array",cellDates:!0})}catch(e){throw new Error("Excel fayl o'qib bo'lmadi: "+e.message)}const{sheetName:a}=t;let c;if(a){if(c=s.Sheets[a],!c)throw new Error(`Sheet "${a}" topilmadi`)}else{const e=s.SheetNames[0];if(!e)throw new Error("Workbook bo'sh");c=s.Sheets[e]}l(40,"Ma'lumotlar tayyorlanmoqda..."),await I();const d=o.utils.sheet_to_json(c,{header:1,raw:!1,defval:""});if(!d||0===d.length)throw new Error("Sheet bo'sh");const h=o.utils.decode_range(c["!ref"]||"A1:A1"),u=h.s.r,g=h.s.c,p=(c["!merges"]||[]).map(e=>({s:{r:e.s.r-u,c:e.s.c-g},e:{r:e.e.r-u,c:e.e.c-g}})),f=function(e,n){if(!e||0===e.length)return{headerRow:0,headerEndRow:0,dataStartRow:1};const t=e.map(e=>e.filter(e=>""!==e).length);n=n||[];let o,i,l,r=-1;for(let n=0;n<Math.min(e.length,20);n++){const t=e[n].filter(e=>""!==e);if(t.length<2)continue;const o=t.map(e=>{const n=parseInt(String(e).trim(),10);return isNaN(n)?null:n});if(!o.some(e=>null===e)&&o.every((e,n)=>e===n+1)){r=n;break}}if(r>=0){for(l=r+1,i=r-1;i>=0&&0===t[i];)i--;for(i<0&&(i=0),o=i;o>0&&t[o-1]>1;)o--}else{o=0;for(let n=0;n<Math.min(e.length,20);n++)if(t[n]>1){o=n;break}let r=1;for(const e of n)e.s.r===o&&e.e.r>e.s.r&&(r=Math.max(r,e.e.r-e.s.r+1));i=o+r-1,l=i+1}for(;l<e.length&&0===t[l];)l++;return{headerRow:o,headerEndRow:i,dataStartRow:l}}(d,p),A=null!=t.headerRow?t.headerRow:f.headerRow,v=null!=t.headerEndRow?t.headerEndRow:f.headerEndRow,C=null!=t.dataStartRow?t.dataStartRow:f.dataStartRow,m=D(n),w=new Set,{columns:x,colMap:y}=function(e,n,t,o,i,l){let r=-1;for(let o=n;o<=t;o++)for(let n=(e[o]||[]).length-1;n>=0;n--)if(""!==((e[o]||[])[n]||"")){r=Math.max(r,n);break}const s=(o||[]).filter(e=>e.s.r>=n&&e.s.r<=t);for(const e of s)r=Math.max(r,e.e.c);if(r<0)return{columns:[],colMap:[]};const a=[];function c(e,n){const t=i.find(n=>n.title&&n.title.toLowerCase()===e.toLowerCase());if(t)return{key:t.key,title:t.title,width:t.width||100};let o=String(e||"").toLowerCase().replace(/\s+/g,"_").replace(/[^a-z0-9_]/g,"").replace(/^_+|_+$/g,"").replace(/_+/g,"_").replace(/^(\d)/,"col_$1")||`col_${n}`,r=o,s=1;for(;l.has(r)||i.some(e=>e.key===r);)r=`${o}_${s++}`;return l.add(r),{key:r,title:e||r,width:100}}const d=function n(t,o,i,l){if(t>o||i>l)return[];const r=[];let d=i;for(;d<=l;){if(s.some(e=>e.s.r<=t&&e.e.r>=t&&e.s.c<d&&e.e.c>=d)){d++;continue}const i=s.find(e=>e.s.r===t&&e.s.c===d),h=i?_(e,i.s.r,i.s.c):_(e,t,d);if(i&&i.e.c>d){const t=Math.min(i.e.c,l),s=i.e.r+1;if(s<=o&&E(e,s,o,d,t)){const e=n(s,o,d,t);r.push({title:h,children:e})}else for(let e=d;e<=t;e++){const n=c(h,e);r.push(n),a.push({key:n.key,colIndex:e})}d=t+1}else if(i&&i.e.r>=o){const e=c(h,d);r.push(e),a.push({key:e.key,colIndex:d}),d++}else if(i){const t=i.e.r+1;if(t<=o&&E(e,t,o,d,d)){const e=n(t,o,d,d);r.push({title:h,children:e})}else{const e=c(h,d);r.push(e),a.push({key:e.key,colIndex:d})}d++}else if(t===o){const e=c(h,d);r.push(e),a.push({key:e.key,colIndex:d}),d++}else{if(E(e,t+1,o,d,d)){const e=n(t+1,o,d,d);r.push({title:h,children:e})}else{const e=c(h,d);r.push(e),a.push({key:e.key,colIndex:d})}d++}}return r}(n,t,0,r);return{columns:d,colMap:a}}(d,A,v,p,m,w),b=Math.max(d.length-C,0);l(55,`Qatorlar qayta ishlanmoqda (0 / ${b})...`),await I();const k=[];for(let e=C;e<d.length;e+=2e3){const n=Math.min(e+2e3,d.length);for(let t=e;t<n;t++){const e=d[t],n={};for(const{key:t,colIndex:o}of y)n[t]=void 0!==e[o]?e[o]:"";k.push(n)}const t=Math.min(n-C,b);l(55+Math.round(40*t/Math.max(b,1)),`Qatorlar: ${t} / ${b}`),await I()}const R=p.filter(e=>e.s.r>=C).map(e=>({startRow:e.s.r-C,startCol:e.s.c,endRow:e.e.r-C,endCol:e.e.c})).filter(e=>e.startRow>=0&&e.startCol>=0);return l(100,"Tayyor!"),{data:k,columns:x,merges:R}}const z={en:{copy:"Copy",cut:"Cut",paste:"Paste",pasteSpecial:"Paste Special",pasteAll:"All (Value + Format)",pasteValues:"Values Only",pasteFormats:"Formats Only",transpose:"Transpose",mergeCells:"Merge Cells",unmergeCells:"Unmerge Cells",hideRows:"Hide Row(s)",hideColumns:"Hide Column(s)",unhideRows:"Unhide All Rows",unhideColumns:"Unhide All Columns",pinLeft:"Pin Left",pinRight:"Pin Right",unpin:"Unpin",invalidValue:"Invalid value",total:"Total"},ru:{copy:"Копировать",cut:"Вырезать",paste:"Вставить",pasteSpecial:"Специальная вставка",pasteAll:"Всё (значение + формат)",pasteValues:"Только значения",pasteFormats:"Только форматы",transpose:"Транспонировать",mergeCells:"Объединить ячейки",unmergeCells:"Разъединить ячейки",hideRows:"Скрыть строку(и)",hideColumns:"Скрыть столбец(цы)",unhideRows:"Показать все строки",unhideColumns:"Показать все столбцы",pinLeft:"Закрепить слева",pinRight:"Закрепить справа",unpin:"Открепить",invalidValue:"Недопустимое значение",total:"Итого"},uz:{copy:"Nusxalash",cut:"Kesib olish",paste:"Joylashtirish",pasteSpecial:"Maxsus joylashtirish",pasteAll:"Hammasi (qiymat + format)",pasteValues:"Faqat qiymatlar",pasteFormats:"Faqat formatlar",transpose:"Transpozitsiya",mergeCells:"Katakchalarni birlashtirish",unmergeCells:"Katakchalarni ajratish",hideRows:"Qatorlarni yashirish",hideColumns:"Ustunlarni yashirish",unhideRows:"Barcha qatorlarni ko'rsatish",unhideColumns:"Barcha ustunlarni ko'rsatish",pinLeft:"Chapga pin qilish",pinRight:"O'ngga pin qilish",unpin:"Pindan olish",invalidValue:"Noto'g'ri qiymat",total:"Jami"},"uz-Cyrl":{copy:"Нусхалаш",cut:"Кесиб олиш",paste:"Жойлаштириш",pasteSpecial:"Махсус жойлаштириш",pasteAll:"Ҳаммаси (қиймат + формат)",pasteValues:"Фақат қийматлар",pasteFormats:"Фақат форматлар",transpose:"Транспозиция",mergeCells:"Катакчаларни бирлаштириш",unmergeCells:"Катакчаларни ажратиш",hideRows:"Қаторларни яшириш",hideColumns:"Устунларни яшириш",unhideRows:"Барча қаторларни кўрсатиш",unhideColumns:"Барча устунларни кўрсатиш",pinLeft:"Чапга пин қилиш",pinRight:"Ўнгга пин қилиш",unpin:"Пиндан олиш",invalidValue:"Нотўғри қиймат",total:"Жами"}};var H={name:"EgCheckbox",model:{prop:"value",event:"input"},props:{value:{default:!1},trueValue:{default:!0},falseValue:{default:!1},disabled:{type:Boolean,default:!1}},computed:{isChecked(){return this.value===this.trueValue}},methods:{onChange(e){const n=e.target.checked?this.trueValue:this.falseValue;this.$emit("input",n),this.$emit("change",n)}}};function L(e,n,t,o,i,l,r,s,a,c){"boolean"!=typeof r&&(a=s,s=r,r=!1);const d="function"==typeof t?t.options:t;let h;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,i&&(d.functional=!0)),o&&(d._scopeId=o),l?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,a(e)),e&&e._registeredComponents&&e._registeredComponents.add(l)},d._ssrRegister=h):n&&(h=r?function(e){n.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,s(e))}),h)if(d.functional){const e=d.render;d.render=function(n,t){return h.call(t),e(n,t)}}else{const e=d.beforeCreate;d.beforeCreate=e?[].concat(e,h):[h]}return t}const V="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function B(e){return(e,n)=>function(e,n){const t=V?n.media||"default":e,o=F[t]||(F[t]={ids:new Set,styles:[]});if(!o.ids.has(e)){o.ids.add(e);let t=n.source;if(n.map&&(t+="\n/*# sourceURL="+n.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",n.media&&o.element.setAttribute("media",n.media),void 0===O&&(O=document.head||document.getElementsByTagName("head")[0]),O.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(t),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{const e=o.ids.size-1,n=document.createTextNode(t),i=o.element.childNodes;i[e]&&o.element.removeChild(i[e]),i.length?o.element.insertBefore(n,i[e]):o.element.appendChild(n)}}}(e,n)}let O;const F={};const $=H;var T=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("label",{staticClass:"eg-checkbox",class:{"eg-checkbox--disabled":e.disabled}},[t("input",{staticClass:"eg-checkbox-input",attrs:{type:"checkbox",disabled:e.disabled},domProps:{checked:e.isChecked},on:{change:e.onChange}}),e._v(" "),t("span",{staticClass:"eg-checkbox-box"})])};T._withStripped=!0;const W=L({render:T,staticRenderFns:[]},function(e){e&&e("data-v-48d91ddc_0",{source:'\n.eg-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.eg-checkbox-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.eg-checkbox-box {\n position: relative;\n display: block;\n width: 19px;\n height: 19px;\n box-sizing: border-box;\n background-color: #fff;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0 0;\n border: 1.5px solid #c2c8d1;\n border-radius: 4px;\n transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;\n}\n.eg-checkbox:hover .eg-checkbox-box {\n border-color: #1a73e8;\n}\n.eg-checkbox-input:checked + .eg-checkbox-box {\n background-color: #1a73e8;\n background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");\n background-size: 70% 70%;\n border-color: #1a73e8;\n}\n.eg-checkbox-input:focus-visible + .eg-checkbox-box {\n box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);\n}\n.eg-checkbox--disabled,\n.eg-checkbox--disabled .eg-checkbox-input {\n cursor: default;\n}\n.eg-checkbox-input:disabled + .eg-checkbox-box {\n background-color: #f0f1f3;\n border-color: #dadde2;\n}\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box {\n background-color: #b9c2ce;\n border-color: #b9c2ce;\n}\n',map:{version:3,sources:["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/EgCheckbox.vue"],names:[],mappings:";AAuCA;EACA,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,sBAAA;EACA,4BAAA;EACA,2BAAA;EACA,oBAAA;EACA,2BAAA;EACA,kBAAA;EACA,yFAAA;AACA;AACA;EACA,qBAAA;AACA;AACA;EACA,yBAAA;EACA,+SAAA;EACA,wBAAA;EACA,qBAAA;AACA;AACA;EACA,6CAAA;AACA;AACA;;EAEA,eAAA;AACA;AACA;EACA,yBAAA;EACA,qBAAA;AACA;AACA;EACA,yBAAA;EACA,qBAAA;AACA",file:"EgCheckbox.vue",sourcesContent:['<template>\n <label class="eg-checkbox" :class="{ \'eg-checkbox--disabled\': disabled }">\n <input\n type="checkbox"\n class="eg-checkbox-input"\n :checked="isChecked"\n :disabled="disabled"\n @change="onChange"\n />\n <span class="eg-checkbox-box"></span>\n </label>\n</template>\n\n<script>\nexport default {\n name: \'EgCheckbox\',\n model: { prop: \'value\', event: \'input\' },\n props: {\n value: { default: false },\n trueValue: { default: true },\n falseValue: { default: false },\n disabled: { type: Boolean, default: false }\n },\n computed: {\n isChecked() {\n return this.value === this.trueValue\n }\n },\n methods: {\n onChange(e) {\n const val = e.target.checked ? this.trueValue : this.falseValue\n this.$emit(\'input\', val)\n this.$emit(\'change\', val)\n }\n }\n}\n<\/script>\n\n<style>\n.eg-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.eg-checkbox-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.eg-checkbox-box {\n position: relative;\n display: block;\n width: 19px;\n height: 19px;\n box-sizing: border-box;\n background-color: #fff;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0 0;\n border: 1.5px solid #c2c8d1;\n border-radius: 4px;\n transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;\n}\n.eg-checkbox:hover .eg-checkbox-box {\n border-color: #1a73e8;\n}\n.eg-checkbox-input:checked + .eg-checkbox-box {\n background-color: #1a73e8;\n background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");\n background-size: 70% 70%;\n border-color: #1a73e8;\n}\n.eg-checkbox-input:focus-visible + .eg-checkbox-box {\n box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);\n}\n.eg-checkbox--disabled,\n.eg-checkbox--disabled .eg-checkbox-input {\n cursor: default;\n}\n.eg-checkbox-input:disabled + .eg-checkbox-box {\n background-color: #f0f1f3;\n border-color: #dadde2;\n}\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box {\n background-color: #b9c2ce;\n border-color: #b9c2ce;\n}\n</style>\n']},media:void 0})},$,void 0,false,void 0,!1,B,void 0,void 0);var P={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},G={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},K=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],j={CSS:{},springs:{}};function U(e,n,t){return Math.min(Math.max(e,n),t)}function N(e,n){return e.indexOf(n)>-1}function q(e,n){return e.apply(null,n)}var Y={arr:function(e){return Array.isArray(e)},obj:function(e){return N(Object.prototype.toString.call(e),"Object")},pth:function(e){return Y.obj(e)&&e.hasOwnProperty("totalLength")},svg:function(e){return e instanceof SVGElement},inp:function(e){return e instanceof HTMLInputElement},dom:function(e){return e.nodeType||Y.svg(e)},str:function(e){return"string"==typeof e},fnc:function(e){return"function"==typeof e},und:function(e){return void 0===e},nil:function(e){return Y.und(e)||null===e},hex:function(e){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(e)},rgb:function(e){return/^rgb/.test(e)},hsl:function(e){return/^hsl/.test(e)},col:function(e){return Y.hex(e)||Y.rgb(e)||Y.hsl(e)},key:function(e){return!P.hasOwnProperty(e)&&!G.hasOwnProperty(e)&&"targets"!==e&&"keyframes"!==e}};function X(e){var n=/\(([^)]+)\)/.exec(e);return n?n[1].split(",").map(function(e){return parseFloat(e)}):[]}function Z(e,n){var t=X(e),o=U(Y.und(t[0])?1:t[0],.1,100),i=U(Y.und(t[1])?100:t[1],.1,100),l=U(Y.und(t[2])?10:t[2],.1,100),r=U(Y.und(t[3])?0:t[3],.1,100),s=Math.sqrt(i/o),a=l/(2*Math.sqrt(i*o)),c=a<1?s*Math.sqrt(1-a*a):0,d=a<1?(a*s-r)/c:-r+s;function h(e){var t=n?n*e/1e3:e;return t=a<1?Math.exp(-t*a*s)*(1*Math.cos(c*t)+d*Math.sin(c*t)):(1+d*t)*Math.exp(-t*s),0===e||1===e?e:1-t}return n?h:function(){var n=j.springs[e];if(n)return n;for(var t=1/6,o=0,i=0;;)if(1===h(o+=t)){if(++i>=16)break}else i=0;var l=o*t*1e3;return j.springs[e]=l,l}}function Q(e){return void 0===e&&(e=10),function(n){return Math.ceil(U(n,1e-6,1)*e)*(1/e)}}var J,ee,ne=function(){var e=.1;function n(e,n){return 1-3*n+3*e}function t(e,n){return 3*n-6*e}function o(e){return 3*e}function i(e,i,l){return((n(i,l)*e+t(i,l))*e+o(i))*e}function l(e,i,l){return 3*n(i,l)*e*e+2*t(i,l)*e+o(i)}return function(n,t,o,r){if(0<=n&&n<=1&&0<=o&&o<=1){var s=new Float32Array(11);if(n!==t||o!==r)for(var a=0;a<11;++a)s[a]=i(a*e,n,o);return function(e){return n===t&&o===r||0===e||1===e?e:i(c(e),t,r)}}function c(t){for(var r=0,a=1;10!==a&&s[a]<=t;++a)r+=e;--a;var c=r+(t-s[a])/(s[a+1]-s[a])*e,d=l(c,n,o);return d>=.001?function(e,n,t,o){for(var r=0;r<4;++r){var s=l(n,t,o);if(0===s)return n;n-=(i(n,t,o)-e)/s}return n}(t,c,n,o):0===d?c:function(e,n,t,o,l){var r,s,a=0;do{(r=i(s=n+(t-n)/2,o,l)-e)>0?t=s:n=s}while(Math.abs(r)>1e-7&&++a<10);return s}(t,r,r+e,n,o)}}}(),te=(J={linear:function(){return function(e){return e}}},ee={Sine:function(){return function(e){return 1-Math.cos(e*Math.PI/2)}},Expo:function(){return function(e){return e?Math.pow(2,10*e-10):0}},Circ:function(){return function(e){return 1-Math.sqrt(1-e*e)}},Back:function(){return function(e){return e*e*(3*e-2)}},Bounce:function(){return function(e){for(var n,t=4;e<((n=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*n-2)/22-e,2)}},Elastic:function(e,n){void 0===e&&(e=1),void 0===n&&(n=.5);var t=U(e,1,10),o=U(n,.1,2);return function(e){return 0===e||1===e?e:-t*Math.pow(2,10*(e-1))*Math.sin((e-1-o/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/o)}}},["Quad","Cubic","Quart","Quint"].forEach(function(e,n){ee[e]=function(){return function(e){return Math.pow(e,n+2)}}}),Object.keys(ee).forEach(function(e){var n=ee[e];J["easeIn"+e]=n,J["easeOut"+e]=function(e,t){return function(o){return 1-n(e,t)(1-o)}},J["easeInOut"+e]=function(e,t){return function(o){return o<.5?n(e,t)(2*o)/2:1-n(e,t)(-2*o+2)/2}},J["easeOutIn"+e]=function(e,t){return function(o){return o<.5?(1-n(e,t)(1-2*o))/2:(n(e,t)(2*o-1)+1)/2}}}),J);function oe(e,n){if(Y.fnc(e))return e;var t=e.split("(")[0],o=te[t],i=X(e);switch(t){case"spring":return Z(e,n);case"cubicBezier":return q(ne,i);case"steps":return q(Q,i);default:return q(o,i)}}function ie(e){try{return document.querySelectorAll(e)}catch(e){return}}function le(e,n){for(var t=e.length,o=arguments.length>=2?arguments[1]:void 0,i=[],l=0;l<t;l++)if(l in e){var r=e[l];n.call(o,r,l,e)&&i.push(r)}return i}function re(e){return e.reduce(function(e,n){return e.concat(Y.arr(n)?re(n):n)},[])}function se(e){return Y.arr(e)?e:(Y.str(e)&&(e=ie(e)||e),e instanceof NodeList||e instanceof HTMLCollection?[].slice.call(e):[e])}function ae(e,n){return e.some(function(e){return e===n})}function ce(e){var n={};for(var t in e)n[t]=e[t];return n}function de(e,n){var t=ce(e);for(var o in e)t[o]=n.hasOwnProperty(o)?n[o]:e[o];return t}function he(e,n){var t=ce(e);for(var o in n)t[o]=Y.und(e[o])?n[o]:e[o];return t}function ue(e){return Y.rgb(e)?(t=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(n=e))?"rgba("+t[1]+",1)":n:Y.hex(e)?function(e){var n=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(e,n,t,o){return n+n+t+t+o+o}),t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);return"rgba("+parseInt(t[1],16)+","+parseInt(t[2],16)+","+parseInt(t[3],16)+",1)"}(e):Y.hsl(e)?function(e){var n,t,o,i=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(e)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(e),l=parseInt(i[1],10)/360,r=parseInt(i[2],10)/100,s=parseInt(i[3],10)/100,a=i[4]||1;function c(e,n,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?e+6*(n-e)*t:t<.5?n:t<2/3?e+(n-e)*(2/3-t)*6:e}if(0==r)n=t=o=s;else{var d=s<.5?s*(1+r):s+r-s*r,h=2*s-d;n=c(h,d,l+1/3),t=c(h,d,l),o=c(h,d,l-1/3)}return"rgba("+255*n+","+255*t+","+255*o+","+a+")"}(e):void 0;var n,t}function ge(e){var n=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(e);if(n)return n[1]}function pe(e,n){return Y.fnc(e)?e(n.target,n.id,n.total):e}function fe(e,n){return e.getAttribute(n)}function Ae(e,n,t){if(ae([t,"deg","rad","turn"],ge(n)))return n;var o=j.CSS[n+t];if(!Y.und(o))return o;var i=document.createElement(e.tagName),l=e.parentNode&&e.parentNode!==document?e.parentNode:document.body;l.appendChild(i),i.style.position="absolute",i.style.width=100+t;var r=100/i.offsetWidth;l.removeChild(i);var s=r*parseFloat(n);return j.CSS[n+t]=s,s}function ve(e,n,t){if(n in e.style){var o=n.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),i=e.style[n]||getComputedStyle(e).getPropertyValue(o)||"0";return t?Ae(e,i,t):i}}function Ce(e,n){return Y.dom(e)&&!Y.inp(e)&&(!Y.nil(fe(e,n))||Y.svg(e)&&e[n])?"attribute":Y.dom(e)&&ae(K,n)?"transform":Y.dom(e)&&"transform"!==n&&ve(e,n)?"css":null!=e[n]?"object":void 0}function me(e){if(Y.dom(e)){for(var n,t=e.style.transform||"",o=/(\w+)\(([^)]*)\)/g,i=new Map;n=o.exec(t);)i.set(n[1],n[2]);return i}}function we(e,n,t,o){var i=N(n,"scale")?1:0+function(e){return N(e,"translate")||"perspective"===e?"px":N(e,"rotate")||N(e,"skew")?"deg":void 0}(n),l=me(e).get(n)||i;return t&&(t.transforms.list.set(n,l),t.transforms.last=n),o?Ae(e,l,o):l}function xe(e,n,t,o){switch(Ce(e,n)){case"transform":return we(e,n,o,t);case"css":return ve(e,n,t);case"attribute":return fe(e,n);default:return e[n]||0}}function ye(e,n){var t=/^(\*=|\+=|-=)/.exec(e);if(!t)return e;var o=ge(e)||0,i=parseFloat(n),l=parseFloat(e.replace(t[0],""));switch(t[0][0]){case"+":return i+l+o;case"-":return i-l+o;case"*":return i*l+o}}function be(e,n){if(Y.col(e))return ue(e);if(/\s/g.test(e))return e;var t=ge(e),o=t?e.substr(0,e.length-t.length):e;return n?o+n:o}function ke(e,n){return Math.sqrt(Math.pow(n.x-e.x,2)+Math.pow(n.y-e.y,2))}function Re(e){for(var n,t=e.points,o=0,i=0;i<t.numberOfItems;i++){var l=t.getItem(i);i>0&&(o+=ke(n,l)),n=l}return o}function Se(e){if(e.getTotalLength)return e.getTotalLength();switch(e.tagName.toLowerCase()){case"circle":return function(e){return 2*Math.PI*fe(e,"r")}(e);case"rect":return function(e){return 2*fe(e,"width")+2*fe(e,"height")}(e);case"line":return function(e){return ke({x:fe(e,"x1"),y:fe(e,"y1")},{x:fe(e,"x2"),y:fe(e,"y2")})}(e);case"polyline":return Re(e);case"polygon":return function(e){var n=e.points;return Re(e)+ke(n.getItem(n.numberOfItems-1),n.getItem(0))}(e)}}function De(e,n){var t=n||{},o=t.el||function(e){for(var n=e.parentNode;Y.svg(n)&&Y.svg(n.parentNode);)n=n.parentNode;return n}(e),i=o.getBoundingClientRect(),l=fe(o,"viewBox"),r=i.width,s=i.height,a=t.viewBox||(l?l.split(" "):[0,0,r,s]);return{el:o,viewBox:a,x:a[0]/1,y:a[1]/1,w:r,h:s,vW:a[2],vH:a[3]}}function Ee(e,n,t){function o(t){void 0===t&&(t=0);var o=n+t>=1?n+t:0;return e.el.getPointAtLength(o)}var i=De(e.el,e.svg),l=o(),r=o(-1),s=o(1),a=t?1:i.w/i.vW,c=t?1:i.h/i.vH;switch(e.property){case"x":return(l.x-i.x)*a;case"y":return(l.y-i.y)*c;case"angle":return 180*Math.atan2(s.y-r.y,s.x-r.x)/Math.PI}}function _e(e,n){var t=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,o=be(Y.pth(e)?e.totalLength:e,n)+"";return{original:o,numbers:o.match(t)?o.match(t).map(Number):[0],strings:Y.str(e)||n?o.split(t):[]}}function Ie(e){return le(e?re(Y.arr(e)?e.map(se):se(e)):[],function(e,n,t){return t.indexOf(e)===n})}function Me(e){var n=Ie(e);return n.map(function(e,t){return{target:e,id:t,total:n.length,transforms:{list:me(e)}}})}function ze(e,n){var t=ce(n);if(/^spring/.test(t.easing)&&(t.duration=Z(t.easing)),Y.arr(e)){var o=e.length;2===o&&!Y.obj(e[0])?e={value:e}:Y.fnc(n.duration)||(t.duration=n.duration/o)}var i=Y.arr(e)?e:[e];return i.map(function(e,t){var o=Y.obj(e)&&!Y.pth(e)?e:{value:e};return Y.und(o.delay)&&(o.delay=t?0:n.delay),Y.und(o.endDelay)&&(o.endDelay=t===i.length-1?n.endDelay:0),o}).map(function(e){return he(e,t)})}function He(e,n){var t=[],o=n.keyframes;for(var i in o&&(n=he(function(e){for(var n=le(re(e.map(function(e){return Object.keys(e)})),function(e){return Y.key(e)}).reduce(function(e,n){return e.indexOf(n)<0&&e.push(n),e},[]),t={},o=function(o){var i=n[o];t[i]=e.map(function(e){var n={};for(var t in e)Y.key(t)?t==i&&(n.value=e[t]):n[t]=e[t];return n})},i=0;i<n.length;i++)o(i);return t}(o),n)),n)Y.key(i)&&t.push({name:i,tweens:ze(n[i],e)});return t}function Le(e,n){var t;return e.tweens.map(function(o){var i=function(e,n){var t={};for(var o in e){var i=pe(e[o],n);Y.arr(i)&&1===(i=i.map(function(e){return pe(e,n)})).length&&(i=i[0]),t[o]=i}return t.duration=parseFloat(t.duration),t.delay=parseFloat(t.delay),t}(o,n),l=i.value,r=Y.arr(l)?l[1]:l,s=ge(r),a=xe(n.target,e.name,s,n),c=t?t.to.original:a,d=Y.arr(l)?l[0]:c,h=ge(d)||ge(a),u=s||h;return Y.und(r)&&(r=c),i.from=_e(d,u),i.to=_e(ye(r,d),u),i.start=t?t.end:0,i.end=i.start+i.delay+i.duration+i.endDelay,i.easing=oe(i.easing,i.duration),i.isPath=Y.pth(l),i.isPathTargetInsideSVG=i.isPath&&Y.svg(n.target),i.isColor=Y.col(i.from.original),i.isColor&&(i.round=1),t=i,i})}var Ve={css:function(e,n,t){return e.style[n]=t},attribute:function(e,n,t){return e.setAttribute(n,t)},object:function(e,n,t){return e[n]=t},transform:function(e,n,t,o,i){if(o.list.set(n,t),n===o.last||i){var l="";o.list.forEach(function(e,n){l+=n+"("+e+") "}),e.style.transform=l}}};function Be(e,n){Me(e).forEach(function(e){for(var t in n){var o=pe(n[t],e),i=e.target,l=ge(o),r=xe(i,t,l,e),s=ye(be(o,l||ge(r)),r),a=Ce(i,t);Ve[a](i,t,s,e.transforms,!0)}})}function Oe(e,n){return le(re(e.map(function(e){return n.map(function(n){return function(e,n){var t=Ce(e.target,n.name);if(t){var o=Le(n,e),i=o[o.length-1];return{type:t,property:n.name,animatable:e,tweens:o,duration:i.end,delay:o[0].delay,endDelay:i.endDelay}}}(e,n)})})),function(e){return!Y.und(e)})}function Fe(e,n){var t=e.length,o=function(e){return e.timelineOffset?e.timelineOffset:0},i={};return i.duration=t?Math.max.apply(Math,e.map(function(e){return o(e)+e.duration})):n.duration,i.delay=t?Math.min.apply(Math,e.map(function(e){return o(e)+e.delay})):n.delay,i.endDelay=t?i.duration-Math.max.apply(Math,e.map(function(e){return o(e)+e.duration-e.endDelay})):n.endDelay,i}var $e=0;var Te=[],We=function(){var e;function n(t){for(var o=Te.length,i=0;i<o;){var l=Te[i];l.paused?(Te.splice(i,1),o--):(l.tick(t),i++)}e=i>0?requestAnimationFrame(n):void 0}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){Ge.suspendWhenDocumentHidden&&(Pe()?e=cancelAnimationFrame(e):(Te.forEach(function(e){return e._onDocumentVisibility()}),We()))}),function(){e||Pe()&&Ge.suspendWhenDocumentHidden||!(Te.length>0)||(e=requestAnimationFrame(n))}}();function Pe(){return!!document&&document.hidden}function Ge(e){void 0===e&&(e={});var n,t=0,o=0,i=0,l=0,r=null;function s(e){var n=window.Promise&&new Promise(function(e){return r=e});return e.finished=n,n}var a=function(e){var n=de(P,e),t=de(G,e),o=He(t,e),i=Me(e.targets),l=Oe(i,o),r=Fe(l,t),s=$e;return $e++,he(n,{id:s,children:[],animatables:i,animations:l,duration:r.duration,delay:r.delay,endDelay:r.endDelay})}(e);function c(){var e=a.direction;"alternate"!==e&&(a.direction="normal"!==e?"normal":"reverse"),a.reversed=!a.reversed,n.forEach(function(e){return e.reversed=a.reversed})}function d(e){return a.reversed?a.duration-e:e}function h(){t=0,o=d(a.currentTime)*(1/Ge.speed)}function u(e,n){n&&n.seek(e-n.timelineOffset)}function g(e){for(var n=0,t=a.animations,o=t.length;n<o;){var i=t[n],l=i.animatable,r=i.tweens,s=r.length-1,c=r[s];s&&(c=le(r,function(n){return e<n.end})[0]||c);for(var d=U(e-c.start-c.delay,0,c.duration)/c.duration,h=isNaN(d)?1:c.easing(d),u=c.to.strings,g=c.round,p=[],f=c.to.numbers.length,A=void 0,v=0;v<f;v++){var C=void 0,m=c.to.numbers[v],w=c.from.numbers[v]||0;C=c.isPath?Ee(c.value,h*m,c.isPathTargetInsideSVG):w+h*(m-w),g&&(c.isColor&&v>2||(C=Math.round(C*g)/g)),p.push(C)}var x=u.length;if(x){A=u[0];for(var y=0;y<x;y++){u[y];var b=u[y+1],k=p[y];isNaN(k)||(A+=b?k+b:k+" ")}}else A=p[0];Ve[i.type](l.target,i.property,A,l.transforms),i.currentValue=A,n++}}function p(e){a[e]&&!a.passThrough&&a[e](a)}function f(e){var h=a.duration,f=a.delay,A=h-a.endDelay,v=d(e);a.progress=U(v/h*100,0,100),a.reversePlayback=v<a.currentTime,n&&function(e){if(a.reversePlayback)for(var t=l;t--;)u(e,n[t]);else for(var o=0;o<l;o++)u(e,n[o])}(v),!a.began&&a.currentTime>0&&(a.began=!0,p("begin")),!a.loopBegan&&a.currentTime>0&&(a.loopBegan=!0,p("loopBegin")),v<=f&&0!==a.currentTime&&g(0),(v>=A&&a.currentTime!==h||!h)&&g(h),v>f&&v<A?(a.changeBegan||(a.changeBegan=!0,a.changeCompleted=!1,p("changeBegin")),p("change"),g(v)):a.changeBegan&&(a.changeCompleted=!0,a.changeBegan=!1,p("changeComplete")),a.currentTime=U(v,0,h),a.began&&p("update"),e>=h&&(o=0,a.remaining&&!0!==a.remaining&&a.remaining--,a.remaining?(t=i,p("loopComplete"),a.loopBegan=!1,"alternate"===a.direction&&c()):(a.paused=!0,a.completed||(a.completed=!0,p("loopComplete"),p("complete"),!a.passThrough&&"Promise"in window&&(r(),s(a)))))}return s(a),a.reset=function(){var e=a.direction;a.passThrough=!1,a.currentTime=0,a.progress=0,a.paused=!0,a.began=!1,a.loopBegan=!1,a.changeBegan=!1,a.completed=!1,a.changeCompleted=!1,a.reversePlayback=!1,a.reversed="reverse"===e,a.remaining=a.loop,n=a.children;for(var t=l=n.length;t--;)a.children[t].reset();(a.reversed&&!0!==a.loop||"alternate"===e&&1===a.loop)&&a.remaining++,g(a.reversed?a.duration:0)},a._onDocumentVisibility=h,a.set=function(e,n){return Be(e,n),a},a.tick=function(e){i=e,t||(t=i),f((i+(o-t))*Ge.speed)},a.seek=function(e){f(d(e))},a.pause=function(){a.paused=!0,h()},a.play=function(){a.paused&&(a.completed&&a.reset(),a.paused=!1,Te.push(a),h(),We())},a.reverse=function(){c(),a.completed=!a.reversed,h()},a.restart=function(){a.reset(),a.play()},a.remove=function(e){je(Ie(e),a)},a.reset(),a.autoplay&&a.play(),a}function Ke(e,n){for(var t=n.length;t--;)ae(e,n[t].animatable.target)&&n.splice(t,1)}function je(e,n){var t=n.animations,o=n.children;Ke(e,t);for(var i=o.length;i--;){var l=o[i],r=l.animations;Ke(e,r),r.length||l.children.length||o.splice(i,1)}t.length||o.length||n.pause()}Ge.version="3.2.1",Ge.speed=1,Ge.suspendWhenDocumentHidden=!0,Ge.running=Te,Ge.remove=function(e){for(var n=Ie(e),t=Te.length;t--;){je(n,Te[t])}},Ge.get=xe,Ge.set=Be,Ge.convertPx=Ae,Ge.path=function(e,n){var t=Y.str(e)?ie(e)[0]:e,o=n||100;return function(e){return{property:e,el:t,svg:De(t),totalLength:Se(t)*(o/100)}}},Ge.setDashoffset=function(e){var n=Se(e);return e.setAttribute("stroke-dasharray",n),n},Ge.stagger=function(e,n){void 0===n&&(n={});var t=n.direction||"normal",o=n.easing?oe(n.easing):null,i=n.grid,l=n.axis,r=n.from||0,s="first"===r,a="center"===r,c="last"===r,d=Y.arr(e),h=d?parseFloat(e[0]):parseFloat(e),u=d?parseFloat(e[1]):0,g=ge(d?e[1]:e)||0,p=n.start||0+(d?h:0),f=[],A=0;return function(e,n,v){if(s&&(r=0),a&&(r=(v-1)/2),c&&(r=v-1),!f.length){for(var C=0;C<v;C++){if(i){var m=a?(i[0]-1)/2:r%i[0],w=a?(i[1]-1)/2:Math.floor(r/i[0]),x=m-C%i[0],y=w-Math.floor(C/i[0]),b=Math.sqrt(x*x+y*y);"x"===l&&(b=-x),"y"===l&&(b=-y),f.push(b)}else f.push(Math.abs(r-C));A=Math.max.apply(Math,f)}o&&(f=f.map(function(e){return o(e/A)*A})),"reverse"===t&&(f=f.map(function(e){return l?e<0?-1*e:-e:Math.abs(A-e)}))}return p+(d?(u-h)/A:h)*(Math.round(100*f[n])/100)+g}},Ge.timeline=function(e){void 0===e&&(e={});var n=Ge(e);return n.duration=0,n.add=function(t,o){var i=Te.indexOf(n),l=n.children;function r(e){e.passThrough=!0}i>-1&&Te.splice(i,1);for(var s=0;s<l.length;s++)r(l[s]);var a=he(t,de(G,e));a.targets=a.targets||e.targets;var c=n.duration;a.autoplay=!1,a.direction=n.direction,a.timelineOffset=Y.und(o)?c:ye(o,c),r(n),n.seek(a.timelineOffset);var d=Ge(a);r(d),l.push(d);var h=Fe(l,e);return n.delay=h.delay,n.endDelay=h.endDelay,n.duration=h.duration,n.seek(0),n.reset(),n.autoplay&&n.play(),n},n},Ge.easing=oe,Ge.penner=te,Ge.random=function(e,n){return Math.floor(Math.random()*(n-e+1))+e};const Ue={name:"EgSelect",model:{prop:"value",event:"input"},props:{value:{default:null},options:{type:Array,default:()=>[]},enableSearch:{type:Boolean,default:!1},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},dropdownOnly:{type:Boolean,default:!1},triggerRect:{type:Object,default:null}},data:()=>({open:!1,searchQuery:"",highlight:-1}),computed:{normalizedOptions(){return(this.options||[]).map(e=>"string"==typeof e?{value:e,label:e}:{value:e.value,label:null!=e.label?e.label:String(e.value),color:e.color})},filteredOptions(){if(!this.enableSearch||!this.searchQuery.trim())return this.normalizedOptions;const e=this.searchQuery.trim().toLowerCase();return this.normalizedOptions.filter(n=>String(n.label||"").toLowerCase().includes(e))},selectedOpt(){const e=String(null==this.value?"":this.value);return this.normalizedOptions.find(n=>String(n.value)===e)||null},overlayStyle(){if(!this.dropdownOnly||!this.triggerRect)return{position:"fixed",zIndex:9999};const e=this.triggerRect,n=this.enableSearch?42:0,t=Math.min(28*this.filteredOptions.length+8+n,320);return{position:"fixed",top:(window.innerHeight-e.bottom>=t?e.bottom:e.top-t)+"px",left:e.left+"px",minWidth:Math.max(e.width,120)+"px",maxWidth:Math.min(360,window.innerWidth-e.left-16)+"px",zIndex:9999}}},watch:{open(e){e&&this.enableSearch&&this.$nextTick(()=>{this.$refs.searchInput&&this.$refs.searchInput.focus()})}},mounted(){this.dropdownOnly?(this.highlight=-1,this.enableSearch&&this.$nextTick(()=>{this.$refs.searchInput&&this.$refs.searchInput.focus()})):document.addEventListener("click",this._onDocClick)},beforeDestroy(){this.dropdownOnly||document.removeEventListener("click",this._onDocClick)},methods:{toggle(){if(!this.disabled&&(this.open=!this.open,this.open)){const e=String(null==this.value?"":this.value);this.highlight=this.normalizedOptions.findIndex(n=>String(n.value)===e),this.searchQuery=""}},pickOption(e){this.$emit("input",e.value),this.$emit("select",{value:e.value,label:e.label}),this.dropdownOnly||(this.open=!1,this.searchQuery="",this.highlight=-1)},onSearch(e){this.searchQuery=e.target.value,this.highlight=0},onSearchKey(e){const n=e.key,t=this.filteredOptions.length-1;if("Escape"===n)e.preventDefault(),this.dropdownOnly?this.$emit("close"):(this.open=!1,this.searchQuery="");else if("ArrowDown"===n)e.preventDefault(),this.highlight=Math.min((this.highlight<0?-1:this.highlight)+1,t),this._scrollHighlightedIntoView();else if("ArrowUp"===n)e.preventDefault(),this.highlight=Math.max((this.highlight||0)-1,0),this._scrollHighlightedIntoView();else if("PageDown"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.min(this.highlight+8,t),this._scrollHighlightedIntoView();else if("PageUp"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.max(this.highlight-8,0),this._scrollHighlightedIntoView();else if("Enter"===n){e.preventDefault();const n=this.filteredOptions[this.highlight];n&&this.pickOption(n)}},handleKey(e){const n=e.key,t=this.filteredOptions.length-1;if("Escape"===n)e.preventDefault(),this.$emit("close");else if("Enter"===n||" "===n){e.preventDefault();const n=this.filteredOptions[this.highlight];n?this.pickOption(n):this.$emit("close")}else"ArrowDown"===n?(e.preventDefault(),this.highlight=Math.min((this.highlight<0?-1:this.highlight)+1,t),this._scrollHighlightedIntoView()):"ArrowUp"===n?(e.preventDefault(),this.highlight=Math.max((this.highlight||0)-1,0),this._scrollHighlightedIntoView()):"PageDown"===n?(e.preventDefault(),this.highlight=this.highlight<0?0:Math.min(this.highlight+8,t),this._scrollHighlightedIntoView()):"PageUp"===n&&(e.preventDefault(),this.highlight=this.highlight<0?0:Math.max(this.highlight-8,0),this._scrollHighlightedIntoView())},_scrollHighlightedIntoView(){this.$nextTick(()=>{const e=this.$el.querySelectorAll(".eg-select-option")[this.highlight];if(!e)return;const n=this.$el,t=n.querySelector(".eg-select-search"),o=t?t.offsetHeight:0,i=e.offsetTop,l=i+e.offsetHeight,r=n.scrollTop+o,s=n.scrollTop+n.clientHeight;i<r?n.scrollTop=i-o:l>s&&(n.scrollTop=l-n.clientHeight)})},onRootMouseDown(e){this.dropdownOnly&&e.preventDefault()},_onDocClick(e){this.open&&(this.$el&&this.$el.contains(e.target)||(this.open=!1))}}};var Ne=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{class:e.dropdownOnly?"eg-select-dropdown":"eg-select-wrapper",style:e.dropdownOnly?e.overlayStyle:null,on:{mousedown:e.onRootMouseDown}},[e.dropdownOnly?e._e():t("div",{staticClass:"eg-select-trigger",class:{"eg-select-trigger--disabled":e.disabled,"eg-select-trigger--open":e.open},on:{click:function(n){return n.stopPropagation(),e.toggle.apply(null,arguments)}}},[e.selectedOpt&&e.selectedOpt.color?t("span",{staticClass:"eg-select-dot",style:{background:e.selectedOpt.color}}):e._e(),e._v(" "),t("span",{staticClass:"eg-select-trigger-label",class:{"eg-select-placeholder":!e.selectedOpt}},[e._v("\n "+e._s(e.selectedOpt?e.selectedOpt.label:e.placeholder)+"\n ")]),e._v(" "),t("span",{staticClass:"eg-select-caret"},[e._v("▾")])]),e._v(" "),e.dropdownOnly?[e.enableSearch?t("div",{staticClass:"eg-select-search",on:{mousedown:function(e){e.stopPropagation()}}},[t("input",{ref:"searchInput",staticClass:"eg-select-search-input",attrs:{placeholder:"Qidirish...",autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:"false"},domProps:{value:e.searchQuery},on:{input:e.onSearch,keydown:function(n){return n.stopPropagation(),e.onSearchKey.apply(null,arguments)}}})]):e._e(),e._v(" "),e._l(e.filteredOptions,function(n,o){return t("div",{key:String(n.value),staticClass:"eg-select-option",class:{"eg-select-option--active":String(n.value)===String(e.value),"eg-select-option--highlighted":o===e.highlight},on:{mousedown:function(t){return t.preventDefault(),e.pickOption(n)},mouseover:function(n){e.highlight=o}}},[n.color?t("span",{staticClass:"eg-select-dot",style:{background:n.color}}):e._e(),e._v("\n "+e._s(n.label)+"\n ")])})]:e.open?t("div",{staticClass:"eg-select-dropdown eg-select-dropdown--floating",on:{mousedown:function(e){e.stopPropagation(),e.preventDefault()}}},[e.enableSearch?t("div",{staticClass:"eg-select-search",on:{mousedown:function(e){e.stopPropagation()}}},[t("input",{ref:"searchInput",staticClass:"eg-select-search-input",attrs:{placeholder:"Qidirish...",autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:"false"},domProps:{value:e.searchQuery},on:{input:e.onSearch,keydown:function(n){return n.stopPropagation(),e.onSearchKey.apply(null,arguments)}}})]):e._e(),e._v(" "),e._l(e.filteredOptions,function(n,o){return t("div",{key:String(n.value),staticClass:"eg-select-option",class:{"eg-select-option--active":String(n.value)===String(e.value),"eg-select-option--highlighted":o===e.highlight},on:{mousedown:function(t){return t.preventDefault(),e.pickOption(n)},mouseover:function(n){e.highlight=o}}},[n.color?t("span",{staticClass:"eg-select-dot",style:{background:n.color}}):e._e(),e._v("\n "+e._s(n.label)+"\n ")])})],2):e._e()],2)};Ne._withStripped=!0;const qe=L({render:Ne,staticRenderFns:[]},function(e){e&&e("data-v-1a11683a_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Standalone wrapper */\n.eg-select-wrapper {\n position: relative;\n display: inline-block;\n min-width: 120px;\n font-size: var(--eg-font-size);\n font-family: inherit;\n}\n.eg-select-trigger {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-height: 30px;\n padding: 4px 8px;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n background: var(--eg-color-cell-bg);\n cursor: pointer;\n user-select: none;\n color: var(--eg-color-text);\n transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover {\n border-color: var(--eg-color-accent);\n}\n.eg-select-trigger--open {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled {\n background: var(--eg-color-cell-readonly);\n cursor: default;\n color: var(--eg-color-text-muted);\n}\n.eg-select-trigger-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.eg-select-placeholder {\n color: var(--eg-color-text-muted);\n}\n.eg-select-caret {\n flex-shrink: 0;\n color: var(--eg-color-text-muted);\n font-size: 12px;\n}\n\n/* Dropdown panel */\n.eg-select-dropdown {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n overflow-y: auto;\n max-height: 320px;\n padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n z-index: 999;\n margin-top: 2px;\n}\n\n/* Search input inside dropdown */\n.eg-select-search {\n padding: 6px 8px;\n border-bottom: 1px solid var(--eg-color-border-cell);\n position: sticky;\n top: 0;\n background: var(--eg-color-cell-bg);\n z-index: 1;\n}\n.eg-select-search-input {\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n padding: 4px 8px;\n font-size: var(--eg-font-size);\n outline: none;\n color: var(--eg-color-text);\n background: var(--eg-color-cell-bg);\n font-family: inherit;\n}\n.eg-select-search-input:focus {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n\n/* Option rows */\n.eg-select-option {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 12px;\n font-size: var(--eg-font-size);\n cursor: pointer;\n white-space: normal;\n word-break: break-word;\n user-select: none;\n color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n background: var(--eg-color-option-hover-bg);\n}\n.eg-select-option--active {\n font-weight: 600;\n color: var(--eg-color-accent);\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n background: var(--eg-color-option-active-hover-bg);\n}\n\n/* Color dot */\n.eg-select-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n flex-shrink: 0;\n display: inline-block;\n margin-top: 3px;\n}\n",map:{version:3,sources:["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/EgSelect.vue"],names:[],mappings:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuRA,uBAAA;AACA;EACA,kBAAA;EACA,qBAAA;EACA,gBAAA;EACA,8BAAA;EACA,oBAAA;AACA;AACA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,mCAAA;EACA,eAAA;EACA,iBAAA;EACA,2BAAA;EACA,wDAAA;AACA;AACA;EACA,oCAAA;AACA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;AACA;EACA,yCAAA;EACA,eAAA;EACA,iCAAA;AACA;AACA;EACA,OAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;AACA;AACA;EACA,iCAAA;AACA;AACA;EACA,cAAA;EACA,iCAAA;EACA,eAAA;AACA;;AAEA,mBAAA;AACA;EACA,mCAAA;EACA,wCAAA;EACA,+BAAA;EACA,qCAAA;EACA,gBAAA;EACA,iBAAA;EACA,cAAA;AACA;AACA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,eAAA;EACA,YAAA;EACA,eAAA;AACA;;AAEA,iCAAA;AACA;EACA,gBAAA;EACA,oDAAA;EACA,gBAAA;EACA,MAAA;EACA,mCAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,gBAAA;EACA,8BAAA;EACA,aAAA;EACA,2BAAA;EACA,mCAAA;EACA,oBAAA;AACA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;;AAEA,gBAAA;AACA;EACA,aAAA;EACA,uBAAA;EACA,QAAA;EACA,iBAAA;EACA,8BAAA;EACA,eAAA;EACA,mBAAA;EACA,sBAAA;EACA,iBAAA;EACA,2BAAA;AACA;AACA;;EAEA,2CAAA;AACA;AACA;EACA,gBAAA;EACA,6BAAA;AACA;AACA;;EAEA,kDAAA;AACA;;AAEA,cAAA;AACA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAAA;EACA,eAAA;AACA",file:"EgSelect.vue",sourcesContent:['<template>\n <div\n :class="dropdownOnly ? \'eg-select-dropdown\' : \'eg-select-wrapper\'"\n :style="dropdownOnly ? overlayStyle : null"\n @mousedown="onRootMouseDown"\n >\n \x3c!-- Standalone mode: trigger button --\x3e\n <div\n v-if="!dropdownOnly"\n class="eg-select-trigger"\n :class="{ \'eg-select-trigger--disabled\': disabled, \'eg-select-trigger--open\': open }"\n @click.stop="toggle"\n >\n <span v-if="selectedOpt && selectedOpt.color" class="eg-select-dot" :style="{ background: selectedOpt.color }"></span>\n <span class="eg-select-trigger-label" :class="{ \'eg-select-placeholder\': !selectedOpt }">\n {{ selectedOpt ? selectedOpt.label : placeholder }}\n </span>\n <span class="eg-select-caret">▾</span>\n </div>\n\n \x3c!-- Options panel in grid dropdown-only mode (root IS the dropdown panel) --\x3e\n <template v-if="dropdownOnly">\n <div v-if="enableSearch" class="eg-select-search" @mousedown.stop>\n <input\n ref="searchInput"\n class="eg-select-search-input"\n :value="searchQuery"\n placeholder="Qidirish..."\n autocomplete="off"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false"\n @input="onSearch"\n @keydown.stop="onSearchKey"\n />\n </div>\n <div\n v-for="(opt, idx) in filteredOptions"\n :key="String(opt.value)"\n class="eg-select-option"\n :class="{\n \'eg-select-option--active\': String(opt.value) === String(value),\n \'eg-select-option--highlighted\': idx === highlight\n }"\n @mousedown.prevent="pickOption(opt)"\n @mouseover="highlight = idx"\n >\n <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>\n {{ opt.label }}\n </div>\n </template>\n\n \x3c!-- Options panel in standalone mode (floating dropdown below trigger) --\x3e\n <div\n v-else-if="open"\n class="eg-select-dropdown eg-select-dropdown--floating"\n @mousedown.stop.prevent\n >\n <div v-if="enableSearch" class="eg-select-search" @mousedown.stop>\n <input\n ref="searchInput"\n class="eg-select-search-input"\n :value="searchQuery"\n placeholder="Qidirish..."\n autocomplete="off"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false"\n @input="onSearch"\n @keydown.stop="onSearchKey"\n />\n </div>\n <div\n v-for="(opt, idx) in filteredOptions"\n :key="String(opt.value)"\n class="eg-select-option"\n :class="{\n \'eg-select-option--active\': String(opt.value) === String(value),\n \'eg-select-option--highlighted\': idx === highlight\n }"\n @mousedown.prevent="pickOption(opt)"\n @mouseover="highlight = idx"\n >\n <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>\n {{ opt.label }}\n </div>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n name: \'EgSelect\',\n model: { prop: \'value\', event: \'input\' },\n props: {\n value: { default: null },\n options: { type: Array, default: () => [] },\n enableSearch: { type: Boolean, default: false },\n placeholder: { type: String, default: \'\' },\n disabled: { type: Boolean, default: false },\n dropdownOnly: { type: Boolean, default: false },\n triggerRect: { type: Object, default: null }\n },\n data() {\n return {\n open: false,\n searchQuery: \'\',\n highlight: -1\n }\n },\n computed: {\n normalizedOptions() {\n return (this.options || []).map(o =>\n typeof o === \'string\'\n ? { value: o, label: o }\n : { value: o.value, label: o.label != null ? o.label : String(o.value), color: o.color }\n )\n },\n filteredOptions() {\n if (!this.enableSearch || !this.searchQuery.trim()) return this.normalizedOptions\n const q = this.searchQuery.trim().toLowerCase()\n return this.normalizedOptions.filter(o => String(o.label || \'\').toLowerCase().includes(q))\n },\n selectedOpt() {\n const v = String(this.value == null ? \'\' : this.value)\n return this.normalizedOptions.find(o => String(o.value) === v) || null\n },\n overlayStyle() {\n if (!this.dropdownOnly || !this.triggerRect) return { position: \'fixed\', zIndex: 9999 }\n const rect = this.triggerRect\n const searchH = this.enableSearch ? 42 : 0\n const approxH = Math.min(this.filteredOptions.length * 28 + 8 + searchH, 320)\n const spaceBelow = window.innerHeight - rect.bottom\n const top = spaceBelow >= approxH ? rect.bottom : rect.top - approxH\n return {\n position: \'fixed\',\n top: top + \'px\',\n left: rect.left + \'px\',\n minWidth: Math.max(rect.width, 120) + \'px\',\n maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + \'px\',\n zIndex: 9999\n }\n }\n },\n watch: {\n open(val) {\n if (val && this.enableSearch) {\n this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })\n }\n }\n },\n mounted() {\n if (this.dropdownOnly) {\n this.highlight = -1\n if (this.enableSearch) {\n this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })\n }\n } else {\n document.addEventListener(\'click\', this._onDocClick)\n }\n },\n beforeDestroy() {\n if (!this.dropdownOnly) {\n document.removeEventListener(\'click\', this._onDocClick)\n }\n },\n methods: {\n toggle() {\n if (this.disabled) return\n this.open = !this.open\n if (this.open) {\n const v = String(this.value == null ? \'\' : this.value)\n this.highlight = this.normalizedOptions.findIndex(o => String(o.value) === v)\n this.searchQuery = \'\'\n }\n },\n pickOption(opt) {\n this.$emit(\'input\', opt.value)\n this.$emit(\'select\', { value: opt.value, label: opt.label })\n if (!this.dropdownOnly) {\n this.open = false\n this.searchQuery = \'\'\n this.highlight = -1\n }\n },\n onSearch(e) {\n this.searchQuery = e.target.value\n this.highlight = 0\n },\n onSearchKey(e) {\n const key = e.key\n const last = this.filteredOptions.length - 1\n if (key === \'Escape\') {\n e.preventDefault()\n if (this.dropdownOnly) this.$emit(\'close\')\n else { this.open = false; this.searchQuery = \'\' }\n } else if (key === \'ArrowDown\') {\n e.preventDefault()\n this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n this._scrollHighlightedIntoView()\n } else if (key === \'ArrowUp\') {\n e.preventDefault()\n this.highlight = Math.max((this.highlight || 0) - 1, 0)\n this._scrollHighlightedIntoView()\n } else if (key === \'PageDown\') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n this._scrollHighlightedIntoView()\n } else if (key === \'PageUp\') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n this._scrollHighlightedIntoView()\n } else if (key === \'Enter\') {\n e.preventDefault()\n const opt = this.filteredOptions[this.highlight]\n if (opt) this.pickOption(opt)\n }\n },\n handleKey(e) {\n const key = e.key\n const last = this.filteredOptions.length - 1\n if (key === \'Escape\') {\n e.preventDefault()\n this.$emit(\'close\')\n } else if (key === \'Enter\' || key === \' \') {\n e.preventDefault()\n const opt = this.filteredOptions[this.highlight]\n if (opt) this.pickOption(opt)\n else this.$emit(\'close\')\n } else if (key === \'ArrowDown\') {\n e.preventDefault()\n this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n this._scrollHighlightedIntoView()\n } else if (key === \'ArrowUp\') {\n e.preventDefault()\n this.highlight = Math.max((this.highlight || 0) - 1, 0)\n this._scrollHighlightedIntoView()\n } else if (key === \'PageDown\') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n this._scrollHighlightedIntoView()\n } else if (key === \'PageUp\') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n this._scrollHighlightedIntoView()\n }\n },\n _scrollHighlightedIntoView() {\n this.$nextTick(() => {\n const items = this.$el.querySelectorAll(\'.eg-select-option\')\n const el = items[this.highlight]\n if (!el) return\n const container = this.$el\n const searchEl = container.querySelector(\'.eg-select-search\')\n const stickyH = searchEl ? searchEl.offsetHeight : 0\n const elTop = el.offsetTop\n const elBottom = elTop + el.offsetHeight\n const visTop = container.scrollTop + stickyH\n const visBottom = container.scrollTop + container.clientHeight\n if (elTop < visTop) {\n container.scrollTop = elTop - stickyH\n } else if (elBottom > visBottom) {\n container.scrollTop = elBottom - container.clientHeight\n }\n })\n },\n onRootMouseDown(e) {\n if (this.dropdownOnly) e.preventDefault()\n },\n _onDocClick(e) {\n if (!this.open) return\n if (this.$el && this.$el.contains(e.target)) return\n this.open = false\n }\n }\n}\n<\/script>\n\n<style>\n/* Standalone wrapper */\n.eg-select-wrapper {\n position: relative;\n display: inline-block;\n min-width: 120px;\n font-size: var(--eg-font-size);\n font-family: inherit;\n}\n.eg-select-trigger {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-height: 30px;\n padding: 4px 8px;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n background: var(--eg-color-cell-bg);\n cursor: pointer;\n user-select: none;\n color: var(--eg-color-text);\n transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover {\n border-color: var(--eg-color-accent);\n}\n.eg-select-trigger--open {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled {\n background: var(--eg-color-cell-readonly);\n cursor: default;\n color: var(--eg-color-text-muted);\n}\n.eg-select-trigger-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.eg-select-placeholder {\n color: var(--eg-color-text-muted);\n}\n.eg-select-caret {\n flex-shrink: 0;\n color: var(--eg-color-text-muted);\n font-size: 12px;\n}\n\n/* Dropdown panel */\n.eg-select-dropdown {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n overflow-y: auto;\n max-height: 320px;\n padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n z-index: 999;\n margin-top: 2px;\n}\n\n/* Search input inside dropdown */\n.eg-select-search {\n padding: 6px 8px;\n border-bottom: 1px solid var(--eg-color-border-cell);\n position: sticky;\n top: 0;\n background: var(--eg-color-cell-bg);\n z-index: 1;\n}\n.eg-select-search-input {\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n padding: 4px 8px;\n font-size: var(--eg-font-size);\n outline: none;\n color: var(--eg-color-text);\n background: var(--eg-color-cell-bg);\n font-family: inherit;\n}\n.eg-select-search-input:focus {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n\n/* Option rows */\n.eg-select-option {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 12px;\n font-size: var(--eg-font-size);\n cursor: pointer;\n white-space: normal;\n word-break: break-word;\n user-select: none;\n color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n background: var(--eg-color-option-hover-bg);\n}\n.eg-select-option--active {\n font-weight: 600;\n color: var(--eg-color-accent);\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n background: var(--eg-color-option-active-hover-bg);\n}\n\n/* Color dot */\n.eg-select-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n flex-shrink: 0;\n display: inline-block;\n margin-top: 3px;\n}\n</style>\n']},media:void 0})},Ue,void 0,false,void 0,!1,B,void 0,void 0);const Ye={name:"EgTreeSelect",model:{prop:"value",event:"input"},props:{value:{default:null},options:{type:Array,default:()=>[]},valueKey:{type:String,default:"value"},labelKey:{type:String,default:"label"},childrenKey:{type:String,default:"children"},enableSearch:{type:Boolean,default:!1},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},dropdownOnly:{type:Boolean,default:!1},triggerRect:{type:Object,default:null}},data:()=>({open:!1,searchQuery:"",highlight:-1,expandedMap:{}}),computed:{keys(){return{valueKey:this.valueKey,labelKey:this.labelKey,childrenKey:this.childrenKey}},flatOptions(){return this._treeFlatten(this.options||[],this.keys,this.expandedMap,0,[])},allFlatOptions(){return this.enableSearch?this._treeFlattenAll(this.options||[],this.keys):null},filteredOptions(){if(!this.enableSearch||!this.searchQuery.trim())return this.flatOptions;const e=this.searchQuery.trim().toLowerCase();return(this.allFlatOptions||this.flatOptions).filter(n=>String(n.label||"").toLowerCase().includes(e))},selectedLabel(){const e=String(null==this.value?"":this.value);if(!e)return null;const n=this._treeFindLabel(this.options||[],this.keys,e);return null!=n?n:null},overlayStyle(){if(!this.dropdownOnly||!this.triggerRect)return{position:"fixed",zIndex:9999};const e=this.triggerRect,n=this.enableSearch?42:0,t=Math.min(28*this.filteredOptions.length+8+n,320);return{position:"fixed",top:(window.innerHeight-e.bottom>=t?e.bottom:e.top-t)+"px",left:e.left+"px",minWidth:Math.max(e.width,120)+"px",maxWidth:Math.min(360,window.innerWidth-e.left-16)+"px",zIndex:9999}}},watch:{open(e){e&&this.enableSearch&&this.$nextTick(()=>{this.$refs.searchInput&&this.$refs.searchInput.focus()})}},mounted(){this.dropdownOnly?(this._initExpanded(),this.highlight=-1,this.enableSearch&&this.$nextTick(()=>{this.$refs.searchInput&&this.$refs.searchInput.focus()})):document.addEventListener("click",this._onDocClick)},beforeDestroy(){this.dropdownOnly||document.removeEventListener("click",this._onDocClick)},methods:{_initExpanded(){const e=String(null==this.value?"":this.value),n=this._treeFindPath(this.options||[],this.keys,e,[])||[],t={};n.forEach(e=>{t[e]=!0}),this.expandedMap=t;const o=this.flatOptions;this.highlight=o.findIndex(n=>String(n.value)===e)},toggle(){this.disabled||(this.open=!this.open,this.open&&(this.searchQuery="",this._initExpanded()))},pickOption(e){this.$emit("input",e.value),this.$emit("select",{value:e.value,label:e.label}),this.dropdownOnly||(this.open=!1,this.searchQuery="",this.highlight=-1)},toggleNode(e){const n=this.flatOptions[e];if(!n||!n.hasChildren)return;const t={...this.expandedMap};t[n.id]?delete t[n.id]:t[n.id]=!0,this.expandedMap=t;const o=this.flatOptions.findIndex(e=>e.id===n.id);this.highlight=o>=0?o:this.highlight},onSearch(e){this.searchQuery=e.target.value,this.highlight=0},onSearchKey(e){const n=e.key,t=this.filteredOptions.length-1;if("Escape"===n)e.preventDefault(),this.dropdownOnly?this.$emit("close"):(this.open=!1,this.searchQuery="");else if("ArrowDown"===n)e.preventDefault(),this.highlight=Math.min((this.highlight<0?-1:this.highlight)+1,t),this._scrollHighlightedIntoView();else if("ArrowUp"===n)e.preventDefault(),this.highlight=Math.max((this.highlight||0)-1,0),this._scrollHighlightedIntoView();else if("PageDown"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.min(this.highlight+8,t),this._scrollHighlightedIntoView();else if("PageUp"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.max(this.highlight-8,0),this._scrollHighlightedIntoView();else if("Enter"===n){e.preventDefault();const n=this.filteredOptions[this.highlight];n&&this.pickOption(n)}},handleKey(e){const n=e.key,t=this.filteredOptions.length-1;if("Escape"===n)e.preventDefault(),this.$emit("close");else if("Enter"===n||" "===n){e.preventDefault();const n=this.filteredOptions[this.highlight];n?this.pickOption(n):this.$emit("close")}else if("ArrowDown"===n)e.preventDefault(),this.highlight=Math.min((this.highlight<0?-1:this.highlight)+1,t),this._scrollHighlightedIntoView();else if("ArrowUp"===n)e.preventDefault(),this.highlight=Math.max((this.highlight||0)-1,0),this._scrollHighlightedIntoView();else if("PageDown"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.min(this.highlight+8,t),this._scrollHighlightedIntoView();else if("PageUp"===n)e.preventDefault(),this.highlight=this.highlight<0?0:Math.max(this.highlight-8,0),this._scrollHighlightedIntoView();else if(!this.searchQuery&&("ArrowRight"===n||"ArrowLeft"===n)){e.preventDefault();const t=this.flatOptions[this.highlight];t&&t.hasChildren&&("ArrowRight"!==n||t.expanded||this.toggleNode(this.highlight),"ArrowLeft"===n&&t.expanded&&this.toggleNode(this.highlight))}},_scrollHighlightedIntoView(){this.$nextTick(()=>{const e=this.$el.querySelectorAll(".eg-select-option")[this.highlight];if(!e)return;const n=this.$el,t=n.querySelector(".eg-select-search"),o=t?t.offsetHeight:0,i=e.offsetTop,l=i+e.offsetHeight,r=n.scrollTop+o,s=n.scrollTop+n.clientHeight;i<r?n.scrollTop=i-o:l>s&&(n.scrollTop=l-n.clientHeight)})},onRootMouseDown(e){this.dropdownOnly&&e.preventDefault()},_onDocClick(e){this.open&&(this.$el&&this.$el.contains(e.target)||(this.open=!1))},_treeFlatten(e,n,t,o,i){let l=[];return(e||[]).forEach((e,r)=>{const s=i.concat(r),a=s.join("-"),c=Array.isArray(e[n.childrenKey])?e[n.childrenKey]:[],d=c.length>0,h=d&&!!t[a];l.push({value:e[n.valueKey],label:null!=e[n.labelKey]?e[n.labelKey]:String(e[n.valueKey]),color:e.color,id:a,depth:o,hasChildren:d,expanded:h}),h&&(l=l.concat(this._treeFlatten(c,n,t,o+1,s)))}),l},_treeFlattenAll(e,n){const t=[],o=e=>{(e||[]).forEach(e=>{const i=Array.isArray(e[n.childrenKey])?e[n.childrenKey]:[];t.push({value:e[n.valueKey],label:null!=e[n.labelKey]?e[n.labelKey]:String(e[n.valueKey]),color:e.color,id:String(e[n.valueKey]),depth:0,hasChildren:!1,expanded:!1}),i.length&&o(i)})};return o(e),t},_treeFindLabel(e,n,t){for(const o of e||[]){if(String(o[n.valueKey])===t)return null!=o[n.labelKey]?o[n.labelKey]:String(o[n.valueKey]);const e=this._treeFindLabel(o[n.childrenKey],n,t);if(null!=e)return e}return null},_treeFindPath(e,n,t,o){for(let i=0;i<(e||[]).length;i++){const l=e[i],r=o.concat(i);if(String(l[n.valueKey])===t)return[r.join("-")];const s=l[n.childrenKey];if(Array.isArray(s)){const e=this._treeFindPath(s,n,t,r);if(e)return[r.join("-")].concat(e)}}return null}}};var Xe=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{class:e.dropdownOnly?"eg-select-dropdown":"eg-select-wrapper",style:e.dropdownOnly?e.overlayStyle:null,on:{mousedown:e.onRootMouseDown}},[e.dropdownOnly?e._e():t("div",{staticClass:"eg-select-trigger",class:{"eg-select-trigger--disabled":e.disabled,"eg-select-trigger--open":e.open},on:{click:function(n){return n.stopPropagation(),e.toggle.apply(null,arguments)}}},[t("span",{staticClass:"eg-select-trigger-label",class:{"eg-select-placeholder":null==e.selectedLabel}},[e._v("\n "+e._s(null!=e.selectedLabel?e.selectedLabel:e.placeholder)+"\n ")]),e._v(" "),t("span",{staticClass:"eg-select-caret"},[e._v("▾")])]),e._v(" "),e.dropdownOnly?[e.enableSearch?t("div",{staticClass:"eg-select-search",on:{mousedown:function(e){e.stopPropagation()}}},[t("input",{ref:"searchInput",staticClass:"eg-select-search-input",attrs:{placeholder:"Qidirish...",autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:"false"},domProps:{value:e.searchQuery},on:{input:e.onSearch,keydown:function(n){return n.stopPropagation(),e.onSearchKey.apply(null,arguments)}}})]):e._e(),e._v(" "),e._l(e.filteredOptions,function(n,o){return t("div",{key:null!=n.id?n.id:String(n.value),staticClass:"eg-select-option",class:{"eg-select-option--active":String(n.value)===String(e.value),"eg-select-option--highlighted":o===e.highlight},style:e.searchQuery?null:{paddingLeft:12+16*n.depth+"px"},on:{mousedown:function(t){return t.preventDefault(),e.pickOption(n)},mouseover:function(n){e.highlight=o}}},[e.searchQuery?e._e():t("span",{staticClass:"eg-tree-toggle",class:{"eg-tree-toggle--leaf":!n.hasChildren},on:{mousedown:function(n){return n.preventDefault(),n.stopPropagation(),e.toggleNode(o)}}},[e._v(e._s(n.hasChildren?n.expanded?"▾":"▸":""))]),e._v(" "),n.color?t("span",{staticClass:"eg-select-dot",style:{background:n.color}}):e._e(),e._v("\n "+e._s(n.label)+"\n ")])})]:e.open?t("div",{staticClass:"eg-select-dropdown eg-select-dropdown--floating",on:{mousedown:function(e){e.stopPropagation(),e.preventDefault()}}},[e.enableSearch?t("div",{staticClass:"eg-select-search",on:{mousedown:function(e){e.stopPropagation()}}},[t("input",{ref:"searchInput",staticClass:"eg-select-search-input",attrs:{placeholder:"Qidirish...",autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:"false"},domProps:{value:e.searchQuery},on:{input:e.onSearch,keydown:function(n){return n.stopPropagation(),e.onSearchKey.apply(null,arguments)}}})]):e._e(),e._v(" "),e._l(e.filteredOptions,function(n,o){return t("div",{key:null!=n.id?n.id:String(n.value),staticClass:"eg-select-option",class:{"eg-select-option--active":String(n.value)===String(e.value),"eg-select-option--highlighted":o===e.highlight},style:e.searchQuery?null:{paddingLeft:12+16*n.depth+"px"},on:{mousedown:function(t){return t.preventDefault(),e.pickOption(n)},mouseover:function(n){e.highlight=o}}},[e.searchQuery?e._e():t("span",{staticClass:"eg-tree-toggle",class:{"eg-tree-toggle--leaf":!n.hasChildren},on:{mousedown:function(n){return n.preventDefault(),n.stopPropagation(),e.toggleNode(o)}}},[e._v(e._s(n.hasChildren?n.expanded?"▾":"▸":""))]),e._v(" "),n.color?t("span",{staticClass:"eg-select-dot",style:{background:n.color}}):e._e(),e._v("\n "+e._s(n.label)+"\n ")])})],2):e._e()],2)};Xe._withStripped=!0;const Ze=L({render:Xe,staticRenderFns:[]},function(e){e&&e("data-v-58d5e187_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Tree toggle */\n.eg-tree-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--eg-color-text-muted);\n margin-top: 1px;\n}\n.eg-tree-toggle--leaf {\n visibility: hidden;\n}\n",map:{version:3,sources:["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/EgTreeSelect.vue"],names:[],mappings:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyXA,gBAAA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;EACA,iCAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;AACA",file:"EgTreeSelect.vue",sourcesContent:["<template>\n <div\n :class=\"dropdownOnly ? 'eg-select-dropdown' : 'eg-select-wrapper'\"\n :style=\"dropdownOnly ? overlayStyle : null\"\n @mousedown=\"onRootMouseDown\"\n >\n \x3c!-- Standalone mode: trigger button --\x3e\n <div\n v-if=\"!dropdownOnly\"\n class=\"eg-select-trigger\"\n :class=\"{ 'eg-select-trigger--disabled': disabled, 'eg-select-trigger--open': open }\"\n @click.stop=\"toggle\"\n >\n <span class=\"eg-select-trigger-label\" :class=\"{ 'eg-select-placeholder': selectedLabel == null }\">\n {{ selectedLabel != null ? selectedLabel : placeholder }}\n </span>\n <span class=\"eg-select-caret\">▾</span>\n </div>\n\n \x3c!-- Options panel in grid dropdown-only mode --\x3e\n <template v-if=\"dropdownOnly\">\n <div v-if=\"enableSearch\" class=\"eg-select-search\" @mousedown.stop>\n <input\n ref=\"searchInput\"\n class=\"eg-select-search-input\"\n :value=\"searchQuery\"\n placeholder=\"Qidirish...\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n @input=\"onSearch\"\n @keydown.stop=\"onSearchKey\"\n />\n </div>\n <div\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.id != null ? opt.id : String(opt.value)\"\n class=\"eg-select-option\"\n :class=\"{\n 'eg-select-option--active': String(opt.value) === String(value),\n 'eg-select-option--highlighted': idx === highlight\n }\"\n :style=\"!searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null\"\n @mousedown.prevent=\"pickOption(opt)\"\n @mouseover=\"highlight = idx\"\n >\n <span\n v-if=\"!searchQuery\"\n class=\"eg-tree-toggle\"\n :class=\"{ 'eg-tree-toggle--leaf': !opt.hasChildren }\"\n @mousedown.prevent.stop=\"toggleNode(idx)\"\n >{{ opt.hasChildren ? (opt.expanded ? '▾' : '▸') : '' }}</span>\n <span v-if=\"opt.color\" class=\"eg-select-dot\" :style=\"{ background: opt.color }\"></span>\n {{ opt.label }}\n </div>\n </template>\n\n \x3c!-- Options panel in standalone mode --\x3e\n <div\n v-else-if=\"open\"\n class=\"eg-select-dropdown eg-select-dropdown--floating\"\n @mousedown.stop.prevent\n >\n <div v-if=\"enableSearch\" class=\"eg-select-search\" @mousedown.stop>\n <input\n ref=\"searchInput\"\n class=\"eg-select-search-input\"\n :value=\"searchQuery\"\n placeholder=\"Qidirish...\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n @input=\"onSearch\"\n @keydown.stop=\"onSearchKey\"\n />\n </div>\n <div\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.id != null ? opt.id : String(opt.value)\"\n class=\"eg-select-option\"\n :class=\"{\n 'eg-select-option--active': String(opt.value) === String(value),\n 'eg-select-option--highlighted': idx === highlight\n }\"\n :style=\"!searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null\"\n @mousedown.prevent=\"pickOption(opt)\"\n @mouseover=\"highlight = idx\"\n >\n <span\n v-if=\"!searchQuery\"\n class=\"eg-tree-toggle\"\n :class=\"{ 'eg-tree-toggle--leaf': !opt.hasChildren }\"\n @mousedown.prevent.stop=\"toggleNode(idx)\"\n >{{ opt.hasChildren ? (opt.expanded ? '▾' : '▸') : '' }}</span>\n <span v-if=\"opt.color\" class=\"eg-select-dot\" :style=\"{ background: opt.color }\"></span>\n {{ opt.label }}\n </div>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'EgTreeSelect',\n model: { prop: 'value', event: 'input' },\n props: {\n value: { default: null },\n options: { type: Array, default: () => [] },\n valueKey: { type: String, default: 'value' },\n labelKey: { type: String, default: 'label' },\n childrenKey: { type: String, default: 'children' },\n enableSearch: { type: Boolean, default: false },\n placeholder: { type: String, default: '' },\n disabled: { type: Boolean, default: false },\n dropdownOnly: { type: Boolean, default: false },\n triggerRect: { type: Object, default: null }\n },\n data() {\n return {\n open: false,\n searchQuery: '',\n highlight: -1,\n expandedMap: {}\n }\n },\n computed: {\n keys() {\n return { valueKey: this.valueKey, labelKey: this.labelKey, childrenKey: this.childrenKey }\n },\n flatOptions() {\n return this._treeFlatten(this.options || [], this.keys, this.expandedMap, 0, [])\n },\n allFlatOptions() {\n if (!this.enableSearch) return null\n return this._treeFlattenAll(this.options || [], this.keys)\n },\n filteredOptions() {\n if (!this.enableSearch || !this.searchQuery.trim()) return this.flatOptions\n const q = this.searchQuery.trim().toLowerCase()\n const pool = this.allFlatOptions || this.flatOptions\n return pool.filter(o => String(o.label || '').toLowerCase().includes(q))\n },\n selectedLabel() {\n const v = String(this.value == null ? '' : this.value)\n if (!v) return null\n const found = this._treeFindLabel(this.options || [], this.keys, v)\n return found != null ? found : null\n },\n overlayStyle() {\n if (!this.dropdownOnly || !this.triggerRect) return { position: 'fixed', zIndex: 9999 }\n const rect = this.triggerRect\n const searchH = this.enableSearch ? 42 : 0\n const approxH = Math.min(this.filteredOptions.length * 28 + 8 + searchH, 320)\n const spaceBelow = window.innerHeight - rect.bottom\n const top = spaceBelow >= approxH ? rect.bottom : rect.top - approxH\n return {\n position: 'fixed',\n top: top + 'px',\n left: rect.left + 'px',\n minWidth: Math.max(rect.width, 120) + 'px',\n maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + 'px',\n zIndex: 9999\n }\n }\n },\n watch: {\n open(val) {\n if (val && this.enableSearch) {\n this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })\n }\n }\n },\n mounted() {\n if (this.dropdownOnly) {\n this._initExpanded()\n this.highlight = -1\n if (this.enableSearch) {\n this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })\n }\n } else {\n document.addEventListener('click', this._onDocClick)\n }\n },\n beforeDestroy() {\n if (!this.dropdownOnly) {\n document.removeEventListener('click', this._onDocClick)\n }\n },\n methods: {\n _initExpanded() {\n const v = String(this.value == null ? '' : this.value)\n const path = this._treeFindPath(this.options || [], this.keys, v, []) || []\n const expandedMap = {}\n path.forEach(id => { expandedMap[id] = true })\n this.expandedMap = expandedMap\n const flat = this.flatOptions\n this.highlight = flat.findIndex(o => String(o.value) === v)\n },\n toggle() {\n if (this.disabled) return\n this.open = !this.open\n if (this.open) {\n this.searchQuery = ''\n this._initExpanded()\n }\n },\n pickOption(opt) {\n this.$emit('input', opt.value)\n this.$emit('select', { value: opt.value, label: opt.label })\n if (!this.dropdownOnly) {\n this.open = false\n this.searchQuery = ''\n this.highlight = -1\n }\n },\n toggleNode(idx) {\n const opt = this.flatOptions[idx]\n if (!opt || !opt.hasChildren) return\n const next = { ...this.expandedMap }\n if (next[opt.id]) delete next[opt.id]\n else next[opt.id] = true\n this.expandedMap = next\n const newFlat = this.flatOptions\n const newIdx = newFlat.findIndex(o => o.id === opt.id)\n this.highlight = newIdx >= 0 ? newIdx : this.highlight\n },\n onSearch(e) {\n this.searchQuery = e.target.value\n this.highlight = 0\n },\n onSearchKey(e) {\n const key = e.key\n const last = this.filteredOptions.length - 1\n if (key === 'Escape') {\n e.preventDefault()\n if (this.dropdownOnly) this.$emit('close')\n else { this.open = false; this.searchQuery = '' }\n } else if (key === 'ArrowDown') {\n e.preventDefault()\n this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n this._scrollHighlightedIntoView()\n } else if (key === 'ArrowUp') {\n e.preventDefault()\n this.highlight = Math.max((this.highlight || 0) - 1, 0)\n this._scrollHighlightedIntoView()\n } else if (key === 'PageDown') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n this._scrollHighlightedIntoView()\n } else if (key === 'PageUp') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n this._scrollHighlightedIntoView()\n } else if (key === 'Enter') {\n e.preventDefault()\n const opt = this.filteredOptions[this.highlight]\n if (opt) this.pickOption(opt)\n }\n },\n handleKey(e) {\n const key = e.key\n const last = this.filteredOptions.length - 1\n if (key === 'Escape') {\n e.preventDefault()\n this.$emit('close')\n } else if (key === 'Enter' || key === ' ') {\n e.preventDefault()\n const opt = this.filteredOptions[this.highlight]\n if (opt) this.pickOption(opt)\n else this.$emit('close')\n } else if (key === 'ArrowDown') {\n e.preventDefault()\n this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n this._scrollHighlightedIntoView()\n } else if (key === 'ArrowUp') {\n e.preventDefault()\n this.highlight = Math.max((this.highlight || 0) - 1, 0)\n this._scrollHighlightedIntoView()\n } else if (key === 'PageDown') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n this._scrollHighlightedIntoView()\n } else if (key === 'PageUp') {\n e.preventDefault()\n this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n this._scrollHighlightedIntoView()\n } else if (!this.searchQuery && (key === 'ArrowRight' || key === 'ArrowLeft')) {\n e.preventDefault()\n const opt = this.flatOptions[this.highlight]\n if (opt && opt.hasChildren) {\n if (key === 'ArrowRight' && !opt.expanded) this.toggleNode(this.highlight)\n if (key === 'ArrowLeft' && opt.expanded) this.toggleNode(this.highlight)\n }\n }\n },\n _scrollHighlightedIntoView() {\n this.$nextTick(() => {\n const items = this.$el.querySelectorAll('.eg-select-option')\n const el = items[this.highlight]\n if (!el) return\n const container = this.$el\n const searchEl = container.querySelector('.eg-select-search')\n const stickyH = searchEl ? searchEl.offsetHeight : 0\n const elTop = el.offsetTop\n const elBottom = elTop + el.offsetHeight\n const visTop = container.scrollTop + stickyH\n const visBottom = container.scrollTop + container.clientHeight\n if (elTop < visTop) {\n container.scrollTop = elTop - stickyH\n } else if (elBottom > visBottom) {\n container.scrollTop = elBottom - container.clientHeight\n }\n })\n },\n onRootMouseDown(e) {\n if (this.dropdownOnly) e.preventDefault()\n },\n _onDocClick(e) {\n if (!this.open) return\n if (this.$el && this.$el.contains(e.target)) return\n this.open = false\n },\n _treeFlatten(nodes, keys, expandedMap, depth, pathArr) {\n let out = []\n ;(nodes || []).forEach((node, idx) => {\n const path = pathArr.concat(idx)\n const id = path.join('-')\n const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []\n const hasChildren = children.length > 0\n const expanded = hasChildren && !!expandedMap[id]\n out.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id, depth, hasChildren, expanded })\n if (expanded) out = out.concat(this._treeFlatten(children, keys, expandedMap, depth + 1, path))\n })\n return out\n },\n _treeFlattenAll(nodes, keys) {\n const result = []\n const walk = (list) => {\n ;(list || []).forEach(node => {\n const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []\n result.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id: String(node[keys.valueKey]), depth: 0, hasChildren: false, expanded: false })\n if (children.length) walk(children)\n })\n }\n walk(nodes)\n return result\n },\n _treeFindLabel(nodes, keys, value) {\n for (const node of (nodes || [])) {\n if (String(node[keys.valueKey]) === value) {\n return node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])\n }\n const found = this._treeFindLabel(node[keys.childrenKey], keys, value)\n if (found != null) return found\n }\n return null\n },\n _treeFindPath(nodes, keys, value, pathArr) {\n for (let i = 0; i < (nodes || []).length; i++) {\n const node = nodes[i]\n const path = pathArr.concat(i)\n if (String(node[keys.valueKey]) === value) return [path.join('-')]\n const children = node[keys.childrenKey]\n if (Array.isArray(children)) {\n const sub = this._treeFindPath(children, keys, value, path)\n if (sub) return [path.join('-')].concat(sub)\n }\n }\n return null\n }\n }\n}\n<\/script>\n\n<style>\n/* Tree toggle */\n.eg-tree-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--eg-color-text-muted);\n margin-top: 1px;\n}\n.eg-tree-toggle--leaf {\n visibility: hidden;\n}\n</style>\n"]},media:void 0})},Ye,void 0,false,void 0,!1,B,void 0,void 0),Qe={small:{row:22,header:24,footer:24},middle:{row:28,header:28,footer:28},large:{row:36,header:36,footer:36}},Je=50,en=20;const nn={name:"ExcelGrid",components:{EgCheckbox:W,EgSelect:qe,EgTreeSelect:Ze},model:{prop:"data",event:"input"},props:{data:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},hiddenColumns:{type:Array,default:()=>[]},hiddenRows:{type:Array,default:()=>[]},merges:{type:Array,default:()=>[]},collapsedGroups:{type:Array,default:()=>[]},height:{type:Number,default:400},width:{type:[Number,String],default:"100%"},beforeDrop:{type:Function,default:null},locale:{type:String,default:"en"},pinnedColumns:{type:Object,default:()=>({})},cellEditable:{type:Function,default:null},cellValidator:{type:Function,default:null},cellValidationMessage:{type:[Function,String],default:null},strictBulkValidation:{type:Boolean,default:!1},size:{type:String,default:"middle"},autoWidth:{type:Boolean,default:!1},columnDraggable:{type:Boolean,default:!0}},data:()=>({activeCell:{row:0,col:0},selectionRanges:[],isMouseDown:!1,mouseDownRange:null,isCtrlDrag:!1,editingCell:null,editValue:"",editOriginalValue:"",scrollTop:0,scrollLeft:0,headerViewportWidth:null,virtualStartIndex:0,virtualEndIndex:0,virtualOffsetTop:0,totalVirtualHeight:0,colWidths:{},rowHeights:{},importState:{active:!1,percent:0,message:""},exportState:{active:!1},resizing:{active:!1,type:null,index:-1,startX:0,startY:0,startSize:0,currentPos:0},fillDrag:{active:!1,sourceRange:null,currentRow:-1,currentCol:-1},dragMove:{active:!1,sourceRange:null,startX:0,startY:0,targetRow:-1,targetCol:-1,copyMode:!1},clipboardMatrix:null,clipboardRange:null,clipboardMode:null,contextMenu:{visible:!1,x:0,y:0,row:-1,col:-1},selectDropdown:null,invalidCell:null,internalMerges:[],internalGroups:[],internalCollapsedGroups:[],headerDepth:1,headerRows:[],leafCols:[],columnTotals:{},colDrag:{pending:!1,active:!1,sourceFirstLeaf:-1,sourceLeafCount:1,dropIndex:-1,startX:0,startY:0,ghostLabel:""}}),computed:{t(){return e=this.locale,z[e]||z.en;var e},pinnedLeftSet(){const e=new Set;return this.leafCols.forEach(n=>{"left"===this.pinnedColumns[n.key]&&e.add(n._flatIndex)}),e},pinnedRightSet(){const e=new Set;return this.leafCols.forEach(n=>{"right"===this.pinnedColumns[n.key]&&e.add(n._flatIndex)}),e},pinnedLeftCols(){return this.leafCols.filter(e=>this.pinnedLeftSet.has(e._flatIndex))},pinnedRightCols(){return this.leafCols.filter(e=>this.pinnedRightSet.has(e._flatIndex))},hasPinnedLeft(){return this.pinnedLeftSet.size>0},hasPinnedRight(){return this.pinnedRightSet.size>0},hasFooter(){return this.leafCols.some(e=>e.showTotal)},pinnedLeftWidth(){let e=0;for(const n of this.pinnedLeftCols)this.isColHidden(n._flatIndex)||(e+=this.getColW(n._flatIndex));return e},pinnedRightWidth(){let e=0;for(const n of this.pinnedRightCols)this.isColHidden(n._flatIndex)||(e+=this.getColW(n._flatIndex));return e},totalRows(){return this.data.length},_sizeConf(){return Qe[this.size]||Qe.middle},_rowH(){return this._sizeConf.row},_headerRowH(){return this._sizeConf.header},_footerRowH(){return this._sizeConf.footer},headerRowHeight(){return this._headerRowH},footerRowHeight(){return this._footerRowH},cumulativeHeights(){return function(e,n,t={},o=new Set){const i=new Array(e+1);i[0]=0;for(let l=0;l<e;l++){const e=o.has(l)?0:void 0!==t[l]?t[l]:n;i[l+1]=i[l]+e}return i}(this.totalRows,this._rowH,this.rowHeights,this.hiddenRowSet)},hiddenColSet(){return new Set(this.hiddenColumns)},hiddenRowSet(){const e=new Set(this.hiddenRows);return function(e,n){const t=new Set;for(const o of e)if("row"===o.type&&S(o,n))for(let e=o.startIndex;e<=o.endIndex;e++)t.add(e);return t}(this.internalGroups,this.internalCollapsedGroups).forEach(n=>e.add(n)),e},hiddenColFromGroupSet(){return function(e,n){const t=new Set;for(const o of e)if("column"===o.type&&S(o,n))for(let e=o.startIndex;e<=o.endIndex;e++)t.add(e);return t}(this.internalGroups,this.internalCollapsedGroups)},effectiveHiddenColSet(){const e=new Set(this.hiddenColSet);return this.hiddenColFromGroupSet.forEach(n=>e.add(n)),e},rowGroups(){return this.internalGroups.filter(e=>"row"===e.type)},colGroups(){return this.internalGroups.filter(e=>"column"===e.type)},visibleRowRange(){const e=[];for(let n=this.virtualStartIndex;n<=this.virtualEndIndex;n++)e.push(n);return e},primaryRange(){return function(e,n){if(!e||0===e.length)return null;return i(e.find(e=>l(n.row,n.col,e))||e[0])}(this.selectionRanges,this.activeCell)},fillHandleVisible(){return this.primaryRange&&!this.editingCell},fillHandleStyle(){if(!this.primaryRange)return{};const e=i(this.primaryRange),n=this.cumulativeHeights[e.endRow+1]||0,t=this.getColLeft(e.endCol+1);return{position:"absolute",width:"6px",height:"6px",background:"var(--eg-color-accent)",border:"1px solid white",bottom:this.totalVirtualHeight-n+1+"px",right:this.scrollContentWidth-t+1+"px",cursor:"crosshair",zIndex:10}},invalidTooltipStyle(){if(!this.invalidCell||!this.invalidCell.rect)return{};const{rect:e}=this.invalidCell;return{position:"fixed",top:e.bottom+4+"px",left:e.left+"px",zIndex:9999}},dragGhostStyle(){if(!this.dragMove.active||this.dragMove.targetRow<0)return{};const e=i(this.dragMove.sourceRange),n=e.endRow-e.startRow,t=e.endCol-e.startCol;return{position:"absolute",top:(this.cumulativeHeights[this.dragMove.targetRow]||0)+"px",left:this.getColLeft(this.dragMove.targetCol)+"px",width:this.getRangeWidth(this.dragMove.targetCol,this.dragMove.targetCol+t)+"px",height:this.getRangeHeight(this.dragMove.targetRow,this.dragMove.targetRow+n)+"px",border:"2px dashed #1a73e8",pointerEvents:"none",zIndex:20}},wrapperStyle(){return{width:"number"==typeof this.width?this.width+"px":this.width,height:this.height+"px",position:"relative",outline:"none",userSelect:"none"}},headerAreaStyle:()=>({display:"flex",flexDirection:"row",position:"sticky",top:0,zIndex:30,background:"var(--eg-color-header-bg)"}),cornerStyle(){const e=this.rowGroups.length?en:0;return{width:Je+e+"px",minWidth:Je+e+"px",height:this._headerRowH*this.headerDepth+"px",background:"var(--eg-color-header-bg)",borderRight:"1px solid var(--eg-color-border)",borderBottom:"1px solid var(--eg-color-border)",boxSizing:"border-box",flexShrink:0}},rowOutlineGutterStyle:()=>({width:"20px",flexShrink:0}),frozenColHeaderStyle(){const e=this.getFrozenWidth();return{width:e+"px",minWidth:e+"px",overflow:"hidden",flexShrink:0}},scrollColHeaderStyle(){return null!=this.headerViewportWidth?{flex:"0 0 "+this.headerViewportWidth+"px",overflow:"hidden"}:{flex:1,overflow:"hidden"}},bodyAreaStyle:()=>({display:"flex",flexDirection:"row",flex:1,position:"relative"}),rowHeaderColStyle:()=>({width:"50px",minWidth:"50px",flexShrink:0,display:"flex",flexDirection:"column",position:"sticky",left:0,zIndex:20,background:"var(--eg-color-header-bg)"}),rowOutlineColStyle:()=>({width:"20px",minWidth:"20px",flexShrink:0,position:"relative",background:"var(--eg-color-cell-bg)"}),scrollBodyStyle:()=>({flex:1,overflow:"auto",position:"relative",overflowAnchor:"none"}),frozenColBodyStyle(){return{position:"sticky",left:0,width:this.getFrozenWidth()+"px",zIndex:10,background:"white",overflow:"hidden"}},mainCellsStyle(){return{position:"absolute",left:this.getFrozenWidth()+"px",top:0,bottom:0}},scrollContentWidth(){let e=0;for(let n=0;n<this.leafCols.length;n++)this.isColHidden(n)||this.pinnedRightSet.has(n)||(e+=this.getColW(n));return this.hasPinnedRight&&(e+=this.pinnedRightWidth),e},scrollableContentWidth(){let e=0;for(let n=0;n<this.leafCols.length;n++)!this.isColHidden(n)&&this.isColumnScrollable(n)&&(e+=this.getColW(n));return e},pinnedRightBodyStyle(){return{position:"sticky",right:0,width:this.pinnedRightWidth+"px",zIndex:10,background:"white",flexShrink:0}},pinnedRightHeaderStyle(){return{width:this.pinnedRightWidth+"px",minWidth:this.pinnedRightWidth+"px",overflow:"hidden",flexShrink:0,borderLeft:"1px solid var(--eg-color-border)"}},scrollRowHeadersStyle:()=>({flex:1,overflow:"hidden",position:"relative",overflowAnchor:"none"}),footerAreaStyle:()=>({display:"flex",flexDirection:"row",flexShrink:0,position:"sticky",bottom:0,zIndex:30,background:"var(--eg-color-footer-bg)",boxShadow:"0 -2px 0 0 var(--eg-color-border-strong)"}),footerLabelStyle(){const e=this.rowGroups.length?en:0;return{width:Je+e+"px",minWidth:Je+e+"px",height:this._footerRowH+"px",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--eg-color-footer-bg)",borderRight:"1px solid var(--eg-color-border)",borderTop:"1px solid var(--eg-color-border)",boxSizing:"border-box",flexShrink:0,fontSize:"var(--eg-font-size-header)",fontWeight:600}},frozenColFooterStyle(){const e=this.getFrozenWidth();return{width:e+"px",minWidth:e+"px",height:this._footerRowH+"px",overflow:"hidden",flexShrink:0}},pinnedRightFooterStyle(){return{width:this.pinnedRightWidth+"px",minWidth:this.pinnedRightWidth+"px",height:this._footerRowH+"px",overflow:"hidden",flexShrink:0,borderLeft:"1px solid var(--eg-color-border)"}},colOutlineRowStyle:()=>({position:"absolute",top:"-20px",left:0,right:0,height:"20px"}),resizeLineStyle(){return this.resizing.active?"col"===this.resizing.type?{position:"fixed",top:0,left:this.resizing.currentPos+"px",width:"2px",height:"100%",background:"var(--eg-color-accent)",pointerEvents:"none",zIndex:9999}:{position:"fixed",left:0,top:this.resizing.currentPos+"px",height:"2px",width:"100%",background:"var(--eg-color-accent)",pointerEvents:"none",zIndex:9999}:{}}},watch:{size(){this.rowHeights={},this.$nextTick(()=>this.updateVirtualScroll())},autoWidth(e){e&&this._applyAutoWidth()},columns:{immediate:!0,handler(e){this.leafCols=s(e),this.headerDepth=a(e),this.headerRows=c(e,this.headerDepth),this.leafCols.forEach(e=>{void 0===this.colWidths[e._flatIndex]&&(this.colWidths[e._flatIndex]=e.width||100)}),this.computeColumnTotals(),this.updateVirtualScroll(),this._applyAutoWidth()}},merges:{immediate:!0,handler(e){this.internalMerges=e?[...e]:[]}},collapsedGroups:{immediate:!0,handler(e){this.internalCollapsedGroups=e?[...e]:[]}},data:{immediate:!0,handler(e){this._dataRaw=e||[],this.updateVirtualScroll(),this.computeColumnTotals(),this.$forceUpdate(),this._applyAutoWidth()}},totalRows(){this.updateVirtualScroll()},hiddenRowSet(){this.updateVirtualScroll()},totalVirtualHeight(){this.$nextTick(this.syncHeaderViewportWidth)}},created(){this._dataRaw=this.data||[],this._cellStyleCache=Object.create(null),this._rowStyleCache=Object.create(null),this._rowHeaderStyleCache=Object.create(null),this._scrollRAF=null,this._resizeRAF=null,this._history=[],this._historyIndex=-1,this._historySkip=!1,this._dragOffsets={}},mounted(){this.updateVirtualScroll(),this.$nextTick(this.syncHeaderViewportWidth),document.addEventListener("mousemove",this.onGlobalMouseMove),document.addEventListener("mouseup",this.onGlobalMouseUp),document.addEventListener("keydown",this.onGlobalKeyDown),document.addEventListener("mousedown",this._onDocMouseDownForDropdown,!0),window.addEventListener("resize",this.syncHeaderViewportWidth),window.addEventListener("scroll",this._onWindowScrollForDropdown,!0)},updated(){if(!this.colDrag.active||!this.$el)return;const e=this._dragOffsets;e&&Object.keys(e).length&&this.$el.querySelectorAll("[data-fi]").forEach(n=>{if(n.style.transform)return;const t=parseInt(n.dataset.fi),o=this.leafCols[t],i=o&&e[o.key]||0;i&&(n.style.transform=`translateX(${i}px)`)})},beforeDestroy(){document.removeEventListener("mousemove",this.onGlobalMouseMove),document.removeEventListener("mouseup",this.onGlobalMouseUp),document.removeEventListener("keydown",this.onGlobalKeyDown),document.removeEventListener("mousedown",this._onDocMouseDownForDropdown,!0),window.removeEventListener("resize",this.syncHeaderViewportWidth),window.removeEventListener("scroll",this._onWindowScrollForDropdown,!0)},methods:{updateVirtualScroll(){const e=this.hasFooter?this._footerRowH:0,n=this.height-this._headerRowH*this.headerDepth-e,t=function(e,n,t,o,i=5){if(0===t)return{startIndex:0,endIndex:-1,offsetTop:0,totalHeight:0};const l=o[t],r=e+n;let s=0,a=t-1;for(;s<a;){const n=s+a>>1;o[n+1]<=e?s=n+1:a=n}let c=s,d=c;for(;d<t-1&&o[d+1]<r;)d++;return c=Math.max(0,c-i),d=Math.min(t-1,d+i),{startIndex:c,endIndex:d,offsetTop:o[c],totalHeight:l}}(this.scrollTop,Math.max(n,100),this.totalRows,this.cumulativeHeights,8);this.virtualStartIndex=t.startIndex,this.virtualEndIndex=t.endIndex,this.virtualOffsetTop=t.offsetTop,this.totalVirtualHeight=t.totalHeight},onBodyScroll(e){const n=e.target;this.$refs.scrollColHeader&&(this.$refs.scrollColHeader.scrollLeft=n.scrollLeft),this.$refs.scrollFooter&&(this.$refs.scrollFooter.scrollLeft=n.scrollLeft),this.$refs.scrollRowHeaders&&(this.$refs.scrollRowHeaders.scrollTop=n.scrollTop),this.selectDropdown&&this.closeSelectDropdown(),this._scrollRAF||(this._scrollRAF=requestAnimationFrame(()=>{this._scrollRAF=null;const e=this.$refs.scrollBody;e&&(this.scrollTop=e.scrollTop,this.scrollLeft=e.scrollLeft,this.updateVirtualScroll())}))},onScroll(e){},syncHeaderViewportWidth(){const e=this.$refs.scrollBody;e&&this.headerViewportWidth!==e.clientWidth&&(this.headerViewportWidth=e.clientWidth)},isRowHidden(e){return this.hiddenRowSet.has(e)},isColHidden(e){return this.effectiveHiddenColSet.has(e)},getColW(e){return void 0!==this.colWidths[e]?this.colWidths[e]:this.leafCols[e]&&this.leafCols[e].width||100},getRowH(e){return this.isRowHidden(e)?0:this.rowHeights[e]||this._rowH},getColLeft(e){let n=0;for(let t=0;t<e&&t<this.leafCols.length;t++)this.isColHidden(t)||(n+=this.getColW(t));return n},getFrozenWidth(){return this.hasPinnedLeft?this.pinnedLeftWidth:0},isColumnPinnedLeft(e){return this.pinnedLeftSet.has(e)},isColumnPinnedRight(e){return this.pinnedRightSet.has(e)},isColumnScrollable(e){return!this.isColumnPinnedLeft(e)&&!this.isColumnPinnedRight(e)},getZoneColLeft(e,n){let t=0;if("left"===n)for(const n of this.pinnedLeftCols){if(n._flatIndex===e)break;this.isColHidden(n._flatIndex)||(t+=this.getColW(n._flatIndex))}else if("right"===n)for(const n of this.pinnedRightCols){if(n._flatIndex===e)break;this.isColHidden(n._flatIndex)||(t+=this.getColW(n._flatIndex))}else for(let n=0;n<this.leafCols.length;n++){const o=this.leafCols[n];if(o._flatIndex===e)break;!this.isColHidden(o._flatIndex)&&this.isColumnScrollable(o._flatIndex)&&(t+=this.getColW(o._flatIndex))}return t},isCellInZone(e,n,t){if(e.isGroup){const n=e._firstLeafFlatIndex,o=n+e.colspan-1;for(let e=n;e<=o;e++){if(this.isColHidden(e))continue;if((this.isColumnPinnedLeft(e)?"left":this.isColumnPinnedRight(e)?"right":"scroll")===t)return!0}return!1}const o=e.column._flatIndex;if(this.isColHidden(o))return!1;return(this.isColumnPinnedLeft(o)?"left":this.isColumnPinnedRight(o)?"right":"scroll")===t},getHeaderCellStyleForZone(e,n,t){let o=e._firstLeafFlatIndex;if(e.isGroup){const n=o+e.colspan-1;for(let e=o;e<=n;e++){if(this.isColHidden(e))continue;if((this.isColumnPinnedLeft(e)?"left":this.isColumnPinnedRight(e)?"right":"scroll")===t){o=e;break}}}const i=this.getZoneColLeft(o,t);let l=0;if(e.isGroup){const n=e._firstLeafFlatIndex,o=n+e.colspan-1;for(let e=n;e<=o;e++){if(this.isColHidden(e))continue;(this.isColumnPinnedLeft(e)?"left":this.isColumnPinnedRight(e)?"right":"scroll")===t&&(l+=this.getColW(e))}}else l=this.getColW(e.column._flatIndex);return{top:this._headerRowH*n+"px",left:i+"px",width:l+"px",height:this._headerRowH*e.rowspan+"px"}},getRangeWidth(e,n){let t=0;for(let o=e;o<=n&&o<this.leafCols.length;o++)this.isColHidden(o)||(t+=this.getColW(o));return t},getRangeHeight(e,n){let t=0;for(let o=e;o<=n&&o<this.totalRows;o++)this.isRowHidden(o)||(t+=this.getRowH(o));return t},getCellValue(e,n){const t=this.leafCols[n];if(!t)return"";const o=this._dataRaw[e];if(!o)return"";const i=o[t.key];return void 0!==i?i:""},isEditing(e,n){return this.editingCell&&this.editingCell.row===e&&this.editingCell.col===n},isMergedAway(e,n){const t=b(e,n,this.internalMerges);if(!t)return!1;const o=i(t);return!(o.startRow===e&&o.startCol===n)},getMergeSpan(e,n){const t=b(e,n,this.internalMerges);if(!t)return{rowspan:1,colspan:1};const o=i(t);return{rowspan:o.endRow-o.startRow+1,colspan:o.endCol-o.startCol+1}},isSelected(e,n){return t=e,o=n,this.selectionRanges.some(e=>l(t,o,e));var t,o},isActiveCell(e,n){return this.activeCell.row===e&&this.activeCell.col===n},isCopyHighlighted(e,n){return!(!this.clipboardRange||"copy"!==this.clipboardMode)&&l(e,n,this.clipboardRange)},getRowStyle(e){const n=this.getRowH(e),t=n;if(this._rowStyleCache[t])return this._rowStyleCache[t];const o={height:n+"px",minHeight:n+"px"};return this._rowStyleCache[t]=o,o},getRowHeaderStyle(e){const n=this.getRowH(e),t=n;if(this._rowHeaderStyleCache[t])return this._rowHeaderStyleCache[t];const o={height:n+"px"};return this._rowHeaderStyleCache[t]=o,o},getCellStyle(e,n){const t=b(e,n,this.internalMerges),o=t?i(t):null;let l=this.getColW(n),r=this.getRowH(e);o&&o.startRow===e&&o.startCol===n&&(l=this.getRangeWidth(o.startCol,o.endCol),r=this.getRangeHeight(o.startRow,o.endRow));const s=this.isColumnPinnedLeft(n)?"left":this.isColumnPinnedRight(n)?"right":"scroll",a=this.getZoneColLeft(n,s),c=l+"_"+r+"_"+a;if(this._cellStyleCache[c])return this._cellStyleCache[c];const d={position:"absolute",left:a+"px",top:"0px",width:l+"px",minWidth:l+"px",height:r+"px"};return this._cellStyleCache[c]=d,d},getCellClasses(e,n){const t=this.leafCols[n];return{"eg-cell-active":this.isActiveCell(e,n),"eg-cell-selected":this.isSelected(e,n)&&!this.isActiveCell(e,n),"eg-cell-fill-preview":this.isInFillPreview(e,n),"eg-cell-copy":this.isCopyHighlighted(e,n),"eg-cell-merged-hidden":this.isMergedAway(e,n),"eg-cell-select":!(!t||!this.isSelectLikeCol(t)),"eg-cell-checkbox":!(!t||"checkbox"!==t.type),"eg-cell-readonly":!this.isCellEditable(e,n),"eg-cell-invalid":!(!this.invalidCell||this.invalidCell.row!==e||this.invalidCell.col!==n),"eg-cell--has-suffix":!(!t||!this.hasSuffixSlot(t)),"eg-cell--drag-source":this.colDrag.active&&n>=this.colDrag.sourceFirstLeaf&&n<this.colDrag.sourceFirstLeaf+this.colDrag.sourceLeafCount}},isInFillPreview(e,n){if(!this.fillDrag.active||!this.fillDrag.sourceRange)return!1;const t=this.fillDrag.sourceRange,o=this.fillDrag.currentRow,i=this.fillDrag.currentCol;return o>t.endRow?e>t.endRow&&e<=o&&n>=t.startCol&&n<=t.endCol:i>t.endCol&&(n>t.endCol&&n<=i&&e>=t.startRow&&e<=t.endRow)},getHeaderCellStyle(e,n,t){const o=t?"left":"scroll";let i=e._firstLeafFlatIndex;if(e.isGroup){const n=i+e.colspan-1;for(let e=i;e<=n;e++)if(!this.isColHidden(e)&&(t?this.isColumnPinnedLeft(e):this.isColumnScrollable(e))){i=e;break}}const l=this.getZoneColLeft(i,o);let r=0;if(e.isGroup){const n=e._firstLeafFlatIndex,o=n+e.colspan-1;for(let e=n;e<=o;e++){if(this.isColHidden(e))continue;(t?this.isColumnPinnedLeft(e):this.isColumnScrollable(e))&&(r+=this.getColW(e))}}else r=this.getColW(e.column._flatIndex);return{top:this._headerRowH*n+"px",left:l+"px",width:r+"px",height:this._headerRowH*e.rowspan+"px"}},getHeaderDragTransform(e){if(!this.colDrag.active)return null;let n;if(e.isGroup){const t=e._firstLeafFlatIndex,o=t+e.colspan-1;for(let e=t;e<=o;e++)if(!this.isColHidden(e)&&this.leafCols[e]){n=this.leafCols[e].key;break}}else n=e.column.key;if(!n)return null;const t=this._dragOffsets[n];return t?{transform:`translateX(${t}px)`}:null},getCellDragTransform(e){if(!this.colDrag.active)return null;const n=this.leafCols[e];if(!n)return null;const t=this._dragOffsets[n.key];return t?{transform:`translateX(${t}px)`}:null},computeColumnTotals(){const e={},n=this._dataRaw||[];this.leafCols.forEach(t=>{if(!t.showTotal)return;let o=0,i=!1;for(let e=0;e<n.length;e++){const l=n[e],r=l?l[t.key]:void 0;"number"==typeof r&&isFinite(r)&&(o+=r,i=!0)}e[t._flatIndex]=i?Math.round(1e6*o)/1e6:null}),this.columnTotals=e},getColumnTotalDisplay(e){const n=this.leafCols[e];if(!n||!n.showTotal)return"";const t=this.columnTotals[e];return null==t?"-":t},getFooterCellStyle(e){const n=this.isColumnPinnedLeft(e)?"left":this.isColumnPinnedRight(e)?"right":"scroll",t=this.getZoneColLeft(e,n),o=this.getColW(e);return{position:"absolute",left:t+"px",top:"0px",width:o+"px",minWidth:o+"px",height:this._footerRowH+"px"}},isCellVisible(e,n,t){if(e.isGroup){const n=e._firstLeafFlatIndex,o=n+e.colspan-1;for(let e=n;e<=o;e++){if(this.isColHidden(e))continue;if(t?this.isColumnPinnedLeft(e):this.isColumnScrollable(e))return!0}return!1}const o=e.column._flatIndex;return!this.isColHidden(o)&&(t?this.isColumnPinnedLeft(o):this.isColumnScrollable(o))},getRowGroupBtnStyle(e){return{position:"absolute",top:u(e.startIndex,this._rowH,this.rowHeights)-this.scrollTop+"px",left:"2px",width:"16px",height:"16px",lineHeight:"16px",textAlign:"center",fontSize:"10px",cursor:"pointer",background:"var(--eg-color-accent-soft)",border:"1px solid var(--eg-color-group-border)",borderRadius:"2px",zIndex:5}},getColGroupBtnStyle(e){return{position:"absolute",left:this.getColLeft(e.startIndex)-this.scrollLeft+"px",top:"2px",width:"16px",height:"16px",lineHeight:"16px",textAlign:"center",fontSize:"10px",cursor:"pointer",background:"var(--eg-color-accent-soft)",border:"1px solid var(--eg-color-group-border)",borderRadius:"2px"}},selectCell(e,n,t=!1){e<0||e>=this.totalRows||n<0||n>=this.leafCols.length||(this.activeCell={row:e,col:n},t?this.selectionRanges.push(r(e,n)):this.selectionRanges=[r(e,n)],this.emitSelectionChange())},selectRange(e,n,t,o,i=!0){const l={startRow:e,startCol:n,endRow:t,endCol:o};i?this.selectionRanges=[l]:this.selectionRanges.push(l),this.emitSelectionChange()},selectRow(e){this.activeCell={row:e,col:0},this.selectionRanges=[{startRow:e,endRow:e,startCol:0,endCol:this.leafCols.length-1}],this.emitSelectionChange()},selectColumn(e){this.activeCell={row:0,col:e},this.selectionRanges=[{startRow:0,endRow:this.totalRows-1,startCol:e,endCol:e}],this.emitSelectionChange()},selectAll(){this.activeCell={row:0,col:0},this.selectionRanges=[{startRow:0,endRow:this.totalRows-1,startCol:0,endCol:this.leafCols.length-1}],this.emitSelectionChange()},emitSelectionChange(){this.$emit("selection-change",{activeCell:{...this.activeCell},ranges:this.selectionRanges.map(e=>i(e))})},onCellMouseDown(e,n,t){if(this.invalidCell=null,this.editingCell){const e=this.leafCols[this.editingCell.col];e&&this._hasCustomEdit(e)?this.cancelEdit():this.commitEdit()}if(this.hideContextMenu(),this.$refs.wrapper&&this.$refs.wrapper.focus(),e.ctrlKey||e.metaKey)this.selectDropdown&&this.closeSelectDropdown(),this.activeCell={row:n,col:t},this.mouseDownRange={startRow:n,startCol:t,endRow:n,endCol:t},this.selectionRanges.push(this.mouseDownRange),this.isCtrlDrag=!0;else if(e.shiftKey&&this.selectionRanges.length>0)this.selectDropdown&&this.closeSelectDropdown(),this.selectionRanges=[(o=this.activeCell,i={row:n,col:t},{startRow:o.row,startCol:o.col,endRow:i.row,endCol:i.col})];else{const o=this.activeCell.row===n&&this.activeCell.col===t;this.activeCell={row:n,col:t},this.mouseDownRange={startRow:n,startCol:t,endRow:n,endCol:t},this.selectionRanges=[this.mouseDownRange],this.isCtrlDrag=!1;const i=this.leafCols[t];if(o&&i&&this.isSelectLikeCol(i)&&!this._hasCustomEdit(i)&&this.isCellEditable(n,t))return this.openSelectDropdown(n,t,e),e.preventDefault(),this.isMouseDown=!0,void this.emitSelectionChange();this.selectDropdown&&this.closeSelectDropdown()}var o,i;this.isMouseDown=!0,this.emitSelectionChange(),e.preventDefault()},onCellMouseOver(e,n,t){if(this.isMouseDown&&!this.fillDrag.active)return this.dragMove.active?(this.dragMove.targetRow=n,void(this.dragMove.targetCol=t)):void(this.mouseDownRange&&(this.mouseDownRange.endRow=n,this.mouseDownRange.endCol=t,this.emitSelectionChange()))},onCellMouseUp(){this.isMouseDown=!1},onCellDblClick(e,n){const t=this.leafCols[n];this.isCellEditable(e,n)&&(t&&this.isSelectLikeCol(t)&&!this._hasCustomEdit(t)?this.openSelectDropdownForActive():t&&"checkbox"===t.type||this.startEditing(e,n,null,!0))},onRowHeaderMouseDown(e,n){const t=this.leafCols.length-1,o={startRow:n,endRow:n,startCol:0,endCol:t};if(e.ctrlKey||e.metaKey)if(e.shiftKey&&this.selectionRanges.length>0){const e=Math.min(this.activeCell.row,n),o=Math.max(this.activeCell.row,n);this.selectionRanges=[...this.selectionRanges,{startRow:e,endRow:o,startCol:0,endCol:t}]}else{const e=this.selectionRanges.findIndex(e=>e.startRow===n&&e.endRow===n&&0===e.startCol&&e.endCol===t);if(e>=0){const n=this.selectionRanges.filter((n,t)=>t!==e);this.selectionRanges=n.length?n:[o]}else this.activeCell={row:n,col:0},this.selectionRanges=[...this.selectionRanges,o]}else if(e.shiftKey&&this.selectionRanges.length>0){const e=Math.min(this.activeCell.row,n),o=Math.max(this.activeCell.row,n);this.selectionRanges=[{startRow:e,endRow:o,startCol:0,endCol:t}]}else this.activeCell={row:n,col:0},this.selectionRanges=[o];this.mouseDownRange=this.selectionRanges[this.selectionRanges.length-1],this.isMouseDown=!0,this.emitSelectionChange(),e.preventDefault()},onColHeaderMouseDown(e,n){if(!this.columnDraggable||e.shiftKey||e.ctrlKey||e.metaKey||(this.colDrag.pending=!0,this.colDrag.active=!1,this.colDrag.sourceFirstLeaf=n._firstLeafFlatIndex,this.colDrag.sourceLeafCount=n.isGroup?n.colspan:1,this.colDrag.startX=e.clientX,this.colDrag.startY=e.clientY,this.colDrag.ghostLabel=n.column.title||""),n.isGroup){const t=n._firstLeafFlatIndex,o=t+n.colspan-1;return this.activeCell={row:0,col:t},this.selectionRanges=[{startRow:0,endRow:this.totalRows-1,startCol:t,endCol:o}],this.isMouseDown=!0,this.mouseDownRange=this.selectionRanges[0],this.emitSelectionChange(),void e.preventDefault()}const t=n.column._flatIndex;if(e.shiftKey&&this.selectionRanges.length>0){const e=Math.min(this.activeCell.col,t),n=Math.max(this.activeCell.col,t);this.selectionRanges=[{startRow:0,endRow:this.totalRows-1,startCol:e,endCol:n}]}else this.activeCell={row:0,col:t},this.selectionRanges=[{startRow:0,endRow:this.totalRows-1,startCol:t,endCol:t}];this.isMouseDown=!0,this.mouseDownRange=this.selectionRanges[0],this.emitSelectionChange(),e.preventDefault()},onColHeaderDblClick(e,n){n.isGroup||this.autoFitColumn(n.column._flatIndex)},onColHeaderContextMenu(e,n){n.isGroup||(this.contextMenu={visible:!0,x:e.clientX,y:e.clientY,row:-1,col:n.column._flatIndex})},onRowContextMenu(e,n){this.contextMenu={visible:!0,x:e.clientX,y:e.clientY,row:n,col:-1}},onCellContextMenu(e,n,t){this.isSelected(n,t)||this.selectCell(n,t),this.contextMenu={visible:!0,x:e.clientX,y:e.clientY,row:n,col:t}},hideContextMenu(){this.contextMenu.visible=!1},onKeyDown(e){if(this.selectDropdown){const n=this.$refs.selectDropdownComp;return void(n&&n.handleKey&&n.handleKey(e))}if(this.editingCell)return;const n=e.key;if((e.ctrlKey||e.metaKey)&&"z"===n&&!e.shiftKey)return e.preventDefault(),void this.undo();if((e.ctrlKey||e.metaKey)&&("y"===n||"z"===n&&e.shiftKey))return e.preventDefault(),void this.redo();if("a"===n&&(e.ctrlKey||e.metaKey))return e.preventDefault(),void this.selectAll();if("c"===n&&(e.ctrlKey||e.metaKey))return e.preventDefault(),void this.copySelection();if("x"===n&&(e.ctrlKey||e.metaKey))return e.preventDefault(),void this.cutSelection();if("v"===n&&(e.ctrlKey||e.metaKey))return e.preventDefault(),void this.pasteAt(this.activeCell.row,this.activeCell.col);if("Delete"===n||"Backspace"===n)return e.preventDefault(),void this.clearSelection();if("F2"===n){e.preventDefault();const n=this.leafCols[this.activeCell.col];return void(n&&this.isSelectLikeCol(n)&&!this._hasCustomEdit(n)?this.openSelectDropdownForActive():n&&"checkbox"===n.type?this.toggleCheckbox(this.activeCell.row,this.activeCell.col):this.startEditing(this.activeCell.row,this.activeCell.col,null,!0))}if(" "===n){const n=this.leafCols[this.activeCell.col];if(n&&"checkbox"===n.type)return e.preventDefault(),void this.toggleCheckbox(this.activeCell.row,this.activeCell.col)}if("Escape"===n)return this.clipboardRange=null,this.clipboardMatrix=null,void(this.clipboardMode=null);if("Tab"===n)return e.preventDefault(),void this.moveActive(0,e.shiftKey?-1:1,e);if("Enter"===n)return e.preventDefault(),void this.moveActive(e.shiftKey?-1:1,0,e);const t={ArrowUp:[-1,0],ArrowDown:[1,0],ArrowLeft:[0,-1],ArrowRight:[0,1]};if(t[n]){e.preventDefault();const[o,l]=t[n];if(e.shiftKey){const e=this.primaryRange||r(this.activeCell.row,this.activeCell.col),n=i(e);-1===o&&(e.startRow=Math.max(0,n.startRow-1)),1===o&&(e.endRow=Math.min(this.totalRows-1,n.endRow+1)),-1===l&&(e.startCol=Math.max(0,n.startCol-1)),1===l&&(e.endCol=Math.min(this.leafCols.length-1,n.endCol+1)),this.selectionRanges=[e],this.emitSelectionChange()}else this.moveActive(o,l,e);return}if("Home"===n)return e.preventDefault(),void(e.ctrlKey?this.selectCell(0,0):this.selectCell(this.activeCell.row,0));if("End"===n)return e.preventDefault(),void(e.ctrlKey?this.selectCell(this.totalRows-1,this.leafCols.length-1):this.selectCell(this.activeCell.row,this.leafCols.length-1));if("PageUp"===n){e.preventDefault();const n=Math.floor((this.height-this._headerRowH*this.headerDepth)/this._rowH);return void this.moveActive(-n,0,e)}if("PageDown"===n){e.preventDefault();const n=Math.floor((this.height-this._headerRowH*this.headerDepth)/this._rowH);return void this.moveActive(n,0,e)}},onKeyPress(e){if(!this.editingCell&&!this.selectDropdown&&!(e.ctrlKey||e.metaKey||e.altKey)&&e.key&&1===e.key.length){const n=this.leafCols[this.activeCell.col];if(n&&this.isSelectLikeCol(n)&&!this._hasCustomEdit(n))return e.preventDefault(),void this.openSelectDropdownForActive();if(n&&"checkbox"===n.type)return void e.preventDefault();this.startEditing(this.activeCell.row,this.activeCell.col,e.key,!1)}},onGlobalKeyDown(e){"Escape"===e.key&&(this.colDrag.active||this.colDrag.pending)&&(this._resetColDrag(),e.preventDefault())},moveActive(e,n,t){let o=this.activeCell.row+e,l=this.activeCell.col+n;for(t&&"Tab"===t.key&&(l>=this.leafCols.length&&(l=0,o++),l<0&&(l=this.leafCols.length-1,o--)),o=Math.max(0,Math.min(this.totalRows-1,o)),l=Math.max(0,Math.min(this.leafCols.length-1,l));this.isColHidden(l)&&l>0&&l<this.leafCols.length-1;)l+=n>=0?1:-1;for(;this.isRowHidden(o)&&o>0&&o<this.totalRows-1;)o+=e>=0?1:-1;const s=function(e,n,t){const o=b(e,n,t);if(!o)return{row:e,col:n};const l=i(o);return{row:l.startRow,col:l.startCol}}(o,l,this.internalMerges);o=s.row,l=s.col,this.activeCell={row:o,col:l},this.selectionRanges=[r(o,l)],this.emitSelectionChange(),this.scrollToCell(o,l)},scrollToCell(e,n){const t=this.$refs.scrollBody;if(!t)return;const o=u(e,this._rowH,this.rowHeights),i=o+this.getRowH(e),l=this.getColLeft(n)-this.getFrozenWidth(),r=l+this.getColW(n);o<t.scrollTop&&(t.scrollTop=o),i>t.scrollTop+t.clientHeight&&(t.scrollTop=i-t.clientHeight),l<t.scrollLeft&&(t.scrollLeft=l),r>t.scrollLeft+t.clientWidth&&(t.scrollLeft=r-t.clientWidth)},startEditing(e,n,t=null,o=!1){const i=this.leafCols[n];if(i&&this.isCellEditable(e,n)&&!(e<0||e>=this.totalRows)){if(!this._hasCustomEdit(i)){if(this.isSelectLikeCol(i))return void this.openSelectDropdownForActive();if("checkbox"===i.type)return}this.invalidCell=null,this.editingCell={row:e,col:n},this.editValue=null!==t?t:o?String(this.getCellValue(e,n)||""):"",this.editOriginalValue=String(this.getCellValue(e,n)||""),this.$nextTick(()=>{const e=this.$refs.editInput;if(e){const n=Array.isArray(e)?e[0]:e;n&&(n.focus(),o&&n.setSelectionRange(n.value.length,n.value.length))}})}},commitEdit(){if(!this.editingCell)return;const{row:e,col:n}=this.editingCell,t=this.leafCols[n];if(!t)return void(this.editingCell=null);if(!this.isCellValueValid(e,n,this.editValue))return this._showInvalidCell(e,n,this.editValue),this.editingCell=null,void(this.$refs.wrapper&&this.$refs.wrapper.focus());this.invalidCell=null;const o=this.data,i=o.slice();i[e]={...o[e],[t.key]:this.editValue},this._emitDataChange(o,i),this.editingCell=null,this.$refs.wrapper&&this.$refs.wrapper.focus()},cancelEdit(){this.editingCell=null,this.$refs.wrapper&&this.$refs.wrapper.focus()},hasCellSlot(e){return!!(e&&e.key&&this.$scopedSlots&&this.$scopedSlots["cell-"+e.key])},hasLegacyEditSlot(e){return!!(e&&e.key&&this.$scopedSlots&&this.$scopedSlots["edit-"+e.key])},hasPrefixSlot(e){return!!(e&&e.key&&this.$scopedSlots&&this.$scopedSlots["prefix-"+e.key])},hasSuffixSlot(e){return!!(e&&e.key&&this.$scopedSlots&&this.$scopedSlots["suffix-"+e.key])},_hasCustomEdit(e){return"select"===e.type||"treeSelect"===e.type?this.hasLegacyEditSlot(e):this.hasCellSlot(e)||this.hasLegacyEditSlot(e)},commitEditSlot(e){if(!this.editingCell)return;const{row:n,col:t}=this.editingCell,o=this.leafCols[t];if(!o)return void(this.editingCell=null);if(!this.isCellValueValid(n,t,e))return this._showInvalidCell(n,t,e),this.editingCell=null,void(this.$refs.wrapper&&this.$refs.wrapper.focus());this.invalidCell=null;const i=this.data,l=i.slice();l[n]={...i[n],[o.key]:e},this._emitDataChange(i,l),this.editingCell=null,this.$refs.wrapper&&this.$refs.wrapper.focus()},isCheckboxChecked(e,n){const t=this.getCellValue(e,n);return!0===t||1===t||"string"==typeof t&&["true","1"].includes(t.trim().toLowerCase())},setCheckboxValue(e,n,t){const o=this.leafCols[n];if(!o||!this.isCellEditable(e,n))return;if(!this.isCellValueValid(e,n,t))return void this._showInvalidCell(e,n,t);this.invalidCell=null;const i=this.data,l=i.slice();l[e]={...i[e],[o.key]:t},this._emitDataChange(i,l)},toggleCheckbox(e,n){this.setCheckboxValue(e,n,!this.isCheckboxChecked(e,n))},isCellEditable(e,n){const t=this.leafCols[n];if(!t)return!1;const o=this._dataRaw[e]||{};return"function"==typeof this.cellEditable?!!this.cellEditable(o,e,t,n):"function"==typeof t.editable?!!t.editable(o,e):!1!==t.editable},isCellValueValid(e,n,t){if("function"!=typeof this.cellValidator)return!0;const o=this.leafCols[n];if(!o)return!0;const i=this._dataRaw[e]||{};return!!this.cellValidator(t,i,e,o,n)},_resolveValidationMessage(e,n,t){const o=this.leafCols[n],i=this._dataRaw[e]||{};return"function"==typeof this.cellValidationMessage?this.cellValidationMessage(t,i,e,o,n):"string"==typeof this.cellValidationMessage&&this.cellValidationMessage?this.cellValidationMessage:this.t.invalidValue},_invalidCellRect(){const e=this.$refs.editInput,n=Array.isArray(e)?e[0]:e;if(n)return n.getBoundingClientRect();const t=this.$el?this.$el.querySelector(".eg-cell-active"):null;return t?t.getBoundingClientRect():null},_showInvalidCell(e,n,t){const o=this._resolveValidationMessage(e,n,t);this.invalidCell={row:e,col:n,message:o,rect:this._invalidCellRect()},this.$emit("cell-validation-error",{row:e,col:n,value:t,message:o})},_emitBulkValidationError(e,n){const t=e.map(e=>({row:e.row,col:e.col,value:e.value,message:this._resolveValidationMessage(e.row,e.col,e.value)}));this.$emit("bulk-validation-error",{blocked:n,cells:t})},isSelectLikeCol:e=>!(!e||"select"!==e.type&&"treeSelect"!==e.type),treeOptionKeys:e=>({valueKey:e.optionValueKey||"value",labelKey:e.optionLabelKey||"label",childrenKey:e.optionChildrenKey||"children"}),_treeFindLabel(e,n,t){for(const o of e||[]){if(String(o[n.valueKey])===t)return null!=o[n.labelKey]?o[n.labelKey]:String(o[n.valueKey]);const e=this._treeFindLabel(o[n.childrenKey],n,t);if(null!=e)return e}return null},colOptions(e){const n=this.leafCols[e];return n&&Array.isArray(n.options)?n.options.map(e=>"string"==typeof e?{value:e,label:e}:{value:e.value,label:null!=e.label?e.label:String(e.value),color:e.color}):[]},getSelectLabel(e,n){const t=this.leafCols[e],o=null==n?"":String(n);if(t&&"treeSelect"===t.type){if(!Array.isArray(t.options))return o;const e=this._treeFindLabel(t.options,this.treeOptionKeys(t),o);return null!=e?e:o}const i=this.colOptions(e);if(!i.length)return o;const l=i.find(e=>String(e.value)===o);return l?l.label:o},_buildSelectDropdownState(e,n,t,o,i){const l={top:i.top,bottom:i.bottom,left:i.left,width:i.width};return{row:e,col:n,tree:"treeSelect"===t.type,keys:"treeSelect"===t.type?this.treeOptionKeys(t):null,rawOptions:t.options||[],currentValue:o,rect:l,enableSearch:!!t.enableSearch}},openSelectDropdown(e,n,t){const o=this.leafCols[n];if(!o||!Array.isArray(o.options))return;const i=t.currentTarget.getBoundingClientRect(),l=String(null!=this.getCellValue(e,n)?this.getCellValue(e,n):"");this.selectDropdown=this._buildSelectDropdownState(e,n,o,l,i)},openSelectDropdownForActive(){const{row:e,col:n}=this.activeCell,t=this.leafCols[n];t&&Array.isArray(t.options)&&this.$nextTick(()=>{const o=this.$el?this.$el.querySelector(".eg-cell-active"):null;if(!o)return;const i=o.getBoundingClientRect(),l=String(null!=this.getCellValue(e,n)?this.getCellValue(e,n):"");this.selectDropdown=this._buildSelectDropdownState(e,n,t,l,i)})},onComponentSelect({value:e,label:n}){if(!this.selectDropdown)return;const{row:t,col:o}=this.selectDropdown,i=this.leafCols[o];if(i){if(!this.isCellValueValid(t,o,e))return this._showInvalidCell(t,o,e),this.closeSelectDropdown(),void(this.$refs.wrapper&&this.$refs.wrapper.focus());this.invalidCell=null;const l=this.data,r=l.slice();r[t]={...l[t],[i.key]:e},this._emitDataChange(l,r),"function"==typeof i.onSelect&&i.onSelect({value:e,label:n},r[t],t,i)}this.closeSelectDropdown(),this.$refs.wrapper&&this.$refs.wrapper.focus()},closeSelectDropdown(){this.selectDropdown=null},_onWindowScrollForDropdown(e){if(!this.selectDropdown)return;const n=this.$refs.selectDropdownComp,t=n&&n.$el?n.$el:null;t&&t.contains(e.target)||this.closeSelectDropdown()},_onDocMouseDownForDropdown(e){if(!this.selectDropdown)return;const n=this.$refs.selectDropdownComp,t=n&&n.$el?n.$el:null;t&&t.contains(e.target)||this.closeSelectDropdown()},onEditKeyDown(e){"Escape"===e.key?(e.preventDefault(),this.cancelEdit()):"Enter"!==e.key||e.shiftKey?"Tab"===e.key&&(e.preventDefault(),this.commitEdit(),this.moveActive(0,e.shiftKey?-1:1,e)):(e.preventDefault(),this.commitEdit(),this.moveActive(1,0,e))},clearSelection(){if(!this.selectionRanges.length)return;const e=this.data,n=e.slice();let t=!1;const o=[];for(const e of this.selectionRanges){const i={startRow:Math.min(e.startRow,e.endRow),endRow:Math.max(e.startRow,e.endRow),startCol:Math.min(e.startCol,e.endCol),endCol:Math.max(e.startCol,e.endCol)};for(let e=i.startRow;e<=i.endRow&&e<n.length;e++){let l=null;for(let r=i.startCol;r<=i.endCol;r++){const i=this.leafCols[r];if(i&&this.isCellEditable(e,r)){if(!this.isCellValueValid(e,r,"")){o.push({row:e,col:r,value:""});continue}l||(l={...n[e]}),l[i.key]="",t=!0}}l&&(n[e]=l)}}this.strictBulkValidation&&o.length>0?this._emitBulkValidationError(o,!0):(t&&this._emitDataChange(e,n),o.length>0&&this._emitBulkValidationError(o,!1))},startFillDrag(e){const n=this.primaryRange;n&&(this.fillDrag.active=!0,this.fillDrag.sourceRange=i(n),this.fillDrag.currentRow=n.endRow,this.fillDrag.currentCol=n.endCol,e.preventDefault())},onGlobalMouseMove(e){this.colDrag.pending&&Math.abs(e.clientX-this.colDrag.startX)>5&&(this.colDrag.pending=!1,this.colDrag.active=!0,this.colDrag.dropIndex=this.colDrag.sourceFirstLeaf,this.isMouseDown=!1),this.colDrag.active?this.handleColDragMove(e):this.resizing.active?this.handleResizeMove(e):this.fillDrag.active?this.handleFillDragMove(e):this.dragMove.active&&this.handleDragMoveMove(e)},onGlobalMouseUp(e){this.colDrag.active?this.commitColDrag():(this.colDrag.pending&&this._resetColDrag(),this.resizing.active?this.commitResize():this.fillDrag.active?this.commitFillDrag():this.dragMove.active?this.commitDragMove(e):this.isMouseDown=!1)},handleFillDragMove(e){const n=this.$refs.scrollBody;if(!n)return;const t=n.getBoundingClientRect(),o=e.clientY-t.top+n.scrollTop,i=e.clientX-t.left+n.scrollLeft,l=this.cumulativeHeights,r=this.totalRows;let s=0,a=r-1;for(;s<a;){const e=s+a>>1;l[e+1]<=o?s=e+1:a=e}const c=Math.min(s,r-1);let d=this.getFrozenWidth(),h=0;for(let e=0;e<this.leafCols.length;e++)if(this.isColumnScrollable(e)){if(d+=this.getColW(e),i<d){h=e;break}h=e}this.fillDrag.currentRow=c,this.fillDrag.currentCol=h},commitFillDrag(){const e=this.fillDrag.sourceRange;if(!e)return void(this.fillDrag.active=!1);const n=this.fillDrag.currentRow,t=this.fillDrag.currentCol,o=this.data,i=o.slice();let l;const r=[];if(n>e.endRow){const t=n-e.endRow;for(let n=e.startCol;n<=e.endCol;n++){const l=this.leafCols[n];if(!l)continue;const s=[];for(let n=e.startRow;n<=e.endRow;n++)s.push(o[n]?o[n][l.key]:"");const a=m(s,t);for(let s=0;s<t;s++){const t=e.endRow+1+s;if(t<this.totalRows&&this.isCellEditable(t,n)){if(!this.isCellValueValid(t,n,a[s])){r.push({row:t,col:n,value:a[s]});continue}i[t]===o[t]&&(i[t]={...o[t]}),i[t][l.key]=a[s]}}}l={startRow:e.endRow+1,endRow:n,startCol:e.startCol,endCol:e.endCol}}else if(t>e.endCol){const n=t-e.endCol;for(let t=e.startRow;t<=e.endRow;t++){const l=[];for(let n=e.startCol;n<=e.endCol;n++){const e=this.leafCols[n];l.push(e&&o[t]?o[t][e.key]:"")}const s=m(l,n);for(let l=0;l<n;l++){const n=e.endCol+1+l;if(n<this.leafCols.length){const e=this.leafCols[n];if(e&&this.isCellEditable(t,n)){if(!this.isCellValueValid(t,n,s[l])){r.push({row:t,col:n,value:s[l]});continue}i[t]===o[t]&&(i[t]={...o[t]}),i[t][e.key]=s[l]}}}}l={startRow:e.startRow,endRow:e.endRow,startCol:e.endCol+1,endCol:t}}l&&(this.strictBulkValidation&&r.length>0?this._emitBulkValidationError(r,!0):(this._emitDataChange(o,i),this.$emit("fill",{sourceRange:e,targetRange:l,values:i}),r.length>0&&this._emitBulkValidationError(r,!1))),this.fillDrag.active=!1,this.fillDrag.sourceRange=null},doubleFillDown(){const e=this.primaryRange;if(!e)return;const n=i(e),t=n.startCol>0?n.startCol-1:n.endCol+1;if(t<0||t>=this.leafCols.length)return;const o=this.leafCols[t];if(!o)return;let l=n.endRow;for(let e=n.endRow+1;e<this.totalRows&&(this.data[e]&&""!==this.data[e][o.key]&&void 0!==this.data[e][o.key]);e++)l=e;if(l<=n.endRow)return;const r=l-n.endRow,s=this.data,a=s.slice(),c=[];for(let e=n.startCol;e<=n.endCol;e++){const t=this.leafCols[e];if(!t)continue;const o=[];for(let e=n.startRow;e<=n.endRow;e++)o.push(s[e]?s[e][t.key]:"");const i=m(o,r);for(let o=0;o<r;o++){const l=n.endRow+1+o;if(l<this.totalRows&&this.isCellEditable(l,e)){if(!this.isCellValueValid(l,e,i[o])){c.push({row:l,col:e,value:i[o]});continue}a[l]===s[l]&&(a[l]={...s[l]}),a[l][t.key]=i[o]}}}this.strictBulkValidation&&c.length>0?this._emitBulkValidationError(c,!0):(this._emitDataChange(s,a),c.length>0&&this._emitBulkValidationError(c,!1))},copySelection(){const e=this.primaryRange;if(!e)return;const n=i(e);this.clipboardMatrix=w(this.data,this.leafCols,n),this.clipboardRange=n,this.clipboardMode="copy";const t=this.clipboardMatrix.map(e=>e.map(e=>(null==e?"":String(e)).replace(/\t/g," ").replace(/\r?\n/g," ")).join("\t")).join("\n");navigator.clipboard&&navigator.clipboard.writeText(t).catch(()=>{})},cutSelection(){this.copySelection(),this.clipboardMode="cut"},async pasteAt(e,n,t={}){const{mode:o="all",transpose:l=!1}=t;let r=null;if(navigator.clipboard)try{const e=await navigator.clipboard.readText();e&&(r=(s=e)?s.split("\n").map(e=>e.split("\t")):[[""]])}catch(e){}var s;if(!r&&this.clipboardMatrix&&(r=this.clipboardMatrix),!r)return;l&&(r=function(e){if(!e||0===e.length)return[];const n=e.length,t=e[0].length;return Array.from({length:t},(t,o)=>Array.from({length:n},(n,t)=>e[t][o]))}(r));if(!this.clipboardMode||"copy"===this.clipboardMode){const t=this.primaryRange;if(t){const o=i(t),l=o.endRow-o.startRow+1,s=o.endCol-o.startCol+1,a=r.length,c=r[0]?r[0].length:0;(l>a||s>c)&&l%a===0&&s%c===0&&(r=function(e,n,t){const o=e.length,i=e[0]?e[0].length:0;if(!o||!i)return e;if(n%o!==0||t%i!==0)return e;const l=[];for(let r=0;r<n;r++){const n=[];for(let l=0;l<t;l++)n.push(e[r%o][l%i]);l.push(n)}return l}(r,l,s),e=o.startRow,n=o.startCol)}}const a=this.data,{newData:c,affectedRange:d,skipped:h}=x(a,this.leafCols,e,n,r,o,(e,n)=>this.isCellEditable(e,n),(e,n,t)=>this.isCellValueValid(e,n,t));if(this.strictBulkValidation&&h.length>0)this._emitBulkValidationError(h,!0);else{if("cut"===this.clipboardMode&&this.clipboardRange){const e=this.clipboardRange;for(let n=e.startRow;n<=e.endRow;n++){c[n]===a[n]&&(c[n]={...a[n]});for(let t=e.startCol;t<=e.endCol;t++){const e=this.leafCols[t];e&&this.isCellEditable(n,t)&&this.isCellValueValid(n,t,"")&&(c[n][e.key]="")}}this.clipboardRange=null,this.clipboardMode=null}this._emitDataChange(a,c),h.length>0&&this._emitBulkValidationError(h,!1)}},ctxCopy(){this.hideContextMenu(),this.copySelection()},ctxCut(){this.hideContextMenu(),this.cutSelection()},ctxPaste(){this.hideContextMenu(),this.pasteAt(this.activeCell.row,this.activeCell.col)},ctxPasteSpecial(e,n=!1){this.hideContextMenu(),this.pasteAt(this.activeCell.row,this.activeCell.col,{mode:e,transpose:n})},_computeDragOffsets(e){const{sourceFirstLeaf:n,sourceLeafCount:t}=this.colDrag;if(e<0||e>=n&&e<=n+t)return{};const o=s(h(this.columns,n,t,e)),i={};this.leafCols.forEach(e=>{i[e.key]=e});const l={};for(const e of["left","scroll","right"]){const n="left"===e?e=>this.isColumnPinnedLeft(e):"right"===e?e=>this.isColumnPinnedRight(e):e=>this.isColumnScrollable(e),t={};let r=0;this.leafCols.forEach(e=>{const o=e._flatIndex;!this.isColHidden(o)&&n(o)&&(t[e.key]=r,r+=this.getColW(o))});const s={};r=0;for(const e of o){const t=i[e.key];if(!t)continue;const o=t._flatIndex;!this.isColHidden(o)&&n(o)&&(s[e.key]=r,r+=this.getColW(o))}for(const e of Object.keys(t))l[e]=(void 0!==s[e]?s[e]:t[e])-t[e]}return l},_applyDragTransforms(e){if(!this.$el)return;const n=[],t=new Map;this.$el.querySelectorAll("[data-fi]").forEach(o=>{const i=parseInt(o.dataset.fi),l=this.leafCols[i],r=l&&e[l.key]||0;n.push(o),t.set(o,r)}),this.$el.querySelectorAll("[data-start]").forEach(o=>{const i=parseInt(o.dataset.start),l=parseInt(o.dataset.end);if(isNaN(i))return;let r=null;for(let e=i;e<=l;e++)if(!this.isColHidden(e)&&this.leafCols[e]){r=this.leafCols[e].key;break}n.push(o),t.set(o,r&&e[r]||0)}),n.length&&(Ge.remove(n),Ge({targets:n,translateX:e=>t.get(e)||0,duration:80,easing:"easeOutQuart"}))},_clearDragTransforms(){if(!this.$el)return;const e=Array.from(this.$el.querySelectorAll("[data-fi], [data-start]"));Ge.remove(e),e.forEach(e=>{e.style.transform="",e.style.transition=""})},handleColDragMove(e){const n=this.$refs.colDragGhost;n&&(n.style.left=e.clientX+16+"px",n.style.top=e.clientY-14+"px");const t=this.colDrag.dropIndex;this._updateColDragDropIndex(e.clientX);const o=this.colDrag.dropIndex;o!==t&&(this._dragOffsets=this._computeDragOffsets(o),this._applyDragTransforms(this._dragOffsets))},_updateColDragDropIndex(e){if(!this.$el)return;const n=this.leafCols.length;if(0===n)return void(this.colDrag.dropIndex=0);const t=Array.from(this.$el.querySelectorAll(".eg-header-cell:not(.eg-header-group)")).map(e=>{const n=parseInt(e.dataset.fi);if(isNaN(n))return null;const t=e.getBoundingClientRect(),o=(e.style.transform||"").match(/translateX\((-?[\d.]+)px\)/),i=o?parseFloat(o[1]):0;return{fi:n,left:t.left-i,right:t.right-i}}).filter(Boolean).sort((e,n)=>e.left-n.left);if(!t.length)return void(this.colDrag.dropIndex=n);let o=n;for(const{fi:n,left:i,right:l}of t)if(e<l){o=e<i+(l-i)/2?n:n+1;break}this.colDrag.dropIndex=o},commitColDrag(){const e=this.colDrag.sourceFirstLeaf,n=this.colDrag.sourceLeafCount,t=this.colDrag.dropIndex;if(e<0||t<0||n<1)return void this._resetColDrag();if(t>=e&&t<=e+n)return void this._resetColDrag();this.$el&&Ge.remove(Array.from(this.$el.querySelectorAll("[data-fi], [data-start]"))),this._dragOffsets={},this.colDrag.pending=!1,this.colDrag.active=!1,this.colDrag.sourceFirstLeaf=-1,this.colDrag.sourceLeafCount=1,this.colDrag.dropIndex=-1,this.colDrag.ghostLabel="";const o=h(this.columns,e,n,t);this.$emit("update:columns",o),this.$emit("column-reorder",{fromIndex:e,toIndex:t,columns:o}),this.$nextTick(()=>{this._clearDragTransforms()})},_resetColDrag(){this._dragOffsets={},this.colDrag.pending=!1,this.colDrag.active=!1,this.colDrag.sourceFirstLeaf=-1,this.colDrag.sourceLeafCount=1,this.colDrag.dropIndex=-1,this.colDrag.ghostLabel="",this._clearDragTransforms()},startColResize(e,n){this.$refs.wrapper.getBoundingClientRect(),this.resizing={active:!0,type:"col",index:n,startX:e.clientX,startY:e.clientY,startSize:this.getColW(n),currentPos:e.clientX},e.preventDefault()},startRowResize(e,n){this.resizing={active:!0,type:"row",index:n,startX:e.clientX,startY:e.clientY,startSize:this.getRowH(n),currentPos:e.clientY},e.preventDefault()},handleResizeMove(e){if("col"===this.resizing.type){this.resizing.currentPos=e.clientX;const n=Math.max(20,this.resizing.startSize+(e.clientX-this.resizing.startX));this.$set(this.colWidths,this.resizing.index,n),this._cellStyleCache=Object.create(null)}else this.resizing.currentPos=e.clientY,this._resizePreviewHeight=Math.max(10,this.resizing.startSize+(e.clientY-this.resizing.startY)),this._resizeRAF||(this._resizeRAF=requestAnimationFrame(()=>{this._resizeRAF=null,this._rowStyleCache=Object.create(null),this._rowHeaderStyleCache=Object.create(null),this._cellStyleCache=Object.create(null),this.$set(this.rowHeights,this.resizing.index,this._resizePreviewHeight),this.updateVirtualScroll()}))},commitResize(){if(this._resizeRAF&&(cancelAnimationFrame(this._resizeRAF),this._resizeRAF=null,"row"===this.resizing.type&&void 0!==this._resizePreviewHeight&&this.$set(this.rowHeights,this.resizing.index,this._resizePreviewHeight)),"col"===this.resizing.type){this._cellStyleCache=Object.create(null);const e=this.colWidths[this.resizing.index];this.$emit("column-resize",{index:this.resizing.index,newSize:e})}else{this._rowStyleCache=Object.create(null),this._rowHeaderStyleCache=Object.create(null),this._cellStyleCache=Object.create(null);const e=this.rowHeights[this.resizing.index];this.$emit("row-resize",{index:this.resizing.index,newSize:e}),this.updateVirtualScroll()}this.resizing.active=!1},autoFitColumn(e){const n=this.leafCols[e];if(!n)return;let t=(n.title||"").length;for(let e=0;e<Math.min(this.totalRows,500);e++){const o=this.data[e]?String(this.data[e][n.key]||""):"";o.length>t&&(t=o.length)}const o=Math.max(50,8*t+16);this.$set(this.colWidths,e,o),this._cellStyleCache=Object.create(null),this.$emit("column-resize",{index:e,newSize:o})},_applyAutoWidth(){this.autoWidth&&this.leafCols.length&&(this.leafCols.forEach((e,n)=>{let t=(e.title||"").length;for(let n=0;n<Math.min(this.totalRows,500);n++){const o=this.data[n]?String(this.data[n][e.key]||""):"";o.length>t&&(t=o.length)}this.$set(this.colWidths,n,Math.max(50,8*t+16))}),this._cellStyleCache=Object.create(null))},ctxHideRow(){this.hideContextMenu();const e=this.primaryRange;if(!e)return;const n=i(e),t=[...this.hiddenRows];for(let e=n.startRow;e<=n.endRow;e++)t.includes(e)||t.push(e);this.$emit("update:hiddenRows",t)},ctxHideColumn(){this.hideContextMenu();const e=this.primaryRange;if(!e)return;const n=i(e),t=[...this.hiddenColumns];for(let e=n.startCol;e<=n.endCol;e++)t.includes(e)||t.push(e);this.$emit("update:hiddenColumns",t)},ctxUnhideRows(){this.hideContextMenu(),this.$emit("update:hiddenRows",[])},ctxUnhideColumns(){this.hideContextMenu(),this.$emit("update:hiddenColumns",[])},ctxPinLeft(){const e=this.leafCols[this.contextMenu.col];e?(this.$emit("update:pinnedColumns",{...this.pinnedColumns,[e.key]:"left"}),this.hideContextMenu()):this.hideContextMenu()},ctxPinRight(){const e=this.leafCols[this.contextMenu.col];e?(this.$emit("update:pinnedColumns",{...this.pinnedColumns,[e.key]:"right"}),this.hideContextMenu()):this.hideContextMenu()},ctxUnpin(){const e=this.leafCols[this.contextMenu.col];if(!e)return void this.hideContextMenu();const n={...this.pinnedColumns};delete n[e.key],this.$emit("update:pinnedColumns",n),this.hideContextMenu()},isColPinned(e){const n=this.leafCols[e];return!(!n||!this.pinnedColumns[n.key])},mergeCells(e){const n=this.internalMerges.slice(),{merges:t,conflict:o}=function(e,n){const t=i(e);return t.startRow===t.endRow&&t.startCol===t.endCol?{merges:n,conflict:!1}:y(t,n)?{merges:n,conflict:!0}:{merges:[...n,t],conflict:!1}}(e,this.internalMerges);return o?(this.$emit("merge-error",{range:e,reason:"Overlaps existing merge"}),!1):(this.internalMerges=t,this._emitMergeChange(n,[...t]),!0)},unmergeCells(e,n){const t=this.internalMerges.slice(),o=function(e,n,t){return t.filter(t=>{const o=i(t);return!(e>=o.startRow&&e<=o.endRow&&n>=o.startCol&&n<=o.endCol)})}(e,n,this.internalMerges);this.internalMerges=o,this._emitMergeChange(t,[...o])},ctxMerge(){this.hideContextMenu();const e=this.primaryRange;e&&this.mergeCells(i(e))},ctxUnmerge(){this.hideContextMenu(),this.unmergeCells(this.activeCell.row,this.activeCell.col)},groupRows(e,n){this.internalGroups=k("row",e,n,this.internalGroups)},groupColumns(e,n){this.internalGroups=k("column",e,n,this.internalGroups)},ungroupRows(e,n){this.internalGroups=R("row",e,n,this.internalGroups)},ungroupColumns(e,n){this.internalGroups=R("column",e,n,this.internalGroups)},toggleGroup(e){this.internalCollapsedGroups=function(e,n){return n.find(n=>n.type===e.type&&n.startIndex===e.startIndex&&n.endIndex===e.endIndex)?n.filter(n=>!(n.type===e.type&&n.startIndex===e.startIndex&&n.endIndex===e.endIndex)):[...n,{type:e.type,startIndex:e.startIndex,endIndex:e.endIndex}]}(e,this.internalCollapsedGroups),this.$emit("update:collapsedGroups",[...this.internalCollapsedGroups]),this.$emit("group-toggle",{group:e,collapsed:S(e,this.internalCollapsedGroups)}),this.updateVirtualScroll()},isGroupCollapsed(e){return S(e,this.internalCollapsedGroups)},expandAll(){this.internalCollapsedGroups=[],this.$emit("update:collapsedGroups",[]),this.updateVirtualScroll()},collapseAll(){this.internalCollapsedGroups=[...this.internalGroups],this.$emit("update:collapsedGroups",[...this.internalGroups]),this.updateVirtualScroll()},startDragMove(e,n,t){const o=this.primaryRange;o&&(this.dragMove={active:!0,sourceRange:i(o),startX:e.clientX,startY:e.clientY,targetRow:n,targetCol:t,copyMode:e.ctrlKey||e.metaKey},this.$emit("cell-drag-start",{sourceRange:this.dragMove.sourceRange}),e.preventDefault())},handleDragMoveMove(e){this.dragMove.copyMode=e.ctrlKey||e.metaKey,this.$emit("cell-drag-move",{sourceRange:this.dragMove.sourceRange,targetRow:this.dragMove.targetRow,targetCol:this.dragMove.targetCol})},async commitDragMove(e){if(!this.dragMove.active)return;const{sourceRange:n,targetRow:t,targetCol:o,copyMode:i}=this.dragMove,l={startRow:t,startCol:o,endRow:t+(n.endRow-n.startRow),endCol:o+(n.endCol-n.startCol)};let r=!0;if(this.beforeDrop&&(r=await Promise.resolve(this.beforeDrop(n,l))),r){const e=this.data,r=w(e,this.leafCols,n),{newData:s}=x(e,this.leafCols,t,o,r,"all",(e,n)=>this.isCellEditable(e,n));if(!i)for(let t=n.startRow;t<=n.endRow;t++){s[t]===e[t]&&(s[t]={...e[t]});for(let e=n.startCol;e<=n.endCol;e++){const n=this.leafCols[e];n&&this.isCellEditable(t,e)&&(s[t][n.key]="")}}this._emitDataChange(e,s),this.$emit("cell-drop",{sourceRange:n,targetRange:l})}this.dragMove={active:!1,sourceRange:null,startX:0,startY:0,targetRow:-1,targetCol:-1,copyMode:!1},this.isMouseDown=!1},async exportToExcel(e={}){const{filename:n="export.xlsx",sheetName:t="Sheet1",scope:l="all",includeHidden:r=!1}=e;this.$emit("export-start"),this.exportState={active:!0};const d={data:this.data,columns:this.columns,leafCols:this.leafCols,merges:this.internalMerges,hiddenCols:[...this.effectiveHiddenColSet],hiddenRows:[...this.hiddenRowSet],range:"selection"===l?this.primaryRange:null,filename:n,sheetName:t,scope:l,includeHidden:r};try{null||function(e){const{data:n,columns:t,leafCols:l,merges:r=[],hiddenColSet:d=new Set,hiddenRowSet:h=new Set,range:u=null,filename:g="export.xlsx",sheetName:p="Sheet1",scope:f="all",includeHidden:A=!1}=e,v=l.filter((e,n)=>{if(!A&&d.has(n))return!1;if("selection"===f&&u){const e=i(u);if(n<e.startCol||n>e.endCol)return!1}return!0});let C=0,m=n.length-1;if("selection"===f&&u){const e=i(u);C=e.startRow,m=e.endRow}const w=[];for(let e=C;e<=m;e++)!A&&h.has(e)||w.push({rowIndex:e,data:n[e]});const x=a(t),y=c(t,x),b=o.utils.book_new(),k=[];for(let e=0;e<y.length;e++){const n=[];for(const t of y[e])if(t.isGroup){const e=s(t.column.children||[]).filter(e=>v.some(n=>n.key===e.key));if(0===e.length)continue;n.push(t.column.title||"");for(let t=1;t<e.length;t++)n.push(null)}else{if(!v.some(e=>e.key===t.column.key))continue;t.rowspan,n.push(t.column.title||"")}k.push(n)}for(const{data:e}of w){const n=v.map(n=>{const t=e?e[n.key]:"";return void 0!==t?t:""});k.push(n)}const R=o.utils.aoa_to_sheet(k);R["!cols"]=v.map(e=>({wch:Math.round((e.width||100)/7)}));const S=[];for(const e of r){const n=i(e),t="selection"===f&&u?i(u):{startRow:0,startCol:0};if("selection"===f){if(n.startRow<t.startRow||n.endRow>t.endRow)continue;if(n.startCol<t.startCol||n.endCol>t.endCol)continue}const o=v.findIndex(e=>l.indexOf(e)===n.startCol),r=v.findIndex(e=>l.indexOf(e)===n.endCol);if(o<0||r<0)continue;const s=w.filter(e=>e.rowIndex<n.startRow).length,a=w.filter(e=>e.rowIndex<=n.endRow).length;S.push({s:{r:x+s,c:o},e:{r:x+a-1,c:r}})}S.length&&(R["!merges"]=S),o.utils.book_append_sheet(b,R,p),o.writeFile(b,g)}({...d,hiddenColSet:this.effectiveHiddenColSet,hiddenRowSet:this.hiddenRowSet}),this.$emit("export-success")}catch(e){this.$emit("export-error",e)}finally{this.exportState={active:!1}}},_exportViaWorker:(e,n)=>new Promise((t,o)=>{let i=!1;const l=(n,t)=>{i||(i=!0,e.terminate(),n(t))};e.onmessage=e=>{const{type:n,buffer:i,filename:r,message:s}=e.data;if("result"===n){const e=new Blob([new Uint8Array(i)],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}),n=URL.createObjectURL(e),o=document.createElement("a");o.href=n,o.download=r,document.body.appendChild(o),o.click(),document.body.removeChild(o),URL.revokeObjectURL(n),l(t)}else"error"===n&&l(o,new Error(s))},e.onerror=e=>l(o,new Error(e.message||"Export worker xatosi")),e.postMessage(n)}),async importFromFile(e,n={}){this.importState={active:!0,percent:5,message:"Fayl o'qilmoqda..."};try{let t;null||(t=await M(e,this.columns,n,(e,n)=>{this.importState={active:!0,percent:e,message:n}}));const{columns:o,merges:i}=t,l=t.data.map(e=>Object.freeze(e));this.$emit("input",l),this.$emit("update:columns",o);const r=i&&i.length>0;this.internalMerges=r?i:[],this.$emit("update:merges",r?i:[]),this.$emit("update:collapsedGroups",[]),this.$emit("update:hiddenRows",[]),this.$emit("import-success",{data:l,columns:o,merges:i}),this.rowHeights={},this.scrollTop=0,this.scrollLeft=0,this.$nextTick(()=>{this.$refs.scrollBody&&(this.$refs.scrollBody.scrollTop=0,this.$refs.scrollBody.scrollLeft=0),this.$refs.scrollColHeader&&(this.$refs.scrollColHeader.scrollLeft=0),this.$refs.scrollFooter&&(this.$refs.scrollFooter.scrollLeft=0),this.$refs.scrollRowHeaders&&(this.$refs.scrollRowHeaders.scrollTop=0),this.updateVirtualScroll()})}catch(e){this.$emit("import-error",e)}finally{this.importState={active:!1,percent:0,message:""}}},_importViaWorker(e,n,t){return new Promise(async(o,i)=>{let l=!1;const r=(n,t)=>{l||(l=!0,e.terminate(),n(t))};e.onmessage=e=>{const{type:n,percent:t,message:l,data:s,columns:a,merges:c}=e.data;"progress"===n?this.importState={active:!0,percent:t,message:l}:"result"===n?r(o,{data:s,columns:a,merges:c}):"error"===n&&r(i,new Error(l))},e.onerror=e=>r(i,new Error(e.message||"Import worker xatosi"));try{const o=await n.arrayBuffer();e.postMessage({buffer:o,existingColumns:this.columns,options:t},[o])}catch(e){r(i,e)}})},_pushHistory(e){this._historyIndex<this._history.length-1&&this._history.splice(this._historyIndex+1),this._history.push(e),this._history.length>100?this._history.shift():this._historyIndex++},_emitDataChange(e,n){if(!this._historySkip){const t=[],o=[],i=[],l=Math.max(e.length,n.length);for(let r=0;r<l;r++)e[r]!==n[r]&&(t.push(r),o.push(e[r]),i.push(n[r]));t.length>0&&this._pushHistory({type:"data",before:{indices:t,rows:o},after:{indices:t,rows:i}})}this.$emit("input",n)},_emitMergeChange(e,n){this._historySkip||this._pushHistory({type:"merges",before:e,after:n}),this.$emit("update:merges",n)},undo(){if(this._historyIndex<0)return;const e=this._history[this._historyIndex--];this._historySkip=!0;try{if("data"===e.type){const n=this.data.slice();for(let t=0;t<e.before.indices.length;t++)n[e.before.indices[t]]=e.before.rows[t];this.$emit("input",n)}else"merges"===e.type&&(this.internalMerges=e.before.slice(),this.$emit("update:merges",e.before.slice()))}finally{this._historySkip=!1}},redo(){if(this._historyIndex>=this._history.length-1)return;const e=this._history[++this._historyIndex];this._historySkip=!0;try{if("data"===e.type){const n=this.data.slice();for(let t=0;t<e.after.indices.length;t++)n[e.after.indices[t]]=e.after.rows[t];this.$emit("input",n)}else"merges"===e.type&&(this.internalMerges=e.after.slice(),this.$emit("update:merges",e.after.slice()))}finally{this._historySkip=!1}}}};var tn=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{ref:"wrapper",staticClass:"eg-wrapper",class:"eg-size-"+e.size,style:e.wrapperStyle,attrs:{tabindex:"0"},on:{keydown:e.onKeyDown,keypress:e.onKeyPress}},[e.contextMenu.visible?t("div",{staticClass:"eg-context-menu",style:{top:e.contextMenu.y+"px",left:e.contextMenu.x+"px"},on:{click:function(e){e.stopPropagation()}}},[t("div",{staticClass:"eg-context-item",on:{click:e.ctxCopy}},[e._v(e._s(e.t.copy))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxCut}},[e._v(e._s(e.t.cut))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxPaste}},[e._v(e._s(e.t.paste))]),e._v(" "),t("div",{staticClass:"eg-context-separator"}),e._v(" "),t("div",{staticClass:"eg-context-item eg-context-submenu-parent"},[e._v("\n "+e._s(e.t.pasteSpecial)+"\n "),t("div",{staticClass:"eg-context-submenu"},[t("div",{staticClass:"eg-context-item",on:{click:function(n){return e.ctxPasteSpecial("all")}}},[e._v(e._s(e.t.pasteAll))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:function(n){return e.ctxPasteSpecial("values")}}},[e._v(e._s(e.t.pasteValues))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:function(n){return e.ctxPasteSpecial("formats")}}},[e._v(e._s(e.t.pasteFormats))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:function(n){return e.ctxPasteSpecial("all",!0)}}},[e._v(e._s(e.t.transpose))])])]),e._v(" "),t("div",{staticClass:"eg-context-separator"}),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxMerge}},[e._v(e._s(e.t.mergeCells))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxUnmerge}},[e._v(e._s(e.t.unmergeCells))]),e._v(" "),t("div",{staticClass:"eg-context-separator"}),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxHideRow}},[e._v(e._s(e.t.hideRows))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxHideColumn}},[e._v(e._s(e.t.hideColumns))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxUnhideRows}},[e._v(e._s(e.t.unhideRows))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxUnhideColumns}},[e._v(e._s(e.t.unhideColumns))]),e._v(" "),e.contextMenu.row<0&&e.contextMenu.col>=0?[t("div",{staticClass:"eg-context-separator"}),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxPinLeft}},[e._v(e._s(e.t.pinLeft))]),e._v(" "),t("div",{staticClass:"eg-context-item",on:{click:e.ctxPinRight}},[e._v(e._s(e.t.pinRight))]),e._v(" "),e.isColPinned(e.contextMenu.col)?t("div",{staticClass:"eg-context-item",on:{click:e.ctxUnpin}},[e._v(e._s(e.t.unpin))]):e._e()]:e._e()],2):e._e(),e._v(" "),t("div",{ref:"container",staticClass:"eg-container",on:{scroll:e.onScroll,click:e.hideContextMenu}},[t("div",{staticClass:"eg-header-area",style:e.headerAreaStyle},[t("div",{staticClass:"eg-corner",style:e.cornerStyle,on:{click:e.selectAll}}),e._v(" "),e.rowGroups.length?t("div",{staticClass:"eg-row-outline-gutter",style:e.rowOutlineGutterStyle}):e._e(),e._v(" "),e.getFrozenWidth()>0?t("div",{staticClass:"eg-frozen-col-header",style:e.frozenColHeaderStyle},[t("div",{style:{position:"relative",height:e.headerRowHeight*e.headerDepth+"px"}},[e._l(e.headerRows,function(n,o){return[e._l(n,function(n){return[e.isCellVisible(n,o,!0)?[t("div",{key:"fh-"+o+"-"+(n.column.key||n.column.title),staticClass:"eg-header-cell",class:{"eg-header-group":n.isGroup,"eg-header-cell--drag-source":e.colDrag.active&&n._firstLeafFlatIndex>=e.colDrag.sourceFirstLeaf&&n._firstLeafFlatIndex<e.colDrag.sourceFirstLeaf+e.colDrag.sourceLeafCount},style:e.getHeaderCellStyle(n,o,!0),attrs:{"data-fi":n.isGroup?void 0:n.column._flatIndex,"data-start":n.isGroup?n._firstLeafFlatIndex:void 0,"data-end":n.isGroup?n._firstLeafFlatIndex+n.colspan-1:void 0},on:{mousedown:function(t){return e.onColHeaderMouseDown(t,n)},dblclick:function(t){return e.onColHeaderDblClick(t,n)},contextmenu:function(t){return t.preventDefault(),e.onColHeaderContextMenu(t,n)}}},[n.isGroup?t("span",[e._v(e._s(n.column.title))]):e._t("header-"+n.column.key,function(){return[e._v("\n "+e._s(n.column.title)+"\n ")]},{column:n.column}),e._v(" "),n.isGroup?e._e():t("div",{staticClass:"eg-col-resize-handle",on:{mousedown:function(t){return t.stopPropagation(),e.startColResize(t,n.column._flatIndex)}}})],2)]:e._e()]})]})],2)]):e._e(),e._v(" "),t("div",{ref:"scrollColHeader",staticClass:"eg-scroll-col-header",style:e.scrollColHeaderStyle},[t("div",{staticClass:"eg-scroll-col-header-inner",style:{width:e.scrollContentWidth+"px",height:e.headerRowHeight*e.headerDepth+"px",position:"relative"}},[e._l(e.headerRows,function(n,o){return[e._l(n,function(n){return[e.isCellVisible(n,o,!1)?[t("div",{key:"sh-"+o+"-"+(n.column.key||n.column.title),staticClass:"eg-header-cell",class:{"eg-header-group":n.isGroup,"eg-header-cell--drag-source":e.colDrag.active&&n._firstLeafFlatIndex>=e.colDrag.sourceFirstLeaf&&n._firstLeafFlatIndex<e.colDrag.sourceFirstLeaf+e.colDrag.sourceLeafCount},style:e.getHeaderCellStyle(n,o,!1),attrs:{"data-fi":n.isGroup?void 0:n.column._flatIndex,"data-start":n.isGroup?n._firstLeafFlatIndex:void 0,"data-end":n.isGroup?n._firstLeafFlatIndex+n.colspan-1:void 0},on:{mousedown:function(t){return e.onColHeaderMouseDown(t,n)},dblclick:function(t){return e.onColHeaderDblClick(t,n)},contextmenu:function(t){return t.preventDefault(),e.onColHeaderContextMenu(t,n)}}},[n.isGroup?t("span",[e._v(e._s(n.column.title))]):e._t("header-"+n.column.key,function(){return[e._v("\n "+e._s(n.column.title)+"\n ")]},{column:n.column}),e._v(" "),n.isGroup?e._e():t("div",{staticClass:"eg-col-resize-handle",on:{mousedown:function(t){return t.stopPropagation(),e.startColResize(t,n.column._flatIndex)}}})],2)]:e._e()]})]})],2)]),e._v(" "),e.hasPinnedRight?t("div",{staticClass:"eg-pinned-right-header",style:e.pinnedRightHeaderStyle},[t("div",{style:{position:"relative",height:e.headerRowHeight*e.headerDepth+"px"}},[e._l(e.headerRows,function(n,o){return[e._l(n,function(n){return[e.isCellInZone(n,o,"right")?[t("div",{key:"prh-"+o+"-"+(n.column.key||n.column.title),staticClass:"eg-header-cell",class:{"eg-header-group":n.isGroup,"eg-header-cell--drag-source":e.colDrag.active&&n._firstLeafFlatIndex>=e.colDrag.sourceFirstLeaf&&n._firstLeafFlatIndex<e.colDrag.sourceFirstLeaf+e.colDrag.sourceLeafCount},style:e.getHeaderCellStyleForZone(n,o,"right"),attrs:{"data-fi":n.isGroup?void 0:n.column._flatIndex,"data-start":n.isGroup?n._firstLeafFlatIndex:void 0,"data-end":n.isGroup?n._firstLeafFlatIndex+n.colspan-1:void 0},on:{mousedown:function(t){return e.onColHeaderMouseDown(t,n)},dblclick:function(t){return e.onColHeaderDblClick(t,n)},contextmenu:function(t){return t.preventDefault(),e.onColHeaderContextMenu(t,n)}}},[n.isGroup?t("span",[e._v(e._s(n.column.title))]):e._t("header-"+n.column.key,function(){return[e._v("\n "+e._s(n.column.title)+"\n ")]},{column:n.column}),e._v(" "),n.isGroup?e._e():t("div",{staticClass:"eg-col-resize-handle",on:{mousedown:function(t){return t.stopPropagation(),e.startColResize(t,n.column._flatIndex)}}})],2)]:e._e()]})]})],2)]):e._e()]),e._v(" "),t("div",{staticClass:"eg-body-area",style:e.bodyAreaStyle},[t("div",{staticClass:"eg-row-header-col",style:e.rowHeaderColStyle},[t("div",{ref:"scrollRowHeaders",staticClass:"eg-scroll-row-headers",style:e.scrollRowHeadersStyle},[t("div",{style:{height:e.totalVirtualHeight+"px",position:"relative"}},[t("div",{style:{transform:"translateY("+e.virtualOffsetTop+"px)",willChange:"transform",contain:"layout style"}},[e._l(e.visibleRowRange,function(n){return[e.isRowHidden(n)?e._e():t("div",{key:"srh-"+n,staticClass:"eg-row-header-cell",style:e.getRowHeaderStyle(n),on:{mousedown:function(t){return e.onRowHeaderMouseDown(t,n)},contextmenu:function(t){return t.preventDefault(),e.onRowContextMenu(t,n)}}},[e._v("\n "+e._s(n+1)+"\n "),t("div",{staticClass:"eg-row-resize-handle",on:{mousedown:function(t){return t.stopPropagation(),e.startRowResize(t,n)}}})])]})],2)])])]),e._v(" "),e.rowGroups.length?t("div",{staticClass:"eg-row-outline-col",style:e.rowOutlineColStyle},[e._l(e.rowGroups,function(n){return[t("div",{key:"rg-"+n.startIndex+"-"+n.endIndex,staticClass:"eg-group-btn",class:{collapsed:e.isGroupCollapsed(n)},style:e.getRowGroupBtnStyle(n),on:{click:function(t){return e.toggleGroup(n)}}},[e._v(e._s(e.isGroupCollapsed(n)?"+":"−"))])]})],2):e._e(),e._v(" "),t("div",{ref:"scrollBody",staticClass:"eg-scroll-body",style:e.scrollBodyStyle,on:{scroll:e.onBodyScroll}},[t("div",{staticClass:"eg-scroll-body-inner",style:{width:e.scrollContentWidth+"px",height:e.totalVirtualHeight+"px",position:"relative"}},[e.getFrozenWidth()>0?t("div",{staticClass:"eg-frozen-col-body",style:e.frozenColBodyStyle},[t("div",{style:{height:e.totalVirtualHeight+"px",position:"relative"}},[t("div",{style:{transform:"translateY("+e.virtualOffsetTop+"px)",willChange:"transform",contain:"layout style"}},[e._l(e.visibleRowRange,function(n){return[e.isRowHidden(n)?e._e():t("div",{key:"fc-row-"+n,staticClass:"eg-row",class:{"eg-row--even":n%2==0},style:e.getRowStyle(n)},[e._l(e.leafCols,function(o,i){return[e.isColumnPinnedLeft(i)&&!e.isColHidden(i)?[t("div",{key:"fc-cell-"+n+"-"+i,staticClass:"eg-cell",class:e.getCellClasses(n,i),style:e.getCellStyle(n,i),attrs:{"data-fi":i},on:{mousedown:function(t){return e.onCellMouseDown(t,n,i)},mouseover:function(t){return e.onCellMouseOver(t,n,i)},mouseup:e.onCellMouseUp,dblclick:function(t){return e.onCellDblClick(n,i)},contextmenu:function(t){return t.preventDefault(),e.onCellContextMenu(t,n,i)}}},[e.isMergedAway(n,i)?t("div",{staticStyle:{display:"none"}}):e.isEditing(n,i)?[e.hasCellSlot(o)?e._t("cell-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),isEditing:!0,done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):e.hasLegacyEditSlot(o)?e._t("edit-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):t("input",{directives:[{name:"model",rawName:"v-model",value:e.editValue,expression:"editValue"}],ref:"editInput",refInFor:!0,staticClass:"eg-cell-input",domProps:{value:e.editValue},on:{blur:e.commitEdit,keydown:function(n){return n.stopPropagation(),e.onEditKeyDown.apply(null,arguments)},input:function(n){n.target.composing||(e.editValue=n.target.value)}}})]:"checkbox"===o.type?[t("eg-checkbox",{attrs:{value:e.isCheckboxChecked(n,i),disabled:!e.isCellEditable(n,i)},on:{change:function(t){return e.setCheckboxValue(n,i,t)}}})]:[e._t("cell-"+o.key,function(){return[e.hasPrefixSlot(o)?e._t("prefix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i)}):e._e(),e.hasSuffixSlot(o)&&e.isSelectLikeCol(o)?[t("span",{staticClass:"eg-cell-select-trigger-wrap"},[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.getSelectLabel(i,e.getCellValue(n,i))))]),t("span",{staticClass:"eg-cell-select-caret-inline"},[e._v("▾")])])]:e.hasPrefixSlot(o)||e.hasSuffixSlot(o)?[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(i,e.getCellValue(n,i)):e.getCellValue(n,i)))])]:[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(i,e.getCellValue(n,i)):e.getCellValue(n,i)))],e.hasSuffixSlot(o)?t("span",{staticClass:"eg-cell-suffix-wrap"},[e._t("suffix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i)})],2):e._e()]},{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),isEditing:!1,done:null,cancel:null})]],2)]:e._e()]})],2)]})],2)])]):e._e(),e._v(" "),t("div",{staticClass:"eg-main-cells",style:e.mainCellsStyle},[t("div",{style:{height:e.totalVirtualHeight+"px",position:"relative",width:e.scrollableContentWidth+"px"}},[t("div",{style:{transform:"translateY("+e.virtualOffsetTop+"px)",willChange:"transform",contain:"layout style"}},[e._l(e.visibleRowRange,function(n){return[e.isRowHidden(n)?e._e():t("div",{key:"row-"+n,staticClass:"eg-row",class:{"eg-row--even":n%2==0},style:e.getRowStyle(n),attrs:{"data-row":n}},[e._l(e.leafCols,function(o,i){return[e.isColumnScrollable(i)&&!e.isColHidden(i)?[t("div",{key:"cell-"+n+"-"+i,staticClass:"eg-cell",class:e.getCellClasses(n,i),style:e.getCellStyle(n,i),attrs:{"data-fi":i},on:{mousedown:function(t){return e.onCellMouseDown(t,n,i)},mouseover:function(t){return e.onCellMouseOver(t,n,i)},mouseup:e.onCellMouseUp,dblclick:function(t){return e.onCellDblClick(n,i)},contextmenu:function(t){return t.preventDefault(),e.onCellContextMenu(t,n,i)}}},[e.isMergedAway(n,i)?t("div",{staticStyle:{display:"none"}}):e.isEditing(n,i)?[e.hasCellSlot(o)?e._t("cell-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),isEditing:!0,done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):e.hasLegacyEditSlot(o)?e._t("edit-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):t("input",{directives:[{name:"model",rawName:"v-model",value:e.editValue,expression:"editValue"}],ref:"editInput",refInFor:!0,staticClass:"eg-cell-input",domProps:{value:e.editValue},on:{blur:e.commitEdit,keydown:function(n){return n.stopPropagation(),e.onEditKeyDown.apply(null,arguments)},input:function(n){n.target.composing||(e.editValue=n.target.value)}}})]:"checkbox"===o.type?[t("eg-checkbox",{attrs:{value:e.isCheckboxChecked(n,i),disabled:!e.isCellEditable(n,i)},on:{change:function(t){return e.setCheckboxValue(n,i,t)}}})]:[e._t("cell-"+o.key,function(){return[e.hasPrefixSlot(o)?e._t("prefix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i)}):e._e(),e.hasSuffixSlot(o)&&e.isSelectLikeCol(o)?[t("span",{staticClass:"eg-cell-select-trigger-wrap"},[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.getSelectLabel(i,e.getCellValue(n,i))))]),t("span",{staticClass:"eg-cell-select-caret-inline"},[e._v("▾")])])]:e.hasPrefixSlot(o)||e.hasSuffixSlot(o)?[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(i,e.getCellValue(n,i)):e.getCellValue(n,i)))])]:[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(i,e.getCellValue(n,i)):e.getCellValue(n,i)))],e.hasSuffixSlot(o)?t("span",{staticClass:"eg-cell-suffix-wrap"},[e._t("suffix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i)})],2):e._e()]},{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,i),isEditing:!1,done:null,cancel:null})]],2)]:e._e()]})],2)]})],2)])]),e._v(" "),e.hasPinnedRight?t("div",{staticClass:"eg-pinned-right-body",style:e.pinnedRightBodyStyle},[t("div",{style:{height:e.totalVirtualHeight+"px",position:"relative"}},[t("div",{style:{transform:"translateY("+e.virtualOffsetTop+"px)",willChange:"transform",contain:"layout style"}},[e._l(e.visibleRowRange,function(n){return[e.isRowHidden(n)?e._e():t("div",{key:"pr-row-"+n,staticClass:"eg-row",class:{"eg-row--even":n%2==0},style:e.getRowStyle(n)},[e._l(e.pinnedRightCols,function(o){return[t("div",{key:"pr-cell-"+n+"-"+o._flatIndex,staticClass:"eg-cell",class:e.getCellClasses(n,o._flatIndex),style:e.getCellStyle(n,o._flatIndex),attrs:{"data-fi":o._flatIndex},on:{mousedown:function(t){return e.onCellMouseDown(t,n,o._flatIndex)},mouseover:function(t){return e.onCellMouseOver(t,n,o._flatIndex)},mouseup:e.onCellMouseUp,dblclick:function(t){return e.onCellDblClick(n,o._flatIndex)},contextmenu:function(t){return t.preventDefault(),e.onCellContextMenu(t,n,o._flatIndex)}}},[e.isMergedAway(n,o._flatIndex)?t("div",{staticStyle:{display:"none"}}):e.isEditing(n,o._flatIndex)?[e.hasCellSlot(o)?e._t("cell-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,o._flatIndex),isEditing:!0,done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):e.hasLegacyEditSlot(o)?e._t("edit-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,o._flatIndex),done:function(n){return e.commitEditSlot(n)},cancel:e.cancelEdit}):t("input",{directives:[{name:"model",rawName:"v-model",value:e.editValue,expression:"editValue"}],ref:"editInput",refInFor:!0,staticClass:"eg-cell-input",domProps:{value:e.editValue},on:{blur:e.commitEdit,keydown:function(n){return n.stopPropagation(),e.onEditKeyDown.apply(null,arguments)},input:function(n){n.target.composing||(e.editValue=n.target.value)}}})]:"checkbox"===o.type?[t("eg-checkbox",{attrs:{value:e.isCheckboxChecked(n,o._flatIndex),disabled:!e.isCellEditable(n,o._flatIndex)},on:{change:function(t){return e.setCheckboxValue(n,o._flatIndex,t)}}})]:[e._t("cell-"+o.key,function(){return[e.hasPrefixSlot(o)?e._t("prefix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,o._flatIndex)}):e._e(),e.hasSuffixSlot(o)&&e.isSelectLikeCol(o)?[t("span",{staticClass:"eg-cell-select-trigger-wrap"},[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.getSelectLabel(o._flatIndex,e.getCellValue(n,o._flatIndex))))]),t("span",{staticClass:"eg-cell-select-caret-inline"},[e._v("▾")])])]:e.hasPrefixSlot(o)||e.hasSuffixSlot(o)?[t("span",{staticClass:"eg-cell-value"},[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(o._flatIndex,e.getCellValue(n,o._flatIndex)):e.getCellValue(n,o._flatIndex)))])]:[e._v(e._s(e.isSelectLikeCol(o)?e.getSelectLabel(o._flatIndex,e.getCellValue(n,o._flatIndex)):e.getCellValue(n,o._flatIndex)))],e.hasSuffixSlot(o)?t("span",{staticClass:"eg-cell-suffix-wrap"},[e._t("suffix-"+o.key,null,{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,o._flatIndex)})],2):e._e()]},{row:e._dataRaw[n],rowIndex:n,column:o,value:e.getCellValue(n,o._flatIndex),isEditing:!1,done:null,cancel:null})]],2)]})],2)]})],2)])]):e._e(),e._v(" "),e.fillHandleVisible?t("div",{staticClass:"eg-fill-handle",style:e.fillHandleStyle,on:{mousedown:function(n){return n.stopPropagation(),e.startFillDrag.apply(null,arguments)}}}):e._e(),e._v(" "),e.dragMove.active?t("div",{staticClass:"eg-drag-ghost",style:e.dragGhostStyle}):e._e()])]),e._v(" "),e.colGroups.length?t("div",{staticClass:"eg-col-outline-row",style:e.colOutlineRowStyle},[e._l(e.colGroups,function(n){return[t("div",{key:"cg-"+n.startIndex+"-"+n.endIndex,staticClass:"eg-group-btn",class:{collapsed:e.isGroupCollapsed(n)},style:e.getColGroupBtnStyle(n),on:{click:function(t){return e.toggleGroup(n)}}},[e._v(e._s(e.isGroupCollapsed(n)?"+":"−"))])]})],2):e._e()]),e._v(" "),e.hasFooter?t("div",{staticClass:"eg-footer-area",style:e.footerAreaStyle},[t("div",{staticClass:"eg-footer-label",style:e.footerLabelStyle},[e._v(e._s(e.t.total))]),e._v(" "),e.getFrozenWidth()>0?t("div",{staticClass:"eg-frozen-col-footer",style:e.frozenColFooterStyle},[t("div",{style:{position:"relative",height:e.footerRowHeight+"px"}},[e._l(e.leafCols,function(n,o){return[e.isColumnPinnedLeft(o)&&!e.isColHidden(o)?[t("div",{key:"ff-"+o,staticClass:"eg-footer-cell",style:e.getFooterCellStyle(o)},[e._v("\n "+e._s(e.getColumnTotalDisplay(o))+"\n ")])]:e._e()]})],2)]):e._e(),e._v(" "),t("div",{ref:"scrollFooter",staticClass:"eg-scroll-col-footer",style:e.scrollColHeaderStyle},[t("div",{staticClass:"eg-scroll-col-footer-inner",style:{width:e.scrollContentWidth+"px",height:e.footerRowHeight+"px",position:"relative"}},[e._l(e.leafCols,function(n,o){return[e.isColumnScrollable(o)&&!e.isColHidden(o)?[t("div",{key:"sf-"+o,staticClass:"eg-footer-cell",style:e.getFooterCellStyle(o)},[e._v("\n "+e._s(e.getColumnTotalDisplay(o))+"\n ")])]:e._e()]})],2)]),e._v(" "),e.hasPinnedRight?t("div",{staticClass:"eg-pinned-right-footer",style:e.pinnedRightFooterStyle},[t("div",{style:{position:"relative",height:e.footerRowHeight+"px"}},e._l(e.pinnedRightCols,function(n){return t("div",{key:"prf-"+n._flatIndex,staticClass:"eg-footer-cell",style:e.getFooterCellStyle(n._flatIndex)},[e._v(e._s(e.getColumnTotalDisplay(n._flatIndex)))])}),0)]):e._e()]):e._e(),e._v(" "),e.resizing.active?t("div",{staticClass:"eg-resize-line",style:e.resizeLineStyle}):e._e()]),e._v(" "),e.importState.active?t("div",{staticClass:"eg-import-overlay"},[t("div",{staticClass:"eg-import-dialog"},[t("div",{staticClass:"eg-import-title"},[e._v("Fayl import qilinmoqda")]),e._v(" "),t("div",{staticClass:"eg-import-bar-wrap"},[t("div",{staticClass:"eg-import-bar",style:{width:e.importState.percent+"%"}})]),e._v(" "),t("div",{staticClass:"eg-import-msg"},[e._v(e._s(e.importState.message))]),e._v(" "),t("div",{staticClass:"eg-import-pct"},[e._v(e._s(e.importState.percent)+"%")])])]):e._e(),e._v(" "),e.exportState.active?t("div",{staticClass:"eg-import-overlay"},[e._m(0)]):e._e(),e._v(" "),e.selectDropdown&&!e.selectDropdown.tree?t("eg-select",{ref:"selectDropdownComp",attrs:{value:e.selectDropdown.currentValue,options:e.selectDropdown.rawOptions,"enable-search":e.selectDropdown.enableSearch,"trigger-rect":e.selectDropdown.rect,"dropdown-only":!0},on:{select:e.onComponentSelect,close:e.closeSelectDropdown}}):e._e(),e._v(" "),e.selectDropdown&&e.selectDropdown.tree?t("eg-tree-select",{ref:"selectDropdownComp",attrs:{value:e.selectDropdown.currentValue,options:e.selectDropdown.rawOptions,"value-key":e.selectDropdown.keys.valueKey,"label-key":e.selectDropdown.keys.labelKey,"children-key":e.selectDropdown.keys.childrenKey,"enable-search":e.selectDropdown.enableSearch,"trigger-rect":e.selectDropdown.rect,"dropdown-only":!0},on:{select:e.onComponentSelect,close:e.closeSelectDropdown}}):e._e(),e._v(" "),e.invalidCell&&e.invalidCell.rect?t("div",{staticClass:"eg-validation-tooltip",style:e.invalidTooltipStyle},[e._v(e._s(e.invalidCell.message))]):e._e(),e._v(" "),e.colDrag.active?t("div",{ref:"colDragGhost",staticClass:"eg-col-drag-ghost",style:{left:e.colDrag.startX+16+"px",top:e.colDrag.startY-14+"px"}},[e._v(e._s(e.colDrag.ghostLabel))]):e._e()],1)};tn._withStripped=!0;const on=L({render:tn,staticRenderFns:[function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"eg-import-dialog"},[t("div",{staticClass:"eg-import-title"},[e._v("Fayl export qilinmoqda...")]),e._v(" "),t("div",{staticClass:"eg-export-spinner"})])}]},function(e){e&&(e("data-v-6b44afd7_0",{source:"\n.eg-wrapper[data-v-6b44afd7] {\n /* ── Design tokens (Excel 365 defaults) — override on :root or any ancestor of <excel-grid> ──\n Full reference: docs/theming.md\n */\n\n /* --- Typography --- */\n --eg-font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;\n --eg-font-size: 14px;\n --eg-font-size-header: 11px;\n\n /* --- Shape --- */\n --eg-radius: 0px;\n --eg-cell-padding-x: 3px;\n\n /* --- Accent (Excel green) --- */\n --eg-color-accent: #217346;\n --eg-color-accent-dark: #185a30;\n --eg-color-accent-soft: rgba(33, 115, 70, 0.15);\n\n /* --- Error / Validation --- */\n --eg-color-error: #c00000;\n --eg-color-error-soft: #fff2f2;\n --eg-color-error-dark: #9b0000;\n\n /* --- Borders --- */\n --eg-color-border: #d9d9d9;\n --eg-color-border-cell: #d9d9d9;\n --eg-color-border-strong: #bfbfbf;\n\n /* --- Header --- */\n --eg-color-header-bg: #f2f2f2;\n --eg-color-header-group-bg: #f2f2f2;\n --eg-color-group-border: #92d050;\n --eg-color-group-bg-collapsed: #70ad47;\n\n /* --- Cell states --- */\n --eg-color-cell-bg: #ffffff;\n --eg-color-cell-selected: #bdd7ee;\n --eg-color-cell-fill-preview: #9bc2e6;\n --eg-color-cell-readonly: #f2f2f2;\n --eg-color-cell-readonly-selected: #a9c9e4;\n --eg-color-footer-bg: #f2f2f2;\n\n /* --- Text --- */\n --eg-color-text: #000000;\n --eg-color-text-secondary: #595959;\n --eg-color-text-muted: #767676;\n\n /* --- Shadows --- */\n --eg-shadow-dropdown: 1px 2px 8px rgba(0, 0, 0, 0.18);\n --eg-shadow-dialog: 0 2px 12px rgba(0, 0, 0, 0.22);\n --eg-shadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.18);\n --eg-color-freeze-shadow: rgba(0, 0, 0, 0.12);\n\n /* --- Overlay & dropdown options --- */\n --eg-color-overlay-bg: rgba(255, 255, 255, 0.88);\n --eg-color-option-hover-bg: #e2efda;\n --eg-color-option-active-hover-bg: #c6e0b4;\n\n /* --- Checkbox --- */\n --eg-color-checkbox-border: #767676;\n --eg-color-checkbox-disabled-checked: #bfbfbf;\n\n /* --- Row effects (off by default) --- */\n --eg-color-row-hover: transparent;\n --eg-color-row-stripe: transparent;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n font-family: var(--eg-font-family);\n}\n.eg-container[data-v-6b44afd7] {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: auto;\n position: relative;\n}\n.eg-header-area[data-v-6b44afd7] {\n display: flex;\n flex-shrink: 0;\n box-shadow: 0 2px 0 0 var(--eg-color-border-cell);\n position: relative;\n z-index: 31;\n}\n.eg-header-cell[data-v-6b44afd7] {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border);\n border-bottom: 1px solid var(--eg-color-border);\n background: var(--eg-color-header-bg);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n position: absolute;\n user-select: none;\n cursor: pointer;\n}\n.eg-header-cell[data-v-6b44afd7]:hover { background: var(--eg-color-border-cell);\n}\n.eg-header-group[data-v-6b44afd7] { background: var(--eg-color-header-group-bg);\n}\n.eg-col-resize-handle[data-v-6b44afd7] {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 5px;\n cursor: col-resize;\n z-index: 5;\n}\n.eg-body-area[data-v-6b44afd7] {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n/* ===== FOOTER AREA (column totals) ===== */\n.eg-footer-area[data-v-6b44afd7] {\n border-top: 1px solid var(--eg-color-border);\n}\n.eg-frozen-col-footer[data-v-6b44afd7],\n.eg-scroll-col-footer[data-v-6b44afd7],\n.eg-pinned-right-footer[data-v-6b44afd7] {\n position: relative;\n}\n.eg-footer-cell[data-v-6b44afd7] {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n font-weight: 600;\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-footer-bg);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n.eg-row[data-v-6b44afd7] {\n position: relative;\n}\n.eg-cell[data-v-6b44afd7] {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n border-bottom: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-cell-bg);\n cursor: default;\n display: flex;\n align-items: center;\n}\n.eg-cell-value[data-v-6b44afd7] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n.eg-cell--has-suffix.eg-cell-select[data-v-6b44afd7]::after { display: none;\n}\n.eg-cell-select-trigger-wrap[data-v-6b44afd7] {\n flex: 1;\n display: flex;\n align-items: center;\n overflow: hidden;\n min-width: 0;\n}\n.eg-cell-select-caret-inline[data-v-6b44afd7] {\n flex-shrink: 0;\n color: var(--eg-color-text-muted);\n font-size: 11px;\n margin-left: 2px;\n}\n.eg-cell-suffix-wrap[data-v-6b44afd7] {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n}\n.eg-cell-active[data-v-6b44afd7] {\n outline: 2px solid var(--eg-color-accent) !important;\n outline-offset: -2px;\n z-index: 3;\n}\n.eg-cell-selected[data-v-6b44afd7] {\n background: var(--eg-color-cell-selected) !important;\n}\n.eg-cell-fill-preview[data-v-6b44afd7] {\n background: var(--eg-color-cell-fill-preview) !important;\n outline: 1px dashed var(--eg-color-accent-dark);\n outline-offset: -1px;\n}\n.eg-cell-copy[data-v-6b44afd7] {\n outline: 1px dashed var(--eg-color-accent);\n outline-offset: -1px;\n}\n.eg-cell-merged-hidden[data-v-6b44afd7] {\n display: none !important;\n}\n.eg-cell-invalid[data-v-6b44afd7] {\n outline: 2px solid var(--eg-color-error) !important;\n outline-offset: -2px;\n z-index: 4;\n}\n.eg-cell-input[data-v-6b44afd7] {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: var(--eg-color-cell-bg);\n font-size: var(--eg-font-size);\n font-family: inherit;\n padding: 0;\n}\n.eg-row-header-cell[data-v-6b44afd7] {\n box-sizing: border-box;\n background: var(--eg-color-header-bg);\n border-bottom: 1px solid var(--eg-color-border-cell);\n border-right: 2px solid var(--eg-color-border-strong);\n text-align: center;\n font-size: 11px;\n color: var(--eg-color-text-secondary);\n cursor: pointer;\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.eg-row-resize-handle[data-v-6b44afd7] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 4px;\n cursor: row-resize;\n z-index: 5;\n}\n.eg-fill-handle[data-v-6b44afd7] {\n position: absolute;\n width: 6px;\n height: 6px;\n background: var(--eg-color-accent);\n border: 1px solid white;\n cursor: crosshair;\n z-index: 10;\n}\n.eg-context-menu[data-v-6b44afd7] {\n position: fixed;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n z-index: 9999;\n min-width: 160px;\n font-size: var(--eg-font-size);\n padding: 4px 0;\n}\n.eg-context-item[data-v-6b44afd7] {\n padding: 6px 16px;\n cursor: pointer;\n position: relative;\n}\n.eg-context-item[data-v-6b44afd7]:hover { background: var(--eg-color-header-bg);\n}\n.eg-context-separator[data-v-6b44afd7] {\n height: 1px;\n background: var(--eg-color-border-cell);\n margin: 4px 0;\n}\n.eg-context-submenu-parent[data-v-6b44afd7]::after { content: ' ▶'; float: right;\n}\n.eg-context-submenu[data-v-6b44afd7] {\n display: none;\n position: absolute;\n left: 100%;\n top: -4px;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n min-width: 160px;\n padding: 4px 0;\n z-index: 10000;\n}\n.eg-context-submenu-parent:hover .eg-context-submenu[data-v-6b44afd7] { display: block;\n}\n.eg-group-btn[data-v-6b44afd7] {\n position: absolute;\n width: 16px;\n height: 16px;\n line-height: 14px;\n text-align: center;\n font-size: 10px;\n cursor: pointer;\n background: var(--eg-color-header-group-bg);\n border: 1px solid var(--eg-color-group-border);\n border-radius: 2px;\n z-index: 5;\n user-select: none;\n}\n.eg-group-btn.collapsed[data-v-6b44afd7] { background: var(--eg-color-group-bg-collapsed);\n}\n.eg-drag-ghost[data-v-6b44afd7] {\n position: absolute;\n border: 2px dashed var(--eg-color-accent);\n pointer-events: none;\n z-index: 20;\n}\n\n/* Column drag-and-drop */\n.eg-header-cell--drag-source[data-v-6b44afd7] {\n opacity: 0.5;\n outline: 1px solid var(--eg-color-accent);\n outline-offset: -1px;\n}\n.eg-cell--drag-source[data-v-6b44afd7] {\n opacity: 0.4;\n}\n.eg-col-drag-ghost[data-v-6b44afd7] {\n position: fixed;\n padding: 3px 10px;\n background: var(--eg-color-header-bg);\n border: 1px solid var(--eg-color-accent);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n color: var(--eg-color-text);\n white-space: nowrap;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.92;\n transform: translateY(-2px);\n}\n.eg-resize-line[data-v-6b44afd7] {\n pointer-events: none;\n z-index: 9999;\n}\n\n/* Pin left separator shadow */\n.eg-frozen-col-body[data-v-6b44afd7]::after {\n content: '';\n position: absolute;\n top: 0;\n right: -4px;\n width: 4px;\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n.eg-pinned-right-body[data-v-6b44afd7] {\n position: sticky;\n right: 0;\n z-index: 10;\n background: var(--eg-color-cell-bg);\n flex-shrink: 0;\n}\n.eg-pinned-right-body[data-v-6b44afd7]::before {\n content: '';\n position: absolute;\n top: 0;\n left: -4px;\n bottom: 0;\n width: 4px;\n background: linear-gradient(to left, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n.eg-pinned-right-header[data-v-6b44afd7] {\n overflow: hidden;\n flex-shrink: 0;\n border-left: 2px solid var(--eg-color-border-strong);\n background: var(--eg-color-header-bg);\n}\n.eg-import-overlay[data-v-6b44afd7] {\n position: absolute;\n inset: 0;\n background: var(--eg-color-overlay-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n border-radius: var(--eg-radius);\n}\n.eg-import-dialog[data-v-6b44afd7] {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: 8px;\n padding: 24px 32px;\n min-width: 280px;\n box-shadow: var(--eg-shadow-dialog);\n text-align: center;\n}\n.eg-import-title[data-v-6b44afd7] {\n font-size: 14px;\n font-weight: 600;\n color: var(--eg-color-text);\n margin-bottom: 16px;\n}\n.eg-import-bar-wrap[data-v-6b44afd7] {\n height: 8px;\n background: var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n overflow: hidden;\n margin-bottom: 10px;\n}\n.eg-import-bar[data-v-6b44afd7] {\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-accent), #4caf50);\n border-radius: var(--eg-radius);\n transition: width 0.15s ease;\n}\n.eg-import-msg[data-v-6b44afd7] {\n font-size: 12px;\n color: var(--eg-color-text-secondary);\n margin-bottom: 4px;\n}\n.eg-import-pct[data-v-6b44afd7] {\n font-size: var(--eg-font-size);\n font-weight: 600;\n color: var(--eg-color-accent);\n}\n.eg-export-spinner[data-v-6b44afd7] {\n width: 32px;\n height: 32px;\n margin: 12px auto 0;\n border: 3px solid var(--eg-color-border-cell);\n border-top-color: var(--eg-color-accent);\n border-radius: 50%;\n animation: eg-spin-data-v-6b44afd7 0.8s linear infinite;\n}\n@keyframes eg-spin-data-v-6b44afd7 {\nto { transform: rotate(360deg);\n}\n}\n\n/* ===== READONLY CELL ===== */\n.eg-cell-readonly[data-v-6b44afd7] {\n background: var(--eg-color-cell-readonly);\n cursor: default;\n}\n.eg-cell-readonly.eg-cell-selected[data-v-6b44afd7] {\n background: var(--eg-color-cell-readonly-selected);\n}\n.eg-cell-readonly.eg-cell-active[data-v-6b44afd7] {\n outline-color: var(--eg-color-text-muted);\n}\n\n/* ===== SELECT DROPDOWN ===== */\n.eg-cell-select[data-v-6b44afd7] {\n cursor: pointer;\n}\n.eg-cell-select[data-v-6b44afd7]::after {\n content: '▾';\n position: absolute;\n right: 4px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--eg-color-text-muted);\n font-size: 11px;\n pointer-events: none;\n line-height: 1;\n}\n\n/* ===== CHECKBOX CELL ===== */\n.eg-cell-checkbox[data-v-6b44afd7] {\n justify-content: center;\n padding: 0 2px;\n}\n.eg-validation-tooltip[data-v-6b44afd7] {\n background: var(--eg-color-error-soft);\n border: 1px solid var(--eg-color-error);\n color: var(--eg-color-error-dark);\n font-size: 12px;\n padding: 4px 8px;\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-tooltip);\n white-space: nowrap;\n pointer-events: none;\n}\n\n/* ===== ROW STRIPE & HOVER ===== */\n.eg-row--even .eg-cell[data-v-6b44afd7]:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-stripe);\n}\n.eg-row:hover .eg-cell[data-v-6b44afd7]:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-hover);\n}\n\n/* ===== SIZE VARIANTS ===== */\n\n/* small */\n.eg-size-small .eg-cell[data-v-6b44afd7] {\n font-size: 12px;\n padding: 0 3px;\n}\n.eg-size-small .eg-cell-input[data-v-6b44afd7] {\n font-size: 12px;\n}\n.eg-size-small .eg-header-cell[data-v-6b44afd7] {\n font-size: 11px;\n}\n.eg-size-small .eg-footer-cell[data-v-6b44afd7] {\n font-size: 12px;\n}\n.eg-size-small .eg-row-header-cell[data-v-6b44afd7] {\n font-size: 10px;\n}\n.eg-size-small .eg-select-option[data-v-6b44afd7] {\n font-size: 12px;\n padding: 4px 10px;\n}\n.eg-size-small .eg-context-menu[data-v-6b44afd7],\n.eg-size-small .eg-context-item[data-v-6b44afd7] {\n font-size: 12px;\n}\n.eg-size-small .eg-context-item[data-v-6b44afd7] {\n padding: 4px 14px;\n}\n\n/* large */\n.eg-size-large .eg-cell[data-v-6b44afd7] {\n font-size: 14px;\n padding: 0 6px;\n}\n.eg-size-large .eg-cell-input[data-v-6b44afd7] {\n font-size: 14px;\n}\n.eg-size-large .eg-header-cell[data-v-6b44afd7] {\n font-size: var(--eg-font-size);\n}\n.eg-size-large .eg-footer-cell[data-v-6b44afd7] {\n font-size: 14px;\n}\n.eg-size-large .eg-row-header-cell[data-v-6b44afd7] {\n font-size: 12px;\n}\n.eg-size-large .eg-select-option[data-v-6b44afd7] {\n font-size: 14px;\n padding: 8px 14px;\n}\n.eg-size-large .eg-context-menu[data-v-6b44afd7],\n.eg-size-large .eg-context-item[data-v-6b44afd7] {\n font-size: 14px;\n}\n.eg-size-large .eg-context-item[data-v-6b44afd7] {\n padding: 8px 18px;\n}\n",map:{version:3,sources:["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/ExcelGrid.vue"],names:[],mappings:";AAkmHA;EACA;;GAEA;;EAEA,uBAAA;EACA,sEAAA;EACA,kCAAA;EACA,kCAAA;;EAEA,kBAAA;EACA,iCAAA;EACA,iCAAA;;EAEA,iCAAA;EACA,qCAAA;EACA,qCAAA;EACA,qDAAA;;EAEA,+BAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;;EAEA,oBAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;;EAEA,mBAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;EACA,sCAAA;;EAEA,wBAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;EACA,0CAAA;EACA,qCAAA;;EAEA,iBAAA;EACA,qCAAA;EACA,qCAAA;EACA,qCAAA;;EAEA,oBAAA;EACA,sDAAA;EACA,qDAAA;EACA,oDAAA;EACA,6CAAA;;EAEA,uCAAA;EACA,4DAAA;EACA,0CAAA;EACA,0CAAA;;EAEA,qBAAA;EACA,6CAAA;EACA,6CAAA;;EAEA,yCAAA;EACA,kCAAA;EACA,kCAAA;;EAEA,aAAA;EACA,sBAAA;EACA,gBAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,kCAAA;AACA;AAEA;EACA,aAAA;EACA,sBAAA;EACA,OAAA;EACA,cAAA;EACA,kBAAA;AACA;AAEA;EACA,aAAA;EACA,cAAA;EACA,iDAAA;EACA,kBAAA;EACA,WAAA;AACA;AAEA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,sBAAA;EACA,8CAAA;EACA,+CAAA;EACA,qCAAA;EACA,qCAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;AACA;AAEA,yCAAA,uCAAA;AAAA;AACA,oCAAA,2CAAA;AAAA;AAEA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,SAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,OAAA;EACA,gBAAA;AACA;;AAEA,4CAAA;AACA;EACA,4CAAA;AACA;AAEA;;;EAGA,kBAAA;AACA;AAEA;EACA,sBAAA;EACA,mDAAA;EACA,gBAAA;EACA,mBAAA;EACA,8BAAA;EACA,gBAAA;EACA,mCAAA;EACA,kBAAA;EACA,MAAA;EACA,qCAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,sBAAA;EACA,mDAAA;EACA,oDAAA;EACA,gBAAA;EACA,mBAAA;EACA,8BAAA;EACA,mCAAA;EACA,kBAAA;EACA,MAAA;EACA,mCAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;AACA;AAEA;EACA,OAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;AACA;AACA,8DAAA,aAAA;AAAA;AACA;EACA,OAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;AACA;AACA;EACA,cAAA;EACA,iCAAA;EACA,eAAA;EACA,gBAAA;AACA;AACA;EACA,cAAA;EACA,oBAAA;EACA,mBAAA;AACA;AACA;EACA,oDAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,oDAAA;AACA;AAEA;EACA,wDAAA;EACA,+CAAA;EACA,oBAAA;AACA;AAEA;EACA,0CAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA;AACA;AAEA;EACA,mDAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,mCAAA;EACA,8BAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,sBAAA;EACA,qCAAA;EACA,oDAAA;EACA,qDAAA;EACA,kBAAA;EACA,eAAA;EACA,qCAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;AACA;AAEA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,WAAA;EACA,kBAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,kCAAA;EACA,uBAAA;EACA,iBAAA;EACA,WAAA;AACA;AAEA;EACA,eAAA;EACA,mCAAA;EACA,wCAAA;EACA,+BAAA;EACA,qCAAA;EACA,aAAA;EACA,gBAAA;EACA,8BAAA;EACA,cAAA;AACA;AAEA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA,0CAAA,qCAAA;AAAA;AAEA;EACA,WAAA;EACA,uCAAA;EACA,aAAA;AACA;AAEA,qDAAA,aAAA,EAAA,YAAA;AAAA;AAEA;EACA,aAAA;EACA,kBAAA;EACA,UAAA;EACA,SAAA;EACA,mCAAA;EACA,wCAAA;EACA,+BAAA;EACA,qCAAA;EACA,gBAAA;EACA,cAAA;EACA,cAAA;AACA;AAEA,wEAAA,cAAA;AAAA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;EACA,eAAA;EACA,2CAAA;EACA,8CAAA;EACA,kBAAA;EACA,UAAA;EACA,iBAAA;AACA;AAEA,2CAAA,8CAAA;AAAA;AAEA;EACA,kBAAA;EACA,yCAAA;EACA,oBAAA;EACA,WAAA;AACA;;AAEA,yBAAA;AACA;EACA,YAAA;EACA,yCAAA;EACA,oBAAA;AACA;AACA;EACA,YAAA;AACA;AACA;EACA,eAAA;EACA,iBAAA;EACA,qCAAA;EACA,wCAAA;EACA,+BAAA;EACA,qCAAA;EACA,qCAAA;EACA,gBAAA;EACA,2BAAA;EACA,mBAAA;EACA,oBAAA;EACA,aAAA;EACA,aAAA;EACA,2BAAA;AACA;AAEA;EACA,oBAAA;EACA,aAAA;AACA;;AAEA,8BAAA;AACA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,iFAAA;EACA,oBAAA;AACA;AAEA;EACA,gBAAA;EACA,QAAA;EACA,WAAA;EACA,mCAAA;EACA,cAAA;AACA;AAEA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,UAAA;EACA,SAAA;EACA,UAAA;EACA,gFAAA;EACA,oBAAA;AACA;AAEA;EACA,gBAAA;EACA,cAAA;EACA,oDAAA;EACA,qCAAA;AACA;AAEA;EACA,kBAAA;EACA,QAAA;EACA,sCAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,+BAAA;AACA;AAEA;EACA,mCAAA;EACA,6CAAA;EACA,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,mCAAA;EACA,kBAAA;AACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,2BAAA;EACA,mBAAA;AACA;AAEA;EACA,WAAA;EACA,uCAAA;EACA,+BAAA;EACA,gBAAA;EACA,mBAAA;AACA;AAEA;EACA,YAAA;EACA,sEAAA;EACA,+BAAA;EACA,4BAAA;AACA;AAEA;EACA,eAAA;EACA,qCAAA;EACA,kBAAA;AACA;AAEA;EACA,8BAAA;EACA,gBAAA;EACA,6BAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,6CAAA;EACA,wCAAA;EACA,kBAAA;EACA,uDAAA;AACA;AACA;AACA,KAAA,yBAAA;AAAA;AACA;;AAEA,8BAAA;AACA;EACA,yCAAA;EACA,eAAA;AACA;AACA;EACA,kDAAA;AACA;AACA;EACA,yCAAA;AACA;;AAEA,gCAAA;AACA;EACA,eAAA;AACA;AACA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,2BAAA;EACA,iCAAA;EACA,eAAA;EACA,oBAAA;EACA,cAAA;AACA;;AAEA,8BAAA;AACA;EACA,uBAAA;EACA,cAAA;AACA;AACA;EACA,sCAAA;EACA,uCAAA;EACA,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,+BAAA;EACA,oCAAA;EACA,mBAAA;EACA,oBAAA;AACA;;AAEA,mCAAA;AACA;EACA,sCAAA;AACA;AACA;EACA,qCAAA;AACA;;AAEA,8BAAA;;AAEA,UAAA;AACA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;EACA,iBAAA;AACA;AACA;;EAEA,eAAA;AACA;AACA;EACA,iBAAA;AACA;;AAEA,UAAA;AACA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,8BAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;AACA;AACA;EACA,eAAA;EACA,iBAAA;AACA;AACA;;EAEA,eAAA;AACA;AACA;EACA,iBAAA;AACA",file:"ExcelGrid.vue",sourcesContent:["<template>\n <div\n class=\"eg-wrapper\"\n :class=\"'eg-size-' + size\"\n :style=\"wrapperStyle\"\n tabindex=\"0\"\n @keydown=\"onKeyDown\"\n @keypress=\"onKeyPress\"\n ref=\"wrapper\"\n >\n \x3c!-- Context menu --\x3e\n <div\n v-if=\"contextMenu.visible\"\n class=\"eg-context-menu\"\n :style=\"{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }\"\n @click.stop\n >\n <div class=\"eg-context-item\" @click=\"ctxCopy\">{{ t.copy }}</div>\n <div class=\"eg-context-item\" @click=\"ctxCut\">{{ t.cut }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPaste\">{{ t.paste }}</div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item eg-context-submenu-parent\">\n {{ t.pasteSpecial }}\n <div class=\"eg-context-submenu\">\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('all')\">{{ t.pasteAll }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('values')\">{{ t.pasteValues }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('formats')\">{{ t.pasteFormats }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('all', true)\">{{ t.transpose }}</div>\n </div>\n </div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxMerge\">{{ t.mergeCells }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnmerge\">{{ t.unmergeCells }}</div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxHideRow\">{{ t.hideRows }}</div>\n <div class=\"eg-context-item\" @click=\"ctxHideColumn\">{{ t.hideColumns }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnhideRows\">{{ t.unhideRows }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnhideColumns\">{{ t.unhideColumns }}</div>\n <template v-if=\"contextMenu.row < 0 && contextMenu.col >= 0\">\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxPinLeft\">{{ t.pinLeft }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPinRight\">{{ t.pinRight }}</div>\n <div class=\"eg-context-item\" v-if=\"isColPinned(contextMenu.col)\" @click=\"ctxUnpin\">{{ t.unpin }}</div>\n </template>\n </div>\n\n \x3c!-- Scroll container --\x3e\n <div class=\"eg-container\" ref=\"container\" @scroll=\"onScroll\" @click=\"hideContextMenu\">\n\n \x3c!-- ===== HEADER AREA ===== --\x3e\n <div class=\"eg-header-area\" :style=\"headerAreaStyle\">\n\n \x3c!-- Corner cell --\x3e\n <div\n class=\"eg-corner\"\n :style=\"cornerStyle\"\n @click=\"selectAll\"\n ></div>\n\n \x3c!-- Row group outline gutter (left) --\x3e\n <div v-if=\"rowGroups.length\" class=\"eg-row-outline-gutter\" :style=\"rowOutlineGutterStyle\"></div>\n\n \x3c!-- Frozen columns header --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-header\" :style=\"frozenColHeaderStyle\">\n <div :style=\"{ position: 'relative', height: (headerRowHeight * headerDepth) + 'px' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellVisible(cell, rowIdx, true)\">\n <div\n :key=\"'fh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"getHeaderCellStyle(cell, rowIdx, true)\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Scrollable columns header --\x3e\n <div class=\"eg-scroll-col-header\" ref=\"scrollColHeader\" :style=\"scrollColHeaderStyle\">\n <div class=\"eg-scroll-col-header-inner\" :style=\"{ width: scrollContentWidth + 'px', height: (headerRowHeight * headerDepth) + 'px', position: 'relative' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellVisible(cell, rowIdx, false)\">\n <div\n :key=\"'sh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"getHeaderCellStyle(cell, rowIdx, false)\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Pinned Right columns header --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-header\" :style=\"pinnedRightHeaderStyle\">\n <div :style=\"{ position: 'relative', height: (headerRowHeight * headerDepth) + 'px' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellInZone(cell, rowIdx, 'right')\">\n <div\n :key=\"'prh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"getHeaderCellStyleForZone(cell, rowIdx, 'right')\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- ===== BODY AREA ===== --\x3e\n <div class=\"eg-body-area\" :style=\"bodyAreaStyle\">\n\n \x3c!-- Row number header column --\x3e\n <div class=\"eg-row-header-col\" :style=\"rowHeaderColStyle\">\n \x3c!-- Scrollable row headers --\x3e\n <div class=\"eg-scroll-row-headers\" :style=\"scrollRowHeadersStyle\" ref=\"scrollRowHeaders\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div\n v-if=\"!isRowHidden(ri)\"\n :key=\"'srh-' + ri\"\n class=\"eg-row-header-cell\"\n :style=\"getRowHeaderStyle(ri)\"\n @mousedown=\"onRowHeaderMouseDown($event, ri)\"\n @contextmenu.prevent=\"onRowContextMenu($event, ri)\"\n >\n {{ ri + 1 }}\n <div class=\"eg-row-resize-handle\" @mousedown.stop=\"startRowResize($event, ri)\"></div>\n </div>\n </template>\n </div>\n </div>\n </div>\n </div>\n\n \x3c!-- Row group outline gutter (left side of rows) --\x3e\n <div v-if=\"rowGroups.length\" class=\"eg-row-outline-col\" :style=\"rowOutlineColStyle\">\n <template v-for=\"group in rowGroups\">\n <div\n :key=\"'rg-' + group.startIndex + '-' + group.endIndex\"\n class=\"eg-group-btn\"\n :class=\"{ collapsed: isGroupCollapsed(group) }\"\n :style=\"getRowGroupBtnStyle(group)\"\n @click=\"toggleGroup(group)\"\n >{{ isGroupCollapsed(group) ? '+' : '−' }}</div>\n </template>\n </div>\n\n \x3c!-- Main scroll body --\x3e\n <div class=\"eg-scroll-body\" ref=\"scrollBody\" :style=\"scrollBodyStyle\" @scroll=\"onBodyScroll\">\n <div class=\"eg-scroll-body-inner\" :style=\"{ width: scrollContentWidth + 'px', height: totalVirtualHeight + 'px', position: 'relative' }\">\n\n \x3c!-- Pinned left column body --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-body\" :style=\"frozenColBodyStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div v-if=\"!isRowHidden(ri)\" :key=\"'fc-row-' + ri\" class=\"eg-row\" :class=\"{ 'eg-row--even': ri % 2 === 0 }\" :style=\"getRowStyle(ri)\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnPinnedLeft(ci) && !isColHidden(ci)\">\n <div\n :key=\"'fc-cell-' + ri + '-' + ci\"\n class=\"eg-cell\"\n :data-fi=\"ci\"\n :class=\"getCellClasses(ri, ci)\"\n :style=\"getCellStyle(ri, ci)\"\n @mousedown=\"onCellMouseDown($event, ri, ci)\"\n @mouseover=\"onCellMouseOver($event, ri, ci)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, ci)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, ci)\"\n >\n <div v-if=\"isMergedAway(ri, ci)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, ci)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input v-else ref=\"editInput\" class=\"eg-cell-input\" v-model=\"editValue\" @blur=\"commitEdit\" @keydown.stop=\"onEditKeyDown\" />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, ci)\"\n :disabled=\"!isCellEditable(ri, ci)\"\n @change=\"(v) => setCheckboxValue(ri, ci, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(ci, getCellValue(ri, ci)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Main data cells --\x3e\n <div class=\"eg-main-cells\" :style=\"mainCellsStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative', width: scrollableContentWidth + 'px' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div\n v-if=\"!isRowHidden(ri)\"\n :key=\"'row-' + ri\"\n class=\"eg-row\"\n :class=\"{ 'eg-row--even': ri % 2 === 0 }\"\n :style=\"getRowStyle(ri)\"\n :data-row=\"ri\"\n >\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnScrollable(ci) && !isColHidden(ci)\">\n <div\n :key=\"'cell-' + ri + '-' + ci\"\n class=\"eg-cell\"\n :data-fi=\"ci\"\n :class=\"getCellClasses(ri, ci)\"\n :style=\"getCellStyle(ri, ci)\"\n @mousedown=\"onCellMouseDown($event, ri, ci)\"\n @mouseover=\"onCellMouseOver($event, ri, ci)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, ci)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, ci)\"\n >\n <div v-if=\"isMergedAway(ri, ci)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, ci)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input\n v-else\n ref=\"editInput\"\n class=\"eg-cell-input\"\n v-model=\"editValue\"\n @blur=\"commitEdit\"\n @keydown.stop=\"onEditKeyDown\"\n />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, ci)\"\n :disabled=\"!isCellEditable(ri, ci)\"\n @change=\"(v) => setCheckboxValue(ri, ci, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(ci, getCellValue(ri, ci)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Pinned Right column body --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-body\" :style=\"pinnedRightBodyStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div v-if=\"!isRowHidden(ri)\" :key=\"'pr-row-' + ri\" class=\"eg-row\" :class=\"{ 'eg-row--even': ri % 2 === 0 }\" :style=\"getRowStyle(ri)\">\n <template v-for=\"col in pinnedRightCols\">\n <div\n :key=\"'pr-cell-' + ri + '-' + col._flatIndex\"\n class=\"eg-cell\"\n :data-fi=\"col._flatIndex\"\n :class=\"getCellClasses(ri, col._flatIndex)\"\n :style=\"getCellStyle(ri, col._flatIndex)\"\n @mousedown=\"onCellMouseDown($event, ri, col._flatIndex)\"\n @mouseover=\"onCellMouseOver($event, ri, col._flatIndex)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, col._flatIndex)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, col._flatIndex)\"\n >\n <div v-if=\"isMergedAway(ri, col._flatIndex)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, col._flatIndex)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input v-else ref=\"editInput\" class=\"eg-cell-input\" v-model=\"editValue\" @blur=\"commitEdit\" @keydown.stop=\"onEditKeyDown\" />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, col._flatIndex)\"\n :disabled=\"!isCellEditable(ri, col._flatIndex)\"\n @change=\"(v) => setCheckboxValue(ri, col._flatIndex, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Fill handle (shown on primary range) --\x3e\n <div\n v-if=\"fillHandleVisible\"\n class=\"eg-fill-handle\"\n :style=\"fillHandleStyle\"\n @mousedown.stop=\"startFillDrag\"\n ></div>\n\n \x3c!-- Drag move ghost border --\x3e\n <div\n v-if=\"dragMove.active\"\n class=\"eg-drag-ghost\"\n :style=\"dragGhostStyle\"\n ></div>\n </div>\n </div>\n\n \x3c!-- Column group outline row (top, above body) --\x3e\n <div v-if=\"colGroups.length\" class=\"eg-col-outline-row\" :style=\"colOutlineRowStyle\">\n <template v-for=\"group in colGroups\">\n <div\n :key=\"'cg-' + group.startIndex + '-' + group.endIndex\"\n class=\"eg-group-btn\"\n :class=\"{ collapsed: isGroupCollapsed(group) }\"\n :style=\"getColGroupBtnStyle(group)\"\n @click=\"toggleGroup(group)\"\n >{{ isGroupCollapsed(group) ? '+' : '−' }}</div>\n </template>\n </div>\n\n </div>\x3c!-- end body-area --\x3e\n\n \x3c!-- ===== FOOTER AREA (column totals) ===== --\x3e\n <div v-if=\"hasFooter\" class=\"eg-footer-area\" :style=\"footerAreaStyle\">\n\n \x3c!-- \"Jami\" label cell (mirrors corner cell) --\x3e\n <div class=\"eg-footer-label\" :style=\"footerLabelStyle\">{{ t.total }}</div>\n\n \x3c!-- Frozen columns footer --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-footer\" :style=\"frozenColFooterStyle\">\n <div :style=\"{ position: 'relative', height: footerRowHeight + 'px' }\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnPinnedLeft(ci) && !isColHidden(ci)\">\n <div :key=\"'ff-' + ci\" class=\"eg-footer-cell\" :style=\"getFooterCellStyle(ci)\">\n {{ getColumnTotalDisplay(ci) }}\n </div>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Scrollable footer (horizontally synced with body via scrollFooter ref) --\x3e\n <div class=\"eg-scroll-col-footer\" ref=\"scrollFooter\" :style=\"scrollColHeaderStyle\">\n <div class=\"eg-scroll-col-footer-inner\" :style=\"{ width: scrollContentWidth + 'px', height: footerRowHeight + 'px', position: 'relative' }\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnScrollable(ci) && !isColHidden(ci)\">\n <div :key=\"'sf-' + ci\" class=\"eg-footer-cell\" :style=\"getFooterCellStyle(ci)\">\n {{ getColumnTotalDisplay(ci) }}\n </div>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Pinned Right columns footer --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-footer\" :style=\"pinnedRightFooterStyle\">\n <div :style=\"{ position: 'relative', height: footerRowHeight + 'px' }\">\n <div\n v-for=\"col in pinnedRightCols\"\n :key=\"'prf-' + col._flatIndex\"\n class=\"eg-footer-cell\"\n :style=\"getFooterCellStyle(col._flatIndex)\"\n >{{ getColumnTotalDisplay(col._flatIndex) }}</div>\n </div>\n </div>\n </div>\x3c!-- end footer-area --\x3e\n\n \x3c!-- Resize indicator line --\x3e\n <div v-if=\"resizing.active\" class=\"eg-resize-line\" :style=\"resizeLineStyle\"></div>\n </div>\x3c!-- end container --\x3e\n\n \x3c!-- Import progress overlay --\x3e\n <div v-if=\"importState.active\" class=\"eg-import-overlay\">\n <div class=\"eg-import-dialog\">\n <div class=\"eg-import-title\">Fayl import qilinmoqda</div>\n <div class=\"eg-import-bar-wrap\">\n <div class=\"eg-import-bar\" :style=\"{ width: importState.percent + '%' }\"></div>\n </div>\n <div class=\"eg-import-msg\">{{ importState.message }}</div>\n <div class=\"eg-import-pct\">{{ importState.percent }}%</div>\n </div>\n </div>\n\n \x3c!-- Export progress overlay --\x3e\n <div v-if=\"exportState.active\" class=\"eg-import-overlay\">\n <div class=\"eg-import-dialog\">\n <div class=\"eg-import-title\">Fayl export qilinmoqda...</div>\n <div class=\"eg-export-spinner\"></div>\n </div>\n </div>\n\n \x3c!-- Select dropdown overlay (flat select) --\x3e\n <eg-select\n v-if=\"selectDropdown && !selectDropdown.tree\"\n ref=\"selectDropdownComp\"\n :value=\"selectDropdown.currentValue\"\n :options=\"selectDropdown.rawOptions\"\n :enable-search=\"selectDropdown.enableSearch\"\n :trigger-rect=\"selectDropdown.rect\"\n :dropdown-only=\"true\"\n @select=\"onComponentSelect\"\n @close=\"closeSelectDropdown\"\n />\n \x3c!-- Tree select dropdown overlay --\x3e\n <eg-tree-select\n v-if=\"selectDropdown && selectDropdown.tree\"\n ref=\"selectDropdownComp\"\n :value=\"selectDropdown.currentValue\"\n :options=\"selectDropdown.rawOptions\"\n :value-key=\"selectDropdown.keys.valueKey\"\n :label-key=\"selectDropdown.keys.labelKey\"\n :children-key=\"selectDropdown.keys.childrenKey\"\n :enable-search=\"selectDropdown.enableSearch\"\n :trigger-rect=\"selectDropdown.rect\"\n :dropdown-only=\"true\"\n @select=\"onComponentSelect\"\n @close=\"closeSelectDropdown\"\n />\n\n \x3c!-- Validation error tooltip (cellValidator) --\x3e\n <div\n v-if=\"invalidCell && invalidCell.rect\"\n class=\"eg-validation-tooltip\"\n :style=\"invalidTooltipStyle\"\n >{{ invalidCell.message }}</div>\n\n \x3c!-- Column drag ghost (follows mouse — position updated via direct DOM in handleColDragMove) --\x3e\n <div\n v-if=\"colDrag.active\"\n ref=\"colDragGhost\"\n class=\"eg-col-drag-ghost\"\n :style=\"{ left: (colDrag.startX + 16) + 'px', top: (colDrag.startY - 14) + 'px' }\"\n >{{ colDrag.ghostLabel }}</div>\n\n </div>\n</template>\n\n<script>\nimport {\n normalizeRange, isCellInRange, isCellInAnyRange,\n buildRange, singleCellRange, getPrimaryRange\n} from '../utils/selection.js'\nimport { flattenColumns, buildHeaderRows, columnTreeDepth, moveColumnNodeInTree } from '../utils/headerTree.js'\nimport { calcVisibleRows, buildCumulativeHeights, findVisibleRange, getRowTop, getRowHeight } from '../utils/virtualScroll.js'\nimport { generateFillValues } from '../utils/fillHandle.js'\nimport {\n matrixToTSV, tsvToMatrix, extractMatrix, transposeMatrix, applyMatrix, tileMatrix\n} from '../utils/clipboard.js'\nimport {\n mergeHasConflict, findMergeAtCell, isMergeAnchor, addMerge,\n removeMergeAt, resolveMergeAnchor\n} from '../utils/merge.js'\nimport {\n addGroup, removeGroup, toggleGroupCollapse, isGroupCollapsed as _isGroupCollapsed,\n getCollapsedRowIndices, getCollapsedColIndices\n} from '../utils/outline.js'\nimport { exportToExcel as _exportToExcel } from '../utils/excelExport.js'\nimport { importFromFile as _importFromFile } from '../utils/excelImport.js'\nimport { createExcelImportWorker, createExcelExportWorker } from '../utils/workerFactory'\nimport { getMessages } from '../utils/i18n.js'\nimport EgCheckbox from './EgCheckbox.vue'\nimport anime from 'animejs'\nimport EgSelect from './EgSelect.vue'\nimport EgTreeSelect from './EgTreeSelect.vue'\n\nconst SIZE_CONFIG = {\n small: { row: 22, header: 24, footer: 24 },\n middle: { row: 28, header: 28, footer: 28 },\n large: { row: 36, header: 36, footer: 36 }\n}\nconst ROW_HEADER_WIDTH = 50\nconst DEFAULT_COL_WIDTH = 100\nconst OUTLINE_GUTTER = 20\n\nexport default {\n name: 'ExcelGrid',\n\n components: { EgCheckbox, EgSelect, EgTreeSelect },\n\n // v-model → :data + @input\n model: { prop: 'data', event: 'input' },\n\n props: {\n /** Array of row objects keyed by columns[].key */\n data: { type: Array, default: () => [] },\n\n /** Column definitions (may be nested via children[]) */\n columns: { type: Array, default: () => [] },\n\n /** Indices of hidden leaf columns */\n hiddenColumns: { type: Array, default: () => [] },\n\n /** Indices of hidden rows */\n hiddenRows: { type: Array, default: () => [] },\n\n /** Initial merge descriptors [{ startRow, startCol, endRow, endCol }] */\n merges: { type: Array, default: () => [] },\n\n /** Collapsed group descriptors [{ type, startIndex, endIndex }] */\n collapsedGroups: { type: Array, default: () => [] },\n\n /** Height of the grid container in px */\n height: { type: Number, default: 400 },\n\n /** Width of the grid container (px or 'auto') */\n width: { type: [Number, String], default: '100%' },\n\n /**\n * Called before drag-drop: (sourceRange, targetRange) => bool\n * Return false to cancel the drop.\n */\n beforeDrop: { type: Function, default: null },\n\n /**\n * UI locale for the context menu.\n * Supported: 'en' | 'ru' | 'uz' | 'uz-Cyrl'\n */\n locale: { type: String, default: 'en' },\n\n /**\n * Pinned columns map: { [colKey]: 'left' | 'right' }\n * Pinned-left columns render as a fixed zone on the left.\n * Pinned-right columns render as a fixed zone on the right.\n * Emit 'update:pinnedColumns' to support .sync modifier.\n */\n pinnedColumns: { type: Object, default: () => ({}) },\n\n /**\n * Dynamic cell editability: (row, rowIndex, col, colIndex) => boolean\n * Overrides column-level editable when provided.\n * row = plain data object, col = column definition.\n */\n cellEditable: { type: Function, default: null },\n\n /**\n * Cell value validation: (value, row, rowIndex, col, colIndex) => boolean\n * Return false to reject the write — the cell keeps its old value and\n * an error tooltip is shown anchored to that cell.\n */\n cellValidator: { type: Function, default: null },\n\n /**\n * Error tooltip text for a rejected value.\n * Function: (value, row, rowIndex, col, colIndex) => string\n * String: same message for every rejected cell.\n * Default: locale's \"invalidValue\" message.\n */\n cellValidationMessage: { type: [Function, String], default: null },\n\n /**\n * Bulk-write strictness (paste / fill handle / Delete).\n * false (default): invalid cells in the affected range are skipped,\n * the rest of the operation still applies.\n * true: if ANY cell in the affected range fails validation, the whole\n * bulk operation is rejected — nothing is written.\n */\n strictBulkValidation: { type: Boolean, default: false },\n\n /** Visual size of the grid. Affects row/header height and font sizes. */\n size: { type: String, default: 'middle' },\n\n /** Auto-fit all column widths to content (same as double-clicking each resize handle). Re-applies on data/columns change. */\n autoWidth: { type: Boolean, default: false },\n\n /**\n * Allow columns to be reordered by dragging their headers.\n * On drop, emits 'update:columns' (compatible with .sync) and 'column-reorder'.\n */\n columnDraggable: { type: Boolean, default: true }\n },\n\n data() {\n return {\n // Selection\n activeCell: { row: 0, col: 0 },\n selectionRanges: [], // [{ startRow, startCol, endRow, endCol }]\n isMouseDown: false,\n mouseDownRange: null,\n isCtrlDrag: false,\n\n // Edit\n editingCell: null, // { row, col }\n editValue: '',\n editOriginalValue: '',\n\n // Scroll\n scrollTop: 0,\n scrollLeft: 0,\n headerViewportWidth: null,\n\n // Virtual scroll\n virtualStartIndex: 0,\n virtualEndIndex: 0,\n virtualOffsetTop: 0,\n totalVirtualHeight: 0,\n\n // Column widths (flat index → px)\n colWidths: {},\n\n // Row heights (row index → px)\n rowHeights: {},\n\n // Import/export progress\n importState: { active: false, percent: 0, message: '' },\n exportState: { active: false },\n\n resizing: {\n active: false,\n type: null, // 'col' | 'row'\n index: -1,\n startX: 0,\n startY: 0,\n startSize: 0,\n currentPos: 0\n },\n\n // Fill handle\n fillDrag: {\n active: false,\n sourceRange: null,\n currentRow: -1,\n currentCol: -1\n },\n\n // Drag-move\n dragMove: {\n active: false,\n sourceRange: null,\n startX: 0,\n startY: 0,\n targetRow: -1,\n targetCol: -1,\n copyMode: false\n },\n\n // Clipboard (internal)\n clipboardMatrix: null,\n clipboardRange: null,\n clipboardMode: null, // 'copy' | 'cut'\n\n // Context menu\n contextMenu: { visible: false, x: 0, y: 0, row: -1, col: -1 },\n\n // Select dropdown\n selectDropdown: null, // { row, col, options, currentValue, rect }\n\n // Cell value validation (cellValidator)\n invalidCell: null, // { row, col, message, rect }\n\n // Merges (controlled via prop + update:merges)\n internalMerges: [],\n\n // Groups\n internalGroups: [], // [{ type, startIndex, endIndex }]\n internalCollapsedGroups: [],\n\n // Header\n headerDepth: 1,\n headerRows: [],\n\n // Leaf columns cache\n leafCols: [],\n\n // Footer column totals (flat col index → number | null)\n columnTotals: {},\n\n // Column drag-and-drop state\n colDrag: {\n pending: false, // mousedown received, waiting for movement threshold\n active: false, // drag in progress\n sourceFirstLeaf: -1, // first leaf flat-index of the dragged node\n sourceLeafCount: 1, // number of leaves in the dragged node (1=leaf, N=group)\n dropIndex: -1, // insert-before flat index (0..N)\n startX: 0,\n startY: 0,\n ghostLabel: ''\n },\n }\n },\n\n computed: {\n t() { return getMessages(this.locale) },\n\n pinnedLeftSet() {\n const s = new Set()\n this.leafCols.forEach(col => { if (this.pinnedColumns[col.key] === 'left') s.add(col._flatIndex) })\n return s\n },\n\n pinnedRightSet() {\n const s = new Set()\n this.leafCols.forEach(col => { if (this.pinnedColumns[col.key] === 'right') s.add(col._flatIndex) })\n return s\n },\n\n pinnedLeftCols() { return this.leafCols.filter(col => this.pinnedLeftSet.has(col._flatIndex)) },\n pinnedRightCols() { return this.leafCols.filter(col => this.pinnedRightSet.has(col._flatIndex)) },\n\n hasPinnedLeft() { return this.pinnedLeftSet.size > 0 },\n hasPinnedRight() { return this.pinnedRightSet.size > 0 },\n\n hasFooter() { return this.leafCols.some(col => col.showTotal) },\n\n pinnedLeftWidth() {\n let w = 0\n for (const col of this.pinnedLeftCols) {\n if (!this.isColHidden(col._flatIndex)) w += this.getColW(col._flatIndex)\n }\n return w\n },\n\n pinnedRightWidth() {\n let w = 0\n for (const col of this.pinnedRightCols) {\n if (!this.isColHidden(col._flatIndex)) w += this.getColW(col._flatIndex)\n }\n return w\n },\n\n totalRows() { return this.data.length },\n\n _sizeConf() { return SIZE_CONFIG[this.size] || SIZE_CONFIG.middle },\n _rowH() { return this._sizeConf.row },\n _headerRowH() { return this._sizeConf.header },\n _footerRowH() { return this._sizeConf.footer },\n\n headerRowHeight() { return this._headerRowH },\n footerRowHeight() { return this._footerRowH },\n\n // Pre-built cumulative height array — O(n) once, then cached by Vue.\n // findVisibleRange() uses binary search against this cached array → O(log n) per scroll.\n // Invalidated only when row count, custom heights, or hidden rows change.\n cumulativeHeights() {\n return buildCumulativeHeights(this.totalRows, this._rowH, this.rowHeights, this.hiddenRowSet)\n },\n\n hiddenColSet() { return new Set(this.hiddenColumns) },\n\n hiddenRowSet() {\n const s = new Set(this.hiddenRows)\n // Also add rows hidden by collapsed row groups\n const collapsed = getCollapsedRowIndices(this.internalGroups, this.internalCollapsedGroups)\n collapsed.forEach(i => s.add(i))\n return s\n },\n\n hiddenColFromGroupSet() {\n return getCollapsedColIndices(this.internalGroups, this.internalCollapsedGroups)\n },\n\n effectiveHiddenColSet() {\n const s = new Set(this.hiddenColSet)\n this.hiddenColFromGroupSet.forEach(i => s.add(i))\n return s\n },\n\n rowGroups() { return this.internalGroups.filter(g => g.type === 'row') },\n colGroups() { return this.internalGroups.filter(g => g.type === 'column') },\n\n visibleRowRange() {\n const rows = []\n for (let i = this.virtualStartIndex; i <= this.virtualEndIndex; i++) rows.push(i)\n return rows\n },\n\n primaryRange() {\n return getPrimaryRange(this.selectionRanges, this.activeCell)\n },\n\n fillHandleVisible() {\n return this.primaryRange && !this.editingCell\n },\n\n fillHandleStyle() {\n if (!this.primaryRange) return {}\n const r = normalizeRange(this.primaryRange)\n // O(1) lookup via cumulativeHeights instead of O(endRow) getRowTop loop\n const bottom = this.cumulativeHeights[r.endRow + 1] || 0\n const right = this.getColLeft(r.endCol + 1)\n return {\n position: 'absolute',\n width: '6px',\n height: '6px',\n background: 'var(--eg-color-accent)',\n border: '1px solid white',\n bottom: (this.totalVirtualHeight - bottom + 1) + 'px',\n right: (this.scrollContentWidth - right + 1) + 'px',\n cursor: 'crosshair',\n zIndex: 10\n }\n },\n\n\n invalidTooltipStyle() {\n if (!this.invalidCell || !this.invalidCell.rect) return {}\n const { rect } = this.invalidCell\n return {\n position: 'fixed',\n top: (rect.bottom + 4) + 'px',\n left: rect.left + 'px',\n zIndex: 9999\n }\n },\n\n dragGhostStyle() {\n if (!this.dragMove.active || this.dragMove.targetRow < 0) return {}\n const r = normalizeRange(this.dragMove.sourceRange)\n const rows = r.endRow - r.startRow\n const cols = r.endCol - r.startCol\n // O(1) lookup via cumulativeHeights instead of O(targetRow) getRowTop loop\n const top = this.cumulativeHeights[this.dragMove.targetRow] || 0\n const left = this.getColLeft(this.dragMove.targetCol)\n const width = this.getRangeWidth(this.dragMove.targetCol, this.dragMove.targetCol + cols)\n const height = this.getRangeHeight(this.dragMove.targetRow, this.dragMove.targetRow + rows)\n return {\n position: 'absolute',\n top: top + 'px',\n left: left + 'px',\n width: width + 'px',\n height: height + 'px',\n border: '2px dashed #1a73e8',\n pointerEvents: 'none',\n zIndex: 20\n }\n },\n\n wrapperStyle() {\n return {\n width: typeof this.width === 'number' ? this.width + 'px' : this.width,\n height: this.height + 'px',\n position: 'relative',\n outline: 'none',\n userSelect: 'none'\n }\n },\n\n headerAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n position: 'sticky',\n top: 0,\n zIndex: 30,\n background: 'var(--eg-color-header-bg)'\n }\n },\n\n cornerStyle() {\n const outlineW = this.rowGroups.length ? OUTLINE_GUTTER : 0\n return {\n width: (ROW_HEADER_WIDTH + outlineW) + 'px',\n minWidth: (ROW_HEADER_WIDTH + outlineW) + 'px',\n height: (this._headerRowH * this.headerDepth) + 'px',\n background: 'var(--eg-color-header-bg)',\n borderRight: '1px solid var(--eg-color-border)',\n borderBottom: '1px solid var(--eg-color-border)',\n boxSizing: 'border-box',\n flexShrink: 0\n }\n },\n\n rowOutlineGutterStyle() {\n return { width: OUTLINE_GUTTER + 'px', flexShrink: 0 }\n },\n\n frozenColHeaderStyle() {\n const w = this.getFrozenWidth()\n return {\n width: w + 'px',\n minWidth: w + 'px',\n overflow: 'hidden',\n flexShrink: 0\n }\n },\n\n scrollColHeaderStyle() {\n // Once measured, lock the header to the body's exact clientWidth (flex: 0 0 <px>)\n // instead of growing independently via flex:1 — this guarantees identical\n // scrollWidth-clientWidth (max scrollLeft) on both, so syncing scrollLeft never clamps\n // one before the other. (padding-right can't do this: clientWidth always includes\n // padding, so padding never actually shrinks it.)\n if (this.headerViewportWidth != null) {\n return { flex: '0 0 ' + this.headerViewportWidth + 'px', overflow: 'hidden' }\n }\n return { flex: 1, overflow: 'hidden' }\n },\n\n bodyAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n flex: 1,\n position: 'relative'\n }\n },\n\n rowHeaderColStyle() {\n return {\n width: ROW_HEADER_WIDTH + 'px',\n minWidth: ROW_HEADER_WIDTH + 'px',\n flexShrink: 0,\n display: 'flex',\n flexDirection: 'column',\n position: 'sticky',\n left: 0,\n zIndex: 20,\n background: 'var(--eg-color-header-bg)'\n }\n },\n\n rowOutlineColStyle() {\n return {\n width: OUTLINE_GUTTER + 'px',\n minWidth: OUTLINE_GUTTER + 'px',\n flexShrink: 0,\n position: 'relative',\n background: 'var(--eg-color-cell-bg)'\n }\n },\n\n scrollBodyStyle() {\n return {\n flex: 1,\n overflow: 'auto',\n position: 'relative',\n overflowAnchor: 'none' /* prevent Chrome scroll anchoring from fighting virtual scroll translateY */\n }\n },\n\n frozenColBodyStyle() {\n const w = this.getFrozenWidth()\n return {\n position: 'sticky',\n left: 0,\n width: w + 'px',\n zIndex: 10,\n background: 'white',\n overflow: 'hidden'\n }\n },\n\n mainCellsStyle() {\n const left = this.getFrozenWidth()\n return {\n position: 'absolute',\n left: left + 'px',\n top: 0,\n bottom: 0\n }\n },\n\n scrollContentWidth() {\n let w = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColHidden(i) && !this.pinnedRightSet.has(i)) w += this.getColW(i)\n }\n // Extra right padding so pinned-right zone doesn't cover the last scrollable column\n if (this.hasPinnedRight) w += this.pinnedRightWidth\n return w\n },\n\n scrollableContentWidth() {\n let w = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColHidden(i) && this.isColumnScrollable(i)) w += this.getColW(i)\n }\n return w\n },\n\n pinnedRightBodyStyle() {\n return {\n position: 'sticky',\n right: 0,\n width: this.pinnedRightWidth + 'px',\n zIndex: 10,\n background: 'white',\n flexShrink: 0\n }\n },\n\n pinnedRightHeaderStyle() {\n return {\n width: this.pinnedRightWidth + 'px',\n minWidth: this.pinnedRightWidth + 'px',\n overflow: 'hidden',\n flexShrink: 0,\n borderLeft: '1px solid var(--eg-color-border)'\n }\n },\n\n scrollRowHeadersStyle() {\n return { flex: 1, overflow: 'hidden', position: 'relative', overflowAnchor: 'none' }\n },\n\n footerAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n position: 'sticky',\n bottom: 0,\n zIndex: 30,\n background: 'var(--eg-color-footer-bg)',\n boxShadow: '0 -2px 0 0 var(--eg-color-border-strong)'\n }\n },\n\n footerLabelStyle() {\n const outlineW = this.rowGroups.length ? OUTLINE_GUTTER : 0\n return {\n width: (ROW_HEADER_WIDTH + outlineW) + 'px',\n minWidth: (ROW_HEADER_WIDTH + outlineW) + 'px',\n height: this._footerRowH + 'px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'var(--eg-color-footer-bg)',\n borderRight: '1px solid var(--eg-color-border)',\n borderTop: '1px solid var(--eg-color-border)',\n boxSizing: 'border-box',\n flexShrink: 0,\n fontSize: 'var(--eg-font-size-header)',\n fontWeight: 600\n }\n },\n\n frozenColFooterStyle() {\n const w = this.getFrozenWidth()\n return {\n width: w + 'px',\n minWidth: w + 'px',\n height: this._footerRowH + 'px',\n overflow: 'hidden',\n flexShrink: 0\n }\n },\n\n pinnedRightFooterStyle() {\n return {\n width: this.pinnedRightWidth + 'px',\n minWidth: this.pinnedRightWidth + 'px',\n height: this._footerRowH + 'px',\n overflow: 'hidden',\n flexShrink: 0,\n borderLeft: '1px solid var(--eg-color-border)'\n }\n },\n\n colOutlineRowStyle() {\n return {\n position: 'absolute',\n top: -OUTLINE_GUTTER + 'px',\n left: 0,\n right: 0,\n height: OUTLINE_GUTTER + 'px'\n }\n },\n\n resizeLineStyle() {\n if (!this.resizing.active) return {}\n if (this.resizing.type === 'col') {\n return {\n position: 'fixed',\n top: 0,\n left: this.resizing.currentPos + 'px',\n width: '2px',\n height: '100%',\n background: 'var(--eg-color-accent)',\n pointerEvents: 'none',\n zIndex: 9999\n }\n } else {\n return {\n position: 'fixed',\n left: 0,\n top: this.resizing.currentPos + 'px',\n height: '2px',\n width: '100%',\n background: 'var(--eg-color-accent)',\n pointerEvents: 'none',\n zIndex: 9999\n }\n }\n }\n },\n\n watch: {\n size() {\n this.rowHeights = {}\n this.$nextTick(() => this.updateVirtualScroll())\n },\n\n autoWidth(v) {\n if (v) this._applyAutoWidth()\n },\n\n columns: {\n immediate: true,\n handler(cols) {\n this.leafCols = flattenColumns(cols)\n this.headerDepth = columnTreeDepth(cols)\n this.headerRows = buildHeaderRows(cols, this.headerDepth)\n // Init colWidths\n this.leafCols.forEach(col => {\n if (this.colWidths[col._flatIndex] === undefined) {\n this.colWidths[col._flatIndex] = col.width || DEFAULT_COL_WIDTH\n }\n })\n this.computeColumnTotals()\n this.updateVirtualScroll()\n this._applyAutoWidth()\n }\n },\n merges: {\n immediate: true,\n handler(v) { this.internalMerges = v ? [...v] : [] }\n },\n collapsedGroups: {\n immediate: true,\n handler(v) { this.internalCollapsedGroups = v ? [...v] : [] }\n },\n data: {\n immediate: true,\n handler(newData) {\n // Keep _dataRaw in sync so template uses fresh data without triggering dependArray\n this._dataRaw = newData || []\n this.updateVirtualScroll()\n this.computeColumnTotals()\n // Force re-render so cell values refresh even when virtualScroll indices don't change\n // (e.g. editing a cell: same row count, same scroll position, only content changed)\n this.$forceUpdate()\n this._applyAutoWidth()\n }\n },\n totalRows() { this.updateVirtualScroll() },\n hiddenRowSet() { this.updateVirtualScroll() },\n totalVirtualHeight() { this.$nextTick(this.syncHeaderViewportWidth) }\n },\n\n created() {\n // Non-reactive row data reference — avoids Vue 2 dependArray(data) O(n) loop.\n // Vue 2 calls dependArray() for EVERY `data[ri]` access in the template,\n // iterating all 50,000 rows each time. With 1200 cells per render that's\n // 60 million iterations per render (~600ms). _dataRaw bypasses this.\n this._dataRaw = this.data || []\n\n // Non-reactive caches: same (w,h) → same style object → Vue 2 skips DOM style writes\n this._cellStyleCache = Object.create(null)\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n // rAF handles for scroll/resize throttle\n this._scrollRAF = null\n this._resizeRAF = null\n\n // Undo/redo history — non-reactive to avoid Vue overhead.\n // Each entry: { type: 'data'|'merges', before: {...}, after: {...} }\n // 'data' stores only diff rows: { indices: number[], rows: object[] }\n this._history = []\n this._historyIndex = -1\n this._historySkip = false // true while undo/redo is in progress\n\n // Column drag preview offsets — non-reactive so direct DOM updates bypass Vue re-renders.\n // Keys are column keys, values are pixel offsets.\n this._dragOffsets = {}\n\n },\n\n mounted() {\n this.updateVirtualScroll()\n this.$nextTick(this.syncHeaderViewportWidth)\n document.addEventListener('mousemove', this.onGlobalMouseMove)\n document.addEventListener('mouseup', this.onGlobalMouseUp)\n document.addEventListener('keydown', this.onGlobalKeyDown)\n document.addEventListener('mousedown', this._onDocMouseDownForDropdown, true)\n window.addEventListener('resize', this.syncHeaderViewportWidth)\n window.addEventListener('scroll', this._onWindowScrollForDropdown, true)\n },\n\n updated() {\n // After Vue re-renders (e.g., virtual scroll adds new rows during drag),\n // apply missing transforms to newly rendered cells that don't have one yet.\n if (!this.colDrag.active || !this.$el) return\n const offsets = this._dragOffsets\n if (!offsets || !Object.keys(offsets).length) return\n this.$el.querySelectorAll('[data-fi]').forEach(el => {\n if (el.style.transform) return\n const fi = parseInt(el.dataset.fi)\n const col = this.leafCols[fi]\n const dx = col ? (offsets[col.key] || 0) : 0\n if (dx) el.style.transform = `translateX(${dx}px)`\n })\n },\n\n beforeDestroy() {\n document.removeEventListener('mousemove', this.onGlobalMouseMove)\n document.removeEventListener('mouseup', this.onGlobalMouseUp)\n document.removeEventListener('keydown', this.onGlobalKeyDown)\n document.removeEventListener('mousedown', this._onDocMouseDownForDropdown, true)\n window.removeEventListener('resize', this.syncHeaderViewportWidth)\n window.removeEventListener('scroll', this._onWindowScrollForDropdown, true)\n },\n\n methods: {\n // =========================================================\n // VIRTUAL SCROLL\n // =========================================================\n updateVirtualScroll() {\n const footerH = this.hasFooter ? this._footerRowH : 0\n const containerH = this.height - (this._headerRowH * this.headerDepth) - footerH\n // Use binary search against the Vue-cached cumulativeHeights → O(log n) per scroll.\n // overscan=8 (≈224px at default row height) gives enough buffer for fast scroll\n // without blank-band artifacts between rAF updates.\n const result = findVisibleRange(\n this.scrollTop, Math.max(containerH, 100), this.totalRows, this.cumulativeHeights, 8\n )\n this.virtualStartIndex = result.startIndex\n this.virtualEndIndex = result.endIndex\n this.virtualOffsetTop = result.offsetTop\n this.totalVirtualHeight = result.totalHeight\n },\n\n onBodyScroll(e) {\n const target = e.target\n // Sync sibling scroll containers immediately (visual alignment, no layout trigger)\n if (this.$refs.scrollColHeader) this.$refs.scrollColHeader.scrollLeft = target.scrollLeft\n if (this.$refs.scrollFooter) this.$refs.scrollFooter.scrollLeft = target.scrollLeft\n if (this.$refs.scrollRowHeaders) this.$refs.scrollRowHeaders.scrollTop = target.scrollTop\n\n // Close dropdown on scroll — fixed-position dropdown drifts away from the moving cell\n if (this.selectDropdown) this.closeSelectDropdown()\n\n // Throttle reactive state updates + virtual scroll recalc to one rAF per frame.\n // Read scrollTop from the DOM ref at rAF time (not from the stale event closure)\n // so that multiple scroll events arriving between frames still resolve to the\n // final position — eliminates the flickering caused by render/scroll mismatch.\n if (!this._scrollRAF) {\n this._scrollRAF = requestAnimationFrame(() => {\n this._scrollRAF = null\n const sb = this.$refs.scrollBody\n if (!sb) return\n this.scrollTop = sb.scrollTop\n this.scrollLeft = sb.scrollLeft\n this.updateVirtualScroll()\n })\n }\n },\n\n onScroll(e) {},\n\n // .eg-scroll-col-header (overflow:hidden, synced via JS) has no native scrollbar, but\n // .eg-scroll-body (overflow:auto) does — its real vertical scrollbar eats into its\n // clientWidth. If both containers just grow via flex:1, the header ends up wider than\n // the body, so its max scrollLeft is smaller and syncing clamps it before the body\n // reaches its rightmost scroll position — column borders desync right at the scroll\n // end. Locking the header to the body's exact measured clientWidth (scrollColHeaderStyle)\n // makes both max scrollLeft values identical.\n syncHeaderViewportWidth() {\n const el = this.$refs.scrollBody\n if (!el) return\n if (this.headerViewportWidth !== el.clientWidth) this.headerViewportWidth = el.clientWidth\n },\n\n // =========================================================\n // HELPERS\n // =========================================================\n isRowHidden(ri) { return this.hiddenRowSet.has(ri) },\n isColHidden(ci) { return this.effectiveHiddenColSet.has(ci) },\n\n getColW(ci) {\n return this.colWidths[ci] !== undefined ? this.colWidths[ci] : (this.leafCols[ci] ? this.leafCols[ci].width || DEFAULT_COL_WIDTH : DEFAULT_COL_WIDTH)\n },\n\n getRowH(ri) {\n if (this.isRowHidden(ri)) return 0\n return this.rowHeights[ri] || this._rowH\n },\n\n getColLeft(ci) {\n let left = 0\n for (let i = 0; i < ci && i < this.leafCols.length; i++) {\n if (!this.isColHidden(i)) left += this.getColW(i)\n }\n return left\n },\n\n getFrozenWidth() {\n return this.hasPinnedLeft ? this.pinnedLeftWidth : 0\n },\n\n isColumnPinnedLeft(ci) {\n return this.pinnedLeftSet.has(ci)\n },\n\n isColumnPinnedRight(ci) {\n return this.pinnedRightSet.has(ci)\n },\n\n isColumnScrollable(ci) {\n return !this.isColumnPinnedLeft(ci) && !this.isColumnPinnedRight(ci)\n },\n\n getZoneColLeft(ci, zone) {\n let left = 0\n if (zone === 'left') {\n for (const col of this.pinnedLeftCols) {\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex)) left += this.getColW(col._flatIndex)\n }\n } else if (zone === 'right') {\n for (const col of this.pinnedRightCols) {\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex)) left += this.getColW(col._flatIndex)\n }\n } else {\n for (let i = 0; i < this.leafCols.length; i++) {\n const col = this.leafCols[i]\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex) && this.isColumnScrollable(col._flatIndex)) {\n left += this.getColW(col._flatIndex)\n }\n }\n }\n return left\n },\n\n isCellInZone(cell, rowIdx, zone) {\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z === zone) return true\n }\n return false\n }\n const ci = cell.column._flatIndex\n if (this.isColHidden(ci)) return false\n const z = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n return z === zone\n },\n\n getHeaderCellStyleForZone(cell, rowIndex, zone) {\n let leftLeafIdx = cell._firstLeafFlatIndex\n if (cell.isGroup) {\n const end = leftLeafIdx + cell.colspan - 1\n for (let i = leftLeafIdx; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z === zone) { leftLeafIdx = i; break }\n }\n }\n const left = this.getZoneColLeft(leftLeafIdx, zone)\n let width = 0\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z !== zone) continue\n width += this.getColW(i)\n }\n } else {\n width = this.getColW(cell.column._flatIndex)\n }\n return {\n top: (this._headerRowH * rowIndex) + 'px',\n left: left + 'px',\n width: width + 'px',\n height: (this._headerRowH * cell.rowspan) + 'px'\n }\n },\n\n getRangeWidth(startCol, endCol) {\n let w = 0\n for (let i = startCol; i <= endCol && i < this.leafCols.length; i++) {\n if (!this.isColHidden(i)) w += this.getColW(i)\n }\n return w\n },\n\n getRangeHeight(startRow, endRow) {\n let h = 0\n for (let i = startRow; i <= endRow && i < this.totalRows; i++) {\n if (!this.isRowHidden(i)) h += this.getRowH(i)\n }\n return h\n },\n\n getCellValue(ri, ci) {\n const col = this.leafCols[ci]\n if (!col) return ''\n const row = this._dataRaw[ri]\n if (!row) return ''\n const v = row[col.key]\n return v !== undefined ? v : ''\n },\n\n isEditing(ri, ci) {\n return this.editingCell && this.editingCell.row === ri && this.editingCell.col === ci\n },\n\n isMergedAway(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n if (!merge) return false\n const nm = normalizeRange(merge)\n return !(nm.startRow === ri && nm.startCol === ci)\n },\n\n getMergeSpan(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n if (!merge) return { rowspan: 1, colspan: 1 }\n const nm = normalizeRange(merge)\n return {\n rowspan: nm.endRow - nm.startRow + 1,\n colspan: nm.endCol - nm.startCol + 1\n }\n },\n\n isSelected(ri, ci) {\n return isCellInAnyRange(ri, ci, this.selectionRanges)\n },\n\n isActiveCell(ri, ci) {\n return this.activeCell.row === ri && this.activeCell.col === ci\n },\n\n isCopyHighlighted(ri, ci) {\n if (!this.clipboardRange || this.clipboardMode !== 'copy') return false\n return isCellInRange(ri, ci, this.clipboardRange)\n },\n\n // =========================================================\n // STYLES\n // =========================================================\n getRowStyle(ri) {\n const h = this.getRowH(ri)\n const key = h\n if (this._rowStyleCache[key]) return this._rowStyleCache[key]\n const style = { height: h + 'px', minHeight: h + 'px' }\n this._rowStyleCache[key] = style\n return style\n },\n\n getRowHeaderStyle(ri) {\n const h = this.getRowH(ri)\n const key = h\n if (this._rowHeaderStyleCache[key]) return this._rowHeaderStyleCache[key]\n const style = { height: h + 'px' }\n this._rowHeaderStyleCache[key] = style\n return style\n },\n\n getCellStyle(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n const nm = merge ? normalizeRange(merge) : null\n let w = this.getColW(ci)\n let h = this.getRowH(ri)\n\n if (nm && nm.startRow === ri && nm.startCol === ci) {\n w = this.getRangeWidth(nm.startCol, nm.endCol)\n h = this.getRangeHeight(nm.startRow, nm.endRow)\n }\n\n // Position cells with the same absolute-left arithmetic the header uses\n // (getZoneColLeft), instead of relying on flex layout to accumulate widths —\n // flex and a JS integer sum can drift apart by a few px over many columns,\n // desyncing the body's column borders from the header's.\n const zone = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n const left = this.getZoneColLeft(ci, zone)\n\n // Cache by dimensions+position — same (w,h,left) → same object ref → Vue 2 skips DOM style writes\n const key = w + '_' + h + '_' + left\n if (this._cellStyleCache[key]) return this._cellStyleCache[key]\n const style = { position: 'absolute', left: left + 'px', top: '0px', width: w + 'px', minWidth: w + 'px', height: h + 'px' }\n this._cellStyleCache[key] = style\n return style\n },\n\n getCellClasses(ri, ci) {\n const col = this.leafCols[ci]\n return {\n 'eg-cell-active': this.isActiveCell(ri, ci),\n 'eg-cell-selected': this.isSelected(ri, ci) && !this.isActiveCell(ri, ci),\n 'eg-cell-fill-preview': this.isInFillPreview(ri, ci),\n 'eg-cell-copy': this.isCopyHighlighted(ri, ci),\n 'eg-cell-merged-hidden': this.isMergedAway(ri, ci),\n 'eg-cell-select': !!(col && this.isSelectLikeCol(col)),\n 'eg-cell-checkbox': !!(col && col.type === 'checkbox'),\n 'eg-cell-readonly': !this.isCellEditable(ri, ci),\n 'eg-cell-invalid': !!(this.invalidCell && this.invalidCell.row === ri && this.invalidCell.col === ci),\n 'eg-cell--has-suffix': !!(col && this.hasSuffixSlot(col)),\n 'eg-cell--drag-source': this.colDrag.active && ci >= this.colDrag.sourceFirstLeaf && ci < this.colDrag.sourceFirstLeaf + this.colDrag.sourceLeafCount\n }\n },\n\n isInFillPreview(ri, ci) {\n if (!this.fillDrag.active || !this.fillDrag.sourceRange) return false\n const src = this.fillDrag.sourceRange\n const targetRow = this.fillDrag.currentRow\n const targetCol = this.fillDrag.currentCol\n if (targetRow > src.endRow) {\n return ri > src.endRow && ri <= targetRow && ci >= src.startCol && ci <= src.endCol\n }\n if (targetCol > src.endCol) {\n return ci > src.endCol && ci <= targetCol && ri >= src.startRow && ri <= src.endRow\n }\n return false\n },\n\n getHeaderCellStyle(cell, rowIndex, isFrozen) {\n const zone = isFrozen ? 'left' : 'scroll'\n let leftLeafIdx = cell._firstLeafFlatIndex\n if (cell.isGroup) {\n const end = leftLeafIdx + cell.colspan - 1\n for (let i = leftLeafIdx; i <= end; i++) {\n if (this.isColHidden(i)) continue\n if (isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)) { leftLeafIdx = i; break }\n }\n }\n const left = this.getZoneColLeft(leftLeafIdx, zone)\n\n let width = 0\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const inZone = isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)\n if (!inZone) continue\n width += this.getColW(i)\n }\n } else {\n width = this.getColW(cell.column._flatIndex)\n }\n\n return {\n top: (this._headerRowH * rowIndex) + 'px',\n left: left + 'px',\n width: width + 'px',\n height: (this._headerRowH * cell.rowspan) + 'px'\n }\n },\n\n getHeaderDragTransform(cell) {\n if (!this.colDrag.active) return null\n // Read from non-reactive _dragOffsets — no Vue dependency tracking, no re-render on offset change\n let key\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (!this.isColHidden(i) && this.leafCols[i]) { key = this.leafCols[i].key; break }\n }\n } else {\n key = cell.column.key\n }\n if (!key) return null\n const dx = this._dragOffsets[key]\n if (!dx) return null\n return { transform: `translateX(${dx}px)` }\n },\n\n getCellDragTransform(ci) {\n if (!this.colDrag.active) return null\n // Read from non-reactive _dragOffsets — no Vue dependency tracking\n const col = this.leafCols[ci]\n if (!col) return null\n const dx = this._dragOffsets[col.key]\n if (!dx) return null\n return { transform: `translateX(${dx}px)` }\n },\n\n // =========================================================\n // FOOTER (column totals)\n // =========================================================\n computeColumnTotals() {\n const totals = {}\n const rows = this._dataRaw || []\n this.leafCols.forEach(col => {\n if (!col.showTotal) return\n let sum = 0\n let hasNumber = false\n for (let ri = 0; ri < rows.length; ri++) {\n const row = rows[ri]\n const v = row ? row[col.key] : undefined\n if (typeof v === 'number' && isFinite(v)) {\n sum += v\n hasNumber = true\n }\n }\n totals[col._flatIndex] = hasNumber ? Math.round(sum * 1e6) / 1e6 : null\n })\n this.columnTotals = totals\n },\n\n getColumnTotalDisplay(ci) {\n const col = this.leafCols[ci]\n if (!col || !col.showTotal) return ''\n const v = this.columnTotals[ci]\n return v === null || v === undefined ? '-' : v\n },\n\n getFooterCellStyle(ci) {\n const zone = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n const left = this.getZoneColLeft(ci, zone)\n const w = this.getColW(ci)\n return {\n position: 'absolute',\n left: left + 'px',\n top: '0px',\n width: w + 'px',\n minWidth: w + 'px',\n height: this._footerRowH + 'px'\n }\n },\n\n isCellVisible(cell, rowIndex, isFrozen) {\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const inZone = isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)\n if (inZone) return true\n }\n return false\n }\n const ci = cell.column._flatIndex\n if (this.isColHidden(ci)) return false\n return isFrozen ? this.isColumnPinnedLeft(ci) : this.isColumnScrollable(ci)\n },\n\n getRowGroupBtnStyle(group) {\n const top = getRowTop(group.startIndex, this._rowH, this.rowHeights) - this.scrollTop\n return {\n position: 'absolute',\n top: top + 'px',\n left: '2px',\n width: '16px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n fontSize: '10px',\n cursor: 'pointer',\n background: 'var(--eg-color-accent-soft)',\n border: '1px solid var(--eg-color-group-border)',\n borderRadius: '2px',\n zIndex: 5\n }\n },\n\n getColGroupBtnStyle(group) {\n const left = this.getColLeft(group.startIndex) - this.scrollLeft\n return {\n position: 'absolute',\n left: left + 'px',\n top: '2px',\n width: '16px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n fontSize: '10px',\n cursor: 'pointer',\n background: 'var(--eg-color-accent-soft)',\n border: '1px solid var(--eg-color-group-border)',\n borderRadius: '2px'\n }\n },\n\n // =========================================================\n // CELL SELECTION (3.1)\n // =========================================================\n selectCell(row, col, addToSelection = false) {\n if (row < 0 || row >= this.totalRows || col < 0 || col >= this.leafCols.length) return\n this.activeCell = { row, col }\n if (addToSelection) {\n this.selectionRanges.push(singleCellRange(row, col))\n } else {\n this.selectionRanges = [singleCellRange(row, col)]\n }\n this.emitSelectionChange()\n },\n\n selectRange(startRow, startCol, endRow, endCol, replace = true) {\n const range = { startRow, startCol, endRow, endCol }\n if (replace) {\n this.selectionRanges = [range]\n } else {\n this.selectionRanges.push(range)\n }\n this.emitSelectionChange()\n },\n\n selectRow(ri) {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [{ startRow: ri, endRow: ri, startCol: 0, endCol: this.leafCols.length - 1 }]\n this.emitSelectionChange()\n },\n\n selectColumn(ci) {\n this.activeCell = { row: 0, col: ci }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: ci, endCol: ci }]\n this.emitSelectionChange()\n },\n\n selectAll() {\n this.activeCell = { row: 0, col: 0 }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: 0, endCol: this.leafCols.length - 1 }]\n this.emitSelectionChange()\n },\n\n emitSelectionChange() {\n this.$emit('selection-change', {\n activeCell: { ...this.activeCell },\n ranges: this.selectionRanges.map(r => normalizeRange(r))\n })\n },\n\n onCellMouseDown(e, ri, ci) {\n this.invalidCell = null\n if (this.editingCell) {\n const editCol = this.leafCols[this.editingCell.col]\n if (editCol && this._hasCustomEdit(editCol)) {\n this.cancelEdit()\n } else {\n this.commitEdit()\n }\n }\n this.hideContextMenu()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n\n if (e.ctrlKey || e.metaKey) {\n if (this.selectDropdown) this.closeSelectDropdown()\n // Ctrl+click: start new independent range\n this.activeCell = { row: ri, col: ci }\n this.mouseDownRange = { startRow: ri, startCol: ci, endRow: ri, endCol: ci }\n this.selectionRanges.push(this.mouseDownRange)\n this.isCtrlDrag = true\n } else if (e.shiftKey && this.selectionRanges.length > 0) {\n if (this.selectDropdown) this.closeSelectDropdown()\n // Shift+click: extend primary range to this cell\n this.selectionRanges = [buildRange(this.activeCell, { row: ri, col: ci })]\n } else {\n const wasActive = this.activeCell.row === ri && this.activeCell.col === ci\n this.activeCell = { row: ri, col: ci }\n this.mouseDownRange = { startRow: ri, startCol: ci, endRow: ri, endCol: ci }\n this.selectionRanges = [this.mouseDownRange]\n this.isCtrlDrag = false\n\n // Open select dropdown on click if cell was already active (2nd click)\n const col = this.leafCols[ci]\n if (wasActive && col && this.isSelectLikeCol(col) && !this._hasCustomEdit(col) && this.isCellEditable(ri, ci)) {\n this.openSelectDropdown(ri, ci, e)\n e.preventDefault()\n this.isMouseDown = true\n this.emitSelectionChange()\n return\n }\n if (this.selectDropdown) this.closeSelectDropdown()\n }\n\n this.isMouseDown = true\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onCellMouseOver(e, ri, ci) {\n if (!this.isMouseDown) return\n if (this.fillDrag.active) return\n if (this.dragMove.active) {\n this.dragMove.targetRow = ri\n this.dragMove.targetCol = ci\n return\n }\n\n // Extend current drag range\n if (this.mouseDownRange) {\n this.mouseDownRange.endRow = ri\n this.mouseDownRange.endCol = ci\n this.emitSelectionChange()\n }\n },\n\n onCellMouseUp() {\n this.isMouseDown = false\n },\n\n onCellDblClick(ri, ci) {\n const col = this.leafCols[ci]\n if (!this.isCellEditable(ri, ci)) return\n if (col && this.isSelectLikeCol(col) && !this._hasCustomEdit(col)) {\n this.openSelectDropdownForActive()\n return\n }\n if (col && col.type === 'checkbox') return\n this.startEditing(ri, ci, null, true)\n },\n\n onRowHeaderMouseDown(e, ri) {\n const endCol = this.leafCols.length - 1\n const fullRow = { startRow: ri, endRow: ri, startCol: 0, endCol }\n\n if (e.ctrlKey || e.metaKey) {\n if (e.shiftKey && this.selectionRanges.length > 0) {\n // Ctrl+Shift: active qatordan ri gacha yangi range qo'sh\n const sr = Math.min(this.activeCell.row, ri)\n const er = Math.max(this.activeCell.row, ri)\n this.selectionRanges = [...this.selectionRanges, { startRow: sr, endRow: er, startCol: 0, endCol }]\n } else {\n // Ctrl+click: qatorni toggle qil\n const idx = this.selectionRanges.findIndex(r =>\n r.startRow === ri && r.endRow === ri && r.startCol === 0 && r.endCol === endCol\n )\n if (idx >= 0) {\n const next = this.selectionRanges.filter((_, i) => i !== idx)\n this.selectionRanges = next.length ? next : [fullRow]\n } else {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [...this.selectionRanges, fullRow]\n }\n }\n } else if (e.shiftKey && this.selectionRanges.length > 0) {\n const sr = Math.min(this.activeCell.row, ri)\n const er = Math.max(this.activeCell.row, ri)\n this.selectionRanges = [{ startRow: sr, endRow: er, startCol: 0, endCol }]\n } else {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [fullRow]\n }\n\n this.mouseDownRange = this.selectionRanges[this.selectionRanges.length - 1]\n this.isMouseDown = true\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onColHeaderMouseDown(e, cell) {\n // Start pending drag (activates after 5 px horizontal movement)\n // Works for both leaf and group headers\n if (this.columnDraggable && !e.shiftKey && !e.ctrlKey && !e.metaKey) {\n this.colDrag.pending = true\n this.colDrag.active = false\n this.colDrag.sourceFirstLeaf = cell._firstLeafFlatIndex\n this.colDrag.sourceLeafCount = cell.isGroup ? cell.colspan : 1\n this.colDrag.startX = e.clientX\n this.colDrag.startY = e.clientY\n this.colDrag.ghostLabel = cell.column.title || ''\n }\n\n if (cell.isGroup) {\n // Group header click: select all leaf columns within the group\n const startCol = cell._firstLeafFlatIndex\n const endCol = startCol + cell.colspan - 1\n this.activeCell = { row: 0, col: startCol }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol, endCol }]\n this.isMouseDown = true\n this.mouseDownRange = this.selectionRanges[0]\n this.emitSelectionChange()\n e.preventDefault()\n return\n }\n\n const ci = cell.column._flatIndex\n if (e.shiftKey && this.selectionRanges.length > 0) {\n const sc = Math.min(this.activeCell.col, ci)\n const ec = Math.max(this.activeCell.col, ci)\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: sc, endCol: ec }]\n } else {\n this.activeCell = { row: 0, col: ci }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: ci, endCol: ci }]\n }\n this.isMouseDown = true\n this.mouseDownRange = this.selectionRanges[0]\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onColHeaderDblClick(e, cell) {\n if (cell.isGroup) return\n this.autoFitColumn(cell.column._flatIndex)\n },\n\n onColHeaderContextMenu(e, cell) {\n if (!cell.isGroup) {\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: -1, col: cell.column._flatIndex }\n }\n },\n\n onRowContextMenu(e, ri) {\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: ri, col: -1 }\n },\n\n onCellContextMenu(e, ri, ci) {\n if (!this.isSelected(ri, ci)) {\n this.selectCell(ri, ci)\n }\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: ri, col: ci }\n },\n\n hideContextMenu() {\n this.contextMenu.visible = false\n },\n\n // =========================================================\n // KEYBOARD NAVIGATION (3.2)\n // =========================================================\n onKeyDown(e) {\n // Delegate keyboard navigation to the active dropdown component\n if (this.selectDropdown) {\n const comp = this.$refs.selectDropdownComp\n if (comp && comp.handleKey) comp.handleKey(e)\n return\n }\n\n if (this.editingCell) return // handled by onEditKeyDown\n const key = e.key\n\n if ((e.ctrlKey || e.metaKey) && key === 'z' && !e.shiftKey) {\n e.preventDefault()\n this.undo()\n return\n }\n if ((e.ctrlKey || e.metaKey) && (key === 'y' || (key === 'z' && e.shiftKey))) {\n e.preventDefault()\n this.redo()\n return\n }\n\n if (key === 'a' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.selectAll()\n return\n }\n\n if (key === 'c' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.copySelection()\n return\n }\n if (key === 'x' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.cutSelection()\n return\n }\n if (key === 'v' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.pasteAt(this.activeCell.row, this.activeCell.col)\n return\n }\n\n if (key === 'Delete' || key === 'Backspace') {\n e.preventDefault()\n this.clearSelection()\n return\n }\n\n if (key === 'F2') {\n e.preventDefault()\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && this.isSelectLikeCol(activeCol) && !this._hasCustomEdit(activeCol)) {\n this.openSelectDropdownForActive()\n } else if (activeCol && activeCol.type === 'checkbox') {\n this.toggleCheckbox(this.activeCell.row, this.activeCell.col)\n } else {\n this.startEditing(this.activeCell.row, this.activeCell.col, null, true)\n }\n return\n }\n\n if (key === ' ') {\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && activeCol.type === 'checkbox') {\n e.preventDefault()\n this.toggleCheckbox(this.activeCell.row, this.activeCell.col)\n return\n }\n }\n\n if (key === 'Escape') {\n this.clipboardRange = null\n this.clipboardMatrix = null\n this.clipboardMode = null\n return\n }\n\n if (key === 'Tab') {\n e.preventDefault()\n this.moveActive(0, e.shiftKey ? -1 : 1, e)\n return\n }\n if (key === 'Enter') {\n e.preventDefault()\n this.moveActive(e.shiftKey ? -1 : 1, 0, e)\n return\n }\n\n const arrows = { ArrowUp: [-1,0], ArrowDown: [1,0], ArrowLeft: [0,-1], ArrowRight: [0,1] }\n if (arrows[key]) {\n e.preventDefault()\n const [dr, dc] = arrows[key]\n if (e.shiftKey) {\n // Extend selection\n const pr = this.primaryRange || singleCellRange(this.activeCell.row, this.activeCell.col)\n const nm = normalizeRange(pr)\n // Determine which edge to extend\n if (dr === -1) pr.startRow = Math.max(0, nm.startRow - 1)\n if (dr === 1) pr.endRow = Math.min(this.totalRows - 1, nm.endRow + 1)\n if (dc === -1) pr.startCol = Math.max(0, nm.startCol - 1)\n if (dc === 1) pr.endCol = Math.min(this.leafCols.length - 1, nm.endCol + 1)\n this.selectionRanges = [pr]\n this.emitSelectionChange()\n } else {\n this.moveActive(dr, dc, e)\n }\n return\n }\n\n if (key === 'Home') {\n e.preventDefault()\n if (e.ctrlKey) {\n this.selectCell(0, 0)\n } else {\n this.selectCell(this.activeCell.row, 0)\n }\n return\n }\n if (key === 'End') {\n e.preventDefault()\n if (e.ctrlKey) {\n this.selectCell(this.totalRows - 1, this.leafCols.length - 1)\n } else {\n this.selectCell(this.activeCell.row, this.leafCols.length - 1)\n }\n return\n }\n if (key === 'PageUp') {\n e.preventDefault()\n const visibleRows = Math.floor((this.height - this._headerRowH * this.headerDepth) / this._rowH)\n this.moveActive(-visibleRows, 0, e)\n return\n }\n if (key === 'PageDown') {\n e.preventDefault()\n const visibleRows = Math.floor((this.height - this._headerRowH * this.headerDepth) / this._rowH)\n this.moveActive(visibleRows, 0, e)\n return\n }\n },\n\n onKeyPress(e) {\n if (this.editingCell) return\n if (this.selectDropdown) return\n if (e.ctrlKey || e.metaKey || e.altKey) return\n if (e.key && e.key.length === 1) {\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && this.isSelectLikeCol(activeCol) && !this._hasCustomEdit(activeCol)) {\n e.preventDefault()\n this.openSelectDropdownForActive()\n return\n }\n if (activeCol && activeCol.type === 'checkbox') {\n e.preventDefault()\n return\n }\n this.startEditing(this.activeCell.row, this.activeCell.col, e.key, false)\n }\n },\n\n onGlobalKeyDown(e) {\n if (e.key === 'Escape' && (this.colDrag.active || this.colDrag.pending)) {\n this._resetColDrag()\n e.preventDefault()\n }\n },\n\n moveActive(dr, dc, e) {\n let row = this.activeCell.row + dr\n let col = this.activeCell.col + dc\n\n // Tab: wrap around rows\n if (e && e.key === 'Tab') {\n if (col >= this.leafCols.length) { col = 0; row++ }\n if (col < 0) { col = this.leafCols.length - 1; row-- }\n }\n\n row = Math.max(0, Math.min(this.totalRows - 1, row))\n col = Math.max(0, Math.min(this.leafCols.length - 1, col))\n\n // Skip hidden cols\n while (this.isColHidden(col) && col > 0 && col < this.leafCols.length - 1) {\n col += dc >= 0 ? 1 : -1\n }\n // Skip hidden rows\n while (this.isRowHidden(row) && row > 0 && row < this.totalRows - 1) {\n row += dr >= 0 ? 1 : -1\n }\n\n // Handle merge navigation\n const resolved = resolveMergeAnchor(row, col, this.internalMerges)\n row = resolved.row\n col = resolved.col\n\n this.activeCell = { row, col }\n this.selectionRanges = [singleCellRange(row, col)]\n this.emitSelectionChange()\n this.scrollToCell(row, col)\n },\n\n scrollToCell(ri, ci) {\n const scrollBody = this.$refs.scrollBody\n if (!scrollBody) return\n const rowTop = getRowTop(ri, this._rowH, this.rowHeights)\n const rowBottom = rowTop + this.getRowH(ri)\n const colLeft = this.getColLeft(ci) - this.getFrozenWidth()\n const colRight = colLeft + this.getColW(ci)\n\n if (rowTop < scrollBody.scrollTop) scrollBody.scrollTop = rowTop\n if (rowBottom > scrollBody.scrollTop + scrollBody.clientHeight) {\n scrollBody.scrollTop = rowBottom - scrollBody.clientHeight\n }\n if (colLeft < scrollBody.scrollLeft) scrollBody.scrollLeft = colLeft\n if (colRight > scrollBody.scrollLeft + scrollBody.clientWidth) {\n scrollBody.scrollLeft = colRight - scrollBody.clientWidth\n }\n },\n\n // =========================================================\n // EDITING (used by 3.1 + 3.2)\n // =========================================================\n startEditing(ri, ci, initialChar = null, keepValue = false) {\n const col = this.leafCols[ci]\n if (!col || !this.isCellEditable(ri, ci)) return\n if (ri < 0 || ri >= this.totalRows) return\n if (!this._hasCustomEdit(col)) {\n if (this.isSelectLikeCol(col)) { this.openSelectDropdownForActive(); return }\n if (col.type === 'checkbox') return\n }\n\n this.invalidCell = null\n this.editingCell = { row: ri, col: ci }\n if (initialChar !== null) {\n this.editValue = initialChar\n } else if (keepValue) {\n this.editValue = String(this.getCellValue(ri, ci) || '')\n } else {\n this.editValue = ''\n }\n this.editOriginalValue = String(this.getCellValue(ri, ci) || '')\n\n this.$nextTick(() => {\n const inputs = this.$refs.editInput\n if (inputs) {\n const input = Array.isArray(inputs) ? inputs[0] : inputs\n if (input) {\n input.focus()\n if (keepValue) {\n input.setSelectionRange(input.value.length, input.value.length)\n }\n }\n }\n })\n },\n\n commitEdit() {\n if (!this.editingCell) return\n const { row, col } = this.editingCell\n const colDef = this.leafCols[col]\n if (!colDef) { this.editingCell = null; return }\n\n if (!this.isCellValueValid(row, col, this.editValue)) {\n this._showInvalidCell(row, col, this.editValue)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: this.editValue }\n this._emitDataChange(oldData, newData)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n cancelEdit() {\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n hasCellSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['cell-' + col.key])\n },\n hasLegacyEditSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['edit-' + col.key])\n },\n hasPrefixSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['prefix-' + col.key])\n },\n hasSuffixSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['suffix-' + col.key])\n },\n _hasCustomEdit(col) {\n // For select/treeSelect: cell-{key} slot only customizes display; dropdown still opens normally\n if (col.type === 'select' || col.type === 'treeSelect') {\n return this.hasLegacyEditSlot(col)\n }\n return this.hasCellSlot(col) || this.hasLegacyEditSlot(col)\n },\n\n commitEditSlot(value) {\n if (!this.editingCell) return\n const { row, col } = this.editingCell\n const colDef = this.leafCols[col]\n if (!colDef) { this.editingCell = null; return }\n if (!this.isCellValueValid(row, col, value)) {\n this._showInvalidCell(row, col, value)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: value }\n this._emitDataChange(oldData, newData)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n // =========================================================\n // CHECKBOX CELLS\n // =========================================================\n\n isCheckboxChecked(ri, ci) {\n const v = this.getCellValue(ri, ci)\n if (v === true || v === 1) return true\n if (typeof v === 'string') return ['true', '1'].includes(v.trim().toLowerCase())\n return false\n },\n\n setCheckboxValue(ri, ci, value) {\n const col = this.leafCols[ci]\n if (!col || !this.isCellEditable(ri, ci)) return\n if (!this.isCellValueValid(ri, ci, value)) {\n this._showInvalidCell(ri, ci, value)\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[ri] = { ...oldData[ri], [col.key]: value }\n this._emitDataChange(oldData, newData)\n },\n\n toggleCheckbox(ri, ci) {\n this.setCheckboxValue(ri, ci, !this.isCheckboxChecked(ri, ci))\n },\n\n // =========================================================\n // CELL EDITABILITY (3.17)\n // =========================================================\n\n isCellEditable(ri, ci) {\n const col = this.leafCols[ci]\n if (!col) return false\n const row = this._dataRaw[ri] || {}\n if (typeof this.cellEditable === 'function') return !!this.cellEditable(row, ri, col, ci)\n if (typeof col.editable === 'function') return !!col.editable(row, ri)\n if (col.editable === false) return false\n return true\n },\n\n // =========================================================\n // CELL VALUE VALIDATION (cellValidator)\n // =========================================================\n\n isCellValueValid(ri, ci, value) {\n if (typeof this.cellValidator !== 'function') return true\n const col = this.leafCols[ci]\n if (!col) return true\n const row = this._dataRaw[ri] || {}\n return !!this.cellValidator(value, row, ri, col, ci)\n },\n\n _resolveValidationMessage(ri, ci, value) {\n const col = this.leafCols[ci]\n const row = this._dataRaw[ri] || {}\n if (typeof this.cellValidationMessage === 'function') return this.cellValidationMessage(value, row, ri, col, ci)\n if (typeof this.cellValidationMessage === 'string' && this.cellValidationMessage) return this.cellValidationMessage\n return this.t.invalidValue\n },\n\n // Find the on-screen rect of the cell currently being committed — the edit\n // input if still mounted (commitEdit, before editingCell is cleared), else\n // the active cell element (checkbox/select commits, which never enter edit mode).\n _invalidCellRect() {\n const inputs = this.$refs.editInput\n const input = Array.isArray(inputs) ? inputs[0] : inputs\n if (input) return input.getBoundingClientRect()\n const el = this.$el ? this.$el.querySelector('.eg-cell-active') : null\n return el ? el.getBoundingClientRect() : null\n },\n\n _showInvalidCell(ri, ci, value) {\n const message = this._resolveValidationMessage(ri, ci, value)\n this.invalidCell = { row: ri, col: ci, message, rect: this._invalidCellRect() }\n this.$emit('cell-validation-error', { row: ri, col: ci, value, message })\n },\n\n // Resolve+emit messages for a batch of rejected { row, col, value } entries\n // from a bulk write (paste / fill / clear). blocked=true means the whole\n // operation was aborted (strictBulkValidation); false means these cells\n // were skipped but the rest of the write still applied.\n _emitBulkValidationError(skipped, blocked) {\n const cells = skipped.map(c => ({\n row: c.row, col: c.col, value: c.value,\n message: this._resolveValidationMessage(c.row, c.col, c.value)\n }))\n this.$emit('bulk-validation-error', { blocked, cells })\n },\n\n // =========================================================\n // SELECT DROPDOWN (3.16) + TREE SELECT (3.22)\n // =========================================================\n\n isSelectLikeCol(col) {\n return !!(col && (col.type === 'select' || col.type === 'treeSelect'))\n },\n\n treeOptionKeys(col) {\n return {\n valueKey: col.optionValueKey || 'value',\n labelKey: col.optionLabelKey || 'label',\n childrenKey: col.optionChildrenKey || 'children'\n }\n },\n\n _treeFindLabel(nodes, keys, value) {\n for (const node of (nodes || [])) {\n if (String(node[keys.valueKey]) === value) {\n return node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])\n }\n const found = this._treeFindLabel(node[keys.childrenKey], keys, value)\n if (found != null) return found\n }\n return null\n },\n\n colOptions(ci) {\n const col = this.leafCols[ci]\n if (!col || !Array.isArray(col.options)) return []\n return col.options.map(o =>\n typeof o === 'string' ? { value: o, label: o } : { value: o.value, label: o.label != null ? o.label : String(o.value), color: o.color }\n )\n },\n\n getSelectLabel(ci, value) {\n const col = this.leafCols[ci]\n const v = value == null ? '' : String(value)\n if (col && col.type === 'treeSelect') {\n if (!Array.isArray(col.options)) return v\n const found = this._treeFindLabel(col.options, this.treeOptionKeys(col), v)\n return found != null ? found : v\n }\n const opts = this.colOptions(ci)\n if (!opts.length) return v\n const found = opts.find(o => String(o.value) === v)\n return found ? found.label : v\n },\n\n _buildSelectDropdownState(ri, ci, col, currentValue, rect) {\n const rectObj = { top: rect.top, bottom: rect.bottom, left: rect.left, width: rect.width }\n return {\n row: ri, col: ci,\n tree: col.type === 'treeSelect',\n keys: col.type === 'treeSelect' ? this.treeOptionKeys(col) : null,\n rawOptions: col.options || [],\n currentValue,\n rect: rectObj,\n enableSearch: !!col.enableSearch\n }\n },\n\n openSelectDropdown(ri, ci, e) {\n const col = this.leafCols[ci]\n if (!col || !Array.isArray(col.options)) return\n const el = e.currentTarget\n const rect = el.getBoundingClientRect()\n const currentValue = String(this.getCellValue(ri, ci) != null ? this.getCellValue(ri, ci) : '')\n this.selectDropdown = this._buildSelectDropdownState(ri, ci, col, currentValue, rect)\n },\n\n openSelectDropdownForActive() {\n const { row, col } = this.activeCell\n const colDef = this.leafCols[col]\n if (!colDef || !Array.isArray(colDef.options)) return\n this.$nextTick(() => {\n const el = this.$el ? this.$el.querySelector('.eg-cell-active') : null\n if (!el) return\n const rect = el.getBoundingClientRect()\n const currentValue = String(this.getCellValue(row, col) != null ? this.getCellValue(row, col) : '')\n this.selectDropdown = this._buildSelectDropdownState(row, col, colDef, currentValue, rect)\n })\n },\n\n onComponentSelect({ value, label }) {\n if (!this.selectDropdown) return\n const { row, col } = this.selectDropdown\n const colDef = this.leafCols[col]\n if (colDef) {\n if (!this.isCellValueValid(row, col, value)) {\n this._showInvalidCell(row, col, value)\n this.closeSelectDropdown()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: value }\n this._emitDataChange(oldData, newData)\n if (typeof colDef.onSelect === 'function') {\n colDef.onSelect({ value, label }, newData[row], row, colDef)\n }\n }\n this.closeSelectDropdown()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n closeSelectDropdown() {\n this.selectDropdown = null\n },\n\n _onWindowScrollForDropdown(e) {\n if (!this.selectDropdown) return\n const comp = this.$refs.selectDropdownComp\n const dd = comp && comp.$el ? comp.$el : null\n if (dd && dd.contains(e.target)) return\n this.closeSelectDropdown()\n },\n\n _onDocMouseDownForDropdown(e) {\n if (!this.selectDropdown) return\n const comp = this.$refs.selectDropdownComp\n const dd = comp && comp.$el ? comp.$el : null\n if (dd && dd.contains(e.target)) return\n this.closeSelectDropdown()\n },\n\n onEditKeyDown(e) {\n if (e.key === 'Escape') {\n e.preventDefault()\n this.cancelEdit()\n } else if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault()\n this.commitEdit()\n this.moveActive(1, 0, e)\n } else if (e.key === 'Tab') {\n e.preventDefault()\n this.commitEdit()\n this.moveActive(0, e.shiftKey ? -1 : 1, e)\n }\n },\n\n clearSelection() {\n if (!this.selectionRanges.length) return\n const oldData = this.data\n const newData = oldData.slice()\n let hasChanges = false\n const skipped = []\n for (const range of this.selectionRanges) {\n const r = {\n startRow: Math.min(range.startRow, range.endRow),\n endRow: Math.max(range.startRow, range.endRow),\n startCol: Math.min(range.startCol, range.endCol),\n endCol: Math.max(range.startCol, range.endCol)\n }\n for (let ri = r.startRow; ri <= r.endRow && ri < newData.length; ri++) {\n let rowUpdated = null\n for (let ci = r.startCol; ci <= r.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, '')) { skipped.push({ row: ri, col: ci, value: '' }); continue }\n if (!rowUpdated) rowUpdated = { ...newData[ri] }\n rowUpdated[col.key] = ''\n hasChanges = true\n }\n }\n if (rowUpdated) newData[ri] = rowUpdated\n }\n }\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n if (hasChanges) this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n // =========================================================\n // FILL HANDLE (3.3)\n // =========================================================\n startFillDrag(e) {\n const pr = this.primaryRange\n if (!pr) return\n this.fillDrag.active = true\n this.fillDrag.sourceRange = normalizeRange(pr)\n this.fillDrag.currentRow = pr.endRow\n this.fillDrag.currentCol = pr.endCol\n e.preventDefault()\n },\n\n onGlobalMouseMove(e) {\n // Detect column drag threshold (5 px)\n if (this.colDrag.pending) {\n if (Math.abs(e.clientX - this.colDrag.startX) > 5) {\n this.colDrag.pending = false\n this.colDrag.active = true\n this.colDrag.dropIndex = this.colDrag.sourceFirstLeaf\n this.isMouseDown = false // cancel cell-selection drag\n }\n }\n if (this.colDrag.active) {\n this.handleColDragMove(e)\n return\n }\n\n if (this.resizing.active) {\n this.handleResizeMove(e)\n return\n }\n if (this.fillDrag.active) {\n this.handleFillDragMove(e)\n return\n }\n if (this.dragMove.active) {\n this.handleDragMoveMove(e)\n return\n }\n },\n\n onGlobalMouseUp(e) {\n if (this.colDrag.active) {\n this.commitColDrag()\n return\n }\n if (this.colDrag.pending) {\n this._resetColDrag()\n // fall through — normal mouseup\n }\n\n if (this.resizing.active) {\n this.commitResize()\n return\n }\n if (this.fillDrag.active) {\n this.commitFillDrag()\n return\n }\n if (this.dragMove.active) {\n this.commitDragMove(e)\n return\n }\n this.isMouseDown = false\n },\n\n handleFillDragMove(e) {\n const scrollBody = this.$refs.scrollBody\n if (!scrollBody) return\n const rect = scrollBody.getBoundingClientRect()\n const relY = e.clientY - rect.top + scrollBody.scrollTop\n const relX = e.clientX - rect.left + scrollBody.scrollLeft\n\n // Binary search on cumulativeHeights — O(log n) instead of O(n)\n const cum = this.cumulativeHeights\n const total = this.totalRows\n let lo = 0, hi = total - 1\n while (lo < hi) {\n const mid = (lo + hi) >> 1\n if (cum[mid + 1] <= relY) lo = mid + 1\n else hi = mid\n }\n const row = Math.min(lo, total - 1)\n\n // Columns are few — O(columns) is fast\n let left = this.getFrozenWidth()\n let col = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColumnScrollable(i)) continue\n left += this.getColW(i)\n if (relX < left) { col = i; break }\n col = i\n }\n\n this.fillDrag.currentRow = row\n this.fillDrag.currentCol = col\n },\n\n commitFillDrag() {\n const src = this.fillDrag.sourceRange\n if (!src) { this.fillDrag.active = false; return }\n\n const targetRow = this.fillDrag.currentRow\n const targetCol = this.fillDrag.currentCol\n\n const oldData = this.data\n const newData = oldData.slice() // only affected rows get new objects\n let targetRange\n const skipped = []\n\n if (targetRow > src.endRow) {\n // Fill down\n const count = targetRow - src.endRow\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (!col) continue\n const srcValues = []\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n srcValues.push(oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ri = src.endRow + 1 + k\n if (ri < this.totalRows && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n targetRange = { startRow: src.endRow + 1, endRow: targetRow, startCol: src.startCol, endCol: src.endCol }\n } else if (targetCol > src.endCol) {\n // Fill right\n const count = targetCol - src.endCol\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n const srcValues = []\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n srcValues.push(col && oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ci = src.endCol + 1 + k\n if (ci < this.leafCols.length) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n }\n targetRange = { startRow: src.startRow, endRow: src.endRow, startCol: src.endCol + 1, endCol: targetCol }\n }\n\n if (targetRange) {\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n } else {\n this._emitDataChange(oldData, newData)\n this.$emit('fill', { sourceRange: src, targetRange, values: newData })\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n }\n }\n\n this.fillDrag.active = false\n this.fillDrag.sourceRange = null\n },\n\n doubleFillDown() {\n const pr = this.primaryRange\n if (!pr) return\n const src = normalizeRange(pr)\n // Find adjacent column filled length\n const adjCol = src.startCol > 0 ? src.startCol - 1 : src.endCol + 1\n if (adjCol < 0 || adjCol >= this.leafCols.length) return\n const adjColDef = this.leafCols[adjCol]\n if (!adjColDef) return\n let lastFilledRow = src.endRow\n for (let ri = src.endRow + 1; ri < this.totalRows; ri++) {\n if (this.data[ri] && this.data[ri][adjColDef.key] !== '' && this.data[ri][adjColDef.key] !== undefined) {\n lastFilledRow = ri\n } else break\n }\n if (lastFilledRow <= src.endRow) return\n\n const count = lastFilledRow - src.endRow\n const oldData = this.data\n const newData = oldData.slice()\n const skipped = []\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (!col) continue\n const srcValues = []\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n srcValues.push(oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ri = src.endRow + 1 + k\n if (ri < this.totalRows && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n // =========================================================\n // COPY / PASTE (3.4)\n // =========================================================\n copySelection() {\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n this.clipboardMatrix = extractMatrix(this.data, this.leafCols, r)\n this.clipboardRange = r\n this.clipboardMode = 'copy'\n\n // Write to system clipboard as TSV\n const tsv = matrixToTSV(this.clipboardMatrix)\n if (navigator.clipboard) {\n navigator.clipboard.writeText(tsv).catch(() => {})\n }\n },\n\n cutSelection() {\n this.copySelection()\n this.clipboardMode = 'cut'\n },\n\n async pasteAt(targetRow, targetCol, options = {}) {\n const { mode = 'all', transpose = false } = options\n\n let matrix = null\n\n // Try system clipboard first\n if (navigator.clipboard) {\n try {\n const text = await navigator.clipboard.readText()\n if (text) matrix = tsvToMatrix(text)\n } catch (_) {}\n }\n\n // Fall back to internal clipboard\n if (!matrix && this.clipboardMatrix) {\n matrix = this.clipboardMatrix\n }\n\n if (!matrix) return\n\n if (transpose) matrix = transposeMatrix(matrix)\n\n // ── Excel-style selection broadcast / tiling ──────────────────────────\n // When pasting over a multi-cell selection and the clipboard matrix is\n // smaller than the selection, tile the matrix to fill the selection —\n // provided the selection dimensions are exact multiples of the matrix\n // dimensions (matches Excel's tiling rule exactly).\n // Cut-paste is never tiled (source must be cleared exactly once).\n const isCopyPaste = !this.clipboardMode || this.clipboardMode === 'copy'\n if (isCopyPaste) {\n const pr = this.primaryRange\n if (pr) {\n const sel = normalizeRange(pr)\n const selRows = sel.endRow - sel.startRow + 1\n const selCols = sel.endCol - sel.startCol + 1\n const matRows = matrix.length\n const matCols = matrix[0] ? matrix[0].length : 0\n\n // Only tile when selection is strictly larger than clipboard\n if ((selRows > matRows || selCols > matCols) &&\n selRows % matRows === 0 && selCols % matCols === 0) {\n matrix = tileMatrix(matrix, selRows, selCols)\n // Paste at selection origin, not just at the active cell\n targetRow = sel.startRow\n targetCol = sel.startCol\n }\n }\n }\n\n const oldData = this.data\n const { newData, affectedRange, skipped } = applyMatrix(\n oldData, this.leafCols, targetRow, targetCol, matrix, mode,\n (ri, ci) => this.isCellEditable(ri, ci),\n (ri, ci, v) => this.isCellValueValid(ri, ci, v)\n )\n\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n\n if (this.clipboardMode === 'cut' && this.clipboardRange) {\n // Clear source — ensure each source row is a new copy before mutation\n const src = this.clipboardRange\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci) && this.isCellValueValid(ri, ci, '')) {\n newData[ri][col.key] = ''\n }\n }\n }\n this.clipboardRange = null\n this.clipboardMode = null\n }\n\n this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n ctxCopy() { this.hideContextMenu(); this.copySelection() },\n ctxCut() { this.hideContextMenu(); this.cutSelection() },\n ctxPaste() { this.hideContextMenu(); this.pasteAt(this.activeCell.row, this.activeCell.col) },\n ctxPasteSpecial(mode, transpose = false) {\n this.hideContextMenu()\n this.pasteAt(this.activeCell.row, this.activeCell.col, { mode, transpose })\n },\n\n // =========================================================\n // COLUMN DRAG-AND-DROP\n // =========================================================\n\n _computeDragOffsets(dropIndex) {\n const { sourceFirstLeaf, sourceLeafCount } = this.colDrag\n if (dropIndex < 0 || (dropIndex >= sourceFirstLeaf && dropIndex <= sourceFirstLeaf + sourceLeafCount)) return {}\n\n const previewCols = moveColumnNodeInTree(this.columns, sourceFirstLeaf, sourceLeafCount, dropIndex)\n const previewLeaves = flattenColumns(previewCols)\n\n const byKey = {}\n this.leafCols.forEach(c => { byKey[c.key] = c })\n\n const offsets = {}\n for (const zone of ['left', 'scroll', 'right']) {\n const inZone = zone === 'left'\n ? ci => this.isColumnPinnedLeft(ci)\n : zone === 'right'\n ? ci => this.isColumnPinnedRight(ci)\n : ci => this.isColumnScrollable(ci)\n\n const origPos = {}\n let acc = 0\n this.leafCols.forEach(col => {\n const ci = col._flatIndex\n if (this.isColHidden(ci) || !inZone(ci)) return\n origPos[col.key] = acc\n acc += this.getColW(ci)\n })\n\n const previewPos = {}\n acc = 0\n for (const col of previewLeaves) {\n const origCol = byKey[col.key]\n if (!origCol) continue\n const ci = origCol._flatIndex\n if (this.isColHidden(ci) || !inZone(ci)) continue\n previewPos[col.key] = acc\n acc += this.getColW(ci)\n }\n\n for (const key of Object.keys(origPos)) {\n offsets[key] = (previewPos[key] !== undefined ? previewPos[key] : origPos[key]) - origPos[key]\n }\n }\n return offsets\n },\n\n _applyDragTransforms(offsets) {\n if (!this.$el) return\n const targets = []\n const dxMap = new Map()\n\n this.$el.querySelectorAll('[data-fi]').forEach(el => {\n const fi = parseInt(el.dataset.fi)\n const col = this.leafCols[fi]\n const dx = col ? (offsets[col.key] || 0) : 0\n targets.push(el)\n dxMap.set(el, dx)\n })\n this.$el.querySelectorAll('[data-start]').forEach(el => {\n const start = parseInt(el.dataset.start)\n const end = parseInt(el.dataset.end)\n if (isNaN(start)) return\n let key = null\n for (let i = start; i <= end; i++) {\n if (!this.isColHidden(i) && this.leafCols[i]) { key = this.leafCols[i].key; break }\n }\n targets.push(el)\n dxMap.set(el, key ? (offsets[key] || 0) : 0)\n })\n if (!targets.length) return\n\n // anime.remove cancels any in-progress animation before starting the new one.\n // This prevents chaining/overlap when dropIndex changes rapidly (no flickering).\n anime.remove(targets)\n anime({\n targets,\n translateX: el => dxMap.get(el) || 0,\n duration: 80,\n easing: 'easeOutQuart'\n })\n },\n\n _clearDragTransforms() {\n if (!this.$el) return\n const els = Array.from(this.$el.querySelectorAll('[data-fi], [data-start]'))\n // Kill all anime animations first, then instantly clear inline styles\n anime.remove(els)\n els.forEach(el => {\n el.style.transform = ''\n el.style.transition = ''\n })\n },\n\n handleColDragMove(e) {\n // Update ghost position via direct DOM — avoids Vue re-render on every mousemove\n const ghost = this.$refs.colDragGhost\n if (ghost) {\n ghost.style.left = (e.clientX + 16) + 'px'\n ghost.style.top = (e.clientY - 14) + 'px'\n }\n\n const prevDrop = this.colDrag.dropIndex\n this._updateColDragDropIndex(e.clientX)\n const newDrop = this.colDrag.dropIndex\n\n if (newDrop !== prevDrop) {\n this._dragOffsets = this._computeDragOffsets(newDrop)\n this._applyDragTransforms(this._dragOffsets)\n }\n },\n\n _updateColDragDropIndex(clientX) {\n if (!this.$el) return\n const n = this.leafCols.length\n if (n === 0) { this.colDrag.dropIndex = 0; return }\n\n // Use DOM cell rects but subtract CSS transforms so we get ORIGINAL positions.\n // This avoids circular dependency: live-preview transforms don't affect drop calc.\n const cells = Array.from(this.$el.querySelectorAll('.eg-header-cell:not(.eg-header-group)'))\n .map(el => {\n const fi = parseInt(el.dataset.fi)\n if (isNaN(fi)) return null\n const rect = el.getBoundingClientRect()\n const m = (el.style.transform || '').match(/translateX\\((-?[\\d.]+)px\\)/)\n const dx = m ? parseFloat(m[1]) : 0\n return { fi, left: rect.left - dx, right: rect.right - dx }\n })\n .filter(Boolean)\n .sort((a, b) => a.left - b.left)\n\n if (!cells.length) { this.colDrag.dropIndex = n; return }\n\n let dropIndex = n\n for (const { fi, left, right } of cells) {\n if (clientX < right) {\n dropIndex = clientX < left + (right - left) / 2 ? fi : fi + 1\n break\n }\n }\n this.colDrag.dropIndex = dropIndex\n },\n\n commitColDrag() {\n const from = this.colDrag.sourceFirstLeaf\n const leafCount = this.colDrag.sourceLeafCount\n const to = this.colDrag.dropIndex\n\n if (from < 0 || to < 0 || leafCount < 1) { this._resetColDrag(); return }\n if (to >= from && to <= from + leafCount) { this._resetColDrag(); return }\n\n // Kill anime animations but KEEP transform values in DOM while Vue re-renders\n // with the new column order. After Vue updates left positions ($nextTick),\n // we instantly clear transforms — both steps run as microtasks before browser paints,\n // so there is never a visible intermediate state.\n if (this.$el) {\n anime.remove(Array.from(this.$el.querySelectorAll('[data-fi], [data-start]')))\n }\n this._dragOffsets = {}\n this.colDrag.pending = false\n this.colDrag.active = false\n this.colDrag.sourceFirstLeaf = -1\n this.colDrag.sourceLeafCount = 1\n this.colDrag.dropIndex = -1\n this.colDrag.ghostLabel = ''\n\n const newCols = moveColumnNodeInTree(this.columns, from, leafCount, to)\n this.$emit('update:columns', newCols)\n this.$emit('column-reorder', { fromIndex: from, toIndex: to, columns: newCols })\n\n // Clear transforms after Vue re-renders new column left positions\n this.$nextTick(() => { this._clearDragTransforms() })\n },\n\n _resetColDrag() {\n this._dragOffsets = {}\n this.colDrag.pending = false\n this.colDrag.active = false\n this.colDrag.sourceFirstLeaf = -1\n this.colDrag.sourceLeafCount = 1\n this.colDrag.dropIndex = -1\n this.colDrag.ghostLabel = ''\n this._clearDragTransforms()\n },\n\n // =========================================================\n // RESIZE (3.5)\n // =========================================================\n startColResize(e, ci) {\n const rect = this.$refs.wrapper.getBoundingClientRect()\n this.resizing = {\n active: true,\n type: 'col',\n index: ci,\n startX: e.clientX,\n startY: e.clientY,\n startSize: this.getColW(ci),\n currentPos: e.clientX\n }\n e.preventDefault()\n },\n\n startRowResize(e, ri) {\n this.resizing = {\n active: true,\n type: 'row',\n index: ri,\n startX: e.clientX,\n startY: e.clientY,\n startSize: this.getRowH(ri),\n currentPos: e.clientY\n }\n e.preventDefault()\n },\n\n handleResizeMove(e) {\n if (this.resizing.type === 'col') {\n this.resizing.currentPos = e.clientX\n const newWidth = Math.max(20, this.resizing.startSize + (e.clientX - this.resizing.startX))\n this.$set(this.colWidths, this.resizing.index, newWidth)\n this._cellStyleCache = Object.create(null)\n } else {\n this.resizing.currentPos = e.clientY\n this._resizePreviewHeight = Math.max(10, this.resizing.startSize + (e.clientY - this.resizing.startY))\n // Batch $set + updateVirtualScroll to rAF — prevents O(n) cumulativeHeights rebuild\n // on every mousemove (200+ Hz). At most 60 rebuilds/sec instead of 200+.\n if (!this._resizeRAF) {\n this._resizeRAF = requestAnimationFrame(() => {\n this._resizeRAF = null\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n this._cellStyleCache = Object.create(null)\n this.$set(this.rowHeights, this.resizing.index, this._resizePreviewHeight)\n this.updateVirtualScroll()\n })\n }\n }\n },\n\n commitResize() {\n if (this._resizeRAF) {\n cancelAnimationFrame(this._resizeRAF)\n this._resizeRAF = null\n // Apply the last pending preview height immediately on commit\n if (this.resizing.type === 'row' && this._resizePreviewHeight !== undefined) {\n this.$set(this.rowHeights, this.resizing.index, this._resizePreviewHeight)\n }\n }\n if (this.resizing.type === 'col') {\n this._cellStyleCache = Object.create(null)\n const newSize = this.colWidths[this.resizing.index]\n this.$emit('column-resize', { index: this.resizing.index, newSize })\n } else {\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n this._cellStyleCache = Object.create(null)\n const newSize = this.rowHeights[this.resizing.index]\n this.$emit('row-resize', { index: this.resizing.index, newSize })\n this.updateVirtualScroll()\n }\n this.resizing.active = false\n },\n\n autoFitColumn(ci) {\n const col = this.leafCols[ci]\n if (!col) return\n let maxLen = (col.title || '').length\n for (let ri = 0; ri < Math.min(this.totalRows, 500); ri++) {\n const v = this.data[ri] ? String(this.data[ri][col.key] || '') : ''\n if (v.length > maxLen) maxLen = v.length\n }\n const newWidth = Math.max(50, maxLen * 8 + 16)\n this.$set(this.colWidths, ci, newWidth)\n this._cellStyleCache = Object.create(null)\n this.$emit('column-resize', { index: ci, newSize: newWidth })\n },\n\n _applyAutoWidth() {\n if (!this.autoWidth || !this.leafCols.length) return\n this.leafCols.forEach((col, ci) => {\n let maxLen = (col.title || '').length\n for (let ri = 0; ri < Math.min(this.totalRows, 500); ri++) {\n const v = this.data[ri] ? String(this.data[ri][col.key] || '') : ''\n if (v.length > maxLen) maxLen = v.length\n }\n this.$set(this.colWidths, ci, Math.max(50, maxLen * 8 + 16))\n })\n this._cellStyleCache = Object.create(null)\n },\n\n ctxHideRow() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n const newHidden = [...this.hiddenRows]\n for (let ri = r.startRow; ri <= r.endRow; ri++) {\n if (!newHidden.includes(ri)) newHidden.push(ri)\n }\n this.$emit('update:hiddenRows', newHidden)\n },\n\n ctxHideColumn() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n const newHidden = [...this.hiddenColumns]\n for (let ci = r.startCol; ci <= r.endCol; ci++) {\n if (!newHidden.includes(ci)) newHidden.push(ci)\n }\n this.$emit('update:hiddenColumns', newHidden)\n },\n\n ctxUnhideRows() {\n this.hideContextMenu()\n this.$emit('update:hiddenRows', [])\n },\n\n ctxUnhideColumns() {\n this.hideContextMenu()\n this.$emit('update:hiddenColumns', [])\n },\n\n ctxPinLeft() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n this.$emit('update:pinnedColumns', { ...this.pinnedColumns, [col.key]: 'left' })\n this.hideContextMenu()\n },\n\n ctxPinRight() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n this.$emit('update:pinnedColumns', { ...this.pinnedColumns, [col.key]: 'right' })\n this.hideContextMenu()\n },\n\n ctxUnpin() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n const next = { ...this.pinnedColumns }\n delete next[col.key]\n this.$emit('update:pinnedColumns', next)\n this.hideContextMenu()\n },\n\n isColPinned(ci) {\n const col = this.leafCols[ci]\n return !!(col && this.pinnedColumns[col.key])\n },\n\n // =========================================================\n // MERGE CELLS (3.8)\n // =========================================================\n mergeCells(range) {\n const oldMerges = this.internalMerges.slice()\n const { merges: newMerges, conflict } = addMerge(range, this.internalMerges)\n if (conflict) {\n this.$emit('merge-error', { range, reason: 'Overlaps existing merge' })\n return false\n }\n this.internalMerges = newMerges\n this._emitMergeChange(oldMerges, [...newMerges])\n return true\n },\n\n unmergeCells(row, col) {\n const oldMerges = this.internalMerges.slice()\n const newMerges = removeMergeAt(row, col, this.internalMerges)\n this.internalMerges = newMerges\n this._emitMergeChange(oldMerges, [...newMerges])\n },\n\n ctxMerge() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n this.mergeCells(normalizeRange(pr))\n },\n\n ctxUnmerge() {\n this.hideContextMenu()\n this.unmergeCells(this.activeCell.row, this.activeCell.col)\n },\n\n // =========================================================\n // GROUPING (3.7)\n // =========================================================\n groupRows(startIndex, endIndex) {\n this.internalGroups = addGroup('row', startIndex, endIndex, this.internalGroups)\n },\n\n groupColumns(startIndex, endIndex) {\n this.internalGroups = addGroup('column', startIndex, endIndex, this.internalGroups)\n },\n\n ungroupRows(startIndex, endIndex) {\n this.internalGroups = removeGroup('row', startIndex, endIndex, this.internalGroups)\n },\n\n ungroupColumns(startIndex, endIndex) {\n this.internalGroups = removeGroup('column', startIndex, endIndex, this.internalGroups)\n },\n\n toggleGroup(group) {\n this.internalCollapsedGroups = toggleGroupCollapse(group, this.internalCollapsedGroups)\n this.$emit('update:collapsedGroups', [...this.internalCollapsedGroups])\n this.$emit('group-toggle', { group, collapsed: _isGroupCollapsed(group, this.internalCollapsedGroups) })\n this.updateVirtualScroll()\n },\n\n isGroupCollapsed(group) {\n return _isGroupCollapsed(group, this.internalCollapsedGroups)\n },\n\n expandAll() {\n this.internalCollapsedGroups = []\n this.$emit('update:collapsedGroups', [])\n this.updateVirtualScroll()\n },\n\n collapseAll() {\n this.internalCollapsedGroups = [...this.internalGroups]\n this.$emit('update:collapsedGroups', [...this.internalGroups])\n this.updateVirtualScroll()\n },\n\n // =========================================================\n // DRAG AND DROP (3.9)\n // =========================================================\n startDragMove(e, ri, ci) {\n const pr = this.primaryRange\n if (!pr) return\n this.dragMove = {\n active: true,\n sourceRange: normalizeRange(pr),\n startX: e.clientX,\n startY: e.clientY,\n targetRow: ri,\n targetCol: ci,\n copyMode: e.ctrlKey || e.metaKey\n }\n this.$emit('cell-drag-start', { sourceRange: this.dragMove.sourceRange })\n e.preventDefault()\n },\n\n handleDragMoveMove(e) {\n this.dragMove.copyMode = e.ctrlKey || e.metaKey\n this.$emit('cell-drag-move', {\n sourceRange: this.dragMove.sourceRange,\n targetRow: this.dragMove.targetRow,\n targetCol: this.dragMove.targetCol\n })\n },\n\n async commitDragMove(e) {\n if (!this.dragMove.active) return\n const { sourceRange, targetRow, targetCol, copyMode } = this.dragMove\n\n const targetRange = {\n startRow: targetRow,\n startCol: targetCol,\n endRow: targetRow + (sourceRange.endRow - sourceRange.startRow),\n endCol: targetCol + (sourceRange.endCol - sourceRange.startCol)\n }\n\n let proceed = true\n if (this.beforeDrop) {\n proceed = await Promise.resolve(this.beforeDrop(sourceRange, targetRange))\n }\n\n if (proceed) {\n const oldData = this.data\n const matrix = extractMatrix(oldData, this.leafCols, sourceRange)\n const { newData } = applyMatrix(oldData, this.leafCols, targetRow, targetCol, matrix, 'all', (ri, ci) => this.isCellEditable(ri, ci))\n\n if (!copyMode) {\n // Clear source — ensure each source row is a new copy before mutation\n for (let ri = sourceRange.startRow; ri <= sourceRange.endRow; ri++) {\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n for (let ci = sourceRange.startCol; ci <= sourceRange.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) newData[ri][col.key] = ''\n }\n }\n }\n this._emitDataChange(oldData, newData)\n this.$emit('cell-drop', { sourceRange, targetRange })\n }\n\n this.dragMove = { active: false, sourceRange: null, startX: 0, startY: 0, targetRow: -1, targetCol: -1, copyMode: false }\n this.isMouseDown = false\n },\n\n // =========================================================\n // EXCEL EXPORT (3.11)\n // =========================================================\n async exportToExcel(options = {}) {\n const {\n filename = 'export.xlsx',\n sheetName = 'Sheet1',\n scope = 'all',\n includeHidden = false\n } = options\n\n this.$emit('export-start')\n this.exportState = { active: true }\n\n const workerPayload = {\n data: this.data,\n columns: this.columns,\n leafCols: this.leafCols,\n merges: this.internalMerges,\n hiddenCols: [...this.effectiveHiddenColSet],\n hiddenRows: [...this.hiddenRowSet],\n range: scope === 'selection' ? this.primaryRange : null,\n filename,\n sheetName,\n scope,\n includeHidden\n }\n\n try {\n const worker = createExcelExportWorker()\n if (worker) {\n await this._exportViaWorker(worker, workerPayload)\n } else {\n // Fallback: synchronous export on main thread\n _exportToExcel({\n ...workerPayload,\n hiddenColSet: this.effectiveHiddenColSet,\n hiddenRowSet: this.hiddenRowSet\n })\n }\n this.$emit('export-success')\n } catch (err) {\n this.$emit('export-error', err)\n } finally {\n this.exportState = { active: false }\n }\n },\n\n _exportViaWorker(worker, payload) {\n return new Promise((resolve, reject) => {\n let done = false\n const finish = (fn, val) => {\n if (done) return\n done = true\n worker.terminate()\n fn(val)\n }\n\n worker.onmessage = (e) => {\n const { type, buffer, filename, message } = e.data\n if (type === 'result') {\n // Trigger browser download from the main thread (DOM required)\n const blob = new Blob([new Uint8Array(buffer)], {\n type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'\n })\n const url = URL.createObjectURL(blob)\n const a = document.createElement('a')\n a.href = url\n a.download = filename\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n finish(resolve)\n } else if (type === 'error') {\n finish(reject, new Error(message))\n }\n }\n\n worker.onerror = (err) => finish(reject, new Error(err.message || 'Export worker xatosi'))\n\n worker.postMessage(payload)\n })\n },\n\n // =========================================================\n // EXCEL IMPORT (3.12)\n // =========================================================\n async importFromFile(file, options = {}) {\n this.importState = { active: true, percent: 5, message: \"Fayl o'qilmoqda...\" }\n\n try {\n let result\n const worker = createExcelImportWorker()\n\n if (worker) {\n result = await this._importViaWorker(worker, file, options)\n } else {\n // Fallback: chunked async on main thread\n result = await _importFromFile(\n file,\n this.columns,\n options,\n (percent, message) => { this.importState = { active: true, percent, message } }\n )\n }\n\n const { columns, merges } = result\n // Freeze each row so Vue 2 skips deep Object.defineProperty observation.\n // Vue 2 checks Object.isExtensible() — frozen objects are skipped entirely.\n // All edit paths already use spread ({ ...row }) so frozen rows are safe.\n const data = result.data.map(row => Object.freeze(row))\n this.$emit('input', data)\n this.$emit('update:columns', columns)\n\n const hasMerges = merges && merges.length > 0\n this.internalMerges = hasMerges ? merges : []\n this.$emit('update:merges', hasMerges ? merges : [])\n this.$emit('update:collapsedGroups', [])\n this.$emit('update:hiddenRows', [])\n this.$emit('import-success', { data, columns, merges })\n\n // Reset scroll state and re-derive virtual scroll after DOM settles.\n // Without this, stale scrollTop + old rowHeights cause blank bands on scroll.\n this.rowHeights = {}\n this.scrollTop = 0\n this.scrollLeft = 0\n this.$nextTick(() => {\n if (this.$refs.scrollBody) {\n this.$refs.scrollBody.scrollTop = 0\n this.$refs.scrollBody.scrollLeft = 0\n }\n if (this.$refs.scrollColHeader) this.$refs.scrollColHeader.scrollLeft = 0\n if (this.$refs.scrollFooter) this.$refs.scrollFooter.scrollLeft = 0\n if (this.$refs.scrollRowHeaders) this.$refs.scrollRowHeaders.scrollTop = 0\n this.updateVirtualScroll()\n })\n } catch (err) {\n this.$emit('import-error', err)\n } finally {\n this.importState = { active: false, percent: 0, message: '' }\n }\n },\n\n _importViaWorker(worker, file, options) {\n return new Promise(async (resolve, reject) => {\n let done = false\n const finish = (fn, val) => {\n if (done) return\n done = true\n worker.terminate()\n fn(val)\n }\n\n worker.onmessage = (e) => {\n const { type, percent, message, data, columns, merges } = e.data\n if (type === 'progress') {\n this.importState = { active: true, percent, message }\n } else if (type === 'result') {\n finish(resolve, { data, columns, merges })\n } else if (type === 'error') {\n finish(reject, new Error(message))\n }\n }\n\n worker.onerror = (err) => finish(reject, new Error(err.message || 'Import worker xatosi'))\n\n try {\n // Transfer the ArrayBuffer zero-copy into the worker\n const buffer = await file.arrayBuffer()\n worker.postMessage(\n { buffer, existingColumns: this.columns, options },\n [buffer]\n )\n } catch (err) {\n finish(reject, err)\n }\n })\n },\n\n // =========================================================\n // UNDO / REDO (3.13)\n // =========================================================\n\n // Push one entry onto the non-reactive history stack.\n // Truncates the redo tail, caps at 100 entries.\n _pushHistory(entry) {\n if (this._historyIndex < this._history.length - 1) {\n this._history.splice(this._historyIndex + 1)\n }\n this._history.push(entry)\n if (this._history.length > 100) {\n this._history.shift()\n // historyIndex stays the same — it now points to the new last entry\n } else {\n this._historyIndex++\n }\n },\n\n // Emit 'input' and record a data diff entry (only changed row indices).\n // Use slice() + per-row spread in callers so unchanged rows keep the\n // same reference — then the identity check here catches only real changes.\n _emitDataChange(oldData, newData) {\n if (!this._historySkip) {\n const indices = []\n const beforeRows = []\n const afterRows = []\n const len = Math.max(oldData.length, newData.length)\n for (let i = 0; i < len; i++) {\n if (oldData[i] !== newData[i]) {\n indices.push(i)\n beforeRows.push(oldData[i])\n afterRows.push(newData[i])\n }\n }\n if (indices.length > 0) {\n this._pushHistory({\n type: 'data',\n before: { indices, rows: beforeRows },\n after: { indices, rows: afterRows }\n })\n }\n }\n this.$emit('input', newData)\n },\n\n // Emit 'update:merges' and record a merges diff entry.\n _emitMergeChange(oldMerges, newMerges) {\n if (!this._historySkip) {\n this._pushHistory({\n type: 'merges',\n before: oldMerges,\n after: newMerges\n })\n }\n this.$emit('update:merges', newMerges)\n },\n\n undo() {\n if (this._historyIndex < 0) return\n const entry = this._history[this._historyIndex--]\n this._historySkip = true\n try {\n if (entry.type === 'data') {\n const newData = this.data.slice()\n for (let i = 0; i < entry.before.indices.length; i++) {\n newData[entry.before.indices[i]] = entry.before.rows[i]\n }\n this.$emit('input', newData)\n } else if (entry.type === 'merges') {\n this.internalMerges = entry.before.slice()\n this.$emit('update:merges', entry.before.slice())\n }\n } finally {\n this._historySkip = false\n }\n },\n\n redo() {\n if (this._historyIndex >= this._history.length - 1) return\n const entry = this._history[++this._historyIndex]\n this._historySkip = true\n try {\n if (entry.type === 'data') {\n const newData = this.data.slice()\n for (let i = 0; i < entry.after.indices.length; i++) {\n newData[entry.after.indices[i]] = entry.after.rows[i]\n }\n this.$emit('input', newData)\n } else if (entry.type === 'merges') {\n this.internalMerges = entry.after.slice()\n this.$emit('update:merges', entry.after.slice())\n }\n } finally {\n this._historySkip = false\n }\n }\n }\n}\n<\/script>\n\n<style scoped>\n.eg-wrapper {\n /* ── Design tokens (Excel 365 defaults) — override on :root or any ancestor of <excel-grid> ──\n Full reference: docs/theming.md\n */\n\n /* --- Typography --- */\n --eg-font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;\n --eg-font-size: 14px;\n --eg-font-size-header: 11px;\n\n /* --- Shape --- */\n --eg-radius: 0px;\n --eg-cell-padding-x: 3px;\n\n /* --- Accent (Excel green) --- */\n --eg-color-accent: #217346;\n --eg-color-accent-dark: #185a30;\n --eg-color-accent-soft: rgba(33, 115, 70, 0.15);\n\n /* --- Error / Validation --- */\n --eg-color-error: #c00000;\n --eg-color-error-soft: #fff2f2;\n --eg-color-error-dark: #9b0000;\n\n /* --- Borders --- */\n --eg-color-border: #d9d9d9;\n --eg-color-border-cell: #d9d9d9;\n --eg-color-border-strong: #bfbfbf;\n\n /* --- Header --- */\n --eg-color-header-bg: #f2f2f2;\n --eg-color-header-group-bg: #f2f2f2;\n --eg-color-group-border: #92d050;\n --eg-color-group-bg-collapsed: #70ad47;\n\n /* --- Cell states --- */\n --eg-color-cell-bg: #ffffff;\n --eg-color-cell-selected: #bdd7ee;\n --eg-color-cell-fill-preview: #9bc2e6;\n --eg-color-cell-readonly: #f2f2f2;\n --eg-color-cell-readonly-selected: #a9c9e4;\n --eg-color-footer-bg: #f2f2f2;\n\n /* --- Text --- */\n --eg-color-text: #000000;\n --eg-color-text-secondary: #595959;\n --eg-color-text-muted: #767676;\n\n /* --- Shadows --- */\n --eg-shadow-dropdown: 1px 2px 8px rgba(0, 0, 0, 0.18);\n --eg-shadow-dialog: 0 2px 12px rgba(0, 0, 0, 0.22);\n --eg-shadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.18);\n --eg-color-freeze-shadow: rgba(0, 0, 0, 0.12);\n\n /* --- Overlay & dropdown options --- */\n --eg-color-overlay-bg: rgba(255, 255, 255, 0.88);\n --eg-color-option-hover-bg: #e2efda;\n --eg-color-option-active-hover-bg: #c6e0b4;\n\n /* --- Checkbox --- */\n --eg-color-checkbox-border: #767676;\n --eg-color-checkbox-disabled-checked: #bfbfbf;\n\n /* --- Row effects (off by default) --- */\n --eg-color-row-hover: transparent;\n --eg-color-row-stripe: transparent;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n font-family: var(--eg-font-family);\n}\n\n.eg-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: auto;\n position: relative;\n}\n\n.eg-header-area {\n display: flex;\n flex-shrink: 0;\n box-shadow: 0 2px 0 0 var(--eg-color-border-cell);\n position: relative;\n z-index: 31;\n}\n\n.eg-header-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border);\n border-bottom: 1px solid var(--eg-color-border);\n background: var(--eg-color-header-bg);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n position: absolute;\n user-select: none;\n cursor: pointer;\n}\n\n.eg-header-cell:hover { background: var(--eg-color-border-cell); }\n.eg-header-group { background: var(--eg-color-header-group-bg); }\n\n.eg-col-resize-handle {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 5px;\n cursor: col-resize;\n z-index: 5;\n}\n\n.eg-body-area {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n/* ===== FOOTER AREA (column totals) ===== */\n.eg-footer-area {\n border-top: 1px solid var(--eg-color-border);\n}\n\n.eg-frozen-col-footer,\n.eg-scroll-col-footer,\n.eg-pinned-right-footer {\n position: relative;\n}\n\n.eg-footer-cell {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n font-weight: 600;\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-footer-bg);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n\n.eg-row {\n position: relative;\n}\n\n.eg-cell {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n border-bottom: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-cell-bg);\n cursor: default;\n display: flex;\n align-items: center;\n}\n\n.eg-cell-value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n.eg-cell--has-suffix.eg-cell-select::after { display: none; }\n.eg-cell-select-trigger-wrap {\n flex: 1;\n display: flex;\n align-items: center;\n overflow: hidden;\n min-width: 0;\n}\n.eg-cell-select-caret-inline {\n flex-shrink: 0;\n color: var(--eg-color-text-muted);\n font-size: 11px;\n margin-left: 2px;\n}\n.eg-cell-suffix-wrap {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n}\n.eg-cell-active {\n outline: 2px solid var(--eg-color-accent) !important;\n outline-offset: -2px;\n z-index: 3;\n}\n\n.eg-cell-selected {\n background: var(--eg-color-cell-selected) !important;\n}\n\n.eg-cell-fill-preview {\n background: var(--eg-color-cell-fill-preview) !important;\n outline: 1px dashed var(--eg-color-accent-dark);\n outline-offset: -1px;\n}\n\n.eg-cell-copy {\n outline: 1px dashed var(--eg-color-accent);\n outline-offset: -1px;\n}\n\n.eg-cell-merged-hidden {\n display: none !important;\n}\n\n.eg-cell-invalid {\n outline: 2px solid var(--eg-color-error) !important;\n outline-offset: -2px;\n z-index: 4;\n}\n\n.eg-cell-input {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: var(--eg-color-cell-bg);\n font-size: var(--eg-font-size);\n font-family: inherit;\n padding: 0;\n}\n\n.eg-row-header-cell {\n box-sizing: border-box;\n background: var(--eg-color-header-bg);\n border-bottom: 1px solid var(--eg-color-border-cell);\n border-right: 2px solid var(--eg-color-border-strong);\n text-align: center;\n font-size: 11px;\n color: var(--eg-color-text-secondary);\n cursor: pointer;\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.eg-row-resize-handle {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 4px;\n cursor: row-resize;\n z-index: 5;\n}\n\n.eg-fill-handle {\n position: absolute;\n width: 6px;\n height: 6px;\n background: var(--eg-color-accent);\n border: 1px solid white;\n cursor: crosshair;\n z-index: 10;\n}\n\n.eg-context-menu {\n position: fixed;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n z-index: 9999;\n min-width: 160px;\n font-size: var(--eg-font-size);\n padding: 4px 0;\n}\n\n.eg-context-item {\n padding: 6px 16px;\n cursor: pointer;\n position: relative;\n}\n\n.eg-context-item:hover { background: var(--eg-color-header-bg); }\n\n.eg-context-separator {\n height: 1px;\n background: var(--eg-color-border-cell);\n margin: 4px 0;\n}\n\n.eg-context-submenu-parent::after { content: ' ▶'; float: right; }\n\n.eg-context-submenu {\n display: none;\n position: absolute;\n left: 100%;\n top: -4px;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n min-width: 160px;\n padding: 4px 0;\n z-index: 10000;\n}\n\n.eg-context-submenu-parent:hover .eg-context-submenu { display: block; }\n\n.eg-group-btn {\n position: absolute;\n width: 16px;\n height: 16px;\n line-height: 14px;\n text-align: center;\n font-size: 10px;\n cursor: pointer;\n background: var(--eg-color-header-group-bg);\n border: 1px solid var(--eg-color-group-border);\n border-radius: 2px;\n z-index: 5;\n user-select: none;\n}\n\n.eg-group-btn.collapsed { background: var(--eg-color-group-bg-collapsed); }\n\n.eg-drag-ghost {\n position: absolute;\n border: 2px dashed var(--eg-color-accent);\n pointer-events: none;\n z-index: 20;\n}\n\n/* Column drag-and-drop */\n.eg-header-cell--drag-source {\n opacity: 0.5;\n outline: 1px solid var(--eg-color-accent);\n outline-offset: -1px;\n}\n.eg-cell--drag-source {\n opacity: 0.4;\n}\n.eg-col-drag-ghost {\n position: fixed;\n padding: 3px 10px;\n background: var(--eg-color-header-bg);\n border: 1px solid var(--eg-color-accent);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n color: var(--eg-color-text);\n white-space: nowrap;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.92;\n transform: translateY(-2px);\n}\n\n.eg-resize-line {\n pointer-events: none;\n z-index: 9999;\n}\n\n/* Pin left separator shadow */\n.eg-frozen-col-body::after {\n content: '';\n position: absolute;\n top: 0;\n right: -4px;\n width: 4px;\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n\n.eg-pinned-right-body {\n position: sticky;\n right: 0;\n z-index: 10;\n background: var(--eg-color-cell-bg);\n flex-shrink: 0;\n}\n\n.eg-pinned-right-body::before {\n content: '';\n position: absolute;\n top: 0;\n left: -4px;\n bottom: 0;\n width: 4px;\n background: linear-gradient(to left, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n\n.eg-pinned-right-header {\n overflow: hidden;\n flex-shrink: 0;\n border-left: 2px solid var(--eg-color-border-strong);\n background: var(--eg-color-header-bg);\n}\n\n.eg-import-overlay {\n position: absolute;\n inset: 0;\n background: var(--eg-color-overlay-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n border-radius: var(--eg-radius);\n}\n\n.eg-import-dialog {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: 8px;\n padding: 24px 32px;\n min-width: 280px;\n box-shadow: var(--eg-shadow-dialog);\n text-align: center;\n}\n\n.eg-import-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--eg-color-text);\n margin-bottom: 16px;\n}\n\n.eg-import-bar-wrap {\n height: 8px;\n background: var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n overflow: hidden;\n margin-bottom: 10px;\n}\n\n.eg-import-bar {\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-accent), #4caf50);\n border-radius: var(--eg-radius);\n transition: width 0.15s ease;\n}\n\n.eg-import-msg {\n font-size: 12px;\n color: var(--eg-color-text-secondary);\n margin-bottom: 4px;\n}\n\n.eg-import-pct {\n font-size: var(--eg-font-size);\n font-weight: 600;\n color: var(--eg-color-accent);\n}\n.eg-export-spinner {\n width: 32px;\n height: 32px;\n margin: 12px auto 0;\n border: 3px solid var(--eg-color-border-cell);\n border-top-color: var(--eg-color-accent);\n border-radius: 50%;\n animation: eg-spin 0.8s linear infinite;\n}\n@keyframes eg-spin {\n to { transform: rotate(360deg); }\n}\n\n/* ===== READONLY CELL ===== */\n.eg-cell-readonly {\n background: var(--eg-color-cell-readonly);\n cursor: default;\n}\n.eg-cell-readonly.eg-cell-selected {\n background: var(--eg-color-cell-readonly-selected);\n}\n.eg-cell-readonly.eg-cell-active {\n outline-color: var(--eg-color-text-muted);\n}\n\n/* ===== SELECT DROPDOWN ===== */\n.eg-cell-select {\n cursor: pointer;\n}\n.eg-cell-select::after {\n content: '▾';\n position: absolute;\n right: 4px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--eg-color-text-muted);\n font-size: 11px;\n pointer-events: none;\n line-height: 1;\n}\n\n/* ===== CHECKBOX CELL ===== */\n.eg-cell-checkbox {\n justify-content: center;\n padding: 0 2px;\n}\n.eg-validation-tooltip {\n background: var(--eg-color-error-soft);\n border: 1px solid var(--eg-color-error);\n color: var(--eg-color-error-dark);\n font-size: 12px;\n padding: 4px 8px;\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-tooltip);\n white-space: nowrap;\n pointer-events: none;\n}\n\n/* ===== ROW STRIPE & HOVER ===== */\n.eg-row--even .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-stripe);\n}\n.eg-row:hover .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-hover);\n}\n\n/* ===== SIZE VARIANTS ===== */\n\n/* small */\n.eg-size-small .eg-cell {\n font-size: 12px;\n padding: 0 3px;\n}\n.eg-size-small .eg-cell-input {\n font-size: 12px;\n}\n.eg-size-small .eg-header-cell {\n font-size: 11px;\n}\n.eg-size-small .eg-footer-cell {\n font-size: 12px;\n}\n.eg-size-small .eg-row-header-cell {\n font-size: 10px;\n}\n.eg-size-small .eg-select-option {\n font-size: 12px;\n padding: 4px 10px;\n}\n.eg-size-small .eg-context-menu,\n.eg-size-small .eg-context-item {\n font-size: 12px;\n}\n.eg-size-small .eg-context-item {\n padding: 4px 14px;\n}\n\n/* large */\n.eg-size-large .eg-cell {\n font-size: 14px;\n padding: 0 6px;\n}\n.eg-size-large .eg-cell-input {\n font-size: 14px;\n}\n.eg-size-large .eg-header-cell {\n font-size: var(--eg-font-size);\n}\n.eg-size-large .eg-footer-cell {\n font-size: 14px;\n}\n.eg-size-large .eg-row-header-cell {\n font-size: 12px;\n}\n.eg-size-large .eg-select-option {\n font-size: 14px;\n padding: 8px 14px;\n}\n.eg-size-large .eg-context-menu,\n.eg-size-large .eg-context-item {\n font-size: 14px;\n}\n.eg-size-large .eg-context-item {\n padding: 8px 18px;\n}\n</style>\n\n<style>\n/* ── EgSelect / EgTreeSelect dropdown (non-scoped: injected by ExcelGrid on mount) ── */\n.eg-select-wrapper {\n position: relative;\n display: inline-block;\n min-width: 120px;\n font-size: var(--eg-font-size);\n font-family: inherit;\n}\n.eg-select-trigger {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-height: 30px;\n padding: 4px 8px;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n background: var(--eg-color-cell-bg);\n cursor: pointer;\n user-select: none;\n color: var(--eg-color-text);\n transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover { border-color: var(--eg-color-accent); }\n.eg-select-trigger--open {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled { background: var(--eg-color-cell-readonly); cursor: default; color: var(--eg-color-text-muted); }\n.eg-select-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.eg-select-placeholder { color: var(--eg-color-text-muted); }\n.eg-select-caret { flex-shrink: 0; color: var(--eg-color-text-muted); font-size: 12px; }\n.eg-select-dropdown {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n overflow-y: auto;\n max-height: 320px;\n padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n z-index: 999;\n margin-top: 2px;\n}\n.eg-select-search {\n padding: 6px 8px;\n border-bottom: 1px solid var(--eg-color-border-cell);\n position: sticky;\n top: 0;\n background: var(--eg-color-cell-bg);\n z-index: 1;\n}\n.eg-select-search-input {\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n padding: 4px 8px;\n font-size: var(--eg-font-size);\n outline: none;\n color: var(--eg-color-text);\n background: var(--eg-color-cell-bg);\n font-family: inherit;\n}\n.eg-select-search-input:focus {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-option {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 12px;\n font-size: var(--eg-font-size);\n cursor: pointer;\n white-space: normal;\n word-break: break-word;\n user-select: none;\n color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted { background: var(--eg-color-option-hover-bg); }\n.eg-select-option--active { font-weight: 600; color: var(--eg-color-accent); }\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover { background: var(--eg-color-option-active-hover-bg); }\n.eg-select-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n flex-shrink: 0;\n display: inline-block;\n margin-top: 3px;\n}\n/* Tree toggle */\n.eg-tree-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--eg-color-text-muted);\n margin-top: 1px;\n}\n.eg-tree-toggle--leaf { visibility: hidden; }\n/* EgCheckbox */\n.eg-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.eg-checkbox-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.eg-checkbox-box {\n position: relative;\n display: block;\n width: 19px;\n height: 19px;\n box-sizing: border-box;\n background-color: var(--eg-color-cell-bg);\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0 0;\n border: 1.5px solid var(--eg-color-checkbox-border);\n border-radius: var(--eg-radius);\n transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;\n}\n.eg-checkbox:hover .eg-checkbox-box { border-color: var(--eg-color-accent); }\n.eg-checkbox-input:checked + .eg-checkbox-box {\n background-color: var(--eg-color-accent);\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==\");\n background-size: 70% 70%;\n border-color: var(--eg-color-accent);\n}\n.eg-checkbox-input:focus-visible + .eg-checkbox-box { box-shadow: 0 0 0 3px var(--eg-color-accent-soft); }\n.eg-checkbox--disabled,\n.eg-checkbox--disabled .eg-checkbox-input { cursor: default; }\n.eg-checkbox-input:disabled + .eg-checkbox-box { background-color: var(--eg-color-cell-readonly); border-color: var(--eg-color-border-cell); }\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box { background-color: var(--eg-color-checkbox-disabled-checked); border-color: var(--eg-color-checkbox-disabled-checked); }\n</style>\n"]},media:void 0}),e("data-v-6b44afd7_1",{source:'\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* ── EgSelect / EgTreeSelect dropdown (non-scoped: injected by ExcelGrid on mount) ── */\n.eg-select-wrapper {\n position: relative;\n display: inline-block;\n min-width: 120px;\n font-size: var(--eg-font-size);\n font-family: inherit;\n}\n.eg-select-trigger {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-height: 30px;\n padding: 4px 8px;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n background: var(--eg-color-cell-bg);\n cursor: pointer;\n user-select: none;\n color: var(--eg-color-text);\n transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover { border-color: var(--eg-color-accent);\n}\n.eg-select-trigger--open {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled { background: var(--eg-color-cell-readonly); cursor: default; color: var(--eg-color-text-muted);\n}\n.eg-select-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.eg-select-placeholder { color: var(--eg-color-text-muted);\n}\n.eg-select-caret { flex-shrink: 0; color: var(--eg-color-text-muted); font-size: 12px;\n}\n.eg-select-dropdown {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n overflow-y: auto;\n max-height: 320px;\n padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n z-index: 999;\n margin-top: 2px;\n}\n.eg-select-search {\n padding: 6px 8px;\n border-bottom: 1px solid var(--eg-color-border-cell);\n position: sticky;\n top: 0;\n background: var(--eg-color-cell-bg);\n z-index: 1;\n}\n.eg-select-search-input {\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n padding: 4px 8px;\n font-size: var(--eg-font-size);\n outline: none;\n color: var(--eg-color-text);\n background: var(--eg-color-cell-bg);\n font-family: inherit;\n}\n.eg-select-search-input:focus {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-option {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 12px;\n font-size: var(--eg-font-size);\n cursor: pointer;\n white-space: normal;\n word-break: break-word;\n user-select: none;\n color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted { background: var(--eg-color-option-hover-bg);\n}\n.eg-select-option--active { font-weight: 600; color: var(--eg-color-accent);\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover { background: var(--eg-color-option-active-hover-bg);\n}\n.eg-select-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n flex-shrink: 0;\n display: inline-block;\n margin-top: 3px;\n}\n/* Tree toggle */\n.eg-tree-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--eg-color-text-muted);\n margin-top: 1px;\n}\n.eg-tree-toggle--leaf { visibility: hidden;\n}\n/* EgCheckbox */\n.eg-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.eg-checkbox-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.eg-checkbox-box {\n position: relative;\n display: block;\n width: 19px;\n height: 19px;\n box-sizing: border-box;\n background-color: var(--eg-color-cell-bg);\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0 0;\n border: 1.5px solid var(--eg-color-checkbox-border);\n border-radius: var(--eg-radius);\n transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;\n}\n.eg-checkbox:hover .eg-checkbox-box { border-color: var(--eg-color-accent);\n}\n.eg-checkbox-input:checked + .eg-checkbox-box {\n background-color: var(--eg-color-accent);\n background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");\n background-size: 70% 70%;\n border-color: var(--eg-color-accent);\n}\n.eg-checkbox-input:focus-visible + .eg-checkbox-box { box-shadow: 0 0 0 3px var(--eg-color-accent-soft);\n}\n.eg-checkbox--disabled,\n.eg-checkbox--disabled .eg-checkbox-input { cursor: default;\n}\n.eg-checkbox-input:disabled + .eg-checkbox-box { background-color: var(--eg-color-cell-readonly); border-color: var(--eg-color-border-cell);\n}\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box { background-color: var(--eg-color-checkbox-disabled-checked); border-color: var(--eg-color-checkbox-disabled-checked);\n}\n',map:{version:3,sources:["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/ExcelGrid.vue"],names:[],mappings:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwrIA,wFAAA;AACA;EACA,kBAAA;EACA,qBAAA;EACA,gBAAA;EACA,8BAAA;EACA,oBAAA;AACA;AACA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,mCAAA;EACA,eAAA;EACA,iBAAA;EACA,2BAAA;EACA,wDAAA;AACA;AACA,2BAAA,oCAAA;AAAA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;AACA,+BAAA,yCAAA,EAAA,eAAA,EAAA,iCAAA;AAAA;AACA,2BAAA,OAAA,EAAA,gBAAA,EAAA,uBAAA,EAAA,mBAAA;AAAA;AACA,yBAAA,iCAAA;AAAA;AACA,mBAAA,cAAA,EAAA,iCAAA,EAAA,eAAA;AAAA;AACA;EACA,mCAAA;EACA,6CAAA;EACA,+BAAA;EACA,qCAAA;EACA,gBAAA;EACA,iBAAA;EACA,cAAA;AACA;AACA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,eAAA;EACA,YAAA;EACA,eAAA;AACA;AACA;EACA,gBAAA;EACA,oDAAA;EACA,gBAAA;EACA,MAAA;EACA,mCAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,gBAAA;EACA,8BAAA;EACA,aAAA;EACA,2BAAA;EACA,mCAAA;EACA,oBAAA;AACA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;AACA;EACA,aAAA;EACA,uBAAA;EACA,QAAA;EACA,iBAAA;EACA,8BAAA;EACA,eAAA;EACA,mBAAA;EACA,sBAAA;EACA,iBAAA;EACA,2BAAA;AACA;AACA;iCACA,2CAAA;AAAA;AACA,4BAAA,gBAAA,EAAA,6BAAA;AAAA;AACA;kCACA,kDAAA;AAAA;AACA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAAA;EACA,eAAA;AACA;AACA,gBAAA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;EACA,iCAAA;EACA,eAAA;AACA;AACA,wBAAA,kBAAA;AAAA;AACA,eAAA;AACA;EACA,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,yCAAA;EACA,4BAAA;EACA,2BAAA;EACA,oBAAA;EACA,mDAAA;EACA,+BAAA;EACA,yFAAA;AACA;AACA,sCAAA,oCAAA;AAAA;AACA;EACA,wCAAA;EACA,+SAAA;EACA,wBAAA;EACA,oCAAA;AACA;AACA,sDAAA,iDAAA;AAAA;AACA;4CACA,eAAA;AAAA;AACA,iDAAA,+CAAA,EAAA,yCAAA;AAAA;AACA,yDAAA,2DAAA,EAAA,uDAAA;AAAA",file:"ExcelGrid.vue",sourcesContent:["<template>\n <div\n class=\"eg-wrapper\"\n :class=\"'eg-size-' + size\"\n :style=\"wrapperStyle\"\n tabindex=\"0\"\n @keydown=\"onKeyDown\"\n @keypress=\"onKeyPress\"\n ref=\"wrapper\"\n >\n \x3c!-- Context menu --\x3e\n <div\n v-if=\"contextMenu.visible\"\n class=\"eg-context-menu\"\n :style=\"{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }\"\n @click.stop\n >\n <div class=\"eg-context-item\" @click=\"ctxCopy\">{{ t.copy }}</div>\n <div class=\"eg-context-item\" @click=\"ctxCut\">{{ t.cut }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPaste\">{{ t.paste }}</div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item eg-context-submenu-parent\">\n {{ t.pasteSpecial }}\n <div class=\"eg-context-submenu\">\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('all')\">{{ t.pasteAll }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('values')\">{{ t.pasteValues }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('formats')\">{{ t.pasteFormats }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPasteSpecial('all', true)\">{{ t.transpose }}</div>\n </div>\n </div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxMerge\">{{ t.mergeCells }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnmerge\">{{ t.unmergeCells }}</div>\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxHideRow\">{{ t.hideRows }}</div>\n <div class=\"eg-context-item\" @click=\"ctxHideColumn\">{{ t.hideColumns }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnhideRows\">{{ t.unhideRows }}</div>\n <div class=\"eg-context-item\" @click=\"ctxUnhideColumns\">{{ t.unhideColumns }}</div>\n <template v-if=\"contextMenu.row < 0 && contextMenu.col >= 0\">\n <div class=\"eg-context-separator\"></div>\n <div class=\"eg-context-item\" @click=\"ctxPinLeft\">{{ t.pinLeft }}</div>\n <div class=\"eg-context-item\" @click=\"ctxPinRight\">{{ t.pinRight }}</div>\n <div class=\"eg-context-item\" v-if=\"isColPinned(contextMenu.col)\" @click=\"ctxUnpin\">{{ t.unpin }}</div>\n </template>\n </div>\n\n \x3c!-- Scroll container --\x3e\n <div class=\"eg-container\" ref=\"container\" @scroll=\"onScroll\" @click=\"hideContextMenu\">\n\n \x3c!-- ===== HEADER AREA ===== --\x3e\n <div class=\"eg-header-area\" :style=\"headerAreaStyle\">\n\n \x3c!-- Corner cell --\x3e\n <div\n class=\"eg-corner\"\n :style=\"cornerStyle\"\n @click=\"selectAll\"\n ></div>\n\n \x3c!-- Row group outline gutter (left) --\x3e\n <div v-if=\"rowGroups.length\" class=\"eg-row-outline-gutter\" :style=\"rowOutlineGutterStyle\"></div>\n\n \x3c!-- Frozen columns header --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-header\" :style=\"frozenColHeaderStyle\">\n <div :style=\"{ position: 'relative', height: (headerRowHeight * headerDepth) + 'px' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellVisible(cell, rowIdx, true)\">\n <div\n :key=\"'fh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"getHeaderCellStyle(cell, rowIdx, true)\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Scrollable columns header --\x3e\n <div class=\"eg-scroll-col-header\" ref=\"scrollColHeader\" :style=\"scrollColHeaderStyle\">\n <div class=\"eg-scroll-col-header-inner\" :style=\"{ width: scrollContentWidth + 'px', height: (headerRowHeight * headerDepth) + 'px', position: 'relative' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellVisible(cell, rowIdx, false)\">\n <div\n :key=\"'sh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"getHeaderCellStyle(cell, rowIdx, false)\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Pinned Right columns header --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-header\" :style=\"pinnedRightHeaderStyle\">\n <div :style=\"{ position: 'relative', height: (headerRowHeight * headerDepth) + 'px' }\">\n <template v-for=\"(row, rowIdx) in headerRows\">\n <template v-for=\"cell in row\">\n <template v-if=\"isCellInZone(cell, rowIdx, 'right')\">\n <div\n :key=\"'prh-' + rowIdx + '-' + (cell.column.key || cell.column.title)\"\n class=\"eg-header-cell\"\n :class=\"{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount }\"\n :data-fi=\"!cell.isGroup ? cell.column._flatIndex : undefined\"\n :data-start=\"cell.isGroup ? cell._firstLeafFlatIndex : undefined\"\n :data-end=\"cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined\"\n :style=\"getHeaderCellStyleForZone(cell, rowIdx, 'right')\"\n @mousedown=\"onColHeaderMouseDown($event, cell)\"\n @dblclick=\"onColHeaderDblClick($event, cell)\"\n @contextmenu.prevent=\"onColHeaderContextMenu($event, cell)\"\n >\n <slot v-if=\"!cell.isGroup\" :name=\"'header-' + cell.column.key\" :column=\"cell.column\">\n {{ cell.column.title }}\n </slot>\n <span v-else>{{ cell.column.title }}</span>\n <div\n v-if=\"!cell.isGroup\"\n class=\"eg-col-resize-handle\"\n @mousedown.stop=\"startColResize($event, cell.column._flatIndex)\"\n ></div>\n </div>\n </template>\n </template>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- ===== BODY AREA ===== --\x3e\n <div class=\"eg-body-area\" :style=\"bodyAreaStyle\">\n\n \x3c!-- Row number header column --\x3e\n <div class=\"eg-row-header-col\" :style=\"rowHeaderColStyle\">\n \x3c!-- Scrollable row headers --\x3e\n <div class=\"eg-scroll-row-headers\" :style=\"scrollRowHeadersStyle\" ref=\"scrollRowHeaders\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div\n v-if=\"!isRowHidden(ri)\"\n :key=\"'srh-' + ri\"\n class=\"eg-row-header-cell\"\n :style=\"getRowHeaderStyle(ri)\"\n @mousedown=\"onRowHeaderMouseDown($event, ri)\"\n @contextmenu.prevent=\"onRowContextMenu($event, ri)\"\n >\n {{ ri + 1 }}\n <div class=\"eg-row-resize-handle\" @mousedown.stop=\"startRowResize($event, ri)\"></div>\n </div>\n </template>\n </div>\n </div>\n </div>\n </div>\n\n \x3c!-- Row group outline gutter (left side of rows) --\x3e\n <div v-if=\"rowGroups.length\" class=\"eg-row-outline-col\" :style=\"rowOutlineColStyle\">\n <template v-for=\"group in rowGroups\">\n <div\n :key=\"'rg-' + group.startIndex + '-' + group.endIndex\"\n class=\"eg-group-btn\"\n :class=\"{ collapsed: isGroupCollapsed(group) }\"\n :style=\"getRowGroupBtnStyle(group)\"\n @click=\"toggleGroup(group)\"\n >{{ isGroupCollapsed(group) ? '+' : '−' }}</div>\n </template>\n </div>\n\n \x3c!-- Main scroll body --\x3e\n <div class=\"eg-scroll-body\" ref=\"scrollBody\" :style=\"scrollBodyStyle\" @scroll=\"onBodyScroll\">\n <div class=\"eg-scroll-body-inner\" :style=\"{ width: scrollContentWidth + 'px', height: totalVirtualHeight + 'px', position: 'relative' }\">\n\n \x3c!-- Pinned left column body --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-body\" :style=\"frozenColBodyStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div v-if=\"!isRowHidden(ri)\" :key=\"'fc-row-' + ri\" class=\"eg-row\" :class=\"{ 'eg-row--even': ri % 2 === 0 }\" :style=\"getRowStyle(ri)\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnPinnedLeft(ci) && !isColHidden(ci)\">\n <div\n :key=\"'fc-cell-' + ri + '-' + ci\"\n class=\"eg-cell\"\n :data-fi=\"ci\"\n :class=\"getCellClasses(ri, ci)\"\n :style=\"getCellStyle(ri, ci)\"\n @mousedown=\"onCellMouseDown($event, ri, ci)\"\n @mouseover=\"onCellMouseOver($event, ri, ci)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, ci)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, ci)\"\n >\n <div v-if=\"isMergedAway(ri, ci)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, ci)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input v-else ref=\"editInput\" class=\"eg-cell-input\" v-model=\"editValue\" @blur=\"commitEdit\" @keydown.stop=\"onEditKeyDown\" />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, ci)\"\n :disabled=\"!isCellEditable(ri, ci)\"\n @change=\"(v) => setCheckboxValue(ri, ci, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(ci, getCellValue(ri, ci)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Main data cells --\x3e\n <div class=\"eg-main-cells\" :style=\"mainCellsStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative', width: scrollableContentWidth + 'px' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div\n v-if=\"!isRowHidden(ri)\"\n :key=\"'row-' + ri\"\n class=\"eg-row\"\n :class=\"{ 'eg-row--even': ri % 2 === 0 }\"\n :style=\"getRowStyle(ri)\"\n :data-row=\"ri\"\n >\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnScrollable(ci) && !isColHidden(ci)\">\n <div\n :key=\"'cell-' + ri + '-' + ci\"\n class=\"eg-cell\"\n :data-fi=\"ci\"\n :class=\"getCellClasses(ri, ci)\"\n :style=\"getCellStyle(ri, ci)\"\n @mousedown=\"onCellMouseDown($event, ri, ci)\"\n @mouseover=\"onCellMouseOver($event, ri, ci)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, ci)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, ci)\"\n >\n <div v-if=\"isMergedAway(ri, ci)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, ci)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input\n v-else\n ref=\"editInput\"\n class=\"eg-cell-input\"\n v-model=\"editValue\"\n @blur=\"commitEdit\"\n @keydown.stop=\"onEditKeyDown\"\n />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, ci)\"\n :disabled=\"!isCellEditable(ri, ci)\"\n @change=\"(v) => setCheckboxValue(ri, ci, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(ci, getCellValue(ri, ci)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Pinned Right column body --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-body\" :style=\"pinnedRightBodyStyle\">\n <div :style=\"{ height: totalVirtualHeight + 'px', position: 'relative' }\">\n <div :style=\"{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }\">\n <template v-for=\"ri in visibleRowRange\">\n <div v-if=\"!isRowHidden(ri)\" :key=\"'pr-row-' + ri\" class=\"eg-row\" :class=\"{ 'eg-row--even': ri % 2 === 0 }\" :style=\"getRowStyle(ri)\">\n <template v-for=\"col in pinnedRightCols\">\n <div\n :key=\"'pr-cell-' + ri + '-' + col._flatIndex\"\n class=\"eg-cell\"\n :data-fi=\"col._flatIndex\"\n :class=\"getCellClasses(ri, col._flatIndex)\"\n :style=\"getCellStyle(ri, col._flatIndex)\"\n @mousedown=\"onCellMouseDown($event, ri, col._flatIndex)\"\n @mouseover=\"onCellMouseOver($event, ri, col._flatIndex)\"\n @mouseup=\"onCellMouseUp\"\n @dblclick=\"onCellDblClick(ri, col._flatIndex)\"\n @contextmenu.prevent=\"onCellContextMenu($event, ri, col._flatIndex)\"\n >\n <div v-if=\"isMergedAway(ri, col._flatIndex)\" style=\"display:none\"></div>\n <template v-else-if=\"isEditing(ri, col._flatIndex)\">\n <slot v-if=\"hasCellSlot(col)\" :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :isEditing=\"true\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <slot v-else-if=\"hasLegacyEditSlot(col)\" :name=\"'edit-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :done=\"(v) => commitEditSlot(v)\" :cancel=\"cancelEdit\" />\n <input v-else ref=\"editInput\" class=\"eg-cell-input\" v-model=\"editValue\" @blur=\"commitEdit\" @keydown.stop=\"onEditKeyDown\" />\n </template>\n <template v-else-if=\"col.type === 'checkbox'\">\n <eg-checkbox\n :value=\"isCheckboxChecked(ri, col._flatIndex)\"\n :disabled=\"!isCellEditable(ri, col._flatIndex)\"\n @change=\"(v) => setCheckboxValue(ri, col._flatIndex, v)\"\n />\n </template>\n <template v-else>\n <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" :isEditing=\"false\" :done=\"null\" :cancel=\"null\">\n <slot v-if=\"hasPrefixSlot(col)\" :name=\"'prefix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" /><template v-if=\"hasSuffixSlot(col) && isSelectLikeCol(col)\"><span class=\"eg-cell-select-trigger-wrap\"><span class=\"eg-cell-value\">{{ getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) }}</span><span class=\"eg-cell-select-caret-inline\">▾</span></span></template><template v-else-if=\"hasPrefixSlot(col) || hasSuffixSlot(col)\"><span class=\"eg-cell-value\">{{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}</span></template><template v-else>{{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}</template><span v-if=\"hasSuffixSlot(col)\" class=\"eg-cell-suffix-wrap\"><slot :name=\"'suffix-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\" /></span>\n </slot>\n </template>\n </div>\n </template>\n </div>\n </template>\n </div>\n </div>\n </div>\n\n \x3c!-- Fill handle (shown on primary range) --\x3e\n <div\n v-if=\"fillHandleVisible\"\n class=\"eg-fill-handle\"\n :style=\"fillHandleStyle\"\n @mousedown.stop=\"startFillDrag\"\n ></div>\n\n \x3c!-- Drag move ghost border --\x3e\n <div\n v-if=\"dragMove.active\"\n class=\"eg-drag-ghost\"\n :style=\"dragGhostStyle\"\n ></div>\n </div>\n </div>\n\n \x3c!-- Column group outline row (top, above body) --\x3e\n <div v-if=\"colGroups.length\" class=\"eg-col-outline-row\" :style=\"colOutlineRowStyle\">\n <template v-for=\"group in colGroups\">\n <div\n :key=\"'cg-' + group.startIndex + '-' + group.endIndex\"\n class=\"eg-group-btn\"\n :class=\"{ collapsed: isGroupCollapsed(group) }\"\n :style=\"getColGroupBtnStyle(group)\"\n @click=\"toggleGroup(group)\"\n >{{ isGroupCollapsed(group) ? '+' : '−' }}</div>\n </template>\n </div>\n\n </div>\x3c!-- end body-area --\x3e\n\n \x3c!-- ===== FOOTER AREA (column totals) ===== --\x3e\n <div v-if=\"hasFooter\" class=\"eg-footer-area\" :style=\"footerAreaStyle\">\n\n \x3c!-- \"Jami\" label cell (mirrors corner cell) --\x3e\n <div class=\"eg-footer-label\" :style=\"footerLabelStyle\">{{ t.total }}</div>\n\n \x3c!-- Frozen columns footer --\x3e\n <div v-if=\"getFrozenWidth() > 0\" class=\"eg-frozen-col-footer\" :style=\"frozenColFooterStyle\">\n <div :style=\"{ position: 'relative', height: footerRowHeight + 'px' }\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnPinnedLeft(ci) && !isColHidden(ci)\">\n <div :key=\"'ff-' + ci\" class=\"eg-footer-cell\" :style=\"getFooterCellStyle(ci)\">\n {{ getColumnTotalDisplay(ci) }}\n </div>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Scrollable footer (horizontally synced with body via scrollFooter ref) --\x3e\n <div class=\"eg-scroll-col-footer\" ref=\"scrollFooter\" :style=\"scrollColHeaderStyle\">\n <div class=\"eg-scroll-col-footer-inner\" :style=\"{ width: scrollContentWidth + 'px', height: footerRowHeight + 'px', position: 'relative' }\">\n <template v-for=\"(col, ci) in leafCols\">\n <template v-if=\"isColumnScrollable(ci) && !isColHidden(ci)\">\n <div :key=\"'sf-' + ci\" class=\"eg-footer-cell\" :style=\"getFooterCellStyle(ci)\">\n {{ getColumnTotalDisplay(ci) }}\n </div>\n </template>\n </template>\n </div>\n </div>\n\n \x3c!-- Pinned Right columns footer --\x3e\n <div v-if=\"hasPinnedRight\" class=\"eg-pinned-right-footer\" :style=\"pinnedRightFooterStyle\">\n <div :style=\"{ position: 'relative', height: footerRowHeight + 'px' }\">\n <div\n v-for=\"col in pinnedRightCols\"\n :key=\"'prf-' + col._flatIndex\"\n class=\"eg-footer-cell\"\n :style=\"getFooterCellStyle(col._flatIndex)\"\n >{{ getColumnTotalDisplay(col._flatIndex) }}</div>\n </div>\n </div>\n </div>\x3c!-- end footer-area --\x3e\n\n \x3c!-- Resize indicator line --\x3e\n <div v-if=\"resizing.active\" class=\"eg-resize-line\" :style=\"resizeLineStyle\"></div>\n </div>\x3c!-- end container --\x3e\n\n \x3c!-- Import progress overlay --\x3e\n <div v-if=\"importState.active\" class=\"eg-import-overlay\">\n <div class=\"eg-import-dialog\">\n <div class=\"eg-import-title\">Fayl import qilinmoqda</div>\n <div class=\"eg-import-bar-wrap\">\n <div class=\"eg-import-bar\" :style=\"{ width: importState.percent + '%' }\"></div>\n </div>\n <div class=\"eg-import-msg\">{{ importState.message }}</div>\n <div class=\"eg-import-pct\">{{ importState.percent }}%</div>\n </div>\n </div>\n\n \x3c!-- Export progress overlay --\x3e\n <div v-if=\"exportState.active\" class=\"eg-import-overlay\">\n <div class=\"eg-import-dialog\">\n <div class=\"eg-import-title\">Fayl export qilinmoqda...</div>\n <div class=\"eg-export-spinner\"></div>\n </div>\n </div>\n\n \x3c!-- Select dropdown overlay (flat select) --\x3e\n <eg-select\n v-if=\"selectDropdown && !selectDropdown.tree\"\n ref=\"selectDropdownComp\"\n :value=\"selectDropdown.currentValue\"\n :options=\"selectDropdown.rawOptions\"\n :enable-search=\"selectDropdown.enableSearch\"\n :trigger-rect=\"selectDropdown.rect\"\n :dropdown-only=\"true\"\n @select=\"onComponentSelect\"\n @close=\"closeSelectDropdown\"\n />\n \x3c!-- Tree select dropdown overlay --\x3e\n <eg-tree-select\n v-if=\"selectDropdown && selectDropdown.tree\"\n ref=\"selectDropdownComp\"\n :value=\"selectDropdown.currentValue\"\n :options=\"selectDropdown.rawOptions\"\n :value-key=\"selectDropdown.keys.valueKey\"\n :label-key=\"selectDropdown.keys.labelKey\"\n :children-key=\"selectDropdown.keys.childrenKey\"\n :enable-search=\"selectDropdown.enableSearch\"\n :trigger-rect=\"selectDropdown.rect\"\n :dropdown-only=\"true\"\n @select=\"onComponentSelect\"\n @close=\"closeSelectDropdown\"\n />\n\n \x3c!-- Validation error tooltip (cellValidator) --\x3e\n <div\n v-if=\"invalidCell && invalidCell.rect\"\n class=\"eg-validation-tooltip\"\n :style=\"invalidTooltipStyle\"\n >{{ invalidCell.message }}</div>\n\n \x3c!-- Column drag ghost (follows mouse — position updated via direct DOM in handleColDragMove) --\x3e\n <div\n v-if=\"colDrag.active\"\n ref=\"colDragGhost\"\n class=\"eg-col-drag-ghost\"\n :style=\"{ left: (colDrag.startX + 16) + 'px', top: (colDrag.startY - 14) + 'px' }\"\n >{{ colDrag.ghostLabel }}</div>\n\n </div>\n</template>\n\n<script>\nimport {\n normalizeRange, isCellInRange, isCellInAnyRange,\n buildRange, singleCellRange, getPrimaryRange\n} from '../utils/selection.js'\nimport { flattenColumns, buildHeaderRows, columnTreeDepth, moveColumnNodeInTree } from '../utils/headerTree.js'\nimport { calcVisibleRows, buildCumulativeHeights, findVisibleRange, getRowTop, getRowHeight } from '../utils/virtualScroll.js'\nimport { generateFillValues } from '../utils/fillHandle.js'\nimport {\n matrixToTSV, tsvToMatrix, extractMatrix, transposeMatrix, applyMatrix, tileMatrix\n} from '../utils/clipboard.js'\nimport {\n mergeHasConflict, findMergeAtCell, isMergeAnchor, addMerge,\n removeMergeAt, resolveMergeAnchor\n} from '../utils/merge.js'\nimport {\n addGroup, removeGroup, toggleGroupCollapse, isGroupCollapsed as _isGroupCollapsed,\n getCollapsedRowIndices, getCollapsedColIndices\n} from '../utils/outline.js'\nimport { exportToExcel as _exportToExcel } from '../utils/excelExport.js'\nimport { importFromFile as _importFromFile } from '../utils/excelImport.js'\nimport { createExcelImportWorker, createExcelExportWorker } from '../utils/workerFactory'\nimport { getMessages } from '../utils/i18n.js'\nimport EgCheckbox from './EgCheckbox.vue'\nimport anime from 'animejs'\nimport EgSelect from './EgSelect.vue'\nimport EgTreeSelect from './EgTreeSelect.vue'\n\nconst SIZE_CONFIG = {\n small: { row: 22, header: 24, footer: 24 },\n middle: { row: 28, header: 28, footer: 28 },\n large: { row: 36, header: 36, footer: 36 }\n}\nconst ROW_HEADER_WIDTH = 50\nconst DEFAULT_COL_WIDTH = 100\nconst OUTLINE_GUTTER = 20\n\nexport default {\n name: 'ExcelGrid',\n\n components: { EgCheckbox, EgSelect, EgTreeSelect },\n\n // v-model → :data + @input\n model: { prop: 'data', event: 'input' },\n\n props: {\n /** Array of row objects keyed by columns[].key */\n data: { type: Array, default: () => [] },\n\n /** Column definitions (may be nested via children[]) */\n columns: { type: Array, default: () => [] },\n\n /** Indices of hidden leaf columns */\n hiddenColumns: { type: Array, default: () => [] },\n\n /** Indices of hidden rows */\n hiddenRows: { type: Array, default: () => [] },\n\n /** Initial merge descriptors [{ startRow, startCol, endRow, endCol }] */\n merges: { type: Array, default: () => [] },\n\n /** Collapsed group descriptors [{ type, startIndex, endIndex }] */\n collapsedGroups: { type: Array, default: () => [] },\n\n /** Height of the grid container in px */\n height: { type: Number, default: 400 },\n\n /** Width of the grid container (px or 'auto') */\n width: { type: [Number, String], default: '100%' },\n\n /**\n * Called before drag-drop: (sourceRange, targetRange) => bool\n * Return false to cancel the drop.\n */\n beforeDrop: { type: Function, default: null },\n\n /**\n * UI locale for the context menu.\n * Supported: 'en' | 'ru' | 'uz' | 'uz-Cyrl'\n */\n locale: { type: String, default: 'en' },\n\n /**\n * Pinned columns map: { [colKey]: 'left' | 'right' }\n * Pinned-left columns render as a fixed zone on the left.\n * Pinned-right columns render as a fixed zone on the right.\n * Emit 'update:pinnedColumns' to support .sync modifier.\n */\n pinnedColumns: { type: Object, default: () => ({}) },\n\n /**\n * Dynamic cell editability: (row, rowIndex, col, colIndex) => boolean\n * Overrides column-level editable when provided.\n * row = plain data object, col = column definition.\n */\n cellEditable: { type: Function, default: null },\n\n /**\n * Cell value validation: (value, row, rowIndex, col, colIndex) => boolean\n * Return false to reject the write — the cell keeps its old value and\n * an error tooltip is shown anchored to that cell.\n */\n cellValidator: { type: Function, default: null },\n\n /**\n * Error tooltip text for a rejected value.\n * Function: (value, row, rowIndex, col, colIndex) => string\n * String: same message for every rejected cell.\n * Default: locale's \"invalidValue\" message.\n */\n cellValidationMessage: { type: [Function, String], default: null },\n\n /**\n * Bulk-write strictness (paste / fill handle / Delete).\n * false (default): invalid cells in the affected range are skipped,\n * the rest of the operation still applies.\n * true: if ANY cell in the affected range fails validation, the whole\n * bulk operation is rejected — nothing is written.\n */\n strictBulkValidation: { type: Boolean, default: false },\n\n /** Visual size of the grid. Affects row/header height and font sizes. */\n size: { type: String, default: 'middle' },\n\n /** Auto-fit all column widths to content (same as double-clicking each resize handle). Re-applies on data/columns change. */\n autoWidth: { type: Boolean, default: false },\n\n /**\n * Allow columns to be reordered by dragging their headers.\n * On drop, emits 'update:columns' (compatible with .sync) and 'column-reorder'.\n */\n columnDraggable: { type: Boolean, default: true }\n },\n\n data() {\n return {\n // Selection\n activeCell: { row: 0, col: 0 },\n selectionRanges: [], // [{ startRow, startCol, endRow, endCol }]\n isMouseDown: false,\n mouseDownRange: null,\n isCtrlDrag: false,\n\n // Edit\n editingCell: null, // { row, col }\n editValue: '',\n editOriginalValue: '',\n\n // Scroll\n scrollTop: 0,\n scrollLeft: 0,\n headerViewportWidth: null,\n\n // Virtual scroll\n virtualStartIndex: 0,\n virtualEndIndex: 0,\n virtualOffsetTop: 0,\n totalVirtualHeight: 0,\n\n // Column widths (flat index → px)\n colWidths: {},\n\n // Row heights (row index → px)\n rowHeights: {},\n\n // Import/export progress\n importState: { active: false, percent: 0, message: '' },\n exportState: { active: false },\n\n resizing: {\n active: false,\n type: null, // 'col' | 'row'\n index: -1,\n startX: 0,\n startY: 0,\n startSize: 0,\n currentPos: 0\n },\n\n // Fill handle\n fillDrag: {\n active: false,\n sourceRange: null,\n currentRow: -1,\n currentCol: -1\n },\n\n // Drag-move\n dragMove: {\n active: false,\n sourceRange: null,\n startX: 0,\n startY: 0,\n targetRow: -1,\n targetCol: -1,\n copyMode: false\n },\n\n // Clipboard (internal)\n clipboardMatrix: null,\n clipboardRange: null,\n clipboardMode: null, // 'copy' | 'cut'\n\n // Context menu\n contextMenu: { visible: false, x: 0, y: 0, row: -1, col: -1 },\n\n // Select dropdown\n selectDropdown: null, // { row, col, options, currentValue, rect }\n\n // Cell value validation (cellValidator)\n invalidCell: null, // { row, col, message, rect }\n\n // Merges (controlled via prop + update:merges)\n internalMerges: [],\n\n // Groups\n internalGroups: [], // [{ type, startIndex, endIndex }]\n internalCollapsedGroups: [],\n\n // Header\n headerDepth: 1,\n headerRows: [],\n\n // Leaf columns cache\n leafCols: [],\n\n // Footer column totals (flat col index → number | null)\n columnTotals: {},\n\n // Column drag-and-drop state\n colDrag: {\n pending: false, // mousedown received, waiting for movement threshold\n active: false, // drag in progress\n sourceFirstLeaf: -1, // first leaf flat-index of the dragged node\n sourceLeafCount: 1, // number of leaves in the dragged node (1=leaf, N=group)\n dropIndex: -1, // insert-before flat index (0..N)\n startX: 0,\n startY: 0,\n ghostLabel: ''\n },\n }\n },\n\n computed: {\n t() { return getMessages(this.locale) },\n\n pinnedLeftSet() {\n const s = new Set()\n this.leafCols.forEach(col => { if (this.pinnedColumns[col.key] === 'left') s.add(col._flatIndex) })\n return s\n },\n\n pinnedRightSet() {\n const s = new Set()\n this.leafCols.forEach(col => { if (this.pinnedColumns[col.key] === 'right') s.add(col._flatIndex) })\n return s\n },\n\n pinnedLeftCols() { return this.leafCols.filter(col => this.pinnedLeftSet.has(col._flatIndex)) },\n pinnedRightCols() { return this.leafCols.filter(col => this.pinnedRightSet.has(col._flatIndex)) },\n\n hasPinnedLeft() { return this.pinnedLeftSet.size > 0 },\n hasPinnedRight() { return this.pinnedRightSet.size > 0 },\n\n hasFooter() { return this.leafCols.some(col => col.showTotal) },\n\n pinnedLeftWidth() {\n let w = 0\n for (const col of this.pinnedLeftCols) {\n if (!this.isColHidden(col._flatIndex)) w += this.getColW(col._flatIndex)\n }\n return w\n },\n\n pinnedRightWidth() {\n let w = 0\n for (const col of this.pinnedRightCols) {\n if (!this.isColHidden(col._flatIndex)) w += this.getColW(col._flatIndex)\n }\n return w\n },\n\n totalRows() { return this.data.length },\n\n _sizeConf() { return SIZE_CONFIG[this.size] || SIZE_CONFIG.middle },\n _rowH() { return this._sizeConf.row },\n _headerRowH() { return this._sizeConf.header },\n _footerRowH() { return this._sizeConf.footer },\n\n headerRowHeight() { return this._headerRowH },\n footerRowHeight() { return this._footerRowH },\n\n // Pre-built cumulative height array — O(n) once, then cached by Vue.\n // findVisibleRange() uses binary search against this cached array → O(log n) per scroll.\n // Invalidated only when row count, custom heights, or hidden rows change.\n cumulativeHeights() {\n return buildCumulativeHeights(this.totalRows, this._rowH, this.rowHeights, this.hiddenRowSet)\n },\n\n hiddenColSet() { return new Set(this.hiddenColumns) },\n\n hiddenRowSet() {\n const s = new Set(this.hiddenRows)\n // Also add rows hidden by collapsed row groups\n const collapsed = getCollapsedRowIndices(this.internalGroups, this.internalCollapsedGroups)\n collapsed.forEach(i => s.add(i))\n return s\n },\n\n hiddenColFromGroupSet() {\n return getCollapsedColIndices(this.internalGroups, this.internalCollapsedGroups)\n },\n\n effectiveHiddenColSet() {\n const s = new Set(this.hiddenColSet)\n this.hiddenColFromGroupSet.forEach(i => s.add(i))\n return s\n },\n\n rowGroups() { return this.internalGroups.filter(g => g.type === 'row') },\n colGroups() { return this.internalGroups.filter(g => g.type === 'column') },\n\n visibleRowRange() {\n const rows = []\n for (let i = this.virtualStartIndex; i <= this.virtualEndIndex; i++) rows.push(i)\n return rows\n },\n\n primaryRange() {\n return getPrimaryRange(this.selectionRanges, this.activeCell)\n },\n\n fillHandleVisible() {\n return this.primaryRange && !this.editingCell\n },\n\n fillHandleStyle() {\n if (!this.primaryRange) return {}\n const r = normalizeRange(this.primaryRange)\n // O(1) lookup via cumulativeHeights instead of O(endRow) getRowTop loop\n const bottom = this.cumulativeHeights[r.endRow + 1] || 0\n const right = this.getColLeft(r.endCol + 1)\n return {\n position: 'absolute',\n width: '6px',\n height: '6px',\n background: 'var(--eg-color-accent)',\n border: '1px solid white',\n bottom: (this.totalVirtualHeight - bottom + 1) + 'px',\n right: (this.scrollContentWidth - right + 1) + 'px',\n cursor: 'crosshair',\n zIndex: 10\n }\n },\n\n\n invalidTooltipStyle() {\n if (!this.invalidCell || !this.invalidCell.rect) return {}\n const { rect } = this.invalidCell\n return {\n position: 'fixed',\n top: (rect.bottom + 4) + 'px',\n left: rect.left + 'px',\n zIndex: 9999\n }\n },\n\n dragGhostStyle() {\n if (!this.dragMove.active || this.dragMove.targetRow < 0) return {}\n const r = normalizeRange(this.dragMove.sourceRange)\n const rows = r.endRow - r.startRow\n const cols = r.endCol - r.startCol\n // O(1) lookup via cumulativeHeights instead of O(targetRow) getRowTop loop\n const top = this.cumulativeHeights[this.dragMove.targetRow] || 0\n const left = this.getColLeft(this.dragMove.targetCol)\n const width = this.getRangeWidth(this.dragMove.targetCol, this.dragMove.targetCol + cols)\n const height = this.getRangeHeight(this.dragMove.targetRow, this.dragMove.targetRow + rows)\n return {\n position: 'absolute',\n top: top + 'px',\n left: left + 'px',\n width: width + 'px',\n height: height + 'px',\n border: '2px dashed #1a73e8',\n pointerEvents: 'none',\n zIndex: 20\n }\n },\n\n wrapperStyle() {\n return {\n width: typeof this.width === 'number' ? this.width + 'px' : this.width,\n height: this.height + 'px',\n position: 'relative',\n outline: 'none',\n userSelect: 'none'\n }\n },\n\n headerAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n position: 'sticky',\n top: 0,\n zIndex: 30,\n background: 'var(--eg-color-header-bg)'\n }\n },\n\n cornerStyle() {\n const outlineW = this.rowGroups.length ? OUTLINE_GUTTER : 0\n return {\n width: (ROW_HEADER_WIDTH + outlineW) + 'px',\n minWidth: (ROW_HEADER_WIDTH + outlineW) + 'px',\n height: (this._headerRowH * this.headerDepth) + 'px',\n background: 'var(--eg-color-header-bg)',\n borderRight: '1px solid var(--eg-color-border)',\n borderBottom: '1px solid var(--eg-color-border)',\n boxSizing: 'border-box',\n flexShrink: 0\n }\n },\n\n rowOutlineGutterStyle() {\n return { width: OUTLINE_GUTTER + 'px', flexShrink: 0 }\n },\n\n frozenColHeaderStyle() {\n const w = this.getFrozenWidth()\n return {\n width: w + 'px',\n minWidth: w + 'px',\n overflow: 'hidden',\n flexShrink: 0\n }\n },\n\n scrollColHeaderStyle() {\n // Once measured, lock the header to the body's exact clientWidth (flex: 0 0 <px>)\n // instead of growing independently via flex:1 — this guarantees identical\n // scrollWidth-clientWidth (max scrollLeft) on both, so syncing scrollLeft never clamps\n // one before the other. (padding-right can't do this: clientWidth always includes\n // padding, so padding never actually shrinks it.)\n if (this.headerViewportWidth != null) {\n return { flex: '0 0 ' + this.headerViewportWidth + 'px', overflow: 'hidden' }\n }\n return { flex: 1, overflow: 'hidden' }\n },\n\n bodyAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n flex: 1,\n position: 'relative'\n }\n },\n\n rowHeaderColStyle() {\n return {\n width: ROW_HEADER_WIDTH + 'px',\n minWidth: ROW_HEADER_WIDTH + 'px',\n flexShrink: 0,\n display: 'flex',\n flexDirection: 'column',\n position: 'sticky',\n left: 0,\n zIndex: 20,\n background: 'var(--eg-color-header-bg)'\n }\n },\n\n rowOutlineColStyle() {\n return {\n width: OUTLINE_GUTTER + 'px',\n minWidth: OUTLINE_GUTTER + 'px',\n flexShrink: 0,\n position: 'relative',\n background: 'var(--eg-color-cell-bg)'\n }\n },\n\n scrollBodyStyle() {\n return {\n flex: 1,\n overflow: 'auto',\n position: 'relative',\n overflowAnchor: 'none' /* prevent Chrome scroll anchoring from fighting virtual scroll translateY */\n }\n },\n\n frozenColBodyStyle() {\n const w = this.getFrozenWidth()\n return {\n position: 'sticky',\n left: 0,\n width: w + 'px',\n zIndex: 10,\n background: 'white',\n overflow: 'hidden'\n }\n },\n\n mainCellsStyle() {\n const left = this.getFrozenWidth()\n return {\n position: 'absolute',\n left: left + 'px',\n top: 0,\n bottom: 0\n }\n },\n\n scrollContentWidth() {\n let w = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColHidden(i) && !this.pinnedRightSet.has(i)) w += this.getColW(i)\n }\n // Extra right padding so pinned-right zone doesn't cover the last scrollable column\n if (this.hasPinnedRight) w += this.pinnedRightWidth\n return w\n },\n\n scrollableContentWidth() {\n let w = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColHidden(i) && this.isColumnScrollable(i)) w += this.getColW(i)\n }\n return w\n },\n\n pinnedRightBodyStyle() {\n return {\n position: 'sticky',\n right: 0,\n width: this.pinnedRightWidth + 'px',\n zIndex: 10,\n background: 'white',\n flexShrink: 0\n }\n },\n\n pinnedRightHeaderStyle() {\n return {\n width: this.pinnedRightWidth + 'px',\n minWidth: this.pinnedRightWidth + 'px',\n overflow: 'hidden',\n flexShrink: 0,\n borderLeft: '1px solid var(--eg-color-border)'\n }\n },\n\n scrollRowHeadersStyle() {\n return { flex: 1, overflow: 'hidden', position: 'relative', overflowAnchor: 'none' }\n },\n\n footerAreaStyle() {\n return {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n position: 'sticky',\n bottom: 0,\n zIndex: 30,\n background: 'var(--eg-color-footer-bg)',\n boxShadow: '0 -2px 0 0 var(--eg-color-border-strong)'\n }\n },\n\n footerLabelStyle() {\n const outlineW = this.rowGroups.length ? OUTLINE_GUTTER : 0\n return {\n width: (ROW_HEADER_WIDTH + outlineW) + 'px',\n minWidth: (ROW_HEADER_WIDTH + outlineW) + 'px',\n height: this._footerRowH + 'px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'var(--eg-color-footer-bg)',\n borderRight: '1px solid var(--eg-color-border)',\n borderTop: '1px solid var(--eg-color-border)',\n boxSizing: 'border-box',\n flexShrink: 0,\n fontSize: 'var(--eg-font-size-header)',\n fontWeight: 600\n }\n },\n\n frozenColFooterStyle() {\n const w = this.getFrozenWidth()\n return {\n width: w + 'px',\n minWidth: w + 'px',\n height: this._footerRowH + 'px',\n overflow: 'hidden',\n flexShrink: 0\n }\n },\n\n pinnedRightFooterStyle() {\n return {\n width: this.pinnedRightWidth + 'px',\n minWidth: this.pinnedRightWidth + 'px',\n height: this._footerRowH + 'px',\n overflow: 'hidden',\n flexShrink: 0,\n borderLeft: '1px solid var(--eg-color-border)'\n }\n },\n\n colOutlineRowStyle() {\n return {\n position: 'absolute',\n top: -OUTLINE_GUTTER + 'px',\n left: 0,\n right: 0,\n height: OUTLINE_GUTTER + 'px'\n }\n },\n\n resizeLineStyle() {\n if (!this.resizing.active) return {}\n if (this.resizing.type === 'col') {\n return {\n position: 'fixed',\n top: 0,\n left: this.resizing.currentPos + 'px',\n width: '2px',\n height: '100%',\n background: 'var(--eg-color-accent)',\n pointerEvents: 'none',\n zIndex: 9999\n }\n } else {\n return {\n position: 'fixed',\n left: 0,\n top: this.resizing.currentPos + 'px',\n height: '2px',\n width: '100%',\n background: 'var(--eg-color-accent)',\n pointerEvents: 'none',\n zIndex: 9999\n }\n }\n }\n },\n\n watch: {\n size() {\n this.rowHeights = {}\n this.$nextTick(() => this.updateVirtualScroll())\n },\n\n autoWidth(v) {\n if (v) this._applyAutoWidth()\n },\n\n columns: {\n immediate: true,\n handler(cols) {\n this.leafCols = flattenColumns(cols)\n this.headerDepth = columnTreeDepth(cols)\n this.headerRows = buildHeaderRows(cols, this.headerDepth)\n // Init colWidths\n this.leafCols.forEach(col => {\n if (this.colWidths[col._flatIndex] === undefined) {\n this.colWidths[col._flatIndex] = col.width || DEFAULT_COL_WIDTH\n }\n })\n this.computeColumnTotals()\n this.updateVirtualScroll()\n this._applyAutoWidth()\n }\n },\n merges: {\n immediate: true,\n handler(v) { this.internalMerges = v ? [...v] : [] }\n },\n collapsedGroups: {\n immediate: true,\n handler(v) { this.internalCollapsedGroups = v ? [...v] : [] }\n },\n data: {\n immediate: true,\n handler(newData) {\n // Keep _dataRaw in sync so template uses fresh data without triggering dependArray\n this._dataRaw = newData || []\n this.updateVirtualScroll()\n this.computeColumnTotals()\n // Force re-render so cell values refresh even when virtualScroll indices don't change\n // (e.g. editing a cell: same row count, same scroll position, only content changed)\n this.$forceUpdate()\n this._applyAutoWidth()\n }\n },\n totalRows() { this.updateVirtualScroll() },\n hiddenRowSet() { this.updateVirtualScroll() },\n totalVirtualHeight() { this.$nextTick(this.syncHeaderViewportWidth) }\n },\n\n created() {\n // Non-reactive row data reference — avoids Vue 2 dependArray(data) O(n) loop.\n // Vue 2 calls dependArray() for EVERY `data[ri]` access in the template,\n // iterating all 50,000 rows each time. With 1200 cells per render that's\n // 60 million iterations per render (~600ms). _dataRaw bypasses this.\n this._dataRaw = this.data || []\n\n // Non-reactive caches: same (w,h) → same style object → Vue 2 skips DOM style writes\n this._cellStyleCache = Object.create(null)\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n // rAF handles for scroll/resize throttle\n this._scrollRAF = null\n this._resizeRAF = null\n\n // Undo/redo history — non-reactive to avoid Vue overhead.\n // Each entry: { type: 'data'|'merges', before: {...}, after: {...} }\n // 'data' stores only diff rows: { indices: number[], rows: object[] }\n this._history = []\n this._historyIndex = -1\n this._historySkip = false // true while undo/redo is in progress\n\n // Column drag preview offsets — non-reactive so direct DOM updates bypass Vue re-renders.\n // Keys are column keys, values are pixel offsets.\n this._dragOffsets = {}\n\n },\n\n mounted() {\n this.updateVirtualScroll()\n this.$nextTick(this.syncHeaderViewportWidth)\n document.addEventListener('mousemove', this.onGlobalMouseMove)\n document.addEventListener('mouseup', this.onGlobalMouseUp)\n document.addEventListener('keydown', this.onGlobalKeyDown)\n document.addEventListener('mousedown', this._onDocMouseDownForDropdown, true)\n window.addEventListener('resize', this.syncHeaderViewportWidth)\n window.addEventListener('scroll', this._onWindowScrollForDropdown, true)\n },\n\n updated() {\n // After Vue re-renders (e.g., virtual scroll adds new rows during drag),\n // apply missing transforms to newly rendered cells that don't have one yet.\n if (!this.colDrag.active || !this.$el) return\n const offsets = this._dragOffsets\n if (!offsets || !Object.keys(offsets).length) return\n this.$el.querySelectorAll('[data-fi]').forEach(el => {\n if (el.style.transform) return\n const fi = parseInt(el.dataset.fi)\n const col = this.leafCols[fi]\n const dx = col ? (offsets[col.key] || 0) : 0\n if (dx) el.style.transform = `translateX(${dx}px)`\n })\n },\n\n beforeDestroy() {\n document.removeEventListener('mousemove', this.onGlobalMouseMove)\n document.removeEventListener('mouseup', this.onGlobalMouseUp)\n document.removeEventListener('keydown', this.onGlobalKeyDown)\n document.removeEventListener('mousedown', this._onDocMouseDownForDropdown, true)\n window.removeEventListener('resize', this.syncHeaderViewportWidth)\n window.removeEventListener('scroll', this._onWindowScrollForDropdown, true)\n },\n\n methods: {\n // =========================================================\n // VIRTUAL SCROLL\n // =========================================================\n updateVirtualScroll() {\n const footerH = this.hasFooter ? this._footerRowH : 0\n const containerH = this.height - (this._headerRowH * this.headerDepth) - footerH\n // Use binary search against the Vue-cached cumulativeHeights → O(log n) per scroll.\n // overscan=8 (≈224px at default row height) gives enough buffer for fast scroll\n // without blank-band artifacts between rAF updates.\n const result = findVisibleRange(\n this.scrollTop, Math.max(containerH, 100), this.totalRows, this.cumulativeHeights, 8\n )\n this.virtualStartIndex = result.startIndex\n this.virtualEndIndex = result.endIndex\n this.virtualOffsetTop = result.offsetTop\n this.totalVirtualHeight = result.totalHeight\n },\n\n onBodyScroll(e) {\n const target = e.target\n // Sync sibling scroll containers immediately (visual alignment, no layout trigger)\n if (this.$refs.scrollColHeader) this.$refs.scrollColHeader.scrollLeft = target.scrollLeft\n if (this.$refs.scrollFooter) this.$refs.scrollFooter.scrollLeft = target.scrollLeft\n if (this.$refs.scrollRowHeaders) this.$refs.scrollRowHeaders.scrollTop = target.scrollTop\n\n // Close dropdown on scroll — fixed-position dropdown drifts away from the moving cell\n if (this.selectDropdown) this.closeSelectDropdown()\n\n // Throttle reactive state updates + virtual scroll recalc to one rAF per frame.\n // Read scrollTop from the DOM ref at rAF time (not from the stale event closure)\n // so that multiple scroll events arriving between frames still resolve to the\n // final position — eliminates the flickering caused by render/scroll mismatch.\n if (!this._scrollRAF) {\n this._scrollRAF = requestAnimationFrame(() => {\n this._scrollRAF = null\n const sb = this.$refs.scrollBody\n if (!sb) return\n this.scrollTop = sb.scrollTop\n this.scrollLeft = sb.scrollLeft\n this.updateVirtualScroll()\n })\n }\n },\n\n onScroll(e) {},\n\n // .eg-scroll-col-header (overflow:hidden, synced via JS) has no native scrollbar, but\n // .eg-scroll-body (overflow:auto) does — its real vertical scrollbar eats into its\n // clientWidth. If both containers just grow via flex:1, the header ends up wider than\n // the body, so its max scrollLeft is smaller and syncing clamps it before the body\n // reaches its rightmost scroll position — column borders desync right at the scroll\n // end. Locking the header to the body's exact measured clientWidth (scrollColHeaderStyle)\n // makes both max scrollLeft values identical.\n syncHeaderViewportWidth() {\n const el = this.$refs.scrollBody\n if (!el) return\n if (this.headerViewportWidth !== el.clientWidth) this.headerViewportWidth = el.clientWidth\n },\n\n // =========================================================\n // HELPERS\n // =========================================================\n isRowHidden(ri) { return this.hiddenRowSet.has(ri) },\n isColHidden(ci) { return this.effectiveHiddenColSet.has(ci) },\n\n getColW(ci) {\n return this.colWidths[ci] !== undefined ? this.colWidths[ci] : (this.leafCols[ci] ? this.leafCols[ci].width || DEFAULT_COL_WIDTH : DEFAULT_COL_WIDTH)\n },\n\n getRowH(ri) {\n if (this.isRowHidden(ri)) return 0\n return this.rowHeights[ri] || this._rowH\n },\n\n getColLeft(ci) {\n let left = 0\n for (let i = 0; i < ci && i < this.leafCols.length; i++) {\n if (!this.isColHidden(i)) left += this.getColW(i)\n }\n return left\n },\n\n getFrozenWidth() {\n return this.hasPinnedLeft ? this.pinnedLeftWidth : 0\n },\n\n isColumnPinnedLeft(ci) {\n return this.pinnedLeftSet.has(ci)\n },\n\n isColumnPinnedRight(ci) {\n return this.pinnedRightSet.has(ci)\n },\n\n isColumnScrollable(ci) {\n return !this.isColumnPinnedLeft(ci) && !this.isColumnPinnedRight(ci)\n },\n\n getZoneColLeft(ci, zone) {\n let left = 0\n if (zone === 'left') {\n for (const col of this.pinnedLeftCols) {\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex)) left += this.getColW(col._flatIndex)\n }\n } else if (zone === 'right') {\n for (const col of this.pinnedRightCols) {\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex)) left += this.getColW(col._flatIndex)\n }\n } else {\n for (let i = 0; i < this.leafCols.length; i++) {\n const col = this.leafCols[i]\n if (col._flatIndex === ci) break\n if (!this.isColHidden(col._flatIndex) && this.isColumnScrollable(col._flatIndex)) {\n left += this.getColW(col._flatIndex)\n }\n }\n }\n return left\n },\n\n isCellInZone(cell, rowIdx, zone) {\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z === zone) return true\n }\n return false\n }\n const ci = cell.column._flatIndex\n if (this.isColHidden(ci)) return false\n const z = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n return z === zone\n },\n\n getHeaderCellStyleForZone(cell, rowIndex, zone) {\n let leftLeafIdx = cell._firstLeafFlatIndex\n if (cell.isGroup) {\n const end = leftLeafIdx + cell.colspan - 1\n for (let i = leftLeafIdx; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z === zone) { leftLeafIdx = i; break }\n }\n }\n const left = this.getZoneColLeft(leftLeafIdx, zone)\n let width = 0\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const z = this.isColumnPinnedLeft(i) ? 'left' : (this.isColumnPinnedRight(i) ? 'right' : 'scroll')\n if (z !== zone) continue\n width += this.getColW(i)\n }\n } else {\n width = this.getColW(cell.column._flatIndex)\n }\n return {\n top: (this._headerRowH * rowIndex) + 'px',\n left: left + 'px',\n width: width + 'px',\n height: (this._headerRowH * cell.rowspan) + 'px'\n }\n },\n\n getRangeWidth(startCol, endCol) {\n let w = 0\n for (let i = startCol; i <= endCol && i < this.leafCols.length; i++) {\n if (!this.isColHidden(i)) w += this.getColW(i)\n }\n return w\n },\n\n getRangeHeight(startRow, endRow) {\n let h = 0\n for (let i = startRow; i <= endRow && i < this.totalRows; i++) {\n if (!this.isRowHidden(i)) h += this.getRowH(i)\n }\n return h\n },\n\n getCellValue(ri, ci) {\n const col = this.leafCols[ci]\n if (!col) return ''\n const row = this._dataRaw[ri]\n if (!row) return ''\n const v = row[col.key]\n return v !== undefined ? v : ''\n },\n\n isEditing(ri, ci) {\n return this.editingCell && this.editingCell.row === ri && this.editingCell.col === ci\n },\n\n isMergedAway(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n if (!merge) return false\n const nm = normalizeRange(merge)\n return !(nm.startRow === ri && nm.startCol === ci)\n },\n\n getMergeSpan(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n if (!merge) return { rowspan: 1, colspan: 1 }\n const nm = normalizeRange(merge)\n return {\n rowspan: nm.endRow - nm.startRow + 1,\n colspan: nm.endCol - nm.startCol + 1\n }\n },\n\n isSelected(ri, ci) {\n return isCellInAnyRange(ri, ci, this.selectionRanges)\n },\n\n isActiveCell(ri, ci) {\n return this.activeCell.row === ri && this.activeCell.col === ci\n },\n\n isCopyHighlighted(ri, ci) {\n if (!this.clipboardRange || this.clipboardMode !== 'copy') return false\n return isCellInRange(ri, ci, this.clipboardRange)\n },\n\n // =========================================================\n // STYLES\n // =========================================================\n getRowStyle(ri) {\n const h = this.getRowH(ri)\n const key = h\n if (this._rowStyleCache[key]) return this._rowStyleCache[key]\n const style = { height: h + 'px', minHeight: h + 'px' }\n this._rowStyleCache[key] = style\n return style\n },\n\n getRowHeaderStyle(ri) {\n const h = this.getRowH(ri)\n const key = h\n if (this._rowHeaderStyleCache[key]) return this._rowHeaderStyleCache[key]\n const style = { height: h + 'px' }\n this._rowHeaderStyleCache[key] = style\n return style\n },\n\n getCellStyle(ri, ci) {\n const merge = findMergeAtCell(ri, ci, this.internalMerges)\n const nm = merge ? normalizeRange(merge) : null\n let w = this.getColW(ci)\n let h = this.getRowH(ri)\n\n if (nm && nm.startRow === ri && nm.startCol === ci) {\n w = this.getRangeWidth(nm.startCol, nm.endCol)\n h = this.getRangeHeight(nm.startRow, nm.endRow)\n }\n\n // Position cells with the same absolute-left arithmetic the header uses\n // (getZoneColLeft), instead of relying on flex layout to accumulate widths —\n // flex and a JS integer sum can drift apart by a few px over many columns,\n // desyncing the body's column borders from the header's.\n const zone = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n const left = this.getZoneColLeft(ci, zone)\n\n // Cache by dimensions+position — same (w,h,left) → same object ref → Vue 2 skips DOM style writes\n const key = w + '_' + h + '_' + left\n if (this._cellStyleCache[key]) return this._cellStyleCache[key]\n const style = { position: 'absolute', left: left + 'px', top: '0px', width: w + 'px', minWidth: w + 'px', height: h + 'px' }\n this._cellStyleCache[key] = style\n return style\n },\n\n getCellClasses(ri, ci) {\n const col = this.leafCols[ci]\n return {\n 'eg-cell-active': this.isActiveCell(ri, ci),\n 'eg-cell-selected': this.isSelected(ri, ci) && !this.isActiveCell(ri, ci),\n 'eg-cell-fill-preview': this.isInFillPreview(ri, ci),\n 'eg-cell-copy': this.isCopyHighlighted(ri, ci),\n 'eg-cell-merged-hidden': this.isMergedAway(ri, ci),\n 'eg-cell-select': !!(col && this.isSelectLikeCol(col)),\n 'eg-cell-checkbox': !!(col && col.type === 'checkbox'),\n 'eg-cell-readonly': !this.isCellEditable(ri, ci),\n 'eg-cell-invalid': !!(this.invalidCell && this.invalidCell.row === ri && this.invalidCell.col === ci),\n 'eg-cell--has-suffix': !!(col && this.hasSuffixSlot(col)),\n 'eg-cell--drag-source': this.colDrag.active && ci >= this.colDrag.sourceFirstLeaf && ci < this.colDrag.sourceFirstLeaf + this.colDrag.sourceLeafCount\n }\n },\n\n isInFillPreview(ri, ci) {\n if (!this.fillDrag.active || !this.fillDrag.sourceRange) return false\n const src = this.fillDrag.sourceRange\n const targetRow = this.fillDrag.currentRow\n const targetCol = this.fillDrag.currentCol\n if (targetRow > src.endRow) {\n return ri > src.endRow && ri <= targetRow && ci >= src.startCol && ci <= src.endCol\n }\n if (targetCol > src.endCol) {\n return ci > src.endCol && ci <= targetCol && ri >= src.startRow && ri <= src.endRow\n }\n return false\n },\n\n getHeaderCellStyle(cell, rowIndex, isFrozen) {\n const zone = isFrozen ? 'left' : 'scroll'\n let leftLeafIdx = cell._firstLeafFlatIndex\n if (cell.isGroup) {\n const end = leftLeafIdx + cell.colspan - 1\n for (let i = leftLeafIdx; i <= end; i++) {\n if (this.isColHidden(i)) continue\n if (isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)) { leftLeafIdx = i; break }\n }\n }\n const left = this.getZoneColLeft(leftLeafIdx, zone)\n\n let width = 0\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const inZone = isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)\n if (!inZone) continue\n width += this.getColW(i)\n }\n } else {\n width = this.getColW(cell.column._flatIndex)\n }\n\n return {\n top: (this._headerRowH * rowIndex) + 'px',\n left: left + 'px',\n width: width + 'px',\n height: (this._headerRowH * cell.rowspan) + 'px'\n }\n },\n\n getHeaderDragTransform(cell) {\n if (!this.colDrag.active) return null\n // Read from non-reactive _dragOffsets — no Vue dependency tracking, no re-render on offset change\n let key\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (!this.isColHidden(i) && this.leafCols[i]) { key = this.leafCols[i].key; break }\n }\n } else {\n key = cell.column.key\n }\n if (!key) return null\n const dx = this._dragOffsets[key]\n if (!dx) return null\n return { transform: `translateX(${dx}px)` }\n },\n\n getCellDragTransform(ci) {\n if (!this.colDrag.active) return null\n // Read from non-reactive _dragOffsets — no Vue dependency tracking\n const col = this.leafCols[ci]\n if (!col) return null\n const dx = this._dragOffsets[col.key]\n if (!dx) return null\n return { transform: `translateX(${dx}px)` }\n },\n\n // =========================================================\n // FOOTER (column totals)\n // =========================================================\n computeColumnTotals() {\n const totals = {}\n const rows = this._dataRaw || []\n this.leafCols.forEach(col => {\n if (!col.showTotal) return\n let sum = 0\n let hasNumber = false\n for (let ri = 0; ri < rows.length; ri++) {\n const row = rows[ri]\n const v = row ? row[col.key] : undefined\n if (typeof v === 'number' && isFinite(v)) {\n sum += v\n hasNumber = true\n }\n }\n totals[col._flatIndex] = hasNumber ? Math.round(sum * 1e6) / 1e6 : null\n })\n this.columnTotals = totals\n },\n\n getColumnTotalDisplay(ci) {\n const col = this.leafCols[ci]\n if (!col || !col.showTotal) return ''\n const v = this.columnTotals[ci]\n return v === null || v === undefined ? '-' : v\n },\n\n getFooterCellStyle(ci) {\n const zone = this.isColumnPinnedLeft(ci) ? 'left' : (this.isColumnPinnedRight(ci) ? 'right' : 'scroll')\n const left = this.getZoneColLeft(ci, zone)\n const w = this.getColW(ci)\n return {\n position: 'absolute',\n left: left + 'px',\n top: '0px',\n width: w + 'px',\n minWidth: w + 'px',\n height: this._footerRowH + 'px'\n }\n },\n\n isCellVisible(cell, rowIndex, isFrozen) {\n if (cell.isGroup) {\n const start = cell._firstLeafFlatIndex\n const end = start + cell.colspan - 1\n for (let i = start; i <= end; i++) {\n if (this.isColHidden(i)) continue\n const inZone = isFrozen ? this.isColumnPinnedLeft(i) : this.isColumnScrollable(i)\n if (inZone) return true\n }\n return false\n }\n const ci = cell.column._flatIndex\n if (this.isColHidden(ci)) return false\n return isFrozen ? this.isColumnPinnedLeft(ci) : this.isColumnScrollable(ci)\n },\n\n getRowGroupBtnStyle(group) {\n const top = getRowTop(group.startIndex, this._rowH, this.rowHeights) - this.scrollTop\n return {\n position: 'absolute',\n top: top + 'px',\n left: '2px',\n width: '16px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n fontSize: '10px',\n cursor: 'pointer',\n background: 'var(--eg-color-accent-soft)',\n border: '1px solid var(--eg-color-group-border)',\n borderRadius: '2px',\n zIndex: 5\n }\n },\n\n getColGroupBtnStyle(group) {\n const left = this.getColLeft(group.startIndex) - this.scrollLeft\n return {\n position: 'absolute',\n left: left + 'px',\n top: '2px',\n width: '16px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n fontSize: '10px',\n cursor: 'pointer',\n background: 'var(--eg-color-accent-soft)',\n border: '1px solid var(--eg-color-group-border)',\n borderRadius: '2px'\n }\n },\n\n // =========================================================\n // CELL SELECTION (3.1)\n // =========================================================\n selectCell(row, col, addToSelection = false) {\n if (row < 0 || row >= this.totalRows || col < 0 || col >= this.leafCols.length) return\n this.activeCell = { row, col }\n if (addToSelection) {\n this.selectionRanges.push(singleCellRange(row, col))\n } else {\n this.selectionRanges = [singleCellRange(row, col)]\n }\n this.emitSelectionChange()\n },\n\n selectRange(startRow, startCol, endRow, endCol, replace = true) {\n const range = { startRow, startCol, endRow, endCol }\n if (replace) {\n this.selectionRanges = [range]\n } else {\n this.selectionRanges.push(range)\n }\n this.emitSelectionChange()\n },\n\n selectRow(ri) {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [{ startRow: ri, endRow: ri, startCol: 0, endCol: this.leafCols.length - 1 }]\n this.emitSelectionChange()\n },\n\n selectColumn(ci) {\n this.activeCell = { row: 0, col: ci }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: ci, endCol: ci }]\n this.emitSelectionChange()\n },\n\n selectAll() {\n this.activeCell = { row: 0, col: 0 }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: 0, endCol: this.leafCols.length - 1 }]\n this.emitSelectionChange()\n },\n\n emitSelectionChange() {\n this.$emit('selection-change', {\n activeCell: { ...this.activeCell },\n ranges: this.selectionRanges.map(r => normalizeRange(r))\n })\n },\n\n onCellMouseDown(e, ri, ci) {\n this.invalidCell = null\n if (this.editingCell) {\n const editCol = this.leafCols[this.editingCell.col]\n if (editCol && this._hasCustomEdit(editCol)) {\n this.cancelEdit()\n } else {\n this.commitEdit()\n }\n }\n this.hideContextMenu()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n\n if (e.ctrlKey || e.metaKey) {\n if (this.selectDropdown) this.closeSelectDropdown()\n // Ctrl+click: start new independent range\n this.activeCell = { row: ri, col: ci }\n this.mouseDownRange = { startRow: ri, startCol: ci, endRow: ri, endCol: ci }\n this.selectionRanges.push(this.mouseDownRange)\n this.isCtrlDrag = true\n } else if (e.shiftKey && this.selectionRanges.length > 0) {\n if (this.selectDropdown) this.closeSelectDropdown()\n // Shift+click: extend primary range to this cell\n this.selectionRanges = [buildRange(this.activeCell, { row: ri, col: ci })]\n } else {\n const wasActive = this.activeCell.row === ri && this.activeCell.col === ci\n this.activeCell = { row: ri, col: ci }\n this.mouseDownRange = { startRow: ri, startCol: ci, endRow: ri, endCol: ci }\n this.selectionRanges = [this.mouseDownRange]\n this.isCtrlDrag = false\n\n // Open select dropdown on click if cell was already active (2nd click)\n const col = this.leafCols[ci]\n if (wasActive && col && this.isSelectLikeCol(col) && !this._hasCustomEdit(col) && this.isCellEditable(ri, ci)) {\n this.openSelectDropdown(ri, ci, e)\n e.preventDefault()\n this.isMouseDown = true\n this.emitSelectionChange()\n return\n }\n if (this.selectDropdown) this.closeSelectDropdown()\n }\n\n this.isMouseDown = true\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onCellMouseOver(e, ri, ci) {\n if (!this.isMouseDown) return\n if (this.fillDrag.active) return\n if (this.dragMove.active) {\n this.dragMove.targetRow = ri\n this.dragMove.targetCol = ci\n return\n }\n\n // Extend current drag range\n if (this.mouseDownRange) {\n this.mouseDownRange.endRow = ri\n this.mouseDownRange.endCol = ci\n this.emitSelectionChange()\n }\n },\n\n onCellMouseUp() {\n this.isMouseDown = false\n },\n\n onCellDblClick(ri, ci) {\n const col = this.leafCols[ci]\n if (!this.isCellEditable(ri, ci)) return\n if (col && this.isSelectLikeCol(col) && !this._hasCustomEdit(col)) {\n this.openSelectDropdownForActive()\n return\n }\n if (col && col.type === 'checkbox') return\n this.startEditing(ri, ci, null, true)\n },\n\n onRowHeaderMouseDown(e, ri) {\n const endCol = this.leafCols.length - 1\n const fullRow = { startRow: ri, endRow: ri, startCol: 0, endCol }\n\n if (e.ctrlKey || e.metaKey) {\n if (e.shiftKey && this.selectionRanges.length > 0) {\n // Ctrl+Shift: active qatordan ri gacha yangi range qo'sh\n const sr = Math.min(this.activeCell.row, ri)\n const er = Math.max(this.activeCell.row, ri)\n this.selectionRanges = [...this.selectionRanges, { startRow: sr, endRow: er, startCol: 0, endCol }]\n } else {\n // Ctrl+click: qatorni toggle qil\n const idx = this.selectionRanges.findIndex(r =>\n r.startRow === ri && r.endRow === ri && r.startCol === 0 && r.endCol === endCol\n )\n if (idx >= 0) {\n const next = this.selectionRanges.filter((_, i) => i !== idx)\n this.selectionRanges = next.length ? next : [fullRow]\n } else {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [...this.selectionRanges, fullRow]\n }\n }\n } else if (e.shiftKey && this.selectionRanges.length > 0) {\n const sr = Math.min(this.activeCell.row, ri)\n const er = Math.max(this.activeCell.row, ri)\n this.selectionRanges = [{ startRow: sr, endRow: er, startCol: 0, endCol }]\n } else {\n this.activeCell = { row: ri, col: 0 }\n this.selectionRanges = [fullRow]\n }\n\n this.mouseDownRange = this.selectionRanges[this.selectionRanges.length - 1]\n this.isMouseDown = true\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onColHeaderMouseDown(e, cell) {\n // Start pending drag (activates after 5 px horizontal movement)\n // Works for both leaf and group headers\n if (this.columnDraggable && !e.shiftKey && !e.ctrlKey && !e.metaKey) {\n this.colDrag.pending = true\n this.colDrag.active = false\n this.colDrag.sourceFirstLeaf = cell._firstLeafFlatIndex\n this.colDrag.sourceLeafCount = cell.isGroup ? cell.colspan : 1\n this.colDrag.startX = e.clientX\n this.colDrag.startY = e.clientY\n this.colDrag.ghostLabel = cell.column.title || ''\n }\n\n if (cell.isGroup) {\n // Group header click: select all leaf columns within the group\n const startCol = cell._firstLeafFlatIndex\n const endCol = startCol + cell.colspan - 1\n this.activeCell = { row: 0, col: startCol }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol, endCol }]\n this.isMouseDown = true\n this.mouseDownRange = this.selectionRanges[0]\n this.emitSelectionChange()\n e.preventDefault()\n return\n }\n\n const ci = cell.column._flatIndex\n if (e.shiftKey && this.selectionRanges.length > 0) {\n const sc = Math.min(this.activeCell.col, ci)\n const ec = Math.max(this.activeCell.col, ci)\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: sc, endCol: ec }]\n } else {\n this.activeCell = { row: 0, col: ci }\n this.selectionRanges = [{ startRow: 0, endRow: this.totalRows - 1, startCol: ci, endCol: ci }]\n }\n this.isMouseDown = true\n this.mouseDownRange = this.selectionRanges[0]\n this.emitSelectionChange()\n e.preventDefault()\n },\n\n onColHeaderDblClick(e, cell) {\n if (cell.isGroup) return\n this.autoFitColumn(cell.column._flatIndex)\n },\n\n onColHeaderContextMenu(e, cell) {\n if (!cell.isGroup) {\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: -1, col: cell.column._flatIndex }\n }\n },\n\n onRowContextMenu(e, ri) {\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: ri, col: -1 }\n },\n\n onCellContextMenu(e, ri, ci) {\n if (!this.isSelected(ri, ci)) {\n this.selectCell(ri, ci)\n }\n this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, row: ri, col: ci }\n },\n\n hideContextMenu() {\n this.contextMenu.visible = false\n },\n\n // =========================================================\n // KEYBOARD NAVIGATION (3.2)\n // =========================================================\n onKeyDown(e) {\n // Delegate keyboard navigation to the active dropdown component\n if (this.selectDropdown) {\n const comp = this.$refs.selectDropdownComp\n if (comp && comp.handleKey) comp.handleKey(e)\n return\n }\n\n if (this.editingCell) return // handled by onEditKeyDown\n const key = e.key\n\n if ((e.ctrlKey || e.metaKey) && key === 'z' && !e.shiftKey) {\n e.preventDefault()\n this.undo()\n return\n }\n if ((e.ctrlKey || e.metaKey) && (key === 'y' || (key === 'z' && e.shiftKey))) {\n e.preventDefault()\n this.redo()\n return\n }\n\n if (key === 'a' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.selectAll()\n return\n }\n\n if (key === 'c' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.copySelection()\n return\n }\n if (key === 'x' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.cutSelection()\n return\n }\n if (key === 'v' && (e.ctrlKey || e.metaKey)) {\n e.preventDefault()\n this.pasteAt(this.activeCell.row, this.activeCell.col)\n return\n }\n\n if (key === 'Delete' || key === 'Backspace') {\n e.preventDefault()\n this.clearSelection()\n return\n }\n\n if (key === 'F2') {\n e.preventDefault()\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && this.isSelectLikeCol(activeCol) && !this._hasCustomEdit(activeCol)) {\n this.openSelectDropdownForActive()\n } else if (activeCol && activeCol.type === 'checkbox') {\n this.toggleCheckbox(this.activeCell.row, this.activeCell.col)\n } else {\n this.startEditing(this.activeCell.row, this.activeCell.col, null, true)\n }\n return\n }\n\n if (key === ' ') {\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && activeCol.type === 'checkbox') {\n e.preventDefault()\n this.toggleCheckbox(this.activeCell.row, this.activeCell.col)\n return\n }\n }\n\n if (key === 'Escape') {\n this.clipboardRange = null\n this.clipboardMatrix = null\n this.clipboardMode = null\n return\n }\n\n if (key === 'Tab') {\n e.preventDefault()\n this.moveActive(0, e.shiftKey ? -1 : 1, e)\n return\n }\n if (key === 'Enter') {\n e.preventDefault()\n this.moveActive(e.shiftKey ? -1 : 1, 0, e)\n return\n }\n\n const arrows = { ArrowUp: [-1,0], ArrowDown: [1,0], ArrowLeft: [0,-1], ArrowRight: [0,1] }\n if (arrows[key]) {\n e.preventDefault()\n const [dr, dc] = arrows[key]\n if (e.shiftKey) {\n // Extend selection\n const pr = this.primaryRange || singleCellRange(this.activeCell.row, this.activeCell.col)\n const nm = normalizeRange(pr)\n // Determine which edge to extend\n if (dr === -1) pr.startRow = Math.max(0, nm.startRow - 1)\n if (dr === 1) pr.endRow = Math.min(this.totalRows - 1, nm.endRow + 1)\n if (dc === -1) pr.startCol = Math.max(0, nm.startCol - 1)\n if (dc === 1) pr.endCol = Math.min(this.leafCols.length - 1, nm.endCol + 1)\n this.selectionRanges = [pr]\n this.emitSelectionChange()\n } else {\n this.moveActive(dr, dc, e)\n }\n return\n }\n\n if (key === 'Home') {\n e.preventDefault()\n if (e.ctrlKey) {\n this.selectCell(0, 0)\n } else {\n this.selectCell(this.activeCell.row, 0)\n }\n return\n }\n if (key === 'End') {\n e.preventDefault()\n if (e.ctrlKey) {\n this.selectCell(this.totalRows - 1, this.leafCols.length - 1)\n } else {\n this.selectCell(this.activeCell.row, this.leafCols.length - 1)\n }\n return\n }\n if (key === 'PageUp') {\n e.preventDefault()\n const visibleRows = Math.floor((this.height - this._headerRowH * this.headerDepth) / this._rowH)\n this.moveActive(-visibleRows, 0, e)\n return\n }\n if (key === 'PageDown') {\n e.preventDefault()\n const visibleRows = Math.floor((this.height - this._headerRowH * this.headerDepth) / this._rowH)\n this.moveActive(visibleRows, 0, e)\n return\n }\n },\n\n onKeyPress(e) {\n if (this.editingCell) return\n if (this.selectDropdown) return\n if (e.ctrlKey || e.metaKey || e.altKey) return\n if (e.key && e.key.length === 1) {\n const activeCol = this.leafCols[this.activeCell.col]\n if (activeCol && this.isSelectLikeCol(activeCol) && !this._hasCustomEdit(activeCol)) {\n e.preventDefault()\n this.openSelectDropdownForActive()\n return\n }\n if (activeCol && activeCol.type === 'checkbox') {\n e.preventDefault()\n return\n }\n this.startEditing(this.activeCell.row, this.activeCell.col, e.key, false)\n }\n },\n\n onGlobalKeyDown(e) {\n if (e.key === 'Escape' && (this.colDrag.active || this.colDrag.pending)) {\n this._resetColDrag()\n e.preventDefault()\n }\n },\n\n moveActive(dr, dc, e) {\n let row = this.activeCell.row + dr\n let col = this.activeCell.col + dc\n\n // Tab: wrap around rows\n if (e && e.key === 'Tab') {\n if (col >= this.leafCols.length) { col = 0; row++ }\n if (col < 0) { col = this.leafCols.length - 1; row-- }\n }\n\n row = Math.max(0, Math.min(this.totalRows - 1, row))\n col = Math.max(0, Math.min(this.leafCols.length - 1, col))\n\n // Skip hidden cols\n while (this.isColHidden(col) && col > 0 && col < this.leafCols.length - 1) {\n col += dc >= 0 ? 1 : -1\n }\n // Skip hidden rows\n while (this.isRowHidden(row) && row > 0 && row < this.totalRows - 1) {\n row += dr >= 0 ? 1 : -1\n }\n\n // Handle merge navigation\n const resolved = resolveMergeAnchor(row, col, this.internalMerges)\n row = resolved.row\n col = resolved.col\n\n this.activeCell = { row, col }\n this.selectionRanges = [singleCellRange(row, col)]\n this.emitSelectionChange()\n this.scrollToCell(row, col)\n },\n\n scrollToCell(ri, ci) {\n const scrollBody = this.$refs.scrollBody\n if (!scrollBody) return\n const rowTop = getRowTop(ri, this._rowH, this.rowHeights)\n const rowBottom = rowTop + this.getRowH(ri)\n const colLeft = this.getColLeft(ci) - this.getFrozenWidth()\n const colRight = colLeft + this.getColW(ci)\n\n if (rowTop < scrollBody.scrollTop) scrollBody.scrollTop = rowTop\n if (rowBottom > scrollBody.scrollTop + scrollBody.clientHeight) {\n scrollBody.scrollTop = rowBottom - scrollBody.clientHeight\n }\n if (colLeft < scrollBody.scrollLeft) scrollBody.scrollLeft = colLeft\n if (colRight > scrollBody.scrollLeft + scrollBody.clientWidth) {\n scrollBody.scrollLeft = colRight - scrollBody.clientWidth\n }\n },\n\n // =========================================================\n // EDITING (used by 3.1 + 3.2)\n // =========================================================\n startEditing(ri, ci, initialChar = null, keepValue = false) {\n const col = this.leafCols[ci]\n if (!col || !this.isCellEditable(ri, ci)) return\n if (ri < 0 || ri >= this.totalRows) return\n if (!this._hasCustomEdit(col)) {\n if (this.isSelectLikeCol(col)) { this.openSelectDropdownForActive(); return }\n if (col.type === 'checkbox') return\n }\n\n this.invalidCell = null\n this.editingCell = { row: ri, col: ci }\n if (initialChar !== null) {\n this.editValue = initialChar\n } else if (keepValue) {\n this.editValue = String(this.getCellValue(ri, ci) || '')\n } else {\n this.editValue = ''\n }\n this.editOriginalValue = String(this.getCellValue(ri, ci) || '')\n\n this.$nextTick(() => {\n const inputs = this.$refs.editInput\n if (inputs) {\n const input = Array.isArray(inputs) ? inputs[0] : inputs\n if (input) {\n input.focus()\n if (keepValue) {\n input.setSelectionRange(input.value.length, input.value.length)\n }\n }\n }\n })\n },\n\n commitEdit() {\n if (!this.editingCell) return\n const { row, col } = this.editingCell\n const colDef = this.leafCols[col]\n if (!colDef) { this.editingCell = null; return }\n\n if (!this.isCellValueValid(row, col, this.editValue)) {\n this._showInvalidCell(row, col, this.editValue)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: this.editValue }\n this._emitDataChange(oldData, newData)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n cancelEdit() {\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n hasCellSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['cell-' + col.key])\n },\n hasLegacyEditSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['edit-' + col.key])\n },\n hasPrefixSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['prefix-' + col.key])\n },\n hasSuffixSlot(col) {\n return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['suffix-' + col.key])\n },\n _hasCustomEdit(col) {\n // For select/treeSelect: cell-{key} slot only customizes display; dropdown still opens normally\n if (col.type === 'select' || col.type === 'treeSelect') {\n return this.hasLegacyEditSlot(col)\n }\n return this.hasCellSlot(col) || this.hasLegacyEditSlot(col)\n },\n\n commitEditSlot(value) {\n if (!this.editingCell) return\n const { row, col } = this.editingCell\n const colDef = this.leafCols[col]\n if (!colDef) { this.editingCell = null; return }\n if (!this.isCellValueValid(row, col, value)) {\n this._showInvalidCell(row, col, value)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: value }\n this._emitDataChange(oldData, newData)\n this.editingCell = null\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n // =========================================================\n // CHECKBOX CELLS\n // =========================================================\n\n isCheckboxChecked(ri, ci) {\n const v = this.getCellValue(ri, ci)\n if (v === true || v === 1) return true\n if (typeof v === 'string') return ['true', '1'].includes(v.trim().toLowerCase())\n return false\n },\n\n setCheckboxValue(ri, ci, value) {\n const col = this.leafCols[ci]\n if (!col || !this.isCellEditable(ri, ci)) return\n if (!this.isCellValueValid(ri, ci, value)) {\n this._showInvalidCell(ri, ci, value)\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[ri] = { ...oldData[ri], [col.key]: value }\n this._emitDataChange(oldData, newData)\n },\n\n toggleCheckbox(ri, ci) {\n this.setCheckboxValue(ri, ci, !this.isCheckboxChecked(ri, ci))\n },\n\n // =========================================================\n // CELL EDITABILITY (3.17)\n // =========================================================\n\n isCellEditable(ri, ci) {\n const col = this.leafCols[ci]\n if (!col) return false\n const row = this._dataRaw[ri] || {}\n if (typeof this.cellEditable === 'function') return !!this.cellEditable(row, ri, col, ci)\n if (typeof col.editable === 'function') return !!col.editable(row, ri)\n if (col.editable === false) return false\n return true\n },\n\n // =========================================================\n // CELL VALUE VALIDATION (cellValidator)\n // =========================================================\n\n isCellValueValid(ri, ci, value) {\n if (typeof this.cellValidator !== 'function') return true\n const col = this.leafCols[ci]\n if (!col) return true\n const row = this._dataRaw[ri] || {}\n return !!this.cellValidator(value, row, ri, col, ci)\n },\n\n _resolveValidationMessage(ri, ci, value) {\n const col = this.leafCols[ci]\n const row = this._dataRaw[ri] || {}\n if (typeof this.cellValidationMessage === 'function') return this.cellValidationMessage(value, row, ri, col, ci)\n if (typeof this.cellValidationMessage === 'string' && this.cellValidationMessage) return this.cellValidationMessage\n return this.t.invalidValue\n },\n\n // Find the on-screen rect of the cell currently being committed — the edit\n // input if still mounted (commitEdit, before editingCell is cleared), else\n // the active cell element (checkbox/select commits, which never enter edit mode).\n _invalidCellRect() {\n const inputs = this.$refs.editInput\n const input = Array.isArray(inputs) ? inputs[0] : inputs\n if (input) return input.getBoundingClientRect()\n const el = this.$el ? this.$el.querySelector('.eg-cell-active') : null\n return el ? el.getBoundingClientRect() : null\n },\n\n _showInvalidCell(ri, ci, value) {\n const message = this._resolveValidationMessage(ri, ci, value)\n this.invalidCell = { row: ri, col: ci, message, rect: this._invalidCellRect() }\n this.$emit('cell-validation-error', { row: ri, col: ci, value, message })\n },\n\n // Resolve+emit messages for a batch of rejected { row, col, value } entries\n // from a bulk write (paste / fill / clear). blocked=true means the whole\n // operation was aborted (strictBulkValidation); false means these cells\n // were skipped but the rest of the write still applied.\n _emitBulkValidationError(skipped, blocked) {\n const cells = skipped.map(c => ({\n row: c.row, col: c.col, value: c.value,\n message: this._resolveValidationMessage(c.row, c.col, c.value)\n }))\n this.$emit('bulk-validation-error', { blocked, cells })\n },\n\n // =========================================================\n // SELECT DROPDOWN (3.16) + TREE SELECT (3.22)\n // =========================================================\n\n isSelectLikeCol(col) {\n return !!(col && (col.type === 'select' || col.type === 'treeSelect'))\n },\n\n treeOptionKeys(col) {\n return {\n valueKey: col.optionValueKey || 'value',\n labelKey: col.optionLabelKey || 'label',\n childrenKey: col.optionChildrenKey || 'children'\n }\n },\n\n _treeFindLabel(nodes, keys, value) {\n for (const node of (nodes || [])) {\n if (String(node[keys.valueKey]) === value) {\n return node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])\n }\n const found = this._treeFindLabel(node[keys.childrenKey], keys, value)\n if (found != null) return found\n }\n return null\n },\n\n colOptions(ci) {\n const col = this.leafCols[ci]\n if (!col || !Array.isArray(col.options)) return []\n return col.options.map(o =>\n typeof o === 'string' ? { value: o, label: o } : { value: o.value, label: o.label != null ? o.label : String(o.value), color: o.color }\n )\n },\n\n getSelectLabel(ci, value) {\n const col = this.leafCols[ci]\n const v = value == null ? '' : String(value)\n if (col && col.type === 'treeSelect') {\n if (!Array.isArray(col.options)) return v\n const found = this._treeFindLabel(col.options, this.treeOptionKeys(col), v)\n return found != null ? found : v\n }\n const opts = this.colOptions(ci)\n if (!opts.length) return v\n const found = opts.find(o => String(o.value) === v)\n return found ? found.label : v\n },\n\n _buildSelectDropdownState(ri, ci, col, currentValue, rect) {\n const rectObj = { top: rect.top, bottom: rect.bottom, left: rect.left, width: rect.width }\n return {\n row: ri, col: ci,\n tree: col.type === 'treeSelect',\n keys: col.type === 'treeSelect' ? this.treeOptionKeys(col) : null,\n rawOptions: col.options || [],\n currentValue,\n rect: rectObj,\n enableSearch: !!col.enableSearch\n }\n },\n\n openSelectDropdown(ri, ci, e) {\n const col = this.leafCols[ci]\n if (!col || !Array.isArray(col.options)) return\n const el = e.currentTarget\n const rect = el.getBoundingClientRect()\n const currentValue = String(this.getCellValue(ri, ci) != null ? this.getCellValue(ri, ci) : '')\n this.selectDropdown = this._buildSelectDropdownState(ri, ci, col, currentValue, rect)\n },\n\n openSelectDropdownForActive() {\n const { row, col } = this.activeCell\n const colDef = this.leafCols[col]\n if (!colDef || !Array.isArray(colDef.options)) return\n this.$nextTick(() => {\n const el = this.$el ? this.$el.querySelector('.eg-cell-active') : null\n if (!el) return\n const rect = el.getBoundingClientRect()\n const currentValue = String(this.getCellValue(row, col) != null ? this.getCellValue(row, col) : '')\n this.selectDropdown = this._buildSelectDropdownState(row, col, colDef, currentValue, rect)\n })\n },\n\n onComponentSelect({ value, label }) {\n if (!this.selectDropdown) return\n const { row, col } = this.selectDropdown\n const colDef = this.leafCols[col]\n if (colDef) {\n if (!this.isCellValueValid(row, col, value)) {\n this._showInvalidCell(row, col, value)\n this.closeSelectDropdown()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n return\n }\n this.invalidCell = null\n const oldData = this.data\n const newData = oldData.slice()\n newData[row] = { ...oldData[row], [colDef.key]: value }\n this._emitDataChange(oldData, newData)\n if (typeof colDef.onSelect === 'function') {\n colDef.onSelect({ value, label }, newData[row], row, colDef)\n }\n }\n this.closeSelectDropdown()\n this.$refs.wrapper && this.$refs.wrapper.focus()\n },\n\n closeSelectDropdown() {\n this.selectDropdown = null\n },\n\n _onWindowScrollForDropdown(e) {\n if (!this.selectDropdown) return\n const comp = this.$refs.selectDropdownComp\n const dd = comp && comp.$el ? comp.$el : null\n if (dd && dd.contains(e.target)) return\n this.closeSelectDropdown()\n },\n\n _onDocMouseDownForDropdown(e) {\n if (!this.selectDropdown) return\n const comp = this.$refs.selectDropdownComp\n const dd = comp && comp.$el ? comp.$el : null\n if (dd && dd.contains(e.target)) return\n this.closeSelectDropdown()\n },\n\n onEditKeyDown(e) {\n if (e.key === 'Escape') {\n e.preventDefault()\n this.cancelEdit()\n } else if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault()\n this.commitEdit()\n this.moveActive(1, 0, e)\n } else if (e.key === 'Tab') {\n e.preventDefault()\n this.commitEdit()\n this.moveActive(0, e.shiftKey ? -1 : 1, e)\n }\n },\n\n clearSelection() {\n if (!this.selectionRanges.length) return\n const oldData = this.data\n const newData = oldData.slice()\n let hasChanges = false\n const skipped = []\n for (const range of this.selectionRanges) {\n const r = {\n startRow: Math.min(range.startRow, range.endRow),\n endRow: Math.max(range.startRow, range.endRow),\n startCol: Math.min(range.startCol, range.endCol),\n endCol: Math.max(range.startCol, range.endCol)\n }\n for (let ri = r.startRow; ri <= r.endRow && ri < newData.length; ri++) {\n let rowUpdated = null\n for (let ci = r.startCol; ci <= r.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, '')) { skipped.push({ row: ri, col: ci, value: '' }); continue }\n if (!rowUpdated) rowUpdated = { ...newData[ri] }\n rowUpdated[col.key] = ''\n hasChanges = true\n }\n }\n if (rowUpdated) newData[ri] = rowUpdated\n }\n }\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n if (hasChanges) this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n // =========================================================\n // FILL HANDLE (3.3)\n // =========================================================\n startFillDrag(e) {\n const pr = this.primaryRange\n if (!pr) return\n this.fillDrag.active = true\n this.fillDrag.sourceRange = normalizeRange(pr)\n this.fillDrag.currentRow = pr.endRow\n this.fillDrag.currentCol = pr.endCol\n e.preventDefault()\n },\n\n onGlobalMouseMove(e) {\n // Detect column drag threshold (5 px)\n if (this.colDrag.pending) {\n if (Math.abs(e.clientX - this.colDrag.startX) > 5) {\n this.colDrag.pending = false\n this.colDrag.active = true\n this.colDrag.dropIndex = this.colDrag.sourceFirstLeaf\n this.isMouseDown = false // cancel cell-selection drag\n }\n }\n if (this.colDrag.active) {\n this.handleColDragMove(e)\n return\n }\n\n if (this.resizing.active) {\n this.handleResizeMove(e)\n return\n }\n if (this.fillDrag.active) {\n this.handleFillDragMove(e)\n return\n }\n if (this.dragMove.active) {\n this.handleDragMoveMove(e)\n return\n }\n },\n\n onGlobalMouseUp(e) {\n if (this.colDrag.active) {\n this.commitColDrag()\n return\n }\n if (this.colDrag.pending) {\n this._resetColDrag()\n // fall through — normal mouseup\n }\n\n if (this.resizing.active) {\n this.commitResize()\n return\n }\n if (this.fillDrag.active) {\n this.commitFillDrag()\n return\n }\n if (this.dragMove.active) {\n this.commitDragMove(e)\n return\n }\n this.isMouseDown = false\n },\n\n handleFillDragMove(e) {\n const scrollBody = this.$refs.scrollBody\n if (!scrollBody) return\n const rect = scrollBody.getBoundingClientRect()\n const relY = e.clientY - rect.top + scrollBody.scrollTop\n const relX = e.clientX - rect.left + scrollBody.scrollLeft\n\n // Binary search on cumulativeHeights — O(log n) instead of O(n)\n const cum = this.cumulativeHeights\n const total = this.totalRows\n let lo = 0, hi = total - 1\n while (lo < hi) {\n const mid = (lo + hi) >> 1\n if (cum[mid + 1] <= relY) lo = mid + 1\n else hi = mid\n }\n const row = Math.min(lo, total - 1)\n\n // Columns are few — O(columns) is fast\n let left = this.getFrozenWidth()\n let col = 0\n for (let i = 0; i < this.leafCols.length; i++) {\n if (!this.isColumnScrollable(i)) continue\n left += this.getColW(i)\n if (relX < left) { col = i; break }\n col = i\n }\n\n this.fillDrag.currentRow = row\n this.fillDrag.currentCol = col\n },\n\n commitFillDrag() {\n const src = this.fillDrag.sourceRange\n if (!src) { this.fillDrag.active = false; return }\n\n const targetRow = this.fillDrag.currentRow\n const targetCol = this.fillDrag.currentCol\n\n const oldData = this.data\n const newData = oldData.slice() // only affected rows get new objects\n let targetRange\n const skipped = []\n\n if (targetRow > src.endRow) {\n // Fill down\n const count = targetRow - src.endRow\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (!col) continue\n const srcValues = []\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n srcValues.push(oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ri = src.endRow + 1 + k\n if (ri < this.totalRows && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n targetRange = { startRow: src.endRow + 1, endRow: targetRow, startCol: src.startCol, endCol: src.endCol }\n } else if (targetCol > src.endCol) {\n // Fill right\n const count = targetCol - src.endCol\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n const srcValues = []\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n srcValues.push(col && oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ci = src.endCol + 1 + k\n if (ci < this.leafCols.length) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n }\n targetRange = { startRow: src.startRow, endRow: src.endRow, startCol: src.endCol + 1, endCol: targetCol }\n }\n\n if (targetRange) {\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n } else {\n this._emitDataChange(oldData, newData)\n this.$emit('fill', { sourceRange: src, targetRange, values: newData })\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n }\n }\n\n this.fillDrag.active = false\n this.fillDrag.sourceRange = null\n },\n\n doubleFillDown() {\n const pr = this.primaryRange\n if (!pr) return\n const src = normalizeRange(pr)\n // Find adjacent column filled length\n const adjCol = src.startCol > 0 ? src.startCol - 1 : src.endCol + 1\n if (adjCol < 0 || adjCol >= this.leafCols.length) return\n const adjColDef = this.leafCols[adjCol]\n if (!adjColDef) return\n let lastFilledRow = src.endRow\n for (let ri = src.endRow + 1; ri < this.totalRows; ri++) {\n if (this.data[ri] && this.data[ri][adjColDef.key] !== '' && this.data[ri][adjColDef.key] !== undefined) {\n lastFilledRow = ri\n } else break\n }\n if (lastFilledRow <= src.endRow) return\n\n const count = lastFilledRow - src.endRow\n const oldData = this.data\n const newData = oldData.slice()\n const skipped = []\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (!col) continue\n const srcValues = []\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n srcValues.push(oldData[ri] ? oldData[ri][col.key] : '')\n }\n const filled = generateFillValues(srcValues, count)\n for (let k = 0; k < count; k++) {\n const ri = src.endRow + 1 + k\n if (ri < this.totalRows && this.isCellEditable(ri, ci)) {\n if (!this.isCellValueValid(ri, ci, filled[k])) { skipped.push({ row: ri, col: ci, value: filled[k] }); continue }\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n newData[ri][col.key] = filled[k]\n }\n }\n }\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n // =========================================================\n // COPY / PASTE (3.4)\n // =========================================================\n copySelection() {\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n this.clipboardMatrix = extractMatrix(this.data, this.leafCols, r)\n this.clipboardRange = r\n this.clipboardMode = 'copy'\n\n // Write to system clipboard as TSV\n const tsv = matrixToTSV(this.clipboardMatrix)\n if (navigator.clipboard) {\n navigator.clipboard.writeText(tsv).catch(() => {})\n }\n },\n\n cutSelection() {\n this.copySelection()\n this.clipboardMode = 'cut'\n },\n\n async pasteAt(targetRow, targetCol, options = {}) {\n const { mode = 'all', transpose = false } = options\n\n let matrix = null\n\n // Try system clipboard first\n if (navigator.clipboard) {\n try {\n const text = await navigator.clipboard.readText()\n if (text) matrix = tsvToMatrix(text)\n } catch (_) {}\n }\n\n // Fall back to internal clipboard\n if (!matrix && this.clipboardMatrix) {\n matrix = this.clipboardMatrix\n }\n\n if (!matrix) return\n\n if (transpose) matrix = transposeMatrix(matrix)\n\n // ── Excel-style selection broadcast / tiling ──────────────────────────\n // When pasting over a multi-cell selection and the clipboard matrix is\n // smaller than the selection, tile the matrix to fill the selection —\n // provided the selection dimensions are exact multiples of the matrix\n // dimensions (matches Excel's tiling rule exactly).\n // Cut-paste is never tiled (source must be cleared exactly once).\n const isCopyPaste = !this.clipboardMode || this.clipboardMode === 'copy'\n if (isCopyPaste) {\n const pr = this.primaryRange\n if (pr) {\n const sel = normalizeRange(pr)\n const selRows = sel.endRow - sel.startRow + 1\n const selCols = sel.endCol - sel.startCol + 1\n const matRows = matrix.length\n const matCols = matrix[0] ? matrix[0].length : 0\n\n // Only tile when selection is strictly larger than clipboard\n if ((selRows > matRows || selCols > matCols) &&\n selRows % matRows === 0 && selCols % matCols === 0) {\n matrix = tileMatrix(matrix, selRows, selCols)\n // Paste at selection origin, not just at the active cell\n targetRow = sel.startRow\n targetCol = sel.startCol\n }\n }\n }\n\n const oldData = this.data\n const { newData, affectedRange, skipped } = applyMatrix(\n oldData, this.leafCols, targetRow, targetCol, matrix, mode,\n (ri, ci) => this.isCellEditable(ri, ci),\n (ri, ci, v) => this.isCellValueValid(ri, ci, v)\n )\n\n if (this.strictBulkValidation && skipped.length > 0) {\n this._emitBulkValidationError(skipped, true)\n return\n }\n\n if (this.clipboardMode === 'cut' && this.clipboardRange) {\n // Clear source — ensure each source row is a new copy before mutation\n const src = this.clipboardRange\n for (let ri = src.startRow; ri <= src.endRow; ri++) {\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n for (let ci = src.startCol; ci <= src.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci) && this.isCellValueValid(ri, ci, '')) {\n newData[ri][col.key] = ''\n }\n }\n }\n this.clipboardRange = null\n this.clipboardMode = null\n }\n\n this._emitDataChange(oldData, newData)\n if (skipped.length > 0) this._emitBulkValidationError(skipped, false)\n },\n\n ctxCopy() { this.hideContextMenu(); this.copySelection() },\n ctxCut() { this.hideContextMenu(); this.cutSelection() },\n ctxPaste() { this.hideContextMenu(); this.pasteAt(this.activeCell.row, this.activeCell.col) },\n ctxPasteSpecial(mode, transpose = false) {\n this.hideContextMenu()\n this.pasteAt(this.activeCell.row, this.activeCell.col, { mode, transpose })\n },\n\n // =========================================================\n // COLUMN DRAG-AND-DROP\n // =========================================================\n\n _computeDragOffsets(dropIndex) {\n const { sourceFirstLeaf, sourceLeafCount } = this.colDrag\n if (dropIndex < 0 || (dropIndex >= sourceFirstLeaf && dropIndex <= sourceFirstLeaf + sourceLeafCount)) return {}\n\n const previewCols = moveColumnNodeInTree(this.columns, sourceFirstLeaf, sourceLeafCount, dropIndex)\n const previewLeaves = flattenColumns(previewCols)\n\n const byKey = {}\n this.leafCols.forEach(c => { byKey[c.key] = c })\n\n const offsets = {}\n for (const zone of ['left', 'scroll', 'right']) {\n const inZone = zone === 'left'\n ? ci => this.isColumnPinnedLeft(ci)\n : zone === 'right'\n ? ci => this.isColumnPinnedRight(ci)\n : ci => this.isColumnScrollable(ci)\n\n const origPos = {}\n let acc = 0\n this.leafCols.forEach(col => {\n const ci = col._flatIndex\n if (this.isColHidden(ci) || !inZone(ci)) return\n origPos[col.key] = acc\n acc += this.getColW(ci)\n })\n\n const previewPos = {}\n acc = 0\n for (const col of previewLeaves) {\n const origCol = byKey[col.key]\n if (!origCol) continue\n const ci = origCol._flatIndex\n if (this.isColHidden(ci) || !inZone(ci)) continue\n previewPos[col.key] = acc\n acc += this.getColW(ci)\n }\n\n for (const key of Object.keys(origPos)) {\n offsets[key] = (previewPos[key] !== undefined ? previewPos[key] : origPos[key]) - origPos[key]\n }\n }\n return offsets\n },\n\n _applyDragTransforms(offsets) {\n if (!this.$el) return\n const targets = []\n const dxMap = new Map()\n\n this.$el.querySelectorAll('[data-fi]').forEach(el => {\n const fi = parseInt(el.dataset.fi)\n const col = this.leafCols[fi]\n const dx = col ? (offsets[col.key] || 0) : 0\n targets.push(el)\n dxMap.set(el, dx)\n })\n this.$el.querySelectorAll('[data-start]').forEach(el => {\n const start = parseInt(el.dataset.start)\n const end = parseInt(el.dataset.end)\n if (isNaN(start)) return\n let key = null\n for (let i = start; i <= end; i++) {\n if (!this.isColHidden(i) && this.leafCols[i]) { key = this.leafCols[i].key; break }\n }\n targets.push(el)\n dxMap.set(el, key ? (offsets[key] || 0) : 0)\n })\n if (!targets.length) return\n\n // anime.remove cancels any in-progress animation before starting the new one.\n // This prevents chaining/overlap when dropIndex changes rapidly (no flickering).\n anime.remove(targets)\n anime({\n targets,\n translateX: el => dxMap.get(el) || 0,\n duration: 80,\n easing: 'easeOutQuart'\n })\n },\n\n _clearDragTransforms() {\n if (!this.$el) return\n const els = Array.from(this.$el.querySelectorAll('[data-fi], [data-start]'))\n // Kill all anime animations first, then instantly clear inline styles\n anime.remove(els)\n els.forEach(el => {\n el.style.transform = ''\n el.style.transition = ''\n })\n },\n\n handleColDragMove(e) {\n // Update ghost position via direct DOM — avoids Vue re-render on every mousemove\n const ghost = this.$refs.colDragGhost\n if (ghost) {\n ghost.style.left = (e.clientX + 16) + 'px'\n ghost.style.top = (e.clientY - 14) + 'px'\n }\n\n const prevDrop = this.colDrag.dropIndex\n this._updateColDragDropIndex(e.clientX)\n const newDrop = this.colDrag.dropIndex\n\n if (newDrop !== prevDrop) {\n this._dragOffsets = this._computeDragOffsets(newDrop)\n this._applyDragTransforms(this._dragOffsets)\n }\n },\n\n _updateColDragDropIndex(clientX) {\n if (!this.$el) return\n const n = this.leafCols.length\n if (n === 0) { this.colDrag.dropIndex = 0; return }\n\n // Use DOM cell rects but subtract CSS transforms so we get ORIGINAL positions.\n // This avoids circular dependency: live-preview transforms don't affect drop calc.\n const cells = Array.from(this.$el.querySelectorAll('.eg-header-cell:not(.eg-header-group)'))\n .map(el => {\n const fi = parseInt(el.dataset.fi)\n if (isNaN(fi)) return null\n const rect = el.getBoundingClientRect()\n const m = (el.style.transform || '').match(/translateX\\((-?[\\d.]+)px\\)/)\n const dx = m ? parseFloat(m[1]) : 0\n return { fi, left: rect.left - dx, right: rect.right - dx }\n })\n .filter(Boolean)\n .sort((a, b) => a.left - b.left)\n\n if (!cells.length) { this.colDrag.dropIndex = n; return }\n\n let dropIndex = n\n for (const { fi, left, right } of cells) {\n if (clientX < right) {\n dropIndex = clientX < left + (right - left) / 2 ? fi : fi + 1\n break\n }\n }\n this.colDrag.dropIndex = dropIndex\n },\n\n commitColDrag() {\n const from = this.colDrag.sourceFirstLeaf\n const leafCount = this.colDrag.sourceLeafCount\n const to = this.colDrag.dropIndex\n\n if (from < 0 || to < 0 || leafCount < 1) { this._resetColDrag(); return }\n if (to >= from && to <= from + leafCount) { this._resetColDrag(); return }\n\n // Kill anime animations but KEEP transform values in DOM while Vue re-renders\n // with the new column order. After Vue updates left positions ($nextTick),\n // we instantly clear transforms — both steps run as microtasks before browser paints,\n // so there is never a visible intermediate state.\n if (this.$el) {\n anime.remove(Array.from(this.$el.querySelectorAll('[data-fi], [data-start]')))\n }\n this._dragOffsets = {}\n this.colDrag.pending = false\n this.colDrag.active = false\n this.colDrag.sourceFirstLeaf = -1\n this.colDrag.sourceLeafCount = 1\n this.colDrag.dropIndex = -1\n this.colDrag.ghostLabel = ''\n\n const newCols = moveColumnNodeInTree(this.columns, from, leafCount, to)\n this.$emit('update:columns', newCols)\n this.$emit('column-reorder', { fromIndex: from, toIndex: to, columns: newCols })\n\n // Clear transforms after Vue re-renders new column left positions\n this.$nextTick(() => { this._clearDragTransforms() })\n },\n\n _resetColDrag() {\n this._dragOffsets = {}\n this.colDrag.pending = false\n this.colDrag.active = false\n this.colDrag.sourceFirstLeaf = -1\n this.colDrag.sourceLeafCount = 1\n this.colDrag.dropIndex = -1\n this.colDrag.ghostLabel = ''\n this._clearDragTransforms()\n },\n\n // =========================================================\n // RESIZE (3.5)\n // =========================================================\n startColResize(e, ci) {\n const rect = this.$refs.wrapper.getBoundingClientRect()\n this.resizing = {\n active: true,\n type: 'col',\n index: ci,\n startX: e.clientX,\n startY: e.clientY,\n startSize: this.getColW(ci),\n currentPos: e.clientX\n }\n e.preventDefault()\n },\n\n startRowResize(e, ri) {\n this.resizing = {\n active: true,\n type: 'row',\n index: ri,\n startX: e.clientX,\n startY: e.clientY,\n startSize: this.getRowH(ri),\n currentPos: e.clientY\n }\n e.preventDefault()\n },\n\n handleResizeMove(e) {\n if (this.resizing.type === 'col') {\n this.resizing.currentPos = e.clientX\n const newWidth = Math.max(20, this.resizing.startSize + (e.clientX - this.resizing.startX))\n this.$set(this.colWidths, this.resizing.index, newWidth)\n this._cellStyleCache = Object.create(null)\n } else {\n this.resizing.currentPos = e.clientY\n this._resizePreviewHeight = Math.max(10, this.resizing.startSize + (e.clientY - this.resizing.startY))\n // Batch $set + updateVirtualScroll to rAF — prevents O(n) cumulativeHeights rebuild\n // on every mousemove (200+ Hz). At most 60 rebuilds/sec instead of 200+.\n if (!this._resizeRAF) {\n this._resizeRAF = requestAnimationFrame(() => {\n this._resizeRAF = null\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n this._cellStyleCache = Object.create(null)\n this.$set(this.rowHeights, this.resizing.index, this._resizePreviewHeight)\n this.updateVirtualScroll()\n })\n }\n }\n },\n\n commitResize() {\n if (this._resizeRAF) {\n cancelAnimationFrame(this._resizeRAF)\n this._resizeRAF = null\n // Apply the last pending preview height immediately on commit\n if (this.resizing.type === 'row' && this._resizePreviewHeight !== undefined) {\n this.$set(this.rowHeights, this.resizing.index, this._resizePreviewHeight)\n }\n }\n if (this.resizing.type === 'col') {\n this._cellStyleCache = Object.create(null)\n const newSize = this.colWidths[this.resizing.index]\n this.$emit('column-resize', { index: this.resizing.index, newSize })\n } else {\n this._rowStyleCache = Object.create(null)\n this._rowHeaderStyleCache = Object.create(null)\n this._cellStyleCache = Object.create(null)\n const newSize = this.rowHeights[this.resizing.index]\n this.$emit('row-resize', { index: this.resizing.index, newSize })\n this.updateVirtualScroll()\n }\n this.resizing.active = false\n },\n\n autoFitColumn(ci) {\n const col = this.leafCols[ci]\n if (!col) return\n let maxLen = (col.title || '').length\n for (let ri = 0; ri < Math.min(this.totalRows, 500); ri++) {\n const v = this.data[ri] ? String(this.data[ri][col.key] || '') : ''\n if (v.length > maxLen) maxLen = v.length\n }\n const newWidth = Math.max(50, maxLen * 8 + 16)\n this.$set(this.colWidths, ci, newWidth)\n this._cellStyleCache = Object.create(null)\n this.$emit('column-resize', { index: ci, newSize: newWidth })\n },\n\n _applyAutoWidth() {\n if (!this.autoWidth || !this.leafCols.length) return\n this.leafCols.forEach((col, ci) => {\n let maxLen = (col.title || '').length\n for (let ri = 0; ri < Math.min(this.totalRows, 500); ri++) {\n const v = this.data[ri] ? String(this.data[ri][col.key] || '') : ''\n if (v.length > maxLen) maxLen = v.length\n }\n this.$set(this.colWidths, ci, Math.max(50, maxLen * 8 + 16))\n })\n this._cellStyleCache = Object.create(null)\n },\n\n ctxHideRow() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n const newHidden = [...this.hiddenRows]\n for (let ri = r.startRow; ri <= r.endRow; ri++) {\n if (!newHidden.includes(ri)) newHidden.push(ri)\n }\n this.$emit('update:hiddenRows', newHidden)\n },\n\n ctxHideColumn() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n const r = normalizeRange(pr)\n const newHidden = [...this.hiddenColumns]\n for (let ci = r.startCol; ci <= r.endCol; ci++) {\n if (!newHidden.includes(ci)) newHidden.push(ci)\n }\n this.$emit('update:hiddenColumns', newHidden)\n },\n\n ctxUnhideRows() {\n this.hideContextMenu()\n this.$emit('update:hiddenRows', [])\n },\n\n ctxUnhideColumns() {\n this.hideContextMenu()\n this.$emit('update:hiddenColumns', [])\n },\n\n ctxPinLeft() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n this.$emit('update:pinnedColumns', { ...this.pinnedColumns, [col.key]: 'left' })\n this.hideContextMenu()\n },\n\n ctxPinRight() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n this.$emit('update:pinnedColumns', { ...this.pinnedColumns, [col.key]: 'right' })\n this.hideContextMenu()\n },\n\n ctxUnpin() {\n const col = this.leafCols[this.contextMenu.col]\n if (!col) { this.hideContextMenu(); return }\n const next = { ...this.pinnedColumns }\n delete next[col.key]\n this.$emit('update:pinnedColumns', next)\n this.hideContextMenu()\n },\n\n isColPinned(ci) {\n const col = this.leafCols[ci]\n return !!(col && this.pinnedColumns[col.key])\n },\n\n // =========================================================\n // MERGE CELLS (3.8)\n // =========================================================\n mergeCells(range) {\n const oldMerges = this.internalMerges.slice()\n const { merges: newMerges, conflict } = addMerge(range, this.internalMerges)\n if (conflict) {\n this.$emit('merge-error', { range, reason: 'Overlaps existing merge' })\n return false\n }\n this.internalMerges = newMerges\n this._emitMergeChange(oldMerges, [...newMerges])\n return true\n },\n\n unmergeCells(row, col) {\n const oldMerges = this.internalMerges.slice()\n const newMerges = removeMergeAt(row, col, this.internalMerges)\n this.internalMerges = newMerges\n this._emitMergeChange(oldMerges, [...newMerges])\n },\n\n ctxMerge() {\n this.hideContextMenu()\n const pr = this.primaryRange\n if (!pr) return\n this.mergeCells(normalizeRange(pr))\n },\n\n ctxUnmerge() {\n this.hideContextMenu()\n this.unmergeCells(this.activeCell.row, this.activeCell.col)\n },\n\n // =========================================================\n // GROUPING (3.7)\n // =========================================================\n groupRows(startIndex, endIndex) {\n this.internalGroups = addGroup('row', startIndex, endIndex, this.internalGroups)\n },\n\n groupColumns(startIndex, endIndex) {\n this.internalGroups = addGroup('column', startIndex, endIndex, this.internalGroups)\n },\n\n ungroupRows(startIndex, endIndex) {\n this.internalGroups = removeGroup('row', startIndex, endIndex, this.internalGroups)\n },\n\n ungroupColumns(startIndex, endIndex) {\n this.internalGroups = removeGroup('column', startIndex, endIndex, this.internalGroups)\n },\n\n toggleGroup(group) {\n this.internalCollapsedGroups = toggleGroupCollapse(group, this.internalCollapsedGroups)\n this.$emit('update:collapsedGroups', [...this.internalCollapsedGroups])\n this.$emit('group-toggle', { group, collapsed: _isGroupCollapsed(group, this.internalCollapsedGroups) })\n this.updateVirtualScroll()\n },\n\n isGroupCollapsed(group) {\n return _isGroupCollapsed(group, this.internalCollapsedGroups)\n },\n\n expandAll() {\n this.internalCollapsedGroups = []\n this.$emit('update:collapsedGroups', [])\n this.updateVirtualScroll()\n },\n\n collapseAll() {\n this.internalCollapsedGroups = [...this.internalGroups]\n this.$emit('update:collapsedGroups', [...this.internalGroups])\n this.updateVirtualScroll()\n },\n\n // =========================================================\n // DRAG AND DROP (3.9)\n // =========================================================\n startDragMove(e, ri, ci) {\n const pr = this.primaryRange\n if (!pr) return\n this.dragMove = {\n active: true,\n sourceRange: normalizeRange(pr),\n startX: e.clientX,\n startY: e.clientY,\n targetRow: ri,\n targetCol: ci,\n copyMode: e.ctrlKey || e.metaKey\n }\n this.$emit('cell-drag-start', { sourceRange: this.dragMove.sourceRange })\n e.preventDefault()\n },\n\n handleDragMoveMove(e) {\n this.dragMove.copyMode = e.ctrlKey || e.metaKey\n this.$emit('cell-drag-move', {\n sourceRange: this.dragMove.sourceRange,\n targetRow: this.dragMove.targetRow,\n targetCol: this.dragMove.targetCol\n })\n },\n\n async commitDragMove(e) {\n if (!this.dragMove.active) return\n const { sourceRange, targetRow, targetCol, copyMode } = this.dragMove\n\n const targetRange = {\n startRow: targetRow,\n startCol: targetCol,\n endRow: targetRow + (sourceRange.endRow - sourceRange.startRow),\n endCol: targetCol + (sourceRange.endCol - sourceRange.startCol)\n }\n\n let proceed = true\n if (this.beforeDrop) {\n proceed = await Promise.resolve(this.beforeDrop(sourceRange, targetRange))\n }\n\n if (proceed) {\n const oldData = this.data\n const matrix = extractMatrix(oldData, this.leafCols, sourceRange)\n const { newData } = applyMatrix(oldData, this.leafCols, targetRow, targetCol, matrix, 'all', (ri, ci) => this.isCellEditable(ri, ci))\n\n if (!copyMode) {\n // Clear source — ensure each source row is a new copy before mutation\n for (let ri = sourceRange.startRow; ri <= sourceRange.endRow; ri++) {\n if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }\n for (let ci = sourceRange.startCol; ci <= sourceRange.endCol; ci++) {\n const col = this.leafCols[ci]\n if (col && this.isCellEditable(ri, ci)) newData[ri][col.key] = ''\n }\n }\n }\n this._emitDataChange(oldData, newData)\n this.$emit('cell-drop', { sourceRange, targetRange })\n }\n\n this.dragMove = { active: false, sourceRange: null, startX: 0, startY: 0, targetRow: -1, targetCol: -1, copyMode: false }\n this.isMouseDown = false\n },\n\n // =========================================================\n // EXCEL EXPORT (3.11)\n // =========================================================\n async exportToExcel(options = {}) {\n const {\n filename = 'export.xlsx',\n sheetName = 'Sheet1',\n scope = 'all',\n includeHidden = false\n } = options\n\n this.$emit('export-start')\n this.exportState = { active: true }\n\n const workerPayload = {\n data: this.data,\n columns: this.columns,\n leafCols: this.leafCols,\n merges: this.internalMerges,\n hiddenCols: [...this.effectiveHiddenColSet],\n hiddenRows: [...this.hiddenRowSet],\n range: scope === 'selection' ? this.primaryRange : null,\n filename,\n sheetName,\n scope,\n includeHidden\n }\n\n try {\n const worker = createExcelExportWorker()\n if (worker) {\n await this._exportViaWorker(worker, workerPayload)\n } else {\n // Fallback: synchronous export on main thread\n _exportToExcel({\n ...workerPayload,\n hiddenColSet: this.effectiveHiddenColSet,\n hiddenRowSet: this.hiddenRowSet\n })\n }\n this.$emit('export-success')\n } catch (err) {\n this.$emit('export-error', err)\n } finally {\n this.exportState = { active: false }\n }\n },\n\n _exportViaWorker(worker, payload) {\n return new Promise((resolve, reject) => {\n let done = false\n const finish = (fn, val) => {\n if (done) return\n done = true\n worker.terminate()\n fn(val)\n }\n\n worker.onmessage = (e) => {\n const { type, buffer, filename, message } = e.data\n if (type === 'result') {\n // Trigger browser download from the main thread (DOM required)\n const blob = new Blob([new Uint8Array(buffer)], {\n type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'\n })\n const url = URL.createObjectURL(blob)\n const a = document.createElement('a')\n a.href = url\n a.download = filename\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n finish(resolve)\n } else if (type === 'error') {\n finish(reject, new Error(message))\n }\n }\n\n worker.onerror = (err) => finish(reject, new Error(err.message || 'Export worker xatosi'))\n\n worker.postMessage(payload)\n })\n },\n\n // =========================================================\n // EXCEL IMPORT (3.12)\n // =========================================================\n async importFromFile(file, options = {}) {\n this.importState = { active: true, percent: 5, message: \"Fayl o'qilmoqda...\" }\n\n try {\n let result\n const worker = createExcelImportWorker()\n\n if (worker) {\n result = await this._importViaWorker(worker, file, options)\n } else {\n // Fallback: chunked async on main thread\n result = await _importFromFile(\n file,\n this.columns,\n options,\n (percent, message) => { this.importState = { active: true, percent, message } }\n )\n }\n\n const { columns, merges } = result\n // Freeze each row so Vue 2 skips deep Object.defineProperty observation.\n // Vue 2 checks Object.isExtensible() — frozen objects are skipped entirely.\n // All edit paths already use spread ({ ...row }) so frozen rows are safe.\n const data = result.data.map(row => Object.freeze(row))\n this.$emit('input', data)\n this.$emit('update:columns', columns)\n\n const hasMerges = merges && merges.length > 0\n this.internalMerges = hasMerges ? merges : []\n this.$emit('update:merges', hasMerges ? merges : [])\n this.$emit('update:collapsedGroups', [])\n this.$emit('update:hiddenRows', [])\n this.$emit('import-success', { data, columns, merges })\n\n // Reset scroll state and re-derive virtual scroll after DOM settles.\n // Without this, stale scrollTop + old rowHeights cause blank bands on scroll.\n this.rowHeights = {}\n this.scrollTop = 0\n this.scrollLeft = 0\n this.$nextTick(() => {\n if (this.$refs.scrollBody) {\n this.$refs.scrollBody.scrollTop = 0\n this.$refs.scrollBody.scrollLeft = 0\n }\n if (this.$refs.scrollColHeader) this.$refs.scrollColHeader.scrollLeft = 0\n if (this.$refs.scrollFooter) this.$refs.scrollFooter.scrollLeft = 0\n if (this.$refs.scrollRowHeaders) this.$refs.scrollRowHeaders.scrollTop = 0\n this.updateVirtualScroll()\n })\n } catch (err) {\n this.$emit('import-error', err)\n } finally {\n this.importState = { active: false, percent: 0, message: '' }\n }\n },\n\n _importViaWorker(worker, file, options) {\n return new Promise(async (resolve, reject) => {\n let done = false\n const finish = (fn, val) => {\n if (done) return\n done = true\n worker.terminate()\n fn(val)\n }\n\n worker.onmessage = (e) => {\n const { type, percent, message, data, columns, merges } = e.data\n if (type === 'progress') {\n this.importState = { active: true, percent, message }\n } else if (type === 'result') {\n finish(resolve, { data, columns, merges })\n } else if (type === 'error') {\n finish(reject, new Error(message))\n }\n }\n\n worker.onerror = (err) => finish(reject, new Error(err.message || 'Import worker xatosi'))\n\n try {\n // Transfer the ArrayBuffer zero-copy into the worker\n const buffer = await file.arrayBuffer()\n worker.postMessage(\n { buffer, existingColumns: this.columns, options },\n [buffer]\n )\n } catch (err) {\n finish(reject, err)\n }\n })\n },\n\n // =========================================================\n // UNDO / REDO (3.13)\n // =========================================================\n\n // Push one entry onto the non-reactive history stack.\n // Truncates the redo tail, caps at 100 entries.\n _pushHistory(entry) {\n if (this._historyIndex < this._history.length - 1) {\n this._history.splice(this._historyIndex + 1)\n }\n this._history.push(entry)\n if (this._history.length > 100) {\n this._history.shift()\n // historyIndex stays the same — it now points to the new last entry\n } else {\n this._historyIndex++\n }\n },\n\n // Emit 'input' and record a data diff entry (only changed row indices).\n // Use slice() + per-row spread in callers so unchanged rows keep the\n // same reference — then the identity check here catches only real changes.\n _emitDataChange(oldData, newData) {\n if (!this._historySkip) {\n const indices = []\n const beforeRows = []\n const afterRows = []\n const len = Math.max(oldData.length, newData.length)\n for (let i = 0; i < len; i++) {\n if (oldData[i] !== newData[i]) {\n indices.push(i)\n beforeRows.push(oldData[i])\n afterRows.push(newData[i])\n }\n }\n if (indices.length > 0) {\n this._pushHistory({\n type: 'data',\n before: { indices, rows: beforeRows },\n after: { indices, rows: afterRows }\n })\n }\n }\n this.$emit('input', newData)\n },\n\n // Emit 'update:merges' and record a merges diff entry.\n _emitMergeChange(oldMerges, newMerges) {\n if (!this._historySkip) {\n this._pushHistory({\n type: 'merges',\n before: oldMerges,\n after: newMerges\n })\n }\n this.$emit('update:merges', newMerges)\n },\n\n undo() {\n if (this._historyIndex < 0) return\n const entry = this._history[this._historyIndex--]\n this._historySkip = true\n try {\n if (entry.type === 'data') {\n const newData = this.data.slice()\n for (let i = 0; i < entry.before.indices.length; i++) {\n newData[entry.before.indices[i]] = entry.before.rows[i]\n }\n this.$emit('input', newData)\n } else if (entry.type === 'merges') {\n this.internalMerges = entry.before.slice()\n this.$emit('update:merges', entry.before.slice())\n }\n } finally {\n this._historySkip = false\n }\n },\n\n redo() {\n if (this._historyIndex >= this._history.length - 1) return\n const entry = this._history[++this._historyIndex]\n this._historySkip = true\n try {\n if (entry.type === 'data') {\n const newData = this.data.slice()\n for (let i = 0; i < entry.after.indices.length; i++) {\n newData[entry.after.indices[i]] = entry.after.rows[i]\n }\n this.$emit('input', newData)\n } else if (entry.type === 'merges') {\n this.internalMerges = entry.after.slice()\n this.$emit('update:merges', entry.after.slice())\n }\n } finally {\n this._historySkip = false\n }\n }\n }\n}\n<\/script>\n\n<style scoped>\n.eg-wrapper {\n /* ── Design tokens (Excel 365 defaults) — override on :root or any ancestor of <excel-grid> ──\n Full reference: docs/theming.md\n */\n\n /* --- Typography --- */\n --eg-font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;\n --eg-font-size: 14px;\n --eg-font-size-header: 11px;\n\n /* --- Shape --- */\n --eg-radius: 0px;\n --eg-cell-padding-x: 3px;\n\n /* --- Accent (Excel green) --- */\n --eg-color-accent: #217346;\n --eg-color-accent-dark: #185a30;\n --eg-color-accent-soft: rgba(33, 115, 70, 0.15);\n\n /* --- Error / Validation --- */\n --eg-color-error: #c00000;\n --eg-color-error-soft: #fff2f2;\n --eg-color-error-dark: #9b0000;\n\n /* --- Borders --- */\n --eg-color-border: #d9d9d9;\n --eg-color-border-cell: #d9d9d9;\n --eg-color-border-strong: #bfbfbf;\n\n /* --- Header --- */\n --eg-color-header-bg: #f2f2f2;\n --eg-color-header-group-bg: #f2f2f2;\n --eg-color-group-border: #92d050;\n --eg-color-group-bg-collapsed: #70ad47;\n\n /* --- Cell states --- */\n --eg-color-cell-bg: #ffffff;\n --eg-color-cell-selected: #bdd7ee;\n --eg-color-cell-fill-preview: #9bc2e6;\n --eg-color-cell-readonly: #f2f2f2;\n --eg-color-cell-readonly-selected: #a9c9e4;\n --eg-color-footer-bg: #f2f2f2;\n\n /* --- Text --- */\n --eg-color-text: #000000;\n --eg-color-text-secondary: #595959;\n --eg-color-text-muted: #767676;\n\n /* --- Shadows --- */\n --eg-shadow-dropdown: 1px 2px 8px rgba(0, 0, 0, 0.18);\n --eg-shadow-dialog: 0 2px 12px rgba(0, 0, 0, 0.22);\n --eg-shadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.18);\n --eg-color-freeze-shadow: rgba(0, 0, 0, 0.12);\n\n /* --- Overlay & dropdown options --- */\n --eg-color-overlay-bg: rgba(255, 255, 255, 0.88);\n --eg-color-option-hover-bg: #e2efda;\n --eg-color-option-active-hover-bg: #c6e0b4;\n\n /* --- Checkbox --- */\n --eg-color-checkbox-border: #767676;\n --eg-color-checkbox-disabled-checked: #bfbfbf;\n\n /* --- Row effects (off by default) --- */\n --eg-color-row-hover: transparent;\n --eg-color-row-stripe: transparent;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n font-family: var(--eg-font-family);\n}\n\n.eg-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: auto;\n position: relative;\n}\n\n.eg-header-area {\n display: flex;\n flex-shrink: 0;\n box-shadow: 0 2px 0 0 var(--eg-color-border-cell);\n position: relative;\n z-index: 31;\n}\n\n.eg-header-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border);\n border-bottom: 1px solid var(--eg-color-border);\n background: var(--eg-color-header-bg);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n position: absolute;\n user-select: none;\n cursor: pointer;\n}\n\n.eg-header-cell:hover { background: var(--eg-color-border-cell); }\n.eg-header-group { background: var(--eg-color-header-group-bg); }\n\n.eg-col-resize-handle {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 5px;\n cursor: col-resize;\n z-index: 5;\n}\n\n.eg-body-area {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n/* ===== FOOTER AREA (column totals) ===== */\n.eg-footer-area {\n border-top: 1px solid var(--eg-color-border);\n}\n\n.eg-frozen-col-footer,\n.eg-scroll-col-footer,\n.eg-pinned-right-footer {\n position: relative;\n}\n\n.eg-footer-cell {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n font-weight: 600;\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-footer-bg);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n\n.eg-row {\n position: relative;\n}\n\n.eg-cell {\n box-sizing: border-box;\n border-right: 1px solid var(--eg-color-border-cell);\n border-bottom: 1px solid var(--eg-color-border-cell);\n overflow: hidden;\n white-space: nowrap;\n font-size: var(--eg-font-size);\n padding: 0 var(--eg-cell-padding-x);\n position: absolute;\n top: 0;\n background: var(--eg-color-cell-bg);\n cursor: default;\n display: flex;\n align-items: center;\n}\n\n.eg-cell-value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n.eg-cell--has-suffix.eg-cell-select::after { display: none; }\n.eg-cell-select-trigger-wrap {\n flex: 1;\n display: flex;\n align-items: center;\n overflow: hidden;\n min-width: 0;\n}\n.eg-cell-select-caret-inline {\n flex-shrink: 0;\n color: var(--eg-color-text-muted);\n font-size: 11px;\n margin-left: 2px;\n}\n.eg-cell-suffix-wrap {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n}\n.eg-cell-active {\n outline: 2px solid var(--eg-color-accent) !important;\n outline-offset: -2px;\n z-index: 3;\n}\n\n.eg-cell-selected {\n background: var(--eg-color-cell-selected) !important;\n}\n\n.eg-cell-fill-preview {\n background: var(--eg-color-cell-fill-preview) !important;\n outline: 1px dashed var(--eg-color-accent-dark);\n outline-offset: -1px;\n}\n\n.eg-cell-copy {\n outline: 1px dashed var(--eg-color-accent);\n outline-offset: -1px;\n}\n\n.eg-cell-merged-hidden {\n display: none !important;\n}\n\n.eg-cell-invalid {\n outline: 2px solid var(--eg-color-error) !important;\n outline-offset: -2px;\n z-index: 4;\n}\n\n.eg-cell-input {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: var(--eg-color-cell-bg);\n font-size: var(--eg-font-size);\n font-family: inherit;\n padding: 0;\n}\n\n.eg-row-header-cell {\n box-sizing: border-box;\n background: var(--eg-color-header-bg);\n border-bottom: 1px solid var(--eg-color-border-cell);\n border-right: 2px solid var(--eg-color-border-strong);\n text-align: center;\n font-size: 11px;\n color: var(--eg-color-text-secondary);\n cursor: pointer;\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.eg-row-resize-handle {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 4px;\n cursor: row-resize;\n z-index: 5;\n}\n\n.eg-fill-handle {\n position: absolute;\n width: 6px;\n height: 6px;\n background: var(--eg-color-accent);\n border: 1px solid white;\n cursor: crosshair;\n z-index: 10;\n}\n\n.eg-context-menu {\n position: fixed;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n z-index: 9999;\n min-width: 160px;\n font-size: var(--eg-font-size);\n padding: 4px 0;\n}\n\n.eg-context-item {\n padding: 6px 16px;\n cursor: pointer;\n position: relative;\n}\n\n.eg-context-item:hover { background: var(--eg-color-header-bg); }\n\n.eg-context-separator {\n height: 1px;\n background: var(--eg-color-border-cell);\n margin: 4px 0;\n}\n\n.eg-context-submenu-parent::after { content: ' ▶'; float: right; }\n\n.eg-context-submenu {\n display: none;\n position: absolute;\n left: 100%;\n top: -4px;\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n min-width: 160px;\n padding: 4px 0;\n z-index: 10000;\n}\n\n.eg-context-submenu-parent:hover .eg-context-submenu { display: block; }\n\n.eg-group-btn {\n position: absolute;\n width: 16px;\n height: 16px;\n line-height: 14px;\n text-align: center;\n font-size: 10px;\n cursor: pointer;\n background: var(--eg-color-header-group-bg);\n border: 1px solid var(--eg-color-group-border);\n border-radius: 2px;\n z-index: 5;\n user-select: none;\n}\n\n.eg-group-btn.collapsed { background: var(--eg-color-group-bg-collapsed); }\n\n.eg-drag-ghost {\n position: absolute;\n border: 2px dashed var(--eg-color-accent);\n pointer-events: none;\n z-index: 20;\n}\n\n/* Column drag-and-drop */\n.eg-header-cell--drag-source {\n opacity: 0.5;\n outline: 1px solid var(--eg-color-accent);\n outline-offset: -1px;\n}\n.eg-cell--drag-source {\n opacity: 0.4;\n}\n.eg-col-drag-ghost {\n position: fixed;\n padding: 3px 10px;\n background: var(--eg-color-header-bg);\n border: 1px solid var(--eg-color-accent);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n font-size: var(--eg-font-size-header);\n font-weight: 600;\n color: var(--eg-color-text);\n white-space: nowrap;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.92;\n transform: translateY(-2px);\n}\n\n.eg-resize-line {\n pointer-events: none;\n z-index: 9999;\n}\n\n/* Pin left separator shadow */\n.eg-frozen-col-body::after {\n content: '';\n position: absolute;\n top: 0;\n right: -4px;\n width: 4px;\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n\n.eg-pinned-right-body {\n position: sticky;\n right: 0;\n z-index: 10;\n background: var(--eg-color-cell-bg);\n flex-shrink: 0;\n}\n\n.eg-pinned-right-body::before {\n content: '';\n position: absolute;\n top: 0;\n left: -4px;\n bottom: 0;\n width: 4px;\n background: linear-gradient(to left, var(--eg-color-freeze-shadow), transparent);\n pointer-events: none;\n}\n\n.eg-pinned-right-header {\n overflow: hidden;\n flex-shrink: 0;\n border-left: 2px solid var(--eg-color-border-strong);\n background: var(--eg-color-header-bg);\n}\n\n.eg-import-overlay {\n position: absolute;\n inset: 0;\n background: var(--eg-color-overlay-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n border-radius: var(--eg-radius);\n}\n\n.eg-import-dialog {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: 8px;\n padding: 24px 32px;\n min-width: 280px;\n box-shadow: var(--eg-shadow-dialog);\n text-align: center;\n}\n\n.eg-import-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--eg-color-text);\n margin-bottom: 16px;\n}\n\n.eg-import-bar-wrap {\n height: 8px;\n background: var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n overflow: hidden;\n margin-bottom: 10px;\n}\n\n.eg-import-bar {\n height: 100%;\n background: linear-gradient(to right, var(--eg-color-accent), #4caf50);\n border-radius: var(--eg-radius);\n transition: width 0.15s ease;\n}\n\n.eg-import-msg {\n font-size: 12px;\n color: var(--eg-color-text-secondary);\n margin-bottom: 4px;\n}\n\n.eg-import-pct {\n font-size: var(--eg-font-size);\n font-weight: 600;\n color: var(--eg-color-accent);\n}\n.eg-export-spinner {\n width: 32px;\n height: 32px;\n margin: 12px auto 0;\n border: 3px solid var(--eg-color-border-cell);\n border-top-color: var(--eg-color-accent);\n border-radius: 50%;\n animation: eg-spin 0.8s linear infinite;\n}\n@keyframes eg-spin {\n to { transform: rotate(360deg); }\n}\n\n/* ===== READONLY CELL ===== */\n.eg-cell-readonly {\n background: var(--eg-color-cell-readonly);\n cursor: default;\n}\n.eg-cell-readonly.eg-cell-selected {\n background: var(--eg-color-cell-readonly-selected);\n}\n.eg-cell-readonly.eg-cell-active {\n outline-color: var(--eg-color-text-muted);\n}\n\n/* ===== SELECT DROPDOWN ===== */\n.eg-cell-select {\n cursor: pointer;\n}\n.eg-cell-select::after {\n content: '▾';\n position: absolute;\n right: 4px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--eg-color-text-muted);\n font-size: 11px;\n pointer-events: none;\n line-height: 1;\n}\n\n/* ===== CHECKBOX CELL ===== */\n.eg-cell-checkbox {\n justify-content: center;\n padding: 0 2px;\n}\n.eg-validation-tooltip {\n background: var(--eg-color-error-soft);\n border: 1px solid var(--eg-color-error);\n color: var(--eg-color-error-dark);\n font-size: 12px;\n padding: 4px 8px;\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-tooltip);\n white-space: nowrap;\n pointer-events: none;\n}\n\n/* ===== ROW STRIPE & HOVER ===== */\n.eg-row--even .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-stripe);\n}\n.eg-row:hover .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {\n background: var(--eg-color-row-hover);\n}\n\n/* ===== SIZE VARIANTS ===== */\n\n/* small */\n.eg-size-small .eg-cell {\n font-size: 12px;\n padding: 0 3px;\n}\n.eg-size-small .eg-cell-input {\n font-size: 12px;\n}\n.eg-size-small .eg-header-cell {\n font-size: 11px;\n}\n.eg-size-small .eg-footer-cell {\n font-size: 12px;\n}\n.eg-size-small .eg-row-header-cell {\n font-size: 10px;\n}\n.eg-size-small .eg-select-option {\n font-size: 12px;\n padding: 4px 10px;\n}\n.eg-size-small .eg-context-menu,\n.eg-size-small .eg-context-item {\n font-size: 12px;\n}\n.eg-size-small .eg-context-item {\n padding: 4px 14px;\n}\n\n/* large */\n.eg-size-large .eg-cell {\n font-size: 14px;\n padding: 0 6px;\n}\n.eg-size-large .eg-cell-input {\n font-size: 14px;\n}\n.eg-size-large .eg-header-cell {\n font-size: var(--eg-font-size);\n}\n.eg-size-large .eg-footer-cell {\n font-size: 14px;\n}\n.eg-size-large .eg-row-header-cell {\n font-size: 12px;\n}\n.eg-size-large .eg-select-option {\n font-size: 14px;\n padding: 8px 14px;\n}\n.eg-size-large .eg-context-menu,\n.eg-size-large .eg-context-item {\n font-size: 14px;\n}\n.eg-size-large .eg-context-item {\n padding: 8px 18px;\n}\n</style>\n\n<style>\n/* ── EgSelect / EgTreeSelect dropdown (non-scoped: injected by ExcelGrid on mount) ── */\n.eg-select-wrapper {\n position: relative;\n display: inline-block;\n min-width: 120px;\n font-size: var(--eg-font-size);\n font-family: inherit;\n}\n.eg-select-trigger {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-height: 30px;\n padding: 4px 8px;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n background: var(--eg-color-cell-bg);\n cursor: pointer;\n user-select: none;\n color: var(--eg-color-text);\n transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover { border-color: var(--eg-color-accent); }\n.eg-select-trigger--open {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled { background: var(--eg-color-cell-readonly); cursor: default; color: var(--eg-color-text-muted); }\n.eg-select-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.eg-select-placeholder { color: var(--eg-color-text-muted); }\n.eg-select-caret { flex-shrink: 0; color: var(--eg-color-text-muted); font-size: 12px; }\n.eg-select-dropdown {\n background: var(--eg-color-cell-bg);\n border: 1px solid var(--eg-color-border-cell);\n border-radius: var(--eg-radius);\n box-shadow: var(--eg-shadow-dropdown);\n overflow-y: auto;\n max-height: 320px;\n padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n z-index: 999;\n margin-top: 2px;\n}\n.eg-select-search {\n padding: 6px 8px;\n border-bottom: 1px solid var(--eg-color-border-cell);\n position: sticky;\n top: 0;\n background: var(--eg-color-cell-bg);\n z-index: 1;\n}\n.eg-select-search-input {\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--eg-color-border);\n border-radius: var(--eg-radius);\n padding: 4px 8px;\n font-size: var(--eg-font-size);\n outline: none;\n color: var(--eg-color-text);\n background: var(--eg-color-cell-bg);\n font-family: inherit;\n}\n.eg-select-search-input:focus {\n border-color: var(--eg-color-accent);\n box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-option {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 12px;\n font-size: var(--eg-font-size);\n cursor: pointer;\n white-space: normal;\n word-break: break-word;\n user-select: none;\n color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted { background: var(--eg-color-option-hover-bg); }\n.eg-select-option--active { font-weight: 600; color: var(--eg-color-accent); }\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover { background: var(--eg-color-option-active-hover-bg); }\n.eg-select-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n flex-shrink: 0;\n display: inline-block;\n margin-top: 3px;\n}\n/* Tree toggle */\n.eg-tree-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--eg-color-text-muted);\n margin-top: 1px;\n}\n.eg-tree-toggle--leaf { visibility: hidden; }\n/* EgCheckbox */\n.eg-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.eg-checkbox-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.eg-checkbox-box {\n position: relative;\n display: block;\n width: 19px;\n height: 19px;\n box-sizing: border-box;\n background-color: var(--eg-color-cell-bg);\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0 0;\n border: 1.5px solid var(--eg-color-checkbox-border);\n border-radius: var(--eg-radius);\n transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;\n}\n.eg-checkbox:hover .eg-checkbox-box { border-color: var(--eg-color-accent); }\n.eg-checkbox-input:checked + .eg-checkbox-box {\n background-color: var(--eg-color-accent);\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==\");\n background-size: 70% 70%;\n border-color: var(--eg-color-accent);\n}\n.eg-checkbox-input:focus-visible + .eg-checkbox-box { box-shadow: 0 0 0 3px var(--eg-color-accent-soft); }\n.eg-checkbox--disabled,\n.eg-checkbox--disabled .eg-checkbox-input { cursor: default; }\n.eg-checkbox-input:disabled + .eg-checkbox-box { background-color: var(--eg-color-cell-readonly); border-color: var(--eg-color-border-cell); }\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box { background-color: var(--eg-color-checkbox-disabled-checked); border-color: var(--eg-color-checkbox-disabled-checked); }\n</style>\n"]},media:void 0}))},nn,"data-v-6b44afd7",false,void 0,!1,B,void 0,void 0);var ln={install(e){e.component("ExcelGrid",on),e.component("EgCheckbox",W),e.component("EgSelect",qe),e.component("EgTreeSelect",Ze)}};e.EgCheckbox=W,e.EgSelect=qe,e.EgTreeSelect=Ze,e.ExcelGrid=on,e.default=ln,Object.defineProperty(e,"__esModule",{value:!0})});
|