@afurgeri/crud-vue 0.1.0

package/src/__test__/CrudToolbar.test.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CrudToolbar from '../components/CrudToolbar.vue';
+
+function mountToolbar(overrides: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
+    return mount(CrudToolbar, {
+        props: {
+            title: 'Products',
+            description: 'Manage your products',
+            search: '',
+            searchConfig: { fields: ['name'], placeholder: 'Search...' },
+            createConfig: { url: '/products/create', label: 'Create Product' },
+            hasActiveFilters: false,
+            filtersVisible: false,
+            ...overrides,
+        },
+        slots,
+        global: {
+            stubs: {
+                CrudSearch: { template: '<div class="crud-search"><slot /></div>' },
+                Button: { template: '<button class="btn"><slot /></button>' },
+            },
+        },
+    });
+}
+
+describe('CrudToolbar named slots', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    // CSLOT-004 Scenario: Title prepend slot injects content
+    it('renders #title-prepend content before the title (CSLOT-004)', () => {
+        const wrapper = mountToolbar({}, {
+            'title-prepend': '<span class="prepend-icon">⭐</span>',
+        });
+
+        const prepend = wrapper.find('.prepend-icon');
+        expect(prepend.exists()).toBe(true);
+        expect(prepend.text()).toBe('⭐');
+
+        // The title should still be present
+        expect(wrapper.text()).toContain('Products');
+    });
+
+    // CSLOT-004 Scenario: Title append slot
+    it('renders #title-append content after the description (CSLOT-004)', () => {
+        const wrapper = mountToolbar({}, {
+            'title-append': '<span class="append-badge">New</span>',
+        });
+
+        const append = wrapper.find('.append-badge');
+        expect(append.exists()).toBe(true);
+        expect(append.text()).toBe('New');
+    });
+
+    // CSLOT-004 Scenario: Toolbar actions slot
+    it('renders #toolbar-actions content (CSLOT-004)', () => {
+        const wrapper = mountToolbar({}, {
+            'toolbar-actions': '<button class="export-btn">Export</button>',
+        });
+
+        const exportBtn = wrapper.find('.export-btn');
+        expect(exportBtn.exists()).toBe(true);
+        expect(exportBtn.text()).toBe('Export');
+    });
+
+    // CSLOT-004 Scenario: Toolbar append slot
+    it('renders #toolbar-append content (CSLOT-004)', () => {
+        const wrapper = mountToolbar({}, {
+            'toolbar-append': '<span class="toolbar-end">End</span>',
+        });
+
+        const endEl = wrapper.find('.toolbar-end');
+        expect(endEl.exists()).toBe(true);
+        expect(endEl.text()).toBe('End');
+    });
+
+    // CSLOT-004 Scenario: Unused slots render nothing
+    it('renders nothing in slot positions when no slots are provided (CSLOT-004)', () => {
+        const wrapper = mountToolbar();
+
+        // Toolbar should render without errors
+        expect(wrapper.find('h2').exists()).toBe(true);
+        expect(wrapper.text()).toContain('Products');
+    });
+
+    // All 4 slots work together
+    it('renders all 4 slots simultaneously', () => {
+        const wrapper = mountToolbar({}, {
+            'title-prepend': '<span class="pre">Pre</span>',
+            'title-append': '<span class="post">Post</span>',
+            'toolbar-actions': '<span class="act">Act</span>',
+            'toolbar-append': '<span class="end">End</span>',
+        });
+
+        expect(wrapper.find('.pre').exists()).toBe(true);
+        expect(wrapper.find('.post').exists()).toBe(true);
+        expect(wrapper.find('.act').exists()).toBe(true);
+        expect(wrapper.find('.end').exists()).toBe(true);
+    });
+});

package/src/__test__/setup.ts

@@ -0,0 +1,43 @@
+import { vi } from 'vitest';
+
+vi.mock('@inertiajs/vue3', () => {
+    function createMockForm(initialData: Record<string, unknown>) {
+        const data = { ...initialData };
+        const form: Record<string, unknown> = {
+            ...data,
+            processing: false,
+            errors: {},
+            post: vi.fn(),
+            put: vi.fn(),
+            patch: vi.fn(),
+            delete: vi.fn(),
+            reset: vi.fn(),
+            clearErrors: vi.fn(),
+            setError: vi.fn(),
+            submit: vi.fn(),
+            transform: vi.fn((cb: (data: unknown) => unknown) => {
+                return cb(data);
+            }),
+        };
+        return form;
+    }
+
+    return {
+        router: {
+            get: vi.fn(),
+            post: vi.fn(),
+            put: vi.fn(),
+            patch: vi.fn(),
+            delete: vi.fn(),
+            visit: vi.fn(),
+            reload: vi.fn(),
+        },
+        useForm: (initialData?: Record<string, unknown>) =>
+            createMockForm(initialData ?? {}),
+        Link: {
+            name: 'Link',
+            template: '<a :href="href"><slot /></a>',
+            props: ['href', 'as', 'method', 'data', 'preserveScroll', 'preserveState', 'only'],
+        },
+    };
+});

