@afurgeri/crud-vue 0.1.0

package/src/components/CrudEmptyState.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Button } from './ui/button';
+import { FileX, Plus, SearchX } from 'lucide-vue-next';
+import { router } from '@inertiajs/vue3';
+import type { CrudFeatureCreate } from '../types/crud';
+
+defineProps<{
+    hasFilters: boolean;
+    create?: boolean | CrudFeatureCreate;
+}>();
+
+defineEmits<{
+    clearFilters: [];
+}>();
+</script>
+
+<template>
+    <div class="flex flex-col items-center justify-center px-6 py-16 text-center">
+        <slot name="icon">
+            <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+                <FileX v-if="!hasFilters" class="h-8 w-8 text-muted-foreground" />
+                <SearchX v-else class="h-8 w-8 text-muted-foreground" />
+            </div>
+        </slot>
+
+        <slot name="message">
+            <h3 v-if="!hasFilters" class="text-lg font-semibold text-foreground">No records yet</h3>
+            <h3 v-else class="text-lg font-semibold text-foreground">No results found</h3>
+
+            <p v-if="!hasFilters" class="mt-2 max-w-sm text-sm text-muted-foreground">
+                Get started by creating your first record.
+            </p>
+            <p v-else class="mt-2 max-w-sm text-sm text-muted-foreground">
+                Try adjusting your search or filter criteria to find what you're looking for.
+            </p>
+        </slot>
+
+        <slot name="actions">
+            <div class="mt-6 flex gap-3">
+                <Button
+                    v-if="hasFilters"
+                    variant="outline"
+                    @click="$emit('clearFilters')"
+                >
+                    Clear Filters
+                </Button>
+
+                <Button
+                    v-if="!hasFilters && create && typeof create !== 'boolean'"
+                    @click="router.get(create.url)"
+                >
+                    <Plus class="mr-2 h-4 w-4" />
+                    {{ create.label ?? 'Create' }}
+                </Button>
+            </div>
+        </slot>
+    </div>
+</template>

