@alaarab/ogrid-vue-vuetify 2.0.2

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -0,0 +1,74 @@
+import { defineComponent, ref, 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 menuOpen = ref(false);
+        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: menuOpen.value,
+                'onUpdate:modelValue': (v) => { menuOpen.value = v; },
+                closeOnContentClick: false,
+                location: 'bottom end',
+            }, {
+                activator: ({ props: activatorProps }) => h(VBtn, {
+                    ...activatorProps,
+                    variant: 'outlined',
+                    size: 'small',
+                    prependIcon: 'mdi-view-column',
+                    appendIcon: menuOpen.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

@@ -0,0 +1,210 @@
+import { defineComponent, h } from 'vue';
+import { VBtn, VIcon, VMenu, VTooltip } 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
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const _VBtn = VBtn;
+const _VIcon = VIcon;
+const _VMenu = VMenu;
+const _VTooltip = VTooltip;
+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) {
+        const state = useColumnHeaderFilterState({
+            filterType: props.filterType,
+            isSorted: props.isSorted,
+            isSortedDescending: props.isSortedDescending,
+            onSort: props.onSort,
+            selectedValues: props.selectedValues,
+            onFilterChange: props.onFilterChange,
+            options: props.options,
+            isLoadingOptions: props.isLoadingOptions,
+            textValue: props.textValue,
+            onTextChange: props.onTextChange,
+            selectedUser: props.selectedUser,
+            onUserChange: props.onUserChange,
+            peopleSearch: props.peopleSearch,
+            dateValue: props.dateValue,
+            onDateChange: props.onDateChange,
+        });
+        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' } }, [
+                    // Sort button
+                    ...(props.onSort ? [
+                        h(_VBtn, {
+                            icon: true,
+                            size: 'x-small',
+                            variant: 'text',
+                            color: props.isSorted ? 'primary' : undefined,
+                            'aria-label': `Sort by ${props.columnName}`,
+                            title: props.isSorted ? (props.isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort',
+                            onClick: state.handlers.handleSortClick,
+                        }, () => 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, {
+                            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: 'text',
+                                    color: state.hasActiveFilter.value || state.isFilterOpen.value ? 'primary' : undefined,
+                                    'aria-label': `Filter ${props.columnName}`,
+                                    title: `Filter ${props.columnName}`,
+                                }, () => 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))',
+                                        },
+                                    }),
+                                ] : []),
+                            ]),
+                            default: () => h('div', {
+                                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',
+                                    },
+                                }, `Filter: ${props.columnName}`),
+                                renderPopoverContent(),
+                            ]),
+                        }),
+                    ] : []),
+                ]),
+            ]);
+        };
+    },
+});

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -0,0 +1,68 @@
+import { defineComponent, h } from 'vue';
+import { VBtn, VTextField, VCheckbox, VProgressCircular, VDivider } from 'vuetify/components';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const _VBtn = VBtn;
+const _VTextField = VTextField;
+const _VCheckbox = VCheckbox;
+const _VProgressCircular = VProgressCircular;
+const _VDivider = VDivider;
+/* eslint-enable @typescript-eslint/no-explicit-any */
+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

@@ -0,0 +1,82 @@
+import { defineComponent, h } from 'vue';
+import { VBtn, VTextField, VProgressCircular, VAvatar, VIcon, VDivider } from 'vuetify/components';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+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

@@ -0,0 +1,40 @@
+import { defineComponent, h } from 'vue';
+import { VBtn, VTextField } from 'vuetify/components';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const _VBtn = VBtn;
+const _VTextField = VTextField;
+/* eslint-enable @typescript-eslint/no-explicit-any */
+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

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