package/src/__test__/useCrud.test.ts

@@ -0,0 +1,349 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { useCrud, buildFilters } from '../composables/useCrud';
+import { router } from '@inertiajs/vue3';
+import type { CrudFilter, UseCrudOptions } from '../types/crud';
+
+const mockRouterGet = router.get as ReturnType<typeof vi.fn>;
+
+function mockLocation(url: string) {
+    const parsed = new URL(url);
+    Object.defineProperty(window, 'location', {
+        value: {
+            href: url,
+            search: parsed.search,
+            pathname: parsed.pathname,
+            origin: parsed.origin,
+        },
+        writable: true,
+        configurable: true,
+    });
+}
+
+function getUrlSearchParams() {
+    const url = new URL(window.location.href);
+    return url.searchParams;
+}
+
+const textFilter: CrudFilter = {
+    field: 'name',
+    label: 'Name',
+    type: 'text',
+};
+
+const selectFilter: CrudFilter = {
+    field: 'status',
+    label: 'Status',
+    type: 'select',
+    options: [{ label: 'Active', value: 'active' }],
+};
+
+const numberFilter: CrudFilter = {
+    field: 'age',
+    label: 'Age',
+    type: 'number',
+};
+
+const dateFilter: CrudFilter = {
+    field: 'created_at',
+    label: 'Created',
+    type: 'date',
+};
+
+describe('useCrud hooks', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        mockLocation('https://example.com/products');
+        mockRouterGet.mockClear();
+    });
+
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+
+    // --- UCEXT-005: Backward compatibility ---
+
+    describe('backward compatibility', () => {
+        it('returns the same UseCrudReturn shape without options', () => {
+            const crud = useCrud([textFilter], ['name']);
+
+            expect(crud).toHaveProperty('search');
+            expect(crud).toHaveProperty('activeFilters');
+            expect(crud).toHaveProperty('sortField');
+            expect(crud).toHaveProperty('sortDirection');
+            expect(crud).toHaveProperty('hasActiveFilters');
+            expect(crud).toHaveProperty('filtersVisible');
+            expect(crud).toHaveProperty('onSearchInput');
+            expect(crud).toHaveProperty('onFilterChange');
+            expect(crud).toHaveProperty('onSortToggle');
+            expect(crud).toHaveProperty('applyFilters');
+            expect(crud).toHaveProperty('clearFilters');
+            expect(crud).toHaveProperty('toggleFilters');
+            expect(crud).toHaveProperty('getSortParam');
+            expect(crud.search.value).toBe('');
+        });
+
+        it('applies defaultSort when no URL sort param exists', () => {
+            mockLocation('https://example.com/products');
+
+            const crud = useCrud([], [], undefined, 'name');
+
+            // The default sort is applied via a setTimeout(0)
+            vi.advanceTimersByTime(10);
+
+            expect(mockRouterGet).toHaveBeenCalled();
+            const callUrl = mockRouterGet.mock.calls[0]?.[0] as string;
+            expect(callUrl).toContain('sort=name');
+        });
+
+        it('respects search debounce default of 300ms', () => {
+            const crud = useCrud([textFilter], ['name']);
+            crud.onSearchInput('test');
+
+            // Should NOT have triggered yet (300ms not passed)
+            vi.advanceTimersByTime(200);
+            const earlyCalls = mockRouterGet.mock.calls.filter(
+                (c: unknown[]) => typeof c[0] === 'string' && (c[0] as string).includes('search=test'),
+            );
+            expect(earlyCalls.length).toBe(0);
+
+            // After 300ms, it triggers
+            vi.advanceTimersByTime(150);
+            const lateCalls = mockRouterGet.mock.calls.filter(
+                (c: unknown[]) => typeof c[0] === 'string' && (c[0] as string).includes('search=test'),
+            );
+            expect(lateCalls.length).toBe(1);
+        });
+    });
+
+    // --- UCEXT-004: onBeforeReload ---
+
+    describe('onBeforeReload', () => {
+        it('transforms params when hook returns URLSearchParams (UCEXT-004)', () => {
+            const options: UseCrudOptions = {
+                onBeforeReload: (p) => {
+                    p.set('extra', 'val');
+                    return p;
+                },
+            };
+
+            const crud = useCrud([textFilter], ['name'], undefined, undefined, options);
+            crud.activeFilters.value = { name: 'foo' };
+            crud.applyFilters();
+
+            // onBeforeReload is called during reloadWithParams
+            const callUrl = mockRouterGet.mock.calls.find(
+                (c: unknown[]) => typeof c[0] === 'string' && (c[0] as string).includes('extra=val'),
+            );
+            expect(callUrl).toBeDefined();
+        });
+
+        it('prevents navigation when hook returns false (UCEXT-004)', () => {
+            const options: UseCrudOptions = {
+                onBeforeReload: () => false,
+            };
+
+            const crud = useCrud([textFilter], ['name'], undefined, undefined, options);
+            mockRouterGet.mockClear();
+            crud.onSearchInput('should-not-navigate');
+            vi.advanceTimersByTime(500);
+
+            // router.get should NOT have been called
+            expect(mockRouterGet).not.toHaveBeenCalled();
+        });
+
+        it('proceeds normally when hook returns void', () => {
+            const options: UseCrudOptions = {
+                onBeforeReload: () => {
+                    // void return
+                },
+            };
+
+            const crud = useCrud([textFilter], ['name'], undefined, undefined, options);
+            crud.onSearchInput('proceed');
+            vi.advanceTimersByTime(500);
+
+            const callUrl = mockRouterGet.mock.calls.find(
+                (c: unknown[]) => typeof c[0] === 'string' && (c[0] as string).includes('search=proceed'),
+            );
+            expect(callUrl).toBeDefined();
+        });
+
+        it('supports async onBeforeReload', async () => {
+            const options: UseCrudOptions = {
+                onBeforeReload: async (p) => {
+                    await Promise.resolve();
+                    p.set('async', 'true');
+                    return p;
+                },
+            };
+
+            const crud = useCrud([textFilter], ['name'], undefined, undefined, options);
+            crud.activeFilters.value = { name: 'foo' };
+            await crud.applyFilters();
+
+            // Wait for async onBeforeReload to resolve
+            await vi.advanceTimersByTimeAsync(100);
+
+            const callUrl = mockRouterGet.mock.calls.find(
+                (c: unknown[]) => typeof c[0] === 'string' && (c[0] as string).includes('async=true'),
+            );
+            expect(callUrl).toBeDefined();
+        });
+    });
+
+    // --- UCEXT-004: onError ---
+
+    describe('onError', () => {
+        it('calls onError when URL init JSON parsing fails (UCEXT-004)', () => {
+            const onError = vi.fn();
+            const options: UseCrudOptions = { onError };
+
+            mockLocation('https://example.com/products?filters=NOT_VALID_JSON');
+
+            useCrud([textFilter], ['name'], undefined, undefined, options);
+
+            expect(onError).toHaveBeenCalled();
+            expect(onError.mock.calls[0]?.[0]).toBeInstanceOf(Error);
+        });
+
+        it('does NOT call onError when no filters param exists', () => {
+            const onError = vi.fn();
+            const options: UseCrudOptions = { onError };
+
+            mockLocation('https://example.com/products');
+
+            useCrud([textFilter], ['name'], undefined, undefined, options);
+
+            expect(onError).not.toHaveBeenCalled();
+        });
+    });
+
+    // --- UCEXT-004: buildCustomFilters ---
+
+    describe('buildCustomFilters', () => {
+        it('replaces default filter building (UCEXT-004)', () => {
+            const options: UseCrudOptions = {
+                buildCustomFilters: () => ({ eq: { custom: 1 } }),
+            };
+
+            const crud = useCrud([textFilter], ['name'], undefined, undefined, options);
+            crud.activeFilters.value = { name: 'foo' };
+            crud.applyFilters();
+
+            const callUrl = mockRouterGet.mock.calls.find(
+                (c: unknown[]) => typeof c[0] === 'string',
+            )?.[0] as string | undefined;
+
+            expect(callUrl).toBeDefined();
+            // The custom filter doc should be in the filters param
+            expect(callUrl).toContain('filters=');
+            const url = new URL(callUrl!, 'https://example.com');
+            const filtersParam = url.searchParams.get('filters');
+            const decoded = JSON.parse(decodeURIComponent(filtersParam!));
+            expect(decoded).toEqual({ eq: { custom: 1 } });
+        });
+
+        it('uses default buildFilters when buildCustomFilters not provided', () => {
+            const crud = useCrud([textFilter], ['name'], undefined, undefined);
+            crud.activeFilters.value = { name: 'foo' };
+            crud.applyFilters();
+
+            const callUrl = mockRouterGet.mock.calls.find(
+                (c: unknown[]) => typeof c[0] === 'string',
+            )?.[0] as string | undefined;
+
+            expect(callUrl).toBeDefined();
+            const url = new URL(callUrl!, 'https://example.com');
+            const filtersParam = url.searchParams.get('filters');
+            const decoded = JSON.parse(decodeURIComponent(filtersParam!));
+            expect(decoded).toEqual({ like: { name: 'foo' } });
+        });
+    });
+
+    // --- UCEXT-004: searchDebounce ---
+
+    describe('searchDebounce', () => {
+        it('uses custom debounce value (UCEXT-004)', () => {
+            const options: UseCrudOptions = { searchDebounce: 500 };
+            const crud = useCrud([textFilter], ['name'], undefined, undefined, options);
+            mockRouterGet.mockClear();
+
+            crud.onSearchInput('test');
+
+            // At 300ms, nothing should fire
+            vi.advanceTimersByTime(300);
+            let calls = mockRouterGet.mock.calls.filter(
+                (c: unknown[]) => typeof c[0] === 'string' && (c[0] as string).includes('search=test'),
+            );
+            expect(calls.length).toBe(0);
+
+            // At 500ms, it should fire
+            vi.advanceTimersByTime(250);
+            calls = mockRouterGet.mock.calls.filter(
+                (c: unknown[]) => typeof c[0] === 'string' && (c[0] as string).includes('search=test'),
+            );
+            expect(calls.length).toBe(1);
+        });
+
+        it('disables debounce when searchDebounce is 0 (UCEXT-004)', () => {
+            const options: UseCrudOptions = { searchDebounce: 0 };
+            const crud = useCrud([textFilter], ['name'], undefined, undefined, options);
+            mockRouterGet.mockClear();
+
+            crud.onSearchInput('instant');
+
+            // Should fire synchronously (no setTimeout)
+            const calls = mockRouterGet.mock.calls.filter(
+                (c: unknown[]) => typeof c[0] === 'string' && (c[0] as string).includes('search=instant'),
+            );
+            expect(calls.length).toBe(1);
+        });
+    });
+});
+
+// --- UCEXT-003: buildFilters export ---
+
+describe('buildFilters (exported)', () => {
+    it('handles text filter type', () => {
+        const config: CrudFilter[] = [textFilter];
+        const result = buildFilters({ name: 'foo' }, config);
+        expect(result).toEqual({ like: { name: 'foo' } });
+    });
+
+    it('handles select filter type', () => {
+        const config: CrudFilter[] = [selectFilter];
+        const result = buildFilters({ status: 'active' }, config);
+        expect(result).toEqual({ eq: { status: 'active' } });
+    });
+
+    it('handles number filter type with min and max', () => {
+        const config: CrudFilter[] = [numberFilter];
+        const result = buildFilters({ age: { min: 18, max: 65 } }, config);
+        expect(result).toEqual({ gte: { age: 18 }, lte: { age: 65 } });
+    });
+
+    it('handles date filter type', () => {
+        const config: CrudFilter[] = [dateFilter];
+        const result = buildFilters(
+            { created_at: { from: '2024-01-01', to: '2024-12-31' } },
+            config,
+        );
+        expect(result).toEqual({
+            date_gte: { created_at: '2024-01-01' },
+            date_lte: { created_at: '2024-12-31' },
+        });
+    });
+
+    it('skips empty values', () => {
+        const config: CrudFilter[] = [textFilter];
+        const result = buildFilters({ name: '' }, config);
+        expect(result).toEqual({});
+    });
+
+    it('produces empty FilterDocument for empty state', () => {
+        const config: CrudFilter[] = [];
+        const result = buildFilters({}, config);
+        expect(result).toEqual({});
+    });
+});

