vue2-excel-grid 2.6.6 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.6.6",
+  "version": "2.8.0",
   "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

@@ -978,7 +978,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'
@@ -1273,13 +1273,13 @@ const ExcelGridComponent = {
      * shrinking columns illegibly thin.
      *
      * Highest-priority width control: overrides `col.width` as an absolute
-     * value, `autoWidth`, and double-click auto-fit (still disabled while
-     * this is on). Manual column resize (drag handle) IS allowed — dragging
-     * a column's handle turns that column into a fixed px width, excluded
-     * from the fit; the rest keep scaling proportionally to fill what's
-     * left, which can reintroduce horizontal scroll if the fixed column(s)
-     * alone exceed the viewport. Pinned columns count toward the fit too —
-     * the goal is the whole row fitting, regardless of pin state.
+     * value and `autoWidth`. Manual column resize (drag handle) and
+     * double-click auto-fit ARE both allowed — either one turns that column
+     * into a fixed px width, excluded from the fit; the rest keep scaling
+     * proportionally to fill what's left, which can reintroduce horizontal
+     * scroll if the fixed column(s) alone exceed the viewport. Pinned
+     * columns count toward the fit too — the goal is the whole row fitting,
+     * regardless of pin state.
      * @type {Boolean}
      * @default false
      * @example
@@ -4536,7 +4536,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 +4622,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 +4952,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 }
         }
@@ -6036,8 +6038,12 @@ const ExcelGridComponent = {
       this.resizing.active = false
     },
 
+    // Double-click-the-header "AutoFit column width" — same idea as Excel/Sheets'
+    // double-click-the-border shortcut. Under fitColumns, same override
+    // treatment as a manual drag-resize (see commitResize/_applyFitColumns):
+    // this column becomes a fixed px width excluded from the proportional
+    // fit, the rest keep scaling in what's left.
     autoFitColumn(ci) {
-      if (this.fitColumns) return
       const col = this.leafCols[ci]
       if (!col) return
       let maxLen = (col.title || '').length
@@ -6049,6 +6055,10 @@ const ExcelGridComponent = {
       this.$set(this.colWidths, ci, newWidth)
       this.$delete(this.relativeColSpecs, ci)
       this._cellStyleCache = Object.create(null)
+      if (this.fitColumns) {
+        this.$set(this.fitColumnsOverrides, col.key, true)
+        this._applyFitColumns()
+      }
       this.$emit('column-resize', { index: ci, newSize: newWidth })
     },
 
@@ -8432,6 +8442,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;

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))