@alaarab/ogrid-vue-radix 2.0.15 → 2.0.16

package/dist/esm/DataGridTable/DataGridTable.css

@@ -54,14 +54,14 @@
   --ogrid-header-hover-bg: rgba(255, 255, 255, 0.1);
   --ogrid-muted: var(--ogrid-fg-muted);
 }
-.ogrid-table-wrapper[data-v-7b1fd360] {
+.ogrid-table-wrapper[data-v-18aa4567] {
   position: relative;
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
-.ogrid-loading[data-v-7b1fd360] {
+.ogrid-loading[data-v-18aa4567] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -69,19 +69,19 @@
   color: var(--ogrid-muted, #888);
   font-size: 14px;
 }
-.ogrid-table-container[data-v-7b1fd360] {
+.ogrid-table-container[data-v-18aa4567] {
   flex: 1;
   overflow: auto;
   position: relative;
 }
-.ogrid-table[data-v-7b1fd360] {
+.ogrid-table[data-v-18aa4567] {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
   background: var(--ogrid-bg, #fff);
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
-.ogrid-table th[data-v-7b1fd360] {
+.ogrid-table th[data-v-18aa4567] {
   position: sticky;
   top: 0;
   background: var(--ogrid-header-bg, #f5f5f5);
@@ -91,38 +91,38 @@
   font-weight: 600;
   z-index: 2;
 }
-.ogrid-table th.sortable[data-v-7b1fd360] {
+.ogrid-table th.sortable[data-v-18aa4567] {
   cursor: pointer;
   user-select: none;
 }
-.ogrid-table th.sortable[data-v-7b1fd360]:hover {
+.ogrid-table th.sortable[data-v-18aa4567]:hover {
   background: var(--ogrid-header-hover-bg, #f0f0f0);
 }
-.ogrid-table td[data-v-7b1fd360] {
+.ogrid-table td[data-v-18aa4567] {
   padding: 8px 12px;
   border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
 }
-.ogrid-table td.active-cell[data-v-7b1fd360] {
+.ogrid-table td.active-cell[data-v-18aa4567] {
   outline: 2px solid var(--ogrid-active-border, #0078d4);
   outline-offset: -2px;
 }
-.ogrid-table td.editable[data-v-7b1fd360] {
+.ogrid-table td.editable[data-v-18aa4567] {
   cursor: cell;
 }
-.ogrid-table tr[data-v-7b1fd360]:hover {
+.ogrid-table tr[data-v-18aa4567]:hover {
   background: var(--ogrid-hover-bg, #f9f9f9);
 }
-.ogrid-table tr.selected-row[data-v-7b1fd360] {
+.ogrid-table tr.selected-row[data-v-18aa4567] {
   background: var(--ogrid-selected-bg, #e3f2fd);
 }
-.ogrid-wrapper[data-v-7b1fd360] {
+.ogrid-wrapper[data-v-18aa4567] {
   position: relative;
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
-.ogrid-table-container[data-v-7b1fd360] {
+.ogrid-table-container[data-v-18aa4567] {
   flex: 1;
   position: relative;
   outline: none;
@@ -131,10 +131,10 @@
 }
 
 /* Drag-range highlight applied via DOM attributes during drag (bypasses Vue for performance) */
-[data-v-7b1fd360] [data-drag-range] {
+[data-v-18aa4567] [data-drag-range] {
   background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
 }
-.ogrid-drop-indicator[data-v-7b1fd360] {
+.ogrid-drop-indicator[data-v-18aa4567] {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -143,16 +143,16 @@
   pointer-events: none;
   z-index: 100;
 }
-.ogrid-table[data-v-7b1fd360] {
+.ogrid-table[data-v-18aa4567] {
   border-collapse: collapse;
   font-size: 14px;
   background: var(--ogrid-bg, #fff);
 }
-.ogrid-header-row[data-v-7b1fd360] {
+.ogrid-header-row[data-v-18aa4567] {
   z-index: 8;
   background: var(--ogrid-header-bg, #f5f5f5);
 }
-.ogrid-header-cell[data-v-7b1fd360] {
+.ogrid-header-cell[data-v-18aa4567] {
   position: sticky;
   top: 0;
   background: var(--ogrid-header-bg, #f5f5f5);
@@ -165,39 +165,39 @@
   user-select: none;
   cursor: grab;
 }
-.ogrid-header-cell[data-v-7b1fd360]:last-child {
+.ogrid-header-cell[data-v-18aa4567]:last-child {
   border-right: none;
 }
-.ogrid-header-cell[data-v-7b1fd360]:active {
+.ogrid-header-cell[data-v-18aa4567]:active {
   cursor: grabbing;
 }
-.ogrid-header-cell[data-v-7b1fd360]:focus-visible {
+.ogrid-header-cell[data-v-18aa4567]:focus-visible {
   outline: 2px solid var(--ogrid-accent, #0078d4);
   outline-offset: -2px;
   z-index: 11;
 }
-.ogrid-group-header[data-v-7b1fd360] {
+.ogrid-group-header[data-v-18aa4567] {
   text-align: center;
   border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
   cursor: default;
 }
-.ogrid-group-header[data-v-7b1fd360]:active {
+.ogrid-group-header[data-v-18aa4567]:active {
   cursor: default;
 }
-.ogrid-header-content[data-v-7b1fd360] {
+.ogrid-header-content[data-v-18aa4567] {
   display: flex;
   align-items: center;
   gap: 4px;
   width: 100%;
 }
-.ogrid-header-label[data-v-7b1fd360] {
+.ogrid-header-label[data-v-18aa4567] {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.ogrid-header-menu-btn[data-v-7b1fd360] {
+.ogrid-header-menu-btn[data-v-18aa4567] {
   background: none;
   border: none;
   cursor: pointer;
@@ -214,15 +214,15 @@
   height: 24px;
   transition: background-color 0.15s;
 }
-.ogrid-header-menu-btn[data-v-7b1fd360]:hover {
+.ogrid-header-menu-btn[data-v-18aa4567]:hover {
   background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.8));
 }
-.ogrid-header-menu-btn[data-v-7b1fd360]:focus-visible {
+.ogrid-header-menu-btn[data-v-18aa4567]:focus-visible {
   outline: 2px solid var(--ogrid-accent, #0078d4);
   outline-offset: 2px;
 }
-.ogrid-resize-handle[data-v-7b1fd360] {
+.ogrid-resize-handle[data-v-18aa4567] {
   position: absolute;
   right: -3px;
   top: 0;
@@ -232,36 +232,50 @@
   z-index: 10;
   user-select: none;
 }
-.ogrid-row[data-v-7b1fd360]:hover {
+.ogrid-row[data-v-18aa4567]:hover {
   background: var(--ogrid-hover-bg, #f9f9f9);
 }
-.ogrid-selected-row[data-v-7b1fd360] {
+.ogrid-selected-row[data-v-18aa4567] {
   background: var(--ogrid-selected-bg, #e3f2fd);
 }
-.ogrid-cell[data-v-7b1fd360] {
+.ogrid-cell[data-v-18aa4567] {
   padding: 0;
   border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
   border-right: 1px solid var(--ogrid-border, #e0e0e0);
   position: relative;
   height: 1px;
 }
-.ogrid-cell[data-v-7b1fd360]:last-child {
+.ogrid-cell[data-v-18aa4567]:last-child {
   border-right: none;
 }
-.ogrid-cell[data-v-7b1fd360]:focus-visible {
+.ogrid-cell[data-v-18aa4567]:focus-visible {
   outline: 2px solid var(--ogrid-accent, #0078d4);
   outline-offset: -2px;
   z-index: 3;
 }
-.ogrid-active-cell[data-v-7b1fd360] {
+.ogrid-active-cell[data-v-18aa4567] {
   outline: 2px solid var(--ogrid-active-border, #0078d4);
   outline-offset: -2px;
   z-index: 1;
 }
-.ogrid-selected-cell[data-v-7b1fd360] {
+.ogrid-selected-cell[data-v-18aa4567] {
   background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12));
 }
-.ogrid-fill-handle[data-v-7b1fd360] {
+.ogrid-editing-cell[data-v-18aa4567] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  outline: 2px solid var(--ogrid-selection-color, #217346);
+  outline-offset: -1px;
+  z-index: 2;
+  position: relative;
+  background: var(--ogrid-bg, #fff);
+  overflow: visible;
+  padding: 0;
+}
+.ogrid-fill-handle[data-v-18aa4567] {
   position: absolute;
   right: -3px;
   bottom: -3px;
@@ -274,14 +288,14 @@
   pointer-events: auto;
   z-index: 3;
 }
-.ogrid-selection-header[data-v-7b1fd360],
-.ogrid-selection-cell[data-v-7b1fd360] {
+.ogrid-selection-header[data-v-18aa4567],
+.ogrid-selection-cell[data-v-18aa4567] {
   width: 40px;
   text-align: center;
   padding: 8px;
 }
-.ogrid-row-number-header[data-v-7b1fd360],
-.ogrid-row-number-cell[data-v-7b1fd360] {
+.ogrid-row-number-header[data-v-18aa4567],
+.ogrid-row-number-cell[data-v-18aa4567] {
   width: 40px;
   text-align: center;
   padding: 6px;
@@ -290,27 +304,27 @@
   color: var(--ogrid-muted, #888);
   background: var(--ogrid-header-bg, #f5f5f5);
 }
-.ogrid-checkbox[data-v-7b1fd360] {
+.ogrid-checkbox[data-v-18aa4567] {
   cursor: pointer;
   width: 16px;
   height: 16px;
 }
-.ogrid-empty-state[data-v-7b1fd360] {
+.ogrid-empty-state[data-v-18aa4567] {
   padding: 32px 16px;
   text-align: center;
   border-top: 1px solid var(--ogrid-border, #e0e0e0);
   background: var(--ogrid-statusbar-bg, #f5f5f5);
 }
-.ogrid-empty-title[data-v-7b1fd360] {
+.ogrid-empty-title[data-v-18aa4567] {
   font-size: 1.25rem;
   font-weight: 600;
   margin-bottom: 8px;
 }
-.ogrid-empty-message[data-v-7b1fd360] {
+.ogrid-empty-message[data-v-18aa4567] {
   font-size: 0.875rem;
   color: var(--ogrid-muted, #888);
 }
-.ogrid-empty-clear-btn[data-v-7b1fd360] {
+.ogrid-empty-clear-btn[data-v-18aa4567] {
   background: none;
   border: none;
   color: var(--ogrid-primary, #0066cc);
@@ -319,10 +333,10 @@
   padding: 0;
   font: inherit;
 }
-.ogrid-empty-clear-btn[data-v-7b1fd360]:hover {
+.ogrid-empty-clear-btn[data-v-18aa4567]:hover {
   color: var(--ogrid-primary-hover, #005a9e);
 }
-.ogrid-loading-overlay[data-v-7b1fd360] {
+.ogrid-loading-overlay[data-v-18aa4567] {
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -331,7 +345,7 @@
   justify-content: center;
   background-color: rgba(255, 255, 255, 0.7);
 }
-.ogrid-loading-content[data-v-7b1fd360] {
+.ogrid-loading-content[data-v-18aa4567] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -343,15 +357,15 @@
   font-size: 0.875rem;
   color: var(--ogrid-muted, #888);
 }
-.loading-spinner[data-v-7b1fd360] {
+.loading-spinner[data-v-18aa4567] {
   width: 24px;
   height: 24px;
   border: 3px solid var(--ogrid-border, #e0e0e0);
   border-top-color: var(--ogrid-primary, #0066cc);
   border-radius: 50%;
-  animation: spin-7b1fd360 0.8s linear infinite;
+  animation: spin-18aa4567 0.8s linear infinite;
 }
-@keyframes spin-7b1fd360 {
+@keyframes spin-18aa4567 {
 to {
     transform: rotate(360deg);
 }

package/dist/esm/DataGridTable/DataGridTable.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./DataGridTable.vue2.js";
 import './DataGridTable.css';
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const DataGridTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7b1fd360"]]);
+const DataGridTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-18aa4567"]]);
 export {
   DataGridTable as default
 };

package/dist/esm/DataGridTable/DataGridTable.vue2.js

@@ -26,16 +26,20 @@ const _hoisted_14 = {
 };
 const _hoisted_15 = ["data-column-id", "data-row-index", "data-col-index", "onMousedown"];
 const _hoisted_16 = {
+  key: 0,
+  class: "ogrid-editing-cell"
+};
+const _hoisted_17 = {
   key: 0,
   class: "ogrid-empty-state"
 };
-const _hoisted_17 = { key: 1 };
-const _hoisted_18 = { class: "ogrid-empty-message" };
-const _hoisted_19 = {
+const _hoisted_18 = { key: 1 };
+const _hoisted_19 = { class: "ogrid-empty-message" };
+const _hoisted_20 = {
   key: 0,
   class: "ogrid-loading-overlay"
 };
-const _hoisted_20 = { class: "ogrid-loading-content" };
+const _hoisted_21 = { class: "ogrid-loading-content" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DataGridTable",
   props: {
@@ -142,10 +146,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const getCellStyle = (item, col, rowIndex, colIndex) => {
       const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIndex, viewModels.value.cellDescriptorInput);
       const columnWidth = getColumnWidth(col);
+      const layoutValue = layout.value;
+      const hasResizeOverride = !!layoutValue.columnSizingOverrides[col.columnId];
+      const measuredW = layoutValue.measuredColumnWidths[col.columnId];
+      const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+      const effectiveMinWidth = hasResizeOverride ? columnWidth : Math.max(baseMinWidth, measuredW ?? 0);
       const style = {
         position: "relative",
         padding: "0",
-        minWidth: `${col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH}px`,
+        minWidth: `${effectiveMinWidth}px`,
         width: `${columnWidth}px`,
         maxWidth: `${columnWidth}px`
       };
@@ -185,9 +194,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIndex < freezeCols;
       const isPinnedLeft = col.pinned === "left";
       const isPinnedRight = col.pinned === "right";
+      const layoutValue = layout.value;
+      const hasResizeOverride = !!layoutValue.columnSizingOverrides[col.columnId];
+      const measuredW = layoutValue.measuredColumnWidths[col.columnId];
+      const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+      const effectiveMinWidth = hasResizeOverride ? columnWidth : Math.max(baseMinWidth, measuredW ?? 0);
       const style = {
         width: `${columnWidth}px`,
-        minWidth: `${col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH}px`,
+        minWidth: `${effectiveMinWidth}px`,
         maxWidth: `${columnWidth}px`
       };
       if (isPinnedLeft || isFreezeCol && colIndex === 0) {
@@ -303,6 +317,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, [
                       __props.gridProps.rowSelection === "multiple" ? (openBlock(), createElementBlock("input", {
                         key: 0,
+                        ref_for: true,
+                        ref: (el) => {
+                          if (el) el.indeterminate = rowSel.value.someSelected && !rowSel.value.allSelected;
+                        },
                         type: "checkbox",
                         checked: rowSel.value.allSelected,
                         onChange: _cache[0] || (_cache[0] = //@ts-ignore
@@ -343,7 +361,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         cell.columnDef && cell.columnDef.resizable !== false ? (openBlock(), createElementBlock("div", {
                           key: 0,
                           class: "ogrid-resize-handle",
-                          onMousedown: withModifiers((e) => unref(handleResizeStart)(e, cell.columnDef), ["stop"])
+                          onMousedown: withModifiers((e) => {
+                            interaction.value.setActiveCell(null);
+                            interaction.value.setSelectionRange(null);
+                            unref(wrapperRef)?.focus({ preventScroll: true });
+                            unref(handleResizeStart)(e, cell.columnDef);
+                          }, ["stop"])
                         }, null, 40, _hoisted_10)) : createCommentVNode("", true)
                       ], 46, _hoisted_6);
                     }), 128))
@@ -396,10 +419,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         createElementVNode("div", {
                           style: normalizeStyle(getCellContentStyle(col, item, rowIndex, layout.value.colOffset + colIndex))
                         }, [
-                          getCellRenderData(item, col, rowIndex, layout.value.colOffset + colIndex).type === "editor" ? (openBlock(), createBlock(resolveDynamicComponent(InlineCellEditor), mergeProps({
-                            key: 0,
-                            ref_for: true
-                          }, getCellRenderData(item, col, rowIndex, layout.value.colOffset + colIndex).props), null, 16)) : getCellRenderData(item, col, rowIndex, layout.value.colOffset + colIndex).type === "popover-editor" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                          getCellRenderData(item, col, rowIndex, layout.value.colOffset + colIndex).type === "editor" ? (openBlock(), createElementBlock("div", _hoisted_16, [
+                            (openBlock(), createBlock(resolveDynamicComponent(InlineCellEditor), mergeProps({ ref_for: true }, getCellRenderData(item, col, rowIndex, layout.value.colOffset + colIndex).props), null, 16))
+                          ])) : getCellRenderData(item, col, rowIndex, layout.value.colOffset + colIndex).type === "popover-editor" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                             createElementVNode("div", {
                               ref_for: true,
                               ref: (el) => {
@@ -434,10 +456,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 4)) : createCommentVNode("", true)
               ])) : createCommentVNode("", true)
             ], 12, _hoisted_3),
-            viewModels.value.showEmptyInGrid && __props.gridProps.emptyState ? (openBlock(), createElementBlock("div", _hoisted_16, [
-              __props.gridProps.emptyState.render ? (openBlock(), createBlock(resolveDynamicComponent({ render: __props.gridProps.emptyState.render }), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_17, [
+            viewModels.value.showEmptyInGrid && __props.gridProps.emptyState ? (openBlock(), createElementBlock("div", _hoisted_17, [
+              __props.gridProps.emptyState.render ? (openBlock(), createBlock(resolveDynamicComponent({ render: __props.gridProps.emptyState.render }), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_18, [
                 _cache[9] || (_cache[9] = createElementVNode("div", { class: "ogrid-empty-title" }, "No results found", -1)),
-                createElementVNode("div", _hoisted_18, [
+                createElementVNode("div", _hoisted_19, [
                   __props.gridProps.emptyState.message ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                     createTextVNode(toDisplayString(__props.gridProps.emptyState.message), 1)
                   ], 64)) : __props.gridProps.emptyState.hasActiveFilters ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -467,8 +489,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, null, 8, ["containerRef", "selectionRange", "copyRange", "cutRange", "colOffset", "items", "visibleColumns", "columnSizingOverrides", "columnOrder"])
           ], 512)
         ], 44, _hoisted_2),
-        __props.gridProps.isLoading ? (openBlock(), createElementBlock("div", _hoisted_19, [
-          createElementVNode("div", _hoisted_20, [
+        __props.gridProps.isLoading ? (openBlock(), createElementBlock("div", _hoisted_20, [
+          createElementVNode("div", _hoisted_21, [
             _cache[10] || (_cache[10] = createElementVNode("div", { class: "loading-spinner" }, null, -1)),
             createElementVNode("span", null, toDisplayString(__props.gridProps.loadingMessage || "Loading..."), 1)
           ])

package/dist/esm/DataGridTable/InlineCellEditor.css

@@ -1,5 +1,4 @@
-.editor-wrapper[data-v-cf3c3944],
-.select-wrapper[data-v-cf3c3944] {
+.editor-wrapper[data-v-ddf20238] {
   width: 100%;
   height: 100%;
   display: flex;
@@ -9,8 +8,7 @@
   overflow: hidden;
   min-width: 0;
 }
-.editor-input[data-v-cf3c3944],
-.select-editor[data-v-cf3c3944] {
+.editor-input[data-v-ddf20238] {
   width: 100%;
   padding: 0;
   border: none;
@@ -21,10 +19,52 @@
   outline: none;
   min-width: 0;
 }
-.select-editor[data-v-cf3c3944] {
+.custom-select-wrapper[data-v-ddf20238] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  min-width: 0;
+  position: relative;
+  outline: none;
+}
+.custom-select-display[data-v-ddf20238] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  cursor: pointer;
+  font-size: 13px;
+  color: inherit;
+}
+.custom-select-chevron[data-v-ddf20238] {
+  margin-left: 4px;
+  font-size: 10px;
+  opacity: 0.5;
+}
+.custom-select-dropdown[data-v-ddf20238] {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  z-index: 10;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+.custom-select-option[data-v-ddf20238] {
+  padding: 6px 8px;
   cursor: pointer;
+  color: var(--ogrid-fg, #242424);
+}
+.custom-select-option.highlighted[data-v-ddf20238] {
+  background: var(--ogrid-bg-hover, #e8f0fe);
 }
-.rich-select-wrapper[data-v-cf3c3944] {
+.rich-select-wrapper[data-v-ddf20238] {
   width: 100%;
   height: 100%;
   display: flex;
@@ -35,7 +75,7 @@
   min-width: 0;
   position: relative;
 }
-.rich-select-input[data-v-cf3c3944] {
+.rich-select-input[data-v-ddf20238] {
   width: 100%;
   padding: 0;
   border: none;
@@ -46,7 +86,7 @@
   outline: none;
   min-width: 0;
 }
-.rich-select-dropdown[data-v-cf3c3944] {
+.rich-select-dropdown[data-v-ddf20238] {
   position: absolute;
   top: 100%;
   left: 0;
@@ -58,26 +98,26 @@
   z-index: 10;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
-.rich-select-option[data-v-cf3c3944] {
+.rich-select-option[data-v-ddf20238] {
   padding: 6px 8px;
   cursor: pointer;
   color: var(--ogrid-fg, #242424);
 }
-.rich-select-option.highlighted[data-v-cf3c3944] {
+.rich-select-option.highlighted[data-v-ddf20238] {
   background: var(--ogrid-bg-hover, #e8f0fe);
 }
-.rich-select-no-matches[data-v-cf3c3944] {
+.rich-select-no-matches[data-v-ddf20238] {
   padding: 6px 8px;
   color: var(--ogrid-muted, #999);
 }
-.checkbox-editor-wrapper[data-v-cf3c3944] {
+.checkbox-editor-wrapper[data-v-ddf20238] {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
 }
-.checkbox-editor[data-v-cf3c3944] {
+.checkbox-editor[data-v-ddf20238] {
   width: 18px;
   height: 18px;
   cursor: pointer;

package/dist/esm/DataGridTable/InlineCellEditor.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./InlineCellEditor.vue2.js";
 import './InlineCellEditor.css';
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const InlineCellEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cf3c3944"]]);
+const InlineCellEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ddf20238"]]);
 export {
   InlineCellEditor as default
 };

package/dist/esm/DataGridTable/InlineCellEditor.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, onMounted, openBlock, createElementBlock, createElementVNode, unref, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, withKeys, withModifiers } from "vue";
+import { defineComponent, ref, computed, onMounted, openBlock, createElementBlock, createElementVNode, unref, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, withKeys, withModifiers, nextTick } from "vue";
 import { useInlineCellEditorState, useRichSelectState } from "@alaarab/ogrid-vue";
 const _hoisted_1 = ["value"];
 const _hoisted_2 = {
@@ -15,14 +15,10 @@ const _hoisted_5 = {
   class: "checkbox-editor-wrapper"
 };
 const _hoisted_6 = ["checked"];
-const _hoisted_7 = {
-  key: 2,
-  class: "select-wrapper"
-};
-const _hoisted_8 = ["value"];
+const _hoisted_7 = { class: "custom-select-display" };
+const _hoisted_8 = ["aria-selected", "onClick"];
 const _hoisted_9 = ["value"];
 const _hoisted_10 = ["value"];
-const _hoisted_11 = ["value"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "InlineCellEditor",
   props: {
@@ -62,11 +58,84 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleCheckboxChange = (val) => {
       commit(val);
     };
-    const handleSelectChange = (e) => {
-      const target = e.target;
-      commit(target.value);
+    const selectWrapperRef = ref(null);
+    const selectDropdownRef = ref(null);
+    const highlightedIndex = ref(0);
+    const initIdx = selectValues.value.findIndex((v) => String(v) === String(props.value));
+    highlightedIndex.value = Math.max(initIdx, 0);
+    const getDisplayText = (value) => {
+      const formatValue = props.column.cellEditorParams?.formatValue;
+      if (formatValue) return formatValue(value);
+      return value != null ? String(value) : "";
+    };
+    const scrollHighlightedIntoView = () => {
+      nextTick(() => {
+        const dropdown = selectDropdownRef.value;
+        if (!dropdown) return;
+        const highlighted = dropdown.children[highlightedIndex.value];
+        highlighted?.scrollIntoView({ block: "nearest" });
+      });
+    };
+    const handleSelectKeyDown = (e) => {
+      const options = selectValues.value;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          highlightedIndex.value = Math.min(highlightedIndex.value + 1, options.length - 1);
+          scrollHighlightedIntoView();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
+          scrollHighlightedIntoView();
+          break;
+        case "Enter":
+          e.preventDefault();
+          e.stopPropagation();
+          if (options.length > 0 && highlightedIndex.value < options.length) {
+            commit(options[highlightedIndex.value]);
+          }
+          break;
+        case "Tab":
+          e.preventDefault();
+          if (options.length > 0 && highlightedIndex.value < options.length) {
+            commit(options[highlightedIndex.value]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          cancel();
+          break;
+      }
+    };
+    const positionDropdown = () => {
+      const wrapper = selectWrapperRef.value;
+      const dropdown = selectDropdownRef.value;
+      if (!wrapper || !dropdown) return;
+      const rect = wrapper.getBoundingClientRect();
+      const maxH = 200;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const flipUp = spaceBelow < maxH && rect.top > spaceBelow;
+      dropdown.style.position = "fixed";
+      dropdown.style.left = `${rect.left}px`;
+      dropdown.style.width = `${rect.width}px`;
+      dropdown.style.maxHeight = `${maxH}px`;
+      dropdown.style.zIndex = "9999";
+      dropdown.style.right = "auto";
+      if (flipUp) {
+        dropdown.style.top = "auto";
+        dropdown.style.bottom = `${window.innerHeight - rect.top}px`;
+      } else {
+        dropdown.style.top = `${rect.bottom}px`;
+      }
     };
     onMounted(() => {
+      if (selectWrapperRef.value) {
+        selectWrapperRef.value.focus();
+        positionDropdown();
+        return;
+      }
       const input = wrapperRef.value?.querySelector("input");
       if (input) {
         input.focus();
@@ -115,26 +184,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: "checkbox-editor",
           autofocus: ""
         }, null, 40, _hoisted_6)
-      ])) : __props.editorType === "select" ? (openBlock(), createElementBlock("div", _hoisted_7, [
-        createElementVNode("select", {
-          value: __props.value !== null && __props.value !== void 0 ? String(__props.value) : "",
-          onChange: handleSelectChange,
-          onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers(
-            //@ts-ignore
-            (...args) => unref(cancel) && unref(cancel)(...args),
-            ["prevent"]
-          ), ["esc"])),
-          class: "select-editor",
-          autofocus: ""
+      ])) : __props.editorType === "select" ? (openBlock(), createElementBlock("div", {
+        key: 2,
+        ref_key: "selectWrapperRef",
+        ref: selectWrapperRef,
+        tabindex: "0",
+        class: "custom-select-wrapper",
+        onKeydown: handleSelectKeyDown
+      }, [
+        createElementVNode("div", _hoisted_7, [
+          createElementVNode("span", null, toDisplayString(getDisplayText(__props.value)), 1),
+          _cache[10] || (_cache[10] = createElementVNode("span", { class: "custom-select-chevron" }, "▾", -1))
+        ]),
+        createElementVNode("div", {
+          ref_key: "selectDropdownRef",
+          ref: selectDropdownRef,
+          role: "listbox",
+          class: "custom-select-dropdown"
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(selectValues.value, (v) => {
-            return openBlock(), createElementBlock("option", {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(selectValues.value, (v, i) => {
+            return openBlock(), createElementBlock("div", {
               key: String(v),
-              value: String(v)
-            }, toDisplayString(String(v)), 9, _hoisted_9);
+              role: "option",
+              "aria-selected": i === highlightedIndex.value,
+              class: normalizeClass(["custom-select-option", { highlighted: i === highlightedIndex.value }]),
+              onClick: () => unref(commit)(v)
+            }, toDisplayString(getDisplayText(v)), 11, _hoisted_8);
           }), 128))
-        ], 40, _hoisted_8)
-      ])) : __props.editorType === "date" ? (openBlock(), createElementBlock("div", {
+        ], 512)
+      ], 544)) : __props.editorType === "date" ? (openBlock(), createElementBlock("div", {
         key: 3,
         ref_key: "wrapperRef",
         ref: wrapperRef,
@@ -143,14 +221,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("input", {
           type: "date",
           value: unref(localValue),
-          onInput: _cache[5] || (_cache[5] = (e) => unref(setLocalValue)(e.target.value)),
-          onBlur: _cache[6] || (_cache[6] = //@ts-ignore
+          onInput: _cache[4] || (_cache[4] = (e) => unref(setLocalValue)(e.target.value)),
+          onBlur: _cache[5] || (_cache[5] = //@ts-ignore
           (...args) => unref(handleBlur) && unref(handleBlur)(...args)),
-          onKeydown: _cache[7] || (_cache[7] = //@ts-ignore
+          onKeydown: _cache[6] || (_cache[6] = //@ts-ignore
           (...args) => unref(handleKeyDown) && unref(handleKeyDown)(...args)),
           class: "editor-input",
           autofocus: ""
-        }, null, 40, _hoisted_10)
+        }, null, 40, _hoisted_9)
       ], 512)) : (openBlock(), createElementBlock("div", {
         key: 4,
         ref_key: "wrapperRef",
@@ -160,14 +238,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("input", {
           type: "text",
           value: unref(localValue),
-          onInput: _cache[8] || (_cache[8] = (e) => unref(setLocalValue)(e.target.value)),
-          onBlur: _cache[9] || (_cache[9] = //@ts-ignore
+          onInput: _cache[7] || (_cache[7] = (e) => unref(setLocalValue)(e.target.value)),
+          onBlur: _cache[8] || (_cache[8] = //@ts-ignore
           (...args) => unref(handleBlur) && unref(handleBlur)(...args)),
-          onKeydown: _cache[10] || (_cache[10] = //@ts-ignore
+          onKeydown: _cache[9] || (_cache[9] = //@ts-ignore
           (...args) => unref(handleKeyDown) && unref(handleKeyDown)(...args)),
           class: "editor-input",
           autofocus: ""
-        }, null, 40, _hoisted_11)
+        }, null, 40, _hoisted_10)
       ], 512));
     };
   }

package/dist/types/DataGridTable/InlineCellEditor.vue.d.ts

@@ -11,5 +11,7 @@ export interface InlineCellEditorProps<T = any> {
 type __VLS_Props = InlineCellEditorProps;
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     wrapperRef: HTMLDivElement;
+    selectWrapperRef: HTMLDivElement;
+    selectDropdownRef: HTMLDivElement;
 }, any>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue-radix",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "OGrid Vue Radix – Lightweight data grid with sorting, filtering, pagination, column chooser, and CSV export. Built with Headless UI Vue.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",