vue2-excel-grid 1.1.13 → 1.1.16

package/src/components/ExcelGrid.vue

@@ -220,23 +220,19 @@
                             >
                               <div v-if="isMergedAway(ri, ci)" style="display:none"></div>
                               <template v-else-if="isEditing(ri, ci)">
-                                <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" />
+                                <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" />
+                                <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" />
                                 <input v-else ref="editInput" class="eg-cell-input" v-model="editValue" @blur="commitEdit" @keydown.stop="onEditKeyDown" />
                               </template>
                               <template v-else-if="col.type === 'checkbox'">
-                                <label class="eg-checkbox" :class="{ 'eg-checkbox--disabled': !isCellEditable(ri, ci) }">
-                                  <input
-                                    type="checkbox"
-                                    class="eg-checkbox-input"
-                                    :checked="isCheckboxChecked(ri, ci)"
-                                    :disabled="!isCellEditable(ri, ci)"
-                                    @change="onCheckboxChange($event, ri, ci)"
-                                  />
-                                  <span class="eg-checkbox-box"></span>
-                                </label>
+                                <eg-checkbox
+                                  :value="isCheckboxChecked(ri, ci)"
+                                  :disabled="!isCellEditable(ri, ci)"
+                                  @change="(v) => setCheckboxValue(ri, ci, v)"
+                                />
                               </template>
                               <template v-else>
