vue2-excel-grid 2.2.2 → 2.4.0

package/package.json

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

package/src/components/ExcelGrid.vue

@@ -792,6 +792,38 @@
 
       <!-- Resize indicator line -->
       <div v-if="resizing.active" class="eg-resize-line" :style="resizeLineStyle"></div>
+
+      <!-- Loading overlay (host-driven, e.g. during an async data fetch) -->
+      <div v-if="loading" class="eg-loading-overlay">
+        <template v-if="columns && columns.length">
+          <div class="eg-skeleton">
+            <div class="eg-skeleton-row eg-skeleton-row-header" :style="{ height: headerRowHeight + 'px' }">
+              <div
+                v-for="col in leafCols"
+                :key="'sk-h-' + col._flatIndex"
+                class="eg-skeleton-block"
+                :style="{ width: getColW(col._flatIndex) + 'px' }"
+              ></div>
+            </div>
+            <div
+              v-for="r in 20"
+              :key="'sk-r-' + r"
+              class="eg-skeleton-row"
+              :style="{ height: _rowH + 'px' }"
+            >
+              <div
+                v-for="col in leafCols"
+                :key="'sk-c-' + col._flatIndex"
+                class="eg-skeleton-block"
+                :style="{ width: getColW(col._flatIndex) + 'px' }"
+              ></div>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="eg-loading-spinner"></div>
+        </template>
+      </div>
     </div><!-- end container -->
 
     <!-- Import progress overlay -->