package/src/components/CrudFilters.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from './ui/select';
+import { Separator } from './ui/separator';
+import type { CrudFilter } from '../types/crud';
+import { RotateCw, X } from 'lucide-vue-next';
+import { ref } from 'vue';
+
+const props = defineProps<{
+    filters: CrudFilter[];
+    modelValue: Record<string, unknown>;
+    visible: boolean;
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [value: Record<string, unknown>];
+    apply: [];
+    reset: [];
+}>();
+
+// Local copy for editing
+const localFilters = ref<Record<string, unknown>>({ ...props.modelValue });
+
+function getFieldState(field: string): unknown {
+    return localFilters.value[field];
+}
+
+function setFieldState(field: string, value: unknown) {
+    localFilters.value[field] = value;
+}
+
+function setFieldSubState(field: string, subField: string, value: unknown) {
+    if (!localFilters.value[field] || typeof localFilters.value[field] !== 'object') {
+        localFilters.value[field] = {};
+    }
+    (localFilters.value[field] as Record<string, unknown>)[subField] = value;
+}
+
+function getFieldSubState(field: string, subField: string): unknown {
+    const parent = localFilters.value[field];
+    if (!parent || typeof parent !== 'object') return '';
+    return (parent as Record<string, unknown>)[subField] ?? '';
+}
+
+function onApply() {
+    emit('update:modelValue', { ...localFilters.value });
+    emit('apply');
+}
+
+function onReset() {
+    localFilters.value = {};
+    emit('update:modelValue', {});
+    emit('reset');
+}
+
+function getNumberValue(field: string, sub: 'min' | 'max'): string {
+    const val = getFieldSubState(field, sub);
+    return val !== undefined && val !== null && val !== '' ? String(val) : '';
+}
+
+function getDateValue(field: string, sub: 'from' | 'to'): string {
+    const val = getFieldSubState(field, sub);
+    return val !== undefined && val !== null && val !== '' ? String(val) : '';
+}
+</script>
+
+<template>
+    <Transition
+        enter-active-class="transition-all duration-200 ease-out"
+        enter-from-class="max-h-0 opacity-0"
+        enter-to-class="max-h-96 opacity-100"
+        leave-active-class="transition-all duration-150 ease-in"
+        leave-from-class="max-h-96 opacity-100"
+        leave-to-class="max-h-0 opacity-0"
+    >
+        <div v-if="visible" class="overflow-hidden border-b">
+            <div class="space-y-4 px-6 py-4">
+                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                    <template v-for="filter in filters" :key="filter.field">
+                        <!-- Text filter -->
+                        <div v-if="filter.type === 'text'" class="space-y-1.5">
+                            <Label class="text-xs font-medium text-muted-foreground">
+                                {{ filter.label }}
+                            </Label>
+                            <Input
+                                :model-value="getFieldState(filter.field) ?? ''"
+                                :placeholder="filter.placeholder ?? `Filter by ${filter.label.toLowerCase()}...`"
+                                class="h-9 text-sm"
+                                @update:model-value="setFieldState(filter.field, $event)"
+                            />
+                        </div>
+
+                        <!-- Select filter -->
+                        <div v-else-if="filter.type === 'select'" class="space-y-1.5">
+                            <Label class="text-xs font-medium text-muted-foreground">
+                                {{ filter.label }}
+                            </Label>
+                            <div class="relative">
+                                <Select
+                                    :model-value="(getFieldState(filter.field) as string) ?? ''"
+                                    @update:model-value="setFieldState(filter.field, $event)"
+                                >
+                                    <SelectTrigger class="h-9 pr-8 text-sm">
+                                        <SelectValue :placeholder="filter.placeholder ?? 'All'" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem
+                                            v-for="opt in filter.options"
+                                            :key="String(opt.value)"
+                                            :value="String(opt.value)"
+                                        >
+                                            {{ opt.label }}
+                                        </SelectItem>
+                                    </SelectContent>
+                                </Select>
+                                <button
+                                    v-if="getFieldState(filter.field)"
+                                    class="absolute right-8 top-1/2 z-10 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                                    @click="setFieldState(filter.field, '')"
+                                >
+                                    <X class="h-3.5 w-3.5" />
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Number range filter -->
+                        <div v-else-if="filter.type === 'number'" class="space-y-1.5">
+                            <Label class="text-xs font-medium text-muted-foreground">
+                                {{ filter.label }}
+                            </Label>
+                            <div class="flex items-center gap-2">
+                                <Input
+                                    type="number"
+                                    :model-value="getNumberValue(filter.field, 'min')"
+                                    :placeholder="'Min'"
+                                    class="h-9 text-sm"
+                                    @update:model-value="setFieldSubState(filter.field, 'min', $event)"
+                                />
+                                <span class="text-xs text-muted-foreground">–</span>
+                                <Input
+                                    type="number"
+                                    :model-value="getNumberValue(filter.field, 'max')"
+                                    :placeholder="'Max'"
+                                    class="h-9 text-sm"
+                                    @update:model-value="setFieldSubState(filter.field, 'max', $event)"
+                                />
+                            </div>
+                        </div>
+
+                        <!-- Date range filter -->
+                        <div v-else-if="filter.type === 'date'" class="space-y-1.5">
+                            <Label class="text-xs font-medium text-muted-foreground">
+                                {{ filter.label }}
+                            </Label>
+                            <div class="flex items-center gap-2">
+                                <Input
+                                    type="date"
+                                    :model-value="getDateValue(filter.field, 'from')"
+                                    class="h-9 text-sm"
+                                    @update:model-value="setFieldSubState(filter.field, 'from', $event)"
+                                />
+                                <span class="text-xs text-muted-foreground">–</span>
+                                <Input
+                                    type="date"
+                                    :model-value="getDateValue(filter.field, 'to')"
+                                    class="h-9 text-sm"
+                                    @update:model-value="setFieldSubState(filter.field, 'to', $event)"
+                                />
+                            </div>
+                        </div>
+                    </template>
+                </div>
+
+                <Separator />
+
+                <div class="flex items-center justify-end gap-2">
+                    <Button variant="outline" size="sm" @click="onReset">
+                        <RotateCw class="mr-1.5 h-3.5 w-3.5" />
+                        Reset
+                    </Button>
+                    <Button size="sm" @click="onApply"> Apply Filters </Button>
+                </div>
+            </div>
+        </div>
+    </Transition>
+</template>

