@afurgeri/crud-vue 0.1.0

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@afurgeri/crud-vue",
+    "version": "0.1.0",
+    "description": "Configurable CRUD components for Laravel + Inertia + Vue — tables, forms, detail views, filters, search, mobile cards",
+    "type": "module",
+    "license": "MIT",
+    "author": "afurgeri",
+    "keywords": [
+        "laravel",
+        "inertia",
+        "vue",
+        "crud",
+        "datatable",
+        "shadcn",
+        "tailwind"
+    ],
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
+    "exports": {
+        ".": "./src/index.ts"
+    },
+    "scripts": {
+        "test": "vitest --run",
+        "test:watch": "vitest"
+    },
+    "files": [
+        "src/**/*"
+    ],
+    "peerDependencies": {
+        "@inertiajs/vue3": "^2.0",
+        "lucide-vue-next": "^0.460.0",
+        "reka-ui": "^2.0",
+        "vue": "^3.5"
+    },
+    "dependencies": {
+        "@vueuse/core": "^12.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^2.5.0"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.7",
+        "@vue/test-utils": "^2.4.10",
+        "jsdom": "^29.1.1"
+    }
+}

package/src/__test__/CrudCards.test.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CrudCards from '../components/CrudCards.vue';
+
+const mockItems = {
+    data: [
+        { id: 1, name: 'Product A', status: 'active', show_url: '/items/1', edit_url: '/items/1/edit', delete_url: '/items/1' },
+        { id: 2, name: 'Product B', status: 'inactive', show_url: '/items/2', edit_url: '/items/2/edit', delete_url: '/items/2' },
+    ],
+    links: [],
+    from: 1,
+    to: 2,
+    total: 2,
+    current_page: 1,
+    last_page: 1,
+    per_page: 20,
+};
+
+const cardConfig = {
+    title: (item: Record<string, unknown>) => item.name as string,
+    subtitle: (item: Record<string, unknown>) => `Status: ${item.status}`,
+    meta: [
+        { label: 'ID', value: (item: Record<string, unknown>) => String(item.id) },
+    ],
+};
+
+const globalStubs = {
+    Card: { template: '<div class="card"><slot name="default" /></div>' },
+    CardContent: { template: '<div class="card-content"><slot /></div>' },
+    DropdownMenu: { template: '<div class="dropdown-menu"><slot /></div>' },
+    DropdownMenuContent: { template: '<div class="dropdown-content"><slot /></div>' },
+    DropdownMenuItem: { template: '<div class="dropdown-item"><slot /></div>' },
+    DropdownMenuSeparator: true,
+    DropdownMenuTrigger: { template: '<button class="dropdown-trigger"><slot /></button>' },
+    Button: { template: '<button><slot /></button>' },
+    Separator: true,
+};
+
+function mountCards(overrides: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
+    return mount(CrudCards, {
+        props: {
+            items: mockItems,
+            card: cardConfig,
+            showActions: true,
+            hasShow: true,
+            hasEdit: true,
+            hasDelete: true,
+            ...overrides,
+        },
+        slots,
+        global: { stubs: globalStubs },
+    });
+}
+
+describe('CrudCards slots', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    // CSLOT-002 Scenario: Default card actions
+    it('renders default actions dropdown when #actions is not provided (CSLOT-002)', () => {
+        const wrapper = mountCards();
+
+        // Should render 2 cards
+        expect(wrapper.findAll('.card').length).toBe(2);
+        // Default dropdowns should be present in each card
+        expect(wrapper.findAll('.dropdown-menu').length).toBe(2);
+        // Default View/Edit/Delete items
+        const items = wrapper.findAll('.dropdown-item');
+        expect(items.length).toBeGreaterThanOrEqual(3);
+        const texts = items.map(el => el.text());
+        expect(texts.some(t => t.includes('View'))).toBe(true);
+    });
+
+    // CSLOT-002 Scenario: Custom card actions
+    it('renders custom #actions content when slot is provided (CSLOT-002)', () => {
+        const wrapper = mountCards({}, {
+            actions: '<span class="my-action">Edit {{ item.name }}</span>',
+        });
+
+        const customActions = wrapper.findAll('.my-action');
+        expect(customActions.length).toBe(2);
+        expect(customActions[0]!.text()).toBe('Edit Product A');
+        expect(customActions[1]!.text()).toBe('Edit Product B');
+
+        // Default dropdown should NOT appear
+        expect(wrapper.findAll('.dropdown-menu').length).toBe(0);
+    });
+
+    // CSLOT-003 Scenario: Default card content
+    it('renders default card content (title, subtitle, meta) when #card-content is not provided (CSLOT-003)', () => {
+        const wrapper = mountCards();
+
+        // Title should be visible
+        expect(wrapper.text()).toContain('Product A');
+        expect(wrapper.text()).toContain('Product B');
+        // Subtitle
+        expect(wrapper.text()).toContain('Status: active');
+        // Meta
+        expect(wrapper.text()).toContain('ID');
+        expect(wrapper.text()).toContain('1');
+    });
+
+    // CSLOT-003 Scenario: Custom card content
+    it('renders custom #card-content when slot is provided (CSLOT-003)', () => {
+        const wrapper = mountCards({}, {
+            'card-content': '<div class="custom-content">{{ item.name }} - (custom)</div>',
+        });
+
+        const customContents = wrapper.findAll('.custom-content');
+        expect(customContents.length).toBe(2);
+        expect(customContents[0]!.text()).toBe('Product A - (custom)');
+        expect(customContents[1]!.text()).toBe('Product B - (custom)');
+
+        // Default title/subtitle/meta should NOT appear
+        expect(wrapper.text()).not.toContain('Status: active');
+    });
+});

