@alaarab/ogrid-vue-vuetify 2.0.9 → 2.0.11

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -1,5 +1,5 @@
 import { defineComponent, h } from 'vue';
-import { VBtn, VIcon, VMenu, VTooltip } from 'vuetify/components';
+import { VBtn, VIcon, VMenu, VTooltip, VCard } from 'vuetify/components';
 import { useColumnHeaderFilterState, } from '@alaarab/ogrid-vue';
 import { TextFilterPopover } from './TextFilterPopover';
 import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
@@ -9,6 +9,7 @@ const _VBtn = VBtn;
 const _VIcon = VIcon;
 const _VMenu = VMenu;
 const _VTooltip = VTooltip;
+const _VCard = VCard;
 export const ColumnHeaderFilter = defineComponent({
     name: 'ColumnHeaderFilter',
     props: {
@@ -145,11 +146,14 @@ export const ColumnHeaderFilter = defineComponent({
                         h(_VBtn, {
                             icon: true,
                             size: 'x-small',
-                            variant: 'text',
-                            color: props.isSorted ? 'primary' : undefined,
+                            variant: props.isSorted ? 'tonal' : 'text',
+                            color: props.isSorted ? 'primary' : 'default',
                             'aria-label': `Sort by ${props.columnName}`,
                             title: props.isSorted ? (props.isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort',
                             onClick: state.handlers.handleSortClick,
+                            style: {
+                                opacity: props.isSorted ? '1' : '0.7',
+                            },
                         }, () => h(_VIcon, { size: '16' }, () => props.isSorted
                             ? (props.isSortedDescending ? 'mdi-arrow-down' : 'mdi-arrow-up')
                             : 'mdi-swap-vertical')),
@@ -167,10 +171,13 @@ export const ColumnHeaderFilter = defineComponent({
                                     ...menuProps,
                                     icon: true,
                                     size: 'x-small',
-                                    variant: 'text',
-                                    color: state.hasActiveFilter.value || state.isFilterOpen.value ? 'primary' : undefined,
+                                    variant: (state.hasActiveFilter.value || state.isFilterOpen.value) ? 'tonal' : 'text',
+                                    color: (state.hasActiveFilter.value || state.isFilterOpen.value) ? 'primary' : 'default',
                                     'aria-label': `Filter ${props.columnName}`,
                                     title: `Filter ${props.columnName}`,
+                                    style: {
+                                        opacity: (state.hasActiveFilter.value || state.isFilterOpen.value) ? '1' : '0.7',
+                                    },
                                 }, () => h(_VIcon, { size: '16' }, () => 'mdi-filter-variant')),
                                 ...(state.hasActiveFilter.value ? [
                                     h('div', {
@@ -182,20 +189,23 @@ export const ColumnHeaderFilter = defineComponent({
                                             height: '6px',
                                             borderRadius: '50%',
                                             backgroundColor: 'rgb(var(--v-theme-primary))',
+                                            zIndex: '1',
                                         },
                                     }),
                                 ] : []),
                             ]),
-                            default: () => h('div', {
+                            default: () => h(_VCard, {
+                                elevation: 8,
                                 ref: (el) => { state.popoverRef.value = el; },
                                 onClick: (e) => e.stopPropagation(),
-                            }, [
+                            }, () => [
                                 h('div', {
                                     style: {
                                         borderBottom: '1px solid rgba(0,0,0,0.12)',
                                         padding: '8px 12px',
                                         fontWeight: '600',
                                         fontSize: '0.875rem',
+                                        backgroundColor: '#fff',
                                     },
                                 }, `Filter: ${props.columnName}`),
                                 renderPopoverContent(),

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,6 +1,6 @@
-import { defineComponent, h } from 'vue';
-import { VMenu, VList, VListItem } from 'vuetify/components';
-import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-vue';
+import { defineComponent, h, computed } from 'vue';
+import { VMenu, VList, VListItem, VDivider } from 'vuetify/components';
+import { getColumnHeaderMenuItems } from '@alaarab/ogrid-vue';
 export const ColumnHeaderMenu = defineComponent({
     name: 'ColumnHeaderMenu',
     props: {
@@ -10,9 +10,17 @@ export const ColumnHeaderMenu = defineComponent({
         onPinLeft: { type: Function, required: true },
         onPinRight: { type: Function, required: true },
         onUnpin: { type: Function, required: true },
+        onSortAsc: { type: Function, required: true },
+        onSortDesc: { type: Function, required: true },
+        onClearSort: { type: Function, required: true },
+        onAutosizeThis: { type: Function, required: true },
+        onAutosizeAll: { type: Function, required: true },
         canPinLeft: { type: Boolean, required: true },
         canPinRight: { type: Boolean, required: true },
         canUnpin: { type: Boolean, required: true },
+        currentSort: { type: String, default: null },
+        isSortable: { type: Boolean, default: true },
+        isResizable: { type: Boolean, default: true },
     },
     setup(props) {
         const handleOpenChange = (open) => {
@@ -20,36 +28,52 @@ export const ColumnHeaderMenu = defineComponent({
                 props.onClose();
             }
         };
-        const items = COLUMN_HEADER_MENU_ITEMS;
-        const getDisabled = (index) => {
-            if (index === 0)
-                return !props.canPinLeft;
-            if (index === 1)
-                return !props.canPinRight;
-            if (index === 2)
-                return !props.canUnpin;
-            return false;
+        const items = computed(() => getColumnHeaderMenuItems({
+            canPinLeft: props.canPinLeft,
+            canPinRight: props.canPinRight,
+            canUnpin: props.canUnpin,
+            currentSort: props.currentSort,
+            isSortable: props.isSortable,
+            isResizable: props.isResizable,
+        }));
+        const handlers = {
+            pinLeft: props.onPinLeft,
+            pinRight: props.onPinRight,
+            unpin: props.onUnpin,
+            sortAsc: props.onSortAsc,
+            sortDesc: props.onSortDesc,
+            clearSort: props.onClearSort,
+            autosizeThis: props.onAutosizeThis,
+            autosizeAll: props.onAutosizeAll,
         };
-        const getHandler = (index) => {
-            if (index === 0)
-                return props.onPinLeft;
-            if (index === 1)
-                return props.onPinRight;
-            if (index === 2)
-                return props.onUnpin;
-            return () => { };
+        const getHandler = (itemId) => handlers[itemId] || (() => { });
+        return () => {
+            // If no anchor element or menu is closed, don't render
+            if (!props.anchorElement)
+                return null;
+            return h(VMenu, {
+                modelValue: props.isOpen,
+                'onUpdate:modelValue': handleOpenChange,
+                location: 'bottom start',
+                // Use target prop instead of activator for programmatic positioning
+                target: props.anchorElement,
+            }, {
+                default: () => h(VList, { density: 'compact', 'aria-label': 'Column options' }, () => {
+                    const children = [];
+                    items.value.forEach((item, index) => {
+                        // Add divider before item if needed (but not at the start)
+                        if (item.divider && index > 0) {
+                            children.push(h(VDivider, { key: `divider-${item.id}` }));
+                        }
+                        children.push(h(VListItem, {
+                            key: item.id,
+                            disabled: item.disabled,
+                            onClick: () => { getHandler(item.id)(); },
+                        }, () => item.label));
+                    });
+                    return children;
+                }),
+            });
         };
-        return () => h(VMenu, {
-            modelValue: props.isOpen,
-            'onUpdate:modelValue': handleOpenChange,
-            activator: props.anchorElement || undefined,
-            location: 'bottom start',
-        }, {
-            default: () => h(VList, { density: 'compact', 'aria-label': 'Column options' }, () => items.map((item, index) => h(VListItem, {
-                key: item.id,
-                disabled: getDisabled(index),
-                onClick: () => { getHandler(index)(); },
-            }, () => item.label))),
-        });
     },
 });

package/dist/esm/DataGridTable/DataGridTable.css

@@ -0,0 +1,51 @@
+/* OGrid Vue Vuetify – DataGridTable styles */
+
+/* Remove focus outline from scrollable wrapper (keyboard nav is handled via cell outlines) */
+[role="region"][tabindex="0"] {
+  outline: none !important;
+}
+
+/* Cell selection highlighting - matches React implementation */
+.ogrid-cell-in-range {
+  background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
+}
+
+/* Cut range highlighting */
+.ogrid-cell-cut {
+  background: var(--ogrid-bg-hover, rgba(0, 0, 0, 0.04)) !important;
+  opacity: 0.7;
+}
+
+/* Drag-range highlight applied via DOM attributes during drag (bypasses Vue for performance) */
+[data-drag-range] {
+  background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
+}
+
+/* Anchor cell during drag: white/transparent background (like Excel) */
+[data-drag-anchor] {
+  background: var(--ogrid-bg, #fff) !important;
+}
+
+/* Accessibility: Focus visible styles */
+.v-table th:focus-visible,
+.v-table td:focus-visible {
+  outline: 2px solid rgb(var(--v-theme-primary));
+  outline-offset: -2px;
+  z-index: 11;
+}
+
+.v-btn:focus-visible {
+  outline: 2px solid rgb(var(--v-theme-primary));
+  outline-offset: 2px;
+}
+
+.v-checkbox:focus-visible {
+  outline: 2px solid rgb(var(--v-theme-primary));
+  outline-offset: 2px;
+}
+
+.ogrid-cell-content:focus-visible {
+  outline: 2px solid rgb(var(--v-theme-primary));
+  outline-offset: -2px;
+  z-index: 3;
+}

package/dist/esm/DataGridTable/DataGridTable.js

@@ -5,6 +5,7 @@ import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
 import { ColumnHeaderMenu } from '../ColumnHeaderMenu/ColumnHeaderMenu';
 import { InlineCellEditor } from './InlineCellEditor';
 import { GridContextMenu } from './GridContextMenu';
+import './DataGridTable.css';
 const NOOP = () => { };
 export const DataGridTable = defineComponent({
     name: 'DataGridTable',
@@ -147,18 +148,20 @@ export const DataGridTable = defineComponent({
                     cellInlineStyle.position = 'relative';
                     cellInlineStyle.overflow = 'visible';
                 }
+                // Apply range/cut highlighting via CSS classes + data attributes for proper precedence
+                let highlightClass = '';
                 if (descriptor.isInRange) {
-                    cellInlineStyle.backgroundColor = 'var(--ogrid-bg-range, rgba(33, 115, 70, 0.12))';
+                    highlightClass = 'ogrid-cell-in-range';
                 }
                 if (descriptor.isInCutRange) {
-                    cellInlineStyle.backgroundColor = 'rgba(0,0,0,0.04)';
-                    cellInlineStyle.opacity = '0.7';
+                    highlightClass = 'ogrid-cell-cut';
                 }
                 const styledContent = cellStyle
                     ? h('span', { style: cellStyle }, content)
                     : content;
                 return h('div', {
                     ...interactionProps,
+                    class: highlightClass || undefined,
                     style: cellInlineStyle,
                 }, [
                     styledContent,
@@ -183,6 +186,13 @@ export const DataGridTable = defineComponent({
                     ] : []),
                 ]);
             };
+            // Compute pinning offsets
+            const columnWidthsMap = {};
+            visibleCols.forEach((col) => {
+                columnWidthsMap[col.columnId] = getColumnWidth(col);
+            });
+            const leftOffsets = pinning.computeLeftOffsets(visibleCols, columnWidthsMap, DEFAULT_MIN_COLUMN_WIDTH, hasCheckboxCol, CHECKBOX_COLUMN_WIDTH);
+            const rightOffsets = pinning.computeRightOffsets(visibleCols, columnWidthsMap, DEFAULT_MIN_COLUMN_WIDTH);
             // Build column layouts
             const columnLayouts = visibleCols.map((col, colIdx) => {
                 const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
@@ -196,14 +206,14 @@ export const DataGridTable = defineComponent({
                 };
                 if (isPinnedLeft || (isFreezeCol && colIdx === 0)) {
                     tdStyle.position = 'sticky';
-                    tdStyle.left = '0';
+                    tdStyle.left = `${leftOffsets[col.columnId] ?? 0}px`;
                     tdStyle.zIndex = '6';
                     tdStyle.backgroundColor = '#fff';
                     tdStyle.willChange = 'transform';
                 }
                 else if (isPinnedRight) {
                     tdStyle.position = 'sticky';
-                    tdStyle.right = '0';
+                    tdStyle.right = `${rightOffsets[col.columnId] ?? 0}px`;
                     tdStyle.zIndex = '6';
                     tdStyle.backgroundColor = '#fff';
                     tdStyle.willChange = 'transform';
@@ -215,12 +225,14 @@ export const DataGridTable = defineComponent({
                 const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
                 const isPinnedLeft = col.pinned === 'left';
                 const isPinnedRight = col.pinned === 'right';
-                const base = { fontWeight: '600', position: 'relative' };
+                const base = { fontWeight: '600', position: 'sticky', top: '0', backgroundColor: 'rgba(0,0,0,0.04)', zIndex: '8' };
                 if (isPinnedLeft || (isFreezeCol && colIdx === 0)) {
-                    return { ...base, position: 'sticky', left: '0', top: '0', zIndex: '9', backgroundColor: 'rgba(0,0,0,0.04)', willChange: 'transform' };
+                    const leftOffset = leftOffsets[col.columnId] ?? 0;
+                    return { ...base, position: 'sticky', left: `${leftOffset}px`, top: '0', zIndex: '10', backgroundColor: 'rgba(0,0,0,0.04)', willChange: 'transform' };
                 }
                 if (isPinnedRight) {
-                    return { ...base, position: 'sticky', right: '0', top: '0', zIndex: '9', backgroundColor: 'rgba(0,0,0,0.04)', willChange: 'transform' };
+                    const rightOffset = rightOffsets[col.columnId] ?? 0;
+                    return { ...base, position: 'sticky', right: `${rightOffset}px`, top: '0', zIndex: '10', backgroundColor: 'rgba(0,0,0,0.04)', willChange: 'transform' };
                 }
                 return base;
             };
@@ -278,7 +290,6 @@ export const DataGridTable = defineComponent({
                                     style: {
                                         width: '100%',
                                         borderCollapse: 'collapse',
-                                        overflow: 'hidden',
                                         minWidth: `${minTableWidth}px`,
                                         fontSize: '0.875rem',
                                     },
@@ -286,7 +297,7 @@ export const DataGridTable = defineComponent({
                                     'data-freeze-cols': freezeCols != null && freezeCols >= 1 ? freezeCols : undefined,
                                 }, [
                                     // Header
-                                    h('thead', { style: { position: 'sticky', top: '0', zIndex: '8', backgroundColor: 'rgba(0,0,0,0.04)' } }, headerRows.map((row, rowIdx) => h('tr', { key: rowIdx, style: { backgroundColor: 'rgba(0,0,0,0.04)' } }, [
+                                    h('thead', { style: { zIndex: '8', backgroundColor: 'rgba(0,0,0,0.04)' } }, headerRows.map((row, rowIdx) => h('tr', { key: rowIdx, style: { backgroundColor: 'rgba(0,0,0,0.04)' } }, [
                                         // Checkbox header cell (last leaf row only)
                                         ...(rowIdx === headerRows.length - 1 && hasCheckboxCol ? [
                                             h('th', {
@@ -539,9 +550,17 @@ export const DataGridTable = defineComponent({
                     onPinLeft: headerMenu.handlePinLeft,
                     onPinRight: headerMenu.handlePinRight,
                     onUnpin: headerMenu.handleUnpin,
+                    onSortAsc: headerMenu.handleSortAsc,
+                    onSortDesc: headerMenu.handleSortDesc,
+                    onClearSort: headerMenu.handleClearSort,
+                    onAutosizeThis: headerMenu.handleAutosizeThis,
+                    onAutosizeAll: headerMenu.handleAutosizeAll,
                     canPinLeft: headerMenu.canPinLeft,
                     canPinRight: headerMenu.canPinRight,
                     canUnpin: headerMenu.canUnpin,
+                    currentSort: headerMenu.currentSort,
+                    isSortable: headerMenu.isSortable,
+                    isResizable: headerMenu.isResizable,
                 }),
                 // Status bar
                 ...(statusBarConfig ? [

package/dist/types/ColumnHeaderMenu/ColumnHeaderMenu.d.ts

@@ -6,9 +6,17 @@ export interface ColumnHeaderMenuProps {
     onPinLeft: () => void;
     onPinRight: () => void;
     onUnpin: () => void;
+    onSortAsc: () => void;
+    onSortDesc: () => void;
+    onClearSort: () => void;
+    onAutosizeThis: () => void;
+    onAutosizeAll: () => void;
     canPinLeft: boolean;
     canPinRight: boolean;
     canUnpin: boolean;
+    currentSort: 'asc' | 'desc' | null;
+    isSortable: boolean;
+    isResizable: boolean;
 }
 export declare const ColumnHeaderMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isOpen: {
@@ -35,6 +43,26 @@ export declare const ColumnHeaderMenu: import("vue").DefineComponent<import("vue
         type: PropType<() => void>;
         required: true;
     };
+    onSortAsc: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onSortDesc: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onClearSort: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onAutosizeThis: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onAutosizeAll: {
+        type: PropType<() => void>;
+        required: true;
+    };
     canPinLeft: {
         type: BooleanConstructor;
         required: true;
@@ -47,9 +75,21 @@ export declare const ColumnHeaderMenu: import("vue").DefineComponent<import("vue
         type: BooleanConstructor;
         required: true;
     };
+    currentSort: {
+        type: PropType<"asc" | "desc" | null>;
+        default: null;
+    };
+    isSortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isResizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     isOpen: {
         type: BooleanConstructor;
         required: true;
@@ -74,6 +114,26 @@ export declare const ColumnHeaderMenu: import("vue").DefineComponent<import("vue
         type: PropType<() => void>;
         required: true;
     };
+    onSortAsc: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onSortDesc: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onClearSort: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onAutosizeThis: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onAutosizeAll: {
+        type: PropType<() => void>;
+        required: true;
+    };
     canPinLeft: {
         type: BooleanConstructor;
         required: true;
@@ -86,6 +146,21 @@ export declare const ColumnHeaderMenu: import("vue").DefineComponent<import("vue
         type: BooleanConstructor;
         required: true;
     };
+    currentSort: {
+        type: PropType<"asc" | "desc" | null>;
+        default: null;
+    };
+    isSortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isResizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     anchorElement: HTMLElement | null;
+    currentSort: "asc" | "desc" | null;
+    isSortable: boolean;
+    isResizable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,5 +1,6 @@
 import { type PropType, type VNode } from 'vue';
 import { type IOGridDataGridProps } from '@alaarab/ogrid-vue';
+import './DataGridTable.css';
 export declare const DataGridTable: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     gridProps: {
         type: PropType<IOGridDataGridProps<unknown>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue-vuetify",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "OGrid Vuetify – Vuetify-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -13,7 +13,7 @@
     }
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "build": "rimraf dist && tsc -p tsconfig.build.json && node scripts/copy-css.js",
     "test": "jest --passWithNoTests",
     "storybook": "storybook dev -p 6011 --no-open",
     "build-storybook": "storybook build"
@@ -37,13 +37,14 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-vue": "2.0.9"
+    "@alaarab/ogrid-vue": "2.0.11"
   },
   "peerDependencies": {
     "vue": "^3.3.0",
     "vuetify": "^3.0.0"
   },
   "devDependencies": {
+    "@mdi/font": "^7.4.47",
     "@storybook/vue3-vite": "^10.2.8",
     "@vitejs/plugin-vue": "^6.0.4",
     "storybook": "^10.2.8",
@@ -53,7 +54,9 @@
     "vue": "^3.5.28",
     "vuetify": "^3.11.8"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "publishConfig": {
     "access": "public"
   }