@alaarab/ogrid-vue-vuetify 2.1.2 → 2.1.4

package/dist/types/index.d.ts

@@ -1,4 +1,15 @@
-export * from '@alaarab/ogrid-vue';
+export type { ColumnFilterType, IDateFilterValue, IColumnFilterDef, IColumnMeta, IValueParserParams, ICellValueChangedEvent, CellEditorParams, IColumnGroupDef, HeaderCell, HeaderRow, IColumnDefinition, RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IColumnReorderConfig, IOGridApi, CsvColumn, StatusBarPart, StatusBarPartsInput, PaginationViewModel, GridContextMenuItem, IColumnHeaderMenuItem, GridContextMenuHandlerProps, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, ColumnPinState, IDropTarget, ICalculateDropTargetParams, IVisibleRange, OverlayRect, ISortState, ArrowNavigationContext, ArrowNavigationResult, } from '@alaarab/ogrid-vue';
+export { toUserLike, isInSelectionRange, normalizeSelectionRange, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, isFilterConfig, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, isRowInRange, getPinStateForColumn, reorderColumnArray, calculateDropTarget, computeVisibleRange, computeTotalHeight, getScrollTopForRow, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, debounce, measureRange, injectGlobalStyles, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, findCtrlArrowTarget, computeTabNavigation, computeArrowNavigation, applyCellDeletion, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, applyRangeRowSelection, computeRowSelectionState, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, applyFillValues, UndoRedoStack, validateColumns, validateRowIds, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, DEFAULT_DEBOUNCE_MS, PEOPLE_SEARCH_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-vue';
+export type { ZIndexKey } from '@alaarab/ogrid-vue';
+export type { IColumnDef, ICellEditorProps, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, } from '@alaarab/ogrid-vue';
+export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseActiveCellResult, EditingCell, UseCellEditingParams, UseCellEditingResult, UseCellSelectionParams, UseCellSelectionResult, UseClipboardParams, UseClipboardResult, UseRowSelectionParams, UseRowSelectionResult, UseKeyboardNavigationParams, UseKeyboardNavigationResult, UseFillHandleParams, UseFillHandleResult, UseUndoRedoParams, UseUndoRedoResult, ContextMenuPosition, UseContextMenuResult, UseColumnResizeParams, UseColumnResizeResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UseFilterOptionsResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, InlineCellEditorType, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, DebouncedFn, UseColumnPinningParams, UseColumnPinningResult, UseColumnHeaderMenuStateParams, UseColumnHeaderMenuStateResult, UseDataGridTableSetupParams, UseDataGridTableSetupResult, MaybeShallowRef, } from '@alaarab/ogrid-vue';
+export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, useColumnPinning, useColumnHeaderMenuState, useDataGridTableSetup, } from '@alaarab/ogrid-vue';
+export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, CellInteractionProps, } from '@alaarab/ogrid-vue';
+export { getCellInteractionProps } from '@alaarab/ogrid-vue';
+export { createDataGridTable, type IDataGridTableUIBindings } from '@alaarab/ogrid-vue';
+export { createInlineCellEditor, type CreateInlineCellEditorOptions } from '@alaarab/ogrid-vue';
+export { createOGrid, type IOGridUIBindings } from '@alaarab/ogrid-vue';
+export type { SideBarProps, SideBarFilterColumn } from '@alaarab/ogrid-vue';
 export { OGrid } from './OGrid/OGrid';
 export { DataGridTable } from './DataGridTable/DataGridTable';
 export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue-vuetify",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "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",
@@ -9,12 +9,12 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/esm/index.js"
+      "default": "./dist/esm/index.js"
     },
     "./styles/*": "./dist/esm/*"
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json && node scripts/copy-css.js",
+    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json",
     "test": "jest --passWithNoTests",
     "storybook": "storybook dev -p 6011 --no-open",
     "build-storybook": "storybook build"