package/src/__test__/CrudEmptyState.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CrudEmptyState from '../components/CrudEmptyState.vue';
+
+function mountEmptyState(overrides: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
+    return mount(CrudEmptyState, {
+        props: {
+            hasFilters: false,
+            create: { url: '/products/create', label: 'Create' },
+            ...overrides,
+        },
+        slots,
+        global: {
+            stubs: {
+                Button: { template: '<button class="btn"><slot /></button>' },
+            },
+        },
+    });
+}
+
+describe('CrudEmptyState named slots', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    // CSLOT-007 Scenario: Default empty state
+    it('renders default icon, message, and actions when no slots provided (CSLOT-007)', () => {
+        const wrapper = mountEmptyState();
+
+        // Default message text
+        expect(wrapper.text()).toContain('No records yet');
+        // Default action button
+        expect(wrapper.text()).toContain('Create');
+    });
+
+    // CSLOT-007 Scenario: With filters applied (no results found variant)
+    it('renders "No results found" when hasFilters is true (CSLOT-007)', () => {
+        const wrapper = mountEmptyState({ hasFilters: true });
+
+        expect(wrapper.text()).toContain('No results found');
+        expect(wrapper.text()).toContain('Clear Filters');
+    });
+
+    // CSLOT-007 Scenario: Custom icon
+    it('renders custom #icon content (CSLOT-007)', () => {
+        const wrapper = mountEmptyState({}, {
+            icon: '<span class="custom-icon">🎯</span>',
+        });
+
+        const customIcon = wrapper.find('.custom-icon');
+        expect(customIcon.exists()).toBe(true);
+        expect(customIcon.text()).toBe('🎯');
+    });
+
+    // CSLOT-007 Scenario: Custom message
+    it('renders custom #message content (CSLOT-007)', () => {
+        const wrapper = mountEmptyState({}, {
+            message: '<p class="custom-msg">Nothing here!</p>',
+        });
+
+        const customMsg = wrapper.find('.custom-msg');
+        expect(customMsg.exists()).toBe(true);
+        expect(customMsg.text()).toBe('Nothing here!');
+
+        // Default message should NOT be present
+        expect(wrapper.text()).not.toContain('No records yet');
+    });
+
+    // CSLOT-007 Scenario: Custom actions
+    it('renders custom #actions content (CSLOT-007)', () => {
+        const wrapper = mountEmptyState({}, {
+            actions: '<button class="custom-action">Import Data</button>',
+        });
+
+        const customAction = wrapper.find('.custom-action');
+        expect(customAction.exists()).toBe(true);
+        expect(customAction.text()).toBe('Import Data');
+
+        // Default Create button should NOT be present
+        expect(wrapper.text()).not.toContain('Create');
+    });
+});

