vue2-excel-grid 2.8.9 → 2.10.0

package/package.json

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

package/src/components/EgSelect.vue

@@ -60,6 +60,9 @@
       <div v-if="clearable && selectedOpt" class="eg-select-footer">
         <button class="eg-select-btn eg-select-btn--clear" tabindex="-1" @mousedown.prevent="pickClear">{{ t.clear }}</button>
       </div>
+      <div v-if="$slots['dropdown-footer']" class="eg-select-dropdown-footer">
+        <slot name="dropdown-footer"></slot>
+      </div>
     </template>
 
     <!-- Options panel in standalone mode (floating dropdown below trigger) -->
@@ -103,6 +106,9 @@
       <div v-if="clearable && selectedOpt" class="eg-select-footer">
         <button class="eg-select-btn eg-select-btn--clear" tabindex="-1" @mousedown.prevent="pickClear">{{ t.clear }}</button>
       </div>
+      <div v-if="$slots['dropdown-footer']" class="eg-select-dropdown-footer">
+        <slot name="dropdown-footer"></slot>
+      </div>
     </div>
 
     <div v-if="hoverTooltip" class="eg-option-tooltip" :style="hoverTooltipStyle">{{ hoverTooltip.text }}</div>
@@ -557,6 +563,10 @@ export default {
   padding: 4px 6px 6px;
   border-top: 1px solid var(--eg-color-border, var(--eg-color-border-default));
 }
+.eg-select-dropdown-footer {
+  border-top: 1px solid var(--eg-color-border, var(--eg-color-border-default));
+  padding: 4px;
+}
 .eg-select-btn {
   background: none;
   border: 1px solid var(--eg-color-border, var(--eg-color-border-default));

package/src/components/EgTreeSelect.vue

@@ -66,6 +66,9 @@
       <div v-if="clearable && selectedLabel != null" class="eg-select-footer">
         <button class="eg-select-btn eg-select-btn--clear" tabindex="-1" @mousedown.prevent="pickClear">{{ t.clear }}</button>
       </div>
+      <div v-if="$slots['dropdown-footer']" class="eg-select-dropdown-footer">
+        <slot name="dropdown-footer"></slot>
+      </div>
     </template>
 
     <!-- Options panel in standalone mode -->
@@ -116,6 +119,9 @@
       <div v-if="clearable && selectedLabel != null" class="eg-select-footer">
         <button class="eg-select-btn eg-select-btn--clear" tabindex="-1" @mousedown.prevent="pickClear">{{ t.clear }}</button>
       </div>
+      <div v-if="$slots['dropdown-footer']" class="eg-select-dropdown-footer">
+        <slot name="dropdown-footer"></slot>
+      </div>
     </div>
 
     <div v-if="hoverTooltip" class="eg-option-tooltip" :style="hoverTooltipStyle">{{ hoverTooltip.text }}</div>

package/src/components/ExcelGrid.vue

@@ -97,6 +97,7 @@
           <option value="antd">Ant Design</option>
           <option value="fluent">Fluent</option>
           <option value="carbon">Carbon</option>
+          <option value="polaris">Shopify Polaris</option>
         </select>
       </div>
 
@@ -244,8 +245,8 @@
                     class="eg-header-cell"
                     :class="[
                       { 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount },
-                      cell.column && cell.column.overflowTitle === 'truncate' ? 'eg-header-cell--truncate' : '',
-                      cell.column && cell.column.overflowTitle === 'wrap' ? 'eg-header-cell--wrap' : ''
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? 'eg-header-cell--truncate' : '',
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'wrap' ? 'eg-header-cell--wrap' : ''
                     ]"
                     :data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
                     :data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
@@ -254,7 +255,7 @@
                     @mousedown="onColHeaderMouseDown($event, cell)"
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
-                    @mouseenter="cell.column && cell.column.overflowTitle === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
+                    @mouseenter="cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
                     @mouseleave="_hideTooltip"
                   >
                     <span class="eg-header-title">
@@ -342,8 +343,8 @@
                     class="eg-header-cell"
                     :class="[
                       { 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount },
-                      cell.column && cell.column.overflowTitle === 'truncate' ? 'eg-header-cell--truncate' : '',
-                      cell.column && cell.column.overflowTitle === 'wrap' ? 'eg-header-cell--wrap' : ''
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? 'eg-header-cell--truncate' : '',
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'wrap' ? 'eg-header-cell--wrap' : ''
                     ]"
                     :data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
                     :data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
