@alaarab/ogrid-vue-vuetify 2.0.9 → 2.0.12

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) => {
+                        children.push(h(VListItem, {
+                            key: item.id,
+                            disabled: item.disabled,
+                            onClick: () => { getHandler(item.id)(); },
+                        }, () => item.label));
+                        // Add divider after item to separate sections
+                        if (item.divider) {
+                            children.push(h(VDivider, { key: `divider-${item.id}` }));
+                        }
+                    });
+                    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,398 @@
+/* OGrid Vue Vuetify - DataGridTable styles */
+
+/* ─── OGrid Theme Variables ─── */
+:root {
+  --ogrid-bg: #ffffff;
+  --ogrid-fg: rgba(0, 0, 0, 0.87);
+  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-border: rgba(0, 0, 0, 0.12);
+  --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: #0078d4;
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --ogrid-bg: #1e1e1e;
+    --ogrid-fg: rgba(255, 255, 255, 0.87);
+    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-border: rgba(255, 255, 255, 0.12);
+    --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+    --ogrid-selected-row-bg: #1a3a5c;
+    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+    --ogrid-accent: #4da6ff;
+    --ogrid-selection-color: #2ea043;
+    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  }
+}
+
+[data-theme="dark"] {
+  --ogrid-bg: #1e1e1e;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+  --ogrid-accent: #4da6ff;
+  --ogrid-selection-color: #2ea043;
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+}
+
+/* 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-hover-bg) !important;
+  opacity: 0.7;
+}
+
+/* Drag-range highlight applied via DOM attributes during drag (bypasses Vue for performance) */
+[data-drag-range] {
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+}
+
+/* Anchor cell during drag: white/transparent background (like Excel) */
+[data-drag-anchor] {
+  background: var(--ogrid-bg) !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;
+}
+
+/* === Layout === */
+
+.ogrid-outer-container {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--ogrid-bg);
+  color: var(--ogrid-fg);
+}
+
+.ogrid-scroll-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.ogrid-table-container {
+  position: relative;
+}
+
+.ogrid-table-container--loading {
+  opacity: 0.6;
+}
+
+.ogrid-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  background-color: var(--ogrid-bg);
+  color: var(--ogrid-fg);
+}
+
+/* === Header === */
+
+.ogrid-thead {
+  z-index: 8;
+  background-color: var(--ogrid-header-bg);
+}
+
+.ogrid-header-row {
+  background-color: var(--ogrid-header-bg);
+}
+
+.ogrid-header-cell {
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  background-color: var(--ogrid-header-bg);
+  z-index: 8;
+}
+
+.ogrid-header-cell--pinned-left {
+  z-index: 10;
+  will-change: transform;
+}
+
+.ogrid-header-cell--pinned-right {
+  z-index: 10;
+  will-change: transform;
+}
+
+.ogrid-header-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.ogrid-column-group-header {
+  text-align: center;
+  font-weight: 600;
+  border-bottom: 2px solid var(--ogrid-border);
+  padding: 6px;
+}
+
+.ogrid-column-menu-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 6px;
+  font-size: 16px;
+  color: var(--ogrid-fg-muted);
+  line-height: 1;
+  flex-shrink: 0;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  transition: background-color 0.15s;
+}
+
+.ogrid-column-menu-btn:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-fg);
+}
+
+/* === Checkbox column === */
+
+.ogrid-checkbox-header,
+.ogrid-checkbox-cell {
+  text-align: center;
+  padding: 4px;
+}
+
+.ogrid-checkbox-cell {
+  padding: 0;
+}
+
+.ogrid-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ogrid-checkbox-spacer {
+  padding: 0;
+}
+
+/* === Row numbers === */
+
+.ogrid-row-number-header {
+  text-align: center;
+  font-weight: 600;
+  background-color: var(--ogrid-header-bg);
+  color: var(--ogrid-fg-secondary);
+}
+
+.ogrid-row-number-spacer {
+  background-color: var(--ogrid-header-bg);
+}
+
+.ogrid-row-number-cell {
+  text-align: center;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  background-color: var(--ogrid-header-bg);
+  color: var(--ogrid-fg-secondary);
+}
+
+/* === Data cells === */
+
+.ogrid-data-cell {
+  position: relative;
+  padding: 0;
+  height: 1px;
+}
+
+.ogrid-data-cell--pinned-left {
+  position: sticky;
+  z-index: 6;
+  background-color: var(--ogrid-bg);
+  will-change: transform;
+}
+
+.ogrid-data-cell--pinned-right {
+  position: sticky;
+  z-index: 6;
+  background-color: var(--ogrid-bg);
+  will-change: transform;
+}
+
+.ogrid-cell-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+}
+
+.ogrid-cell-content--numeric {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.ogrid-cell-content--boolean {
+  justify-content: center;
+  text-align: center;
+}
+
+.ogrid-cell-content--editable {
+  cursor: cell;
+}
+
+.ogrid-cell-content--active {
+  outline: 2px solid var(--ogrid-selection, #217346);
+  outline-offset: -1px;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+}
+
+/* === Fill handle === */
+
+.ogrid-fill-handle {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  width: 7px;
+  height: 7px;
+  background-color: var(--ogrid-selection, #217346);
+  border: 1px solid var(--ogrid-bg);
+  border-radius: 1px;
+  cursor: crosshair;
+  pointer-events: auto;
+  z-index: 3;
+}
+
+/* === Resize handle === */
+
+.ogrid-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  user-select: none;
+}
+
+/* === Drop indicator === */
+
+.ogrid-drop-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--ogrid-primary, #217346);
+  pointer-events: none;
+  z-index: 100;
+}
+
+/* === Empty state === */
+
+.ogrid-empty-state {
+  padding: 32px 16px;
+  text-align: center;
+  border-top: 1px solid var(--ogrid-border);
+  background-color: var(--ogrid-header-bg);
+}
+
+.ogrid-empty-state-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.ogrid-empty-state-message {
+  font-size: 0.875rem;
+  color: var(--ogrid-fg-secondary);
+}
+
+/* === Loading overlay === */
+
+.ogrid-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ogrid-loading-overlay);
+}
+
+.ogrid-loading-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  background-color: var(--ogrid-bg);
+  border: 1px solid var(--ogrid-border);
+  border-radius: 4px;
+}
+
+.ogrid-loading-message {
+  font-size: 0.875rem;
+  color: var(--ogrid-fg-secondary);
+}
+
+/* === Popover editor anchor === */
+
+.ogrid-popover-anchor {
+  min-height: 100%;
+  min-width: 40px;
+}