package/src/__test__/CrudForm.test.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CrudForm from '../components/CrudForm.vue';
+
+const formFields = [
+    { name: 'name', label: 'Name', type: 'text' as const, required: true },
+    { name: 'email', label: 'Email', type: 'email' as const },
+    { name: 'description', label: 'Description', type: 'textarea' as const },
+];
+
+const globalStubs = {
+    Card: { template: '<div class="card"><slot name="default" /></div>' },
+    CardHeader: { template: '<div><slot /></div>' },
+    CardTitle: { template: '<h2><slot /></h2>' },
+    CardDescription: { template: '<p><slot /></p>' },
+    CardContent: { template: '<div class="card-content"><slot /></div>' },
+    Input: { template: '<input />', props: ['type', 'modelValue', 'placeholder', 'required', 'disabled'] },
+    Label: { template: '<label><slot /></label>' },
+    InputError: { template: '<span class="input-error"><slot /></span>' },
+    Select: { template: '<div class="select"><slot /></div>' },
+    SelectContent: { template: '<div><slot /></div>' },
+    SelectItem: { template: '<div><slot /></div>' },
+    SelectTrigger: { template: '<div><slot /></div>' },
+    SelectValue: { template: '<span><slot /></span>' },
+    Checkbox: { template: '<input type="checkbox" />' },
+    Spinner: { template: '<span class="spinner" />' },
+    ComboboxInput: { template: '<div class="combobox" />' },
+    Button: { template: '<button class="btn"><slot /></button>' },
+    Link: { template: '<a><slot /></a>' },
+};
+
+function mountForm(overrides: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
+    return mount(CrudForm, {
+        props: {
+            title: 'Create Product',
+            fields: formFields,
+            action: '/products',
+            method: 'post' as const,
+            initialData: { name: '', email: '', description: '' },
+            backRoute: '/products',
+            ...overrides,
+        },
+        slots,
+        global: { stubs: globalStubs },
+    });
+}
+
+describe('CrudForm #field-{name} dynamic slots', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    // CSLOT-005 Scenario: Default field rendering unchanged
+    it('renders all fields with default type-specific templates (CSLOT-005)', () => {
+        const wrapper = mountForm();
+
+        // Field labels should be present (uses Label stub)
+        expect(wrapper.text()).toContain('Name');
+        expect(wrapper.text()).toContain('Email');
+        expect(wrapper.text()).toContain('Description');
+    });
+
+    // CSLOT-005 Scenario: Override a specific field
+    it('renders custom #field-{name} slot for a specific field (CSLOT-005)', () => {
+        const wrapper = mountForm({}, {
+            'field-email': '<div class="custom-email-field">{{ field.label }} — Custom</div>',
+        });
+
+        const customField = wrapper.find('.custom-email-field');
+        expect(customField.exists()).toBe(true);
+        expect(customField.text()).toBe('Email — Custom');
+
+        // Other fields should still render defaults
+        expect(wrapper.text()).toContain('Name');
+        expect(wrapper.text()).toContain('Description');
+    });
+
+    // CSLOT-005: Multiple field overrides
+    it('supports overriding multiple fields (CSLOT-005)', () => {
+        const wrapper = mountForm({}, {
+            'field-name': '<div class="custom-name">Name override</div>',
+            'field-email': '<div class="custom-email">Email override</div>',
+        });
+
+        expect(wrapper.find('.custom-name').exists()).toBe(true);
+        expect(wrapper.find('.custom-email').exists()).toBe(true);
+        // Description still default
+        expect(wrapper.text()).toContain('Description');
+    });
+
+    // CSLOT-005: Slot receives { field, form } props
+    it('passes field and form as slot props (CSLOT-005)', () => {
+        const wrapper = mountForm({}, {
+            'field-name': '<div class="prop-test">{{ field.name }}|{{ field.type }}</div>',
+        });
+
+        const propTest = wrapper.find('.prop-test');
+        expect(propTest.exists()).toBe(true);
+        expect(propTest.text()).toBe('name|text');
+    });
+});