@@ -352,7 +353,7 @@
                     @mousedown="onColHeaderMouseDown($event, cell)"
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
-                    @mouseenter="cell.column && cell.column.overflowTitle === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
+                    @mouseenter="cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
                     @mouseleave="_hideTooltip"
                   >
                     <span class="eg-header-title">
@@ -437,8 +438,8 @@
                     class="eg-header-cell"
                     :class="[
                       { 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount },
-                      cell.column && cell.column.overflowTitle === 'truncate' ? 'eg-header-cell--truncate' : '',
-                      cell.column && cell.column.overflowTitle === 'wrap' ? 'eg-header-cell--wrap' : ''
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? 'eg-header-cell--truncate' : '',
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'wrap' ? 'eg-header-cell--wrap' : ''
                     ]"
                     :data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
                     :data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
@@ -447,7 +448,7 @@
                     @mousedown="onColHeaderMouseDown($event, cell)"
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
-                    @mouseenter="cell.column && cell.column.overflowTitle === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
+                    @mouseenter="cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
                     @mouseleave="_hideTooltip"
                   >
                     <span class="eg-header-title">
@@ -917,7 +918,11 @@
       :clearable="selectDropdown.clearable"
       @select="onComponentSelect"
       @close="closeSelectDropdown"
-    />
+    >
+      <template #dropdown-footer>
+        <slot :name="'dropdown-footer-' + selectDropdown.col.key" :column="selectDropdown.col" :close="closeSelectDropdown"></slot>
+      </template>
+    </eg-select>
     <!-- Tree select dropdown overlay -->
     <eg-tree-select
       v-if="selectDropdown && selectDropdown.tree"
@@ -935,7 +940,11 @@
       :clearable="selectDropdown.clearable"
       @select="onComponentSelect"
       @close="closeSelectDropdown"
-    />
+    >
+      <template #dropdown-footer>
+        <slot :name="'dropdown-footer-' + selectDropdown.col.key" :column="selectDropdown.col" :close="closeSelectDropdown"></slot>
+      </template>
+    </eg-tree-select>
 
     <!-- Date picker overlay -->
     <eg-date-picker
