vue2-excel-grid 1.7.0 → 1.7.2

package/package.json

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

package/src/components/EgLocalSyncModal.vue

@@ -13,20 +13,17 @@
             <span>{{ t.localSyncSavedAt }}: {{ savedAtText }}</span>
             <span>{{ snapshot.data.length }} {{ t.localSyncRows }}</span>
           </div>
-          <div class="eg-lsm-table-wrap">
-            <table class="eg-lsm-table">
-              <thead>
-                <tr>
-                  <th v-for="col in columns" :key="col.key">{{ col.title || col.key }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(row, ri) in previewRows" :key="ri">
-                  <td v-for="col in columns" :key="col.key">{{ resolveCellDisplay(row, col) }}</td>
-                </tr>
-              </tbody>
-            </table>
-            <div v-if="hiddenRowCount > 0" class="eg-lsm-more">{{ moreRowsText }}</div>
+          <div class="eg-lsm-grid-wrap">
+            <component
+              :is="gridOptions"
+              :data="snapshot.data"
+              :columns="columns"
+              :height="360"
+              :locale="locale"
+              :theme="theme"
+              locked
+              :toolbar="false"
+            />
           </div>
         </template>
       </div>
@@ -69,18 +66,27 @@
 // and lets the host Restore it back into the grid or delete it. Not exported
 // from src/index.js (same "internal-only" convention as EgDatePicker.vue /
 // EgCheckbox.vue) — purpose-built for ExcelGrid.vue, not meant for standalone use.
-const PREVIEW_ROW_LIMIT = 200
-
+//
+// The preview itself is a real, nested ExcelGrid instance (locked/read-only,
+// no toolbar) rather than a hand-rolled <table> — this gets column
+// formatting/select-labels/date-formatting/virtual scrolling for free and
+// correctly resolves function-based col.options against the preview grid's
+// OWN row indices (impossible for a detached snapshot row via the live
+// grid's own resolver). `gridOptions` is ExcelGrid.vue's own `$options`,
+// passed down by the parent instance instead of importing ExcelGrid.vue
+// here directly — that import would be circular (ExcelGrid.vue -> this file
+// -> ExcelGrid.vue).
 import { getMessages } from '../utils/i18n.js'
 
 export default {
   name: 'EgLocalSyncModal',
   props: {
     visible: { type: Boolean, default: false },
+    gridOptions: { type: Object, required: true },
     columns: { type: Array, default: () => [] },
     snapshot: { type: Object, default: null }, // { data, updatedAt } | null
-    resolveCellDisplay: { type: Function, required: true },
-    locale: { type: String, default: 'en' }
+    locale: { type: String, default: 'en' },
+    theme: { type: String, default: 'excel' }
   },
   data() {
     return { confirmingClear: false }
@@ -90,17 +96,6 @@ export default {
     savedAtText() {
       if (!this.snapshot) return ''
       return new Date(this.snapshot.updatedAt).toLocaleString()
-    },
-    previewRows() {
-      if (!this.snapshot) return []
-      return this.snapshot.data.slice(0, PREVIEW_ROW_LIMIT)
-    },
-    hiddenRowCount() {
-      if (!this.snapshot) return 0
-      return Math.max(0, this.snapshot.data.length - PREVIEW_ROW_LIMIT)
-    },
-    moreRowsText() {
-      return (this.t.localSyncMoreRows || '').replace('{n}', this.hiddenRowCount)
     }
   },
   watch: {
@@ -133,7 +128,7 @@ export default {
   border: 1px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));
   border-radius: var(--eg-radius, var(--eg-radius-default));
   box-shadow: var(--eg-shadow-dialog, var(--eg-shadow-dialog-default));
-  width: min(720px, 92vw);
+  width: min(1200px, 94vw);
   max-height: 82vh;
   display: flex;
   flex-direction: column;
@@ -184,40 +179,10 @@ export default {
   color: var(--eg-color-text-secondary, var(--eg-color-text-secondary-default));
   margin-bottom: 10px;
 }
-.eg-lsm-table-wrap {
+.eg-lsm-grid-wrap {
   border: 1px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));
   border-radius: var(--eg-radius, var(--eg-radius-default));
-  overflow: auto;
-  max-height: 45vh;
-}
-.eg-lsm-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--eg-font-size, var(--eg-font-size-default));
-  color: var(--eg-color-text, var(--eg-color-text-default));
-}
-.eg-lsm-table th,
-.eg-lsm-table td {
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));
-  text-align: left;
-  white-space: nowrap;
-}
-.eg-lsm-table th {
-  position: sticky;
-  top: 0;
-  background: var(--eg-color-header-bg, var(--eg-color-header-bg-default));
-  font-weight: 600;
-  z-index: 1;
-}
-.eg-lsm-table tbody tr:last-child td {
-  border-bottom: none;
-}
-.eg-lsm-more {
-  padding: 8px 10px;
-  font-size: 12px;
-  color: var(--eg-color-text-muted, var(--eg-color-text-muted-default));
-  text-align: center;
+  overflow: hidden;
 }
 .eg-lsm-footer {
   display: flex;

package/src/components/ExcelGrid.vue

@@ -817,10 +817,11 @@
     <eg-local-sync-modal
       v-if="localSyncKey"
       :visible="localSyncModal.visible"
+      :grid-options="_selfComponentDef"
       :columns="_localSyncPreviewColumns"
       :snapshot="localSyncModal.snapshot"
-      :resolve-cell-display="_previewCellDisplay"
       :locale="locale"
+      :theme="internalTheme"
       @close="closeLocalSyncModal"
       @save="_onLocalSyncModalSave"
       @restore="restoreLocalSnapshot"
@@ -980,7 +981,14 @@ const DEFAULT_TOOLBAR_LIST = ['undoRedo', 'export', 'import', 'print', 'localSyn
 const COL_DRAG_TRANSITION = 'transform 200ms cubic-bezier(0.2, 0, 0, 1)'
 const THEME_LIST = ['excel', 'material', 'antd', 'fluent', 'carbon']
 
-export default {
+// Kept as a named const (rather than an inline `export default {}`) so the
+// local-sync preview modal can receive the plain component definition
+// itself as a prop — see `_selfComponentDef` below. Importing ExcelGrid.vue
+// from EgLocalSyncModal.vue to nest a grid inside it would be a circular
+// import (ExcelGrid.vue -> EgLocalSyncModal.vue -> ExcelGrid.vue); passing
+// this reference down avoids that entirely, and avoids passing `this.$options`
+// (an instance's merged/runtime-contaminated options, not a clean definition).
+const ExcelGridComponent = {
   name: 'ExcelGrid',
 
   components: { EgCheckbox, EgSelect, EgTreeSelect, EgDatePicker, EgLocalSyncModal },
@@ -1679,6 +1687,13 @@ export default {
       return this.leafCols.filter(col => col.type !== 'action')
     },
 
+    // Passed to EgLocalSyncModal so it can render the snapshot preview as a
+    // real, nested ExcelGrid instance — see the comment on ExcelGridComponent
+    // above for why this is the module-level const and not `this.$options`.
+    _selfComponentDef() {
+      return ExcelGridComponent
+    },
+
     _sizeConf() { return SIZE_CONFIG[this.internalSize] || SIZE_CONFIG.middle },
 
     sizeOptions() { return Object.keys(SIZE_CONFIG) },
@@ -6316,46 +6331,6 @@ export default {
       this.localSyncModal.visible = false
     },
 
-    // Best-effort display resolver for the modal's read-only preview table.
-    // Deliberately NOT the same as getCellDisplayValue(ci, val, ri): that
-    // method resolves column formatter/select-options against the LIVE grid
-    // (this._dataRaw[ri] at the live row index ri) — meaningless for a
-    // detached IndexedDB snapshot row that may not even correspond to the
-    // same row position in the current data. This takes the row object
-    // directly instead. Function-based (dependent/cascading) col.options
-    // can't be safely resolved without that live per-row context, so those
-    // fall back to showing the raw stored value — a deliberate, explainable
-    // limitation for a preview, not a bug.
-    _previewCellDisplay(row, col) {
-      const val = row ? row[col.key] : null
-      if (!col) return val == null ? '' : val
-      if (typeof col.formatter === 'function') {
-        try {
-          const out = col.formatter(val, row, null, col, col._flatIndex)
-          return out == null ? '' : out
-        } catch (e) {
-          return val == null ? '' : val
-        }
-      }
-      if (col.type === 'checkbox') return val ? '✓' : ''
-      if ((col.type === 'select' || col.type === 'treeSelect') && Array.isArray(col.options)) {
-        const { valueKey, labelKey } = this.treeOptionKeys(col)
-        const v = val == null ? '' : String(val)
-        if (col.type === 'treeSelect') {
-          const found = this._treeFindLabel(col.options, this.treeOptionKeys(col), v)
-          return found != null ? found : v
-        }
-        const found = col.options.find(o => String(typeof o === 'string' ? o : o[valueKey]) === v)
-        if (!found) return v
-        return typeof found === 'string' ? found : (found[labelKey] != null ? found[labelKey] : v)
-      }
-      if (col.type === 'date') {
-        const d = parseDateValue(val)
-        return d ? formatDate(d, col.format || 'YYYY-MM-DD') : (val == null ? '' : val)
-      }
-      return val == null ? '' : val
-    },
-
     toggleLock() {
       this.internalLocked = !this.internalLocked
       this.$emit('update:locked', this.internalLocked)
@@ -6448,6 +6423,8 @@ export default {
     }
   }
 }
+
+export default ExcelGridComponent
 </script>
 
 <style scoped>

package/src/utils/i18n.js

@@ -51,7 +51,6 @@ const messages = {
     localSyncEmpty:       'No local copy saved yet',
     localSyncSavedAt:     'Last saved',
     localSyncRows:        'rows',
-    localSyncMoreRows:    'and {n} more row(s)',
     localSyncSave:        'Save',
     localSyncSaveHint:    'Save the current table into the local copy',
     localSyncRestore:     'Restore',
@@ -123,7 +122,6 @@ const messages = {
     localSyncEmpty:       'Локальная копия пока не сохранена',
     localSyncSavedAt:     'Последнее сохранение',
     localSyncRows:        'строк',
-    localSyncMoreRows:    'и ещё {n} строк(и)',
     localSyncSave:        'Сохранить',
     localSyncSaveHint:    'Сохранить текущую таблицу в локальную копию',
     localSyncRestore:     'Восстановить',
@@ -195,7 +193,6 @@ const messages = {
     localSyncEmpty:       'Hali lokal saqlangan nusxa yo\'q',
     localSyncSavedAt:     'Oxirgi saqlangan',
     localSyncRows:        'qator',
-    localSyncMoreRows:    'va yana {n} ta qator',
     localSyncSave:        'Saqlash',
     localSyncSaveHint:    'Joriy jadvalni lokal nusxaga saqlash',
     localSyncRestore:     'Tiklash',
@@ -267,7 +264,6 @@ const messages = {
     localSyncEmpty:       'Ҳали лакал сақланган нусха йўқ',
     localSyncSavedAt:     'Охирги сақланган',
     localSyncRows:        'қатор',
-    localSyncMoreRows:    'ва яна {n} та қатор',
     localSyncSave:        'Сақлаш',
     localSyncSaveHint:    'Жорий жадвални лакал нусхага сақлаш',
     localSyncRestore:     'Тиклаш',