-                                <slot :name="'cell-' + col.key" :row="_dataRaw[ri]" :rowIndex="ri" :column="col" :value="getCellValue(ri, ci)">
+                                <slot :name="'cell-' + col.key" :row="_dataRaw[ri]" :rowIndex="ri" :column="col" :value="getCellValue(ri, ci)" :isEditing="false" :done="null" :cancel="null">
                                   {{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}
                                 </slot>
                               </template>
@@ -278,7 +274,8 @@
                             >
                               <div v-if="isMergedAway(ri, ci)" style="display:none"></div>
                               <template v-else-if="isEditing(ri, ci)">
-                                <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" />
+                                <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" />
+                                <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" />
                                 <input
                                   v-else
                                   ref="editInput"
@@ -289,19 +286,14 @@
                                 />
                               </template>
                               <template v-else-if="col.type === 'checkbox'">
-                                <label class="eg-checkbox" :class="{ 'eg-checkbox--disabled': !isCellEditable(ri, ci) }">
-                                  <input
-                                    type="checkbox"
-                                    class="eg-checkbox-input"
-                                    :checked="isCheckboxChecked(ri, ci)"
-                                    :disabled="!isCellEditable(ri, ci)"
-                                    @change="onCheckboxChange($event, ri, ci)"
-                                  />
-                                  <span class="eg-checkbox-box"></span>
-                                </label>
+                                <eg-checkbox
+                                  :value="isCheckboxChecked(ri, ci)"
+                                  :disabled="!isCellEditable(ri, ci)"
+                                  @change="(v) => setCheckboxValue(ri, ci, v)"
+                                />
                               </template>
                               <template v-else>
-                                <slot :name="'cell-' + col.key" :row="_dataRaw[ri]" :rowIndex="ri" :column="col" :value="getCellValue(ri, ci)">
+                                <slot :name="'cell-' + col.key" :row="_dataRaw[ri]" :rowIndex="ri" :column="col" :value="getCellValue(ri, ci)" :isEditing="false" :done="null" :cancel="null">
                                   {{ isSelectLikeCol(col) ? getSelectLabel(ci, getCellValue(ri, ci)) : getCellValue(ri, ci) }}
                                 </slot>
                               </template>
@@ -336,23 +328,19 @@
                           >
                             <div v-if="isMergedAway(ri, col._flatIndex)" style="display:none"></div>
                             <template v-else-if="isEditing(ri, col._flatIndex)">
-                              <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" />
+                              <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" />
+                              <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" />
                               <input v-else ref="editInput" class="eg-cell-input" v-model="editValue" @blur="commitEdit" @keydown.stop="onEditKeyDown" />
                             </template>
                             <template v-else-if="col.type === 'checkbox'">
-                              <label class="eg-checkbox" :class="{ 'eg-checkbox--disabled': !isCellEditable(ri, col._flatIndex) }">
-                                <input
-                                  type="checkbox"
-                                  class="eg-checkbox-input"
-                                  :checked="isCheckboxChecked(ri, col._flatIndex)"
-                                  :disabled="!isCellEditable(ri, col._flatIndex)"
-                                  @change="onCheckboxChange($event, ri, col._flatIndex)"
-                                />
-                                <span class="eg-checkbox-box"></span>
-                              </label>
+                              <eg-checkbox
+                                :value="isCheckboxChecked(ri, col._flatIndex)"
+                                :disabled="!isCellEditable(ri, col._flatIndex)"
+                                @change="(v) => setCheckboxValue(ri, col._flatIndex, v)"
+                              />
                             </template>
                             <template v-else>
-                              <slot :name="'cell-' + col.key" :row="_dataRaw[ri]" :rowIndex="ri" :column="col" :value="getCellValue(ri, col._flatIndex)">
+                              <slot :name="'cell-' + col.key" :row="_dataRaw[ri]" :rowIndex="ri" :column="col" :value="getCellValue(ri, col._flatIndex)" :isEditing="false" :done="null" :cancel="null">
                                 {{ isSelectLikeCol(col) ? getSelectLabel(col._flatIndex, getCellValue(ri, col._flatIndex)) : getCellValue(ri, col._flatIndex) }}
                               </slot>
                             </template>
@@ -466,49 +454,33 @@
       </div>
     </div>
 
-    <!-- Select dropdown overlay -->
-    <div
-      v-if="selectDropdown"
-      class="eg-select-dropdown"
-      :style="dropdownStyle"
-      @mousedown.prevent
-    >
-      <div v-if="selectDropdown.enableSearch" class="eg-select-search" @mousedown.stop>
-        <input
-          ref="dropdownSearch"
-          class="eg-select-search-input"
-          :value="selectDropdown.searchQuery"
-          placeholder="Qidirish..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-          @input="onDropdownSearch"
-          @keydown.stop="onDropdownSearchKeyDown"
-        />
-      </div>
-      <div
-        v-for="(opt, idx) in filteredSelectOptions"
-        :key="opt.id != null ? opt.id : opt.value"
-        class="eg-select-option"
-        :class="{
-          'eg-select-option--active': opt.value === selectDropdown.currentValue,
-          'eg-select-option--highlighted': idx === selectDropdown.highlight
-        }"
-        :style="selectDropdown.tree && !selectDropdown.searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null"
-        @mousedown.prevent="commitSelectValue(opt.value)"
-        @mouseover="selectDropdown.highlight = idx"
-      >
-        <span
-          v-if="selectDropdown.tree && !selectDropdown.searchQuery"
-          class="eg-tree-toggle"
-          :class="{ 'eg-tree-toggle--leaf': !opt.hasChildren }"
-          @mousedown.prevent.stop="toggleTreeNode(idx)"
-        >{{ opt.hasChildren ? (opt.expanded ? '▾' : '▸') : '' }}</span>
-        <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>
-        {{ opt.label }}
-      </div>
-    </div>
+    <!-- Select dropdown overlay (flat select) -->
+    <eg-select
+      v-if="selectDropdown && !selectDropdown.tree"
+      ref="selectDropdownComp"
+      :value="selectDropdown.currentValue"
+      :options="selectDropdown.rawOptions"
+      :enable-search="selectDropdown.enableSearch"
+      :trigger-rect="selectDropdown.rect"
+      :dropdown-only="true"
+      @select="onComponentSelect"
+      @close="closeSelectDropdown"
+    />
+    <!-- Tree select dropdown overlay -->
+    <eg-tree-select
+      v-if="selectDropdown && selectDropdown.tree"
+      ref="selectDropdownComp"
+      :value="selectDropdown.currentValue"
+      :options="selectDropdown.rawOptions"
+      :value-key="selectDropdown.keys.valueKey"
+      :label-key="selectDropdown.keys.labelKey"
+      :children-key="selectDropdown.keys.childrenKey"
+      :enable-search="selectDropdown.enableSearch"
+      :trigger-rect="selectDropdown.rect"
+      :dropdown-only="true"
+      @select="onComponentSelect"
+      @close="closeSelectDropdown"
+    />
 
     <!-- Validation error tooltip (cellValidator) -->
     <div
@@ -542,6 +514,9 @@ import { exportToExcel as _exportToExcel } from '../utils/excelExport.js'
 import { importFromFile as _importFromFile } from '../utils/excelImport.js'
 import { createExcelImportWorker, createExcelExportWorker } from '../utils/workerFactory'
 import { getMessages } from '../utils/i18n.js'