@@ -1051,7 +1060,7 @@ const DEFAULT_TOOLBAR_LIST = ['undoRedo', 'export', 'import', 'print', 'localSyn
 // retarget smoothly from whatever intermediate position an element is currently
 // at when the drop slot changes mid-flight — no JS animation library races.
 const COL_DRAG_TRANSITION = 'transform 200ms cubic-bezier(0.2, 0, 0, 1)'
-const THEME_LIST = ['excel', 'material', 'antd', 'fluent', 'carbon']
+const THEME_LIST = ['excel', 'material', 'antd', 'fluent', 'carbon', 'polaris']
 
 // Kept as a named const (rather than an inline `export default {}`) so the
 // local-sync preview modal can receive the plain component definition
@@ -1072,6 +1081,19 @@ const ExcelGridComponent = {
     /** Array of row objects keyed by columns[].key */
     data: { type: Array, default: () => [] },
 
+    /**
+     * Sarlavhalardagi matn sig'may qolganda uning qanday harakatlanishini belgilaydi
+     * (barcha ustunlar uchun umumiy qoida). Ustun (column) sozlamalarida
+     * xuddi shu nomli xususiyat mavjud bo'lsa, ustun sozlamasi inobatga olinadi.
+     * @type {String}
+     * @default 'no-overflow'
+     */
+    overflowTitle: {
+      type: String,
+      default: 'no-overflow',
+      validator: v => ['no-overflow', 'truncate', 'wrap'].includes(v)
+    },
+
     /**
      * Column definitions (may be nested via children[]).
      *
@@ -1443,7 +1465,7 @@ const ExcelGridComponent = {
 
     /**
      * Visual theme of the grid.
-     * Built-in: 'excel' | 'material' | 'antd' | 'fluent' | 'carbon'
+     * Built-in: 'excel' | 'material' | 'antd' | 'fluent' | 'carbon' | 'polaris'
      * Default is the classic Excel 365 look. Use 'material' for Material Design 3.
      * Mirrors the `size` prop's convention: an internal `internalTheme` state
      * mirrors this prop and is what the toolbar's theme picker actually reads
@@ -2842,7 +2864,7 @@ const ExcelGridComponent = {
     },
     _calcHeaderHeight() {
       if (!this.leafCols) return
-      const wrapCols = this.leafCols.filter(c => c.overflowTitle === 'wrap')
+      const wrapCols = this.leafCols.filter(c => (c.overflowTitle || this.overflowTitle) === 'wrap')
       if (wrapCols.length === 0) {
         if (this.calculatedHeaderHeight !== null) this.calculatedHeaderHeight = null
         return
@@ -7620,6 +7642,62 @@ export default ExcelGridComponent
   --eg-color-row-stripe-default: #F4F4F4;
 }
 
+/* ── Shopify Polaris — toza, zamonaviy e-commerce uslubi, 8px radius ── */
+.eg-shell.eg-theme-polaris {
+  --eg-font-family-default: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  --eg-font-size-default: 13px;
+  --eg-font-size-header-default: 12px;
+  --eg-radius-default: 8px;
+  --eg-cell-padding-x-default: 8px;
+
+  --eg-color-accent-default: #008060;
+  --eg-color-accent-dark-default: #004c3f;
+  --eg-color-accent-soft-default: #E3F1DF;
+
+  --eg-color-error-default: #D72C0D;
+  --eg-color-error-soft-default: #FFF4F4;
+  --eg-color-error-dark-default: #8C1000;
+
+  /* Polaris borderlar: yumshoq kulrang */
+  --eg-color-border-default: #D2D5D8;
+  --eg-color-border-cell-default: #E1E3E5;
+  --eg-color-border-strong-default: #8C9196;
+
+  /* Polaris header: yengil neytral kulrang (#F6F6F7) */
+  --eg-color-header-bg-default: #F6F6F7;
+  --eg-color-header-group-bg-default: #EDEEEF;
+  --eg-color-group-border-default: #008060;
+  --eg-color-group-bg-collapsed-default: #004c3f;
+
+  --eg-color-cell-bg-default: #FFFFFF;
+  --eg-color-cell-selected-default: #E3F1DF;
+  --eg-color-cell-fill-preview-default: #BBE5B3;
+  --eg-color-cell-readonly-default: #FAFBFB;
+  --eg-color-cell-readonly-selected-default: #D8ECE5;
+  --eg-color-cell-readonly-pattern-default: rgba(0, 128, 96, 0.05);
+  --eg-color-footer-bg-default: #F6F6F7;
+
+  --eg-color-text-default: #202223;
+  --eg-color-text-secondary-default: #6D7175;
+  --eg-color-text-muted-default: #8C9196;
+
+  --eg-shadow-dropdown-default: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  --eg-shadow-dialog-default: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --eg-shadow-tooltip-default: 0 2px 6px rgba(0, 0, 0, 0.15);
+  --eg-color-freeze-shadow-default: rgba(0, 0, 0, 0.08);
+
+  --eg-color-overlay-bg-default: rgba(255, 255, 255, 0.94);
+  --eg-color-option-hover-bg-default: #F6F6F7;
+  --eg-color-option-active-hover-bg-default: #E3F1DF;
+
+  --eg-color-checkbox-border-default: #8C9196;
+  --eg-color-checkbox-disabled-checked-default: #C9CCCF;
+
+  /* Polaris hover va stripe */
+  --eg-color-row-hover-default: #F1F2F4;
+  --eg-color-row-stripe-default: #FAFBFB;
+}
+
 .eg-wrapper {
   display: flex;
   flex-direction: column;
@@ -8901,6 +8979,10 @@ export default ExcelGridComponent
   padding: 4px 6px 6px;
   border-top: 1px solid var(--eg-color-border, var(--eg-color-border-default));
 }
+.eg-select-dropdown-footer {
+  border-top: 1px solid var(--eg-color-border, var(--eg-color-border-default));
+  padding: 4px;
+}
 .eg-select-btn {
   background: none;
   border: 1px solid var(--eg-color-border, var(--eg-color-border-default));

package/src/index.js

@@ -8,7 +8,19 @@ export { ExcelGrid, EgCheckbox, EgSelect, EgTreeSelect, version }
 
 export default {
   version,
-  install(Vue) {
+  install(Vue, options = {}) {
+    if (options && typeof options === 'object') {
+      Object.keys(options).forEach(key => {
+        if (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 }`
+            ExcelGrid.props[key] = { type: ExcelGrid.props[key] }
+          }
+          ExcelGrid.props[key].default = (val !== null && typeof val === 'object') ? () => val : val
+        }
+      })
+    }
     Vue.component('Vue2ExcelGrid', ExcelGrid)
     Vue.component('Vue2EgCheckbox', EgCheckbox)
     Vue.component('Vue2EgSelect', EgSelect)