@alaarab/ogrid-vue-vuetify 2.0.19 → 2.0.22

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -141,23 +141,6 @@ export const ColumnHeaderFilter = defineComponent({
                 })),
                 // Sort + filter buttons
                 h('div', { style: { display: 'flex', alignItems: 'center', marginLeft: '4px', flexShrink: '0' } }, [
-                    // Sort button
-                    ...(props.onSort ? [
-                        h(_VBtn, {
-                            icon: true,
-                            size: 'x-small',
-                            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')),
-                    ] : []),
                     // Filter icon + menu
                     ...(props.filterType !== 'none' ? [
                         h(_VMenu, {

package/dist/esm/DataGridTable/DataGridTable.css

@@ -1,83 +1,13 @@
 /* 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;
-}
+/* Shared theme variables (light/dark mode, CSS custom properties) */
+@import '@alaarab/ogrid-vue/styles/ogrid-theme.css';
 
-/* 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;
-}
+/* Shared layout styles (table structure, header, cells, pinning, fill handle, etc.) */
+@import '@alaarab/ogrid-vue/styles/ogrid-layout.css';
 
-/* 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;
-}
+/* === Vuetify-specific: Accessibility focus styles === */
 
-/* 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));
@@ -100,316 +30,3 @@
   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;
-}
-
-/* === Editing cell wrapper === */
-
-.ogrid-editing-cell {
-  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;
-}
-
-/* === 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;
-}

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -1,216 +1,37 @@
-import { defineComponent, ref, h, onMounted, nextTick, watch } from 'vue';
+import { h } from 'vue';
 import { VCheckbox } from 'vuetify/components';
-const editorWrapperStyle = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0 2px',
-    boxSizing: 'border-box',
-};
-export const InlineCellEditor = defineComponent({
-    name: 'InlineCellEditor',
-    props: {
-        value: { default: undefined },
-        item: { type: Object, required: true },
-        column: { type: Object, required: true },
-        rowIndex: { type: Number, required: true },
-        editorType: { type: String, required: true },
-        onCommit: { type: Function, required: true },
-        onCancel: { type: Function, required: true },
-    },
-    setup(props) {
-        const inputRef = ref(null);
-        const selectWrapperRef = ref(null);
-        const selectDropdownRef = ref(null);
-        const localValue = ref(props.value);
-        const highlightedIndex = ref(0);
-        // Auto-focus on mount
-        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`;
+import { createInlineCellEditor } from '@alaarab/ogrid-vue';
+export const InlineCellEditor = createInlineCellEditor({
+    renderCheckbox: ({ checked, onChange, onCancel }) => h(VCheckbox, {
+        modelValue: checked,
+        hideDetails: true,
+        density: 'compact',
+        'onUpdate:modelValue': (c) => onChange(c),
+        onKeydown: (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onCancel();
             }
-            else {
-                dropdown.style.top = `${rect.bottom}px`;
+        },
+    }),
+    renderDatePicker: ({ value, onChange, onCancel }) => h('input', {
+        type: 'date',
+        value,
+        style: { width: '100%', height: '100%', border: 'none', outline: 'none', padding: '0 4px', fontSize: 'inherit' },
+        onKeydown: (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                onChange(e.target.value);
             }
-        };
-        onMounted(() => {
-            nextTick(() => {
-                if (selectWrapperRef.value) {
-                    selectWrapperRef.value.focus();
-                    positionDropdown();
-                    return;
-                }
-                inputRef.value?.focus();
-                inputRef.value?.select();
-            });
-        });
-        // Sync local value when prop changes
-        watch(() => props.value, (v) => { localValue.value = v; });
-        // Initialize highlighted index to current value
-        const initHighlightedIndex = () => {
-            const values = props.column.cellEditorParams?.values ?? [];
-            const idx = values.findIndex((v) => String(v) === String(props.value));
-            highlightedIndex.value = Math.max(idx, 0);
-        };
-        initHighlightedIndex();
-        const scrollHighlightedIntoView = () => {
-            nextTick(() => {
-                const dropdown = selectDropdownRef.value;
-                if (!dropdown)
-                    return;
-                const highlighted = dropdown.children[highlightedIndex.value];
-                highlighted?.scrollIntoView({ block: 'nearest' });
-            });
-        };
-        const getDisplayText = (value) => {
-            const formatValue = props.column.cellEditorParams?.formatValue;
-            if (formatValue)
-                return formatValue(value);
-            return value != null ? String(value) : '';
-        };
-        const handleSelectKeyDown = (e) => {
-            const values = props.column.cellEditorParams?.values ?? [];
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    highlightedIndex.value = Math.min(highlightedIndex.value + 1, values.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 (values.length > 0 && highlightedIndex.value < values.length) {
-                        props.onCommit(values[highlightedIndex.value]);
-                    }
-                    break;
-                case 'Tab':
-                    e.preventDefault();
-                    if (values.length > 0 && highlightedIndex.value < values.length) {
-                        props.onCommit(values[highlightedIndex.value]);
-                    }
-                    break;
-                case 'Escape':
-                    e.preventDefault();
-                    e.stopPropagation();
-                    props.onCancel();
-                    break;
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onCancel();
             }
-        };
-        return () => {
-            if (props.editorType === 'checkbox') {
-                const checked = !!props.value;
-                return h('div', { style: { ...editorWrapperStyle, justifyContent: 'center' } }, h(VCheckbox, {
-                    modelValue: checked,
-                    hideDetails: true,
-                    density: 'compact',
-                    'onUpdate:modelValue': (c) => props.onCommit(c),
-                    onKeydown: (e) => {
-                        if (e.key === 'Escape') {
-                            e.preventDefault();
-                            props.onCancel();
-                        }
-                    },
-                }));
+            if (e.key === 'Tab') {
+                e.preventDefault();
+                onChange(e.target.value);
             }
-            if (props.editorType === 'select') {
-                const values = props.column.cellEditorParams?.values ?? [];
-                return h('div', {
-                    ref: (el) => { selectWrapperRef.value = el; },
-                    tabindex: 0,
-                    style: { ...editorWrapperStyle, position: 'relative' },
-                    onKeydown: handleSelectKeyDown,
-                }, [
-                    h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', cursor: 'pointer', fontSize: '13px', color: 'inherit' } }, [
-                        h('span', getDisplayText(props.value)),
-                        h('span', { style: { marginLeft: '4px', fontSize: '10px', opacity: '0.5' } }, '\u25BE'),
-                    ]),
-                    h('div', {
-                        ref: (el) => { selectDropdownRef.value = el; },
-                        role: 'listbox',
-                        style: { position: 'absolute', top: '100%', left: '0', right: '0', maxHeight: '200px', overflowY: 'auto', background: 'var(--ogrid-bg, #fff)', border: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))', zIndex: '10', boxShadow: '0 4px 16px rgba(0,0,0,0.2)' },
-                    }, values.map((v, i) => h('div', {
-                        key: String(v),
-                        role: 'option',
-                        'aria-selected': i === highlightedIndex.value,
-                        onClick: () => props.onCommit(v),
-                        style: { padding: '6px 8px', cursor: 'pointer', color: 'var(--ogrid-fg, #242424)', ...(i === highlightedIndex.value ? { background: 'var(--ogrid-bg-hover, #e8f0fe)' } : {}) },
-                    }, getDisplayText(v)))),
-                ]);
-            }
-            if (props.editorType === 'date') {
-                let dateStr = '';
-                if (localValue.value) {
-                    const d = new Date(String(localValue.value));
-                    if (!Number.isNaN(d.getTime())) {
-                        dateStr = d.toISOString().slice(0, 10);
-                    }
-                }
-                return h('div', { style: editorWrapperStyle }, h('input', {
-                    ref: (el) => { inputRef.value = el; },
-                    type: 'date',
-                    value: dateStr,
-                    style: { width: '100%', height: '100%', border: 'none', outline: 'none', padding: '0 4px', fontSize: 'inherit' },
-                    onKeydown: (e) => {
-                        if (e.key === 'Enter') {
-                            e.preventDefault();
-                            props.onCommit(e.target.value);
-                        }
-                        if (e.key === 'Escape') {
-                            e.preventDefault();
-                            props.onCancel();
-                        }
-                        if (e.key === 'Tab') {
-                            e.preventDefault();
-                            props.onCommit(e.target.value);
-                        }
-                    },
-                    onBlur: (e) => props.onCommit(e.target.value),
-                }));
-            }
-            // Default: text editor
-            return h('div', { style: editorWrapperStyle }, h('input', {
-                ref: (el) => { inputRef.value = el; },
-                type: 'text',
-                value: localValue.value != null ? String(localValue.value) : '',
-                style: { width: '100%', height: '100%', border: 'none', outline: 'none', padding: '0 4px', fontSize: 'inherit', boxSizing: 'border-box' },
-                onInput: (e) => { localValue.value = e.target.value; },
-                onKeydown: (e) => {
-                    if (e.key === 'Enter') {
-                        e.preventDefault();
-                        props.onCommit(localValue.value);
-                    }
-                    if (e.key === 'Escape') {
-                        e.preventDefault();
-                        props.onCancel();
-                    }
-                    if (e.key === 'Tab') {
-                        e.preventDefault();
-                        props.onCommit(localValue.value);
-                    }
-                },
-                onBlur: () => props.onCommit(localValue.value),
-            }));
-        };
-    },
+        },
+        onBlur: (e) => onChange(e.target.value),
+    }),
 });

package/dist/esm/OGrid/OGrid.js

@@ -1,328 +1,9 @@
-import { defineComponent, h, computed } from 'vue';
-import { useOGrid, } from '@alaarab/ogrid-vue';
+import { createOGrid } from '@alaarab/ogrid-vue';
 import { DataGridTable } from '../DataGridTable/DataGridTable';
 import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
 import { PaginationControls } from '../PaginationControls/PaginationControls';
-// --- SideBar constants and styles ---
-const PANEL_WIDTH = 240;
-const TAB_WIDTH = 36;
-const PANEL_LABELS = {
-    columns: 'Columns',
-    filters: 'Filters',
-};
-const PANEL_ICONS = {
-    columns: '\u2261', // hamburger icon
-    filters: '\u2A65', // filter icon
-};
-/** Render the SideBar inline (tab strip + panel content). */
-function renderSideBar(sb) {
-    const isOpen = sb.activePanel !== null;
-    const position = sb.position ?? 'right';
-    const tabStripStyle = {
-        display: 'flex',
-        flexDirection: 'column',
-        width: `${TAB_WIDTH}px`,
-        background: 'var(--ogrid-header-bg, #f5f5f5)',
-        ...(position === 'right'
-            ? { borderLeft: '1px solid var(--ogrid-border, #e0e0e0)' }
-            : { borderRight: '1px solid var(--ogrid-border, #e0e0e0)' }),
-    };
-    const tabStrip = h('div', { style: tabStripStyle, role: 'tablist', 'aria-label': 'Side bar tabs' }, sb.panels.map((panel) => h('button', {
-        key: panel,
-        role: 'tab',
-        'aria-selected': sb.activePanel === panel,
-        'aria-label': PANEL_LABELS[panel],
-        title: PANEL_LABELS[panel],
-        onClick: () => sb.onPanelChange(sb.activePanel === panel ? null : panel),
-        style: {
-            width: `${TAB_WIDTH}px`,
-            height: `${TAB_WIDTH}px`,
-            border: 'none',
-            cursor: 'pointer',
-            color: 'var(--ogrid-fg, #242424)',
-            fontSize: '14px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: sb.activePanel === panel ? 'var(--ogrid-bg, #fff)' : 'transparent',
-            fontWeight: sb.activePanel === panel ? 'bold' : 'normal',
-        },
-    }, PANEL_ICONS[panel])));
-    let panelContent = null;
-    if (isOpen && sb.activePanel) {
-        const panelContainerStyle = {
-            width: `${PANEL_WIDTH}px`,
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden',
-            background: 'var(--ogrid-bg, #fff)',
-            color: 'var(--ogrid-fg, #242424)',
-            ...(position === 'right'
-                ? { borderLeft: '1px solid var(--ogrid-border, #e0e0e0)' }
-                : { borderRight: '1px solid var(--ogrid-border, #e0e0e0)' }),
-        };
-        const panelBodyChildren = [];
-        if (sb.activePanel === 'columns') {
-            const allVisible = sb.columns.every((c) => sb.visibleColumns.has(c.columnId));
-            // Select All / Clear All buttons
-            panelBodyChildren.push(h('div', { style: { display: 'flex', gap: '8px', marginBottom: '8px' } }, [
-                h('button', {
-                    disabled: allVisible,
-                    onClick: () => {
-                        const next = new Set(sb.visibleColumns);
-                        sb.columns.forEach((c) => next.add(c.columnId));
-                        sb.onSetVisibleColumns(next);
-                    },
-                    style: { flex: '1', cursor: 'pointer', background: 'var(--ogrid-bg-subtle, #f3f2f1)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: '4px', padding: '4px 8px' },
-                }, 'Select All'),
-                h('button', {
-                    onClick: () => {
-                        const next = new Set();
-                        sb.columns.forEach((c) => {
-                            if (c.required && sb.visibleColumns.has(c.columnId))
-                                next.add(c.columnId);
-                        });
-                        sb.onSetVisibleColumns(next);
-                    },
-                    style: { flex: '1', cursor: 'pointer', background: 'var(--ogrid-bg-subtle, #f3f2f1)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: '4px', padding: '4px 8px' },
-                }, 'Clear All'),
-            ]));
-            // Column checkboxes
-            sb.columns.forEach((col) => {
-                panelBodyChildren.push(h('label', { key: col.columnId, style: { display: 'flex', alignItems: 'center', gap: '6px', padding: '2px 0', cursor: 'pointer' } }, [
-                    h('input', {
-                        type: 'checkbox',
-                        checked: sb.visibleColumns.has(col.columnId),
-                        disabled: col.required,
-                        onChange: (e) => sb.onVisibilityChange(col.columnId, e.target.checked),
-                    }),
-                    h('span', null, col.name),
-                ]));
-            });
-        }
-        if (sb.activePanel === 'filters') {
-            if (sb.filterableColumns.length === 0) {
-                panelBodyChildren.push(h('div', { style: { color: 'var(--ogrid-muted, #999)', fontStyle: 'italic' } }, 'No filterable columns'));
-            }
-            else {
-                sb.filterableColumns.forEach((col) => {
-                    const filterKey = col.filterField;
-                    const groupChildren = [
-                        h('div', { style: { fontWeight: '500', marginBottom: '4px', fontSize: '13px' } }, col.name),
-                    ];
-                    if (col.filterType === 'text') {
-                        const currentVal = sb.filters[filterKey]?.type === 'text' ? sb.filters[filterKey].value : '';
-                        groupChildren.push(h('input', {
-                            type: 'text',
-                            value: currentVal,
-                            onInput: (e) => {
-                                const val = e.target.value;
-                                sb.onFilterChange(filterKey, val ? { type: 'text', value: val } : undefined);
-                            },
-                            placeholder: `Filter ${col.name}...`,
-                            'aria-label': `Filter ${col.name}`,
-                            style: { width: '100%', boxSizing: 'border-box', padding: '4px 6px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: '4px' },
-                        }));
-                    }
-                    if (col.filterType === 'multiSelect') {
-                        const options = sb.filterOptions[filterKey] ?? [];
-                        const msChildren = options.map((opt) => {
-                            const selected = sb.filters[filterKey]?.type === 'multiSelect' ? sb.filters[filterKey].value.includes(opt) : false;
-                            return h('label', { key: opt, style: { display: 'flex', alignItems: 'center', gap: '4px', padding: '1px 0', cursor: 'pointer', fontSize: '13px' } }, [
-                                h('input', {
-                                    type: 'checkbox',
-                                    checked: selected,
-                                    onChange: (e) => {
-                                        const current = sb.filters[filterKey]?.type === 'multiSelect' ? sb.filters[filterKey].value : [];
-                                        const next = e.target.checked
-                                            ? [...current, opt]
-                                            : current.filter((v) => v !== opt);
-                                        sb.onFilterChange(filterKey, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
-                                    },
-                                }),
-                                h('span', null, opt),
-                            ]);
-                        });
-                        groupChildren.push(h('div', { style: { maxHeight: '120px', overflowY: 'auto' }, role: 'group', 'aria-label': `${col.name} options` }, msChildren));
-                    }
-                    if (col.filterType === 'date') {
-                        const existingValue = sb.filters[filterKey]?.type === 'date' ? sb.filters[filterKey].value : { from: undefined, to: undefined };
-                        groupChildren.push(h('div', { style: { display: 'flex', flexDirection: 'column', gap: '4px' } }, [
-                            h('label', { style: { display: 'flex', alignItems: 'center', gap: '4px', fontSize: '12px' } }, [
-                                'From:',
-                                h('input', {
-                                    type: 'date',
-                                    value: existingValue.from ?? '',
-                                    onInput: (e) => {
-                                        const from = e.target.value || undefined;
-                                        const to = existingValue.to;
-                                        sb.onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
-                                    },
-                                    'aria-label': `${col.name} from date`,
-                                    style: { flex: '1', padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: '4px' },
-                                }),
-                            ]),
-                            h('label', { style: { display: 'flex', alignItems: 'center', gap: '4px', fontSize: '12px' } }, [
-                                'To:',
-                                h('input', {
-                                    type: 'date',
-                                    value: existingValue.to ?? '',
-                                    onInput: (e) => {
-                                        const to = e.target.value || undefined;
-                                        const from = existingValue.from;
-                                        sb.onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
-                                    },
-                                    'aria-label': `${col.name} to date`,
-                                    style: { flex: '1', padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: '4px' },
-                                }),
-                            ]),
-                        ]));
-                    }
-                    panelBodyChildren.push(h('div', { key: col.columnId, style: { marginBottom: '12px' } }, groupChildren));
-                });
-            }
-        }
-        panelContent = h('div', { role: 'tabpanel', 'aria-label': PANEL_LABELS[sb.activePanel], style: panelContainerStyle }, [
-            // Panel header
-            h('div', {
-                style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    padding: '8px 12px',
-                    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
-                    fontWeight: '600',
-                },
-            }, [
-                h('span', null, PANEL_LABELS[sb.activePanel]),
-                h('button', {
-                    onClick: () => sb.onPanelChange(null),
-                    style: { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: '16px', color: 'var(--ogrid-fg, #242424)' },
-                    'aria-label': 'Close panel',
-                }, '\u00D7'),
-            ]),
-            // Panel body
-            h('div', { style: { flex: '1', overflowY: 'auto', padding: '8px 12px' } }, panelBodyChildren),
-        ]);
-    }
-    const children = [];
-    if (position === 'left') {
-        children.push(tabStrip);
-        if (panelContent)
-            children.push(panelContent);
-    }
-    else {
-        if (panelContent)
-            children.push(panelContent);
-        children.push(tabStrip);
-    }
-    return h('div', {
-        style: { display: 'flex', flexDirection: 'row', flexShrink: '0' },
-        role: 'complementary',
-        'aria-label': 'Side bar',
-    }, children);
-}
-export const OGrid = defineComponent({
-    name: 'OGrid',
-    props: {
-        gridProps: { type: Object, required: true },
-    },
-    setup(props, { expose }) {
-        const propsRef = computed(() => props.gridProps);
-        const { dataGridProps, pagination, columnChooser, layout, api } = useOGrid(propsRef);
-        // Expose the API for parent refs
-        expose({ api: api.value });
-        return () => {
-            const sideBar = layout.value.sideBarProps;
-            const hasSideBar = sideBar != null;
-            const sideBarPosition = sideBar?.position ?? 'right';
-            // Toolbar
-            const toolbarChildren = [];
-            if (layout.value.toolbar) {
-                toolbarChildren.push(layout.value.toolbar);
-            }
-            // ColumnChooser in toolbar
-            const toolbarEnd = columnChooser.value.placement === 'toolbar'
-                ? h(ColumnChooser, {
-                    columns: columnChooser.value.columns,
-                    visibleColumns: columnChooser.value.visibleColumns,
-                    onVisibilityChange: columnChooser.value.onVisibilityChange,
-                })
-                : null;
-            // Pagination
-            const paginationNode = h(PaginationControls, {
-                currentPage: pagination.value.page,
-                pageSize: pagination.value.pageSize,
-                totalCount: pagination.value.displayTotalCount,
-                onPageChange: pagination.value.setPage,
-                onPageSizeChange: (size) => {
-                    pagination.value.setPageSize(size);
-                    pagination.value.setPage(1);
-                },
-                pageSizeOptions: pagination.value.pageSizeOptions,
-                entityLabelPlural: pagination.value.entityLabelPlural,
-            });
-            // Grid content area
-            const gridChild = h('div', {
-                style: { flex: '1', minWidth: '0', minHeight: '0', display: 'flex', flexDirection: 'column' },
-            }, [
-                h(DataGridTable, {
-                    gridProps: dataGridProps.value,
-                }),
-            ]);
-            // Main content area (sidebar + grid)
-            const mainAreaChildren = [];
-            if (hasSideBar && sideBarPosition === 'left') {
-                mainAreaChildren.push(renderSideBar(sideBar));
-            }
-            mainAreaChildren.push(gridChild);
-            if (hasSideBar && sideBarPosition !== 'left') {
-                mainAreaChildren.push(renderSideBar(sideBar));
-            }
-            return h('div', {
-                class: layout.value.className,
-                style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    border: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
-                    borderRadius: '4px',
-                    overflow: 'hidden',
-                },
-            }, [
-                // Toolbar strip
-                ...(toolbarChildren.length || toolbarEnd ? [
-                    h('div', {
-                        style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            padding: '8px 12px',
-                            borderBottom: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
-                            gap: '8px',
-                        },
-                    }, [
-                        h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flex: '1' } }, toolbarChildren),
-                        ...(toolbarEnd ? [toolbarEnd] : []),
-                    ]),
-                ] : []),
-                // Below toolbar strip
-                ...(layout.value.toolbarBelow ? [
-                    h('div', {
-                        style: { padding: '8px 12px', borderBottom: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))' },
-                    }, [layout.value.toolbarBelow]),
-                ] : []),
-                // Main content area (sidebar + grid)
-                h('div', { style: { display: 'flex', flex: '1', minHeight: '0' } }, mainAreaChildren),
-                // Footer strip (pagination)
-                h('div', {
-                    style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        padding: '8px 0',
-                        borderTop: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
-                    },
-                }, [paginationNode]),
-            ]);
-        };
-    },
+export const OGrid = createOGrid({
+    DataGridTable,
+    ColumnChooser,
+    PaginationControls,
 });

package/dist/esm/index.js

@@ -1,4 +1,6 @@
-// Re-export everything from vue adapter
+// Re-export all from base package for consumer convenience.
+// Note: This prevents tree-shaking of unused utilities.
+// Consider explicit named exports in a future major version.
 export * from '@alaarab/ogrid-vue';
 // Components
 export { OGrid } from './OGrid/OGrid';

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

@@ -1,14 +1,4 @@
-import { type PropType } from 'vue';
-import type { IColumnDef } from '@alaarab/ogrid-vue';
-export interface InlineCellEditorProps<T = unknown> {
-    value: unknown;
-    item: T;
-    column: IColumnDef<T>;
-    rowIndex: number;
-    editorType: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
-    onCommit: (value: unknown) => void;
-    onCancel: () => void;
-}
+export type { CreateInlineCellEditorOptions } from '@alaarab/ogrid-vue';
 export declare const InlineCellEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
         default: undefined;
@@ -18,7 +8,7 @@ export declare const InlineCellEditor: import("vue").DefineComponent<import("vue
         required: true;
     };
     column: {
-        type: PropType<IColumnDef>;
+        type: import("vue").PropType<import("@alaarab/ogrid-vue").IColumnDef>;
         required: true;
     };
     rowIndex: {
@@ -26,15 +16,15 @@ export declare const InlineCellEditor: import("vue").DefineComponent<import("vue
         required: true;
     };
     editorType: {
-        type: PropType<"text" | "select" | "checkbox" | "richSelect" | "date">;
+        type: import("vue").PropType<"text" | "select" | "checkbox" | "richSelect" | "date">;
         required: true;
     };
     onCommit: {
-        type: PropType<(value: unknown) => void>;
+        type: import("vue").PropType<(value: unknown) => void>;
         required: true;
     };
     onCancel: {
-        type: PropType<() => void>;
+        type: import("vue").PropType<() => void>;
         required: true;
     };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -48,7 +38,7 @@ export declare const InlineCellEditor: import("vue").DefineComponent<import("vue
         required: true;
     };
     column: {
-        type: PropType<IColumnDef>;
+        type: import("vue").PropType<import("@alaarab/ogrid-vue").IColumnDef>;
         required: true;
     };
     rowIndex: {
@@ -56,15 +46,15 @@ export declare const InlineCellEditor: import("vue").DefineComponent<import("vue
         required: true;
     };
     editorType: {
-        type: PropType<"text" | "select" | "checkbox" | "richSelect" | "date">;
+        type: import("vue").PropType<"text" | "select" | "checkbox" | "richSelect" | "date">;
         required: true;
     };
     onCommit: {
-        type: PropType<(value: unknown) => void>;
+        type: import("vue").PropType<(value: unknown) => void>;
         required: true;
     };
     onCancel: {
-        type: PropType<() => void>;
+        type: import("vue").PropType<() => void>;
         required: true;
     };
 }>> & Readonly<{}>, {

package/dist/types/OGrid/OGrid.d.ts

@@ -1,15 +1,13 @@
-import { type PropType, type VNode } from 'vue';
-import { type IOGridProps } from '@alaarab/ogrid-vue';
 export declare const OGrid: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     gridProps: {
-        type: PropType<IOGridProps<unknown>>;
+        type: import("vue").PropType<import("@alaarab/ogrid-vue").IOGridProps<unknown>>;
         required: true;
     };
-}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => 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<{
     gridProps: {
-        type: PropType<IOGridProps<unknown>>;
+        type: import("vue").PropType<import("@alaarab/ogrid-vue").IOGridProps<unknown>>;
         required: true;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue-vuetify",
-  "version": "2.0.19",
+  "version": "2.0.22",
   "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",
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-vue": "2.0.19"
+    "@alaarab/ogrid-vue": "2.0.22"
   },
   "peerDependencies": {
     "vue": "^3.3.0",