@@ -38,7 +38,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-vue": "2.1.2"
+    "@alaarab/ogrid-vue": "2.1.4"
   },
   "peerDependencies": {
     "vue": "^3.3.0",

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -1,73 +0,0 @@
-import { defineComponent, computed, h } from 'vue';
-import { VBtn, VMenu, VList, VListItem, VDivider } from 'vuetify/components';
-import { useColumnChooserState } from '@alaarab/ogrid-vue';
-export const ColumnChooser = defineComponent({
-    name: 'ColumnChooser',
-    props: {
-        columns: { type: Array, required: true },
-        visibleColumns: { type: Object, required: true },
-        onVisibilityChange: { type: Function, required: true },
-    },
-    setup(props) {
-        const columnsRef = computed(() => props.columns);
-        const visibleColumnsRef = computed(() => props.visibleColumns);
-        const state = useColumnChooserState({
-            columns: columnsRef,
-            visibleColumns: visibleColumnsRef,
-            onVisibilityChange: props.onVisibilityChange,
-        });
-        return () => {
-            return h(VMenu, {
-                modelValue: state.open.value,
-                'onUpdate:modelValue': (v) => { state.setOpen(v); },
-                closeOnContentClick: false,
-                location: 'bottom end',
-            }, {
-                activator: ({ props: activatorProps }) => h(VBtn, {
-                    ...activatorProps,
-                    variant: 'outlined',
-                    size: 'small',
-                    prependIcon: 'mdi-view-column',
-                    appendIcon: state.open.value ? 'mdi-chevron-up' : 'mdi-chevron-down',
-                }, () => `Column Visibility (${state.visibleCount.value} of ${state.totalCount.value})`),
-                default: () => h('div', { style: { minWidth: '220px' } }, [
-                    // Header
-                    h('div', {
-                        style: {
-                            padding: '8px 12px',
-                            borderBottom: '1px solid rgba(0,0,0,0.12)',
-                            backgroundColor: 'rgba(0,0,0,0.04)',
-                            fontWeight: '600',
-                            fontSize: '0.875rem',
-                        },
-                    }, `Select Columns (${state.visibleCount.value} of ${state.totalCount.value})`),
-                    // Column list
-                    h(VList, { density: 'compact', style: { maxHeight: '320px', overflowY: 'auto' } }, () => props.columns.map((column) => h(VListItem, { key: column.columnId, style: { minHeight: '32px' } }, () => h('label', {
-                        style: { display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', width: '100%' },
-                    }, [
-                        h('input', {
-                            type: 'checkbox',
-                            checked: props.visibleColumns.has(column.columnId),
-                            onChange: (e) => state.handleCheckboxChange(column.columnId)(e.target.checked),
-                        }),
-                        h('span', { style: { fontSize: '0.875rem' } }, column.name),
-                    ])))),
-                    // Footer with actions
-                    h(VDivider),
-                    h('div', {
-                        style: {
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            gap: '8px',
-                            padding: '8px 12px',
-                            backgroundColor: 'rgba(0,0,0,0.04)',
-                        },
-                    }, [
-                        h(VBtn, { size: 'small', variant: 'text', onClick: state.handleClearAll }, () => 'Clear All'),
-                        h(VBtn, { size: 'small', variant: 'flat', color: 'primary', onClick: state.handleSelectAll }, () => 'Select All'),
-                    ]),
-                ]),
-            });
-        };
-    },
-});

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -1,187 +0,0 @@
-import { defineComponent, h } from 'vue';
-import { VBtn, VIcon, VMenu, VTooltip, VCard } from 'vuetify/components';
-import { useColumnHeaderFilterState, } from '@alaarab/ogrid-vue';
-import { TextFilterPopover } from './TextFilterPopover';
-import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
-import { PeopleFilterPopover } from './PeopleFilterPopover';
-// Vuetify component types don't align with h() overloads; cast to Component
-const _VBtn = VBtn;
-const _VIcon = VIcon;
-const _VMenu = VMenu;
-const _VTooltip = VTooltip;
-const _VCard = VCard;
-export const ColumnHeaderFilter = defineComponent({
-    name: 'ColumnHeaderFilter',
-    props: {
-        columnKey: { type: String, required: true },
-        columnName: { type: String, required: true },
-        filterType: { type: String, required: true },
-        isSorted: { type: Boolean, default: false },
-        isSortedDescending: { type: Boolean, default: false },
-        onSort: { type: Function, default: undefined },
-        selectedValues: { type: Array, default: undefined },
-        onFilterChange: { type: Function, default: undefined },
-        options: { type: Array, default: () => [] },
-        isLoadingOptions: { type: Boolean, default: false },
-        textValue: { type: String, default: '' },
-        onTextChange: { type: Function, default: undefined },
-        selectedUser: { type: Object, default: undefined },
-        onUserChange: { type: Function, default: undefined },
-        peopleSearch: { type: Function, default: undefined },
-        dateValue: { type: Object, default: undefined },
-        onDateChange: { type: Function, default: undefined },
-    },
-    setup(props) {
-        // Pass props directly so useColumnHeaderFilterState accesses reactive prop values
-        const state = useColumnHeaderFilterState(props);
-        const renderPopoverContent = () => {
-            if (props.filterType === 'multiSelect') {
-                return h(MultiSelectFilterPopover, {
-                    searchText: state.searchText.value,
-                    onSearchChange: state.setSearchText,
-                    options: props.options ?? [],
-                    filteredOptions: state.filteredOptions.value,
-                    selected: state.tempSelected.value,
-                    onOptionToggle: state.handlers.handleCheckboxChange,
-                    onSelectAll: state.handlers.handleSelectAll,
-                    onClearSelection: state.handlers.handleClearSelection,
-                    onApply: state.handlers.handleApplyMultiSelect,
-                    isLoading: props.isLoadingOptions,
-                });
-            }
-            if (props.filterType === 'text') {
-                return h(TextFilterPopover, {
-                    value: state.tempTextValue.value ?? '',
-                    onValueChange: state.setTempTextValue,
-                    onApply: state.handlers.handleTextApply,
-                    onClear: state.handlers.handleTextClear,
-                });
-            }
-            if (props.filterType === 'people') {
-                return h(PeopleFilterPopover, {
-                    selectedUser: props.selectedUser,
-                    searchText: state.peopleSearchText.value,
-                    onSearchChange: state.setPeopleSearchText,
-                    suggestions: state.peopleSuggestions.value,
-                    isLoading: state.isPeopleLoading.value,
-                    onUserSelect: state.handlers.handleUserSelect,
-                    onClearUser: state.handlers.handleClearUser,
-                });
-            }
-            if (props.filterType === 'date') {
-                return h('div', { style: { padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px' } }, [
-                    h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [
-                        h('span', { style: { minWidth: '36px', fontSize: '0.75rem' } }, 'From:'),
-                        h('input', {
-                            type: 'date',
-                            value: state.tempDateFrom.value ?? '',
-                            onInput: (e) => state.setTempDateFrom(e.target.value),
-                            style: { flex: '1', padding: '4px 6px' },
-                        }),
-                    ]),
-                    h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [
-                        h('span', { style: { minWidth: '36px', fontSize: '0.75rem' } }, 'To:'),
-                        h('input', {
-                            type: 'date',
-                            value: state.tempDateTo.value ?? '',
-                            onInput: (e) => state.setTempDateTo(e.target.value),
-                            style: { flex: '1', padding: '4px 6px' },
-                        }),
-                    ]),
-                    h('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '4px' } }, [
-                        h('button', {
-                            onClick: state.handlers.handleDateClear,
-                            disabled: !state.tempDateFrom.value && !state.tempDateTo.value,
-                            style: { padding: '4px 12px', cursor: 'pointer' },
-                        }, 'Clear'),
-                        h('button', {
-                            onClick: state.handlers.handleDateApply,
-                            style: { padding: '4px 12px', cursor: 'pointer' },
-                        }, 'Apply'),
-                    ]),
-                ]);
-            }
-            return null;
-        };
-        return () => {
-            return h('div', {
-                ref: (el) => { state.headerRef.value = el; },
-                style: { display: 'flex', alignItems: 'center', width: '100%', minWidth: '0' },
-            }, [
-                // Column name with tooltip
-                h('div', { style: { flex: '1', minWidth: '0', overflow: 'hidden' } }, h(_VTooltip, { text: props.columnName, location: 'top' }, {
-                    activator: ({ props: tipProps }) => h('span', {
-                        ...tipProps,
-                        'data-header-label': '',
-                        style: {
-                            fontWeight: '600',
-                            fontSize: '0.875rem',
-                            lineHeight: '1.4',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            display: 'block',
-                        },
-                    }, props.columnName),
-                })),
-                // Sort + filter buttons
-                h('div', { style: { display: 'flex', alignItems: 'center', marginLeft: '4px', flexShrink: '0' } }, [
-                    // Filter icon + menu
-                    ...(props.filterType !== 'none' ? [
-                        h(_VMenu, {
-                            modelValue: state.isFilterOpen.value,
-                            'onUpdate:modelValue': (v) => state.setFilterOpen(v),
-                            closeOnContentClick: false,
-                            location: 'bottom start',
-                        }, {
-                            activator: ({ props: menuProps }) => h('div', { style: { position: 'relative' } }, [
-                                h(_VBtn, {
-                                    ...menuProps,
-                                    icon: true,
-                                    size: 'x-small',
-                                    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', {
-                                        style: {
-                                            position: 'absolute',
-                                            top: '2px',
-                                            right: '2px',
-                                            width: '6px',
-                                            height: '6px',
-                                            borderRadius: '50%',
-                                            backgroundColor: 'rgb(var(--v-theme-primary))',
-                                            zIndex: '1',
-                                        },
-                                    }),
-                                ] : []),
-                            ]),
-                            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: 'rgb(var(--v-theme-surface))',
-                                    },
-                                }, `Filter: ${props.columnName}`),
-                                renderPopoverContent(),
-                            ]),
-                        }),
-                    ] : []),
-                ]),
-            ]);
-        };
-    },
-});

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -1,66 +0,0 @@
-import { defineComponent, h } from 'vue';
-import { VBtn, VTextField, VCheckbox, VProgressCircular, VDivider } from 'vuetify/components';
-const _VBtn = VBtn;
-const _VTextField = VTextField;
-const _VCheckbox = VCheckbox;
-const _VProgressCircular = VProgressCircular;
-const _VDivider = VDivider;
-export const MultiSelectFilterPopover = defineComponent({
-    name: 'MultiSelectFilterPopover',
-    props: {
-        searchText: { type: String, required: true },
-        onSearchChange: { type: Function, required: true },
-        options: { type: Array, required: true },
-        filteredOptions: { type: Array, required: true },
-        selected: { type: Object, required: true },
-        onOptionToggle: { type: Function, required: true },
-        onSelectAll: { type: Function, required: true },
-        onClearSelection: { type: Function, required: true },
-        onApply: { type: Function, required: true },
-        isLoading: { type: Boolean, default: false },
-    },
-    setup(props) {
-        return () => h('div', { style: { width: '280px' } }, [
-            // Search
-            h('div', { style: { padding: '12px 12px 4px' } }, [
-                h(_VTextField, {
-                    modelValue: props.searchText,
-                    'onUpdate:modelValue': (v) => props.onSearchChange(v),
-                    placeholder: 'Search...',
-                    density: 'compact',
-                    variant: 'outlined',
-                    hideDetails: true,
-                    autocomplete: 'off',
-                    prependInnerIcon: 'mdi-magnify',
-                    onKeydown: (e) => e.stopPropagation(),
-                }),
-                h('span', {
-                    style: { display: 'block', marginTop: '4px', fontSize: '0.75rem', color: 'rgba(0,0,0,0.6)' },
-                }, `${props.filteredOptions.length} of ${props.options.length} options`),
-            ]),
-            // Select all / clear
-            h('div', { style: { display: 'flex', justifyContent: 'space-between', padding: '4px 12px' } }, [
-                h(_VBtn, { size: 'small', variant: 'text', onClick: props.onSelectAll }, () => `Select All (${props.filteredOptions.length})`),
-                h(_VBtn, { size: 'small', variant: 'text', onClick: props.onClearSelection }, () => 'Clear'),
-            ]),
-            // Options list
-            h('div', { style: { maxHeight: '240px', overflowY: 'auto', padding: '0 4px' } }, props.isLoading
-                ? h('div', { style: { display: 'flex', justifyContent: 'center', padding: '16px 0' } }, h(_VProgressCircular, { size: 24, indeterminate: true }))
-                : props.filteredOptions.length === 0
-                    ? h('div', { style: { padding: '16px 0', textAlign: 'center', fontSize: '0.875rem', color: 'rgba(0,0,0,0.6)' } }, 'No options found')
-                    : props.filteredOptions.map((option) => h('div', { key: option, style: { display: 'flex', alignItems: 'center', minHeight: '32px' } }, h(_VCheckbox, {
-                        modelValue: props.selected.has(option),
-                        label: option,
-                        density: 'compact',
-                        hideDetails: true,
-                        'onUpdate:modelValue': (checked) => props.onOptionToggle(option, checked),
-                    })))),
-            // Footer
-            h(_VDivider),
-            h('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: '8px', padding: '8px 12px' } }, [
-                h(_VBtn, { size: 'small', variant: 'text', onClick: props.onClearSelection }, () => 'Clear'),
-                h(_VBtn, { size: 'small', variant: 'flat', color: 'primary', onClick: props.onApply }, () => 'Apply'),
-            ]),
-        ]);
-    },
-});

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js

