vue2-excel-grid 2.3.0 → 2.5.0

package/package.json

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

package/src/components/ExcelGrid.vue

@@ -556,7 +556,7 @@
                               class="eg-cell"
                               :data-fi="ci"
                               :class="getCellClasses(ri, ci)"
-                              :style="getCellStyle(ri, ci)"
+                              :style="[getCellStyle(ri, ci), getRowCustomStyle(ri)]"
                               @mousedown="onCellMouseDown($event, ri, ci)"
                               @mouseover="onCellMouseOver($event, ri, ci)"
                               @mouseup="onCellMouseUp"
@@ -615,7 +615,7 @@
                               class="eg-cell"
                               :data-fi="ci"
                               :class="getCellClasses(ri, ci)"
-                              :style="getCellStyle(ri, ci)"
+                              :style="[getCellStyle(ri, ci), getRowCustomStyle(ri)]"
                               @mousedown="onCellMouseDown($event, ri, ci)"
                               @mouseover="onCellMouseOver($event, ri, ci)"
                               @mouseup="onCellMouseUp"
@@ -674,7 +674,7 @@
                             class="eg-cell"
                             :data-fi="col._flatIndex"
                             :class="getCellClasses(ri, col._flatIndex)"
-                            :style="getCellStyle(ri, col._flatIndex)"
+                            :style="[getCellStyle(ri, col._flatIndex), getRowCustomStyle(ri)]"
                             @mousedown="onCellMouseDown($event, ri, col._flatIndex)"
                             @mouseover="onCellMouseOver($event, ri, col._flatIndex)"
                             @mouseup="onCellMouseUp"
@@ -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,39 @@ 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 },
+
+    /**
+     * Data-driven per-row styling: `(row, rowIndex) => styleObject`. The
+     * returned style object is applied to every cell in that row (across
+     * the frozen/scrollable/pinned-right zones alike), giving the row a
+     * continuous horizontal background/style without any host-side CSS.
+     * Selection/active/fill-preview/readonly cell highlighting keeps
+     * winning visually — those already use `!important`, which always
+     * beats a plain (non-`!important`) inline style. Doesn't affect the
+     * row-number header column (mirrors Excel: conditional formatting
+     * colors data cells, not the row gutter). Return `null`/`undefined`
+     * for rows that shouldn't get a custom style.
+     * @type {Function}
+     * @default null
+     * @example
+     * <excel-grid :columns="columns" v-model="data" :row-style="(row) => row.status === 'error' ? { background: '#fde2e2' } : null" />
+     */
+    rowStyle: { type: Function, default: null },
+
     /** Show "Column info" / "Row info" items in the context menu (dev/debug aid). */
     devMode: { type: Boolean, default: false },
 
@@ -3075,6 +3140,17 @@ const ExcelGridComponent = {
       return style
     },
 
+    // rowStyle prop — deliberately NOT merged into getCellStyle()'s return value:
+    // that object is cached/shared by (w,h,left) across unrelated rows/cells (see
+    // comment above), so mutating it here would leak one row's style onto every
+    // other cell that happens to share the same cache key. Kept as a second,
+    // uncached :style array entry instead (see template) — cheap, and correctly
+    // reactive to the row's actual data instead of just its geometry.
+    getRowCustomStyle(ri) {
+      if (!this.rowStyle) return null
+      return this.rowStyle(this._dataRaw[ri], ri) || null
+    },
+
     getCellClasses(ri, ci) {
       const col = this.leafCols[ci]
       const active = this.isActiveCell(ri, ci)
@@ -8007,6 +8083,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