@afurgeri/crud-vue 0.1.0

package/src/components/CrudTable.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { Button } from './ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from './ui/table';
+import type { CrudColumn, Paginator } from '../types/crud';
+import { router } from '@inertiajs/vue3';
+import { ArrowDown, ArrowUp, ArrowUpDown, MoreHorizontal, Pencil, Eye, Trash2 } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+const props = defineProps<{
+    items: Paginator;
+    columns: CrudColumn[];
+    sortField: string;
+    sortDirection: 'asc' | 'desc';
+    showActions: boolean;
+    hasShow: boolean;
+    hasEdit: boolean;
+    hasDelete: boolean;
+}>();
+
+const emit = defineEmits<{
+    sort: [field: string];
+    delete: [item: Record<string, unknown>];
+}>();
+
+const visibleColumns = computed(() => props.columns.filter((c) => c.visible !== false));
+
+function getSortIcon(field: string) {
+    if (props.sortField !== field) return ArrowUpDown;
+    return props.sortDirection === 'asc' ? ArrowUp : ArrowDown;
+}
+
+function getAlignClass(align?: string) {
+    switch (align) {
+        case 'center':
+            return 'text-center';
+        case 'right':
+            return 'text-right';
+        default:
+            return 'text-left';
+    }
+}
+</script>
+
+<template>
+    <div class="relative overflow-x-auto">
+        <Table>
+            <TableHeader class="sticky top-0 z-10 bg-muted/50">
+                <TableRow class="hover:bg-transparent">
+                    <TableHead
+                        v-for="column in visibleColumns"
+                        :key="column.key"
+                        class="px-4 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+                        :class="[getAlignClass(column.align), column.width ? column.width : '']"
+                    >
+                        <button
+                            v-if="column.sortable"
+                            class="inline-flex items-center gap-1.5 hover:text-foreground transition-colors"
+                            @click="emit('sort', column.key)"
+                        >
+                            {{ column.title }}
+                            <component
+                                :is="getSortIcon(column.key)"
+                                class="h-3.5 w-3.5"
+                                :class="sortField === column.key ? 'text-primary' : 'text-muted-foreground/50'"
+                            />
+                        </button>
+                        <span v-else>{{ column.title }}</span>
+                    </TableHead>
+                    <TableHead v-if="showActions" class="w-[60px] px-4 py-3" />
+                </TableRow>
+            </TableHeader>
+
+            <TableBody>
+                <TableRow
+                    v-for="(item, idx) in items.data"
+                    :key="(item.id as string | number) ?? idx"
+                    class="border-b transition-colors hover:bg-muted/30"
+                >
+                    <TableCell
+                        v-for="column in visibleColumns"
+                        :key="column.key"
+                        class="px-4 py-3 text-sm"
+                        :class="getAlignClass(column.align)"
+                    >
+                        <slot :name="`cell-${column.key}`" :item="item" :value="item[column.key]">
+                            {{ item[column.key] }}
+                        </slot>
+                    </TableCell>
+
+                    <TableCell v-if="showActions" class="px-2 py-3">
+                        <slot name="actions" :item="item">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger as-child>
+                                    <Button variant="ghost" size="icon" class="h-8 w-8">
+                                        <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>
+                    </TableCell>
+                </TableRow>
+
+                <!-- Empty state handled by CrudPage -->
+            </TableBody>
+        </Table>
+    </div>
+</template>

package/src/components/CrudToolbar.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { Button } from './ui/button';
+import type { CrudFeatureCreate, CrudFeatureSearch } from '../types/crud';
+import { router } from '@inertiajs/vue3';
+import { Filter, Plus, X } from 'lucide-vue-next';
+import CrudSearch from './CrudSearch.vue';
+
+defineProps<{
+    title: string;
+    description?: string;
+    search: string;
+    searchConfig: CrudFeatureSearch | null;
+    createConfig: CrudFeatureCreate | null;
+    hasActiveFilters: boolean;
+    filtersVisible: boolean;
+}>();
+
+const emit = defineEmits<{
+    'update:search': [value: string];
+    'search:clear': [];
+    toggleFilters: [];
+    clearFilters: [];
+}>();
+</script>
+
+<template>
+    <div class="flex flex-col gap-4 border-b px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
+        <div class="flex-1">
+            <slot name="title-prepend" />
+            <h2 class="text-xl font-bold tracking-tight text-foreground">{{ title }}</h2>
+            <p v-if="description" class="mt-1 text-sm text-muted-foreground">
+                {{ description }}
+            </p>
+            <slot name="title-append" />
+        </div>
+
+        <div class="flex items-center gap-2">
+            <!-- Search -->
+            <CrudSearch
+                v-if="searchConfig"
+                :model-value="search"
+                :placeholder="searchConfig.placeholder ?? 'Search...'"
+                @update:model-value="emit('update:search', $event)"
+                @clear="emit('search:clear')"
+            />
+
+            <!-- Filter toggle -->
+            <Button
+                variant="outline"
+                size="icon"
+                class="h-9 w-9 shrink-0"
+                :class="{
+                    'border-primary text-primary': hasActiveFilters,
+                }"
+                @click="emit('toggleFilters')"
+            >
+                <Filter class="h-4 w-4" />
+            </Button>
+
+            <!-- Active filter count -->
+            <span
+                v-if="hasActiveFilters"
+                class="inline-flex h-5 items-center gap-1 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary"
+            >
+                Filters active
+                <button class="ml-0.5 hover:text-primary/70" @click="emit('clearFilters')">
+                    <X class="h-3 w-3" />
+                </button>
+            </span>
+
+            <slot name="toolbar-actions" />
+
+            <!-- Create button -->
+            <Button
+                v-if="createConfig"
+                class="shrink-0"
+                @click="router.get(createConfig.url)"
+            >
+                <Plus class="mr-1.5 h-4 w-4" />
+                {{ createConfig.label ?? 'Create' }}
+            </Button>
+
+            <slot name="toolbar-append" />
+        </div>
+    </div>
+</template>

