vue2-excel-grid 1.1.30 → 1.1.32

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

@@ -1661,8 +1661,7 @@ var script$2 = {
   },
   mounted() {
     if (this.dropdownOnly) {
-      const v = String(this.value == null ? '' : this.value);
-      this.highlight = this.normalizedOptions.findIndex(o => String(o.value) === v);
+      this.highlight = -1;
       if (this.enableSearch) {
         this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus(); });
       }
@@ -1760,7 +1759,19 @@ var script$2 = {
       this.$nextTick(() => {
         const items = this.$el.querySelectorAll('.eg-select-option');
         const el = items[this.highlight];
-        if (el) el.scrollIntoView({ block: 'nearest' });
+        if (!el) return
+        const container = this.$el;
+        const searchEl = container.querySelector('.eg-select-search');
+        const stickyH = searchEl ? searchEl.offsetHeight : 0;
+        const elTop = el.offsetTop;
+        const elBottom = elTop + el.offsetHeight;
+        const visTop = container.scrollTop + stickyH;
+        const visBottom = container.scrollTop + container.clientHeight;
+        if (elTop < visTop) {
+          container.scrollTop = elTop - stickyH;
+        } else if (elBottom > visBottom) {
+          container.scrollTop = elBottom - container.clientHeight;
+        }
       });
     },
     onRootMouseDown(e) {
@@ -2002,7 +2013,7 @@ __vue_render__$2._withStripped = true;
   /* style */
   const __vue_inject_styles__$2 = function (inject) {
     if (!inject) return
-    inject("data-v-1f1aae3f_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/* Standalone wrapper */\n.eg-select-wrapper {\n  position: relative;\n  display: inline-block;\n  min-width: 120px;\n  font-size: var(--eg-font-size);\n  font-family: inherit;\n}\n.eg-select-trigger {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  min-height: 30px;\n  padding: 4px 8px;\n  box-sizing: border-box;\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  background: var(--eg-color-cell-bg);\n  cursor: pointer;\n  user-select: none;\n  color: var(--eg-color-text);\n  transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover {\n  border-color: var(--eg-color-accent);\n}\n.eg-select-trigger--open {\n  border-color: var(--eg-color-accent);\n  box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled {\n  background: var(--eg-color-cell-readonly);\n  cursor: default;\n  color: var(--eg-color-text-muted);\n}\n.eg-select-trigger-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.eg-select-placeholder {\n  color: var(--eg-color-text-muted);\n}\n.eg-select-caret {\n  flex-shrink: 0;\n  color: var(--eg-color-text-muted);\n  font-size: 12px;\n}\n\n/* Dropdown panel */\n.eg-select-dropdown {\n  background: var(--eg-color-cell-bg);\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  box-shadow: var(--eg-shadow-dropdown);\n  overflow-y: auto;\n  max-height: 320px;\n  padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 100%;\n  z-index: 999;\n  margin-top: 2px;\n}\n\n/* Search input inside dropdown */\n.eg-select-search {\n  padding: 6px 8px;\n  border-bottom: 1px solid var(--eg-color-border-cell);\n  position: sticky;\n  top: 0;\n  background: var(--eg-color-cell-bg);\n  z-index: 1;\n}\n.eg-select-search-input {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  padding: 4px 8px;\n  font-size: var(--eg-font-size);\n  outline: none;\n  color: var(--eg-color-text);\n  background: var(--eg-color-cell-bg);\n  font-family: inherit;\n}\n.eg-select-search-input:focus {\n  border-color: var(--eg-color-accent);\n  box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n\n/* Option rows */\n.eg-select-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 6px 12px;\n  font-size: var(--eg-font-size);\n  cursor: pointer;\n  white-space: normal;\n  word-break: break-word;\n  user-select: none;\n  color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n  background: var(--eg-color-option-hover-bg);\n}\n.eg-select-option--active {\n  font-weight: 600;\n  color: var(--eg-color-accent);\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n  background: var(--eg-color-option-active-hover-bg);\n}\n\n/* Color dot */\n.eg-select-dot {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: inline-block;\n  margin-top: 3px;\n}\n", map: {"version":3,"sources":["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/EgSelect.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4QA,uBAAA;AACA;EACA,kBAAA;EACA,qBAAA;EACA,gBAAA;EACA,8BAAA;EACA,oBAAA;AACA;AACA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,mCAAA;EACA,eAAA;EACA,iBAAA;EACA,2BAAA;EACA,wDAAA;AACA;AACA;EACA,oCAAA;AACA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;AACA;EACA,yCAAA;EACA,eAAA;EACA,iCAAA;AACA;AACA;EACA,OAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;AACA;AACA;EACA,iCAAA;AACA;AACA;EACA,cAAA;EACA,iCAAA;EACA,eAAA;AACA;;AAEA,mBAAA;AACA;EACA,mCAAA;EACA,wCAAA;EACA,+BAAA;EACA,qCAAA;EACA,gBAAA;EACA,iBAAA;EACA,cAAA;AACA;AACA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,eAAA;EACA,YAAA;EACA,eAAA;AACA;;AAEA,iCAAA;AACA;EACA,gBAAA;EACA,oDAAA;EACA,gBAAA;EACA,MAAA;EACA,mCAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,gBAAA;EACA,8BAAA;EACA,aAAA;EACA,2BAAA;EACA,mCAAA;EACA,oBAAA;AACA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;;AAEA,gBAAA;AACA;EACA,aAAA;EACA,uBAAA;EACA,QAAA;EACA,iBAAA;EACA,8BAAA;EACA,eAAA;EACA,mBAAA;EACA,sBAAA;EACA,iBAAA;EACA,2BAAA;AACA;AACA;;EAEA,2CAAA;AACA;AACA;EACA,gBAAA;EACA,6BAAA;AACA;AACA;;EAEA,kDAAA;AACA;;AAEA,cAAA;AACA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAAA;EACA,eAAA;AACA","file":"EgSelect.vue","sourcesContent":["<template>\n  <div\n    :class=\"dropdownOnly ? 'eg-select-dropdown' : 'eg-select-wrapper'\"\n    :style=\"dropdownOnly ? overlayStyle : null\"\n    @mousedown=\"onRootMouseDown\"\n  >\n    <!-- 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      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      const last = this.filteredOptions.length - 1\n      if (key === 'Escape') {\n        e.preventDefault()\n        if (this.dropdownOnly) this.$emit('close')\n        else { this.open = false; this.searchQuery = '' }\n      } else if (key === 'ArrowDown') {\n        e.preventDefault()\n        this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageDown') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageUp') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'Enter') {\n        e.preventDefault()\n        const opt = this.filteredOptions[this.highlight]\n        if (opt) this.pickOption(opt)\n      }\n    },\n    handleKey(e) {\n      const key = e.key\n      const last = this.filteredOptions.length - 1\n      if (key === 'Escape') {\n        e.preventDefault()\n        this.$emit('close')\n      } else if (key === 'Enter' || key === ' ') {\n        e.preventDefault()\n        const opt = this.filteredOptions[this.highlight]\n        if (opt) this.pickOption(opt)\n        else this.$emit('close')\n      } else if (key === 'ArrowDown') {\n        e.preventDefault()\n        this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageDown') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageUp') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n        this._scrollHighlightedIntoView()\n      }\n    },\n    _scrollHighlightedIntoView() {\n      this.$nextTick(() => {\n        const items = this.$el.querySelectorAll('.eg-select-option')\n        const el = items[this.highlight]\n        if (el) el.scrollIntoView({ block: 'nearest' })\n      })\n    },\n    onRootMouseDown(e) {\n      if (this.dropdownOnly) e.preventDefault()\n    },\n    _onDocClick(e) {\n      if (!this.open) return\n      if (this.$el && this.$el.contains(e.target)) return\n      this.open = false\n    }\n  }\n}\n</script>\n\n<style>\n/* Standalone wrapper */\n.eg-select-wrapper {\n  position: relative;\n  display: inline-block;\n  min-width: 120px;\n  font-size: var(--eg-font-size);\n  font-family: inherit;\n}\n.eg-select-trigger {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  min-height: 30px;\n  padding: 4px 8px;\n  box-sizing: border-box;\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  background: var(--eg-color-cell-bg);\n  cursor: pointer;\n  user-select: none;\n  color: var(--eg-color-text);\n  transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover {\n  border-color: var(--eg-color-accent);\n}\n.eg-select-trigger--open {\n  border-color: var(--eg-color-accent);\n  box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled {\n  background: var(--eg-color-cell-readonly);\n  cursor: default;\n  color: var(--eg-color-text-muted);\n}\n.eg-select-trigger-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.eg-select-placeholder {\n  color: var(--eg-color-text-muted);\n}\n.eg-select-caret {\n  flex-shrink: 0;\n  color: var(--eg-color-text-muted);\n  font-size: 12px;\n}\n\n/* Dropdown panel */\n.eg-select-dropdown {\n  background: var(--eg-color-cell-bg);\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  box-shadow: var(--eg-shadow-dropdown);\n  overflow-y: auto;\n  max-height: 320px;\n  padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 100%;\n  z-index: 999;\n  margin-top: 2px;\n}\n\n/* Search input inside dropdown */\n.eg-select-search {\n  padding: 6px 8px;\n  border-bottom: 1px solid var(--eg-color-border-cell);\n  position: sticky;\n  top: 0;\n  background: var(--eg-color-cell-bg);\n  z-index: 1;\n}\n.eg-select-search-input {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  padding: 4px 8px;\n  font-size: var(--eg-font-size);\n  outline: none;\n  color: var(--eg-color-text);\n  background: var(--eg-color-cell-bg);\n  font-family: inherit;\n}\n.eg-select-search-input:focus {\n  border-color: var(--eg-color-accent);\n  box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n\n/* Option rows */\n.eg-select-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 6px 12px;\n  font-size: var(--eg-font-size);\n  cursor: pointer;\n  white-space: normal;\n  word-break: break-word;\n  user-select: none;\n  color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n  background: var(--eg-color-option-hover-bg);\n}\n.eg-select-option--active {\n  font-weight: 600;\n  color: var(--eg-color-accent);\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n  background: var(--eg-color-option-active-hover-bg);\n}\n\n/* Color dot */\n.eg-select-dot {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: inline-block;\n  margin-top: 3px;\n}\n</style>\n"]}, media: undefined });
+    inject("data-v-1a11683a_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Standalone wrapper */\n.eg-select-wrapper {\n  position: relative;\n  display: inline-block;\n  min-width: 120px;\n  font-size: var(--eg-font-size);\n  font-family: inherit;\n}\n.eg-select-trigger {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  min-height: 30px;\n  padding: 4px 8px;\n  box-sizing: border-box;\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  background: var(--eg-color-cell-bg);\n  cursor: pointer;\n  user-select: none;\n  color: var(--eg-color-text);\n  transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover {\n  border-color: var(--eg-color-accent);\n}\n.eg-select-trigger--open {\n  border-color: var(--eg-color-accent);\n  box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled {\n  background: var(--eg-color-cell-readonly);\n  cursor: default;\n  color: var(--eg-color-text-muted);\n}\n.eg-select-trigger-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.eg-select-placeholder {\n  color: var(--eg-color-text-muted);\n}\n.eg-select-caret {\n  flex-shrink: 0;\n  color: var(--eg-color-text-muted);\n  font-size: 12px;\n}\n\n/* Dropdown panel */\n.eg-select-dropdown {\n  background: var(--eg-color-cell-bg);\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  box-shadow: var(--eg-shadow-dropdown);\n  overflow-y: auto;\n  max-height: 320px;\n  padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 100%;\n  z-index: 999;\n  margin-top: 2px;\n}\n\n/* Search input inside dropdown */\n.eg-select-search {\n  padding: 6px 8px;\n  border-bottom: 1px solid var(--eg-color-border-cell);\n  position: sticky;\n  top: 0;\n  background: var(--eg-color-cell-bg);\n  z-index: 1;\n}\n.eg-select-search-input {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  padding: 4px 8px;\n  font-size: var(--eg-font-size);\n  outline: none;\n  color: var(--eg-color-text);\n  background: var(--eg-color-cell-bg);\n  font-family: inherit;\n}\n.eg-select-search-input:focus {\n  border-color: var(--eg-color-accent);\n  box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n\n/* Option rows */\n.eg-select-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 6px 12px;\n  font-size: var(--eg-font-size);\n  cursor: pointer;\n  white-space: normal;\n  word-break: break-word;\n  user-select: none;\n  color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n  background: var(--eg-color-option-hover-bg);\n}\n.eg-select-option--active {\n  font-weight: 600;\n  color: var(--eg-color-accent);\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n  background: var(--eg-color-option-active-hover-bg);\n}\n\n/* Color dot */\n.eg-select-dot {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: inline-block;\n  margin-top: 3px;\n}\n", map: {"version":3,"sources":["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/EgSelect.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuRA,uBAAA;AACA;EACA,kBAAA;EACA,qBAAA;EACA,gBAAA;EACA,8BAAA;EACA,oBAAA;AACA;AACA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,mCAAA;EACA,eAAA;EACA,iBAAA;EACA,2BAAA;EACA,wDAAA;AACA;AACA;EACA,oCAAA;AACA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;AACA;EACA,yCAAA;EACA,eAAA;EACA,iCAAA;AACA;AACA;EACA,OAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;AACA;AACA;EACA,iCAAA;AACA;AACA;EACA,cAAA;EACA,iCAAA;EACA,eAAA;AACA;;AAEA,mBAAA;AACA;EACA,mCAAA;EACA,wCAAA;EACA,+BAAA;EACA,qCAAA;EACA,gBAAA;EACA,iBAAA;EACA,cAAA;AACA;AACA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,eAAA;EACA,YAAA;EACA,eAAA;AACA;;AAEA,iCAAA;AACA;EACA,gBAAA;EACA,oDAAA;EACA,gBAAA;EACA,MAAA;EACA,mCAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,sBAAA;EACA,wCAAA;EACA,+BAAA;EACA,gBAAA;EACA,8BAAA;EACA,aAAA;EACA,2BAAA;EACA,mCAAA;EACA,oBAAA;AACA;AACA;EACA,oCAAA;EACA,iDAAA;AACA;;AAEA,gBAAA;AACA;EACA,aAAA;EACA,uBAAA;EACA,QAAA;EACA,iBAAA;EACA,8BAAA;EACA,eAAA;EACA,mBAAA;EACA,sBAAA;EACA,iBAAA;EACA,2BAAA;AACA;AACA;;EAEA,2CAAA;AACA;AACA;EACA,gBAAA;EACA,6BAAA;AACA;AACA;;EAEA,kDAAA;AACA;;AAEA,cAAA;AACA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAAA;EACA,eAAA;AACA","file":"EgSelect.vue","sourcesContent":["<template>\n  <div\n    :class=\"dropdownOnly ? 'eg-select-dropdown' : 'eg-select-wrapper'\"\n    :style=\"dropdownOnly ? overlayStyle : null\"\n    @mousedown=\"onRootMouseDown\"\n  >\n    <!-- 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      this.highlight = -1\n      if (this.enableSearch) {\n        this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })\n      }\n    } else {\n      document.addEventListener('click', this._onDocClick)\n    }\n  },\n  beforeDestroy() {\n    if (!this.dropdownOnly) {\n      document.removeEventListener('click', this._onDocClick)\n    }\n  },\n  methods: {\n    toggle() {\n      if (this.disabled) return\n      this.open = !this.open\n      if (this.open) {\n        const v = String(this.value == null ? '' : this.value)\n        this.highlight = this.normalizedOptions.findIndex(o => String(o.value) === v)\n        this.searchQuery = ''\n      }\n    },\n    pickOption(opt) {\n      this.$emit('input', opt.value)\n      this.$emit('select', { value: opt.value, label: opt.label })\n      if (!this.dropdownOnly) {\n        this.open = false\n        this.searchQuery = ''\n        this.highlight = -1\n      }\n    },\n    onSearch(e) {\n      this.searchQuery = e.target.value\n      this.highlight = 0\n    },\n    onSearchKey(e) {\n      const key = e.key\n      const last = this.filteredOptions.length - 1\n      if (key === 'Escape') {\n        e.preventDefault()\n        if (this.dropdownOnly) this.$emit('close')\n        else { this.open = false; this.searchQuery = '' }\n      } else if (key === 'ArrowDown') {\n        e.preventDefault()\n        this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageDown') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageUp') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'Enter') {\n        e.preventDefault()\n        const opt = this.filteredOptions[this.highlight]\n        if (opt) this.pickOption(opt)\n      }\n    },\n    handleKey(e) {\n      const key = e.key\n      const last = this.filteredOptions.length - 1\n      if (key === 'Escape') {\n        e.preventDefault()\n        this.$emit('close')\n      } else if (key === 'Enter' || key === ' ') {\n        e.preventDefault()\n        const opt = this.filteredOptions[this.highlight]\n        if (opt) this.pickOption(opt)\n        else this.$emit('close')\n      } else if (key === 'ArrowDown') {\n        e.preventDefault()\n        this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageDown') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageUp') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n        this._scrollHighlightedIntoView()\n      }\n    },\n    _scrollHighlightedIntoView() {\n      this.$nextTick(() => {\n        const items = this.$el.querySelectorAll('.eg-select-option')\n        const el = items[this.highlight]\n        if (!el) return\n        const container = this.$el\n        const searchEl = container.querySelector('.eg-select-search')\n        const stickyH = searchEl ? searchEl.offsetHeight : 0\n        const elTop = el.offsetTop\n        const elBottom = elTop + el.offsetHeight\n        const visTop = container.scrollTop + stickyH\n        const visBottom = container.scrollTop + container.clientHeight\n        if (elTop < visTop) {\n          container.scrollTop = elTop - stickyH\n        } else if (elBottom > visBottom) {\n          container.scrollTop = elBottom - container.clientHeight\n        }\n      })\n    },\n    onRootMouseDown(e) {\n      if (this.dropdownOnly) e.preventDefault()\n    },\n    _onDocClick(e) {\n      if (!this.open) return\n      if (this.$el && this.$el.contains(e.target)) return\n      this.open = false\n    }\n  }\n}\n</script>\n\n<style>\n/* Standalone wrapper */\n.eg-select-wrapper {\n  position: relative;\n  display: inline-block;\n  min-width: 120px;\n  font-size: var(--eg-font-size);\n  font-family: inherit;\n}\n.eg-select-trigger {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  min-height: 30px;\n  padding: 4px 8px;\n  box-sizing: border-box;\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  background: var(--eg-color-cell-bg);\n  cursor: pointer;\n  user-select: none;\n  color: var(--eg-color-text);\n  transition: border-color .15s ease, box-shadow .15s ease;\n}\n.eg-select-trigger:hover {\n  border-color: var(--eg-color-accent);\n}\n.eg-select-trigger--open {\n  border-color: var(--eg-color-accent);\n  box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n.eg-select-trigger--disabled {\n  background: var(--eg-color-cell-readonly);\n  cursor: default;\n  color: var(--eg-color-text-muted);\n}\n.eg-select-trigger-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.eg-select-placeholder {\n  color: var(--eg-color-text-muted);\n}\n.eg-select-caret {\n  flex-shrink: 0;\n  color: var(--eg-color-text-muted);\n  font-size: 12px;\n}\n\n/* Dropdown panel */\n.eg-select-dropdown {\n  background: var(--eg-color-cell-bg);\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  box-shadow: var(--eg-shadow-dropdown);\n  overflow-y: auto;\n  max-height: 320px;\n  padding: 4px 0;\n}\n.eg-select-dropdown--floating {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 100%;\n  z-index: 999;\n  margin-top: 2px;\n}\n\n/* Search input inside dropdown */\n.eg-select-search {\n  padding: 6px 8px;\n  border-bottom: 1px solid var(--eg-color-border-cell);\n  position: sticky;\n  top: 0;\n  background: var(--eg-color-cell-bg);\n  z-index: 1;\n}\n.eg-select-search-input {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--eg-color-border);\n  border-radius: var(--eg-radius);\n  padding: 4px 8px;\n  font-size: var(--eg-font-size);\n  outline: none;\n  color: var(--eg-color-text);\n  background: var(--eg-color-cell-bg);\n  font-family: inherit;\n}\n.eg-select-search-input:focus {\n  border-color: var(--eg-color-accent);\n  box-shadow: 0 0 0 2px var(--eg-color-accent-soft);\n}\n\n/* Option rows */\n.eg-select-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 6px 12px;\n  font-size: var(--eg-font-size);\n  cursor: pointer;\n  white-space: normal;\n  word-break: break-word;\n  user-select: none;\n  color: var(--eg-color-text);\n}\n.eg-select-option:hover,\n.eg-select-option--highlighted {\n  background: var(--eg-color-option-hover-bg);\n}\n.eg-select-option--active {\n  font-weight: 600;\n  color: var(--eg-color-accent);\n}\n.eg-select-option--active.eg-select-option--highlighted,\n.eg-select-option--active:hover {\n  background: var(--eg-color-option-active-hover-bg);\n}\n\n/* Color dot */\n.eg-select-dot {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: inline-block;\n  margin-top: 3px;\n}\n</style>\n"]}, media: undefined });
 
   };
   /* scoped */
@@ -2207,6 +2218,7 @@ var script$1 = {
   mounted() {
     if (this.dropdownOnly) {
       this._initExpanded();
+      this.highlight = -1;
       if (this.enableSearch) {
         this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus(); });
       }
@@ -2330,7 +2342,19 @@ var script$1 = {
       this.$nextTick(() => {
         const items = this.$el.querySelectorAll('.eg-select-option');
         const el = items[this.highlight];
-        if (el) el.scrollIntoView({ block: 'nearest' });
+        if (!el) return
+        const container = this.$el;
+        const searchEl = container.querySelector('.eg-select-search');
+        const stickyH = searchEl ? searchEl.offsetHeight : 0;
+        const elTop = el.offsetTop;
+        const elBottom = elTop + el.offsetHeight;
+        const visTop = container.scrollTop + stickyH;
+        const visBottom = container.scrollTop + container.clientHeight;
+        if (elTop < visTop) {
+          container.scrollTop = elTop - stickyH;
+        } else if (elBottom > visBottom) {
+          container.scrollTop = elBottom - container.clientHeight;
+        }
       });
     },
     onRootMouseDown(e) {
@@ -2671,7 +2695,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-69858664_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Tree toggle */\n.eg-tree-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  font-size: 10px;\n  color: var(--eg-color-text-muted);\n  margin-top: 1px;\n}\n.eg-tree-toggle--leaf {\n  visibility: hidden;\n}\n", map: {"version":3,"sources":["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/EgTreeSelect.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4WA,gBAAA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;EACA,iCAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;AACA","file":"EgTreeSelect.vue","sourcesContent":["<template>\n  <div\n    :class=\"dropdownOnly ? 'eg-select-dropdown' : 'eg-select-wrapper'\"\n    :style=\"dropdownOnly ? overlayStyle : null\"\n    @mousedown=\"onRootMouseDown\"\n  >\n    <!-- 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      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      const last = this.filteredOptions.length - 1\n      if (key === 'Escape') {\n        e.preventDefault()\n        if (this.dropdownOnly) this.$emit('close')\n        else { this.open = false; this.searchQuery = '' }\n      } else if (key === 'ArrowDown') {\n        e.preventDefault()\n        this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageDown') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageUp') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'Enter') {\n        e.preventDefault()\n        const opt = this.filteredOptions[this.highlight]\n        if (opt) this.pickOption(opt)\n      }\n    },\n    handleKey(e) {\n      const key = e.key\n      const last = this.filteredOptions.length - 1\n      if (key === 'Escape') {\n        e.preventDefault()\n        this.$emit('close')\n      } else if (key === 'Enter' || key === ' ') {\n        e.preventDefault()\n        const opt = this.filteredOptions[this.highlight]\n        if (opt) this.pickOption(opt)\n        else this.$emit('close')\n      } else if (key === 'ArrowDown') {\n        e.preventDefault()\n        this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageDown') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageUp') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n        this._scrollHighlightedIntoView()\n      } else if (!this.searchQuery && (key === 'ArrowRight' || key === 'ArrowLeft')) {\n        e.preventDefault()\n        const opt = this.flatOptions[this.highlight]\n        if (opt && opt.hasChildren) {\n          if (key === 'ArrowRight' && !opt.expanded) this.toggleNode(this.highlight)\n          if (key === 'ArrowLeft' && opt.expanded) this.toggleNode(this.highlight)\n        }\n      }\n    },\n    _scrollHighlightedIntoView() {\n      this.$nextTick(() => {\n        const items = this.$el.querySelectorAll('.eg-select-option')\n        const el = items[this.highlight]\n        if (el) el.scrollIntoView({ block: 'nearest' })\n      })\n    },\n    onRootMouseDown(e) {\n      if (this.dropdownOnly) e.preventDefault()\n    },\n    _onDocClick(e) {\n      if (!this.open) return\n      if (this.$el && this.$el.contains(e.target)) return\n      this.open = false\n    },\n    _treeFlatten(nodes, keys, expandedMap, depth, pathArr) {\n      let out = []\n      ;(nodes || []).forEach((node, idx) => {\n        const path = pathArr.concat(idx)\n        const id = path.join('-')\n        const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []\n        const hasChildren = children.length > 0\n        const expanded = hasChildren && !!expandedMap[id]\n        out.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id, depth, hasChildren, expanded })\n        if (expanded) out = out.concat(this._treeFlatten(children, keys, expandedMap, depth + 1, path))\n      })\n      return out\n    },\n    _treeFlattenAll(nodes, keys) {\n      const result = []\n      const walk = (list) => {\n        ;(list || []).forEach(node => {\n          const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []\n          result.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id: String(node[keys.valueKey]), depth: 0, hasChildren: false, expanded: false })\n          if (children.length) walk(children)\n        })\n      }\n      walk(nodes)\n      return result\n    },\n    _treeFindLabel(nodes, keys, value) {\n      for (const node of (nodes || [])) {\n        if (String(node[keys.valueKey]) === value) {\n          return node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])\n        }\n        const found = this._treeFindLabel(node[keys.childrenKey], keys, value)\n        if (found != null) return found\n      }\n      return null\n    },\n    _treeFindPath(nodes, keys, value, pathArr) {\n      for (let i = 0; i < (nodes || []).length; i++) {\n        const node = nodes[i]\n        const path = pathArr.concat(i)\n        if (String(node[keys.valueKey]) === value) return [path.join('-')]\n        const children = node[keys.childrenKey]\n        if (Array.isArray(children)) {\n          const sub = this._treeFindPath(children, keys, value, path)\n          if (sub) return [path.join('-')].concat(sub)\n        }\n      }\n      return null\n    }\n  }\n}\n</script>\n\n<style>\n/* Tree toggle */\n.eg-tree-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  font-size: 10px;\n  color: var(--eg-color-text-muted);\n  margin-top: 1px;\n}\n.eg-tree-toggle--leaf {\n  visibility: hidden;\n}\n</style>\n"]}, media: undefined });
+    inject("data-v-58d5e187_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Tree toggle */\n.eg-tree-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  font-size: 10px;\n  color: var(--eg-color-text-muted);\n  margin-top: 1px;\n}\n.eg-tree-toggle--leaf {\n  visibility: hidden;\n}\n", map: {"version":3,"sources":["/Users/macmini/Projects/Realsoft/vue2-excel-grid/src/components/EgTreeSelect.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyXA,gBAAA;AACA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;EACA,iCAAA;EACA,eAAA;AACA;AACA;EACA,kBAAA;AACA","file":"EgTreeSelect.vue","sourcesContent":["<template>\n  <div\n    :class=\"dropdownOnly ? 'eg-select-dropdown' : 'eg-select-wrapper'\"\n    :style=\"dropdownOnly ? overlayStyle : null\"\n    @mousedown=\"onRootMouseDown\"\n  >\n    <!-- 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      this._initExpanded()\n      this.highlight = -1\n      if (this.enableSearch) {\n        this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })\n      }\n    } else {\n      document.addEventListener('click', this._onDocClick)\n    }\n  },\n  beforeDestroy() {\n    if (!this.dropdownOnly) {\n      document.removeEventListener('click', this._onDocClick)\n    }\n  },\n  methods: {\n    _initExpanded() {\n      const v = String(this.value == null ? '' : this.value)\n      const path = this._treeFindPath(this.options || [], this.keys, v, []) || []\n      const expandedMap = {}\n      path.forEach(id => { expandedMap[id] = true })\n      this.expandedMap = expandedMap\n      const flat = this.flatOptions\n      this.highlight = flat.findIndex(o => String(o.value) === v)\n    },\n    toggle() {\n      if (this.disabled) return\n      this.open = !this.open\n      if (this.open) {\n        this.searchQuery = ''\n        this._initExpanded()\n      }\n    },\n    pickOption(opt) {\n      this.$emit('input', opt.value)\n      this.$emit('select', { value: opt.value, label: opt.label })\n      if (!this.dropdownOnly) {\n        this.open = false\n        this.searchQuery = ''\n        this.highlight = -1\n      }\n    },\n    toggleNode(idx) {\n      const opt = this.flatOptions[idx]\n      if (!opt || !opt.hasChildren) return\n      const next = { ...this.expandedMap }\n      if (next[opt.id]) delete next[opt.id]\n      else next[opt.id] = true\n      this.expandedMap = next\n      const newFlat = this.flatOptions\n      const newIdx = newFlat.findIndex(o => o.id === opt.id)\n      this.highlight = newIdx >= 0 ? newIdx : this.highlight\n    },\n    onSearch(e) {\n      this.searchQuery = e.target.value\n      this.highlight = 0\n    },\n    onSearchKey(e) {\n      const key = e.key\n      const last = this.filteredOptions.length - 1\n      if (key === 'Escape') {\n        e.preventDefault()\n        if (this.dropdownOnly) this.$emit('close')\n        else { this.open = false; this.searchQuery = '' }\n      } else if (key === 'ArrowDown') {\n        e.preventDefault()\n        this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageDown') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageUp') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'Enter') {\n        e.preventDefault()\n        const opt = this.filteredOptions[this.highlight]\n        if (opt) this.pickOption(opt)\n      }\n    },\n    handleKey(e) {\n      const key = e.key\n      const last = this.filteredOptions.length - 1\n      if (key === 'Escape') {\n        e.preventDefault()\n        this.$emit('close')\n      } else if (key === 'Enter' || key === ' ') {\n        e.preventDefault()\n        const opt = this.filteredOptions[this.highlight]\n        if (opt) this.pickOption(opt)\n        else this.$emit('close')\n      } else if (key === 'ArrowDown') {\n        e.preventDefault()\n        this.highlight = Math.min((this.highlight < 0 ? -1 : this.highlight) + 1, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'ArrowUp') {\n        e.preventDefault()\n        this.highlight = Math.max((this.highlight || 0) - 1, 0)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageDown') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.min(this.highlight + 8, last)\n        this._scrollHighlightedIntoView()\n      } else if (key === 'PageUp') {\n        e.preventDefault()\n        this.highlight = this.highlight < 0 ? 0 : Math.max(this.highlight - 8, 0)\n        this._scrollHighlightedIntoView()\n      } else if (!this.searchQuery && (key === 'ArrowRight' || key === 'ArrowLeft')) {\n        e.preventDefault()\n        const opt = this.flatOptions[this.highlight]\n        if (opt && opt.hasChildren) {\n          if (key === 'ArrowRight' && !opt.expanded) this.toggleNode(this.highlight)\n          if (key === 'ArrowLeft' && opt.expanded) this.toggleNode(this.highlight)\n        }\n      }\n    },\n    _scrollHighlightedIntoView() {\n      this.$nextTick(() => {\n        const items = this.$el.querySelectorAll('.eg-select-option')\n        const el = items[this.highlight]\n        if (!el) return\n        const container = this.$el\n        const searchEl = container.querySelector('.eg-select-search')\n        const stickyH = searchEl ? searchEl.offsetHeight : 0\n        const elTop = el.offsetTop\n        const elBottom = elTop + el.offsetHeight\n        const visTop = container.scrollTop + stickyH\n        const visBottom = container.scrollTop + container.clientHeight\n        if (elTop < visTop) {\n          container.scrollTop = elTop - stickyH\n        } else if (elBottom > visBottom) {\n          container.scrollTop = elBottom - container.clientHeight\n        }\n      })\n    },\n    onRootMouseDown(e) {\n      if (this.dropdownOnly) e.preventDefault()\n    },\n    _onDocClick(e) {\n      if (!this.open) return\n      if (this.$el && this.$el.contains(e.target)) return\n      this.open = false\n    },\n    _treeFlatten(nodes, keys, expandedMap, depth, pathArr) {\n      let out = []\n      ;(nodes || []).forEach((node, idx) => {\n        const path = pathArr.concat(idx)\n        const id = path.join('-')\n        const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []\n        const hasChildren = children.length > 0\n        const expanded = hasChildren && !!expandedMap[id]\n        out.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id, depth, hasChildren, expanded })\n        if (expanded) out = out.concat(this._treeFlatten(children, keys, expandedMap, depth + 1, path))\n      })\n      return out\n    },\n    _treeFlattenAll(nodes, keys) {\n      const result = []\n      const walk = (list) => {\n        ;(list || []).forEach(node => {\n          const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []\n          result.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id: String(node[keys.valueKey]), depth: 0, hasChildren: false, expanded: false })\n          if (children.length) walk(children)\n        })\n      }\n      walk(nodes)\n      return result\n    },\n    _treeFindLabel(nodes, keys, value) {\n      for (const node of (nodes || [])) {\n        if (String(node[keys.valueKey]) === value) {\n          return node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])\n        }\n        const found = this._treeFindLabel(node[keys.childrenKey], keys, value)\n        if (found != null) return found\n      }\n      return null\n    },\n    _treeFindPath(nodes, keys, value, pathArr) {\n      for (let i = 0; i < (nodes || []).length; i++) {\n        const node = nodes[i]\n        const path = pathArr.concat(i)\n        if (String(node[keys.valueKey]) === value) return [path.join('-')]\n        const children = node[keys.childrenKey]\n        if (Array.isArray(children)) {\n          const sub = this._treeFindPath(children, keys, value, path)\n          if (sub) return [path.join('-')].concat(sub)\n        }\n      }\n      return null\n    }\n  }\n}\n</script>\n\n<style>\n/* Tree toggle */\n.eg-tree-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  font-size: 10px;\n  color: var(--eg-color-text-muted);\n  margin-top: 1px;\n}\n.eg-tree-toggle--leaf {\n  visibility: hidden;\n}\n</style>\n"]}, media: undefined });
 
   };
   /* scoped */