package/src/components/CrudCards.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import { Separator } from './ui/separator';
+import type { CrudCardConfig, Paginator } from '../types/crud';
+import { router } from '@inertiajs/vue3';
+import { MoreHorizontal, Pencil, Eye, Trash2 } from 'lucide-vue-next';
+
+defineProps<{
+    items: Paginator;
+    card: CrudCardConfig;
+    showActions: boolean;
+    hasShow: boolean;
+    hasEdit: boolean;
+    hasDelete: boolean;
+}>();
+
+const emit = defineEmits<{
+    delete: [item: Record<string, unknown>];
+}>();
+</script>
+
+<template>
+    <div class="space-y-3 p-4">
+        <Card
+            v-for="(item, idx) in items.data"
+            :key="(item.id as string | number) ?? idx"
+            class="overflow-hidden transition-shadow hover:shadow-md"
+        >
+            <CardContent class="p-4">
+                <div class="flex items-start justify-between gap-3">
+                    <div class="min-w-0 flex-1">
+                        <slot name="card-content" :item="item" :card="card">
+                            <h4 class="truncate text-base font-semibold text-foreground">
+                                {{ card.title(item) }}
+                            </h4>
+                            <p
+                                v-if="card.subtitle"
+                                class="mt-0.5 truncate text-sm text-muted-foreground"
+                            >
+                                {{ card.subtitle(item) }}
+                            </p>
+                        </slot>
+                    </div>
+
+                    <slot name="actions" :item="item">
+                        <DropdownMenu v-if="showActions">
+                            <DropdownMenuTrigger as-child>
+                                <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0">
+                                    <MoreHorizontal class="h-4 w-4" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" class="w-36">
+                                <DropdownMenuItem
+                                    v-if="hasShow && item.show_url"
+                                    @click="router.get(item.show_url as string)"
+                                >
+                                    <Eye class="mr-2 h-4 w-4" />
+                                    View
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    v-if="hasEdit && item.edit_url"
+                                    @click="router.get(item.edit_url as string)"
+                                >
+                                    <Pencil class="mr-2 h-4 w-4" />
+                                    Edit
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator v-if="hasDelete && item.delete_url" />
+                                <DropdownMenuItem
+                                    v-if="hasDelete && item.delete_url"
+                                    class="text-destructive focus:text-destructive"
+                                    @click="emit('delete', item)"
+                                >
+                                    <Trash2 class="mr-2 h-4 w-4" />
+                                    Delete
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </slot>
+                </div>
+
+                <template v-if="card.meta && card.meta.length > 0">
+                    <Separator class="my-3" />
+                    <div class="grid grid-cols-1 gap-y-1.5">
+                        <div
+                            v-for="meta in card.meta"
+                            :key="meta.label"
+                            class="flex items-baseline justify-between"
+                        >
+                            <span class="text-xs text-muted-foreground">{{ meta.label }}</span>
+                            <span class="text-xs font-medium text-foreground">{{ meta.value(item) }}</span>
+                        </div>
+                    </div>
+                </template>
+            </CardContent>
+        </Card>
+    </div>
+</template>

