@afurgeri/crud-vue 0.1.0

package/src/components/CrudPage.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { Card, CardContent } from './ui/card';
+import { useCrud } from '../composables/useCrud';
+import type { CrudColumn, CrudFeatureCreate, CrudFeatureSearch, CrudFilter, CrudPageProps } from '../types/crud';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import CrudCards from './CrudCards.vue';
+import CrudDeleteDialog from './CrudDeleteDialog.vue';
+import CrudEmptyState from './CrudEmptyState.vue';
+import CrudFilters from './CrudFilters.vue';
+import CrudPagination from './CrudPagination.vue';
+import CrudTable from './CrudTable.vue';
+import CrudToolbar from './CrudToolbar.vue';
+
+const props = withDefaults(defineProps<CrudPageProps>(), {
+    description: undefined,
+    features: () => ({}),
+    card: undefined,
+    itemsPropName: undefined,
+});
+
+// Responsive detection
+const isMobile = ref(false);
+
+function checkMobile() {
+    isMobile.value = window.innerWidth < 1024;
+}
+
+onMounted(() => {
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', checkMobile);
+});
+
+// Parse features
+const features = props.features;
+
+const filterConfig: CrudFilter[] =
+    features.filters && typeof features.filters !== 'boolean' ? features.filters : [];
+
+const searchConfig: CrudFeatureSearch | null =
+    features.search && typeof features.search !== 'boolean' ? features.search : null;
+
+const createConfig: CrudFeatureCreate | null =
+    features.create && typeof features.create !== 'boolean' ? features.create : null;
+
+const hasShow = features.show === true;
+const hasEdit = features.edit === true;
+const hasDelete = features.delete === true;
+const showActions = hasShow || hasEdit || hasDelete;
+
+// Composable
+const {
+    search,
+    activeFilters,
+    sortField,
+    sortDirection,
+    hasActiveFilters,
+    filtersVisible,
+    onSearchInput,
+    onFilterChange,
+    onSortToggle,
+    applyFilters,
+    clearFilters,
+    toggleFilters,
+} = useCrud(
+    filterConfig,
+    searchConfig?.fields ?? [],
+    props.itemsPropName,
+    features.defaultSort,
+);
+
+// Delete dialog ref
+const deleteDialog = ref<InstanceType<typeof CrudDeleteDialog> | null>(null);
+
+// Actions
+function handleDelete(item: Record<string, unknown>) {
+    deleteDialog.value?.confirm({
+        id: item.id as string | number,
+        name: item.name as string | undefined,
+        delete_url: item.delete_url as string | undefined,
+    });
+}
+
+// Check if we have any data and if filters are active
+const isEmpty = computed(() => !props.items.data || props.items.data.length === 0);
+const hasFiltersApplied = computed(() => hasActiveFilters.value);
+</script>
+
+<template>
+    <div class="mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+        <Card class="overflow-hidden border shadow-sm">
+            <!-- Toolbar -->
+            <CrudToolbar
+                :title="title"
+                :description="description"
+                :search="search"
+                :search-config="searchConfig"
+                :create-config="createConfig"
+                :has-active-filters="hasActiveFilters"
+                :filters-visible="filtersVisible"
+                @update:search="onSearchInput"
+                @search:clear="onSearchInput('')"
+                @toggle-filters="toggleFilters"
+                @clear-filters="clearFilters"
+            >
+                <template #title-prepend>
+                    <slot name="title-prepend" />
+                </template>
+                <template #title-append>
+                    <slot name="title-append" />
+                </template>
+                <template #toolbar-actions>
+                    <slot name="toolbar-actions" />
+                </template>
+                <template #toolbar-append>
+                    <slot name="toolbar-append" />
+                </template>
+            </CrudToolbar>
+
+            <!-- Filters Panel -->
+            <CrudFilters
+                v-if="filterConfig.length > 0"
+                v-model="activeFilters"
+                :filters="filterConfig"
+                :visible="filtersVisible"
+                @apply="applyFilters"
+                @reset="clearFilters"
+            />
+
+            <!-- Content -->
+            <CardContent class="p-0">
+                <!-- Empty State -->
+                <CrudEmptyState
+                    v-if="isEmpty"
+                    :has-filters="hasFiltersApplied"
+                    :create="features.create"
+                    @clear-filters="clearFilters"
+                />
+
+                <!-- Desktop: Table -->
+                <template v-else-if="!isMobile">
+                    <CrudTable
+                        :items="items"
+                        :columns="columns"
+                        :sort-field="sortField"
+                        :sort-direction="sortDirection"
+                        :show-actions="showActions"
+                        :has-show="hasShow"
+                        :has-edit="hasEdit"
+                        :has-delete="hasDelete"
+                        @sort="onSortToggle"
+                        @delete="handleDelete"
+                    >
+                        <!-- Forward all cell slots -->
+                        <template
+                            v-for="col in columns"
+                            :key="col.key"
+                            #[`cell-${col.key}`]="slotProps"
+                        >
+                            <slot
+                                :name="`cell-${col.key}`"
+                                v-bind="slotProps"
+                            />
+                        </template>
+                        <!-- Forward table actions slot -->
+                        <template #actions="slotProps">
+                            <slot name="actions" v-bind="slotProps" />
+                        </template>
+                    </CrudTable>
+                </template>
+
+                <!-- Mobile: Cards -->
+                <template v-else>
+                    <CrudCards
+                        :items="items"
+                        :card="card ?? { title: () => '' }"
+                        :show-actions="showActions"
+                        :has-show="hasShow"
+                        :has-edit="hasEdit"
+                        :has-delete="hasDelete"
+                        @delete="handleDelete"
+                    >
+                        <template #actions="slotProps">
+                            <slot name="actions" v-bind="slotProps" />
+                        </template>
+                        <template #card-content="slotProps">
+                            <slot name="card-content" v-bind="slotProps" />
+                        </template>
+                    </CrudCards>
+                </template>
+            </CardContent>
+
+            <!-- Pagination -->
+            <CrudPagination
+                v-if="(features.pagination !== false) && !isEmpty"
+                :items="items"
+            />
+        </Card>
+
+        <!-- Delete Dialog -->
+        <CrudDeleteDialog ref="deleteDialog" />
+    </div>
+</template>

