vue2-excel-grid 1.1.13 → 1.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "1.1.13",
+  "version": "1.1.16",
   "description": "Excel-style grid component for Vue 2.6.14 with virtual scrolling",
   "main": "dist/vue2-excel-grid.umd.js",
   "module": "dist/vue2-excel-grid.esm.js",

package/src/components/EgCheckbox.vue

@@ -0,0 +1,96 @@
+<template>
+  <label class="eg-checkbox" :class="{ 'eg-checkbox--disabled': disabled }">
+    <input
+      type="checkbox"
+      class="eg-checkbox-input"
+      :checked="isChecked"
+      :disabled="disabled"
+      @change="onChange"
+    />
+    <span class="eg-checkbox-box"></span>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'EgCheckbox',
+  model: { prop: 'value', event: 'input' },
+  props: {
+    value: { default: false },
+    trueValue: { default: true },
+    falseValue: { default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  computed: {
+    isChecked() {
+      return this.value === this.trueValue
+    }
+  },
+  methods: {
+    onChange(e) {
+      const val = e.target.checked ? this.trueValue : this.falseValue
+      this.$emit('input', val)
+      this.$emit('change', val)
+    }
+  }
+}
+</script>
+
+<style>
+.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;
+}
+</style>

package/src/components/EgSelect.vue

