@alaarab/ogrid-vue 2.1.2 → 2.1.4

package/dist/esm/components/createInlineCellEditor.js

@@ -1,194 +0,0 @@
-import { defineComponent, ref, h, onMounted, nextTick, watch } from 'vue';
-const editorWrapperStyle = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0 2px',
-    boxSizing: 'border-box',
-};
-export function createInlineCellEditor(options) {
-    const { renderCheckbox, renderDatePicker } = options;
-    return 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);
-            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(() => {
-                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;
-                }
-            };
-            return () => {
-                if (props.editorType === 'checkbox') {
-                    const checked = !!props.value;
-                    return h('div', { style: { ...editorWrapperStyle, justifyContent: 'center' } }, renderCheckbox({
-                        checked,
-                        onChange: (c) => props.onCommit(c),
-                        onCancel: props.onCancel,
-                    }));
-                }
-                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 }, renderDatePicker({
-                        value: dateStr,
-                        onChange: (val) => props.onCommit(val),
-                        onCancel: props.onCancel,
-                    }));
-                }
-                // 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),
-                }));
-            };
-        },
-    });
-}

package/dist/esm/components/createOGrid.js

@@ -1,383 +0,0 @@
-/**
- * Shared OGrid factory for Vue UI packages.
- *
- * Both vue-vuetify and vue-primevue OGrid components are 100% identical —
- * they only differ in which DataGridTable, ColumnChooser, and PaginationControls
- * components they use. This factory extracts all shared logic into one place.
- */
-import { defineComponent, h, ref, onMounted, onUnmounted, computed } from 'vue';
-import { useOGrid, } from '../composables';
-// --- 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 filterEntry = sb.filters[filterKey];
-                        const currentVal = filterEntry?.type === 'text' ? filterEntry.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 msFilter = sb.filters[filterKey];
-                            const selected = msFilter?.type === 'multiSelect' ? msFilter.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 curFilter = sb.filters[filterKey];
-                                        const current = curFilter?.type === 'multiSelect' ? curFilter.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 dateFilter = sb.filters[filterKey];
-                        const existingValue = dateFilter?.type === 'date' ? dateFilter.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);
-}
-/**
- * Creates an OGrid component with framework-specific UI bindings.
- * All orchestration logic, sidebar, toolbar, and layout are shared.
- */
-export function createOGrid(ui) {
-    return 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 ref container so parent always gets the latest API value
-            expose({ api });
-            // Fullscreen state
-            const isFullScreen = ref(false);
-            const toggleFullScreen = () => { isFullScreen.value = !isFullScreen.value; };
-            // ESC key to exit fullscreen
-            const handleEscKey = (e) => {
-                if (e.key === 'Escape' && isFullScreen.value)
-                    isFullScreen.value = false;
-            };
-            onMounted(() => { document.addEventListener('keydown', handleEscKey); });
-            onUnmounted(() => { document.removeEventListener('keydown', handleEscKey); });
-            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);
-                }
-                // Fullscreen toggle button
-                const showFullScreen = layout.value.fullScreen === true;
-                const fullscreenButton = showFullScreen
-                    ? h('button', {
-                        type: 'button',
-                        title: isFullScreen.value ? 'Exit fullscreen' : 'Fullscreen',
-                        'aria-label': isFullScreen.value ? 'Exit fullscreen' : 'Fullscreen',
-                        onClick: toggleFullScreen,
-                        style: {
-                            background: 'none',
-                            border: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
-                            borderRadius: '4px',
-                            padding: '4px 6px',
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            color: 'var(--ogrid-fg, rgba(0,0,0,0.87))',
-                        },
-                    }, [
-                        isFullScreen.value
-                            ? h('svg', { width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.5', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', innerHTML: '<polyline points="4 10 0 10 0 14"/><polyline points="12 6 16 6 16 2"/><line x1="0" y1="10" x2="4" y2="6"/><line x1="16" y1="6" x2="12" y2="10"/>' })
-                            : h('svg', { width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.5', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', innerHTML: '<polyline points="10 2 14 2 14 6"/><polyline points="6 14 2 14 2 10"/><line x1="14" y1="2" x2="10" y2="6"/><line x1="2" y1="14" x2="6" y2="10"/>' }),
-                    ])
-                    : null;
-                // ColumnChooser in toolbar
-                const toolbarEnd = columnChooser.value.placement === 'toolbar'
-                    ? h(ui.ColumnChooser, {
-                        columns: columnChooser.value.columns,
-                        visibleColumns: columnChooser.value.visibleColumns,
-                        onVisibilityChange: columnChooser.value.onVisibilityChange,
-                    })
-                    : null;
-                // Pagination
-                const paginationNode = h(ui.PaginationControls, {
-                    currentPage: pagination.value.page,
-                    pageSize: pagination.value.pageSize,
-                    totalCount: pagination.value.displayTotalCount,
-                    onPageChange: pagination.value.setPage,
-                    onPageSizeChange: (size) => {
-                        pagination.value.setPageSize(size);
-                    },
-                    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(ui.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));
-                }
-                const hasToolbar = toolbarChildren.length > 0 || toolbarEnd != null || fullscreenButton != null;
-                const rootStyle = isFullScreen.value
-                    ? { position: 'fixed', inset: '0', zIndex: 9999, display: 'flex', flexDirection: 'column', background: 'var(--ogrid-bg, #fff)' }
-                    : { display: 'flex', flexDirection: 'column', border: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))', borderRadius: '4px', overflow: 'hidden' };
-                const containerStyle = isFullScreen.value
-                    ? { display: 'flex', flexDirection: 'column', flex: '1', minHeight: '0', overflow: 'hidden', background: 'var(--ogrid-bg, #fff)' }
-                    : undefined;
-                return h('div', {
-                    class: layout.value.className,
-                    style: rootStyle,
-                }, [
-                    // Inner container (for fullscreen: no border/radius)
-                    h('div', { style: containerStyle ?? {} }, [
-                        // Toolbar strip
-                        ...(hasToolbar ? [
-                            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),
-                                h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [
-                                    ...(toolbarEnd ? [toolbarEnd] : []),
-                                    ...(fullscreenButton ? [fullscreenButton] : []),
-                                ]),
-                            ]),
-                        ] : []),
-                        // 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]),
-                    ]),
-                ]);
-            };
-        },
-    });
-}

