vue2-excel-grid 1.1.13 → 1.1.16

package/src/components/EgTreeSelect.vue

@@ -0,0 +1,357 @@
+<template>
+  <div
+    :class="dropdownOnly ? 'eg-select-dropdown' : 'eg-select-wrapper'"
+    :style="dropdownOnly ? overlayStyle : null"
+    @mousedown="onRootMouseDown"
+  >
+    <!-- Standalone mode: trigger button -->
+    <div
+      v-if="!dropdownOnly"
+      class="eg-select-trigger"
+      :class="{ 'eg-select-trigger--disabled': disabled, 'eg-select-trigger--open': open }"
+      @click.stop="toggle"
+    >
+      <span class="eg-select-trigger-label" :class="{ 'eg-select-placeholder': selectedLabel == null }">
+        {{ selectedLabel != null ? selectedLabel : placeholder }}
+      </span>
+      <span class="eg-select-caret">▾</span>
+    </div>
+
+    <!-- Options panel in grid dropdown-only mode -->
+    <template v-if="dropdownOnly">
+      <div v-if="enableSearch" class="eg-select-search" @mousedown.stop>
+        <input
+          ref="searchInput"
+          class="eg-select-search-input"
+          :value="searchQuery"
+          placeholder="Qidirish..."
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          @input="onSearch"
+          @keydown.stop="onSearchKey"
+        />
+      </div>
+      <div
+        v-for="(opt, idx) in filteredOptions"
+        :key="opt.id != null ? opt.id : String(opt.value)"
+        class="eg-select-option"
+        :class="{
+          'eg-select-option--active': String(opt.value) === String(value),
+          'eg-select-option--highlighted': idx === highlight
+        }"
+        :style="!searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null"
+        @mousedown.prevent="pickOption(opt)"
+        @mouseover="highlight = idx"
+      >
+        <span
+          v-if="!searchQuery"
+          class="eg-tree-toggle"
+          :class="{ 'eg-tree-toggle--leaf': !opt.hasChildren }"
+          @mousedown.prevent.stop="toggleNode(idx)"
+        >{{ opt.hasChildren ? (opt.expanded ? '▾' : '▸') : '' }}</span>
+        <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>
+        {{ opt.label }}
+      </div>
+    </template>
+
+    <!-- Options panel in standalone mode -->
+    <div
+      v-else-if="open"
+      class="eg-select-dropdown eg-select-dropdown--floating"
+      @mousedown.stop.prevent
+    >
+      <div v-if="enableSearch" class="eg-select-search" @mousedown.stop>
+        <input
+          ref="searchInput"
+          class="eg-select-search-input"
+          :value="searchQuery"
+          placeholder="Qidirish..."
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          @input="onSearch"
+          @keydown.stop="onSearchKey"
+        />
+      </div>
+      <div
+        v-for="(opt, idx) in filteredOptions"
+        :key="opt.id != null ? opt.id : String(opt.value)"
+        class="eg-select-option"
+        :class="{
+          'eg-select-option--active': String(opt.value) === String(value),
+          'eg-select-option--highlighted': idx === highlight
+        }"
+        :style="!searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null"
+        @mousedown.prevent="pickOption(opt)"
+        @mouseover="highlight = idx"
+      >
+        <span
+          v-if="!searchQuery"
+          class="eg-tree-toggle"
+          :class="{ 'eg-tree-toggle--leaf': !opt.hasChildren }"
+          @mousedown.prevent.stop="toggleNode(idx)"
+        >{{ opt.hasChildren ? (opt.expanded ? '▾' : '▸') : '' }}</span>
+        <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>
+        {{ opt.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EgTreeSelect',
+  model: { prop: 'value', event: 'input' },
+  props: {
+    value: { default: null },
+    options: { type: Array, default: () => [] },
+    valueKey: { type: String, default: 'value' },
+    labelKey: { type: String, default: 'label' },
+    childrenKey: { type: String, default: 'children' },
+    enableSearch: { type: Boolean, default: false },
+    placeholder: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    dropdownOnly: { type: Boolean, default: false },
+    triggerRect: { type: Object, default: null }
+  },
+  data() {
+    return {
+      open: false,
+      searchQuery: '',
+      highlight: -1,
+      expandedMap: {}
+    }
+  },
+  computed: {
+    keys() {
+      return { valueKey: this.valueKey, labelKey: this.labelKey, childrenKey: this.childrenKey }
+    },
+    flatOptions() {
+      return this._treeFlatten(this.options || [], this.keys, this.expandedMap, 0, [])
+    },
+    allFlatOptions() {
+      if (!this.enableSearch) return null
+      return this._treeFlattenAll(this.options || [], this.keys)
+    },
+    filteredOptions() {
+      if (!this.enableSearch || !this.searchQuery.trim()) return this.flatOptions
+      const q = this.searchQuery.trim().toLowerCase()
+      const pool = this.allFlatOptions || this.flatOptions
+      return pool.filter(o => String(o.label || '').toLowerCase().includes(q))
+    },
+    selectedLabel() {
+      const v = String(this.value == null ? '' : this.value)
+      if (!v) return null
+      const found = this._treeFindLabel(this.options || [], this.keys, v)
+      return found != null ? found : null
+    },
+    overlayStyle() {
+      if (!this.dropdownOnly || !this.triggerRect) return { position: 'fixed', zIndex: 9999 }
+      const rect = this.triggerRect
+      const searchH = this.enableSearch ? 42 : 0
+      const approxH = Math.min(this.filteredOptions.length * 28 + 8 + searchH, 320)
+      const spaceBelow = window.innerHeight - rect.bottom
+      const top = spaceBelow >= approxH ? rect.bottom : rect.top - approxH
+      return {
+        position: 'fixed',
+        top: top + 'px',
+        left: rect.left + 'px',
+        minWidth: Math.max(rect.width, 120) + 'px',
+        maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + 'px',
+        zIndex: 9999
+      }
+    }
+  },
+  watch: {
+    open(val) {
+      if (val && this.enableSearch) {
+        this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })
+      }
+    }
+  },
+  mounted() {
+    if (this.dropdownOnly) {
+      // Portal: move to document.body so position:fixed is always relative to viewport,
+      // regardless of any CSS transform on ancestor elements in the host project.
+      // Vue's removeNode uses el.parentNode, so cleanup works correctly after the move.
+      if (this.$el && this.$el.parentNode) {
+        document.body.appendChild(this.$el)
+      }
+      this._initExpanded()
+      if (this.enableSearch) {
+        this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })
+      }
+    } else {
+      document.addEventListener('click', this._onDocClick)
+    }
+  },
+  beforeDestroy() {
+    if (!this.dropdownOnly) {
+      document.removeEventListener('click', this._onDocClick)
+    }
+  },
+  methods: {
+    _initExpanded() {
+      const v = String(this.value == null ? '' : this.value)
+      const path = this._treeFindPath(this.options || [], this.keys, v, []) || []
+      const expandedMap = {}
+      path.forEach(id => { expandedMap[id] = true })
+      this.expandedMap = expandedMap
+      const flat = this.flatOptions
+      this.highlight = flat.findIndex(o => String(o.value) === v)
+    },
+    toggle() {
+      if (this.disabled) return
+      this.open = !this.open
+      if (this.open) {
+        this.searchQuery = ''
+        this._initExpanded()
+      }
+    },
+    pickOption(opt) {
+      this.$emit('input', opt.value)
+      this.$emit('select', { value: opt.value, label: opt.label })
+      if (!this.dropdownOnly) {
+        this.open = false
+        this.searchQuery = ''
+        this.highlight = -1
+      }
+    },
+    toggleNode(idx) {
+      const opt = this.flatOptions[idx]
+      if (!opt || !opt.hasChildren) return
+      const next = { ...this.expandedMap }
+      if (next[opt.id]) delete next[opt.id]
+      else next[opt.id] = true
+      this.expandedMap = next
+      const newFlat = this.flatOptions
+      const newIdx = newFlat.findIndex(o => o.id === opt.id)
+      this.highlight = newIdx >= 0 ? newIdx : this.highlight
+    },
+    onSearch(e) {
+      this.searchQuery = e.target.value
+      this.highlight = 0
+    },
+    onSearchKey(e) {
+      const key = e.key
+      if (key === 'Escape') {
+        e.preventDefault()
+        if (this.dropdownOnly) this.$emit('close')
+        else { this.open = false; this.searchQuery = '' }
+      } else if (key === 'ArrowDown') {
+        e.preventDefault()
+        this.highlight = Math.min((this.highlight || 0) + 1, this.filteredOptions.length - 1)
+      } else if (key === 'ArrowUp') {
+        e.preventDefault()
+        this.highlight = Math.max((this.highlight || 0) - 1, 0)
+      } else if (key === 'Enter') {
+        e.preventDefault()
+        const opt = this.filteredOptions[this.highlight]
+        if (opt) this.pickOption(opt)
+      }
+    },
+    handleKey(e) {
+      const key = e.key
+      if (key === 'Escape') {
+        e.preventDefault()
+        this.$emit('close')
+      } else if (key === 'Enter' || key === ' ') {
+        e.preventDefault()
+        const opt = this.filteredOptions[this.highlight]
+        if (opt) this.pickOption(opt)
+        else this.$emit('close')
+      } else if (key === 'ArrowDown') {
+        e.preventDefault()
+        this.highlight = Math.min((this.highlight || 0) + 1, this.filteredOptions.length - 1)
+      } else if (key === 'ArrowUp') {
+        e.preventDefault()
+        this.highlight = Math.max((this.highlight || 0) - 1, 0)
+      } else if (!this.searchQuery && (key === 'ArrowRight' || key === 'ArrowLeft')) {
+        e.preventDefault()
+        const opt = this.flatOptions[this.highlight]
+        if (opt && opt.hasChildren) {
+          if (key === 'ArrowRight' && !opt.expanded) this.toggleNode(this.highlight)
+          if (key === 'ArrowLeft' && opt.expanded) this.toggleNode(this.highlight)
+        }
+      }
+    },
+    onRootMouseDown(e) {
+      if (this.dropdownOnly) e.preventDefault()
+    },
+    _onDocClick(e) {
+      if (!this.open) return
+      if (this.$el && this.$el.contains(e.target)) return
+      this.open = false
+    },
+    _treeFlatten(nodes, keys, expandedMap, depth, pathArr) {
+      let out = []
+      ;(nodes || []).forEach((node, idx) => {
+        const path = pathArr.concat(idx)
+        const id = path.join('-')
+        const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []
+        const hasChildren = children.length > 0
+        const expanded = hasChildren && !!expandedMap[id]
+        out.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id, depth, hasChildren, expanded })
+        if (expanded) out = out.concat(this._treeFlatten(children, keys, expandedMap, depth + 1, path))
+      })
+      return out
+    },
+    _treeFlattenAll(nodes, keys) {
+      const result = []
+      const walk = (list) => {
+        ;(list || []).forEach(node => {
+          const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []
+          result.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id: String(node[keys.valueKey]), depth: 0, hasChildren: false, expanded: false })
+          if (children.length) walk(children)
+        })
+      }
+      walk(nodes)
+      return result
+    },
+    _treeFindLabel(nodes, keys, value) {
+      for (const node of (nodes || [])) {
+        if (String(node[keys.valueKey]) === value) {
+          return node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])
+        }
+        const found = this._treeFindLabel(node[keys.childrenKey], keys, value)
+        if (found != null) return found
+      }
+      return null
+    },
+    _treeFindPath(nodes, keys, value, pathArr) {
+      for (let i = 0; i < (nodes || []).length; i++) {
+        const node = nodes[i]
+        const path = pathArr.concat(i)
+        if (String(node[keys.valueKey]) === value) return [path.join('-')]
+        const children = node[keys.childrenKey]
+        if (Array.isArray(children)) {
+          const sub = this._treeFindPath(children, keys, value, path)
+          if (sub) return [path.join('-')].concat(sub)
+        }
+      }
+      return null
+    }
+  }
+}
+</script>
+
+<style>
+/* Tree toggle */
+.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;
+}
+</style>