@@ -1314,6 +1346,21 @@ const ExcelGridComponent = {
      */
     locked: { type: Boolean, default: false },
 
+    /**
+     * Host-driven loading state (e.g. while an async data fetch is in
+     * flight). When `true`, only the grid body (`.eg-container`) is
+     * covered — the toolbar stays visible and interactive. If `columns`
+     * is non-empty, a shimmering skeleton matching each column's width is
+     * shown; otherwise a plain centered spinner is shown. Purely visual —
+     * doesn't block edits/interaction the way `locked` does (combine both
+     * if that's also needed).
+     * @type {Boolean}
+     * @default false
+     * @example
+     * <excel-grid :columns="columns" v-model="data" :loading="isFetching" />
+     */
+    loading: { type: Boolean, default: false },
+
     /** Show "Column info" / "Row info" items in the context menu (dev/debug aid). */
     devMode: { type: Boolean, default: false },
 
@@ -1460,10 +1507,34 @@ const ExcelGridComponent = {
     localSyncKey: { type: String, default: null },
 
     /**
-     * Maximum number of local versions kept per `localSyncKey`. Once a new
-     * version pushes the count past this, the oldest version(s) (by
-     * `createdAt`) are deleted automatically (FIFO). Has no effect without
-     * `localSyncKey`.
+     * Optional tenant/organization identifier for multi-tenant hosts (SaaS
+     * apps where the same browser/device is used across different
+     * organizations). When set, it's combined with `localSyncKey`
+     * internally (`${tenant}::${localSyncKey}`) so each tenant gets a fully
+     * isolated IndexedDB version history — switching tenants on the same
+     * device never shows another tenant's saved drafts. Omit it (default)
+     * for single-tenant hosts; behavior is then identical to before this
+     * prop existed.
+     *
+     * Has no effect without `localSyncKey` — it only changes how that key
+     * is namespaced internally, it doesn't opt into the feature by itself.
+     * Reactive: changing `tenant` (e.g. after an async "current
+     * organization" load) reloads that tenant's own version list/buffer,
+     * the same way a `localSyncKey` that starts empty and becomes truthy
+     * later does. Avoid `::` inside `tenant`/`localSyncKey` values
+     * themselves — it's the internal separator between the two.
+     * @type {String}
+     * @default null
+     * @example
+     * <excel-grid :columns="columns" v-model="data" local-sync-key="invoice-42" :tenant="currentOrgId" toolbar />
+     */
+    tenant: { type: String, default: null },
+
+    /**
+     * Maximum number of local versions kept per `localSyncKey` (per
+     * `tenant`, when set). Once a new version pushes the count past this,
+     * the oldest version(s) (by `createdAt`) are deleted automatically
+     * (FIFO). Has no effect without `localSyncKey`.
      * @type {Number}
      * @default 10
      * @example
@@ -1666,6 +1737,17 @@ const ExcelGridComponent = {
   computed: {
     t() { return getMessages(this.locale) },
 
+    // localSyncKey feature — the actual IndexedDB storage key. idbStore.js
+    // itself knows nothing about "tenants"; this is the one place that
+    // namespaces localSyncKey by tenant when one is given, so every
+    // storage-layer call site below just uses this instead of
+    // this.localSyncKey directly. null whenever localSyncKey itself is
+    // unset — tenant alone doesn't opt into the feature.
+    effectiveSyncKey() {
+      if (!this.localSyncKey) return null
+      return this.tenant ? `${this.tenant}::${this.localSyncKey}` : this.localSyncKey
+    },
+
     pinnedLeftSet() {
       const s = new Set()
       this.leafCols.forEach(col => { if (this.internalPinnedColumns[col.key] === 'left') s.add(col._flatIndex) })
@@ -2419,17 +2501,23 @@ const ExcelGridComponent = {
     },
     widthMode() { this.$nextTick(this.syncHeaderViewportWidth) },
 
-    // localSyncKey feature — mounted() only calls _loadLocalVersionsOnMount()
-    // once, at mount time. Without this watcher, a key that starts empty (a
-    // host conditionally passing `:local-sync-key="ready ? id : null"`, or
-    // one only known after an async load) and later becomes truthy would
-    // never load its version list, never promote a leftover buffer, and
-    // never show the toolbar badge — the feature would look "broken" for the
-    // rest of that page's lifetime even though everything else works.
+    // localSyncKey/tenant feature — mounted() only calls
+    // _loadLocalVersionsOnMount() once, at mount time. Without these
+    // watchers, a key/tenant that starts empty (a host conditionally
+    // passing `:local-sync-key="ready ? id : null"`, or a `tenant` only
+    // known after an async "current organization" load) and later becomes
+    // truthy would never load its version list, never promote a leftover
+    // buffer, and never show the toolbar badge — the feature would look
+    // "broken" for the rest of that page's lifetime even though everything
+    // else works. Both share _reloadLocalSyncForKeyChange() since either one
+    // changing means the effective storage key changed.
     localSyncKey(newKey, oldKey) {
       if (newKey === oldKey) return
-      this.localSyncAvailable = false
-      if (newKey) this._loadLocalVersionsOnMount()
+      this._reloadLocalSyncForKeyChange()
+    },
+    tenant(newTenant, oldTenant) {
+      if (newTenant === oldTenant) return
+      this._reloadLocalSyncForKeyChange()
     }
   },
 
@@ -6423,9 +6511,19 @@ const ExcelGridComponent = {
 
     // =========================================================
     // LOCAL SYNC — save `data` as a local IndexedDB *version*, keyed by
-    // localSyncKey, only when the page is being left (not per-edit).
+    // localSyncKey (optionally namespaced by tenant), only when the page is
+    // being left (not per-edit).
     // =========================================================
 
+    // Shared by the localSyncKey and tenant watchers above — either one
+    // changing means effectiveSyncKey now points at a (possibly) different
+    // version history, so the badge/version-list state must be reloaded
+    // from scratch rather than left stale.
+    _reloadLocalSyncForKeyChange() {
+      this.localSyncAvailable = false
+      if (this.effectiveSyncKey) this._loadLocalVersionsOnMount()
+    },
+
     // Internal, called once from mounted(): populates the toolbar "unseen
     // local versions" dot and emits local-sync-available if any versions
     // already exist for this key (e.g. saved in an earlier visit).
@@ -6433,7 +6531,7 @@ const ExcelGridComponent = {
       if (!this.localSyncKey) return
       await this._promoteBufferIfAny()
       try {
-        const versions = await listVersions(this.localSyncKey)
+        const versions = await listVersions(this.effectiveSyncKey)
         if (!versions.length) return
         this.localSyncAvailable = true
         this.$emit('local-sync-available', {
@@ -6464,9 +6562,9 @@ const ExcelGridComponent = {
     // turns it into a real version next time the grid mounts.
     _scheduleBufferWrite(data) {
       if (!this.localSyncKey) return
-      const key = this.localSyncKey // captured now, not re-read 800ms later —
-      // a host that swaps localSyncKey mid-edit (rare, but now reactive, see
-      // the localSyncKey watcher above) must not have this land under the
+      const key = this.effectiveSyncKey // captured now, not re-read 800ms later —
+      // a host that swaps localSyncKey/tenant mid-edit (rare, but now
+      // reactive, see the watchers below) must not have this land under the
       // NEW key with the OLD key's data.
       clearTimeout(this._bufferWriteTimer)
       this._bufferWriteTimer = setTimeout(() => { this._writeBufferNow(key, data) }, 800)
@@ -6489,13 +6587,13 @@ const ExcelGridComponent = {
     // like any other non-leave-signal path.
     async _promoteBufferIfAny() {
       try {
-        const buffered = await getBuffer(this.localSyncKey)
+        const buffered = await getBuffer(this.effectiveSyncKey)
         if (!buffered) return
         const hash = await hashRowsAsync(buffered.data)
         const { version, overwritten } = await saveOrTouchVersion(
-          this.localSyncKey, buffered.data, hash, this.localSyncMaxVersions
+          this.effectiveSyncKey, buffered.data, hash, this.localSyncMaxVersions
         )
-        await clearBuffer(this.localSyncKey)
+        await clearBuffer(this.effectiveSyncKey)
         this.$emit('local-sync-save', {
           key: this.localSyncKey,
           id: version.id,
@@ -6565,12 +6663,12 @@ const ExcelGridComponent = {
       // the version-store write below is best-effort on top of it, reliable
       // for the common case (tab switch/background, page stays alive).
       clearTimeout(this._bufferWriteTimer)
-      this._writeBufferNow(this.localSyncKey, data)
+      this._writeBufferNow(this.effectiveSyncKey, data)
       try {
         const hash = sync ? hashRows(data) : await hashRowsAsync(data)
         if (this.data !== data) return // data changed again mid-hash — a later flush will catch it
         const { version, overwritten } = await saveOrTouchVersion(
-          this.localSyncKey, data, hash, this.localSyncMaxVersions
+          this.effectiveSyncKey, data, hash, this.localSyncMaxVersions
         )
         this._lastFlushedDataRef = data
         // The version store now has this content durably — the buffer's job
@@ -6578,7 +6676,7 @@ const ExcelGridComponent = {
         // doesn't complete before teardown, _promoteBufferIfAny() finds the
         // (now-redundant but harmless, dedup makes it a no-op touch) buffer
         // on next mount anyway.
-        clearBuffer(this.localSyncKey).catch(() => {})
+        clearBuffer(this.effectiveSyncKey).catch(() => {})
         this.$emit('local-sync-save', {
           key: this.localSyncKey,
           id: version.id,
@@ -6608,7 +6706,7 @@ const ExcelGridComponent = {
     async listLocalVersions() {
       if (!this.localSyncKey) return []
       try {
-        const versions = await listVersions(this.localSyncKey)
+        const versions = await listVersions(this.effectiveSyncKey)
         return versions.map(v => ({ id: v.id, createdAt: v.createdAt, updatedAt: v.updatedAt, rowCount: v.data.length }))
       } catch (error) {
         this.$emit('local-sync-error', { action: 'load', error })
@@ -7956,6 +8054,60 @@ export default ExcelGridComponent
   to { transform: rotate(360deg); }
 }
 
+/* ===== LOADING OVERLAY (loading prop) ===== */
+.eg-loading-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--eg-color-overlay-bg, var(--eg-color-overlay-bg-default));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 90;
+  overflow: hidden;
+}
+.eg-loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));
+  border-top-color: var(--eg-color-accent, var(--eg-color-accent-default));
+  border-radius: 50%;
+  animation: eg-spin 0.8s linear infinite;
+}
+.eg-skeleton {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.eg-skeleton-row {
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  box-sizing: border-box;
+}
+.eg-skeleton-row-header {
+  background: var(--eg-color-header-bg, var(--eg-color-header-bg-default));
+}
+.eg-skeleton-block {
+  height: 60%;
+  margin: 0 2px;
+  border-radius: var(--eg-radius, var(--eg-radius-default));
+  background: linear-gradient(
+    90deg,
+    var(--eg-color-border-cell, var(--eg-color-border-cell-default)) 25%,
+    var(--eg-color-cell-readonly, var(--eg-color-cell-readonly-default)) 37%,
+    var(--eg-color-border-cell, var(--eg-color-border-cell-default)) 63%
+  );
+  background-size: 400% 100%;
+  animation: eg-skeleton-shimmer 1.4s ease infinite;
+}
+@keyframes eg-skeleton-shimmer {
+  0% { background-position: 100% 50%; }
+  100% { background-position: 0 50%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .eg-skeleton-block, .eg-loading-spinner { animation: none; }
+}
+
 /* ===== READONLY CELL ===== */
 /* !important throughout: same-specificity as the base .eg-cell / .eg-cell-active /
    .eg-cell-selected rules, so which one wins would otherwise depend on source