package/src/components/CrudForm.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import InputError from './InputError.vue';
+import { Button } from './ui/button';
+import { Card, CardContent, CardHeader, CardDescription, CardTitle } from './ui/card';
+import { Checkbox } from './ui/checkbox';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from './ui/select';
+import { Spinner } from './ui/spinner';
+import { ComboboxInput } from './ui/combobox';
+import type { CrudFormField } from '../types/crud';
+import { Link, useForm, router } from '@inertiajs/vue3';
+import { ArrowLeft, Save } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+const props = defineProps<{
+    title: string;
+    description?: string;
+    fields: CrudFormField[];
+    action: string;
+    method: 'post' | 'put' | 'patch';
+    initialData: Record<string, unknown>;
+    backRoute: string;
+    submitLabel?: string;
+}>();
+
+const form = useForm(props.initialData);
+
+function submit() {
+    const methodFn = props.method === 'put' ? form.put : props.method === 'patch' ? form.patch : form.post;
+    methodFn.call(form, props.action);
+}
+
+const gridCols = computed(() =>
+    props.fields.some((f) => f.span === 2) ? 'lg:grid-cols-2' : 'lg:grid-cols-2',
+);
+
+function hasValue(name: string): boolean {
+    const val = form[name as keyof typeof form];
+    return val !== undefined && val !== null && val !== '';
+}
+
+function getFieldValue(name: string): unknown {
+    return form[name as keyof typeof form];
+}
+
+function setFieldValue(name: string, value: unknown) {
+    (form as Record<string, unknown>)[name] = value;
+}
+
+function getSelectedOption(name: string, options?: { label: string; value: string | number }[]): { label: string; value: string | number } | undefined {
+    const val = getFieldValue(name);
+    if (val === undefined || val === null || val === '') return undefined;
+    return options?.find((opt) => String(opt.value) === String(val));
+}
+</script>
+
+<template>
+    <div class="mx-auto w-full max-w-4xl px-4 py-6 sm:px-6 lg:px-8">
+        <Card class="overflow-hidden border shadow-sm">
+            <CardHeader class="border-b px-6 py-5">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <CardTitle class="text-xl font-bold">{{ title }}</CardTitle>
+                        <CardDescription v-if="description" class="mt-1">
+                            {{ description }}
+                        </CardDescription>
+                    </div>
+                    <Button variant="outline" size="sm" @click="router.get(backRoute)">
+                        <ArrowLeft class="mr-1.5 h-4 w-4" />
+                        Back
+                    </Button>
+                </div>
+            </CardHeader>
+
+            <CardContent class="px-6 py-6">
+                <form @submit.prevent="submit">
+                    <div class="grid grid-cols-1 gap-6" :class="gridCols">
+                        <template v-for="(field, idx) in fields" :key="field.name">
+                            <slot :name="`field-${field.name}`" :field="field" :form="form">
+                                <!-- Text / Email / Tel / Number / Password / Date -->
+                                <div
+                                    v-if="['text', 'email', 'tel', 'number', 'password', 'date'].includes(field.type)"
+                                    class="grid gap-2"
+                                    :class="field.span === 2 ? 'lg:col-span-2' : ''"
+                                >
+                                    <Label :for="field.name" class="text-sm font-medium">
+                                        {{ field.label }}
+                                        <span v-if="field.required" class="text-destructive">*</span>
+                                    </Label>
+                                    <Input
+                                        :id="field.name"
+                                        :type="field.type"
+                                        :model-value="getFieldValue(field.name)"
+                                        :placeholder="field.placeholder"
+                                        :required="field.required"
+                                        :disabled="field.disabled || form.processing"
+                                        :tabindex="field.tabindex ?? idx + 1"
+                                        class="h-10"
+                                        @update:model-value="setFieldValue(field.name, $event)"
+                                    />
+                                    <InputError :message="(form.errors as Record<string, string>)[field.name]" />
+                                </div>
+
+                                <!-- Select -->
+                                <div
+                                    v-else-if="field.type === 'select'"
+                                    class="grid gap-2"
+                                    :class="field.span === 2 ? 'lg:col-span-2' : ''"
+                                >
+                                    <Label :for="field.name" class="text-sm font-medium">
+                                        {{ field.label }}
+                                        <span v-if="field.required" class="text-destructive">*</span>
+                                    </Label>
+                                    <Select
+                                        :model-value="getFieldValue(field.name)"
+                                        :disabled="field.disabled || form.processing"
+                                        @update:model-value="setFieldValue(field.name, $event)"
+                                    >
+                                        <SelectTrigger :id="field.name" class="h-10">
+                                            <SelectValue :placeholder="field.placeholder ?? 'Select...'" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem
+                                                v-for="opt in field.options"
+                                                :key="String(opt.value)"
+                                                :value="opt.value"
+                                            >
+                                                {{ opt.label }}
+                                            </SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                    <InputError :message="(form.errors as Record<string, string>)[field.name]" />
+                                </div>
+
+                                <!-- Combobox (searchable select) -->
+                                <div
+                                    v-else-if="field.type === 'combobox'"
+                                    class="grid gap-2"
+                                    :class="field.span === 2 ? 'lg:col-span-2' : ''"
+                                >
+                                    <Label :for="field.name" class="text-sm font-medium">
+                                        {{ field.label }}
+                                        <span v-if="field.required" class="text-destructive">*</span>
+                                    </Label>
+                                    <ComboboxInput
+                                        :model-value="getSelectedOption(field.name, field.options)"
+                                        :options="field.options ?? []"
+                                        :placeholder="field.placeholder ?? 'Search...'"
+                                        :disabled="field.disabled || form.processing"
+                                        @update:model-value="(val: unknown) => setFieldValue(field.name, (val as any)?.value ?? '')"
+                                    />
+                                    <InputError :message="(form.errors as Record<string, string>)[field.name]" />
+                                </div>
+
+                                <!-- Textarea -->
+                                <div
+                                    v-else-if="field.type === 'textarea'"
+                                    class="grid gap-2"
+                                    :class="field.span === 2 ? 'lg:col-span-2' : ''"
+                                >
+                                    <Label :for="field.name" class="text-sm font-medium">
+                                        {{ field.label }}
+                                        <span v-if="field.required" class="text-destructive">*</span>
+                                    </Label>
+                                    <textarea
+                                        :id="field.name"
+                                        :value="getFieldValue(field.name)"
+                                        :placeholder="field.placeholder"
+                                        :required="field.required"
+                                        :disabled="field.disabled || form.processing"
+                                        :tabindex="field.tabindex ?? idx + 1"
+                                        rows="3"
+                                        class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+                                        @input="setFieldValue(field.name, ($event.target as HTMLTextAreaElement).value)"
+                                    />
+                                    <InputError :message="(form.errors as Record<string, string>)[field.name]" />
+                                </div>
+
+                                <!-- Switch / Boolean -->
+                                <div
+                                    v-else-if="field.type === 'switch'"
+                                    class="flex items-center gap-3"
+                                    :class="field.span === 2 ? 'lg:col-span-2' : ''"
+                                >
+                                    <Checkbox
+                                        :id="field.name"
+                                        :model-value="!!getFieldValue(field.name)"
+                                        :disabled="field.disabled || form.processing"
+                                        @update:model-value="setFieldValue(field.name, $event)"
+                                    />
+                                    <Label :for="field.name" class="text-sm font-medium cursor-pointer">
+                                        {{ field.label }}
+                                    </Label>
+                                    <InputError :message="(form.errors as Record<string, string>)[field.name]" />
+                                </div>
+                            </slot>
+                        </template>
+                    </div>
+
+                    <!-- Submit buttons -->
+                    <div class="mt-8 flex flex-row-reverse flex-wrap gap-3">
+                        <Button
+                            type="submit"
+                            class="h-11 flex-1 sm:flex-none sm:min-w-[160px]"
+                            :disabled="form.processing"
+                        >
+                            <Spinner v-if="form.processing" class="mr-2" />
+                            <Save v-else class="mr-1.5 h-4 w-4" />
+                            {{ submitLabel ?? 'Save' }}
+                        </Button>
+
+                        <Button
+                            variant="outline"
+                            class="h-11 flex-1 sm:flex-none"
+                            :disabled="form.processing"
+                            @click="router.get(backRoute)"
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </CardContent>
+        </Card>
+    </div>
+</template>