vue2-excel-grid 1.7.2 → 2.0.0

package/package.json

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

package/src/components/EgLocalSyncModal.vue

@@ -6,17 +6,30 @@
         <button type="button" class="eg-lsm-close" @click="$emit('close')" :title="t.localSyncClose">✕</button>
       </div>
 
-      <div class="eg-lsm-body">
-        <div v-if="!snapshot" class="eg-lsm-empty">{{ t.localSyncEmpty }}</div>
-        <template v-else>
-          <div class="eg-lsm-meta">
-            <span>{{ t.localSyncSavedAt }}: {{ savedAtText }}</span>
-            <span>{{ snapshot.data.length }} {{ t.localSyncRows }}</span>
-          </div>
-          <div class="eg-lsm-grid-wrap">
+      <div v-if="!hasVersions" class="eg-lsm-empty">{{ t.localSyncEmpty }}</div>
+      <div v-else class="eg-lsm-body">
+        <ul class="eg-lsm-version-list">
+          <li
+            v-for="v in versions"
+            :key="v.id"
+            class="eg-lsm-version-item"
+            :class="{ 'eg-lsm-version-item-active': v.id === selectedId }"
+            @click="$emit('select', v.id)"
+          >
+            <span class="eg-lsm-version-date">{{ formatDateTime(v.createdAt) }}</span>
+            <span class="eg-lsm-version-rows">{{ v.rowCount }} {{ t.localSyncRows }}</span>
+            <span v-if="v.updatedAt !== v.createdAt" class="eg-lsm-version-touched">
+              {{ t.localSyncTouchedAt }}: {{ formatDateTime(v.updatedAt) }}
+            </span>
+          </li>
+        </ul>
+
+        <div class="eg-lsm-preview">
+          <div v-if="!selectedVersion" class="eg-lsm-preview-loading">{{ t.localSyncLoading }}</div>
+          <div v-else class="eg-lsm-grid-wrap">
             <component
               :is="gridOptions"
-              :data="snapshot.data"
+              :data="selectedVersion.data"
               :columns="columns"
               :height="360"
               :locale="locale"
@@ -25,21 +38,21 @@
               :toolbar="false"
             />
           </div>
-        </template>
+        </div>
       </div>
 
       <div class="eg-lsm-footer">
-        <template v-if="confirmingClear">
+        <template v-if="confirmingClearId">
           <span class="eg-lsm-confirm-text">{{ t.localSyncConfirmClear }}</span>
-          <button type="button" class="eg-lsm-btn" @click="confirmingClear = false">{{ t.localSyncConfirmNo }}</button>
+          <button type="button" class="eg-lsm-btn" @click="confirmingClearId = null">{{ t.localSyncConfirmNo }}</button>
           <button type="button" class="eg-lsm-btn eg-lsm-btn-danger" @click="onConfirmClear">{{ t.localSyncConfirmYes }}</button>
         </template>
         <template v-else>
           <button
             type="button"
             class="eg-lsm-btn eg-lsm-btn-danger"
-            :disabled="!snapshot"
-            @click="confirmingClear = true"
+            :disabled="!selectedId"
+            @click="confirmingClearId = selectedId"
           >{{ t.localSyncClear }}</button>
           <button
             type="button"
@@ -50,9 +63,9 @@
           <button
             type="button"
             class="eg-lsm-btn eg-lsm-btn-accent"
-            :disabled="!snapshot"
+            :disabled="!selectedId"
             :title="t.localSyncRestoreHint"
-            @click="$emit('restore')"
+            @click="$emit('restore', selectedId)"
           >{{ t.localSyncRestore }}</button>
         </template>
       </div>
@@ -62,20 +75,17 @@
 
 <script>
 // "Dumb" presentation component for ExcelGrid.vue's localSyncKey feature —
-// shows the last IndexedDB-saved v-model snapshot (see src/utils/idbStore.js)
-// 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.
+// lists the locally saved IndexedDB *versions* (see src/utils/idbStore.js)
+// for the current key, previews the selected one, and lets the host Restore
+// 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.
 //
 // 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).
