@alaarab/ogrid-vue-vuetify 2.1.2 → 2.1.4

package/dist/esm/DataGridTable/GridContextMenu.js

@@ -1,55 +0,0 @@
-import { defineComponent, h } from 'vue';
-import { VMenu, VList, VListItem, VDivider } from 'vuetify/components';
-import { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, } from '@alaarab/ogrid-vue';
-export const GridContextMenu = defineComponent({
-    name: 'GridContextMenu',
-    props: {
-        x: { type: Number, required: true },
-        y: { type: Number, required: true },
-        hasSelection: { type: Boolean, required: true },
-        canUndo: { type: Boolean, required: true },
-        canRedo: { type: Boolean, required: true },
-        onUndo: { type: Function, required: true },
-        onRedo: { type: Function, required: true },
-        onCopy: { type: Function, required: true },
-        onCut: { type: Function, required: true },
-        onPaste: { type: Function, required: true },
-        onSelectAll: { type: Function, required: true },
-        onClose: { type: Function, required: true },
-    },
-    setup(props) {
-        const handlers = getContextMenuHandlers(props);
-        const isDisabled = (item) => {
-            if (item.disabledWhenNoSelection && !props.hasSelection)
-                return true;
-            if (item.id === 'undo' && !props.canUndo)
-                return true;
-            if (item.id === 'redo' && !props.canRedo)
-                return true;
-            return false;
-        };
-        return () => h(VMenu, {
-            modelValue: true,
-            'onUpdate:modelValue': (v) => { if (!v)
-                props.onClose(); },
-            target: [props.x, props.y],
-            location: 'bottom start',
-        }, {
-            default: () => h(VList, { density: 'compact', 'aria-label': 'Grid context menu' }, () => GRID_CONTEXT_MENU_ITEMS.map((item) => [
-                ...(item.dividerBefore ? [h(VDivider, { key: `${item.id}-div` })] : []),
-                h(VListItem, {
-                    key: item.id,
-                    disabled: isDisabled(item),
-                    onClick: () => { handlers[item.id](); },
-                }, () => h('div', { style: { display: 'flex', alignItems: 'center', width: '100%' } }, [
-                    h('span', { style: { flex: '1' } }, item.label),
-                    ...(item.shortcut ? [
-                        h('span', {
-                            style: { marginLeft: '24px', color: 'rgba(0,0,0,0.4)', fontSize: '0.8em' },
-                        }, formatShortcut(item.shortcut)),
-                    ] : []),
-                ])),
-            ]).flat()),
-        });
-    },
-});

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -1,37 +0,0 @@
-import { h } from 'vue';
-import { VCheckbox } from 'vuetify/components';
-import { createInlineCellEditor } from '@alaarab/ogrid-vue';
-export const InlineCellEditor = createInlineCellEditor({
-    renderCheckbox: ({ checked, onChange, onCancel }) => h(VCheckbox, {
-        modelValue: checked,
-        hideDetails: true,
-        density: 'compact',
-        'onUpdate:modelValue': (c) => onChange(c),
-        onKeydown: (e) => {
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                onCancel();
-            }
-        },
-    }),
-    renderDatePicker: ({ value, onChange, onCancel }) => h('input', {
-        type: 'date',
-        value,
-        style: { width: '100%', height: '100%', border: 'none', outline: 'none', padding: '0 4px', fontSize: 'inherit' },
-        onKeydown: (e) => {
-            if (e.key === 'Enter') {
-                e.preventDefault();
-                onChange(e.target.value);
-            }
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                onCancel();
-            }
-            if (e.key === 'Tab') {
-                e.preventDefault();
-                onChange(e.target.value);
-            }
-        },
-        onBlur: (e) => onChange(e.target.value),
-    }),
-});

package/dist/esm/OGrid/OGrid.js

@@ -1,9 +0,0 @@
-import { createOGrid } from '@alaarab/ogrid-vue';
-import { DataGridTable } from '../DataGridTable/DataGridTable';
-import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
-import { PaginationControls } from '../PaginationControls/PaginationControls';
-export const OGrid = createOGrid({
-    DataGridTable,
-    ColumnChooser,
-    PaginationControls,
-});

package/dist/esm/PaginationControls/PaginationControls.js

