vue2-excel-grid 2.10.0 → 2.11.0

package/package.json

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

package/src/components/ExcelGrid.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="eg-shell"
-    :class="['eg-size-' + internalSize, 'eg-theme-' + internalTheme, { 'eg-shell-fullscreen': isFullscreen, 'eg-locked': internalLocked }]"
+    :class="['eg-size-' + internalSize, 'eg-theme-' + internalTheme, { 'eg-shell-fullscreen': isFullscreen, 'eg-locked': internalLocked, 'eg-dark': isDarkMode }]"
     :style="shellStyle"
   >
     <!-- Toolbar -->
@@ -1021,6 +1021,7 @@ import { formatNumber as _formatNumber } from '../utils/numberFormat.js'
 import { Mask, MaskInput } from '../utils/mask.js'
 import { listVersions, getVersion, deleteVersion, saveOrTouchVersion, putBuffer, getBuffer, clearBuffer } from '../utils/idbStore.js'
 import { hashRows, hashRowsAsync } from '../utils/dataHash.js'
+import { globalConfig } from '../config.js'
 
 const SIZE_CONFIG = {
   small:  { row: 22, header: 24, footer: 24, filter: 26 },
@@ -1475,6 +1476,15 @@ const ExcelGridComponent = {
      */
     theme: { type: String, default: 'antd' },
 
+    /**
+     * Dark mode toggle.
+     * - `true`: enables dark mode styling and sets `color-scheme: dark`.
+     * - `false`: forces light mode styling and sets `color-scheme: light` (prevents OS dark mode leak).
+     * - `null` / `undefined` (default): inherits the global configuration from `Vue.use(Vue2ExcelGrid, { darkMode })`.
+     * Accepts a Boolean, a getter Function (`() => boolean`), or `'auto'` / `'system'`.
+     */
+    darkMode: { type: [Boolean, Function, String], default: null },
+
     /**
      * Shows a filter row directly beneath the column headers (inside the
      * sticky header area). Each leaf column gets a filter control matched to
@@ -1844,6 +1854,19 @@ const ExcelGridComponent = {
   },
 
   computed: {
+    isDarkMode() {
+      let val = this.darkMode
+      if (val === null || val === undefined) {
+        val = globalConfig ? globalConfig.darkMode : null
+      }
+      if (typeof val === 'function') {
+        val = val()
+      }
+      if (val === 'auto' || val === 'system') {
+        return typeof window !== 'undefined' && !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      }
+      return Boolean(val)
+    },
     hoverTooltipStyle() {
       if (!this.hoverTooltip) return {}
       const { rect, text } = this.hoverTooltip
@@ -7404,6 +7427,9 @@ export default ExcelGridComponent
   border: 1px solid var(--eg-color-border, var(--eg-color-border-default));
   border-radius: var(--eg-radius, var(--eg-radius-default));
   overflow: hidden;
+  color-scheme: light;
+  background: var(--eg-color-cell-bg, var(--eg-color-cell-bg-default));
+  color: var(--eg-color-text, var(--eg-color-text-default));
 }
 
 .eg-shell-fullscreen {
@@ -7698,6 +7724,128 @@ export default ExcelGridComponent
   --eg-color-row-stripe-default: #FAFBFB;
 }
 
+/* ── Dark Mode ─────────────────────────────────────────────────── */
+.eg-shell.eg-dark {
+  color-scheme: dark;
+
+  /* Accent (lighter for dark backgrounds) */
+  --eg-color-accent-default: #4aba7c;
+  --eg-color-accent-dark-default: #2d9e5c;
+  --eg-color-accent-soft-default: rgba(74, 186, 124, 0.2);
+
+  /* Error */
+  --eg-color-error-default: #f87171;
+  --eg-color-error-soft-default: #2d0f0f;
+  --eg-color-error-dark-default: #fca5a5;
+
+  /* Borders */
+  --eg-color-border-default: #3d3d3d;
+  --eg-color-border-cell-default: #2a2a2a;
+  --eg-color-border-strong-default: #555555;
+
+  /* Headers */
+  --eg-color-header-bg-default: #252525;
+  --eg-color-header-group-bg-default: #252525;
+  --eg-color-group-border-default: #2d9e5c;
+  --eg-color-group-bg-collapsed-default: #217346;
+
+  /* Cell states */
+  --eg-color-cell-bg-default: #1e1e1e;
+  --eg-color-cell-selected-default: #1a3d2a;
+  --eg-color-cell-fill-preview-default: #145022;
+  --eg-color-cell-readonly-default: #171717;
+  --eg-color-cell-readonly-selected-default: #163020;
+  --eg-color-cell-readonly-pattern-default: rgba(255, 255, 255, 0.06);
+  --eg-color-footer-bg-default: #1a1a1a;
+
+  /* Row effects */
+  --eg-color-row-hover-default: #242f27;
+  --eg-color-row-stripe-default: #1a1a1a;
+
+  /* Dropdown / Select / Context menu */
+  --eg-color-option-hover-bg-default: #242f27;
+  --eg-color-option-active-hover-bg-default: #1a4d30;
+  --eg-color-overlay-bg-default: rgba(28, 28, 28, 0.95);
+
+  /* Checkbox */
+  --eg-color-checkbox-border-default: #6e6e6e;
+  --eg-color-checkbox-disabled-checked-default: #404040;
+
+  /* Text */
+  --eg-color-text-default: #d4d4d4;
+  --eg-color-text-secondary-default: #a0a0a0;
+  --eg-color-text-muted-default: #6e6e6e;
+
+  /* Shadows */
+  --eg-shadow-dropdown-default: 1px 2px 10px rgba(0, 0, 0, 0.55);
+  --eg-shadow-dialog-default: 0 2px 16px rgba(0, 0, 0, 0.65);
+  --eg-shadow-tooltip-default: 0 1px 5px rgba(0, 0, 0, 0.55);
+  --eg-color-freeze-shadow-default: rgba(0, 0, 0, 0.45);
+}
+
+/* Theme-specific dark mode adjustments */
+.eg-shell.eg-theme-antd.eg-dark {
+  --eg-color-accent-default: #1668DC;
+  --eg-color-accent-dark-default: #1554AD;
+  --eg-color-accent-soft-default: #111A2C;
+  --eg-color-cell-selected-default: #111A2C;
+  --eg-color-cell-fill-preview-default: #153450;
+  --eg-color-row-hover-default: #1f1f1f;
+  --eg-color-option-hover-bg-default: #111A2C;
+}
+
+.eg-shell.eg-theme-material.eg-dark {
+  --eg-color-accent-default: #90CAF9;
+  --eg-color-accent-dark-default: #42A5F5;
+  --eg-color-accent-soft-default: #1E2A38;
+  --eg-color-cell-selected-default: #1E2A38;
+}
+
+.eg-shell.eg-theme-polaris.eg-dark {
+  --eg-color-accent-default: #00A67E;
+  --eg-color-accent-dark-default: #008060;
+  --eg-color-accent-soft-default: #102A22;
+  --eg-color-cell-selected-default: #102A22;
+}
+
+.eg-shell.eg-theme-carbon.eg-dark {
+  --eg-color-accent-default: #4589FF;
+  --eg-color-accent-dark-default: #0F62FE;
+  --eg-color-accent-soft-default: #002D9C;
+  --eg-color-cell-selected-default: #002D9C;
+}
+
+.eg-shell.eg-theme-fluent.eg-dark {
+  --eg-color-accent-default: #2886DE;
+  --eg-color-accent-dark-default: #0078D4;
+  --eg-color-accent-soft-default: #0C2B47;
+  --eg-color-cell-selected-default: #0C2B47;
+}
+
+/* Dark scrollbars */
+.eg-shell.eg-dark .eg-container::-webkit-scrollbar,
+.eg-shell.eg-dark .eg-scroll-body::-webkit-scrollbar,
+.eg-shell.eg-dark .eg-main-cells::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.eg-shell.eg-dark .eg-container::-webkit-scrollbar-track,
+.eg-shell.eg-dark .eg-scroll-body::-webkit-scrollbar-track,
+.eg-shell.eg-dark .eg-main-cells::-webkit-scrollbar-track {
+  background: #1e1e1e;
+}
+.eg-shell.eg-dark .eg-container::-webkit-scrollbar-thumb,
+.eg-shell.eg-dark .eg-scroll-body::-webkit-scrollbar-thumb,
+.eg-shell.eg-dark .eg-main-cells::-webkit-scrollbar-thumb {
+  background: #3d3d3d;
+  border-radius: 4px;
+}
+.eg-shell.eg-dark .eg-container::-webkit-scrollbar-thumb:hover,
+.eg-shell.eg-dark .eg-scroll-body::-webkit-scrollbar-thumb:hover,
+.eg-shell.eg-dark .eg-main-cells::-webkit-scrollbar-thumb:hover {
+  background: #555555;
+}
+
 .eg-wrapper {
   display: flex;
   flex-direction: column;

package/src/config.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+
+const state = (Vue && typeof Vue.observable === 'function')
+  ? Vue.observable({ darkMode: null })
+  : { darkMode: null }
+
+export const globalConfig = state
+
+/**
+ * Update global vue2-excel-grid configuration reactively.
+ * @param {Object} options
+ */
+export function setGlobalGridConfig(options = {}) {
+  if (options && typeof options === 'object') {
+    Object.keys(options).forEach(key => {
+      globalConfig[key] = options[key]
+    })
+  }
+}
+
+export const setGlobalConfig = setGlobalGridConfig
+

package/src/index.js

@@ -3,15 +3,17 @@ import EgCheckbox from './components/EgCheckbox.vue'
 import EgSelect from './components/EgSelect.vue'
 import EgTreeSelect from './components/EgTreeSelect.vue'
 import { version } from '../package.json'
+import { globalConfig, setGlobalGridConfig, setGlobalConfig } from './config.js'
 
-export { ExcelGrid, EgCheckbox, EgSelect, EgTreeSelect, version }
+export { ExcelGrid, EgCheckbox, EgSelect, EgTreeSelect, version, globalConfig, setGlobalGridConfig, setGlobalConfig }
 
 export default {
   version,
   install(Vue, options = {}) {
     if (options && typeof options === 'object') {
       Object.keys(options).forEach(key => {
-        if (ExcelGrid.props && ExcelGrid.props[key] !== undefined) {
+        globalConfig[key] = options[key]
+        if (key !== 'darkMode' && ExcelGrid.props && ExcelGrid.props[key] !== undefined) {
           const val = options[key]
           if (typeof ExcelGrid.props[key] !== 'object') {
             // Convert to object notation if it was just a constructor like `props: { fitColumns: Boolean }`
@@ -21,6 +23,7 @@ export default {
         }
       })
     }
+    Vue.prototype.$excelGridConfig = globalConfig
     Vue.component('Vue2ExcelGrid', ExcelGrid)
     Vue.component('Vue2EgCheckbox', EgCheckbox)
     Vue.component('Vue2EgSelect', EgSelect)