package/src/components/InputError.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+    message?: string;
+}>();
+</script>
+
+<template>
+    <div v-show="message">
+        <p class="text-sm text-red-600 dark:text-red-500">
+            {{ message }}
+        </p>
+    </div>
+</template>

package/src/components/ui/button/Button.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type ButtonVariants, buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/ui/button/index.ts

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/src/components/ui/card/Card.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardAction.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-content"
+    :class="cn('px-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>

package/src/components/ui/card/CardFooter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
+</template>

package/src/components/ui/card/index.ts

@@ -0,0 +1,7 @@
+export { default as Card } from './Card.vue'
+export { default as CardAction } from './CardAction.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'

package/src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
+import { cn } from '../../../lib/utils'
+import { Check } from 'lucide-vue-next'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+         props.class)"
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="flex items-center justify-center text-current transition-none"
+    >
+      <slot>
+        <Check class="size-3.5" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/src/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'

package/src/components/ui/combobox/ComboboxInput.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui';
+import {
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxGroup,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxRoot,
+    ComboboxTrigger,
+    useFilter,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { Check, ChevronsUpDown } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+const props = defineProps<
+    ComboboxRootProps & {
+        options: { label: string; value: string | number }[];
+        placeholder?: string;
+        class?: string;
+        inputClass?: string;
+    }
+>();
+
+const emits = defineEmits<ComboboxRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+
+const { contains } = useFilter({ sensitivity: 'base' });
+
+function filterFunction(items: unknown[], search: string) {
+    if (!search) return items;
+    return items.filter((item: unknown) => {
+        const typed = item as { label?: string; value?: unknown };
+        return contains(typed.label ?? '', search) || contains(String(typed.value ?? ''), search);
+    });
+}
+</script>
+
+<template>
+    <ComboboxRoot
+        v-bind="forwarded"
+        :filter-function="filterFunction"
+        class="relative"
+    >
+        <ComboboxTrigger
+            class="border-input data-[placeholder]:text-muted-foreground flex h-10 w-full items-center justify-between 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:cursor-not-allowed disabled:opacity-50"
+            :class="props.class"
+        >
+            <ComboboxInput
+                :placeholder="placeholder ?? 'Search...'"
+                class="flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+                :class="props.inputClass"
+                :display-value="(opt: any) => opt?.label ?? ''"
+            />
+            <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 text-muted-foreground" />
+        </ComboboxTrigger>
+
+        <ComboboxContent
+            class="bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 absolute z-50 mt-1 max-h-60 w-full min-w-[var(--reka-popper-anchor-width)] overflow-auto rounded-md border p-1 shadow-md outline-none"
+        >
+            <ComboboxEmpty class="py-2 text-center text-sm text-muted-foreground">
+                No results found.
+            </ComboboxEmpty>
+
+            <ComboboxGroup>
+                <ComboboxItem
+                    v-for="opt in options"
+                    :key="String(opt.value)"
+                    :value="opt"
+                    class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none"
+                >
+                    <Check
+                        class="mr-2 h-4 w-4 shrink-0 opacity-0 group-data-[state=checked]:opacity-100"
+                    />
+                    {{ opt.label }}
+                </ComboboxItem>
+            </ComboboxGroup>
+        </ComboboxContent>
+    </ComboboxRoot>
+</template>

package/src/components/ui/combobox/index.ts

@@ -0,0 +1 @@
+export { default as ComboboxInput } from './ComboboxInput.vue';

package/src/components/ui/dialog/Dialog.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DialogRoot>
+</template>

package/src/components/ui/dialog/DialogClose.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>

package/src/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import DialogOverlay from './DialogOverlay.vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="forwarded"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>