vue2-excel-grid 2.11.0 → 2.11.1

package/package.json

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

package/src/components/ExcelGrid.vue

@@ -8353,28 +8353,31 @@ export default ExcelGridComponent
   position: fixed;
   background: var(--eg-color-menu-bg, var(--eg-color-cell-bg, var(--eg-color-cell-bg-default)));
   border: 1px solid var(--eg-color-border, var(--eg-color-border-default));
-  border-top: 3px solid var(--eg-color-accent, var(--eg-color-accent-default));
   border-radius: var(--eg-radius, var(--eg-radius-default));
   box-shadow: var(--eg-shadow-dropdown, var(--eg-shadow-dropdown-default));
   z-index: 9999;
-  min-width: 160px;
+  min-width: 170px;
   font-size: var(--eg-font-size, var(--eg-font-size-default));
   padding: 4px 0;
   color: var(--eg-color-text, var(--eg-color-text-default));
+  user-select: none;
+  box-sizing: border-box;
 }
 
 /* Only 3 short items ("A → Z" / "Z → A" / "Clear sort") — the generic
-   160px context-menu min-width looks oversized next to it, especially
+   context-menu min-width looks oversized next to it, especially
    at size="small" where rows/text are much smaller. */
 .eg-sort-menu {
-  min-width: 110px;
+  min-width: 120px;
 }
 
 .eg-context-item {
-  padding: 6px 16px;
+  padding: 6px 14px;
   cursor: pointer;
   position: relative;
   white-space: nowrap;
+  box-sizing: border-box;
+  transition: background-color 0.12s ease, color 0.12s ease;
 }
 
 .eg-context-item:hover {
@@ -8391,9 +8394,14 @@ export default ExcelGridComponent
 .eg-context-item-active::before {
   content: '✓';
   position: absolute;
-  left: 4px;
+  left: 6px;
   top: 50%;
   transform: translateY(-50%);
+  font-weight: bold;
+}
+
+.eg-sort-menu .eg-context-item {
+  padding-left: 22px;
 }
 
 .eg-context-separator {
@@ -8402,26 +8410,367 @@ export default ExcelGridComponent
   margin: 4px 0;
 }
 
-.eg-context-submenu-parent::after { content: ' ▶'; float: right; }
+.eg-context-submenu-parent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.eg-context-submenu-parent::after {
+  content: '›';
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 600;
+  margin-left: 12px;
+  color: var(--eg-color-text-secondary, var(--eg-color-text-secondary-default));
+}
 
 .eg-context-submenu {
   display: none;
   position: absolute;
-  left: 100%;
+  left: calc(100% + 2px);
   top: -4px;
   background: var(--eg-color-menu-bg, var(--eg-color-cell-bg, var(--eg-color-cell-bg-default)));
   border: 1px solid var(--eg-color-border, var(--eg-color-border-default));
-  border-top: 3px solid var(--eg-color-accent, var(--eg-color-accent-default));
   border-radius: var(--eg-radius, var(--eg-radius-default));
   box-shadow: var(--eg-shadow-dropdown, var(--eg-shadow-dropdown-default));
   min-width: 160px;
   padding: 4px 0;
   z-index: 10000;
   color: var(--eg-color-text, var(--eg-color-text-default));
+  box-sizing: border-box;
 }
 
 .eg-context-submenu-parent:hover .eg-context-submenu { display: block; }
 
+/* ── Theme-specific context menu & actions dropdown styling ──────── */
+
+/* Shopify Polaris (ActionList inside Popover) */
+.eg-theme-polaris .eg-context-menu,
+.eg-theme-polaris .eg-context-submenu {
+  background: #FFFFFF;
+  border: 1px solid #D2D5D8;
+  border-radius: 8px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.05);
+  padding: 4px;
+  font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  color: #202223;
+}
+.eg-theme-polaris .eg-context-item {
+  margin: 1px 0;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 450;
+  color: #202223;
+}
+.eg-theme-polaris .eg-context-item:hover {
+  background: #F1F2F4;
+  color: #202223;
+}
+.eg-theme-polaris .eg-context-item-active {
+  color: #008060;
+  font-weight: 600;
+}
+.eg-theme-polaris .eg-context-separator {
+  height: 1px;
+  background: #E1E3E5;
+  margin: 4px 2px;
+}
+.eg-theme-polaris .eg-context-submenu-parent::after {
+  color: #6D7175;
+}
+.eg-theme-polaris .eg-sort-menu .eg-context-item {
+  padding-left: 22px;
+}
+
+/* Ant Design 5 (Clean 8px rounded popup with subtle hover) */
+.eg-theme-antd .eg-context-menu,
+.eg-theme-antd .eg-context-submenu {
+  background: #FFFFFF;
+  border: 1px solid rgba(5, 5, 5, 0.06);
+  border-radius: 8px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  padding: 4px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  color: rgba(0, 0, 0, 0.88);
+}
+.eg-theme-antd .eg-context-item {
+  margin: 1px 0;
+  padding: 5px 12px;
+  border-radius: 4px;
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.88);
+}
+.eg-theme-antd .eg-context-item:hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.88);
+}
+.eg-theme-antd .eg-context-item-active {
+  color: #1677FF;
+  font-weight: 600;
+}
+.eg-theme-antd .eg-context-separator {
+  height: 1px;
+  background: rgba(5, 5, 5, 0.06);
+  margin: 4px 0;
+}
+.eg-theme-antd .eg-context-submenu-parent::after {
+  color: rgba(0, 0, 0, 0.45);
+}
+.eg-theme-antd .eg-sort-menu .eg-context-item {
+  padding-left: 22px;
+}
+
+/* Material Design 3 (Elevated surface with blue accents) */
+.eg-theme-material .eg-context-menu,
+.eg-theme-material .eg-context-submenu {
+  background: #FFFFFF;
+  border: 1px solid #BBDEFB;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(21, 101, 192, 0.15), 0 1px 4px rgba(21, 101, 192, 0.10);
+  padding: 6px 0;
+  font-family: 'Roboto', 'Google Sans', Arial, sans-serif;
+  color: #1E3A5F;
+}
+.eg-theme-material .eg-context-item {
+  margin: 0;
+  padding: 7px 16px;
+  border-radius: 0;
+  font-size: 13px;
+  color: #1E3A5F;
+}
+.eg-theme-material .eg-context-item:hover {
+  background: #DBEAFE;
+  color: #1565C0;
+}
+.eg-theme-material .eg-context-item-active {
+  color: #1565C0;
+  font-weight: 600;
+}
+.eg-theme-material .eg-context-separator {
+  height: 1px;
+  background: #E2EDF8;
+  margin: 4px 0;
+}
+.eg-theme-material .eg-context-submenu-parent::after {
+  color: #4B7BA8;
+}
+.eg-theme-material .eg-sort-menu .eg-context-item {
+  padding-left: 22px;
+}
+
+/* Fluent UI / Office 365 (Warm gray, subtle hover) */
+.eg-theme-fluent .eg-context-menu,
+.eg-theme-fluent .eg-context-submenu {
+  background: #FFFFFF;
+  border: 1px solid #D2D0CE;
+  border-radius: 4px;
+  box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.13), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.11);
+  padding: 4px 0;
+  font-family: 'Segoe UI', Calibri, Arial, sans-serif;
+  color: #323130;
+}
+.eg-theme-fluent .eg-context-item {
+  margin: 0;
+  padding: 6px 14px;
+  border-radius: 0;
+  font-size: 13px;
+  color: #323130;
+}
+.eg-theme-fluent .eg-context-item:hover {
+  background: #F3F2F1;
+  color: #201F1E;
+}
+.eg-theme-fluent .eg-context-item-active {
+  color: #0078D4;
+  font-weight: 600;
+}
+.eg-theme-fluent .eg-context-separator {
+  height: 1px;
+  background: #EDEBE9;
+  margin: 4px 0;
+}
+.eg-theme-fluent .eg-context-submenu-parent::after {
+  color: #605E5C;
+}
+.eg-theme-fluent .eg-sort-menu .eg-context-item {
+  padding-left: 22px;
+}
+
+/* IBM Carbon (Industrial 0px radius, left-border hover indicator) */
+.eg-theme-carbon .eg-context-menu,
+.eg-theme-carbon .eg-context-submenu {
+  background: #FFFFFF;
+  border: 1px solid #C6C6C6;
+  border-radius: 0px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
+  padding: 0;
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  color: #161616;
+}
+.eg-theme-carbon .eg-context-item {
+  margin: 0;
+  padding: 8px 16px;
+  border-radius: 0;
+  font-size: 14px;
+  color: #161616;
+  border-left: 3px solid transparent;
+}
+.eg-theme-carbon .eg-context-item:hover {
+  background: #E8E8E8;
+  color: #161616;
+  border-left-color: #0F62FE;
+}
+.eg-theme-carbon .eg-context-item-active {
+  color: #0F62FE;
+  font-weight: 600;
+}
+.eg-theme-carbon .eg-context-separator {
+  height: 1px;
+  background: #E0E0E0;
+  margin: 0;
+}
+.eg-theme-carbon .eg-context-submenu-parent::after {
+  color: #525252;
+}
+.eg-theme-carbon .eg-sort-menu .eg-context-item {
+  padding-left: 22px;
+}
+
+/* Excel 365 (Clean spreadsheet classic style) */
+.eg-theme-excel .eg-context-menu,
+.eg-theme-excel .eg-context-submenu {
+  background: #FFFFFF;
+  border: 1px solid #D9D9D9;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+  color: #000000;
+}
+.eg-theme-excel .eg-context-item {
+  margin: 0;
+  padding: 6px 16px;
+  border-radius: 0;
+  font-size: 13px;
+  color: #000000;
+}
+.eg-theme-excel .eg-context-item:hover {
+  background: #E2EFDA;
+  color: #185A30;
+}
+.eg-theme-excel .eg-context-item-active {
+  color: #217346;
+  font-weight: 600;
+}
+.eg-theme-excel .eg-context-separator {
+  height: 1px;
+  background: #E0E0E0;
+  margin: 4px 0;
+}
+
+/* Dark Mode (unified dark container & theme dark accents) */
+.eg-shell.eg-dark .eg-context-menu,
+.eg-shell.eg-dark .eg-context-submenu {
+  background: #202123;
+  border-color: #383838;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
+  color: #D4D4D4;
+}
+.eg-shell.eg-dark .eg-context-item {
+  color: #D4D4D4;
+}
+.eg-shell.eg-dark .eg-context-item:hover {
+  background: #2D2F31;
+  color: #FFFFFF;
+}
+.eg-shell.eg-dark .eg-context-separator {
+  background: #383838;
+}
+.eg-shell.eg-dark .eg-context-submenu-parent::after {
+  color: #A0A0A0;
+}
+
+.eg-shell.eg-theme-polaris.eg-dark .eg-context-menu,
+.eg-shell.eg-theme-polaris.eg-dark .eg-context-submenu {
+  background: #202123;
+  border-color: #383D40;
+}
+.eg-shell.eg-theme-polaris.eg-dark .eg-context-item:hover {
+  background: #2A2D30;
+  color: #FFFFFF;
+}
+.eg-shell.eg-theme-polaris.eg-dark .eg-context-item-active {
+  color: #00A67E;
+}
+.eg-shell.eg-theme-polaris.eg-dark .eg-context-separator {
+  background: #383D40;
+}
+
+.eg-shell.eg-theme-antd.eg-dark .eg-context-menu,
+.eg-shell.eg-theme-antd.eg-dark .eg-context-submenu {
+  background: #1F1F1F;
+  border-color: #303030;
+}
+.eg-shell.eg-theme-antd.eg-dark .eg-context-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #FFFFFF;
+}
+.eg-shell.eg-theme-antd.eg-dark .eg-context-item-active {
+  color: #1668DC;
+}
+.eg-shell.eg-theme-antd.eg-dark .eg-context-separator {
+  background: #303030;
+}
+
+.eg-shell.eg-theme-material.eg-dark .eg-context-menu,
+.eg-shell.eg-theme-material.eg-dark .eg-context-submenu {
+  background: #19222D;
+  border-color: #2A3A4D;
+}
+.eg-shell.eg-theme-material.eg-dark .eg-context-item:hover {
+  background: #243447;
+  color: #90CAF9;
+}
+.eg-shell.eg-theme-material.eg-dark .eg-context-item-active {
+  color: #90CAF9;
+}
+.eg-shell.eg-theme-material.eg-dark .eg-context-separator {
+  background: #2A3A4D;
+}
+
+.eg-shell.eg-theme-fluent.eg-dark .eg-context-menu,
+.eg-shell.eg-theme-fluent.eg-dark .eg-context-submenu {
+  background: #252423;
+  border-color: #3B3A39;
+}
+.eg-shell.eg-theme-fluent.eg-dark .eg-context-item:hover {
+  background: #323130;
+  color: #FFFFFF;
+}
+.eg-shell.eg-theme-fluent.eg-dark .eg-context-item-active {
+  color: #2886DE;
+}
+.eg-shell.eg-theme-fluent.eg-dark .eg-context-separator {
+  background: #3B3A39;
+}
+
+.eg-shell.eg-theme-carbon.eg-dark .eg-context-menu,
+.eg-shell.eg-theme-carbon.eg-dark .eg-context-submenu {
+  background: #262626;
+  border-color: #393939;
+}
+.eg-shell.eg-theme-carbon.eg-dark .eg-context-item:hover {
+  background: #353535;
+  color: #FFFFFF;
+  border-left-color: #4589FF;
+}
+.eg-shell.eg-theme-carbon.eg-dark .eg-context-item-active {
+  color: #4589FF;
+}
+.eg-shell.eg-theme-carbon.eg-dark .eg-context-separator {
+  background: #393939;
+}
+
 /* devMode — column/row info modal */
 .eg-info-modal-backdrop {
   position: fixed;
@@ -9156,6 +9505,23 @@ export default ExcelGridComponent
   font-size: 14px;
   padding: 8px 14px;
 }
+/* Theme enhancements for EgSelect / EgTreeSelect dropdowns */
+.eg-theme-polaris .eg-select-dropdown {
+  padding: 4px;
+}
+.eg-theme-polaris .eg-select-option {
+  margin: 1px 0;
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+.eg-theme-antd .eg-select-dropdown {
+  padding: 4px;
+}
+.eg-theme-antd .eg-select-option {
+  margin: 1px 0;
+  border-radius: 4px;
+  padding: 5px 12px;
+}
 .eg-select-dot {
   width: 9px;
   height: 9px;