vue2-excel-grid 2.6.7 → 2.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.6.7",
+  "version": "2.8.1",
   "description": "Excel-style grid component for Vue 2.6.14 with virtual scrolling",
   "license": "MIT",
   "author": "Fozilbek Raimberdiyev",

package/src/components/EgDatePicker.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { parseDateValue, formatDate, toISO, todayISO } from '../utils/dateUtils.js'
+import { parseDateValue, parseDateStrict, getFormatSpec, formatDate, toISO, todayISO, DEFAULT_DATE_FORMAT } from '../utils/dateUtils.js'
 import { getMessages } from '../utils/i18n.js'
 
 export default {
@@ -62,7 +62,7 @@ export default {
 
   props: {
     value:       { default: null },
-    format:      { type: String, default: 'YYYY-MM-DD' },
+    format:      { type: String, default: DEFAULT_DATE_FORMAT },
     locale:      { type: String, default: 'en' },
     triggerRect: { type: Object, default: null }
   },
@@ -167,14 +167,7 @@ export default {
     },
 
     _autoFillSep(raw) {
-      const fmt = this.format
-      let sep, segments
-      if      (fmt === 'YYYY-MM-DD') { sep = '-'; segments = [4, 2, 2] }
-      else if (fmt === 'DD.MM.YYYY') { sep = '.'; segments = [2, 2, 4] }
-      else if (fmt === 'DD/MM/YYYY') { sep = '/'; segments = [2, 2, 4] }
-      else if (fmt === 'MM/DD/YYYY') { sep = '/'; segments = [2, 2, 4] }
-      else return raw
-
+      const { sep, segments } = getFormatSpec(this.format)
       const maxDigits = segments.reduce((a, b) => a + b, 0)
       const digits = raw.replace(/\D/g, '').slice(0, maxDigits)
 
@@ -207,7 +200,9 @@ export default {
     _commitInput() {
       const val = this.inputVal.trim()
       if (val === '') { this.$emit('pick', ''); return }
-      const d = parseDateValue(val)
+      // Strict: must match THIS column's own format exactly (not just any
+      // recognized format) and be a real calendar date — see parseDateStrict.
+      const d = parseDateStrict(val, this.format)
       if (!d) { this.inputError = true; return }
       this.$emit('pick', formatDate(d, this.format))
     },

package/src/components/ExcelGrid.vue

@@ -144,6 +144,8 @@
     tabindex="0"
     @keydown="onKeyDown"
     @keypress="onKeyPress"
+    @mousemove="onGridMouseMove"
+    @mouseleave="onGridMouseLeave"
     ref="wrapper"
   >
     <!-- Context menu -->
@@ -508,6 +510,7 @@
                     :key="'srh-' + ri"
                     class="eg-row-header-cell"
                     :style="getRowHeaderStyle(ri)"
+                    :data-row="ri"
                     @mousedown="onRowHeaderMouseDown($event, ri)"
                     @contextmenu.prevent="onRowContextMenu($event, ri)"
                   >
@@ -548,7 +551,7 @@
               <div :style="{ height: totalVirtualHeight + 'px', position: 'relative' }">
                 <div :style="{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }">
                   <template v-for="ri in visibleRowRange">
-                      <div v-if="!isRowHidden(ri)" :key="'fc-row-' + ri" class="eg-row" :class="{ 'eg-row--even': ri % 2 === 0 }" :style="getRowStyle(ri)">
+                      <div v-if="!isRowHidden(ri)" :key="'fc-row-' + ri" class="eg-row" :class="{ 'eg-row--even': ri % 2 === 0 }" :style="getRowStyle(ri)" :data-row="ri">
                         <template v-for="(col, ci) in leafCols">
                           <template v-if="isColumnPinnedLeft(ci) && !isColHidden(ci)">
                             <div
@@ -667,7 +670,7 @@
               <div :style="{ height: totalVirtualHeight + 'px', position: 'relative' }">
                 <div :style="{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }">
                   <template v-for="ri in visibleRowRange">
-                      <div v-if="!isRowHidden(ri)" :key="'pr-row-' + ri" class="eg-row" :class="{ 'eg-row--even': ri % 2 === 0 }" :style="getRowStyle(ri)">
+                      <div v-if="!isRowHidden(ri)" :key="'pr-row-' + ri" class="eg-row" :class="{ 'eg-row--even': ri % 2 === 0 }" :style="getRowStyle(ri)" :data-row="ri">
                         <template v-for="col in pinnedRightCols">
                           <div
                             :key="'pr-cell-' + ri + '-' + col._flatIndex"
@@ -978,7 +981,7 @@ import EgSelect from './EgSelect.vue'
 import EgTreeSelect from './EgTreeSelect.vue'
 import EgDatePicker from './EgDatePicker.vue'
 import EgLocalSyncModal from './EgLocalSyncModal.vue'
-import { parseDateValue, formatDate } from '../utils/dateUtils.js'
+import { parseDateValue, formatDate, DEFAULT_DATE_FORMAT } from '../utils/dateUtils.js'
 import { formatNumber as _formatNumber } from '../utils/numberFormat.js'
 import { Mask, MaskInput } from '../utils/mask.js'
 import { listVersions, getVersion, deleteVersion, saveOrTouchVersion, putBuffer, getBuffer, clearBuffer } from '../utils/idbStore.js'
@@ -2622,6 +2625,7 @@ const ExcelGridComponent = {
     // iterating all 50,000 rows each time. With 1200 cells per render that's
     // 60 million iterations per render (~600ms). _dataRaw bypasses this.
     this._dataRaw = this.data || []
+    this._hoveredRi = -1
 
     // Non-reactive caches: same (w,h) → same style object → Vue 2 skips DOM style writes
     this._cellStyleCache = Object.create(null)
@@ -3824,6 +3828,45 @@ const ExcelGridComponent = {
       this.hideSortMenu()
     },
 
+
+    // =========================================================
+    // HOVER HIGHLIGHT
+    // =========================================================
+    onGridMouseMove(e) {
+      const rowNode = e.target.closest('[data-row]')
+      const newRi = rowNode ? parseInt(rowNode.getAttribute('data-row'), 10) : -1
+
+      if (this._hoveredRi !== newRi) {
+        if (this._hoveredRi >= 0) {
+          const oldEls = this.$refs.wrapper.querySelectorAll(`[data-row="${this._hoveredRi}"]`)
+          for (let i = 0; i < oldEls.length; i++) {
+            oldEls[i].classList.remove('eg-row--hover')
+          }
+        }
+        
+        this._hoveredRi = newRi
+
+        if (this._hoveredRi >= 0) {
+          const newEls = this.$refs.wrapper.querySelectorAll(`[data-row="${this._hoveredRi}"]`)
+          for (let i = 0; i < newEls.length; i++) {
+            newEls[i].classList.add('eg-row--hover')
+          }
+        }
+      }
+    },
+    
+    onGridMouseLeave() {
+      if (this._hoveredRi >= 0) {
+        if (this.$refs.wrapper) {
+          const oldEls = this.$refs.wrapper.querySelectorAll(`[data-row="${this._hoveredRi}"]`)
+          for (let i = 0; i < oldEls.length; i++) {
+            oldEls[i].classList.remove('eg-row--hover')
+          }
+        }
+        this._hoveredRi = -1
+      }
+    },
+
     // =========================================================
     // KEYBOARD NAVIGATION (3.2)
     // =========================================================
@@ -4536,7 +4579,9 @@ const ExcelGridComponent = {
         rawOptions: this.resolveOptionsArray(col, ri, ci),
         currentValue,
         rect: rectObj,
-        enableSearch: !!col.enableSearch,
+        // Defaults to on (opt out with enableSearch: false) — same convention
+        // as clearable below.
+        enableSearch: col.enableSearch !== false,
         clearable: col.clearable !== false
       }
     },
@@ -4620,7 +4665,7 @@ const ExcelGridComponent = {
       if (this.isSelectLikeCol(col)) return this.getSelectLabel(ci, val, ri)
       if (col.type === 'date') {
         const d = parseDateValue(val)
-        return d ? formatDate(d, col.format || 'YYYY-MM-DD') : (val == null ? '' : val)
+        return d ? formatDate(d, col.format || DEFAULT_DATE_FORMAT) : (val == null ? '' : val)
       }
       return val == null ? '' : val
     },
@@ -4950,7 +4995,7 @@ const ExcelGridComponent = {
         const val = this.getCellValue(row, col)
         this.datePickerOverlay = {
           row, col,
-          format: colDef.format || 'YYYY-MM-DD',
+          format: colDef.format || DEFAULT_DATE_FORMAT,
           value: val == null ? '' : String(val),
           rect: { top: rect.top, bottom: rect.bottom, left: rect.left, width: rect.width }
         }
@@ -8440,6 +8485,35 @@ export default ExcelGridComponent
   line-height: 1;
 }
 
+/* ===== DATE CELL ICON ===== */
+/* Same reasoning/placement as the select caret above — reserve room at the
+   cell level so col.align:'right'/centered text never reaches the icon's
+   zone, regardless of alignment. mask-image (not content:url()/an emoji) so
+   the icon is a single flat color that follows --eg-color-text-muted in
+   every theme, light and dark alike, instead of a fixed-color raster/emoji
+   glyph that wouldn't match. */
+.eg-cell-date:not(.eg-cell--has-suffix) {
+  padding-right: calc(var(--eg-cell-padding-x, var(--eg-cell-padding-x-default)) + 16px);
+}
+.eg-cell--has-suffix.eg-cell-date::after { display: none; }
+.eg-cell-date::after {
+  content: '';
+  position: absolute;
+  right: 5px;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  transform: translateY(-50%);
+  background-color: var(--eg-color-text-muted, var(--eg-color-text-muted-default));
+  pointer-events: none;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='1.5' y='3' width='13' height='11' rx='1.5'/%3E%3Cline x1='1.5' y1='6.3' x2='14.5' y2='6.3'/%3E%3Cline x1='4.5' y1='1.2' x2='4.5' y2='4.2'/%3E%3Cline x1='11.5' y1='1.2' x2='11.5' y2='4.2'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='1.5' y='3' width='13' height='11' rx='1.5'/%3E%3Cline x1='1.5' y1='6.3' x2='14.5' y2='6.3'/%3E%3Cline x1='4.5' y1='1.2' x2='4.5' y2='4.2'/%3E%3Cline x1='11.5' y1='1.2' x2='11.5' y2='4.2'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
 /* ===== CHECKBOX CELL ===== */
 .eg-cell-checkbox {
   justify-content: center;
@@ -8475,7 +8549,12 @@ export default ExcelGridComponent
 .eg-row--even .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {
   background: var(--eg-color-row-stripe, var(--eg-color-row-stripe-default));
 }
-.eg-row:hover .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {
+.eg-row:hover .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview),
+.eg-row.eg-row--hover .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {
+  background: var(--eg-color-row-hover, var(--eg-color-row-hover-default));
+}
+.eg-row-header-cell:hover,
+.eg-row-header-cell.eg-row--hover {
   background: var(--eg-color-row-hover, var(--eg-color-row-hover-default));
 }
 

package/src/utils/dateUtils.js

@@ -2,24 +2,54 @@
  * Date parsing and formatting utilities for the date cell type.
  * No external dependencies — pure JS.
  *
- * Internal storage format: ISO 8601 'YYYY-MM-DD'
- * Display format controlled by column config `format` prop.
+ * Display/storage format controlled by column config `format` prop
+ * (default 'DD-MM-YYYY').
  */
 
-const ISO_RE    = /^(\d{4})-(\d{2})-(\d{2})$/
-const DMY_DOT   = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/   // DD.MM.YYYY
-const DMY_SLASH = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/   // DD/MM/YYYY
-const MDY_SLASH = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/   // MM/DD/YYYY (same regex, resolved by format hint)
+// One definition per supported format string: which regex a candidate string
+// must match, in what order its captured groups map to year/month/day, and
+// (sep/segments) how manual typing auto-inserts separators as digits are
+// entered — see EgDatePicker.vue's _autoFillSep, which reads this table
+// directly so the two never drift apart.
+const FORMATS = {
+  'YYYY-MM-DD': { re: /^(\d{4})-(\d{2})-(\d{2})$/,        order: ['Y', 'M', 'D'], sep: '-', segments: [4, 2, 2] },
+  'DD-MM-YYYY': { re: /^(\d{1,2})-(\d{1,2})-(\d{4})$/,    order: ['D', 'M', 'Y'], sep: '-', segments: [2, 2, 4] },
+  'DD.MM.YYYY': { re: /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/,  order: ['D', 'M', 'Y'], sep: '.', segments: [2, 2, 4] },
+  'DD/MM/YYYY': { re: /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/,  order: ['D', 'M', 'Y'], sep: '/', segments: [2, 2, 4] },
+  'MM/DD/YYYY': { re: /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/,  order: ['M', 'D', 'Y'], sep: '/', segments: [2, 2, 4] }
+}
+
+export const DEFAULT_DATE_FORMAT = 'DD-MM-YYYY'
 
 function pad(n) { return String(n).padStart(2, '0') }
 
+// Real calendar-day check — rejects e.g. day 30 of February, month 13, day 0 —
+// instead of relying on `new Date(y, m-1, d)`'s silent overflow-rollover
+// (which would otherwise turn "30.02.2024" into a DIFFERENT, wrong date
+// instead of failing). Leap years handled correctly via the day-0-of-next-
+// month trick (JS Date's own calendar math, not reimplemented here).
+function isValidYMD(y, m, d) {
+  if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return false
+  if (m < 1 || m > 12 || d < 1) return false
+  return d <= new Date(y, m, 0).getDate()
+}
+
+function extract(match, order) {
+  const parts = {}
+  order.forEach((field, i) => { parts[field] = +match[i + 1] })
+  if (!isValidYMD(parts.Y, parts.M, parts.D)) return null
+  return new Date(parts.Y, parts.M - 1, parts.D)
+}
+
 /**
  * Parse any common date string into a Date object (local midnight).
- * Accepts: 'YYYY-MM-DD', 'DD.MM.YYYY', 'DD/MM/YYYY'.
- * Returns null if unparseable.
+ * Lenient — tries every known format (not just `hint`/a specific column's
+ * own format), for reading already-stored values that may come from an API
+ * or a different format than the column's current config. Returns null if
+ * unparseable OR not a real calendar date (see isValidYMD).
  *
  * @param {string|number|Date|null} val
- * @param {string} [hint] - 'MDY' to treat slash format as MM/DD/YYYY
+ * @param {string} [hint] - 'MDY' to treat an ambiguous slash format as MM/DD/YYYY
  * @returns {Date|null}
  */
 export function parseDateValue(val, hint) {
@@ -29,30 +59,53 @@ export function parseDateValue(val, hint) {
   const s = String(val).trim()
 
   let m
-  if ((m = ISO_RE.exec(s))) {
-    return new Date(+m[1], +m[2] - 1, +m[3])
-  }
-  if ((m = DMY_DOT.exec(s))) {
-    return new Date(+m[3], +m[2] - 1, +m[1])
-  }
-  if ((m = DMY_SLASH.exec(s))) {
-    if (hint === 'MDY') return new Date(+m[3], +m[1] - 1, +m[2])
-    return new Date(+m[3], +m[2] - 1, +m[1])
+  if ((m = FORMATS['YYYY-MM-DD'].re.exec(s))) return extract(m, FORMATS['YYYY-MM-DD'].order)
+  if ((m = FORMATS['DD-MM-YYYY'].re.exec(s))) return extract(m, FORMATS['DD-MM-YYYY'].order)
+  if ((m = FORMATS['DD.MM.YYYY'].re.exec(s))) return extract(m, FORMATS['DD.MM.YYYY'].order)
+  if ((m = FORMATS['DD/MM/YYYY'].re.exec(s))) {
+    return extract(m, hint === 'MDY' ? FORMATS['MM/DD/YYYY'].order : FORMATS['DD/MM/YYYY'].order)
   }
   return null
 }
 
+/**
+ * Parse a string strictly against ONE specific format — used to validate
+ * manual text-input before it's allowed to commit (EgDatePicker's
+ * _commitInput). Unlike parseDateValue(), a string shaped like a DIFFERENT
+ * known format (e.g. ISO typed into a 'DD.MM.YYYY' column) is rejected, not
+ * silently accepted — and, like parseDateValue(), an out-of-range calendar
+ * date (Feb 30, month 13, ...) is rejected rather than rolled over.
+ *
+ * @param {string} val
+ * @param {string} [fmt] - defaults to DEFAULT_DATE_FORMAT if unrecognized/omitted
+ * @returns {Date|null}
+ */
+export function parseDateStrict(val, fmt) {
+  if (val == null || val === '') return null
+  const spec = FORMATS[fmt] || FORMATS[DEFAULT_DATE_FORMAT]
+  const m = spec.re.exec(String(val).trim())
+  if (!m) return null
+  return extract(m, spec.order)
+}
+
+// Exposed so EgDatePicker's manual-typing auto-separator logic (_autoFillSep)
+// shares the exact same per-format segment lengths as parsing/validation,
+// instead of keeping a second, driftable copy of the same table.
+export function getFormatSpec(fmt) {
+  return FORMATS[fmt] || FORMATS[DEFAULT_DATE_FORMAT]
+}
+
 /**
  * Format a Date object according to the format string.
  * Supported tokens: YYYY MM DD
  *
  * @param {Date} date
- * @param {string} [fmt='YYYY-MM-DD']
+ * @param {string} [fmt=DEFAULT_DATE_FORMAT]
  * @returns {string}
  */
 export function formatDate(date, fmt) {
   if (!date || isNaN(date.getTime())) return ''
-  const f = fmt || 'YYYY-MM-DD'
+  const f = fmt || DEFAULT_DATE_FORMAT
   return f
     .replace('YYYY', date.getFullYear())
     .replace('MM',   pad(date.getMonth() + 1))