vue2-excel-grid 2.3.0 → 2.4.0

package/package.json

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