vue2-excel-grid 1.1.13 → 1.1.16

package/dist/vue2-excel-grid.esm.js

@@ -1283,6 +1283,1376 @@ function getMessages(locale) {
   return messages[locale] || messages.en
 }
 
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+var script$3 = {
+  name: 'EgCheckbox',
+  model: { prop: 'value', event: 'input' },
+  props: {
+    value: { default: false },
+    trueValue: { default: true },
+    falseValue: { default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  computed: {
+    isChecked() {
+      return this.value === this.trueValue
+    }
+  },
+  methods: {
+    onChange(e) {
+      const val = e.target.checked ? this.trueValue : this.falseValue;
+      this.$emit('input', val);
+      this.$emit('change', val);
+    }
+  }
+};
+
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    const options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    let hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            const originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            const existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
+}
+
+const isOldIE = typeof navigator !== 'undefined' &&
+    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+    return (id, style) => addStyle(id, style);
+}
+let HEAD;
+const styles = {};
+function addStyle(id, css) {
+    const group = isOldIE ? css.media || 'default' : id;
+    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+    if (!style.ids.has(id)) {
+        style.ids.add(id);
+        let code = css.source;
+        if (css.map) {
+            // https://developer.chrome.com/devtools/docs/javascript-debugging
+            // this makes source maps inside style tags work properly in Chrome
+            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+            // http://stackoverflow.com/a/26603875
+            code +=
+                '\n/*# sourceMappingURL=data:application/json;base64,' +
+                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                    ' */';
+        }
+        if (!style.element) {
+            style.element = document.createElement('style');
+            style.element.type = 'text/css';
+            if (css.media)
+                style.element.setAttribute('media', css.media);
+            if (HEAD === undefined) {
+                HEAD = document.head || document.getElementsByTagName('head')[0];
+            }
+            HEAD.appendChild(style.element);
+        }
+        if ('styleSheet' in style.element) {
+            style.styles.push(code);
+            style.element.styleSheet.cssText = style.styles
+                .filter(Boolean)
+                .join('\n');
+        }
+        else {
+            const index = style.ids.size - 1;
+            const textNode = document.createTextNode(code);
+            const nodes = style.element.childNodes;
+            if (nodes[index])
+                style.element.removeChild(nodes[index]);
+            if (nodes.length)
+                style.element.insertBefore(textNode, nodes[index]);
+            else
+                style.element.appendChild(textNode);
+        }
+    }
+}
+
+/* script */
+const __vue_script__$3 = script$3;
+
+/* template */
+var __vue_render__$3 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "label",
+    {
+      staticClass: "eg-checkbox",
+      class: { "eg-checkbox--disabled": _vm.disabled },
+    },
+    [
+      _c("input", {
+        staticClass: "eg-checkbox-input",
+        attrs: { type: "checkbox", disabled: _vm.disabled },
+        domProps: { checked: _vm.isChecked },
+        on: { change: _vm.onChange },
+      }),
+      _vm._v(" "),
+      _c("span", { staticClass: "eg-checkbox-box" }),
+    ]
+  )
+};
+var __vue_staticRenderFns__$3 = [];
+__vue_render__$3._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$3 = function (inject) {
+    if (!inject) return
+    inject("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: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$3 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$3 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$3 = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
+    __vue_inject_styles__$3,
+    __vue_script__$3,
+    __vue_scope_id__$3,
+    __vue_is_functional_template__$3,
+    __vue_module_identifier__$3,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+var script$2 = {
+  name: 'EgSelect',
+  model: { prop: 'value', event: 'input' },
+  props: {
+    value: { default: null },
+    options: { type: Array, default: () => [] },
+    enableSearch: { type: Boolean, default: false },
+    placeholder: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    dropdownOnly: { type: Boolean, default: false },
+    triggerRect: { type: Object, default: null }
+  },
+  data() {
+    return {
+      open: false,
+      searchQuery: '',
+      highlight: -1
+    }
+  },
+  computed: {
+    normalizedOptions() {
+      return (this.options || []).map(o =>
+        typeof o === 'string'
+          ? { value: o, label: o }
+          : { value: o.value, label: o.label != null ? o.label : String(o.value), color: o.color }
+      )
+    },
+    filteredOptions() {
+      if (!this.enableSearch || !this.searchQuery.trim()) return this.normalizedOptions
+      const q = this.searchQuery.trim().toLowerCase();
+      return this.normalizedOptions.filter(o => String(o.label || '').toLowerCase().includes(q))
+    },
+    selectedOpt() {
+      const v = String(this.value == null ? '' : this.value);
+      return this.normalizedOptions.find(o => String(o.value) === v) || null
+    },
+    overlayStyle() {
+      if (!this.dropdownOnly || !this.triggerRect) return { position: 'fixed', zIndex: 9999 }
+      const rect = this.triggerRect;
+      const searchH = this.enableSearch ? 42 : 0;
+      const approxH = Math.min(this.filteredOptions.length * 28 + 8 + searchH, 320);
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const top = spaceBelow >= approxH ? rect.bottom : rect.top - approxH;
+      return {
+        position: 'fixed',
+        top: top + 'px',
+        left: rect.left + 'px',
+        minWidth: Math.max(rect.width, 120) + 'px',
+        maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + 'px',
+        zIndex: 9999
+      }
+    }
+  },
+  watch: {
+    open(val) {
+      if (val && this.enableSearch) {
+        this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus(); });
+      }
+    }
+  },
+  mounted() {
+    if (this.dropdownOnly) {
+      // Portal: move to document.body so position:fixed is always relative to viewport,
+      // regardless of any CSS transform on ancestor elements in the host project.
+      // Vue's removeNode uses el.parentNode, so cleanup works correctly after the move.
+      if (this.$el && this.$el.parentNode) {
+        document.body.appendChild(this.$el);
+      }
+      const v = String(this.value == null ? '' : this.value);
+      this.highlight = this.normalizedOptions.findIndex(o => String(o.value) === v);
+      if (this.enableSearch) {
+        this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus(); });
+      }
+    } else {
+      document.addEventListener('click', this._onDocClick);
+    }
+  },
+  beforeDestroy() {
+    if (!this.dropdownOnly) {
+      document.removeEventListener('click', this._onDocClick);
+    }
+  },
+  methods: {
+    toggle() {
+      if (this.disabled) return
+      this.open = !this.open;
+      if (this.open) {
+        const v = String(this.value == null ? '' : this.value);
+        this.highlight = this.normalizedOptions.findIndex(o => String(o.value) === v);
+        this.searchQuery = '';
+      }
+    },
+    pickOption(opt) {
+      this.$emit('input', opt.value);
+      this.$emit('select', { value: opt.value, label: opt.label });
+      if (!this.dropdownOnly) {
+        this.open = false;
+        this.searchQuery = '';
+        this.highlight = -1;
+      }
+    },
+    onSearch(e) {
+      this.searchQuery = e.target.value;
+      this.highlight = 0;
+    },
+    onSearchKey(e) {
+      const key = e.key;
+      if (key === 'Escape') {
+        e.preventDefault();
+        if (this.dropdownOnly) this.$emit('close');
+        else { this.open = false; this.searchQuery = ''; }
+      } else if (key === 'ArrowDown') {
+        e.preventDefault();
+        this.highlight = Math.min((this.highlight || 0) + 1, this.filteredOptions.length - 1);
+      } else if (key === 'ArrowUp') {
+        e.preventDefault();
+        this.highlight = Math.max((this.highlight || 0) - 1, 0);
+      } else if (key === 'Enter') {
+        e.preventDefault();
+        const opt = this.filteredOptions[this.highlight];
+        if (opt) this.pickOption(opt);
+      }
+    },
+    handleKey(e) {
+      const key = e.key;
+      if (key === 'Escape') {
+        e.preventDefault();
+        this.$emit('close');
+      } else if (key === 'Enter' || key === ' ') {
+        e.preventDefault();
+        const opt = this.filteredOptions[this.highlight];
+        if (opt) this.pickOption(opt);
+        else this.$emit('close');
+      } else if (key === 'ArrowDown') {
+        e.preventDefault();
+        this.highlight = Math.min((this.highlight || 0) + 1, this.filteredOptions.length - 1);
+      } else if (key === 'ArrowUp') {
+        e.preventDefault();
+        this.highlight = Math.max((this.highlight || 0) - 1, 0);
+      }
+    },
+    onRootMouseDown(e) {
+      if (this.dropdownOnly) e.preventDefault();
+    },
+    _onDocClick(e) {
+      if (!this.open) return
+      if (this.$el && this.$el.contains(e.target)) return
+      this.open = false;
+    }
+  }
+};
+
+/* script */
+const __vue_script__$2 = script$2;
+
+/* template */
+var __vue_render__$2 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "div",
+    {
+      class: _vm.dropdownOnly ? "eg-select-dropdown" : "eg-select-wrapper",
+      style: _vm.dropdownOnly ? _vm.overlayStyle : null,
+      on: { mousedown: _vm.onRootMouseDown },
+    },
+    [
+      !_vm.dropdownOnly
+        ? _c(
+            "div",
+            {
+              staticClass: "eg-select-trigger",
+              class: {
+                "eg-select-trigger--disabled": _vm.disabled,
+                "eg-select-trigger--open": _vm.open,
+              },
+              on: {
+                click: function ($event) {
+                  $event.stopPropagation();
+                  return _vm.toggle.apply(null, arguments)
+                },
+              },
+            },
+            [
+              _vm.selectedOpt && _vm.selectedOpt.color
+                ? _c("span", {
+                    staticClass: "eg-select-dot",
+                    style: { background: _vm.selectedOpt.color },
+                  })
+                : _vm._e(),
+              _vm._v(" "),
+              _c(
+                "span",
+                {
+                  staticClass: "eg-select-trigger-label",
+                  class: { "eg-select-placeholder": !_vm.selectedOpt },
+                },
+                [
+                  _vm._v(
+                    "\n      " +
+                      _vm._s(
+                        _vm.selectedOpt
+                          ? _vm.selectedOpt.label
+                          : _vm.placeholder
+                      ) +
+                      "\n    "
+                  ),
+                ]
+              ),
+              _vm._v(" "),
+              _c("span", { staticClass: "eg-select-caret" }, [_vm._v("▾")]),
+            ]
+          )
+        : _vm._e(),
+      _vm._v(" "),
+      _vm.dropdownOnly
+        ? [
+            _vm.enableSearch
+              ? _c(
+                  "div",
+                  {
+                    staticClass: "eg-select-search",
+                    on: {
+                      mousedown: function ($event) {
+                        $event.stopPropagation();
+                      },
+                    },
+                  },
+                  [
+                    _c("input", {
+                      ref: "searchInput",
+                      staticClass: "eg-select-search-input",
+                      attrs: {
+                        placeholder: "Qidirish...",
+                        autocomplete: "off",
+                        autocorrect: "off",
+                        autocapitalize: "off",
+                        spellcheck: "false",
+                      },
+                      domProps: { value: _vm.searchQuery },
+                      on: {
+                        input: _vm.onSearch,
+                        keydown: function ($event) {
+                          $event.stopPropagation();
+                          return _vm.onSearchKey.apply(null, arguments)
+                        },
+                      },
+                    }),
+                  ]
+                )
+              : _vm._e(),
+            _vm._v(" "),
+            _vm._l(_vm.filteredOptions, function (opt, idx) {
+              return _c(
+                "div",
+                {
+                  key: String(opt.value),
+                  staticClass: "eg-select-option",
+                  class: {
+                    "eg-select-option--active":
+                      String(opt.value) === String(_vm.value),
+                    "eg-select-option--highlighted": idx === _vm.highlight,
+                  },
+                  on: {
+                    mousedown: function ($event) {
+                      $event.preventDefault();
+                      return _vm.pickOption(opt)
+                    },
+                    mouseover: function ($event) {
+                      _vm.highlight = idx;
+                    },
+                  },
+                },
+                [
+                  opt.color
+                    ? _c("span", {
+                        staticClass: "eg-select-dot",
+                        style: { background: opt.color },
+                      })
+                    : _vm._e(),
+                  _vm._v("\n      " + _vm._s(opt.label) + "\n    "),
+                ]
+              )
+            }),
+          ]
+        : _vm.open
+        ? _c(
+            "div",
+            {
+              staticClass: "eg-select-dropdown eg-select-dropdown--floating",
+              on: {
+                mousedown: function ($event) {
+                  $event.stopPropagation();
+                  $event.preventDefault();
+                },
+              },
+            },
+            [
+              _vm.enableSearch
+                ? _c(
+                    "div",
+                    {
+                      staticClass: "eg-select-search",
+                      on: {
+                        mousedown: function ($event) {
+                          $event.stopPropagation();
+                        },
+                      },
+                    },
+                    [
+                      _c("input", {
+                        ref: "searchInput",
+                        staticClass: "eg-select-search-input",
+                        attrs: {
+                          placeholder: "Qidirish...",
+                          autocomplete: "off",
+                          autocorrect: "off",
+                          autocapitalize: "off",
+                          spellcheck: "false",
+                        },
+                        domProps: { value: _vm.searchQuery },
+                        on: {
+                          input: _vm.onSearch,
+                          keydown: function ($event) {
+                            $event.stopPropagation();
+                            return _vm.onSearchKey.apply(null, arguments)
+                          },
+                        },
+                      }),
+                    ]
+                  )
+                : _vm._e(),
+              _vm._v(" "),
+              _vm._l(_vm.filteredOptions, function (opt, idx) {
+                return _c(
+                  "div",
+                  {
+                    key: String(opt.value),
+                    staticClass: "eg-select-option",
+                    class: {
+                      "eg-select-option--active":
+                        String(opt.value) === String(_vm.value),
+                      "eg-select-option--highlighted": idx === _vm.highlight,
+                    },
+                    on: {
+                      mousedown: function ($event) {
+                        $event.preventDefault();
+                        return _vm.pickOption(opt)
+                      },
+                      mouseover: function ($event) {
+                        _vm.highlight = idx;
+                      },
+                    },
+                  },
+                  [
+                    opt.color
+                      ? _c("span", {
+                          staticClass: "eg-select-dot",
+                          style: { background: opt.color },
+                        })
+                      : _vm._e(),
+                    _vm._v("\n      " + _vm._s(opt.label) + "\n    "),
+                  ]
+                )
+              }),
+            ],
+            2
+          )
+        : _vm._e(),
+    ],
+    2
+  )
+};
+var __vue_staticRenderFns__$2 = [];
+__vue_render__$2._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$2 = function (inject) {
+    if (!inject) return
+    inject("data-v-524aca00_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/* Standalone wrapper */\n.eg-select-wrapper {\n  position: relative;\n  display: inline-block;\n  min-width: 120px;\n  font-size: 13px;\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 #d1d5db;\n  border-radius: 4px;\n  background: #fff;\n  cursor: pointer;\n  user-select: none;\n  color: #333;\n  transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover {\n  border-color: #1a73e8;\n}\n.eg-select-trigger--open {\n  border-color: #1a73e8;\n  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);\n}\n.eg-select-trigger--disabled {\n  background: #f5f5f5;\n  cursor: default;\n  color: #aaa;\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: #aaa;\n}\n.eg-select-caret {\n  flex-shrink: 0;\n  color: #888;\n  font-size: 12px;\n}\n\n/* Dropdown panel */\n.eg-select-dropdown {\n  background: #fff;\n  border: 1px solid #d0d0d0;\n  border-radius: 4px;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.15);\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 #ebebeb;\n  position: sticky;\n  top: 0;\n  background: #fff;\n  z-index: 1;\n}\n.eg-select-search-input {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n  padding: 4px 8px;\n  font-size: 13px;\n  outline: none;\n  color: #333;\n  background: #fff;\n  font-family: inherit;\n}\n.eg-select-search-input:focus {\n  border-color: #1a73e8;\n  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);\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: 13px;\n  cursor: pointer;\n  white-space: normal;\n  word-break: break-word;\n  user-select: none;\n  color: #333;\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n  background: #f0f4ff;\n}\n.eg-select-option--active {\n  font-weight: 600;\n  color: #1a73e8;\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n  background: #e8f0fe;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqPA,uBAAA;AACA;EACA,kBAAA;EACA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,oBAAA;AACA;AACA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;EACA,sBAAA;EACA,yBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;EACA,wDAAA;AACA;AACA;EACA,qBAAA;AACA;AACA;EACA,qBAAA;EACA,2CAAA;AACA;AACA;EACA,mBAAA;EACA,eAAA;EACA,WAAA;AACA;AACA;EACA,OAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;AACA;AACA;EACA,WAAA;AACA;AACA;EACA,cAAA;EACA,WAAA;EACA,eAAA;AACA;;AAEA,mBAAA;AACA;EACA,gBAAA;EACA,yBAAA;EACA,kBAAA;EACA,uCAAA;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,gCAAA;EACA,gBAAA;EACA,MAAA;EACA,gBAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,sBAAA;EACA,yBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,gBAAA;EACA,oBAAA;AACA;AACA;EACA,qBAAA;EACA,2CAAA;AACA;;AAEA,gBAAA;AACA;EACA,aAAA;EACA,uBAAA;EACA,QAAA;EACA,iBAAA;EACA,eAAA;EACA,eAAA;EACA,mBAAA;EACA,sBAAA;EACA,iBAAA;EACA,WAAA;AACA;AACA;;EAEA,mBAAA;AACA;AACA;EACA,gBAAA;EACA,cAAA;AACA;AACA;;EAEA,mBAAA;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    <!-- Standalone mode: trigger button -->\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    <!-- Options panel in grid dropdown-only mode (root IS the dropdown panel) -->\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    <!-- Options panel in standalone mode (floating dropdown below trigger) -->\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      // Portal: move to document.body so position:fixed is always relative to viewport,\n      // regardless of any CSS transform on ancestor elements in the host project.\n      // Vue's removeNode uses el.parentNode, so cleanup works correctly after the move.\n      if (this.$el && this.$el.parentNode) {\n        document.body.appendChild(this.$el)\n      }\n      const v = String(this.value == null ? '' : this.value)\n      this.highlight = this.normalizedOptions.findIndex(o => String(o.value) === v)\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      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.filteredOptions.length - 1)\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\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      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.filteredOptions.length - 1)\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\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: 13px;\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 #d1d5db;\n  border-radius: 4px;\n  background: #fff;\n  cursor: pointer;\n  user-select: none;\n  color: #333;\n  transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover {\n  border-color: #1a73e8;\n}\n.eg-select-trigger--open {\n  border-color: #1a73e8;\n  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);\n}\n.eg-select-trigger--disabled {\n  background: #f5f5f5;\n  cursor: default;\n  color: #aaa;\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: #aaa;\n}\n.eg-select-caret {\n  flex-shrink: 0;\n  color: #888;\n  font-size: 12px;\n}\n\n/* Dropdown panel */\n.eg-select-dropdown {\n  background: #fff;\n  border: 1px solid #d0d0d0;\n  border-radius: 4px;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.15);\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 #ebebeb;\n  position: sticky;\n  top: 0;\n  background: #fff;\n  z-index: 1;\n}\n.eg-select-search-input {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n  padding: 4px 8px;\n  font-size: 13px;\n  outline: none;\n  color: #333;\n  background: #fff;\n  font-family: inherit;\n}\n.eg-select-search-input:focus {\n  border-color: #1a73e8;\n  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);\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: 13px;\n  cursor: pointer;\n  white-space: normal;\n  word-break: break-word;\n  user-select: none;\n  color: #333;\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n  background: #f0f4ff;\n}\n.eg-select-option--active {\n  font-weight: 600;\n  color: #1a73e8;\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n  background: #e8f0fe;\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: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$2 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$2 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$2 = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+    __vue_inject_styles__$2,
+    __vue_script__$2,
+    __vue_scope_id__$2,
+    __vue_is_functional_template__$2,
+    __vue_module_identifier__$2,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+var script$1 = {
+  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: false },
+    placeholder: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    dropdownOnly: { type: Boolean, default: false },
+    triggerRect: { type: Object, default: null }
+  },
+  data() {
+    return {
+      open: false,
+      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() {
+      if (!this.enableSearch) return null
+      return this._treeFlattenAll(this.options || [], this.keys)
+    },
+    filteredOptions() {
+      if (!this.enableSearch || !this.searchQuery.trim()) return this.flatOptions
+      const q = this.searchQuery.trim().toLowerCase();
+      const pool = this.allFlatOptions || this.flatOptions;
+      return pool.filter(o => String(o.label || '').toLowerCase().includes(q))
+    },
+    selectedLabel() {
+      const v = String(this.value == null ? '' : this.value);
+      if (!v) return null
+      const found = this._treeFindLabel(this.options || [], this.keys, v);
+      return found != null ? found : null
+    },
+    overlayStyle() {
+      if (!this.dropdownOnly || !this.triggerRect) return { position: 'fixed', zIndex: 9999 }
+      const rect = this.triggerRect;
+      const searchH = this.enableSearch ? 42 : 0;
+      const approxH = Math.min(this.filteredOptions.length * 28 + 8 + searchH, 320);
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const top = spaceBelow >= approxH ? rect.bottom : rect.top - approxH;
+      return {
+        position: 'fixed',
+        top: top + 'px',
+        left: rect.left + 'px',
+        minWidth: Math.max(rect.width, 120) + 'px',
+        maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + 'px',
+        zIndex: 9999
+      }
+    }
+  },
+  watch: {
+    open(val) {
+      if (val && this.enableSearch) {
+        this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus(); });
+      }
+    }
+  },
+  mounted() {
+    if (this.dropdownOnly) {
+      // Portal: move to document.body so position:fixed is always relative to viewport,
+      // regardless of any CSS transform on ancestor elements in the host project.
+      // Vue's removeNode uses el.parentNode, so cleanup works correctly after the move.
+      if (this.$el && this.$el.parentNode) {
+        document.body.appendChild(this.$el);
+      }
+      this._initExpanded();
+      if (this.enableSearch) {
+        this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus(); });
+      }
+    } else {
+      document.addEventListener('click', this._onDocClick);
+    }
+  },
+  beforeDestroy() {
+    if (!this.dropdownOnly) {
+      document.removeEventListener('click', this._onDocClick);
+    }
+  },
+  methods: {
+    _initExpanded() {
+      const v = String(this.value == null ? '' : this.value);
+      const path = this._treeFindPath(this.options || [], this.keys, v, []) || [];
+      const expandedMap = {};
+      path.forEach(id => { expandedMap[id] = true; });
+      this.expandedMap = expandedMap;
+      const flat = this.flatOptions;
+      this.highlight = flat.findIndex(o => String(o.value) === v);
+    },
+    toggle() {
+      if (this.disabled) return
+      this.open = !this.open;
+      if (this.open) {
+        this.searchQuery = '';
+        this._initExpanded();
+      }
+    },
+    pickOption(opt) {
+      this.$emit('input', opt.value);
+      this.$emit('select', { value: opt.value, label: opt.label });
+      if (!this.dropdownOnly) {
+        this.open = false;
+        this.searchQuery = '';
+        this.highlight = -1;
+      }
+    },
+    toggleNode(idx) {
+      const opt = this.flatOptions[idx];
+      if (!opt || !opt.hasChildren) return
+      const next = { ...this.expandedMap };
+      if (next[opt.id]) delete next[opt.id];
+      else next[opt.id] = true;
+      this.expandedMap = next;
+      const newFlat = this.flatOptions;
+      const newIdx = newFlat.findIndex(o => o.id === opt.id);
+      this.highlight = newIdx >= 0 ? newIdx : this.highlight;
+    },
+    onSearch(e) {
+      this.searchQuery = e.target.value;
+      this.highlight = 0;
+    },
+    onSearchKey(e) {
+      const key = e.key;
+      if (key === 'Escape') {
+        e.preventDefault();
+        if (this.dropdownOnly) this.$emit('close');
+        else { this.open = false; this.searchQuery = ''; }
+      } else if (key === 'ArrowDown') {
+        e.preventDefault();
+        this.highlight = Math.min((this.highlight || 0) + 1, this.filteredOptions.length - 1);
+      } else if (key === 'ArrowUp') {
+        e.preventDefault();
+        this.highlight = Math.max((this.highlight || 0) - 1, 0);
+      } else if (key === 'Enter') {
+        e.preventDefault();
+        const opt = this.filteredOptions[this.highlight];
+        if (opt) this.pickOption(opt);
+      }
+    },
+    handleKey(e) {
+      const key = e.key;
+      if (key === 'Escape') {
+        e.preventDefault();
+        this.$emit('close');
+      } else if (key === 'Enter' || key === ' ') {
+        e.preventDefault();
+        const opt = this.filteredOptions[this.highlight];
+        if (opt) this.pickOption(opt);
+        else this.$emit('close');
+      } else if (key === 'ArrowDown') {
+        e.preventDefault();
+        this.highlight = Math.min((this.highlight || 0) + 1, this.filteredOptions.length - 1);
+      } else if (key === 'ArrowUp') {
+        e.preventDefault();
+        this.highlight = Math.max((this.highlight || 0) - 1, 0);
+      } else if (!this.searchQuery && (key === 'ArrowRight' || key === 'ArrowLeft')) {
+        e.preventDefault();
+        const opt = this.flatOptions[this.highlight];
+        if (opt && opt.hasChildren) {
+          if (key === 'ArrowRight' && !opt.expanded) this.toggleNode(this.highlight);
+          if (key === 'ArrowLeft' && opt.expanded) this.toggleNode(this.highlight);
+        }
+      }
+    },
+    onRootMouseDown(e) {
+      if (this.dropdownOnly) e.preventDefault();
+    },
+    _onDocClick(e) {
+      if (!this.open) return
+      if (this.$el && this.$el.contains(e.target)) return
+      this.open = false;
+    },
+    _treeFlatten(nodes, keys, expandedMap, depth, pathArr) {
+      let out = []
+      ;(nodes || []).forEach((node, idx) => {
+        const path = pathArr.concat(idx);
+        const id = path.join('-');
+        const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : [];
+        const hasChildren = children.length > 0;
+        const expanded = hasChildren && !!expandedMap[id];
+        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 });
+        if (expanded) out = out.concat(this._treeFlatten(children, keys, expandedMap, depth + 1, path));
+      });
+      return out
+    },
+    _treeFlattenAll(nodes, keys) {
+      const result = [];
+      const walk = (list) => {
+(list || []).forEach(node => {
+          const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : [];
+          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 });
+          if (children.length) walk(children);
+        });
+      };
+      walk(nodes);
+      return result
+    },
+    _treeFindLabel(nodes, keys, value) {
+      for (const node of (nodes || [])) {
+        if (String(node[keys.valueKey]) === value) {
+          return node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])
+        }
+        const found = this._treeFindLabel(node[keys.childrenKey], keys, value);
+        if (found != null) return found
+      }
+      return null
+    },
+    _treeFindPath(nodes, keys, value, pathArr) {
+      for (let i = 0; i < (nodes || []).length; i++) {
+        const node = nodes[i];
+        const path = pathArr.concat(i);
+        if (String(node[keys.valueKey]) === value) return [path.join('-')]
+        const children = node[keys.childrenKey];
+        if (Array.isArray(children)) {
+          const sub = this._treeFindPath(children, keys, value, path);
+          if (sub) return [path.join('-')].concat(sub)
+        }
+      }
+      return null
+    }
+  }
+};
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "div",
+    {
+      class: _vm.dropdownOnly ? "eg-select-dropdown" : "eg-select-wrapper",
+      style: _vm.dropdownOnly ? _vm.overlayStyle : null,
+      on: { mousedown: _vm.onRootMouseDown },
+    },
+    [
+      !_vm.dropdownOnly
+        ? _c(
+            "div",
+            {
+              staticClass: "eg-select-trigger",
+              class: {
+                "eg-select-trigger--disabled": _vm.disabled,
+                "eg-select-trigger--open": _vm.open,
+              },
+              on: {
+                click: function ($event) {
+                  $event.stopPropagation();
+                  return _vm.toggle.apply(null, arguments)
+                },
+              },
+            },
+            [
+              _c(
+                "span",
+                {
+                  staticClass: "eg-select-trigger-label",
+                  class: { "eg-select-placeholder": _vm.selectedLabel == null },
+                },
+                [
+                  _vm._v(
+                    "\n      " +
+                      _vm._s(
+                        _vm.selectedLabel != null
+                          ? _vm.selectedLabel
+                          : _vm.placeholder
+                      ) +
+                      "\n    "
+                  ),
+                ]
+              ),
+              _vm._v(" "),
+              _c("span", { staticClass: "eg-select-caret" }, [_vm._v("▾")]),
+            ]
+          )
+        : _vm._e(),
+      _vm._v(" "),
+      _vm.dropdownOnly
+        ? [
+            _vm.enableSearch
+              ? _c(
+                  "div",
+                  {
+                    staticClass: "eg-select-search",
+                    on: {
+                      mousedown: function ($event) {
+                        $event.stopPropagation();
+                      },
+                    },
+                  },
+                  [
+                    _c("input", {
+                      ref: "searchInput",
+                      staticClass: "eg-select-search-input",
+                      attrs: {
+                        placeholder: "Qidirish...",
+                        autocomplete: "off",
+                        autocorrect: "off",
+                        autocapitalize: "off",
+                        spellcheck: "false",
+                      },
+                      domProps: { value: _vm.searchQuery },
+                      on: {
+                        input: _vm.onSearch,
+                        keydown: function ($event) {
+                          $event.stopPropagation();
+                          return _vm.onSearchKey.apply(null, arguments)
+                        },
+                      },
+                    }),
+                  ]
+                )
+              : _vm._e(),
+            _vm._v(" "),
+            _vm._l(_vm.filteredOptions, function (opt, idx) {
+              return _c(
+                "div",
+                {
+                  key: opt.id != null ? opt.id : String(opt.value),
+                  staticClass: "eg-select-option",
+                  class: {
+                    "eg-select-option--active":
+                      String(opt.value) === String(_vm.value),
+                    "eg-select-option--highlighted": idx === _vm.highlight,
+                  },
+                  style: !_vm.searchQuery
+                    ? { paddingLeft: 12 + opt.depth * 16 + "px" }
+                    : null,
+                  on: {
+                    mousedown: function ($event) {
+                      $event.preventDefault();
+                      return _vm.pickOption(opt)
+                    },
+                    mouseover: function ($event) {
+                      _vm.highlight = idx;
+                    },
+                  },
+                },
+                [
+                  !_vm.searchQuery
+                    ? _c(
+                        "span",
+                        {
+                          staticClass: "eg-tree-toggle",
+                          class: { "eg-tree-toggle--leaf": !opt.hasChildren },
+                          on: {
+                            mousedown: function ($event) {
+                              $event.preventDefault();
+                              $event.stopPropagation();
+                              return _vm.toggleNode(idx)
+                            },
+                          },
+                        },
+                        [
+                          _vm._v(
+                            _vm._s(
+                              opt.hasChildren ? (opt.expanded ? "▾" : "▸") : ""
+                            )
+                          ),
+                        ]
+                      )
+                    : _vm._e(),
+                  _vm._v(" "),
+                  opt.color
+                    ? _c("span", {
+                        staticClass: "eg-select-dot",
+                        style: { background: opt.color },
+                      })
+                    : _vm._e(),
+                  _vm._v("\n      " + _vm._s(opt.label) + "\n    "),
+                ]
+              )
+            }),
+          ]
+        : _vm.open
+        ? _c(
+            "div",
+            {
+              staticClass: "eg-select-dropdown eg-select-dropdown--floating",
+              on: {
+                mousedown: function ($event) {
+                  $event.stopPropagation();
+                  $event.preventDefault();
+                },
+              },
+            },
+            [
+              _vm.enableSearch
+                ? _c(
+                    "div",
+                    {
+                      staticClass: "eg-select-search",
+                      on: {
+                        mousedown: function ($event) {
+                          $event.stopPropagation();
+                        },
+                      },
+                    },
+                    [
+                      _c("input", {
+                        ref: "searchInput",
+                        staticClass: "eg-select-search-input",
+                        attrs: {
+                          placeholder: "Qidirish...",
+                          autocomplete: "off",
+                          autocorrect: "off",
+                          autocapitalize: "off",
+                          spellcheck: "false",
+                        },
+                        domProps: { value: _vm.searchQuery },
+                        on: {
+                          input: _vm.onSearch,
+                          keydown: function ($event) {
+                            $event.stopPropagation();
+                            return _vm.onSearchKey.apply(null, arguments)
+                          },
+                        },
+                      }),
+                    ]
+                  )
+                : _vm._e(),
+              _vm._v(" "),
+              _vm._l(_vm.filteredOptions, function (opt, idx) {
+                return _c(
+                  "div",
+                  {
+                    key: opt.id != null ? opt.id : String(opt.value),
+                    staticClass: "eg-select-option",
+                    class: {
+                      "eg-select-option--active":
+                        String(opt.value) === String(_vm.value),
+                      "eg-select-option--highlighted": idx === _vm.highlight,
+                    },
+                    style: !_vm.searchQuery
+                      ? { paddingLeft: 12 + opt.depth * 16 + "px" }
+                      : null,
+                    on: {
+                      mousedown: function ($event) {
+                        $event.preventDefault();
+                        return _vm.pickOption(opt)
+                      },
+                      mouseover: function ($event) {
+                        _vm.highlight = idx;
+                      },
+                    },
+                  },
+                  [
+                    !_vm.searchQuery
+                      ? _c(
+                          "span",
+                          {
+                            staticClass: "eg-tree-toggle",
+                            class: { "eg-tree-toggle--leaf": !opt.hasChildren },
+                            on: {
+                              mousedown: function ($event) {
+                                $event.preventDefault();
+                                $event.stopPropagation();
+                                return _vm.toggleNode(idx)
+                              },
+                            },
+                          },
+                          [
+                            _vm._v(
+                              _vm._s(
+                                opt.hasChildren
+                                  ? opt.expanded
+                                    ? "▾"
+                                    : "▸"
+                                  : ""
+                              )
+                            ),
+                          ]
+                        )
+                      : _vm._e(),
+                    _vm._v(" "),
+                    opt.color
+                      ? _c("span", {
+                          staticClass: "eg-select-dot",
+                          style: { background: opt.color },
+                        })
+                      : _vm._e(),
+                    _vm._v("\n      " + _vm._s(opt.label) + "\n    "),
+                  ]
+                )
+              }),
+            ],
+            2
+          )
+        : _vm._e(),
+    ],
+    2
+  )
+};
+var __vue_staticRenderFns__$1 = [];
+__vue_render__$1._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$1 = function (inject) {
+    if (!inject) return
+    inject("data-v-7628cbd0_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/* 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: #888;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqVA,gBAAA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;EACA,WAAA;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    <!-- Standalone mode: trigger button -->\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    <!-- Options panel in grid dropdown-only mode -->\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    <!-- Options panel in standalone mode -->\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      // Portal: move to document.body so position:fixed is always relative to viewport,\n      // regardless of any CSS transform on ancestor elements in the host project.\n      // Vue's removeNode uses el.parentNode, so cleanup works correctly after the move.\n      if (this.$el && this.$el.parentNode) {\n        document.body.appendChild(this.$el)\n      }\n      this._initExpanded()\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      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.filteredOptions.length - 1)\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\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      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.filteredOptions.length - 1)\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\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    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: #888;\n  margin-top: 1px;\n}\n.eg-tree-toggle--leaf {\n  visibility: hidden;\n}\n</style>\n"]}, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$1 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$1 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$1 = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
 //
 
 const SIZE_CONFIG = {
@@ -1297,6 +2667,8 @@ const OUTLINE_GUTTER = 20;
 var script = {
   name: 'ExcelGrid',
 
+  components: { EgCheckbox: __vue_component__$3, EgSelect: __vue_component__$2, EgTreeSelect: __vue_component__$1 },
+
   // v-model → :data + @input
   model: { prop: 'data', event: 'input' },
 
@@ -1602,32 +2974,6 @@ var script = {
       }
     },
 
-    filteredSelectOptions() {
-      if (!this.selectDropdown) return []
-      const { options, searchQuery, enableSearch, tree, allFlatOptions } = this.selectDropdown;
-      if (!enableSearch || !searchQuery || !searchQuery.trim()) return options
-      const q = searchQuery.trim().toLowerCase();
-      const pool = tree && allFlatOptions ? allFlatOptions : options;
-      return pool.filter(o => String(o.label || '').toLowerCase().includes(q))
-    },
-
-    dropdownStyle() {
-      if (!this.selectDropdown) return {}
-      const { rect } = this.selectDropdown;
-      const optionH = this._rowH + 4;
-      const searchH = this.selectDropdown.enableSearch ? 42 : 0;
-      const approxHeight = Math.min(this.filteredSelectOptions.length * optionH + 8 + searchH, 320);
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const top = spaceBelow >= approxHeight ? rect.bottom : rect.top - approxHeight;
-      return {
-        position: 'fixed',
-        top: top + 'px',
-        left: rect.left + 'px',
-        minWidth: Math.max(rect.width, 120) + 'px',
-        maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + 'px',
-        zIndex: 9999
-      }
-    },
 
     invalidTooltipStyle() {
       if (!this.invalidCell || !this.invalidCell.rect) return {}
@@ -2530,7 +3876,7 @@ var script = {
       this.invalidCell = null;
       if (this.editingCell) {
         const editCol = this.leafCols[this.editingCell.col];
-        if (editCol && this.hasEditSlot(editCol)) {
+        if (editCol && this._hasCustomEdit(editCol)) {
           this.cancelEdit();
         } else {
           this.commitEdit();
@@ -2559,7 +3905,7 @@ var script = {
 
         // Open select dropdown on click if cell was already active (2nd click)
         const col = this.leafCols[ci];
-        if (wasActive && col && this.isSelectLikeCol(col) && !this.hasEditSlot(col) && this.isCellEditable(ri, ci)) {
+        if (wasActive && col && this.isSelectLikeCol(col) && !this._hasCustomEdit(col) && this.isCellEditable(ri, ci)) {
           this.openSelectDropdown(ri, ci, e);
           e.preventDefault();
           this.isMouseDown = true;
@@ -2598,7 +3944,7 @@ var script = {
     onCellDblClick(ri, ci) {
       const col = this.leafCols[ci];
       if (!this.isCellEditable(ri, ci)) return
-      if (col && this.isSelectLikeCol(col) && !this.hasEditSlot(col)) {
+      if (col && this.isSelectLikeCol(col) && !this._hasCustomEdit(col)) {
         this.openSelectDropdownForActive();
         return
       }
@@ -2691,44 +4037,11 @@ var script = {
     // KEYBOARD NAVIGATION (3.2)
     // =========================================================
     onKeyDown(e) {
-      // Handle open select dropdown keyboard navigation
+      // Delegate keyboard navigation to the active dropdown component
       if (this.selectDropdown) {
-        const key = e.key;
-        if (key === 'Escape') {
-          e.preventDefault();
-          this.closeSelectDropdown();
-          return
-        }
-        if (key === 'Enter' || key === ' ') {
-          e.preventDefault();
-          const h = this.selectDropdown.highlight;
-          if (h >= 0 && this.selectDropdown.options[h]) {
-            this.commitSelectValue(this.selectDropdown.options[h].value);
-          } else {
-            this.closeSelectDropdown();
-          }
-          return
-        }
-        if (key === 'ArrowDown') {
-          e.preventDefault();
-          this.selectDropdown.highlight = Math.min(this.selectDropdown.highlight + 1, this.selectDropdown.options.length - 1);
-          return
-        }
-        if (key === 'ArrowUp') {
-          e.preventDefault();
-          this.selectDropdown.highlight = Math.max(this.selectDropdown.highlight - 1, 0);
-          return
-        }
-        if (this.selectDropdown.tree && !this.selectDropdown.searchQuery && (key === 'ArrowRight' || key === 'ArrowLeft')) {
-          e.preventDefault();
-          const opt = this.selectDropdown.options[this.selectDropdown.highlight];
-          if (opt && opt.hasChildren) {
-            if (key === 'ArrowRight' && !opt.expanded) this.toggleTreeNode(this.selectDropdown.highlight);
-            if (key === 'ArrowLeft' && opt.expanded) this.toggleTreeNode(this.selectDropdown.highlight);
-          }
-          return
-        }
-        return // block other keys while dropdown open
+        const comp = this.$refs.selectDropdownComp;
+        if (comp && comp.handleKey) comp.handleKey(e);
+        return
       }
 
       if (this.editingCell) return // handled by onEditKeyDown
@@ -2776,7 +4089,7 @@ var script = {
       if (key === 'F2') {
         e.preventDefault();
         const activeCol = this.leafCols[this.activeCell.col];
-        if (activeCol && this.isSelectLikeCol(activeCol) && !this.hasEditSlot(activeCol)) {
+        if (activeCol && this.isSelectLikeCol(activeCol) && !this._hasCustomEdit(activeCol)) {
           this.openSelectDropdownForActive();
         } else if (activeCol && activeCol.type === 'checkbox') {
           this.toggleCheckbox(this.activeCell.row, this.activeCell.col);
@@ -2872,7 +4185,7 @@ var script = {
       if (e.ctrlKey || e.metaKey || e.altKey) return
       if (e.key && e.key.length === 1) {
         const activeCol = this.leafCols[this.activeCell.col];
-        if (activeCol && this.isSelectLikeCol(activeCol) && !this.hasEditSlot(activeCol)) {
+        if (activeCol && this.isSelectLikeCol(activeCol) && !this._hasCustomEdit(activeCol)) {
           e.preventDefault();
           this.openSelectDropdownForActive();
           return
@@ -2947,7 +4260,7 @@ var script = {
       const col = this.leafCols[ci];
       if (!col || !this.isCellEditable(ri, ci)) return
       if (ri < 0 || ri >= this.totalRows) return
-      if (!this.hasEditSlot(col)) {
+      if (!this._hasCustomEdit(col)) {
         if (this.isSelectLikeCol(col)) { this.openSelectDropdownForActive(); return }
         if (col.type === 'checkbox') return
       }
@@ -3004,9 +4317,19 @@ var script = {
       this.$refs.wrapper && this.$refs.wrapper.focus();
     },
 
-    hasEditSlot(col) {
+    hasCellSlot(col) {
+      return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['cell-' + col.key])
+    },
+    hasLegacyEditSlot(col) {
       return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['edit-' + col.key])
     },
+    _hasCustomEdit(col) {
+      // For select/treeSelect: cell-{key} slot only customizes display; dropdown still opens normally
+      if (col.type === 'select' || col.type === 'treeSelect') {
+        return this.hasLegacyEditSlot(col)
+      }
+      return this.hasCellSlot(col) || this.hasLegacyEditSlot(col)
+    },
 
     commitEditSlot(value) {
       if (!this.editingCell) return
@@ -3057,10 +4380,6 @@ var script = {
       this.setCheckboxValue(ri, ci, !this.isCheckboxChecked(ri, ci));
     },
 
-    onCheckboxChange(e, ri, ci) {
-      this.setCheckboxValue(ri, ci, e.target.checked);
-    },
-
     // =========================================================
     // CELL EDITABILITY (3.17)
     // =========================================================
@@ -3124,59 +4443,20 @@ var script = {
       this.$emit('bulk-validation-error', { blocked, cells });
     },
 
-    // =========================================================
-    // SELECT DROPDOWN (3.16) + TREE SELECT (3.22)
-    // =========================================================
-
-    isSelectLikeCol(col) {
-      return !!(col && (col.type === 'select' || col.type === 'treeSelect'))
-    },
-
-    treeOptionKeys(col) {
-      return {
-        valueKey: col.optionValueKey || 'value',
-        labelKey: col.optionLabelKey || 'label',
-        childrenKey: col.optionChildrenKey || 'children'
-      }
-    },
-
-    // Flattens a tree of option nodes into a visible list, respecting which
-    // node ids are currently expanded. Each returned entry carries enough
-    // info (depth/hasChildren/expanded/id) to render indentation + a toggle.
-    _treeFlatten(nodes, keys, expandedMap, depth, pathArr) {
-      let out = []
-      ;(nodes || []).forEach((node, idx) => {
-        const path = pathArr.concat(idx);
-        const id = path.join('-');
-        const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : [];
-        const hasChildren = children.length > 0;
-        const expanded = hasChildren && !!expandedMap[id];
-        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
-        });
-        if (expanded) {
-          out = out.concat(this._treeFlatten(children, keys, expandedMap, depth + 1, path));
-        }
-      });
-      return out
+    // =========================================================
+    // SELECT DROPDOWN (3.16) + TREE SELECT (3.22)
+    // =========================================================
+
+    isSelectLikeCol(col) {
+      return !!(col && (col.type === 'select' || col.type === 'treeSelect'))
     },
 
-    _treeFlattenAll(nodes, keys, depth, result) {
-(nodes || []).forEach(node => {
-        const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : [];
-        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
-        });
-        if (children.length) this._treeFlattenAll(children, keys, depth + 1, result);
-      });
-      return result
+    treeOptionKeys(col) {
+      return {
+        valueKey: col.optionValueKey || 'value',
+        labelKey: col.optionLabelKey || 'label',
+        childrenKey: col.optionChildrenKey || 'children'
+      }
     },
 
     _treeFindLabel(nodes, keys, value) {
@@ -3190,28 +4470,9 @@ var script = {
       return null
     },
 
-    // Returns the chain of ancestor node ids leading to `value` (inclusive),
-    // so callers can pre-expand exactly that branch when opening the dropdown.
-    _treeFindPath(nodes, keys, value, pathArr) {
-      for (let idx = 0; idx < (nodes || []).length; idx++) {
-        const node = nodes[idx];
-        const path = pathArr.concat(idx);
-        if (String(node[keys.valueKey]) === value) return [path.join('-')]
-        const children = node[keys.childrenKey];
-        if (Array.isArray(children)) {
-          const sub = this._treeFindPath(children, keys, value, path);
-          if (sub) return [path.join('-')].concat(sub)
-        }
-      }
-      return null
-    },
-
     colOptions(ci) {
       const col = this.leafCols[ci];
       if (!col || !Array.isArray(col.options)) return []
-      if (col.type === 'treeSelect') {
-        return this._treeFlatten(col.options, this.treeOptionKeys(col), {}, 0, [])
-      }
       return col.options.map(o =>
         typeof o === 'string' ? { value: o, label: o } : { value: o.value, label: o.label != null ? o.label : String(o.value), color: o.color }
       )
@@ -3233,58 +4494,17 @@ var script = {
 
     _buildSelectDropdownState(ri, ci, col, currentValue, rect) {
       const rectObj = { top: rect.top, bottom: rect.bottom, left: rect.left, width: rect.width };
-      const enableSearch = !!col.enableSearch;
-      if (col.type === 'treeSelect') {
-        const keys = this.treeOptionKeys(col);
-        const path = (Array.isArray(col.options) && this._treeFindPath(col.options, keys, currentValue, [])) || [];
-        const expandedMap = {};
-        path.forEach(id => { expandedMap[id] = true; });
-        const flat = this._treeFlatten(col.options, keys, expandedMap, 0, []);
-        return {
-          row: ri, col: ci, tree: true, keys, expandedMap,
-          options: flat,
-          allFlatOptions: enableSearch ? this._treeFlattenAll(col.options || [], keys, 0, []) : null,
-          currentValue,
-          highlight: flat.findIndex(o => String(o.value) === currentValue),
-          rect: rectObj,
-          enableSearch,
-          searchQuery: ''
-        }
-      }
-      const opts = this.colOptions(ci);
       return {
-        row: ri, col: ci, tree: false,
-        options: opts,
-        allFlatOptions: null,
+        row: ri, col: ci,
+        tree: col.type === 'treeSelect',
+        keys: col.type === 'treeSelect' ? this.treeOptionKeys(col) : null,
+        rawOptions: col.options || [],
         currentValue,
-        highlight: opts.findIndex(o => String(o.value) === currentValue),
         rect: rectObj,
-        enableSearch,
-        searchQuery: ''
+        enableSearch: !!col.enableSearch
       }
     },
 
-    toggleTreeNode(idx) {
-      if (!this.selectDropdown || !this.selectDropdown.tree) return
-      const opt = this.selectDropdown.options[idx];
-      if (!opt || !opt.hasChildren) return
-      const { row, col, expandedMap, keys } = this.selectDropdown;
-      const colDef = this.leafCols[col];
-      if (!colDef) return
-      const nextExpandedMap = { ...expandedMap };
-      if (nextExpandedMap[opt.id]) delete nextExpandedMap[opt.id];
-      else nextExpandedMap[opt.id] = true;
-      const flat = this._treeFlatten(colDef.options, keys, nextExpandedMap, 0, []);
-      const newHighlight = flat.findIndex(o => o.id === opt.id);
-      this.selectDropdown = {
-        ...this.selectDropdown,
-        row, col,
-        expandedMap: nextExpandedMap,
-        options: flat,
-        highlight: newHighlight >= 0 ? newHighlight : this.selectDropdown.highlight
-      };
-    },
-
     openSelectDropdown(ri, ci, e) {
       const col = this.leafCols[ci];
       if (!col || !Array.isArray(col.options)) return
@@ -3292,9 +4512,6 @@ var script = {
       const rect = el.getBoundingClientRect();
       const currentValue = String(this.getCellValue(ri, ci) != null ? this.getCellValue(ri, ci) : '');
       this.selectDropdown = this._buildSelectDropdownState(ri, ci, col, currentValue, rect);
-      if (col.enableSearch) {
-        this.$nextTick(() => { this.$refs.dropdownSearch && this.$refs.dropdownSearch.focus(); });
-      }
     },
 
     openSelectDropdownForActive() {
@@ -3307,13 +4524,10 @@ var script = {
         const rect = el.getBoundingClientRect();
         const currentValue = String(this.getCellValue(row, col) != null ? this.getCellValue(row, col) : '');
         this.selectDropdown = this._buildSelectDropdownState(row, col, colDef, currentValue, rect);
-        if (colDef.enableSearch) {
-          this.$nextTick(() => { this.$refs.dropdownSearch && this.$refs.dropdownSearch.focus(); });
-        }
       });
     },
 
-    commitSelectValue(value) {
+    onComponentSelect({ value, label }) {
       if (!this.selectDropdown) return
       const { row, col } = this.selectDropdown;
       const colDef = this.leafCols[col];
@@ -3330,59 +4544,30 @@ var script = {
         newData[row] = { ...oldData[row], [colDef.key]: value };
         this._emitDataChange(oldData, newData);
         if (typeof colDef.onSelect === 'function') {
-          const _opt = this.filteredSelectOptions.find(o => o.value === value);
-          colDef.onSelect({ value, label: _opt ? _opt.label : String(value) }, newData[row], row, colDef);
+          colDef.onSelect({ value, label }, newData[row], row, colDef);
         }
       }
       this.closeSelectDropdown();
       this.$refs.wrapper && this.$refs.wrapper.focus();
     },
 
-    onDropdownSearch(e) {
-      if (!this.selectDropdown) return
-      this.selectDropdown.searchQuery = e.target.value;
-      this.selectDropdown.highlight = 0;
-    },
-
-    onDropdownSearchKeyDown(e) {
-      if (!this.selectDropdown) return
-      const { key } = e;
-      if (key === 'Escape') {
-        this.closeSelectDropdown();
-        this.$refs.wrapper && this.$refs.wrapper.focus();
-      } else if (key === 'ArrowDown') {
-        e.preventDefault();
-        this.selectDropdown.highlight = Math.min(
-          (this.selectDropdown.highlight || 0) + 1,
-          this.filteredSelectOptions.length - 1
-        );
-      } else if (key === 'ArrowUp') {
-        e.preventDefault();
-        this.selectDropdown.highlight = Math.max((this.selectDropdown.highlight || 0) - 1, 0);
-      } else if (key === 'Enter') {
-        e.preventDefault();
-        const h = this.selectDropdown.highlight;
-        const opts = this.filteredSelectOptions;
-        if (h >= 0 && opts[h]) this.commitSelectValue(opts[h].value);
-      }
-    },
-
     closeSelectDropdown() {
       this.selectDropdown = null;
     },
 
     _onWindowScrollForDropdown(e) {
       if (!this.selectDropdown) return
-      const dd = this.$el ? this.$el.querySelector('.eg-select-dropdown') : null;
+      const comp = this.$refs.selectDropdownComp;
+      const dd = comp && comp.$el ? comp.$el : null;
       if (dd && dd.contains(e.target)) return
       this.closeSelectDropdown();
     },
 
     _onDocMouseDownForDropdown(e) {
       if (!this.selectDropdown) return
-      const dd = this.$el ? this.$el.querySelector('.eg-select-dropdown') : null;
+      const comp = this.$refs.selectDropdownComp;
+      const dd = comp && comp.$el ? comp.$el : null;
       if (dd && dd.contains(e.target)) return
-      // Click outside dropdown — close it
       this.closeSelectDropdown();
     },
 
@@ -4328,134 +5513,6 @@ var script = {
   }
 };
 
-function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-    if (typeof shadowMode !== 'boolean') {
-        createInjectorSSR = createInjector;
-        createInjector = shadowMode;
-        shadowMode = false;
-    }
-    // Vue.extend constructor export interop.
-    const options = typeof script === 'function' ? script.options : script;
-    // render functions
-    if (template && template.render) {
-        options.render = template.render;
-        options.staticRenderFns = template.staticRenderFns;
-        options._compiled = true;
-        // functional template
-        if (isFunctionalTemplate) {
-            options.functional = true;
-        }
-    }
-    // scopedId
-    if (scopeId) {
-        options._scopeId = scopeId;
-    }
-    let hook;
-    if (moduleIdentifier) {
-        // server build
-        hook = function (context) {
-            // 2.3 injection
-            context =
-                context || // cached call
-                    (this.$vnode && this.$vnode.ssrContext) || // stateful
-                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
-            // 2.2 with runInNewContext: true
-            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-                context = __VUE_SSR_CONTEXT__;
-            }
-            // inject component styles
-            if (style) {
-                style.call(this, createInjectorSSR(context));
-            }
-            // register component module identifier for async chunk inference
-            if (context && context._registeredComponents) {
-                context._registeredComponents.add(moduleIdentifier);
-            }
-        };
-        // used by ssr in case component is cached and beforeCreate
-        // never gets called
-        options._ssrRegister = hook;
-    }
-    else if (style) {
-        hook = shadowMode
-            ? function (context) {
-                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-            }
-            : function (context) {
-                style.call(this, createInjector(context));
-            };
-    }
-    if (hook) {
-        if (options.functional) {
-            // register for functional component in vue file
-            const originalRender = options.render;
-            options.render = function renderWithStyleInjection(h, context) {
-                hook.call(context);
-                return originalRender(h, context);
-            };
-        }
-        else {
-            // inject component registration as beforeCreate hook
-            const existing = options.beforeCreate;
-            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-        }
-    }
-    return script;
-}
-
-const isOldIE = typeof navigator !== 'undefined' &&
-    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-function createInjector(context) {
-    return (id, style) => addStyle(id, style);
-}
-let HEAD;
-const styles = {};
-function addStyle(id, css) {
-    const group = isOldIE ? css.media || 'default' : id;
-    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-    if (!style.ids.has(id)) {
-        style.ids.add(id);
-        let code = css.source;
-        if (css.map) {
-            // https://developer.chrome.com/devtools/docs/javascript-debugging
-            // this makes source maps inside style tags work properly in Chrome
-            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-            // http://stackoverflow.com/a/26603875
-            code +=
-                '\n/*# sourceMappingURL=data:application/json;base64,' +
-                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                    ' */';
-        }
-        if (!style.element) {
-            style.element = document.createElement('style');
-            style.element.type = 'text/css';
-            if (css.media)
-                style.element.setAttribute('media', css.media);
-            if (HEAD === undefined) {
-                HEAD = document.head || document.getElementsByTagName('head')[0];
-            }
-            HEAD.appendChild(style.element);
-        }
-        if ('styleSheet' in style.element) {
-            style.styles.push(code);
-            style.element.styleSheet.cssText = style.styles
-                .filter(Boolean)
-                .join('\n');
-        }
-        else {
-            const index = style.ids.size - 1;
-            const textNode = document.createTextNode(code);
-            const nodes = style.element.childNodes;
-            if (nodes[index])
-                style.element.removeChild(nodes[index]);
-            if (nodes.length)
-                style.element.insertBefore(textNode, nodes[index]);
-            else
-                style.element.appendChild(textNode);
-        }
-    }
-}
-
 /* script */
 const __vue_script__ = script;
 
@@ -5341,9 +6398,42 @@ var __vue_render__ = function () {
                                                                           ci
                                                                         )
                                                                       ? [
-                                                                          _vm.hasEditSlot(
+                                                                          _vm.hasCellSlot(
                                                                             col
                                                                           )
+                                                                            ? _vm._t(
+                                                                                "cell-" +
+                                                                                  col.key,
+                                                                                null,
+                                                                                {
+                                                                                  row: _vm
+                                                                                    ._dataRaw[
+                                                                                    ri
+                                                                                  ],
+                                                                                  rowIndex:
+                                                                                    ri,
+                                                                                  column:
+                                                                                    col,
+                                                                                  value:
+                                                                                    _vm.getCellValue(
+                                                                                      ri,
+                                                                                      ci
+                                                                                    ),
+                                                                                  isEditing: true,
+                                                                                  done: function (
+                                                                                    v
+                                                                                  ) {
+                                                                                    return _vm.commitEditSlot(
+                                                                                      v
+                                                                                    )
+                                                                                  },
+                                                                                  cancel:
+                                                                                    _vm.cancelEdit,
+                                                                                }
+                                                                              )
+                                                                            : _vm.hasLegacyEditSlot(
+                                                                                col
+                                                                              )
                                                                             ? _vm._t(
                                                                                 "edit-" +
                                                                                   col.key,
@@ -5431,67 +6521,34 @@ var __vue_render__ = function () {
                                                                         "checkbox"
                                                                       ? [
                                                                           _c(
-                                                                            "label",
+                                                                            "eg-checkbox",
                                                                             {
-                                                                              staticClass:
-                                                                                "eg-checkbox",
-                                                                              class:
+                                                                              attrs:
                                                                                 {
-                                                                                  "eg-checkbox--disabled":
+                                                                                  value:
+                                                                                    _vm.isCheckboxChecked(
+                                                                                      ri,
+                                                                                      ci
+                                                                                    ),
+                                                                                  disabled:
                                                                                     !_vm.isCellEditable(
                                                                                       ri,
                                                                                       ci
                                                                                     ),
                                                                                 },
-                                                                            },
-                                                                            [
-                                                                              _c(
-                                                                                "input",
-                                                                                {
-                                                                                  staticClass:
-                                                                                    "eg-checkbox-input",
-                                                                                  attrs:
-                                                                                    {
-                                                                                      type: "checkbox",
-                                                                                      disabled:
-                                                                                        !_vm.isCellEditable(
-                                                                                          ri,
-                                                                                          ci
-                                                                                        ),
-                                                                                    },
-                                                                                  domProps:
-                                                                                    {
-                                                                                      checked:
-                                                                                        _vm.isCheckboxChecked(
-                                                                                          ri,
-                                                                                          ci
-                                                                                        ),
-                                                                                    },
-                                                                                  on: {
-                                                                                    change:
-                                                                                      function (
-                                                                                        $event
-                                                                                      ) {
-                                                                                        return _vm.onCheckboxChange(
-                                                                                          $event,
-                                                                                          ri,
-                                                                                          ci
-                                                                                        )
-                                                                                      },
-                                                                                  },
-                                                                                }
-                                                                              ),
-                                                                              _vm._v(
-                                                                                " "
-                                                                              ),
-                                                                              _c(
-                                                                                "span",
-                                                                                {
-                                                                                  staticClass:
-                                                                                    "eg-checkbox-box",
-                                                                                }
-                                                                              ),
-                                                                            ]
+                                                                              on: {
+                                                                                change:
+                                                                                  function (
+                                                                                    v
+                                                                                  ) {
+                                                                                    return _vm.setCheckboxValue(
+                                                                                      ri,
+                                                                                      ci,
+                                                                                      v
+                                                                                    )
+                                                                                  },
+                                                                              },
+                                                                            }
                                                                           ),
                                                                         ]
                                                                       : [
@@ -5536,6 +6593,10 @@ var __vue_render__ = function () {
                                                                                   ri,
                                                                                   ci
                                                                                 ),
+                                                                              isEditing: false,
+                                                                              done: null,
+                                                                              cancel:
+                                                                                null,
                                                                             }
                                                                           ),
                                                                         ],
@@ -5701,9 +6762,42 @@ var __vue_render__ = function () {
                                                                       ci
                                                                     )
                                                                   ? [
-                                                                      _vm.hasEditSlot(
+                                                                      _vm.hasCellSlot(
                                                                         col
                                                                       )
+                                                                        ? _vm._t(
+                                                                            "cell-" +
+                                                                              col.key,
+                                                                            null,
+                                                                            {
+                                                                              row: _vm
+                                                                                ._dataRaw[
+                                                                                ri
+                                                                              ],
+                                                                              rowIndex:
+                                                                                ri,
+                                                                              column:
+                                                                                col,
+                                                                              value:
+                                                                                _vm.getCellValue(
+                                                                                  ri,
+                                                                                  ci
+                                                                                ),
+                                                                              isEditing: true,
+                                                                              done: function (
+                                                                                v
+                                                                              ) {
+                                                                                return _vm.commitEditSlot(
+                                                                                  v
+                                                                                )
+                                                                              },
+                                                                              cancel:
+                                                                                _vm.cancelEdit,
+                                                                            }
+                                                                          )
+                                                                        : _vm.hasLegacyEditSlot(
+                                                                            col
+                                                                          )
                                                                         ? _vm._t(
                                                                             "edit-" +
                                                                               col.key,
@@ -5791,67 +6885,34 @@ var __vue_render__ = function () {
                                                                     "checkbox"
                                                                   ? [
                                                                       _c(
-                                                                        "label",
+                                                                        "eg-checkbox",
                                                                         {
-                                                                          staticClass:
-                                                                            "eg-checkbox",
-                                                                          class:
+                                                                          attrs:
                                                                             {
-                                                                              "eg-checkbox--disabled":
+                                                                              value:
+                                                                                _vm.isCheckboxChecked(
+                                                                                  ri,
+                                                                                  ci
+                                                                                ),
+                                                                              disabled:
                                                                                 !_vm.isCellEditable(
                                                                                   ri,
                                                                                   ci
                                                                                 ),
                                                                             },
-                                                                        },
-                                                                        [
-                                                                          _c(
-                                                                            "input",
-                                                                            {
-                                                                              staticClass:
-                                                                                "eg-checkbox-input",
-                                                                              attrs:
-                                                                                {
-                                                                                  type: "checkbox",
-                                                                                  disabled:
-                                                                                    !_vm.isCellEditable(
-                                                                                      ri,
-                                                                                      ci
-                                                                                    ),
-                                                                                },
-                                                                              domProps:
-                                                                                {
-                                                                                  checked:
-                                                                                    _vm.isCheckboxChecked(
-                                                                                      ri,
-                                                                                      ci
-                                                                                    ),
-                                                                                },
-                                                                              on: {
-                                                                                change:
-                                                                                  function (
-                                                                                    $event
-                                                                                  ) {
-                                                                                    return _vm.onCheckboxChange(
-                                                                                      $event,
-                                                                                      ri,
-                                                                                      ci
-                                                                                    )
-                                                                                  },
+                                                                          on: {
+                                                                            change:
+                                                                              function (
+                                                                                v
+                                                                              ) {
+                                                                                return _vm.setCheckboxValue(
+                                                                                  ri,
+                                                                                  ci,
+                                                                                  v
+                                                                                )
                                                                               },
-                                                                            }
-                                                                          ),
-                                                                          _vm._v(
-                                                                            " "
-                                                                          ),
-                                                                          _c(
-                                                                            "span",
-                                                                            {
-                                                                              staticClass:
-                                                                                "eg-checkbox-box",
-                                                                            }
-                                                                          ),
-                                                                        ]
+                                                                          },
+                                                                        }
                                                                       ),
                                                                     ]
                                                                   : [
@@ -5896,6 +6957,10 @@ var __vue_render__ = function () {
                                                                               ri,
                                                                               ci
                                                                             ),
+                                                                          isEditing: false,
+                                                                          done: null,
+                                                                          cancel:
+                                                                            null,
                                                                         }
                                                                       ),
                                                                     ],
@@ -6057,9 +7122,42 @@ var __vue_render__ = function () {
                                                                     col._flatIndex
                                                                   )
                                                                 ? [
-                                                                    _vm.hasEditSlot(
+                                                                    _vm.hasCellSlot(
                                                                       col
                                                                     )
+                                                                      ? _vm._t(
+                                                                          "cell-" +
+                                                                            col.key,
+                                                                          null,
+                                                                          {
+                                                                            row: _vm
+                                                                              ._dataRaw[
+                                                                              ri
+                                                                            ],
+                                                                            rowIndex:
+                                                                              ri,
+                                                                            column:
+                                                                              col,
+                                                                            value:
+                                                                              _vm.getCellValue(
+                                                                                ri,
+                                                                                col._flatIndex
+                                                                              ),
+                                                                            isEditing: true,
+                                                                            done: function (
+                                                                              v
+                                                                            ) {
+                                                                              return _vm.commitEditSlot(
+                                                                                v
+                                                                              )
+                                                                            },
+                                                                            cancel:
+                                                                              _vm.cancelEdit,
+                                                                          }
+                                                                        )
+                                                                      : _vm.hasLegacyEditSlot(
+                                                                          col
+                                                                        )
                                                                       ? _vm._t(
                                                                           "edit-" +
                                                                             col.key,
@@ -6147,66 +7245,33 @@ var __vue_render__ = function () {
                                                                   "checkbox"
                                                                 ? [
                                                                     _c(
-                                                                      "label",
+                                                                      "eg-checkbox",
                                                                       {
-                                                                        staticClass:
-                                                                          "eg-checkbox",
-                                                                        class: {
-                                                                          "eg-checkbox--disabled":
+                                                                        attrs: {
+                                                                          value:
+                                                                            _vm.isCheckboxChecked(
+                                                                              ri,
+                                                                              col._flatIndex
+                                                                            ),
+                                                                          disabled:
                                                                             !_vm.isCellEditable(
                                                                               ri,
                                                                               col._flatIndex
                                                                             ),
                                                                         },
-                                                                      },
-                                                                      [
-                                                                        _c(
-                                                                          "input",
-                                                                          {
-                                                                            staticClass:
-                                                                              "eg-checkbox-input",
-                                                                            attrs:
-                                                                              {
-                                                                                type: "checkbox",
-                                                                                disabled:
-                                                                                  !_vm.isCellEditable(
-                                                                                    ri,
-                                                                                    col._flatIndex
-                                                                                  ),
-                                                                              },
-                                                                            domProps:
-                                                                              {
-                                                                                checked:
-                                                                                  _vm.isCheckboxChecked(
-                                                                                    ri,
-                                                                                    col._flatIndex
-                                                                                  ),
-                                                                              },
-                                                                            on: {
-                                                                              change:
-                                                                                function (
-                                                                                  $event
-                                                                                ) {
-                                                                                  return _vm.onCheckboxChange(
-                                                                                    $event,
-                                                                                    ri,
-                                                                                    col._flatIndex
-                                                                                  )
-                                                                                },
+                                                                        on: {
+                                                                          change:
+                                                                            function (
+                                                                              v
+                                                                            ) {
+                                                                              return _vm.setCheckboxValue(
+                                                                                ri,
+                                                                                col._flatIndex,
+                                                                                v
+                                                                              )
                                                                             },
-                                                                          }
-                                                                        ),
-                                                                        _vm._v(
-                                                                          " "
-                                                                        ),
-                                                                        _c(
-                                                                          "span",
-                                                                          {
-                                                                            staticClass:
-                                                                              "eg-checkbox-box",
-                                                                          }
-                                                                        ),
-                                                                      ]
+                                                                        },
+                                                                      }
                                                                     ),
                                                                   ]
                                                                 : [
@@ -6251,6 +7316,10 @@ var __vue_render__ = function () {
                                                                             ri,
                                                                             col._flatIndex
                                                                           ),
+                                                                        isEditing: false,
+                                                                        done: null,
+                                                                        cancel:
+                                                                          null,
                                                                       }
                                                                     ),
                                                                   ],
@@ -6533,125 +7602,41 @@ var __vue_render__ = function () {
         ? _c("div", { staticClass: "eg-import-overlay" }, [_vm._m(0)])
         : _vm._e(),
       _vm._v(" "),
-      _vm.selectDropdown
-        ? _c(
-            "div",
-            {
-              staticClass: "eg-select-dropdown",
-              style: _vm.dropdownStyle,
-              on: {
-                mousedown: function ($event) {
-                  $event.preventDefault();
-                },
-              },
+      _vm.selectDropdown && !_vm.selectDropdown.tree
+        ? _c("eg-select", {
+            ref: "selectDropdownComp",
+            attrs: {
+              value: _vm.selectDropdown.currentValue,
+              options: _vm.selectDropdown.rawOptions,
+              "enable-search": _vm.selectDropdown.enableSearch,
+              "trigger-rect": _vm.selectDropdown.rect,
+              "dropdown-only": true,
             },
-            [
-              _vm.selectDropdown.enableSearch
-                ? _c(
-                    "div",
-                    {
-                      staticClass: "eg-select-search",
-                      on: {
-                        mousedown: function ($event) {
-                          $event.stopPropagation();
-                        },
-                      },
-                    },
-                    [
-                      _c("input", {
-                        ref: "dropdownSearch",
-                        staticClass: "eg-select-search-input",
-                        attrs: {
-                          placeholder: "Qidirish...",
-                          autocomplete: "off",
-                          autocorrect: "off",
-                          autocapitalize: "off",
-                          spellcheck: "false",
-                        },
-                        domProps: { value: _vm.selectDropdown.searchQuery },
-                        on: {
-                          input: _vm.onDropdownSearch,
-                          keydown: function ($event) {
-                            $event.stopPropagation();
-                            return _vm.onDropdownSearchKeyDown.apply(
-                              null,
-                              arguments
-                            )
-                          },
-                        },
-                      }),
-                    ]
-                  )
-                : _vm._e(),
-              _vm._v(" "),
-              _vm._l(_vm.filteredSelectOptions, function (opt, idx) {
-                return _c(
-                  "div",
-                  {
-                    key: opt.id != null ? opt.id : opt.value,
-                    staticClass: "eg-select-option",
-                    class: {
-                      "eg-select-option--active":
-                        opt.value === _vm.selectDropdown.currentValue,
-                      "eg-select-option--highlighted":
-                        idx === _vm.selectDropdown.highlight,
-                    },
-                    style:
-                      _vm.selectDropdown.tree && !_vm.selectDropdown.searchQuery
-                        ? { paddingLeft: 12 + opt.depth * 16 + "px" }
-                        : null,
-                    on: {
-                      mousedown: function ($event) {
-                        $event.preventDefault();
-                        return _vm.commitSelectValue(opt.value)
-                      },
-                      mouseover: function ($event) {
-                        _vm.selectDropdown.highlight = idx;
-                      },
-                    },
-                  },
-                  [
-                    _vm.selectDropdown.tree && !_vm.selectDropdown.searchQuery
-                      ? _c(
-                          "span",
-                          {
-                            staticClass: "eg-tree-toggle",
-                            class: { "eg-tree-toggle--leaf": !opt.hasChildren },
-                            on: {
-                              mousedown: function ($event) {
-                                $event.preventDefault();
-                                $event.stopPropagation();
-                                return _vm.toggleTreeNode(idx)
-                              },
-                            },
-                          },
-                          [
-                            _vm._v(
-                              _vm._s(
-                                opt.hasChildren
-                                  ? opt.expanded
-                                    ? "▾"
-                                    : "▸"
-                                  : ""
-                              )
-                            ),
-                          ]
-                        )
-                      : _vm._e(),
-                    _vm._v(" "),
-                    opt.color
-                      ? _c("span", {
-                          staticClass: "eg-select-dot",
-                          style: { background: opt.color },
-                        })
-                      : _vm._e(),
-                    _vm._v("\n      " + _vm._s(opt.label) + "\n    "),
-                  ]
-                )
-              }),
-            ],
-            2
-          )
+            on: {
+              select: _vm.onComponentSelect,
+              close: _vm.closeSelectDropdown,
+            },
+          })
+        : _vm._e(),
+      _vm._v(" "),
+      _vm.selectDropdown && _vm.selectDropdown.tree
+        ? _c("eg-tree-select", {
+            ref: "selectDropdownComp",
+            attrs: {
+              value: _vm.selectDropdown.currentValue,
+              options: _vm.selectDropdown.rawOptions,
+              "value-key": _vm.selectDropdown.keys.valueKey,
+              "label-key": _vm.selectDropdown.keys.labelKey,
+              "children-key": _vm.selectDropdown.keys.childrenKey,
+              "enable-search": _vm.selectDropdown.enableSearch,
+              "trigger-rect": _vm.selectDropdown.rect,
+              "dropdown-only": true,
+            },
+            on: {
+              select: _vm.onComponentSelect,
+              close: _vm.closeSelectDropdown,
+            },
+          })
         : _vm._e(),
       _vm._v(" "),
       _vm.invalidCell && _vm.invalidCell.rect
@@ -6664,7 +7649,8 @@ var __vue_render__ = function () {
             [_vm._v(_vm._s(_vm.invalidCell.message))]
           )
         : _vm._e(),
-    ]
+    ],
+    1
   )
 };
 var __vue_staticRenderFns__ = [
@@ -6686,11 +7672,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-10cb7c27_0", { source: "\n.eg-wrapper[data-v-10cb7c27] {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;\n}\n.eg-container[data-v-10cb7c27] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  position: relative;\n}\n.eg-header-area[data-v-10cb7c27] {\n  display: flex;\n  flex-shrink: 0;\n  box-shadow: 0 2px 0 0 #d0d0d0;\n  position: relative;\n  z-index: 31;\n}\n.eg-header-cell[data-v-10cb7c27] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  border-right: 1px solid #ccc;\n  border-bottom: 1px solid #ccc;\n  background: #f0f0f0;\n  font-size: 12px;\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-10cb7c27]:hover { background: #e0e0e0;\n}\n.eg-header-group[data-v-10cb7c27] { background: #e8eaf6;\n}\n.eg-col-resize-handle[data-v-10cb7c27] {\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-10cb7c27] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n/* ===== FOOTER AREA (column totals) ===== */\n.eg-footer-area[data-v-10cb7c27] {\n  border-top: 1px solid #ccc;\n}\n.eg-frozen-col-footer[data-v-10cb7c27],\n.eg-scroll-col-footer[data-v-10cb7c27],\n.eg-pinned-right-footer[data-v-10cb7c27] {\n  position: relative;\n}\n.eg-footer-cell[data-v-10cb7c27] {\n  box-sizing: border-box;\n  border-right: 1px solid #e0e0e0;\n  overflow: hidden;\n  white-space: nowrap;\n  font-size: 13px;\n  font-weight: 600;\n  padding: 0 4px;\n  position: absolute;\n  top: 0;\n  background: #f8f9fa;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.eg-row[data-v-10cb7c27] {\n  position: relative;\n}\n.eg-cell[data-v-10cb7c27] {\n  box-sizing: border-box;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  overflow: hidden;\n  white-space: nowrap;\n  font-size: 13px;\n  padding: 0 4px;\n  position: absolute;\n  top: 0;\n  background: white;\n  cursor: default;\n  display: flex;\n  align-items: center;\n}\n.eg-cell-active[data-v-10cb7c27] {\n  outline: 2px solid #1a73e8 !important;\n  outline-offset: -2px;\n  z-index: 3;\n}\n.eg-cell-selected[data-v-10cb7c27] {\n  background: #e3f2fd !important;\n}\n.eg-cell-fill-preview[data-v-10cb7c27] {\n  background: #bbdefb !important;\n  outline: 1px dashed #1565c0;\n  outline-offset: -1px;\n}\n.eg-cell-copy[data-v-10cb7c27] {\n  outline: 1px dashed #1a73e8;\n  outline-offset: -1px;\n}\n.eg-cell-merged-hidden[data-v-10cb7c27] {\n  display: none !important;\n}\n.eg-cell-invalid[data-v-10cb7c27] {\n  outline: 2px solid #e53935 !important;\n  outline-offset: -2px;\n  z-index: 4;\n}\n.eg-cell-input[data-v-10cb7c27] {\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  background: white;\n  font-size: 13px;\n  font-family: inherit;\n  padding: 0;\n}\n.eg-row-header-cell[data-v-10cb7c27] {\n  box-sizing: border-box;\n  background: #f0f0f0;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 2px solid #bbb;\n  text-align: center;\n  font-size: 11px;\n  color: #666;\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-10cb7c27] {\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-10cb7c27] {\n  position: absolute;\n  width: 6px;\n  height: 6px;\n  background: #1a73e8;\n  border: 1px solid white;\n  cursor: crosshair;\n  z-index: 10;\n}\n.eg-context-menu[data-v-10cb7c27] {\n  position: fixed;\n  background: white;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-shadow: 2px 4px 12px rgba(0,0,0,0.15);\n  z-index: 9999;\n  min-width: 160px;\n  font-size: 13px;\n  padding: 4px 0;\n}\n.eg-context-item[data-v-10cb7c27] {\n  padding: 6px 16px;\n  cursor: pointer;\n  position: relative;\n}\n.eg-context-item[data-v-10cb7c27]:hover { background: #f0f0f0;\n}\n.eg-context-separator[data-v-10cb7c27] {\n  height: 1px;\n  background: #e0e0e0;\n  margin: 4px 0;\n}\n.eg-context-submenu-parent[data-v-10cb7c27]::after { content: ' ▶'; float: right;\n}\n.eg-context-submenu[data-v-10cb7c27] {\n  display: none;\n  position: absolute;\n  left: 100%;\n  top: -4px;\n  background: white;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-shadow: 2px 4px 12px rgba(0,0,0,0.15);\n  min-width: 160px;\n  padding: 4px 0;\n  z-index: 10000;\n}\n.eg-context-submenu-parent:hover .eg-context-submenu[data-v-10cb7c27] { display: block;\n}\n.eg-group-btn[data-v-10cb7c27] {\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: #e8eaf6;\n  border: 1px solid #9fa8da;\n  border-radius: 2px;\n  z-index: 5;\n  user-select: none;\n}\n.eg-group-btn.collapsed[data-v-10cb7c27] { background: #c5cae9;\n}\n.eg-drag-ghost[data-v-10cb7c27] {\n  position: absolute;\n  border: 2px dashed #1a73e8;\n  pointer-events: none;\n  z-index: 20;\n}\n.eg-resize-line[data-v-10cb7c27] {\n  pointer-events: none;\n  z-index: 9999;\n}\n\n/* Pin left separator shadow */\n.eg-frozen-col-body[data-v-10cb7c27]::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: -4px;\n  width: 4px;\n  height: 100%;\n  background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);\n  pointer-events: none;\n}\n.eg-pinned-right-body[data-v-10cb7c27] {\n  position: sticky;\n  right: 0;\n  z-index: 10;\n  background: white;\n  flex-shrink: 0;\n}\n.eg-pinned-right-body[data-v-10cb7c27]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -4px;\n  bottom: 0;\n  width: 4px;\n  background: linear-gradient(to left, rgba(0,0,0,0.10), transparent);\n  pointer-events: none;\n}\n.eg-pinned-right-header[data-v-10cb7c27] {\n  overflow: hidden;\n  flex-shrink: 0;\n  border-left: 2px solid #bbb;\n  background: #f0f0f0;\n}\n.eg-import-overlay[data-v-10cb7c27] {\n  position: absolute;\n  inset: 0;\n  background: rgba(255, 255, 255, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  border-radius: 4px;\n}\n.eg-import-dialog[data-v-10cb7c27] {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 24px 32px;\n  min-width: 280px;\n  box-shadow: 0 4px 20px rgba(0,0,0,0.15);\n  text-align: center;\n}\n.eg-import-title[data-v-10cb7c27] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 16px;\n}\n.eg-import-bar-wrap[data-v-10cb7c27] {\n  height: 8px;\n  background: #e0e0e0;\n  border-radius: 4px;\n  overflow: hidden;\n  margin-bottom: 10px;\n}\n.eg-import-bar[data-v-10cb7c27] {\n  height: 100%;\n  background: linear-gradient(to right, #1a73e8, #4caf50);\n  border-radius: 4px;\n  transition: width 0.15s ease;\n}\n.eg-import-msg[data-v-10cb7c27] {\n  font-size: 12px;\n  color: #666;\n  margin-bottom: 4px;\n}\n.eg-import-pct[data-v-10cb7c27] {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1a73e8;\n}\n.eg-export-spinner[data-v-10cb7c27] {\n  width: 32px;\n  height: 32px;\n  margin: 12px auto 0;\n  border: 3px solid #e0e0e0;\n  border-top-color: #1a73e8;\n  border-radius: 50%;\n  animation: eg-spin-data-v-10cb7c27 0.8s linear infinite;\n}\n@keyframes eg-spin-data-v-10cb7c27 {\nto { transform: rotate(360deg);\n}\n}\n\n/* ===== READONLY CELL ===== */\n.eg-cell-readonly[data-v-10cb7c27] {\n  background: #f8f8f8;\n  cursor: default;\n}\n.eg-cell-readonly.eg-cell-selected[data-v-10cb7c27] {\n  background: #dce8f5;\n}\n.eg-cell-readonly.eg-cell-active[data-v-10cb7c27] {\n  outline-color: #aaa;\n}\n\n/* ===== SELECT DROPDOWN ===== */\n.eg-cell-select[data-v-10cb7c27] {\n  cursor: pointer;\n}\n.eg-cell-select[data-v-10cb7c27]::after {\n  content: '▾';\n  position: absolute;\n  right: 4px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #aaa;\n  font-size: 11px;\n  pointer-events: none;\n  line-height: 1;\n}\n\n/* ===== CHECKBOX CELL ===== */\n.eg-cell-checkbox[data-v-10cb7c27] {\n  justify-content: center;\n  padding: 0 2px;\n}\n.eg-checkbox[data-v-10cb7c27] {\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[data-v-10cb7c27] {\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[data-v-10cb7c27] {\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[data-v-10cb7c27] {\n  border-color: #1a73e8;\n}\n.eg-checkbox-input:checked + .eg-checkbox-box[data-v-10cb7c27] {\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[data-v-10cb7c27] {\n  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);\n}\n.eg-checkbox--disabled[data-v-10cb7c27],\n.eg-checkbox--disabled .eg-checkbox-input[data-v-10cb7c27] {\n  cursor: default;\n}\n.eg-checkbox-input:disabled + .eg-checkbox-box[data-v-10cb7c27] {\n  background-color: #f0f1f3;\n  border-color: #dadde2;\n}\n.eg-checkbox-input:disabled:checked + .eg-checkbox-box[data-v-10cb7c27] {\n  background-color: #b9c2ce;\n  border-color: #b9c2ce;\n}\n.eg-select-dropdown[data-v-10cb7c27] {\n  background: white;\n  border: 1px solid #d0d0d0;\n  border-radius: 4px;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n  overflow-y: auto;\n  max-height: 320px;\n  padding: 4px 0;\n}\n.eg-select-search[data-v-10cb7c27] {\n  padding: 6px 8px;\n  border-bottom: 1px solid #ebebeb;\n  position: sticky;\n  top: 0;\n  background: #fff;\n  z-index: 1;\n}\n.eg-select-search-input[data-v-10cb7c27] {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n  padding: 4px 8px;\n  font-size: 13px;\n  outline: none;\n  color: #333;\n  background: #fff;\n  font-family: inherit;\n}\n.eg-select-search-input[data-v-10cb7c27]:focus {\n  border-color: #1a73e8;\n  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);\n}\n.eg-select-option[data-v-10cb7c27] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 6px 12px;\n  font-size: 13px;\n  cursor: pointer;\n  white-space: normal;\n  word-break: break-word;\n  user-select: none;\n  color: #333;\n}\n.eg-select-option[data-v-10cb7c27]:hover,\n.eg-select-option--highlighted[data-v-10cb7c27] {\n  background: #f0f4ff;\n}\n.eg-select-option--active[data-v-10cb7c27] {\n  font-weight: 600;\n  color: #1a73e8;\n}\n.eg-select-option--active.eg-select-option--highlighted[data-v-10cb7c27],\n.eg-select-option--active[data-v-10cb7c27]:hover {\n  background: #e8f0fe;\n}\n.eg-validation-tooltip[data-v-10cb7c27] {\n  background: #fff0f0;\n  border: 1px solid #e53935;\n  color: #c62828;\n  font-size: 12px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  white-space: nowrap;\n  pointer-events: none;\n}\n.eg-select-dot[data-v-10cb7c27] {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: inline-block;\n}\n.eg-tree-toggle[data-v-10cb7c27] {\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: #888;\n  margin-top: 1px;\n}\n.eg-tree-toggle--leaf[data-v-10cb7c27] {\n  visibility: hidden;\n}\n\n/* ===== ROW TRANSITION ===== */\n.eg-row-enter-active[data-v-10cb7c27],\n.eg-row-leave-active[data-v-10cb7c27] {\n  transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.eg-row-enter[data-v-10cb7c27],\n.eg-row-leave-to[data-v-10cb7c27] {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n/* ===== SIZE VARIANTS ===== */\n\n/* small */\n.eg-size-small .eg-cell[data-v-10cb7c27] {\n  font-size: 12px;\n  padding: 0 3px;\n}\n.eg-size-small .eg-cell-input[data-v-10cb7c27] {\n  font-size: 12px;\n}\n.eg-size-small .eg-header-cell[data-v-10cb7c27] {\n  font-size: 11px;\n}\n.eg-size-small .eg-footer-cell[data-v-10cb7c27] {\n  font-size: 12px;\n}\n.eg-size-small .eg-row-header-cell[data-v-10cb7c27] {\n  font-size: 10px;\n}\n.eg-size-small .eg-select-option[data-v-10cb7c27] {\n  font-size: 12px;\n  padding: 4px 10px;\n}\n.eg-size-small .eg-context-menu[data-v-10cb7c27],\n.eg-size-small .eg-context-item[data-v-10cb7c27] {\n  font-size: 12px;\n}\n.eg-size-small .eg-context-item[data-v-10cb7c27] {\n  padding: 4px 14px;\n}\n\n/* large */\n.eg-size-large .eg-cell[data-v-10cb7c27] {\n  font-size: 14px;\n  padding: 0 6px;\n}\n.eg-size-large .eg-cell-input[data-v-10cb7c27] {\n  font-size: 14px;\n}\n.eg-size-large .eg-header-cell[data-v-10cb7c27] {\n  font-size: 13px;\n}\n.eg-size-large .eg-footer-cell[data-v-10cb7c27] {\n  font-size: 14px;\n}\n.eg-size-large .eg-row-header-cell[data-v-10cb7c27] {\n  font-size: 12px;\n}\n.eg-size-large .eg-select-option[data-v-10cb7c27] {\n  font-size: 14px;\n  padding: 8px 14px;\n}\n.eg-size-large .eg-context-menu[data-v-10cb7c27],\n.eg-size-large .eg-context-item[data-v-10cb7c27] {\n  font-size: 14px;\n}\n.eg-size-large .eg-context-item[data-v-10cb7c27] {\n  padding: 8px 18px;\n}\n", map: {"version":3,"sources":["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/ExcelGrid.vue"],"names":[],"mappings":";AA0gHA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EACA,sBAAA;EACA,sBAAA;EACA,kBAAA;EACA,6EAAA;AACA;AAEA;EACA,aAAA;EACA,sBAAA;EACA,OAAA;EACA,cAAA;EACA,kBAAA;AACA;AAEA;EACA,aAAA;EACA,cAAA;EACA,6BAAA;EACA,kBAAA;EACA,WAAA;AACA;AAEA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,sBAAA;EACA,4BAAA;EACA,6BAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;AACA;AAEA,yCAAA,mBAAA;AAAA;AACA,oCAAA,mBAAA;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,0BAAA;AACA;AAEA;;;EAGA,kBAAA;AACA;AAEA;EACA,sBAAA;EACA,+BAAA;EACA,gBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,kBAAA;EACA,MAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,sBAAA;EACA,+BAAA;EACA,gCAAA;EACA,gBAAA;EACA,mBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,MAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;AACA;AAEA;EACA,qCAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,8BAAA;AACA;AAEA;EACA,8BAAA;EACA,2BAAA;EACA,oBAAA;AACA;AAEA;EACA,2BAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA;AACA;AAEA;EACA,qCAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,sBAAA;EACA,mBAAA;EACA,gCAAA;EACA,4BAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;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,mBAAA;EACA,uBAAA;EACA,iBAAA;EACA,WAAA;AACA;AAEA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;EACA,kBAAA;EACA,yCAAA;EACA,aAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA,0CAAA,mBAAA;AAAA;AAEA;EACA,WAAA;EACA,mBAAA;EACA,aAAA;AACA;AAEA,qDAAA,aAAA,EAAA,YAAA;AAAA;AAEA;EACA,aAAA;EACA,kBAAA;EACA,UAAA;EACA,SAAA;EACA,iBAAA;EACA,sBAAA;EACA,kBAAA;EACA,yCAAA;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,mBAAA;EACA,yBAAA;EACA,kBAAA;EACA,UAAA;EACA,iBAAA;AACA;AAEA,2CAAA,mBAAA;AAAA;AAEA;EACA,kBAAA;EACA,0BAAA;EACA,oBAAA;EACA,WAAA;AACA;AAEA;EACA,oBAAA;EACA,aAAA;AACA;;AAEA,8BAAA;AACA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,mEAAA;EACA,oBAAA;AACA;AAEA;EACA,gBAAA;EACA,QAAA;EACA,WAAA;EACA,iBAAA;EACA,cAAA;AACA;AAEA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,UAAA;EACA,SAAA;EACA,UAAA;EACA,mEAAA;EACA,oBAAA;AACA;AAEA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,mBAAA;AACA;AAEA;EACA,kBAAA;EACA,QAAA;EACA,qCAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,kBAAA;AACA;AAEA;EACA,iBAAA;EACA,yBAAA;EACA,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,uCAAA;EACA,kBAAA;AACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,mBAAA;AACA;AAEA;EACA,WAAA;EACA,mBAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;AACA;AAEA;EACA,YAAA;EACA,uDAAA;EACA,kBAAA;EACA,4BAAA;AACA;AAEA;EACA,eAAA;EACA,WAAA;EACA,kBAAA;AACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,yBAAA;EACA,yBAAA;EACA,kBAAA;EACA,uDAAA;AACA;AACA;AACA,KAAA,yBAAA;AAAA;AACA;;AAEA,8BAAA;AACA;EACA,mBAAA;EACA,eAAA;AACA;AACA;EACA,mBAAA;AACA;AACA;EACA,mBAAA;AACA;;AAEA,gCAAA;AACA;EACA,eAAA;AACA;AACA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,2BAAA;EACA,WAAA;EACA,eAAA;EACA,oBAAA;EACA,cAAA;AACA;;AAEA,8BAAA;AACA;EACA,uBAAA;EACA,cAAA;AACA;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,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;AAEA;EACA,iBAAA;EACA,yBAAA;EACA,kBAAA;EACA,uCAAA;EACA,gBAAA;EACA,iBAAA;EACA,cAAA;AACA;AACA;EACA,gBAAA;EACA,gCAAA;EACA,gBAAA;EACA,MAAA;EACA,gBAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,sBAAA;EACA,yBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,gBAAA;EACA,oBAAA;AACA;AACA;EACA,qBAAA;EACA,2CAAA;AACA;AAEA;EACA,aAAA;EACA,uBAAA;EACA,QAAA;EACA,iBAAA;EACA,eAAA;EACA,eAAA;EACA,mBAAA;EACA,sBAAA;EACA,iBAAA;EACA,WAAA;AACA;AACA;;EAEA,mBAAA;AACA;AACA;EACA,gBAAA;EACA,cAAA;AACA;AACA;;EAEA,mBAAA;AACA;AAEA;EACA,mBAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,yCAAA;EACA,mBAAA;EACA,oBAAA;AACA;AAEA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAAA;AACA;AAEA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;EACA,WAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;AACA;;AAEA,+BAAA;AACA;;EAEA,oDAAA;AACA;AACA;;EAEA,UAAA;EACA,2BAAA;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,eAAA;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    <!-- Context menu -->\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    <!-- Scroll container -->\n    <div class=\"eg-container\" ref=\"container\" @scroll=\"onScroll\" @click=\"hideContextMenu\">\n\n      <!-- ===== HEADER AREA ===== -->\n      <div class=\"eg-header-area\" :style=\"headerAreaStyle\">\n\n        <!-- Corner cell -->\n        <div\n          class=\"eg-corner\"\n          :style=\"cornerStyle\"\n          @click=\"selectAll\"\n        ></div>\n\n        <!-- Row group outline gutter (left) -->\n        <div v-if=\"rowGroups.length\" class=\"eg-row-outline-gutter\" :style=\"rowOutlineGutterStyle\"></div>\n\n        <!-- Frozen columns header -->\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 }\"\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        <!-- Scrollable columns header -->\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 }\"\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        <!-- Pinned Right columns header -->\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 }\"\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      <!-- ===== BODY AREA ===== -->\n      <div class=\"eg-body-area\" :style=\"bodyAreaStyle\">\n\n        <!-- Row number header column -->\n        <div class=\"eg-row-header-col\" :style=\"rowHeaderColStyle\">\n          <!-- Scrollable row headers -->\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)' }\">\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        <!-- Row group outline gutter (left side of rows) -->\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        <!-- Main scroll body -->\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            <!-- Pinned left column body -->\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)' }\">\n                  <template v-for=\"ri in visibleRowRange\">\n                    <transition :key=\"'tr-fc-' + ri\" :name=\"_rowTransitionName\">\n                      <div v-if=\"!isRowHidden(ri)\" :key=\"'fc-row-' + ri\" class=\"eg-row\" :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                              :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=\"hasEditSlot(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                                <label class=\"eg-checkbox\" :class=\"{ 'eg-checkbox--disabled': !isCellEditable(ri, ci) }\">\n                                  <input\n                                    type=\"checkbox\"\n                                    class=\"eg-checkbox-input\"\n                                    :checked=\"isCheckboxChecked(ri, ci)\"\n                                    :disabled=\"!isCellEditable(ri, ci)\"\n                                    @change=\"onCheckboxChange($event, ri, ci)\"\n                                  />\n                                  <span class=\"eg-checkbox-box\"></span>\n                                </label>\n                              </template>\n                              <template v-else>\n                                <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\">\n                                  {{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}\n                                </slot>\n                              </template>\n                            </div>\n                          </template>\n                        </template>\n                      </div>\n                    </transition>\n                  </template>\n                </div>\n              </div>\n            </div>\n\n            <!-- Main data cells -->\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)' }\">\n                  <template v-for=\"ri in visibleRowRange\">\n                    <transition :key=\"'tr-m-' + ri\" :name=\"_rowTransitionName\">\n                      <div\n                        v-if=\"!isRowHidden(ri)\"\n                        :key=\"'row-' + ri\"\n                        class=\"eg-row\"\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                              :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=\"hasEditSlot(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                                <label class=\"eg-checkbox\" :class=\"{ 'eg-checkbox--disabled': !isCellEditable(ri, ci) }\">\n                                  <input\n                                    type=\"checkbox\"\n                                    class=\"eg-checkbox-input\"\n                                    :checked=\"isCheckboxChecked(ri, ci)\"\n                                    :disabled=\"!isCellEditable(ri, ci)\"\n                                    @change=\"onCheckboxChange($event, ri, ci)\"\n                                  />\n                                  <span class=\"eg-checkbox-box\"></span>\n                                </label>\n                              </template>\n                              <template v-else>\n                                <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, ci)\">\n                                  {{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}\n                                </slot>\n                              </template>\n                            </div>\n                          </template>\n                        </template>\n                      </div>\n                    </transition>\n                  </template>\n                </div>\n              </div>\n            </div>\n\n            <!-- Pinned Right column body -->\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)' }\">\n                  <template v-for=\"ri in visibleRowRange\">\n                    <transition :key=\"'tr-pr-' + ri\" :name=\"_rowTransitionName\">\n                      <div v-if=\"!isRowHidden(ri)\" :key=\"'pr-row-' + ri\" class=\"eg-row\" :style=\"getRowStyle(ri)\">\n                        <template v-for=\"col in pinnedRightCols\">\n                          <div\n                            :key=\"'pr-cell-' + ri + '-' + col._flatIndex\"\n                            class=\"eg-cell\"\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=\"hasEditSlot(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                              <label class=\"eg-checkbox\" :class=\"{ 'eg-checkbox--disabled': !isCellEditable(ri, col._flatIndex) }\">\n                                <input\n                                  type=\"checkbox\"\n                                  class=\"eg-checkbox-input\"\n                                  :checked=\"isCheckboxChecked(ri, col._flatIndex)\"\n                                  :disabled=\"!isCellEditable(ri, col._flatIndex)\"\n                                  @change=\"onCheckboxChange($event, ri, col._flatIndex)\"\n                                />\n                                <span class=\"eg-checkbox-box\"></span>\n                              </label>\n                            </template>\n                            <template v-else>\n                              <slot :name=\"'cell-' + col.key\" :row=\"_dataRaw[ri]\" :rowIndex=\"ri\" :column=\"col\" :value=\"getCellValue(ri, col._flatIndex)\">\n                                {{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}\n                              </slot>\n                            </template>\n                          </div>\n                        </template>\n                      </div>\n                    </transition>\n                  </template>\n                </div>\n              </div>\n            </div>\n\n            <!-- Fill handle (shown on primary range) -->\n            <div\n              v-if=\"fillHandleVisible\"\n              class=\"eg-fill-handle\"\n              :style=\"fillHandleStyle\"\n              @mousedown.stop=\"startFillDrag\"\n            ></div>\n\n            <!-- Drag move ghost border -->\n            <div\n              v-if=\"dragMove.active\"\n              class=\"eg-drag-ghost\"\n              :style=\"dragGhostStyle\"\n            ></div>\n          </div>\n        </div>\n\n        <!-- Column group outline row (top, above body) -->\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><!-- end body-area -->\n\n      <!-- ===== FOOTER AREA (column totals) ===== -->\n      <div v-if=\"hasFooter\" class=\"eg-footer-area\" :style=\"footerAreaStyle\">\n\n        <!-- \"Jami\" label cell (mirrors corner cell) -->\n        <div class=\"eg-footer-label\" :style=\"footerLabelStyle\">{{ t.total }}</div>\n\n        <!-- Frozen columns footer -->\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        <!-- Scrollable footer (horizontally synced with body via scrollFooter ref) -->\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        <!-- Pinned Right columns footer -->\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><!-- end footer-area -->\n\n      <!-- Resize indicator line -->\n      <div v-if=\"resizing.active\" class=\"eg-resize-line\" :style=\"resizeLineStyle\"></div>\n    </div><!-- end container -->\n\n    <!-- Import progress overlay -->\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    <!-- Export progress overlay -->\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    <!-- Select dropdown overlay -->\n    <div\n      v-if=\"selectDropdown\"\n      class=\"eg-select-dropdown\"\n      :style=\"dropdownStyle\"\n      @mousedown.prevent\n    >\n      <div v-if=\"selectDropdown.enableSearch\" class=\"eg-select-search\" @mousedown.stop>\n        <input\n          ref=\"dropdownSearch\"\n          class=\"eg-select-search-input\"\n          :value=\"selectDropdown.searchQuery\"\n          placeholder=\"Qidirish...\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          autocapitalize=\"off\"\n          spellcheck=\"false\"\n          @input=\"onDropdownSearch\"\n          @keydown.stop=\"onDropdownSearchKeyDown\"\n        />\n      </div>\n      <div\n        v-for=\"(opt, idx) in filteredSelectOptions\"\n        :key=\"opt.id != null ? opt.id : opt.value\"\n        class=\"eg-select-option\"\n        :class=\"{\n          'eg-select-option--active': opt.value === selectDropdown.currentValue,\n          'eg-select-option--highlighted': idx === selectDropdown.highlight\n        }\"\n        :style=\"selectDropdown.tree && !selectDropdown.searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null\"\n        @mousedown.prevent=\"commitSelectValue(opt.value)\"\n        @mouseover=\"selectDropdown.highlight = idx\"\n      >\n        <span\n          v-if=\"selectDropdown.tree && !selectDropdown.searchQuery\"\n          class=\"eg-tree-toggle\"\n          :class=\"{ 'eg-tree-toggle--leaf': !opt.hasChildren }\"\n          @mousedown.prevent.stop=\"toggleTreeNode(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\n    <!-- Validation error tooltip (cellValidator) -->\n    <div\n      v-if=\"invalidCell && invalidCell.rect\"\n      class=\"eg-validation-tooltip\"\n      :style=\"invalidTooltipStyle\"\n    >{{ invalidCell.message }}</div>\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 } 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'\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  // 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    /** Enable CSS list transitions on row enter/leave (data changes). Disabled during scroll. */\n    transitionEnabled: { type: Boolean, default: false },\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  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      // Resize state\n      _isScrolling: 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  },\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    _rowTransitionName() {\n      return this.transitionEnabled && !this._isScrolling ? 'eg-row' : ''\n    },\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: '#1a73e8',\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    filteredSelectOptions() {\n      if (!this.selectDropdown) return []\n      const { options, searchQuery, enableSearch, tree, allFlatOptions } = this.selectDropdown\n      if (!enableSearch || !searchQuery || !searchQuery.trim()) return options\n      const q = searchQuery.trim().toLowerCase()\n      const pool = tree && allFlatOptions ? allFlatOptions : options\n      return pool.filter(o => String(o.label || '').toLowerCase().includes(q))\n    },\n\n    dropdownStyle() {\n      if (!this.selectDropdown) return {}\n      const { rect } = this.selectDropdown\n      const optionH = this._rowH + 4\n      const searchH = this.selectDropdown.enableSearch ? 42 : 0\n      const approxHeight = Math.min(this.filteredSelectOptions.length * optionH + 8 + searchH, 320)\n      const spaceBelow = window.innerHeight - rect.bottom\n      const top = spaceBelow >= approxHeight ? rect.bottom : rect.top - approxHeight\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    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: '#f8f9fa'\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: '#f0f0f0',\n        borderRight: '1px solid #ccc',\n        borderBottom: '1px solid #ccc',\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: '#f0f0f0'\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: '#fafafa'\n      }\n    },\n\n    scrollBodyStyle() {\n      return {\n        flex: 1,\n        overflow: 'auto',\n        position: 'relative'\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 #ccc'\n      }\n    },\n\n    scrollRowHeadersStyle() {\n      return { flex: 1, overflow: 'hidden', position: 'relative' }\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: '#f8f9fa',\n        boxShadow: '0 -2px 0 0 #d0d0d0'\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: '#f0f0f0',\n        borderRight: '1px solid #ccc',\n        borderTop: '1px solid #ccc',\n        boxSizing: 'border-box',\n        flexShrink: 0,\n        fontSize: '12px',\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 #ccc'\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: '#1a73e8',\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: '#1a73e8',\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  },\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    clearTimeout(this._scrollEndTimer)\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      const result = findVisibleRange(\n        this.scrollTop, Math.max(containerH, 100), this.totalRows, this.cumulativeHeights\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      // Suppress row transitions during scroll to avoid animation on every virtual-scroll paint\n      if (this.transitionEnabled) {\n        this._isScrolling = true\n        clearTimeout(this._scrollEndTimer)\n        this._scrollEndTimer = setTimeout(() => { this._isScrolling = false }, 150)\n      }\n\n      // Throttle reactive state updates + virtual scroll recalc to one rAF per frame\n      if (!this._scrollRAF) {\n        this._scrollRAF = requestAnimationFrame(() => {\n          this._scrollRAF = null\n          this.scrollTop = target.scrollTop\n          this.scrollLeft = target.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        position: 'absolute',\n        top: (this._headerRowH * rowIndex) + 'px',\n        left: left + 'px',\n        width: width + 'px',\n        height: (this._headerRowH * cell.rowspan) + 'px',\n        display: 'flex', alignItems: 'center', justifyContent: 'center',\n        boxSizing: 'border-box',\n        borderRight: '1px solid #ccc', borderBottom: '1px solid #ccc',\n        background: '#f0f0f0', fontSize: '12px', fontWeight: 600,\n        overflow: 'hidden', whiteSpace: 'nowrap', userSelect: 'none', cursor: 'pointer'\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      }\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        position: 'absolute',\n        top: (this._headerRowH * rowIndex) + 'px',\n        left: left + 'px',\n        width: width + 'px',\n        height: (this._headerRowH * cell.rowspan) + 'px',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        boxSizing: 'border-box',\n        borderRight: '1px solid #ccc',\n        borderBottom: '1px solid #ccc',\n        background: '#f0f0f0',\n        fontSize: '12px',\n        fontWeight: 600,\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        userSelect: 'none',\n        cursor: 'pointer'\n      }\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: '#e8eaf6',\n        border: '1px solid #9fa8da',\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: '#e8eaf6',\n        border: '1px solid #9fa8da',\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.hasEditSlot(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.hasEditSlot(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.hasEditSlot(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      if (cell.isGroup) return\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      // Handle open select dropdown keyboard navigation\n      if (this.selectDropdown) {\n        const key = e.key\n        if (key === 'Escape') {\n          e.preventDefault()\n          this.closeSelectDropdown()\n          return\n        }\n        if (key === 'Enter' || key === ' ') {\n          e.preventDefault()\n          const h = this.selectDropdown.highlight\n          if (h >= 0 && this.selectDropdown.options[h]) {\n            this.commitSelectValue(this.selectDropdown.options[h].value)\n          } else {\n            this.closeSelectDropdown()\n          }\n          return\n        }\n        if (key === 'ArrowDown') {\n          e.preventDefault()\n          this.selectDropdown.highlight = Math.min(this.selectDropdown.highlight + 1, this.selectDropdown.options.length - 1)\n          return\n        }\n        if (key === 'ArrowUp') {\n          e.preventDefault()\n          this.selectDropdown.highlight = Math.max(this.selectDropdown.highlight - 1, 0)\n          return\n        }\n        if (this.selectDropdown.tree && !this.selectDropdown.searchQuery && (key === 'ArrowRight' || key === 'ArrowLeft')) {\n          e.preventDefault()\n          const opt = this.selectDropdown.options[this.selectDropdown.highlight]\n          if (opt && opt.hasChildren) {\n            if (key === 'ArrowRight' && !opt.expanded) this.toggleTreeNode(this.selectDropdown.highlight)\n            if (key === 'ArrowLeft' && opt.expanded) this.toggleTreeNode(this.selectDropdown.highlight)\n          }\n          return\n        }\n        return // block other keys while dropdown open\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.hasEditSlot(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.hasEditSlot(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      // Handled by focused wrapper\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.hasEditSlot(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    hasEditSlot(col) {\n      return !!(col && col.key && this.$scopedSlots && this.$scopedSlots['edit-' + col.key])\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    onCheckboxChange(e, ri, ci) {\n      this.setCheckboxValue(ri, ci, e.target.checked)\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    // Flattens a tree of option nodes into a visible list, respecting which\n    // node ids are currently expanded. Each returned entry carries enough\n    // info (depth/hasChildren/expanded/id) to render indentation + a toggle.\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({\n          value: node[keys.valueKey],\n          label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]),\n          color: node.color,\n          id, depth, hasChildren, expanded\n        })\n        if (expanded) {\n          out = out.concat(this._treeFlatten(children, keys, expandedMap, depth + 1, path))\n        }\n      })\n      return out\n    },\n\n    _treeFlattenAll(nodes, keys, depth, result) {\n      ;(nodes || []).forEach(node => {\n        const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []\n        result.push({\n          value: node[keys.valueKey],\n          label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]),\n          color: node.color,\n          id: String(node[keys.valueKey]),\n          depth: 0, hasChildren: false, expanded: false\n        })\n        if (children.length) this._treeFlattenAll(children, keys, depth + 1, result)\n      })\n      return result\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    // Returns the chain of ancestor node ids leading to `value` (inclusive),\n    // so callers can pre-expand exactly that branch when opening the dropdown.\n    _treeFindPath(nodes, keys, value, pathArr) {\n      for (let idx = 0; idx < (nodes || []).length; idx++) {\n        const node = nodes[idx]\n        const path = pathArr.concat(idx)\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    colOptions(ci) {\n      const col = this.leafCols[ci]\n      if (!col || !Array.isArray(col.options)) return []\n      if (col.type === 'treeSelect') {\n        return this._treeFlatten(col.options, this.treeOptionKeys(col), {}, 0, [])\n      }\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      const enableSearch = !!col.enableSearch\n      if (col.type === 'treeSelect') {\n        const keys = this.treeOptionKeys(col)\n        const path = (Array.isArray(col.options) && this._treeFindPath(col.options, keys, currentValue, [])) || []\n        const expandedMap = {}\n        path.forEach(id => { expandedMap[id] = true })\n        const flat = this._treeFlatten(col.options, keys, expandedMap, 0, [])\n        return {\n          row: ri, col: ci, tree: true, keys, expandedMap,\n          options: flat,\n          allFlatOptions: enableSearch ? this._treeFlattenAll(col.options || [], keys, 0, []) : null,\n          currentValue,\n          highlight: flat.findIndex(o => String(o.value) === currentValue),\n          rect: rectObj,\n          enableSearch,\n          searchQuery: ''\n        }\n      }\n      const opts = this.colOptions(ci)\n      return {\n        row: ri, col: ci, tree: false,\n        options: opts,\n        allFlatOptions: null,\n        currentValue,\n        highlight: opts.findIndex(o => String(o.value) === currentValue),\n        rect: rectObj,\n        enableSearch,\n        searchQuery: ''\n      }\n    },\n\n    toggleTreeNode(idx) {\n      if (!this.selectDropdown || !this.selectDropdown.tree) return\n      const opt = this.selectDropdown.options[idx]\n      if (!opt || !opt.hasChildren) return\n      const { row, col, expandedMap, keys } = this.selectDropdown\n      const colDef = this.leafCols[col]\n      if (!colDef) return\n      const nextExpandedMap = { ...expandedMap }\n      if (nextExpandedMap[opt.id]) delete nextExpandedMap[opt.id]\n      else nextExpandedMap[opt.id] = true\n      const flat = this._treeFlatten(colDef.options, keys, nextExpandedMap, 0, [])\n      const newHighlight = flat.findIndex(o => o.id === opt.id)\n      this.selectDropdown = {\n        ...this.selectDropdown,\n        row, col,\n        expandedMap: nextExpandedMap,\n        options: flat,\n        highlight: newHighlight >= 0 ? newHighlight : this.selectDropdown.highlight\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      if (col.enableSearch) {\n        this.$nextTick(() => { this.$refs.dropdownSearch && this.$refs.dropdownSearch.focus() })\n      }\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        if (colDef.enableSearch) {\n          this.$nextTick(() => { this.$refs.dropdownSearch && this.$refs.dropdownSearch.focus() })\n        }\n      })\n    },\n\n    commitSelectValue(value) {\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          const _opt = this.filteredSelectOptions.find(o => o.value === value)\n          colDef.onSelect({ value, label: _opt ? _opt.label : String(value) }, newData[row], row, colDef)\n        }\n      }\n      this.closeSelectDropdown()\n      this.$refs.wrapper && this.$refs.wrapper.focus()\n    },\n\n    onDropdownSearch(e) {\n      if (!this.selectDropdown) return\n      this.selectDropdown.searchQuery = e.target.value\n      this.selectDropdown.highlight = 0\n    },\n\n    onDropdownSearchKeyDown(e) {\n      if (!this.selectDropdown) return\n      const { key } = e\n      if (key === 'Escape') {\n        this.closeSelectDropdown()\n        this.$refs.wrapper && this.$refs.wrapper.focus()\n      } else if (key === 'ArrowDown') {\n        e.preventDefault()\n        this.selectDropdown.highlight = Math.min(\n          (this.selectDropdown.highlight || 0) + 1,\n          this.filteredSelectOptions.length - 1\n        )\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.selectDropdown.highlight = Math.max((this.selectDropdown.highlight || 0) - 1, 0)\n      } else if (key === 'Enter') {\n        e.preventDefault()\n        const h = this.selectDropdown.highlight\n        const opts = this.filteredSelectOptions\n        if (h >= 0 && opts[h]) this.commitSelectValue(opts[h].value)\n      }\n    },\n\n    closeSelectDropdown() {\n      this.selectDropdown = null\n    },\n\n    _onWindowScrollForDropdown(e) {\n      if (!this.selectDropdown) return\n      const dd = this.$el ? this.$el.querySelector('.eg-select-dropdown') : null\n      if (dd && dd.contains(e.target)) return\n      this.closeSelectDropdown()\n    },\n\n    _onDocMouseDownForDropdown(e) {\n      if (!this.selectDropdown) return\n      const dd = this.$el ? this.$el.querySelector('.eg-select-dropdown') : null\n      if (dd && dd.contains(e.target)) return\n      // Click outside dropdown — close it\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      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.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    // 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  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;\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 #d0d0d0;\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 #ccc;\n  border-bottom: 1px solid #ccc;\n  background: #f0f0f0;\n  font-size: 12px;\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: #e0e0e0; }\n.eg-header-group { background: #e8eaf6; }\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 #ccc;\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 #e0e0e0;\n  overflow: hidden;\n  white-space: nowrap;\n  font-size: 13px;\n  font-weight: 600;\n  padding: 0 4px;\n  position: absolute;\n  top: 0;\n  background: #f8f9fa;\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 #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  overflow: hidden;\n  white-space: nowrap;\n  font-size: 13px;\n  padding: 0 4px;\n  position: absolute;\n  top: 0;\n  background: white;\n  cursor: default;\n  display: flex;\n  align-items: center;\n}\n\n.eg-cell-active {\n  outline: 2px solid #1a73e8 !important;\n  outline-offset: -2px;\n  z-index: 3;\n}\n\n.eg-cell-selected {\n  background: #e3f2fd !important;\n}\n\n.eg-cell-fill-preview {\n  background: #bbdefb !important;\n  outline: 1px dashed #1565c0;\n  outline-offset: -1px;\n}\n\n.eg-cell-copy {\n  outline: 1px dashed #1a73e8;\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 #e53935 !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: white;\n  font-size: 13px;\n  font-family: inherit;\n  padding: 0;\n}\n\n.eg-row-header-cell {\n  box-sizing: border-box;\n  background: #f0f0f0;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 2px solid #bbb;\n  text-align: center;\n  font-size: 11px;\n  color: #666;\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: #1a73e8;\n  border: 1px solid white;\n  cursor: crosshair;\n  z-index: 10;\n}\n\n.eg-context-menu {\n  position: fixed;\n  background: white;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-shadow: 2px 4px 12px rgba(0,0,0,0.15);\n  z-index: 9999;\n  min-width: 160px;\n  font-size: 13px;\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: #f0f0f0; }\n\n.eg-context-separator {\n  height: 1px;\n  background: #e0e0e0;\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: white;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-shadow: 2px 4px 12px rgba(0,0,0,0.15);\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: #e8eaf6;\n  border: 1px solid #9fa8da;\n  border-radius: 2px;\n  z-index: 5;\n  user-select: none;\n}\n\n.eg-group-btn.collapsed { background: #c5cae9; }\n\n.eg-drag-ghost {\n  position: absolute;\n  border: 2px dashed #1a73e8;\n  pointer-events: none;\n  z-index: 20;\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, rgba(0,0,0,0.1), transparent);\n  pointer-events: none;\n}\n\n.eg-pinned-right-body {\n  position: sticky;\n  right: 0;\n  z-index: 10;\n  background: white;\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, rgba(0,0,0,0.10), transparent);\n  pointer-events: none;\n}\n\n.eg-pinned-right-header {\n  overflow: hidden;\n  flex-shrink: 0;\n  border-left: 2px solid #bbb;\n  background: #f0f0f0;\n}\n\n.eg-import-overlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(255, 255, 255, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  border-radius: 4px;\n}\n\n.eg-import-dialog {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 24px 32px;\n  min-width: 280px;\n  box-shadow: 0 4px 20px rgba(0,0,0,0.15);\n  text-align: center;\n}\n\n.eg-import-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 16px;\n}\n\n.eg-import-bar-wrap {\n  height: 8px;\n  background: #e0e0e0;\n  border-radius: 4px;\n  overflow: hidden;\n  margin-bottom: 10px;\n}\n\n.eg-import-bar {\n  height: 100%;\n  background: linear-gradient(to right, #1a73e8, #4caf50);\n  border-radius: 4px;\n  transition: width 0.15s ease;\n}\n\n.eg-import-msg {\n  font-size: 12px;\n  color: #666;\n  margin-bottom: 4px;\n}\n\n.eg-import-pct {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1a73e8;\n}\n.eg-export-spinner {\n  width: 32px;\n  height: 32px;\n  margin: 12px auto 0;\n  border: 3px solid #e0e0e0;\n  border-top-color: #1a73e8;\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: #f8f8f8;\n  cursor: default;\n}\n.eg-cell-readonly.eg-cell-selected {\n  background: #dce8f5;\n}\n.eg-cell-readonly.eg-cell-active {\n  outline-color: #aaa;\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: #aaa;\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-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\n.eg-select-dropdown {\n  background: white;\n  border: 1px solid #d0d0d0;\n  border-radius: 4px;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n  overflow-y: auto;\n  max-height: 320px;\n  padding: 4px 0;\n}\n.eg-select-search {\n  padding: 6px 8px;\n  border-bottom: 1px solid #ebebeb;\n  position: sticky;\n  top: 0;\n  background: #fff;\n  z-index: 1;\n}\n.eg-select-search-input {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n  padding: 4px 8px;\n  font-size: 13px;\n  outline: none;\n  color: #333;\n  background: #fff;\n  font-family: inherit;\n}\n.eg-select-search-input:focus {\n  border-color: #1a73e8;\n  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);\n}\n\n.eg-select-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 6px 12px;\n  font-size: 13px;\n  cursor: pointer;\n  white-space: normal;\n  word-break: break-word;\n  user-select: none;\n  color: #333;\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n  background: #f0f4ff;\n}\n.eg-select-option--active {\n  font-weight: 600;\n  color: #1a73e8;\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n  background: #e8f0fe;\n}\n\n.eg-validation-tooltip {\n  background: #fff0f0;\n  border: 1px solid #e53935;\n  color: #c62828;\n  font-size: 12px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.eg-select-dot {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: inline-block;\n}\n\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: #888;\n  margin-top: 1px;\n}\n.eg-tree-toggle--leaf {\n  visibility: hidden;\n}\n\n/* ===== ROW TRANSITION ===== */\n.eg-row-enter-active,\n.eg-row-leave-active {\n  transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.eg-row-enter,\n.eg-row-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\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: 13px;\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"]}, media: undefined });
+    inject("data-v-5b531cb4_0", { source: "\n.eg-wrapper[data-v-5b531cb4] {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;\n}\n.eg-container[data-v-5b531cb4] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  position: relative;\n}\n.eg-header-area[data-v-5b531cb4] {\n  display: flex;\n  flex-shrink: 0;\n  box-shadow: 0 2px 0 0 #d0d0d0;\n  position: relative;\n  z-index: 31;\n}\n.eg-header-cell[data-v-5b531cb4] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  border-right: 1px solid #ccc;\n  border-bottom: 1px solid #ccc;\n  background: #f0f0f0;\n  font-size: 12px;\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-5b531cb4]:hover { background: #e0e0e0;\n}\n.eg-header-group[data-v-5b531cb4] { background: #e8eaf6;\n}\n.eg-col-resize-handle[data-v-5b531cb4] {\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-5b531cb4] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n/* ===== FOOTER AREA (column totals) ===== */\n.eg-footer-area[data-v-5b531cb4] {\n  border-top: 1px solid #ccc;\n}\n.eg-frozen-col-footer[data-v-5b531cb4],\n.eg-scroll-col-footer[data-v-5b531cb4],\n.eg-pinned-right-footer[data-v-5b531cb4] {\n  position: relative;\n}\n.eg-footer-cell[data-v-5b531cb4] {\n  box-sizing: border-box;\n  border-right: 1px solid #e0e0e0;\n  overflow: hidden;\n  white-space: nowrap;\n  font-size: 13px;\n  font-weight: 600;\n  padding: 0 4px;\n  position: absolute;\n  top: 0;\n  background: #f8f9fa;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.eg-row[data-v-5b531cb4] {\n  position: relative;\n}\n.eg-cell[data-v-5b531cb4] {\n  box-sizing: border-box;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  overflow: hidden;\n  white-space: nowrap;\n  font-size: 13px;\n  padding: 0 4px;\n  position: absolute;\n  top: 0;\n  background: white;\n  cursor: default;\n  display: flex;\n  align-items: center;\n}\n.eg-cell-active[data-v-5b531cb4] {\n  outline: 2px solid #1a73e8 !important;\n  outline-offset: -2px;\n  z-index: 3;\n}\n.eg-cell-selected[data-v-5b531cb4] {\n  background: #e3f2fd !important;\n}\n.eg-cell-fill-preview[data-v-5b531cb4] {\n  background: #bbdefb !important;\n  outline: 1px dashed #1565c0;\n  outline-offset: -1px;\n}\n.eg-cell-copy[data-v-5b531cb4] {\n  outline: 1px dashed #1a73e8;\n  outline-offset: -1px;\n}\n.eg-cell-merged-hidden[data-v-5b531cb4] {\n  display: none !important;\n}\n.eg-cell-invalid[data-v-5b531cb4] {\n  outline: 2px solid #e53935 !important;\n  outline-offset: -2px;\n  z-index: 4;\n}\n.eg-cell-input[data-v-5b531cb4] {\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  background: white;\n  font-size: 13px;\n  font-family: inherit;\n  padding: 0;\n}\n.eg-row-header-cell[data-v-5b531cb4] {\n  box-sizing: border-box;\n  background: #f0f0f0;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 2px solid #bbb;\n  text-align: center;\n  font-size: 11px;\n  color: #666;\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-5b531cb4] {\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-5b531cb4] {\n  position: absolute;\n  width: 6px;\n  height: 6px;\n  background: #1a73e8;\n  border: 1px solid white;\n  cursor: crosshair;\n  z-index: 10;\n}\n.eg-context-menu[data-v-5b531cb4] {\n  position: fixed;\n  background: white;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-shadow: 2px 4px 12px rgba(0,0,0,0.15);\n  z-index: 9999;\n  min-width: 160px;\n  font-size: 13px;\n  padding: 4px 0;\n}\n.eg-context-item[data-v-5b531cb4] {\n  padding: 6px 16px;\n  cursor: pointer;\n  position: relative;\n}\n.eg-context-item[data-v-5b531cb4]:hover { background: #f0f0f0;\n}\n.eg-context-separator[data-v-5b531cb4] {\n  height: 1px;\n  background: #e0e0e0;\n  margin: 4px 0;\n}\n.eg-context-submenu-parent[data-v-5b531cb4]::after { content: ' ▶'; float: right;\n}\n.eg-context-submenu[data-v-5b531cb4] {\n  display: none;\n  position: absolute;\n  left: 100%;\n  top: -4px;\n  background: white;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-shadow: 2px 4px 12px rgba(0,0,0,0.15);\n  min-width: 160px;\n  padding: 4px 0;\n  z-index: 10000;\n}\n.eg-context-submenu-parent:hover .eg-context-submenu[data-v-5b531cb4] { display: block;\n}\n.eg-group-btn[data-v-5b531cb4] {\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: #e8eaf6;\n  border: 1px solid #9fa8da;\n  border-radius: 2px;\n  z-index: 5;\n  user-select: none;\n}\n.eg-group-btn.collapsed[data-v-5b531cb4] { background: #c5cae9;\n}\n.eg-drag-ghost[data-v-5b531cb4] {\n  position: absolute;\n  border: 2px dashed #1a73e8;\n  pointer-events: none;\n  z-index: 20;\n}\n.eg-resize-line[data-v-5b531cb4] {\n  pointer-events: none;\n  z-index: 9999;\n}\n\n/* Pin left separator shadow */\n.eg-frozen-col-body[data-v-5b531cb4]::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: -4px;\n  width: 4px;\n  height: 100%;\n  background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);\n  pointer-events: none;\n}\n.eg-pinned-right-body[data-v-5b531cb4] {\n  position: sticky;\n  right: 0;\n  z-index: 10;\n  background: white;\n  flex-shrink: 0;\n}\n.eg-pinned-right-body[data-v-5b531cb4]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -4px;\n  bottom: 0;\n  width: 4px;\n  background: linear-gradient(to left, rgba(0,0,0,0.10), transparent);\n  pointer-events: none;\n}\n.eg-pinned-right-header[data-v-5b531cb4] {\n  overflow: hidden;\n  flex-shrink: 0;\n  border-left: 2px solid #bbb;\n  background: #f0f0f0;\n}\n.eg-import-overlay[data-v-5b531cb4] {\n  position: absolute;\n  inset: 0;\n  background: rgba(255, 255, 255, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  border-radius: 4px;\n}\n.eg-import-dialog[data-v-5b531cb4] {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 24px 32px;\n  min-width: 280px;\n  box-shadow: 0 4px 20px rgba(0,0,0,0.15);\n  text-align: center;\n}\n.eg-import-title[data-v-5b531cb4] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 16px;\n}\n.eg-import-bar-wrap[data-v-5b531cb4] {\n  height: 8px;\n  background: #e0e0e0;\n  border-radius: 4px;\n  overflow: hidden;\n  margin-bottom: 10px;\n}\n.eg-import-bar[data-v-5b531cb4] {\n  height: 100%;\n  background: linear-gradient(to right, #1a73e8, #4caf50);\n  border-radius: 4px;\n  transition: width 0.15s ease;\n}\n.eg-import-msg[data-v-5b531cb4] {\n  font-size: 12px;\n  color: #666;\n  margin-bottom: 4px;\n}\n.eg-import-pct[data-v-5b531cb4] {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1a73e8;\n}\n.eg-export-spinner[data-v-5b531cb4] {\n  width: 32px;\n  height: 32px;\n  margin: 12px auto 0;\n  border: 3px solid #e0e0e0;\n  border-top-color: #1a73e8;\n  border-radius: 50%;\n  animation: eg-spin-data-v-5b531cb4 0.8s linear infinite;\n}\n@keyframes eg-spin-data-v-5b531cb4 {\nto { transform: rotate(360deg);\n}\n}\n\n/* ===== READONLY CELL ===== */\n.eg-cell-readonly[data-v-5b531cb4] {\n  background: #f8f8f8;\n  cursor: default;\n}\n.eg-cell-readonly.eg-cell-selected[data-v-5b531cb4] {\n  background: #dce8f5;\n}\n.eg-cell-readonly.eg-cell-active[data-v-5b531cb4] {\n  outline-color: #aaa;\n}\n\n/* ===== SELECT DROPDOWN ===== */\n.eg-cell-select[data-v-5b531cb4] {\n  cursor: pointer;\n}\n.eg-cell-select[data-v-5b531cb4]::after {\n  content: '▾';\n  position: absolute;\n  right: 4px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #aaa;\n  font-size: 11px;\n  pointer-events: none;\n  line-height: 1;\n}\n\n/* ===== CHECKBOX CELL ===== */\n.eg-cell-checkbox[data-v-5b531cb4] {\n  justify-content: center;\n  padding: 0 2px;\n}\n.eg-validation-tooltip[data-v-5b531cb4] {\n  background: #fff0f0;\n  border: 1px solid #e53935;\n  color: #c62828;\n  font-size: 12px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n/* ===== ROW TRANSITION ===== */\n.eg-row-enter-active[data-v-5b531cb4],\n.eg-row-leave-active[data-v-5b531cb4] {\n  transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.eg-row-enter[data-v-5b531cb4],\n.eg-row-leave-to[data-v-5b531cb4] {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n/* ===== SIZE VARIANTS ===== */\n\n/* small */\n.eg-size-small .eg-cell[data-v-5b531cb4] {\n  font-size: 12px;\n  padding: 0 3px;\n}\n.eg-size-small .eg-cell-input[data-v-5b531cb4] {\n  font-size: 12px;\n}\n.eg-size-small .eg-header-cell[data-v-5b531cb4] {\n  font-size: 11px;\n}\n.eg-size-small .eg-footer-cell[data-v-5b531cb4] {\n  font-size: 12px;\n}\n.eg-size-small .eg-row-header-cell[data-v-5b531cb4] {\n  font-size: 10px;\n}\n.eg-size-small .eg-select-option[data-v-5b531cb4] {\n  font-size: 12px;\n  padding: 4px 10px;\n}\n.eg-size-small .eg-context-menu[data-v-5b531cb4],\n.eg-size-small .eg-context-item[data-v-5b531cb4] {\n  font-size: 12px;\n}\n.eg-size-small .eg-context-item[data-v-5b531cb4] {\n  padding: 4px 14px;\n}\n\n/* large */\n.eg-size-large .eg-cell[data-v-5b531cb4] {\n  font-size: 14px;\n  padding: 0 6px;\n}\n.eg-size-large .eg-cell-input[data-v-5b531cb4] {\n  font-size: 14px;\n}\n.eg-size-large .eg-header-cell[data-v-5b531cb4] {\n  font-size: 13px;\n}\n.eg-size-large .eg-footer-cell[data-v-5b531cb4] {\n  font-size: 14px;\n}\n.eg-size-large .eg-row-header-cell[data-v-5b531cb4] {\n  font-size: 12px;\n}\n.eg-size-large .eg-select-option[data-v-5b531cb4] {\n  font-size: 14px;\n  padding: 8px 14px;\n}\n.eg-size-large .eg-context-menu[data-v-5b531cb4],\n.eg-size-large .eg-context-item[data-v-5b531cb4] {\n  font-size: 14px;\n}\n.eg-size-large .eg-context-item[data-v-5b531cb4] {\n  padding: 8px 18px;\n}\n", map: {"version":3,"sources":["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/ExcelGrid.vue"],"names":[],"mappings":";AAwzGA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EACA,sBAAA;EACA,sBAAA;EACA,kBAAA;EACA,6EAAA;AACA;AAEA;EACA,aAAA;EACA,sBAAA;EACA,OAAA;EACA,cAAA;EACA,kBAAA;AACA;AAEA;EACA,aAAA;EACA,cAAA;EACA,6BAAA;EACA,kBAAA;EACA,WAAA;AACA;AAEA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,sBAAA;EACA,4BAAA;EACA,6BAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;AACA;AAEA,yCAAA,mBAAA;AAAA;AACA,oCAAA,mBAAA;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,0BAAA;AACA;AAEA;;;EAGA,kBAAA;AACA;AAEA;EACA,sBAAA;EACA,+BAAA;EACA,gBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,kBAAA;EACA,MAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,sBAAA;EACA,+BAAA;EACA,gCAAA;EACA,gBAAA;EACA,mBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,MAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;AACA;AAEA;EACA,qCAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,8BAAA;AACA;AAEA;EACA,8BAAA;EACA,2BAAA;EACA,oBAAA;AACA;AAEA;EACA,2BAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA;AACA;AAEA;EACA,qCAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,UAAA;AACA;AAEA;EACA,sBAAA;EACA,mBAAA;EACA,gCAAA;EACA,4BAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;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,mBAAA;EACA,uBAAA;EACA,iBAAA;EACA,WAAA;AACA;AAEA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;EACA,kBAAA;EACA,yCAAA;EACA,aAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA,0CAAA,mBAAA;AAAA;AAEA;EACA,WAAA;EACA,mBAAA;EACA,aAAA;AACA;AAEA,qDAAA,aAAA,EAAA,YAAA;AAAA;AAEA;EACA,aAAA;EACA,kBAAA;EACA,UAAA;EACA,SAAA;EACA,iBAAA;EACA,sBAAA;EACA,kBAAA;EACA,yCAAA;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,mBAAA;EACA,yBAAA;EACA,kBAAA;EACA,UAAA;EACA,iBAAA;AACA;AAEA,2CAAA,mBAAA;AAAA;AAEA;EACA,kBAAA;EACA,0BAAA;EACA,oBAAA;EACA,WAAA;AACA;AAEA;EACA,oBAAA;EACA,aAAA;AACA;;AAEA,8BAAA;AACA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,mEAAA;EACA,oBAAA;AACA;AAEA;EACA,gBAAA;EACA,QAAA;EACA,WAAA;EACA,iBAAA;EACA,cAAA;AACA;AAEA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,UAAA;EACA,SAAA;EACA,UAAA;EACA,mEAAA;EACA,oBAAA;AACA;AAEA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,mBAAA;AACA;AAEA;EACA,kBAAA;EACA,QAAA;EACA,qCAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,kBAAA;AACA;AAEA;EACA,iBAAA;EACA,yBAAA;EACA,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,uCAAA;EACA,kBAAA;AACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,mBAAA;AACA;AAEA;EACA,WAAA;EACA,mBAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;AACA;AAEA;EACA,YAAA;EACA,uDAAA;EACA,kBAAA;EACA,4BAAA;AACA;AAEA;EACA,eAAA;EACA,WAAA;EACA,kBAAA;AACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,yBAAA;EACA,yBAAA;EACA,kBAAA;EACA,uDAAA;AACA;AACA;AACA,KAAA,yBAAA;AAAA;AACA;;AAEA,8BAAA;AACA;EACA,mBAAA;EACA,eAAA;AACA;AACA;EACA,mBAAA;AACA;AACA;EACA,mBAAA;AACA;;AAEA,gCAAA;AACA;EACA,eAAA;AACA;AACA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,2BAAA;EACA,WAAA;EACA,eAAA;EACA,oBAAA;EACA,cAAA;AACA;;AAEA,8BAAA;AACA;EACA,uBAAA;EACA,cAAA;AACA;AACA;EACA,mBAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,yCAAA;EACA,mBAAA;EACA,oBAAA;AACA;;AAEA,+BAAA;AACA;;EAEA,oDAAA;AACA;AACA;;EAEA,UAAA;EACA,2BAAA;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,eAAA;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    <!-- Context menu -->\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    <!-- Scroll container -->\n    <div class=\"eg-container\" ref=\"container\" @scroll=\"onScroll\" @click=\"hideContextMenu\">\n\n      <!-- ===== HEADER AREA ===== -->\n      <div class=\"eg-header-area\" :style=\"headerAreaStyle\">\n\n        <!-- Corner cell -->\n        <div\n          class=\"eg-corner\"\n          :style=\"cornerStyle\"\n          @click=\"selectAll\"\n        ></div>\n\n        <!-- Row group outline gutter (left) -->\n        <div v-if=\"rowGroups.length\" class=\"eg-row-outline-gutter\" :style=\"rowOutlineGutterStyle\"></div>\n\n        <!-- Frozen columns header -->\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 }\"\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        <!-- Scrollable columns header -->\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 }\"\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        <!-- Pinned Right columns header -->\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 }\"\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      <!-- ===== BODY AREA ===== -->\n      <div class=\"eg-body-area\" :style=\"bodyAreaStyle\">\n\n        <!-- Row number header column -->\n        <div class=\"eg-row-header-col\" :style=\"rowHeaderColStyle\">\n          <!-- Scrollable row headers -->\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)' }\">\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        <!-- Row group outline gutter (left side of rows) -->\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        <!-- Main scroll body -->\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            <!-- Pinned left column body -->\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)' }\">\n                  <template v-for=\"ri in visibleRowRange\">\n                    <transition :key=\"'tr-fc-' + ri\" :name=\"_rowTransitionName\">\n                      <div v-if=\"!isRowHidden(ri)\" :key=\"'fc-row-' + ri\" class=\"eg-row\" :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                              :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                                  {{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}\n                                </slot>\n                              </template>\n                            </div>\n                          </template>\n                        </template>\n                      </div>\n                    </transition>\n                  </template>\n                </div>\n              </div>\n            </div>\n\n            <!-- Main data cells -->\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)' }\">\n                  <template v-for=\"ri in visibleRowRange\">\n                    <transition :key=\"'tr-m-' + ri\" :name=\"_rowTransitionName\">\n                      <div\n                        v-if=\"!isRowHidden(ri)\"\n                        :key=\"'row-' + ri\"\n                        class=\"eg-row\"\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                              :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                                  {{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}\n                                </slot>\n                              </template>\n                            </div>\n                          </template>\n                        </template>\n                      </div>\n                    </transition>\n                  </template>\n                </div>\n              </div>\n            </div>\n\n            <!-- Pinned Right column body -->\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)' }\">\n                  <template v-for=\"ri in visibleRowRange\">\n                    <transition :key=\"'tr-pr-' + ri\" :name=\"_rowTransitionName\">\n                      <div v-if=\"!isRowHidden(ri)\" :key=\"'pr-row-' + ri\" class=\"eg-row\" :style=\"getRowStyle(ri)\">\n                        <template v-for=\"col in pinnedRightCols\">\n                          <div\n                            :key=\"'pr-cell-' + ri + '-' + col._flatIndex\"\n                            class=\"eg-cell\"\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                                {{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}\n                              </slot>\n                            </template>\n                          </div>\n                        </template>\n                      </div>\n                    </transition>\n                  </template>\n                </div>\n              </div>\n            </div>\n\n            <!-- Fill handle (shown on primary range) -->\n            <div\n              v-if=\"fillHandleVisible\"\n              class=\"eg-fill-handle\"\n              :style=\"fillHandleStyle\"\n              @mousedown.stop=\"startFillDrag\"\n            ></div>\n\n            <!-- Drag move ghost border -->\n            <div\n              v-if=\"dragMove.active\"\n              class=\"eg-drag-ghost\"\n              :style=\"dragGhostStyle\"\n            ></div>\n          </div>\n        </div>\n\n        <!-- Column group outline row (top, above body) -->\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><!-- end body-area -->\n\n      <!-- ===== FOOTER AREA (column totals) ===== -->\n      <div v-if=\"hasFooter\" class=\"eg-footer-area\" :style=\"footerAreaStyle\">\n\n        <!-- \"Jami\" label cell (mirrors corner cell) -->\n        <div class=\"eg-footer-label\" :style=\"footerLabelStyle\">{{ t.total }}</div>\n\n        <!-- Frozen columns footer -->\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        <!-- Scrollable footer (horizontally synced with body via scrollFooter ref) -->\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        <!-- Pinned Right columns footer -->\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><!-- end footer-area -->\n\n      <!-- Resize indicator line -->\n      <div v-if=\"resizing.active\" class=\"eg-resize-line\" :style=\"resizeLineStyle\"></div>\n    </div><!-- end container -->\n\n    <!-- Import progress overlay -->\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    <!-- Export progress overlay -->\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    <!-- Select dropdown overlay (flat select) -->\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    <!-- Tree select dropdown overlay -->\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    <!-- Validation error tooltip (cellValidator) -->\n    <div\n      v-if=\"invalidCell && invalidCell.rect\"\n      class=\"eg-validation-tooltip\"\n      :style=\"invalidTooltipStyle\"\n    >{{ invalidCell.message }}</div>\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 } 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    /** Enable CSS list transitions on row enter/leave (data changes). Disabled during scroll. */\n    transitionEnabled: { type: Boolean, default: false },\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  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      // Resize state\n      _isScrolling: 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  },\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    _rowTransitionName() {\n      return this.transitionEnabled && !this._isScrolling ? 'eg-row' : ''\n    },\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: '#1a73e8',\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: '#f8f9fa'\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: '#f0f0f0',\n        borderRight: '1px solid #ccc',\n        borderBottom: '1px solid #ccc',\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: '#f0f0f0'\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: '#fafafa'\n      }\n    },\n\n    scrollBodyStyle() {\n      return {\n        flex: 1,\n        overflow: 'auto',\n        position: 'relative'\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 #ccc'\n      }\n    },\n\n    scrollRowHeadersStyle() {\n      return { flex: 1, overflow: 'hidden', position: 'relative' }\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: '#f8f9fa',\n        boxShadow: '0 -2px 0 0 #d0d0d0'\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: '#f0f0f0',\n        borderRight: '1px solid #ccc',\n        borderTop: '1px solid #ccc',\n        boxSizing: 'border-box',\n        flexShrink: 0,\n        fontSize: '12px',\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 #ccc'\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: '#1a73e8',\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: '#1a73e8',\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  },\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    clearTimeout(this._scrollEndTimer)\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      const result = findVisibleRange(\n        this.scrollTop, Math.max(containerH, 100), this.totalRows, this.cumulativeHeights\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      // Suppress row transitions during scroll to avoid animation on every virtual-scroll paint\n      if (this.transitionEnabled) {\n        this._isScrolling = true\n        clearTimeout(this._scrollEndTimer)\n        this._scrollEndTimer = setTimeout(() => { this._isScrolling = false }, 150)\n      }\n\n      // Throttle reactive state updates + virtual scroll recalc to one rAF per frame\n      if (!this._scrollRAF) {\n        this._scrollRAF = requestAnimationFrame(() => {\n          this._scrollRAF = null\n          this.scrollTop = target.scrollTop\n          this.scrollLeft = target.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        position: 'absolute',\n        top: (this._headerRowH * rowIndex) + 'px',\n        left: left + 'px',\n        width: width + 'px',\n        height: (this._headerRowH * cell.rowspan) + 'px',\n        display: 'flex', alignItems: 'center', justifyContent: 'center',\n        boxSizing: 'border-box',\n        borderRight: '1px solid #ccc', borderBottom: '1px solid #ccc',\n        background: '#f0f0f0', fontSize: '12px', fontWeight: 600,\n        overflow: 'hidden', whiteSpace: 'nowrap', userSelect: 'none', cursor: 'pointer'\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      }\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        position: 'absolute',\n        top: (this._headerRowH * rowIndex) + 'px',\n        left: left + 'px',\n        width: width + 'px',\n        height: (this._headerRowH * cell.rowspan) + 'px',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        boxSizing: 'border-box',\n        borderRight: '1px solid #ccc',\n        borderBottom: '1px solid #ccc',\n        background: '#f0f0f0',\n        fontSize: '12px',\n        fontWeight: 600,\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        userSelect: 'none',\n        cursor: 'pointer'\n      }\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: '#e8eaf6',\n        border: '1px solid #9fa8da',\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: '#e8eaf6',\n        border: '1px solid #9fa8da',\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      if (cell.isGroup) return\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      // Handled by focused wrapper\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    _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      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.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    // 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  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;\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 #d0d0d0;\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 #ccc;\n  border-bottom: 1px solid #ccc;\n  background: #f0f0f0;\n  font-size: 12px;\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: #e0e0e0; }\n.eg-header-group { background: #e8eaf6; }\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 #ccc;\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 #e0e0e0;\n  overflow: hidden;\n  white-space: nowrap;\n  font-size: 13px;\n  font-weight: 600;\n  padding: 0 4px;\n  position: absolute;\n  top: 0;\n  background: #f8f9fa;\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 #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  overflow: hidden;\n  white-space: nowrap;\n  font-size: 13px;\n  padding: 0 4px;\n  position: absolute;\n  top: 0;\n  background: white;\n  cursor: default;\n  display: flex;\n  align-items: center;\n}\n\n.eg-cell-active {\n  outline: 2px solid #1a73e8 !important;\n  outline-offset: -2px;\n  z-index: 3;\n}\n\n.eg-cell-selected {\n  background: #e3f2fd !important;\n}\n\n.eg-cell-fill-preview {\n  background: #bbdefb !important;\n  outline: 1px dashed #1565c0;\n  outline-offset: -1px;\n}\n\n.eg-cell-copy {\n  outline: 1px dashed #1a73e8;\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 #e53935 !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: white;\n  font-size: 13px;\n  font-family: inherit;\n  padding: 0;\n}\n\n.eg-row-header-cell {\n  box-sizing: border-box;\n  background: #f0f0f0;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 2px solid #bbb;\n  text-align: center;\n  font-size: 11px;\n  color: #666;\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: #1a73e8;\n  border: 1px solid white;\n  cursor: crosshair;\n  z-index: 10;\n}\n\n.eg-context-menu {\n  position: fixed;\n  background: white;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-shadow: 2px 4px 12px rgba(0,0,0,0.15);\n  z-index: 9999;\n  min-width: 160px;\n  font-size: 13px;\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: #f0f0f0; }\n\n.eg-context-separator {\n  height: 1px;\n  background: #e0e0e0;\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: white;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-shadow: 2px 4px 12px rgba(0,0,0,0.15);\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: #e8eaf6;\n  border: 1px solid #9fa8da;\n  border-radius: 2px;\n  z-index: 5;\n  user-select: none;\n}\n\n.eg-group-btn.collapsed { background: #c5cae9; }\n\n.eg-drag-ghost {\n  position: absolute;\n  border: 2px dashed #1a73e8;\n  pointer-events: none;\n  z-index: 20;\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, rgba(0,0,0,0.1), transparent);\n  pointer-events: none;\n}\n\n.eg-pinned-right-body {\n  position: sticky;\n  right: 0;\n  z-index: 10;\n  background: white;\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, rgba(0,0,0,0.10), transparent);\n  pointer-events: none;\n}\n\n.eg-pinned-right-header {\n  overflow: hidden;\n  flex-shrink: 0;\n  border-left: 2px solid #bbb;\n  background: #f0f0f0;\n}\n\n.eg-import-overlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(255, 255, 255, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  border-radius: 4px;\n}\n\n.eg-import-dialog {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 24px 32px;\n  min-width: 280px;\n  box-shadow: 0 4px 20px rgba(0,0,0,0.15);\n  text-align: center;\n}\n\n.eg-import-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 16px;\n}\n\n.eg-import-bar-wrap {\n  height: 8px;\n  background: #e0e0e0;\n  border-radius: 4px;\n  overflow: hidden;\n  margin-bottom: 10px;\n}\n\n.eg-import-bar {\n  height: 100%;\n  background: linear-gradient(to right, #1a73e8, #4caf50);\n  border-radius: 4px;\n  transition: width 0.15s ease;\n}\n\n.eg-import-msg {\n  font-size: 12px;\n  color: #666;\n  margin-bottom: 4px;\n}\n\n.eg-import-pct {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1a73e8;\n}\n.eg-export-spinner {\n  width: 32px;\n  height: 32px;\n  margin: 12px auto 0;\n  border: 3px solid #e0e0e0;\n  border-top-color: #1a73e8;\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: #f8f8f8;\n  cursor: default;\n}\n.eg-cell-readonly.eg-cell-selected {\n  background: #dce8f5;\n}\n.eg-cell-readonly.eg-cell-active {\n  outline-color: #aaa;\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: #aaa;\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: #fff0f0;\n  border: 1px solid #e53935;\n  color: #c62828;\n  font-size: 12px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n/* ===== ROW TRANSITION ===== */\n.eg-row-enter-active,\n.eg-row-leave-active {\n  transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.eg-row-enter,\n.eg-row-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\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: 13px;\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"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-10cb7c27";
+  const __vue_scope_id__ = "data-v-5b531cb4";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
@@ -6717,7 +7703,10 @@ __vue_render__._withStripped = true;
 var index = {
   install(Vue) {
     Vue.component('ExcelGrid', __vue_component__);
+    Vue.component('EgCheckbox', __vue_component__$3);
+    Vue.component('EgSelect', __vue_component__$2);
+    Vue.component('EgTreeSelect', __vue_component__$1);
   }
 };
 
-export { __vue_component__ as ExcelGrid, index as default };
+export { __vue_component__$3 as EgCheckbox, __vue_component__$2 as EgSelect, __vue_component__$1 as EgTreeSelect, __vue_component__ as ExcelGrid, index as default };