package/src/components/CrudDeleteDialog.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { Button } from './ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from './ui/dialog';
+import { useForm } from '@inertiajs/vue3';
+import { AlertTriangle } from 'lucide-vue-next';
+import { ref } from 'vue';
+
+const props = defineProps<{
+    title?: string;
+    entityName?: string;
+}>();
+
+const emit = defineEmits<{
+    deleted: [];
+}>();
+
+const open = ref(false);
+const itemToDelete = ref<{ id: number | string; name?: string; delete_url?: string } | null>(null);
+
+const form = useForm({});
+
+function confirm(item: { id: number | string; name?: string; delete_url?: string }) {
+    itemToDelete.value = item;
+    open.value = true;
+}
+
+function close() {
+    open.value = false;
+    itemToDelete.value = null;
+}
+
+function deleteItem() {
+    if (!itemToDelete.value?.delete_url) return;
+
+    form.delete(itemToDelete.value.delete_url, {
+        onSuccess: () => {
+            close();
+            emit('deleted');
+        },
+        onFinish: () => close(),
+    });
+}
+
+defineExpose({ confirm, close });
+</script>
+
+<template>
+    <Dialog :open="open" @update:open="open = $event">
+        <DialogContent class="sm:max-w-md">
+            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
+                <AlertTriangle class="h-6 w-6 text-destructive" />
+            </div>
+
+            <DialogHeader class="text-center">
+                <DialogTitle>{{ title ?? 'Delete Record' }}</DialogTitle>
+                <DialogDescription>
+                    Are you sure you want to delete
+                    <span class="font-semibold text-foreground">
+                        {{ itemToDelete?.name ?? `#${itemToDelete?.id}` }}
+                    </span>?
+                    This action cannot be undone.
+                </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter class="sm:justify-center">
+                <Button variant="outline" @click="close"> Cancel </Button>
+                <Button variant="destructive" :disabled="form.processing" @click="deleteItem">
+                    Delete
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>