+// no toolbar) — see the comment on ExcelGridComponent in ExcelGrid.vue for
+// why `gridOptions` is passed down as a plain component definition instead
+// of importing ExcelGrid.vue here (that would be circular) or using the
+// runtime-contaminated `this.$options`.
 import { getMessages } from '../utils/i18n.js'
 
 export default {
@@ -84,30 +94,33 @@ export default {
     visible: { type: Boolean, default: false },
     gridOptions: { type: Object, required: true },
     columns: { type: Array, default: () => [] },
-    snapshot: { type: Object, default: null }, // { data, updatedAt } | null
+    versions: { type: Array, default: () => [] }, // [{id, createdAt, updatedAt, rowCount}]
+    selectedId: { type: String, default: null },
+    selectedVersion: { type: Object, default: null }, // {id, data, createdAt, updatedAt} | null
     locale: { type: String, default: 'en' },
     theme: { type: String, default: 'excel' }
   },
   data() {
-    return { confirmingClear: false }
+    return { confirmingClearId: null }
   },
   computed: {
     t() { return getMessages(this.locale) },
-    savedAtText() {
-      if (!this.snapshot) return ''
-      return new Date(this.snapshot.updatedAt).toLocaleString()
-    }
+    hasVersions() { return this.versions.length > 0 }
   },
   watch: {
-    // A freshly opened modal (or a snapshot that just got deleted/restored)
+    // A freshly opened modal (or a version that just got deleted/restored)
     // should never inherit a stale "are you sure?" state from last time.
-    visible(val) { if (!val) this.confirmingClear = false },
-    snapshot() { this.confirmingClear = false }
+    visible(val) { if (!val) this.confirmingClearId = null },
+    versions() { this.confirmingClearId = null }
   },
   methods: {
+    formatDateTime(ts) {
+      return ts ? new Date(ts).toLocaleString() : ''
+    },
     onConfirmClear() {
-      this.confirmingClear = false
-      this.$emit('clear')
+      const id = this.confirmingClearId
+      this.confirmingClearId = null
+      this.$emit('clear', id)
     }
   }
 }
@@ -160,24 +173,62 @@ export default {
 .eg-lsm-close:hover {
   background: var(--eg-color-option-hover-bg, var(--eg-color-option-hover-bg-default));
 }
-.eg-lsm-body {
-  padding: 16px 18px;
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-}
 .eg-lsm-empty {
   text-align: center;
   padding: 32px 12px;
   color: var(--eg-color-text-muted, var(--eg-color-text-muted-default));
   font-size: var(--eg-font-size, var(--eg-font-size-default));
 }
-.eg-lsm-meta {
+.eg-lsm-body {
   display: flex;
-  justify-content: space-between;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.eg-lsm-version-list {
+  list-style: none;
+  margin: 0;
+  padding: 8px;
+  width: 220px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  border-right: 1px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));
+}
+.eg-lsm-version-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border-radius: var(--eg-radius, var(--eg-radius-default));
+  cursor: pointer;
   font-size: 12px;
+  color: var(--eg-color-text, var(--eg-color-text-default));
+}
+.eg-lsm-version-item:hover {
+  background: var(--eg-color-option-hover-bg, var(--eg-color-option-hover-bg-default));
+}
+.eg-lsm-version-item-active {
+  background: var(--eg-color-accent-soft, var(--eg-color-accent-soft-default));
+}
+.eg-lsm-version-date {
+  font-weight: 600;
+}
+.eg-lsm-version-rows,
+.eg-lsm-version-touched {
   color: var(--eg-color-text-secondary, var(--eg-color-text-secondary-default));
-  margin-bottom: 10px;
+  font-size: 11px;
+}
+.eg-lsm-preview {
+  flex: 1;
+  min-width: 0;
+  padding: 16px 18px;
+  overflow: auto;
+}
+.eg-lsm-preview-loading {
+  text-align: center;
+  padding: 32px 12px;
+  color: var(--eg-color-text-muted, var(--eg-color-text-muted-default));
+  font-size: var(--eg-font-size, var(--eg-font-size-default));
 }
 .eg-lsm-grid-wrap {
   border: 1px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));