+import EgCheckbox from './EgCheckbox.vue'
+import EgSelect from './EgSelect.vue'
+import EgTreeSelect from './EgTreeSelect.vue'
 
 const SIZE_CONFIG = {
   small:  { row: 22, header: 24, footer: 24 },
@@ -555,6 +530,8 @@ const OUTLINE_GUTTER = 20
 export default {
   name: 'ExcelGrid',
 
+  components: { EgCheckbox, EgSelect, EgTreeSelect },
+
   // v-model → :data + @input
   model: { prop: 'data', event: 'input' },
 
@@ -860,32 +837,6 @@ export default {
       }
     },
 
-    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 {}
@@ -1788,7 +1739,7 @@ export default {
       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()
@@ -1817,7 +1768,7 @@ export default {
 
         // 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
@@ -1856,7 +1807,7 @@ export default {
     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
       }
@@ -1949,44 +1900,11 @@ export default {
     // 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
@@ -2034,7 +1952,7 @@ export default {
       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)
@@ -2130,7 +2048,7 @@ export default {
       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
@@ -2205,7 +2123,7 @@ export default {
       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
       }
@@ -2262,9 +2180,19 @@ export default {
       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
@@ -2315,10 +2243,6 @@ export default {
       this.setCheckboxValue(ri, ci, !this.isCheckboxChecked(ri, ci))
     },
 
-    onCheckboxChange(e, ri, ci) {
-      this.setCheckboxValue(ri, ci, e.target.checked)
-    },
-
     // =========================================================
     // CELL EDITABILITY (3.17)
     // =========================================================
@@ -2398,45 +2322,6 @@ export default {
       }
     },
 
-    // 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
-    },
-
-    _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
-    },
-
     _treeFindLabel(nodes, keys, value) {
       for (const node of (nodes || [])) {
         if (String(node[keys.valueKey]) === value) {
@@ -2448,28 +2333,9 @@ export default {
       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 }
       )
@@ -2491,55 +2357,14 @@ export default {
 
     _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: ''
-      }
-    },
-
-    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
+        enableSearch: !!col.enableSearch
       }
     },
 
@@ -2550,9 +2375,6 @@ export default {
       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() {
@@ -2565,13 +2387,10 @@ export default {
         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]
@@ -2588,59 +2407,30 @@ export default {
         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()
     },
 
@@ -3990,122 +3780,6 @@ export default {
   justify-content: center;
   padding: 0 2px;
 }
-.eg-checkbox {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-}
-.eg-checkbox-input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-.eg-checkbox-box {
-  position: relative;
-  display: block;
-  width: 19px;
-  height: 19px;
-  box-sizing: border-box;
-  background-color: #fff;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 0 0;
-  border: 1.5px solid #c2c8d1;
-  border-radius: 4px;
-  transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;
-}
-.eg-checkbox:hover .eg-checkbox-box {
-  border-color: #1a73e8;
-}
-.eg-checkbox-input:checked + .eg-checkbox-box {
-  background-color: #1a73e8;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");
-  background-size: 70% 70%;
-  border-color: #1a73e8;
-}
-.eg-checkbox-input:focus-visible + .eg-checkbox-box {
-  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
-}
-.eg-checkbox--disabled,
-.eg-checkbox--disabled .eg-checkbox-input {
-  cursor: default;
-}
-.eg-checkbox-input:disabled + .eg-checkbox-box {
-  background-color: #f0f1f3;
-  border-color: #dadde2;
-}
-.eg-checkbox-input:disabled:checked + .eg-checkbox-box {
-  background-color: #b9c2ce;
-  border-color: #b9c2ce;
-}
-
-.eg-select-dropdown {
-  background: white;
-  border: 1px solid #d0d0d0;
-  border-radius: 4px;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
-  overflow-y: auto;
-  max-height: 320px;
-  padding: 4px 0;
-}
-.eg-select-search {
-  padding: 6px 8px;
-  border-bottom: 1px solid #ebebeb;
-  position: sticky;
-  top: 0;
-  background: #fff;
-  z-index: 1;
-}
-.eg-select-search-input {
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid #d1d5db;
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 13px;
-  outline: none;
-  color: #333;
-  background: #fff;
-  font-family: inherit;
-}
-.eg-select-search-input:focus {
-  border-color: #1a73e8;
-  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);
-}
-
-.eg-select-option {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 6px 12px;
-  font-size: 13px;
-  cursor: pointer;
-  white-space: normal;
-  word-break: break-word;
-  user-select: none;
-  color: #333;
-}
-.eg-select-option:hover,
-.eg-select-option--highlighted {
-  background: #f0f4ff;
-}
-.eg-select-option--active {
-  font-weight: 600;
-  color: #1a73e8;
-}
-.eg-select-option--active.eg-select-option--highlighted,
-.eg-select-option--active:hover {
-  background: #e8f0fe;
-}
-
 .eg-validation-tooltip {
   background: #fff0f0;
   border: 1px solid #e53935;
@@ -4118,29 +3792,6 @@ export default {
   pointer-events: none;
 }
 
-.eg-select-dot {
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  display: inline-block;
-}
-
-.eg-tree-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  font-size: 10px;
-  color: #888;
-  margin-top: 1px;
-}
-.eg-tree-toggle--leaf {
-  visibility: hidden;
-}
-
 /* ===== ROW TRANSITION ===== */
 .eg-row-enter-active,
 .eg-row-leave-active {