vue2-excel-grid 1.7.2 → 1.8.0

package/package.json

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

package/src/components/ExcelGrid.vue

@@ -61,11 +61,12 @@
         <button
           v-if="localSyncKey && toolbarHas('localSync')"
           type="button"
-          class="eg-toolbar-btn"
+          class="eg-toolbar-btn eg-toolbar-btn-badged"
           :disabled="toolbarDisabled('localSync')"
-          :title="t.localSync"
+          :title="localSyncAvailable ? t.localSyncAvailable : t.localSync"
           @click="openLocalSyncModal"
-        ><span class="eg-toolbar-icon eg-icon-local-sync"></span></button>
+        ><span class="eg-toolbar-icon eg-icon-local-sync"></span
+        ><span v-if="localSyncAvailable" class="eg-toolbar-badge" aria-hidden="true"></span></button>
       </div>
 
       <slot name="toolbar-extra" :locked="internalLocked" :fullscreen="isFullscreen"></slot>
@@ -1508,6 +1509,10 @@ const ExcelGridComponent = {
       // localSyncKey feature — modal state + pending debounce timer (the
       // timer itself lives outside `data()`'s reactive tracking, see created()).
       localSyncModal: { visible: false, snapshot: null },
+      // True when a snapshot already existed at mount and the user hasn't
+      // dealt with it yet — drives the toolbar button's "unseen draft" dot.
+      // See _checkLocalSnapshotOnMount() for the full lifecycle.
+      localSyncAvailable: false,
 
       resizing: {
         active: false,
@@ -2414,14 +2419,6 @@ const ExcelGridComponent = {
     this._dragScrollRAF = null
     this._dragCleanupTimer = null
 
-    // localSyncKey autosave — deliberately a plain (non-immediate) $watch,
-    // NOT an entry in the `watch:` option above: the existing `data` watcher
-    // there runs with `immediate: true` (fires once on mount with the
-    // initial value), which would autosave a host's still-loading/empty
-    // initial `data` and silently overwrite a previously-saved IndexedDB
-    // snapshot before the user ever gets a chance to see/restore it via the
-    // modal. A plain $watch only fires on later, real changes.
-    this.$watch('data', () => this._scheduleLocalAutosave())
   },
 
   mounted() {
@@ -2454,6 +2451,7 @@ const ExcelGridComponent = {
       if (this.$el.parentElement) this._scrollBodyResizeObserver.observe(this.$el.parentElement)
     }
     this._lockFlashArmed = true
+    this._checkLocalSnapshotOnMount()
   },
 
   updated() {
@@ -6013,6 +6011,7 @@ const ExcelGridComponent = {
         // All edit paths already use spread ({ ...row }) so frozen rows are safe.
         const data = result.data.map(row => Object.freeze(row))
         this.$emit('input', data)
+        this._scheduleLocalAutosave()
         this.$emit('update:columns', columns)
 
         const hasMerges = merges && merges.length > 0
@@ -6128,6 +6127,7 @@ const ExcelGridComponent = {
         }
       }
       this.$emit('input', newData)
+      this._scheduleLocalAutosave()
     },
 
     // Emit 'update:merges' and record a merges diff entry.
@@ -6161,6 +6161,7 @@ const ExcelGridComponent = {
             newData.length = entry.before.rowCount
           }
           this.$emit('input', newData)
+          this._scheduleLocalAutosave()
         } else if (entry.type === 'merges') {
           this.internalMerges = entry.before.slice()
           this.$emit('update:merges', entry.before.slice())
@@ -6183,6 +6184,7 @@ const ExcelGridComponent = {
             newData[entry.after.indices[i]] = entry.after.rows[i]
           }
           this.$emit('input', newData)
+          this._scheduleLocalAutosave()
         } else if (entry.type === 'merges') {
           this.internalMerges = entry.after.slice()
           this.$emit('update:merges', entry.after.slice())
@@ -6219,9 +6221,20 @@ const ExcelGridComponent = {
     // LOCAL SYNC — autosave `data` to IndexedDB, keyed by localSyncKey
     // =========================================================
 
-    // Internal: debounced (800ms) autosave, scheduled by the plain $watch
-    // set up in created() every time `data` actually changes. No-op when
-    // localSyncKey isn't set — zero IndexedDB access at all in that case.
+    // Internal: debounced (800ms) autosave. No-op when localSyncKey isn't
+    // set — zero IndexedDB access at all in that case.
+    //
+    // Deliberately called from the grid's OWN data-change points only
+    // (_emitDataChange, undo, redo, import) — NOT from a $watch on `data`.
+    // A watcher can't tell "the user edited a cell" from "the host replaced
+    // `data` wholesale", and the second one is the common case right after
+    // mount: a host that loads rows from an API assigns them ~100-2000ms in,
+    // which a watcher would treat as a real change and autosave over the
+    // user's previously saved draft — destroying exactly the work this
+    // feature exists to protect, before they can open the modal to restore
+    // it. Autosave must mean "the user worked", not "the data object
+    // changed". restoreLocalSnapshot() likewise does NOT call this: the
+    // snapshot it just applied is already what's stored.
     _scheduleLocalAutosave() {
       if (!this.localSyncKey) return
       clearTimeout(this._localSyncTimer)
@@ -6230,6 +6243,23 @@ const ExcelGridComponent = {
       }, 800)
     },
 
+    // Internal, called once from mounted(): a snapshot that already exists at
+    // mount is a draft from an EARLIER session, which the user has no way of
+    // knowing about unless they happen to click the toolbar button. Flags it
+    // so the button shows a dot, and emits local-sync-available so a host can
+    // surface its own prompt ("restore unsaved changes?") instead.
+    async _checkLocalSnapshotOnMount() {
+      if (!this.localSyncKey) return
+      const snapshot = await this.getLocalSnapshot()
+      if (!snapshot) return
+      this.localSyncAvailable = true
+      this.$emit('local-sync-available', {
+        key: this.localSyncKey,
+        rows: snapshot.data.length,
+        updatedAt: snapshot.updatedAt
+      })
+    },
+
     // Public, ref-callable: saves the current `data` to IndexedDB right now,
     // bypassing the debounce (e.g. a host wants to force a checkpoint before
     // navigating away). No-op (resolves to null) when localSyncKey isn't set.
@@ -6238,6 +6268,9 @@ const ExcelGridComponent = {
       clearTimeout(this._localSyncTimer)
       try {
         const { updatedAt } = await saveSnapshot(this.localSyncKey, this.data)
+        // What's stored is now exactly what's on screen — there's no longer an
+        // older draft to go back to, so the "unseen draft" dot would mislead.
+        this.localSyncAvailable = false
         this.$emit('local-sync-save', { key: this.localSyncKey, rows: this.data.length, updatedAt })
         return updatedAt
       } catch (error) {
@@ -6268,6 +6301,7 @@ const ExcelGridComponent = {
         if (!snapshot) return
         this.$emit('input', snapshot.data)
         this.$emit('update:data', snapshot.data)
+        this.localSyncAvailable = false
         this.$emit('local-sync-restore', { key: this.localSyncKey, rows: snapshot.data.length })
         this.closeLocalSyncModal()
       } catch (error) {
@@ -6282,6 +6316,7 @@ const ExcelGridComponent = {
       try {
         await deleteSnapshot(this.localSyncKey)
         if (this.localSyncModal.snapshot) this.localSyncModal.snapshot = null
+        this.localSyncAvailable = false
         this.$emit('local-sync-clear', { key: this.localSyncKey })
       } catch (error) {
         this.$emit('local-sync-error', { action: 'clear', error })
@@ -6318,6 +6353,7 @@ const ExcelGridComponent = {
     async openLocalSyncModal() {
       if (!this.localSyncKey) return
       this.localSyncModal.visible = true
+      this.localSyncAvailable = false // the draft has now been seen
       try {
         this.localSyncModal.snapshot = await loadSnapshot(this.localSyncKey)
       } catch (error) {
@@ -6789,6 +6825,22 @@ export default ExcelGridComponent
   color: var(--eg-color-text-secondary, var(--eg-color-text-secondary-default));
 }
 
+/* Anchors the "unseen local draft" dot (localSyncKey feature) — only the
+   local-sync button carries it, but kept as its own class so any future
+   badged tool gets the same positioning. */
+.eg-toolbar-btn-badged {
+  position: relative;
+}
+.eg-toolbar-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--eg-color-accent, var(--eg-color-accent-default));
+  pointer-events: none;
+}
 .eg-toolbar-btn:hover:not(:disabled) {
   background: var(--eg-color-option-hover-bg, var(--eg-color-option-hover-bg-default));
   border-color: var(--eg-color-border, var(--eg-color-border-default));

package/src/utils/i18n.js

@@ -47,6 +47,7 @@ const messages = {
     theme:          'Theme',
     // local sync
     localSync:            'Local sync',
+    localSyncAvailable:   'A locally saved copy is available',
     localSyncTitle:       'Local saved copy',
     localSyncEmpty:       'No local copy saved yet',
     localSyncSavedAt:     'Last saved',
@@ -118,6 +119,7 @@ const messages = {
     theme:          'Тема',
     // local sync
     localSync:            'Локальная синхронизация',
+    localSyncAvailable:   'Есть локально сохранённая копия',
     localSyncTitle:       'Локально сохранённая копия',
     localSyncEmpty:       'Локальная копия пока не сохранена',
     localSyncSavedAt:     'Последнее сохранение',
@@ -189,6 +191,7 @@ const messages = {
     theme:          'Mavzu',
     // local sync
     localSync:            'Lokal sinxronlash',
+    localSyncAvailable:   'Lokal saqlangan nusxa mavjud',
     localSyncTitle:       'Lokal saqlangan nusxa',
     localSyncEmpty:       'Hali lokal saqlangan nusxa yo\'q',
     localSyncSavedAt:     'Oxirgi saqlangan',
@@ -260,6 +263,7 @@ const messages = {
     theme:          'Мавзу',
     // local sync
     localSync:            'Лакал синхронлаш',
+    localSyncAvailable:   'Локал сақланган нусха мавжуд',
     localSyncTitle:       'Лакал сақланган нусха',
     localSyncEmpty:       'Ҳали лакал сақланган нусха йўқ',
     localSyncSavedAt:     'Охирги сақланган',