@@ -1,81 +0,0 @@
-import { defineComponent, h } from 'vue';
-import { VBtn, VTextField, VProgressCircular, VAvatar, VIcon, VDivider } from 'vuetify/components';
-const _VBtn = VBtn;
-const _VTextField = VTextField;
-const _VProgressCircular = VProgressCircular;
-const _VAvatar = VAvatar;
-const _VIcon = VIcon;
-const _VDivider = VDivider;
-export const PeopleFilterPopover = defineComponent({
-    name: 'PeopleFilterPopover',
-    props: {
-        selectedUser: { type: Object, default: undefined },
-        searchText: { type: String, required: true },
-        onSearchChange: { type: Function, required: true },
-        suggestions: { type: Array, required: true },
-        isLoading: { type: Boolean, default: false },
-        onUserSelect: { type: Function, required: true },
-        onClearUser: { type: Function, required: true },
-    },
-    setup(props) {
-        return () => h('div', { style: { width: '300px' } }, [
-            // Selected user display
-            ...(props.selectedUser ? [
-                h('div', { style: { padding: '12px 12px 8px', borderBottom: '1px solid rgba(0,0,0,0.12)' } }, [
-                    h('span', { style: { fontSize: '0.75rem', color: 'rgba(0,0,0,0.6)' } }, 'Currently filtered by:'),
-                    h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '4px' } }, [
-                        h(_VAvatar, { size: 32, image: props.selectedUser.photo }, () => props.selectedUser?.displayName?.[0] ?? ''),
-                        h('div', { style: { flex: '1', minWidth: '0' } }, [
-                            h('div', { style: { fontSize: '0.875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, props.selectedUser?.displayName),
-                            h('div', { style: { fontSize: '0.75rem', color: 'rgba(0,0,0,0.6)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, props.selectedUser?.email),
-                        ]),
-                        h(_VBtn, {
-                            icon: true,
-                            size: 'x-small',
-                            variant: 'text',
-                            'aria-label': 'Remove filter',
-                            onClick: props.onClearUser,
-                        }, () => h(_VIcon, { size: '16' }, () => 'mdi-close')),
-                    ]),
-                ]),
-            ] : []),
-            // Search input
-            h('div', { style: { padding: '12px 12px 4px' } }, h(_VTextField, {
-                modelValue: props.searchText,
-                'onUpdate:modelValue': (v) => props.onSearchChange(v),
-                placeholder: 'Search for a person...',
-                density: 'compact',
-                variant: 'outlined',
-                hideDetails: true,
-                autocomplete: 'off',
-                prependInnerIcon: 'mdi-magnify',
-                onKeydown: (e) => e.stopPropagation(),
-            })),
-            // Suggestions list
-            h('div', { style: { maxHeight: '240px', overflowY: 'auto' } }, props.isLoading && props.searchText.trim()
-                ? h('div', { style: { display: 'flex', justifyContent: 'center', padding: '16px 0' } }, h(_VProgressCircular, { size: 24, indeterminate: true }))
-                : props.suggestions.length === 0 && props.searchText.trim()
-                    ? h('div', { style: { padding: '16px 0', textAlign: 'center', fontSize: '0.875rem', color: 'rgba(0,0,0,0.6)' } }, 'No results found')
-                    : props.searchText.trim()
-                        ? props.suggestions.map((user) => h('div', {
-                            key: user.id || user.email || user.displayName,
-                            style: { display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 12px', cursor: 'pointer' },
-                            onClick: () => props.onUserSelect(user),
-                            onMouseenter: (e) => { e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.04)'; },
-                            onMouseleave: (e) => { e.currentTarget.style.backgroundColor = ''; },
-                        }, [
-                            h(_VAvatar, { size: 32, image: user.photo }, () => user.displayName?.[0] ?? ''),
-                            h('div', { style: { flex: '1', minWidth: '0' } }, [
-                                h('div', { style: { fontSize: '0.875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, user.displayName),
-                                h('div', { style: { fontSize: '0.75rem', color: 'rgba(0,0,0,0.6)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, user.email),
-                            ]),
-                        ]))
-                        : h('div', { style: { padding: '16px 0', textAlign: 'center', fontSize: '0.875rem', color: 'rgba(0,0,0,0.6)' } }, 'Type to search...')),
-            // Clear filter button
-            ...(props.selectedUser ? [
-                h(_VDivider),
-                h('div', { style: { padding: '8px 12px' } }, h(_VBtn, { size: 'small', variant: 'text', block: true, onClick: props.onClearUser }, () => 'Clear Filter')),
-            ] : []),
-        ]);
-    },
-});

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.js

@@ -1,38 +0,0 @@
-import { defineComponent, h } from 'vue';
-import { VBtn, VTextField } from 'vuetify/components';
-const _VBtn = VBtn;
-const _VTextField = VTextField;
-export const TextFilterPopover = defineComponent({
-    name: 'TextFilterPopover',
-    props: {
-        value: { type: String, required: true },
-        onValueChange: { type: Function, required: true },
-        onApply: { type: Function, required: true },
-        onClear: { type: Function, required: true },
-    },
-    setup(props) {
-        return () => h('div', { style: { width: '260px' } }, [
-            h('div', { style: { padding: '12px' } }, h(_VTextField, {
-                modelValue: props.value,
-                'onUpdate:modelValue': (v) => props.onValueChange(v),
-                placeholder: 'Enter search term...',
-                density: 'compact',
-                variant: 'outlined',
-                hideDetails: true,
-                autocomplete: 'off',
-                prependInnerIcon: 'mdi-magnify',
-                onKeydown: (e) => {
-                    e.stopPropagation();
-                    if (e.key === 'Enter') {
-                        e.preventDefault();
-                        props.onApply();
-                    }
-                },
-            })),
-            h('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: '8px', padding: '0 12px 12px' } }, [
-                h(_VBtn, { size: 'small', variant: 'text', disabled: !props.value, onClick: props.onClear }, () => 'Clear'),
-                h(_VBtn, { size: 'small', variant: 'flat', color: 'primary', onClick: props.onApply }, () => 'Apply'),
-            ]),
-        ]);
-    },
-});

package/dist/esm/ColumnHeaderFilter/index.js

@@ -1 +0,0 @@
-export { ColumnHeaderFilter } from './ColumnHeaderFilter';

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,79 +0,0 @@
-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: {
-        isOpen: { type: Boolean, required: true },
-        anchorElement: { type: Object, default: null },
-        onClose: { type: Function, required: true },
-        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) => {
-            if (!open) {
-                props.onClose();
-            }
-        };
-        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 = (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;
-                }),
-            });
-        };
-    },
-});

package/dist/esm/DataGridTable/DataGridTable.js

@@ -1,28 +0,0 @@
-import { h } from 'vue';
-import { VCheckbox, VProgressCircular } from 'vuetify/components';
-import { createDataGridTable } from '@alaarab/ogrid-vue';
-import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
-import { ColumnHeaderMenu } from '../ColumnHeaderMenu/ColumnHeaderMenu';
-import { InlineCellEditor } from './InlineCellEditor';
-import { GridContextMenu } from './GridContextMenu';
-import { renderEmptyState } from './EmptyState';
-import './DataGridTable.css';
-export const DataGridTable = createDataGridTable({
-    renderCheckbox: ({ modelValue, indeterminate, ariaLabel, onChange }) => h(VCheckbox, {
-        modelValue,
-        indeterminate,
-        hideDetails: true,
-        density: 'compact',
-        'aria-label': ariaLabel,
-        'onUpdate:modelValue': (c) => onChange(!!c),
-    }),
-    renderSpinner: (message) => h('div', { class: 'ogrid-loading-inner' }, [
-        h(VProgressCircular, { size: 24, indeterminate: true }),
-        h('span', { class: 'ogrid-loading-message' }, message),
-    ]),
-    ColumnHeaderFilter,
-    ColumnHeaderMenu,
-    InlineCellEditor,
-    GridContextMenu,
-    renderEmptyState: (emptyState) => renderEmptyState({ emptyState }),
-});

package/dist/esm/DataGridTable/EmptyState.js

@@ -1,22 +0,0 @@
-import { h } from 'vue';
-import { VBtn } from 'vuetify/components';
-export function renderEmptyState({ emptyState }) {
-    return h('div', { class: 'ogrid-empty-state' }, emptyState.render
-        ? [emptyState.render()]
-        : [
-            h('div', { class: 'ogrid-empty-state-title' }, 'No results found'),
-            h('div', { class: 'ogrid-empty-state-message' }, emptyState.message != null
-                ? String(emptyState.message)
-                : emptyState.hasActiveFilters
-                    ? [
-                        'No items match your current filters. Try adjusting your search or ',
-                        h(VBtn, {
-                            variant: 'text',
-                            size: 'small',
-                            onClick: emptyState.onClearAll,
-                        }, () => 'clear all filters'),
-                        ' to see all items.',
-                    ]
-                    : 'There are no items available at this time.'),
-        ]);
-}