package/dist/esm/composables/index.js

@@ -1,33 +0,0 @@
-// Main orchestration composables
-export { useOGrid } from './useOGrid';
-export { useDataGridState } from './useDataGridState';
-// Feature composables
-export { useActiveCell } from './useActiveCell';
-export { useCellEditing } from './useCellEditing';
-export { useCellSelection } from './useCellSelection';
-export { useClipboard } from './useClipboard';
-export { useRowSelection } from './useRowSelection';
-export { useKeyboardNavigation } from './useKeyboardNavigation';
-export { useFillHandle } from './useFillHandle';
-export { useUndoRedo } from './useUndoRedo';
-export { useContextMenu } from './useContextMenu';
-export { useColumnResize } from './useColumnResize';
-export { useFilterOptions } from './useFilterOptions';
-export { useDebounce, useDebouncedCallback } from './useDebounce';
-export { useLatestRef } from './useLatestRef';
-export { useTableLayout } from './useTableLayout';
-// Headless state composables
-export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
-export { useTextFilterState } from './useTextFilterState';
-export { useMultiSelectFilterState } from './useMultiSelectFilterState';
-export { usePeopleFilterState } from './usePeopleFilterState';
-export { useDateFilterState } from './useDateFilterState';
-export { useColumnChooserState } from './useColumnChooserState';
-export { useInlineCellEditorState } from './useInlineCellEditorState';
-export { useRichSelectState } from './useRichSelectState';
-export { useSideBarState } from './useSideBarState';
-export { useColumnReorder } from './useColumnReorder';
-export { useVirtualScroll } from './useVirtualScroll';
-export { useColumnPinning } from './useColumnPinning';
-export { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
-export { useDataGridTableSetup } from './useDataGridTableSetup';