package/src/__test__/CrudShow.test.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CrudShow from '../components/CrudShow.vue';
+
+const entity = {
+    id: 1,
+    name: 'Test Product',
+    status: 'active',
+    email: 'test@example.com',
+    phone: '+1234567890',
+    price: 99.99,
+};
+
+const sections = [
+    {
+        title: 'Details',
+        icon: 'file-text',
+        fields: [
+            { label: 'Name', key: 'name', type: 'text' as const },
+            { label: 'Status', key: 'status', type: 'badge' as const, badgeClass: 'bg-green-100 text-green-700' },
+        ],
+    },
+    {
+        title: 'Contact',
+        fields: [
+            { label: 'Email', key: 'email', type: 'email' as const },
+            { label: 'Phone', key: 'phone', type: 'phone' as const },
+        ],
+    },
+    {
+        title: 'Pricing',
+        fields: [
+            { label: 'Price', key: 'price', type: 'money' as const },
+        ],
+    },
+];
+
+const globalStubs = {
+    Card: { template: '<div class="card"><slot name="default" /></div>' },
+    CardHeader: { template: '<div><slot /></div>' },
+    CardTitle: { template: '<h3><slot /></h3>' },
+    CardContent: { template: '<div class="card-content"><slot /></div>' },
+    Button: { template: '<button class="btn"><slot /></button>' },
+    Link: { template: '<a><slot /></a>' },
+};
+
+function mountShow(overrides: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
+    return mount(CrudShow, {
+        props: {
+            title: 'Product Details',
+            entity,
+            sections,
+            backRoute: '/products',
+            ...overrides,
+        },
+        slots,
+        global: { stubs: globalStubs },
+    });
+}
+
+describe('CrudShow #field-{key} dynamic slots', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    // CSLOT-006 Scenario: Default show field rendering
+    it('renders fields with built-in type-specific templates (CSLOT-006)', () => {
+        const wrapper = mountShow();
+
+        // Field labels should be present
+        expect(wrapper.text()).toContain('Name');
+        expect(wrapper.text()).toContain('Status');
+        expect(wrapper.text()).toContain('Email');
+        expect(wrapper.text()).toContain('Price');
+
+        // Values (computed from entity) should be present
+        expect(wrapper.text()).toContain('Test Product');
+        expect(wrapper.text()).toContain('active');
+        expect(wrapper.text()).toContain('test@example.com');
+        expect(wrapper.text()).toContain('$99.99');
+    });
+
+    // CSLOT-006 Scenario: Custom show field
+    it('renders custom #field-{key} slot override (CSLOT-006)', () => {
+        const wrapper = mountShow({}, {
+            'field-status': '<span class="custom-status">CUSTOM: {{ value }}</span>',
+        });
+
+        const customStatus = wrapper.find('.custom-status');
+        expect(customStatus.exists()).toBe(true);
+        expect(customStatus.text()).toBe('CUSTOM: active');
+
+        // Other fields still use defaults
+        expect(wrapper.text()).toContain('Test Product');
+        expect(wrapper.text()).toContain('$99.99');
+    });
+
+    // CSLOT-006: Slot receives { field, value, entity } props
+    it('passes field, value, and entity as slot props (CSLOT-006)', () => {
+        const wrapper = mountShow({}, {
+            'field-email': '<span class="prop-test">{{ field.label }}: {{ value }} (id={{ entity.id }})</span>',
+        });
+
+        const propTest = wrapper.find('.prop-test');
+        expect(propTest.exists()).toBe(true);
+        expect(propTest.text()).toBe('Email: test@example.com (id=1)');
+    });
+
+    // CSLOT-006: Override a money field
+    it('renders custom override for money field type (CSLOT-006)', () => {
+        const wrapper = mountShow({}, {
+            'field-price': '<span class="custom-price">€{{ value }}</span>',
+        });
+
+        const customPrice = wrapper.find('.custom-price');
+        expect(customPrice.exists()).toBe(true);
+        expect(customPrice.text()).toBe('€99.99');
+
+        // Default $ format should not appear
+        expect(wrapper.text()).not.toContain('$99.99');
+    });
+
+    // CSLOT-006: Multiple field overrides
+    it('supports overriding multiple fields (CSLOT-006)', () => {
+        const wrapper = mountShow({}, {
+            'field-name': '<span class="name-override">NAME: {{ value }}</span>',
+            'field-email': '<span class="email-override">EMAIL: {{ value }}</span>',
+        });
+
+        expect(wrapper.find('.name-override').exists()).toBe(true);
+        expect(wrapper.find('.email-override').exists()).toBe(true);
+        // Defaults for other fields
+        expect(wrapper.text()).toContain('$99.99');
+    });
+});