@@ -1,131 +0,0 @@
-import { defineComponent, computed, h } from 'vue';
-import { VBtn, VSelect } from 'vuetify/components';
-import { getPaginationViewModel } from '@alaarab/ogrid-vue';
-export const PaginationControls = defineComponent({
-    name: 'PaginationControls',
-    props: {
-        currentPage: { type: Number, required: true },
-        pageSize: { type: Number, required: true },
-        totalCount: { type: Number, required: true },
-        onPageChange: { type: Function, required: true },
-        onPageSizeChange: { type: Function, required: true },
-        pageSizeOptions: { type: Array, default: undefined },
-        entityLabelPlural: { type: String, default: 'items' },
-    },
-    setup(props) {
-        const vm = computed(() => getPaginationViewModel(props.currentPage, props.pageSize, props.totalCount, props.pageSizeOptions ? { pageSizeOptions: props.pageSizeOptions } : undefined));
-        return () => {
-            const v = vm.value;
-            if (!v)
-                return null;
-            const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = v;
-            const label = props.entityLabelPlural ?? 'items';
-            return h('div', {
-                role: 'navigation',
-                'aria-label': 'Pagination',
-                style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    flexWrap: 'wrap',
-                    gap: '16px',
-                    padding: '0 12px',
-                    width: '100%',
-                    minWidth: '0',
-                    boxSizing: 'border-box',
-                },
-            }, [
-                // Summary text
-                h('span', {
-                    style: { fontSize: '0.875rem', color: 'var(--ogrid-fg-secondary, rgba(0,0,0,0.6))' },
-                }, `Showing ${startItem} to ${endItem} of ${props.totalCount.toLocaleString()} ${label}`),
-                // Page buttons
-                h('div', { style: { display: 'flex', alignItems: 'center', gap: '4px' } }, [
-                    // First page
-                    h(VBtn, {
-                        icon: 'mdi-page-first',
-                        size: 'small',
-                        variant: 'text',
-                        disabled: props.currentPage === 1,
-                        'aria-label': 'First page',
-                        onClick: () => props.onPageChange(1),
-                    }),
-                    // Previous
-                    h(VBtn, {
-                        icon: 'mdi-chevron-left',
-                        size: 'small',
-                        variant: 'text',
-                        disabled: props.currentPage === 1,
-                        'aria-label': 'Previous page',
-                        onClick: () => props.onPageChange(props.currentPage - 1),
-                    }),
-                    // Start ellipsis
-                    ...(showStartEllipsis ? [
-                        h(VBtn, {
-                            size: 'small',
-                            variant: 'outlined',
-                            'aria-label': 'Page 1',
-                            style: { minWidth: '32px' },
-                            onClick: () => props.onPageChange(1),
-                        }, () => '1'),
-                        h('span', { style: { margin: '0 4px', color: 'var(--ogrid-fg-secondary, rgba(0,0,0,0.6))' }, 'aria-hidden': 'true' }, '\u2026'),
-                    ] : []),
-                    // Page numbers
-                    ...pageNumbers.map((pageNum) => h(VBtn, {
-                        key: pageNum,
-                        size: 'small',
-                        variant: props.currentPage === pageNum ? 'flat' : 'outlined',
-                        color: props.currentPage === pageNum ? 'primary' : undefined,
-                        'aria-label': `Page ${pageNum}`,
-                        'aria-current': props.currentPage === pageNum ? 'page' : undefined,
-                        style: { minWidth: '32px' },
-                        onClick: () => props.onPageChange(pageNum),
-                    }, () => String(pageNum))),
-                    // End ellipsis
-                    ...(showEndEllipsis ? [
-                        h('span', { style: { margin: '0 4px', color: 'var(--ogrid-fg-secondary, rgba(0,0,0,0.6))' }, 'aria-hidden': 'true' }, '\u2026'),
-                        h(VBtn, {
-                            size: 'small',
-                            variant: 'outlined',
-                            'aria-label': `Page ${totalPages}`,
-                            style: { minWidth: '32px' },
-                            onClick: () => props.onPageChange(totalPages),
-                        }, () => String(totalPages)),
-                    ] : []),
-                    // Next
-                    h(VBtn, {
-                        icon: 'mdi-chevron-right',
-                        size: 'small',
-                        variant: 'text',
-                        disabled: props.currentPage >= totalPages,
-                        'aria-label': 'Next page',
-                        onClick: () => props.onPageChange(props.currentPage + 1),
-                    }),
-                    // Last page
-                    h(VBtn, {
-                        icon: 'mdi-page-last',
-                        size: 'small',
-                        variant: 'text',
-                        disabled: props.currentPage >= totalPages,
-                        'aria-label': 'Last page',
-                        onClick: () => props.onPageChange(totalPages),
-                    }),
-                ]),
-                // Page size selector
-                h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [
-                    h('span', { style: { fontSize: '0.875rem', color: 'var(--ogrid-fg-secondary, rgba(0,0,0,0.6))' } }, 'Rows'),
-                    h(VSelect, {
-                        modelValue: props.pageSize,
-                        items: v.pageSizeOptions,
-                        density: 'compact',
-                        hideDetails: true,
-                        variant: 'outlined',
-                        'aria-label': 'Rows per page',
-                        style: { minWidth: '70px', maxWidth: '90px' },
-                        'onUpdate:modelValue': (val) => props.onPageSizeChange(Number(val)),
-                    }),
-                ]),
-            ]);
-        };
-    },
-});