package/src/components/CrudPagination.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { Button } from './ui/button';
+import type { Paginator, PaginatorLink } from '../types/crud';
+import { router } from '@inertiajs/vue3';
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next';
+
+const props = defineProps<{
+    items: Paginator;
+}>();
+
+function goToUrl(url: string | null) {
+    if (!url) return;
+    router.get(url, {}, {
+        preserveState: true,
+        preserveScroll: false,
+        replace: true,
+    });
+}
+
+function isPageNumber(link: PaginatorLink): boolean {
+    return !isNaN(Number(link.label));
+}
+
+const visibleLinks = () => {
+    const links = props.items.links;
+    if (links.length <= 5) return links;
+
+    // Show: first, ..., current-1, current, current+1, ..., last
+    const currentIdx = links.findIndex((l) => l.active);
+    const result: PaginatorLink[] = [];
+    let prevDots = false;
+    let nextDots = false;
+
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i];
+
+        if (i === 0 || i === links.length - 1) {
+            result.push(link);
+            continue;
+        }
+
+        if (isPageNumber(link)) {
+            const pageNum = Number(link.label);
+            const currentPageNum = props.items.current_page;
+
+            if (Math.abs(pageNum - currentPageNum) <= 1) {
+                result.push(link);
+                prevDots = false;
+                nextDots = false;
+            } else if (pageNum < currentPageNum && !prevDots) {
+                result.push({ url: null, label: '...', active: false });
+                prevDots = true;
+            } else if (pageNum > currentPageNum && !nextDots) {
+                result.push({ url: null, label: '...', active: false });
+                nextDots = true;
+            }
+        } else {
+            result.push(link);
+        }
+    }
+
+    return result;
+};
+</script>
+
+<template>
+    <div
+        v-if="items.last_page > 1"
+        class="flex flex-col items-center gap-3 border-t px-6 py-4 sm:flex-row sm:justify-between"
+    >
+        <p class="text-sm text-muted-foreground">
+            Showing
+            <span class="font-medium text-foreground">{{ items.from ?? 0 }}</span>
+            to
+            <span class="font-medium text-foreground">{{ items.to ?? 0 }}</span>
+            of
+            <span class="font-medium text-foreground">{{ items.total }}</span>
+            results
+        </p>
+
+        <div class="flex items-center gap-1">
+            <Button
+                variant="outline"
+                size="icon"
+                class="h-8 w-8"
+                :disabled="!items.links[0]?.url"
+                @click="goToUrl(items.links[0]?.url ?? null)"
+            >
+                <ChevronLeft class="h-4 w-4" />
+            </Button>
+
+            <template v-for="link in visibleLinks()" :key="link.label">
+                <Button
+                    v-if="link.label === '...'"
+                    variant="ghost"
+                    size="icon"
+                    class="h-8 w-8 cursor-default"
+                    disabled
+                >
+                    <span class="text-xs">...</span>
+                </Button>
+                <Button
+                    v-else
+                    variant="outline"
+                    size="icon"
+                    class="h-8 w-8 text-sm font-medium"
+                    :class="{
+                        'border-primary bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground':
+                            link.active,
+                        'hover:bg-accent': !link.active,
+                    }"
+                    :disabled="!link.url"
+                    @click="goToUrl(link.url)"
+                >
+                    <span v-html="link.label" />
+                </Button>
+            </template>
+
+            <Button
+                variant="outline"
+                size="icon"
+                class="h-8 w-8"
+                :disabled="!items.links[items.links.length - 1]?.url"
+                @click="goToUrl(items.links[items.links.length - 1]?.url ?? null)"
+            >
+                <ChevronRight class="h-4 w-4" />
+            </Button>
+        </div>
+    </div>
+</template>