package/src/__test__/CrudTable.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CrudTable from '../components/CrudTable.vue';
+
+const mockItems = {
+    data: [
+        { id: 1, name: 'Item 1', status: 'active', show_url: '/items/1', edit_url: '/items/1/edit', delete_url: '/items/1' },
+        { id: 2, name: 'Item 2', status: 'inactive', show_url: '/items/2', edit_url: '/items/2/edit', delete_url: '/items/2' },
+    ],
+    links: [],
+    from: 1,
+    to: 2,
+    total: 2,
+    current_page: 1,
+    last_page: 1,
+    per_page: 20,
+};
+
+const columns = [
+    { key: 'name', title: 'Name', sortable: true },
+    { key: 'status', title: 'Status' },
+];
+
+// Stub all UI dependencies to avoid broken internal imports
+const globalStubs = {
+    Table: { template: '<table><slot /></table>' },
+    TableHeader: { template: '<thead><slot /></thead>' },
+    TableBody: { template: '<tbody><slot /></tbody>' },
+    TableRow: { template: '<tr><slot /></tr>' },
+    TableHead: { template: '<th><slot /></th>' },
+    TableCell: { template: '<td><slot /></td>' },
+    DropdownMenu: { template: '<div class="dropdown-menu"><slot /></div>' },
+    DropdownMenuContent: { template: '<div class="dropdown-content"><slot /></div>' },
+    DropdownMenuItem: { template: '<div class="dropdown-item"><slot /></div>' },
+    DropdownMenuSeparator: { template: '<div class="dropdown-sep" />' },
+    DropdownMenuTrigger: { template: '<button class="dropdown-trigger"><slot /></button>' },
+    Button: { template: '<button><slot /></button>' },
+};
+
+function mountTable(overrides: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
+    return mount(CrudTable, {
+        props: {
+            items: mockItems,
+            columns,
+            sortField: '',
+            sortDirection: 'asc' as const,
+            showActions: true,
+            hasShow: true,
+            hasEdit: true,
+            hasDelete: true,
+            ...overrides,
+        },
+        slots,
+        global: { stubs: globalStubs },
+    });
+}
+
+describe('CrudTable #actions slot', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    // CSLOT-001 Scenario: Default fallback renders actions dropdown
+    it('renders default actions dropdown when #actions is not provided (CSLOT-001)', () => {
+        const wrapper = mountTable();
+
+        // Each row should have a dropdown menu (default behavior)
+        const dropdowns = wrapper.findAll('.dropdown-menu');
+        expect(dropdowns.length).toBe(2);
+
+        // Default items should include View, Edit, Delete
+        const allItems = wrapper.findAll('.dropdown-item');
+        expect(allItems.length).toBeGreaterThanOrEqual(3);
+        const texts = allItems.map(el => el.text());
+        expect(texts.some(t => t.includes('View'))).toBe(true);
+        expect(texts.some(t => t.includes('Edit'))).toBe(true);
+        expect(texts.some(t => t.includes('Delete'))).toBe(true);
+    });
+
+    // CSLOT-001 Scenario: Consumer overrides actions
+    it('renders custom #actions content when slot is provided (CSLOT-001)', () => {
+        const wrapper = mountTable({}, {
+            actions: '<div class="custom-action">Custom: {{ item.name }}</div>',
+        });
+
+        const customActions = wrapper.findAll('.custom-action');
+        expect(customActions.length).toBe(2);
+        expect(customActions[0]!.text()).toBe('Custom: Item 1');
+        expect(customActions[1]!.text()).toBe('Custom: Item 2');
+
+        // Default dropdown items should NOT be present
+        const allItems = wrapper.findAll('.dropdown-item');
+        expect(allItems.length).toBe(0);
+    });
+
+    // CSLOT-001 Scenario: Actions slot not rendered when showActions is false
+    it('does not render actions column when showActions is false (CSLOT-001)', () => {
+        const wrapper = mountTable({ showActions: false });
+
+        // When showActions is false, no dropdown menus should be present
+        const dropdowns = wrapper.findAll('.dropdown-menu');
+        expect(dropdowns.length).toBe(0);
+
+        // Even custom action slots should not appear
+        const wrapper2 = mountTable({ showActions: false }, {
+            actions: '<span class="should-not-appear">Nope</span>',
+        });
+
+        expect(wrapper2.find('.should-not-appear').exists()).toBe(false);
+    });
+});