@@ -0,0 +1,377 @@
+<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 v-if="selectedOpt && selectedOpt.color" class="eg-select-dot" :style="{ background: selectedOpt.color }"></span>
+      <span class="eg-select-trigger-label" :class="{ 'eg-select-placeholder': !selectedOpt }">
+        {{ selectedOpt ? selectedOpt.label : placeholder }}
+      </span>
+      <span class="eg-select-caret">▾</span>
+    </div>
+
+    <!-- Options panel in grid dropdown-only mode (root IS the dropdown panel) -->
+    <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="String(opt.value)"
+        class="eg-select-option"
+        :class="{
+          'eg-select-option--active': String(opt.value) === String(value),
+          'eg-select-option--highlighted': idx === highlight
+        }"
+        @mousedown.prevent="pickOption(opt)"
+        @mouseover="highlight = idx"
+      >
+        <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>
+        {{ opt.label }}
+      </div>
+    </template>
+
+    <!-- Options panel in standalone mode (floating dropdown below trigger) -->
+    <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="String(opt.value)"
+        class="eg-select-option"
+        :class="{
+          'eg-select-option--active': String(opt.value) === String(value),
+          'eg-select-option--highlighted': idx === highlight
+        }"
+        @mousedown.prevent="pickOption(opt)"
+        @mouseover="highlight = idx"
+      >
+        <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>
+        {{ opt.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EgSelect',
+  model: { prop: 'value', event: 'input' },
+  props: {
+    value: { default: null },
+    options: { type: Array, default: () => [] },
+    enableSearch: { type: Boolean, default: false },
+    placeholder: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    dropdownOnly: { type: Boolean, default: false },
+    triggerRect: { type: Object, default: null }
+  },
+  data() {
+    return {
+      open: false,
+      searchQuery: '',
+      highlight: -1
+    }
+  },
+  computed: {
+    normalizedOptions() {
+      return (this.options || []).map(o =>
+        typeof o === 'string'
+          ? { value: o, label: o }
+          : { value: o.value, label: o.label != null ? o.label : String(o.value), color: o.color }
+      )
+    },
+    filteredOptions() {
+      if (!this.enableSearch || !this.searchQuery.trim()) return this.normalizedOptions
+      const q = this.searchQuery.trim().toLowerCase()
+      return this.normalizedOptions.filter(o => String(o.label || '').toLowerCase().includes(q))
+    },
+    selectedOpt() {
+      const v = String(this.value == null ? '' : this.value)
+      return this.normalizedOptions.find(o => String(o.value) === v) || null
+    },
+    overlayStyle() {
+      if (!this.dropdownOnly || !this.triggerRect) return { position: 'fixed', zIndex: 9999 }
+      const rect = this.triggerRect
+      const searchH = this.enableSearch ? 42 : 0
+      const approxH = Math.min(this.filteredOptions.length * 28 + 8 + searchH, 320)
+      const spaceBelow = window.innerHeight - rect.bottom
+      const top = spaceBelow >= approxH ? rect.bottom : rect.top - approxH
+      return {
+        position: 'fixed',
+        top: top + 'px',
+        left: rect.left + 'px',
+        minWidth: Math.max(rect.width, 120) + 'px',
+        maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + 'px',
+        zIndex: 9999
+      }
+    }
+  },
+  watch: {
+    open(val) {
+      if (val && this.enableSearch) {
+        this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })
+      }
+    }
+  },
+  mounted() {
+    if (this.dropdownOnly) {
+      // Portal: move to document.body so position:fixed is always relative to viewport,
+      // regardless of any CSS transform on ancestor elements in the host project.
+      // Vue's removeNode uses el.parentNode, so cleanup works correctly after the move.
+      if (this.$el && this.$el.parentNode) {
+        document.body.appendChild(this.$el)
+      }
+      const v = String(this.value == null ? '' : this.value)
+      this.highlight = this.normalizedOptions.findIndex(o => String(o.value) === v)
+      if (this.enableSearch) {
+        this.$nextTick(() => { this.$refs.searchInput && this.$refs.searchInput.focus() })
+      }
+    } else {
+      document.addEventListener('click', this._onDocClick)
+    }
+  },
+  beforeDestroy() {
+    if (!this.dropdownOnly) {
+      document.removeEventListener('click', this._onDocClick)
+    }
+  },
+  methods: {
+    toggle() {
+      if (this.disabled) return
+      this.open = !this.open
+      if (this.open) {
+        const v = String(this.value == null ? '' : this.value)
+        this.highlight = this.normalizedOptions.findIndex(o => String(o.value) === v)
+        this.searchQuery = ''
+      }
+    },
+    pickOption(opt) {
+      this.$emit('input', opt.value)
+      this.$emit('select', { value: opt.value, label: opt.label })
+      if (!this.dropdownOnly) {
+        this.open = false
+        this.searchQuery = ''
+        this.highlight = -1
+      }
+    },
+    onSearch(e) {
+      this.searchQuery = e.target.value
+      this.highlight = 0
+    },
+    onSearchKey(e) {
+      const key = e.key
+      if (key === 'Escape') {
+        e.preventDefault()
+        if (this.dropdownOnly) this.$emit('close')
+        else { this.open = false; this.searchQuery = '' }
+      } else if (key === 'ArrowDown') {
+        e.preventDefault()
+        this.highlight = Math.min((this.highlight || 0) + 1, this.filteredOptions.length - 1)
+      } else if (key === 'ArrowUp') {
+        e.preventDefault()
+        this.highlight = Math.max((this.highlight || 0) - 1, 0)
+      } else if (key === 'Enter') {
+        e.preventDefault()
+        const opt = this.filteredOptions[this.highlight]
+        if (opt) this.pickOption(opt)
+      }
+    },
+    handleKey(e) {
+      const key = e.key
+      if (key === 'Escape') {
+        e.preventDefault()
+        this.$emit('close')
+      } else if (key === 'Enter' || key === ' ') {
+        e.preventDefault()
+        const opt = this.filteredOptions[this.highlight]
+        if (opt) this.pickOption(opt)
+        else this.$emit('close')
+      } else if (key === 'ArrowDown') {
+        e.preventDefault()
+        this.highlight = Math.min((this.highlight || 0) + 1, this.filteredOptions.length - 1)
+      } else if (key === 'ArrowUp') {
+        e.preventDefault()
+        this.highlight = Math.max((this.highlight || 0) - 1, 0)
+      }
+    },
+    onRootMouseDown(e) {
+      if (this.dropdownOnly) e.preventDefault()
+    },
+    _onDocClick(e) {
+      if (!this.open) return
+      if (this.$el && this.$el.contains(e.target)) return
+      this.open = false
+    }
+  }
+}
+</script>
+
+<style>
+/* Standalone wrapper */
+.eg-select-wrapper {
+  position: relative;
+  display: inline-block;
+  min-width: 120px;
+  font-size: 13px;
+  font-family: inherit;
+}
+.eg-select-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  min-height: 30px;
+  padding: 4px 8px;
+  box-sizing: border-box;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  user-select: none;
+  color: #333;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.eg-select-trigger:hover {
+  border-color: #1a73e8;
+}
+.eg-select-trigger--open {
+  border-color: #1a73e8;
+  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);
+}
+.eg-select-trigger--disabled {
+  background: #f5f5f5;
+  cursor: default;
+  color: #aaa;
+}
+.eg-select-trigger-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.eg-select-placeholder {
+  color: #aaa;
+}
+.eg-select-caret {
+  flex-shrink: 0;
+  color: #888;
+  font-size: 12px;
+}
+
+/* Dropdown panel */
+.eg-select-dropdown {
+  background: #fff;
+  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-dropdown--floating {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 100%;
+  z-index: 999;
+  margin-top: 2px;
+}
+
+/* Search input inside dropdown */
+.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);
+}
+
+/* Option rows */
+.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;
+}
+
+/* Color dot */
+.eg-select-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: inline-block;
+  margin-top: 3px;
+}
+</style>