package/src/components/CrudSearch.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Input } from './ui/input';
+import { Search, X } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+const props = defineProps<{
+    modelValue: string;
+    placeholder?: string;
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string];
+    clear: [];
+}>();
+
+const hasValue = computed(() => props.modelValue.length > 0);
+
+function onClear() {
+    emit('update:modelValue', '');
+    emit('clear');
+}
+</script>
+
+<template>
+    <div class="relative w-full max-w-sm">
+        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+            :model-value="modelValue"
+            type="search"
+            :placeholder="placeholder ?? 'Search...'"
+            class="h-9 pl-9 pr-9 text-sm"
+            @update:model-value="emit('update:modelValue', $event as string)"
+        />
+        <button
+            v-if="hasValue"
+            class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            @click="onClear"
+        >
+            <X class="h-4 w-4" />
+        </button>
+    </div>
+</template>

package/src/components/CrudShow.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { Button } from './ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import type { CrudShowField, CrudShowSection, CrudShowSidebarItem } from '../types/crud';
+import { Link, router } from '@inertiajs/vue3';
+import {
+    ArrowLeft,
+    Edit,
+    type LucideIcon,
+    User,
+    Phone,
+    Mail,
+    MapPin,
+    FileText,
+    CreditCard,
+    DollarSign,
+    Hash,
+    Tag,
+} from 'lucide-vue-next';
+import { computed } from 'vue';
+
+const props = defineProps<{
+    title: string;
+    description?: string;
+    entity: Record<string, unknown>;
+    sections: CrudShowSection[];
+    backRoute: string;
+    editRoute?: string;
+    sidebar?: CrudShowSidebarItem[];
+    entityId?: number | string;
+}>();
+
+const iconMap: Record<string, LucideIcon> = {
+    user: User,
+    phone: Phone,
+    mail: Mail,
+    'map-pin': MapPin,
+    'file-text': FileText,
+    'credit-card': CreditCard,
+    'dollar-sign': DollarSign,
+    hash: Hash,
+    tag: Tag,
+};
+
+function getIcon(name: string | undefined): LucideIcon | undefined {
+    if (!name) return undefined;
+    return iconMap[name] ?? undefined;
+}
+
+function getFieldValue(field: CrudShowField): unknown {
+    if (field.value !== undefined) return field.value;
+    if (field.key !== undefined) return props.entity[field.key];
+    return undefined;
+}
+
+function formatMoney(value: unknown): string {
+    const num = Number(value);
+    if (isNaN(num)) return '';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(num);
+}
+
+function getSidebarValue(item: CrudShowSidebarItem): unknown {
+    if (item.value !== undefined) return item.value;
+    if (item.key !== undefined) return props.entity[item.key];
+    return undefined;
+}
+</script>
+
+<template>
+    <div class="mx-auto w-full max-w-6xl px-4 py-6 sm:px-6 lg:px-8">
+        <!-- Header -->
+        <div class="mb-8">
+            <div class="flex items-center justify-between">
+                <div>
+                    <h1 class="text-3xl font-bold tracking-tight text-foreground">
+                        {{ title }}
+                    </h1>
+                    <p v-if="description" class="mt-2 text-sm text-muted-foreground">
+                        {{ description }}
+                    </p>
+                </div>
+                <div class="flex items-center gap-3">
+                    <Button variant="outline" @click="router.get(backRoute)">
+                        <ArrowLeft class="mr-1.5 h-4 w-4" />
+                        Back
+                    </Button>
+                    <Link
+                        v-if="editRoute"
+                        :href="editRoute"
+                        class="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+                    >
+                        <Edit class="h-4 w-4" />
+                        Edit
+                    </Link>
+                </div>
+            </div>
+        </div>
+
+        <!-- Grid -->
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <!-- Main content -->
+            <div class="space-y-6 lg:col-span-2">
+                <Card
+                    v-for="(section, si) in sections"
+                    :key="si"
+                    class="overflow-hidden border shadow-sm"
+                >
+                    <CardHeader class="border-b px-6 py-4">
+                        <CardTitle class="flex items-center gap-2 text-base font-semibold">
+                            <component
+                                :is="getIcon(section.icon)"
+                                v-if="section.icon && getIcon(section.icon)"
+                                class="h-4 w-4 text-muted-foreground"
+                            />
+                            {{ section.title }}
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent class="px-6 py-4">
+                        <div
+                            class="grid gap-4"
+                            :class="(section.cols ?? 1) === 2 ? 'sm:grid-cols-2' : 'grid-cols-1'"
+                        >
+                            <div v-for="(field, fi) in section.fields" :key="fi">
+                                <slot :name="`field-${field.key}`" :field="field" :value="getFieldValue(field)" :entity="entity">
+                                    <dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                        {{ field.label }}
+                                    </dt>
+                                    <dd class="mt-1 text-sm text-foreground">
+                                        <!-- Badge -->
+                                        <span
+                                            v-if="field.type === 'badge'"
+                                            class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
+                                            :class="field.badgeClass ?? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400'"
+                                        >
+                                            {{ getFieldValue(field) ?? field.fallback ?? '—' }}
+                                        </span>
+
+                                        <!-- Email -->
+                                        <a
+                                            v-else-if="field.type === 'email' && getFieldValue(field)"
+                                            :href="`mailto:${getFieldValue(field)}`"
+                                            class="text-primary hover:underline"
+                                        >
+                                            {{ getFieldValue(field) }}
+                                        </a>
+
+                                        <!-- Phone -->
+                                        <a
+                                            v-else-if="field.type === 'phone' && getFieldValue(field)"
+                                            :href="`tel:${getFieldValue(field)}`"
+                                            class="text-primary hover:underline"
+                                        >
+                                            {{ getFieldValue(field) }}
+                                        </a>
+
+                                        <!-- Money -->
+                                        <span
+                                            v-else-if="field.type === 'money'"
+                                            class="font-semibold text-emerald-600 dark:text-emerald-400"
+                                        >
+                                            {{ formatMoney(getFieldValue(field)) }}
+                                        </span>
+
+                                        <!-- Default text -->
+                                        <span v-else>
+                                            {{ getFieldValue(field) ?? field.fallback ?? '—' }}
+                                        </span>
+                                    </dd>
+                                </slot>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <!-- Sidebar -->
+            <div v-if="sidebar && sidebar.length" class="space-y-6">
+                <Card
+                    v-for="(card, ci) in [
+                        {
+                            title: `${title.split(' ')[0]} Overview`,
+                            items: sidebar,
+                        },
+                    ]"
+                    :key="ci"
+                    class="overflow-hidden border shadow-sm"
+                >
+                    <CardHeader class="border-b px-6 py-4">
+                        <CardTitle class="text-base font-semibold">{{ card.title }}</CardTitle>
+                    </CardHeader>
+                    <CardContent class="px-6 py-4">
+                        <div class="space-y-3">
+                            <div
+                                v-for="(item, ii) in card.items"
+                                :key="ii"
+                                class="flex items-center justify-between"
+                            >
+                                <span class="text-sm text-muted-foreground">{{ item.label }}</span>
+                                <span
+                                    v-if="item.type === 'badge'"
+                                    class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
+                                    :class="item.badgeClass ?? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400'"
+                                >
+                                    {{ getSidebarValue(item) ?? '—' }}
+                                </span>
+                                <span v-else class="text-sm font-medium text-foreground">
+                                    {{ getSidebarValue(item) ?? '—' }}
+                                </span>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    </div>
+</template>