Form Components

<script setup lang="ts">
const { open } = useCrouton()

// Create new item in slideover (default)
const handleCreate = () => {
  open('create', 'users', [])
}

// Update item in modal
const handleEdit = (id: string) => {
  open('update', 'users', [id], 'modal')
}

// Delete confirmation in dialog
const handleDelete = (ids: string[]) => {
  open('delete', 'users', ids, 'dialog')
}

// View-only mode
const handleView = (id: string) => {
  open('view', 'users', [id])
}
</script>

<template>
  <UButton @click="handleCreate">Create User</UButton>
  <UButton @click="handleEdit('user-123')">Edit User</UButton>
  <UButton @click="handleDelete(['user-1', 'user-2'])">Delete Users</UButton>
</template>

<script setup lang="ts">
const { open } = useCrouton()

// Level 1: Edit product
open('update', 'products', ['product-123'])

// Inside product form, user clicks "Add Category"
// Level 2: Create category (nested)
open('create', 'categories', [])

// Inside category form, user clicks "Add Parent Category"
// Level 3: Create parent category (nested deeper)
open('create', 'categories', [])
</script>

<!-- Expand button appears in slideover header -->
<!-- Click to toggle between: -->
<!-- Sidebar: max-w-2xl with padding -->
<!-- Fullscreen: Full width, more workspace -->

interface CroutonState {
  id: string                          // Unique state ID
  action: CroutonAction              // 'create' | 'update' | 'delete' | 'view'
  collection: string | null           // Collection name
  activeItem: any                     // Item being edited/viewed
  items: any[]                        // Items for batch delete
  loading: LoadingState              // Loading state per action
  isOpen: boolean                     // Container open state
  containerType: 'slideover' | 'modal' | 'dialog'
  isExpanded?: boolean               // Slideover expand state
}

<!-- No manual template needed - Form renders globally -->

<script setup lang="ts">
const { open, close } = useCrouton()

// Open form
const createProduct = () => {
  open('create', 'products', [], 'slideover')
}

// Forms close automatically after successful submission
// Or close manually:
const cancelForm = () => {
  close()
}
</script>

<template>
  <div>
    <UButton @click="createProduct">
      <UIcon name="i-heroicons-plus" />
      Create Product
    </UButton>
  </div>
</template>

interface FormDynamicLoaderProps {
  collection: string        // Collection name (e.g., 'users')
  loading: string          // Loading state: 'create' | 'update' | 'delete' | ''
  action: string           // Action type: 'create' | 'update' | 'delete' | 'view'
  items: any[]             // Items for delete action
  activeItem: any          // Item for update/view
}

// Resolution logic:
// 1. Check componentMap for collection
const componentMap = useCollections().componentMap

// 2. For 'view' action, try Detail component first
if (action === 'view') {
  // Try: UsersDetail, then fallback to UsersForm
  const detailComponent = componentMap.get(`${collection}Detail`)
  if (detailComponent) return detailComponent
}

// 3. Return standard form component
return componentMap.get(`${collection}Form`)

components/
├── UsersForm.vue        # Create/Update/Delete
└── UsersDetail.vue      # View-only (optional)

// Detects mode based on route path
const mode = computed(() => {
  const route = useRoute()
  if (route.path.includes('/super-admin/')) {
    return 'system'  // System-level translations
  }
  return 'team'      // Team-level translations
})

<!-- Used by Form.vue -->
<FormDynamicLoader
  :collection="state.collection"
  :loading="state.loading"
  :action="state.action"
  :items="state.items"
  :activeItem="state.activeItem"
/>

interface FormLayoutProps {
  tabs?: boolean                      // Enable tab navigation (default: false)
  navigationItems?: NavigationItem[]  // Tab definitions
  tabErrors?: Record<string, number>  // Error counts per tab
  modelValue?: string                 // Active tab (v-model)
}

interface NavigationItem {
  label: string        // Tab label
  value: string        // Tab value/ID
  icon?: string        // Optional icon
}

<template>
  <CroutonFormLayout>
    <template #header>
      <h2 class="text-2xl font-bold">Create Product</h2>
    </template>

    <template #main>
      <div class="space-y-6">
        <UFormField label="Name" name="name">
          <UInput v-model="state.name" />
        </UFormField>

        <UFormField label="Price" name="price">
          <UInput v-model="state.price" type="number" />
        </UFormField>
      </div>
    </template>

    <template #footer>
      <CroutonFormActionButton
        :action="action"
        :collection="collection"
      />
    </template>
  </CroutonFormLayout>
</template>

<script setup lang="ts">
const activeSection = ref('general')

const navigationItems = [
  { label: 'General', value: 'general', icon: 'i-heroicons-information-circle' },
  { label: 'Pricing', value: 'pricing', icon: 'i-heroicons-currency-dollar' },
  { label: 'SEO', value: 'seo', icon: 'i-heroicons-magnifying-glass' }
]
</script>

<template>
  <CroutonFormLayout
    :tabs="true"
    :navigation-items="navigationItems"
    v-model="activeSection"
  >
    <template #main="{ activeSection }">
      <div v-show="activeSection === 'general'" class="space-y-6">
        <UFormField label="Name" name="name">
          <UInput v-model="state.name" />
        </UFormField>
      </div>

      <div v-show="activeSection === 'pricing'" class="space-y-6">
        <UFormField label="Price" name="price">
          <UInput v-model="state.price" type="number" />
        </UFormField>
      </div>
    </template>
  </CroutonFormLayout>
</template>

<script setup lang="ts">
const validationErrors = ref([])

// Map fields to their tab groups
const fieldToGroup: Record<string, string> = {
  'name': 'general',
  'description': 'general',
  'price': 'pricing',
  'compareAtPrice': 'pricing',
  'metaTitle': 'seo',
  'metaDescription': 'seo'
}

// Count errors per tab
const tabErrorCounts = computed(() => {
  const counts: Record<string, number> = {}
  validationErrors.value.forEach((error: any) => {
    const tabName = fieldToGroup[error.name] || 'general'
    counts[tabName] = (counts[tabName] || 0) + 1
  })
  return counts
})

const handleValidationError = (event: any) => {
  if (event?.errors) {
    validationErrors.value = event.errors
  }
}
</script>

<template>
  <UForm @error="handleValidationError">
    <CroutonFormLayout
      :tabs="true"
      :tab-errors="tabErrorCounts"
    >
      <!-- ... -->
    </CroutonFormLayout>
  </UForm>
</template>

<template>
  <CroutonFormLayout :tabs="true">
    <template #footer>
      <CroutonValidationErrorSummary
        :tab-errors="tabErrorCounts"
        :navigation-items="navigationItems"
        @switch-tab="activeSection = $event"
      />

      <CroutonFormActionButton
        :action="action"
        :collection="collection"
      />
    </template>
  </CroutonFormLayout>
</template>

<!-- Error badge appears as red dot with count -->
<UTabs :items="enhancedNavigationItems">
  <!-- General (2) ← Shows 2 errors -->
  <!-- Pricing ← No errors -->
  <!-- SEO (1) ← Shows 1 error -->
</UTabs>

<template>
  <CroutonFormLayout>
    <template #main>
      <!-- Primary fields -->
    </template>

    <template #sidebar>
      <!-- Meta settings, status, timestamps, etc. -->
      <div class="space-y-4">
        <UFormField label="Status" name="status">
          <USelectMenu v-model="state.status" :items="statusOptions" />
        </UFormField>

        <UFormField label="Published At" name="publishedAt">
          <CroutonDate v-model="state.publishedAt" />
        </UFormField>
      </div>
    </template>
  </CroutonFormLayout>
</template>

<script setup lang="ts">
const { create, update } = useCollectionMutation('products')
const activeSection = ref('general')

const navigationItems = [
  { label: 'General', value: 'general', icon: 'i-heroicons-information-circle' },
  { label: 'Pricing', value: 'pricing', icon: 'i-heroicons-currency-dollar' },
  { label: 'Organization', value: 'organization', icon: 'i-heroicons-folder' },
  { label: 'SEO', value: 'seo', icon: 'i-heroicons-magnifying-glass' }
]

// Map fields to their tab groups
const fieldToGroup: Record<string, string> = {
  'name': 'general',
  'description': 'general',
  'price': 'pricing',
  'compareAtPrice': 'pricing',
  'categoryId': 'organization',
  'tags': 'organization',
  'metaTitle': 'seo',
  'metaDescription': 'seo'
}

// Count errors per tab
const tabErrorCounts = computed(() => {
  const counts: Record<string, number> = {}
  validationErrors.value.forEach((error: any) => {
    const tabName = fieldToGroup[error.name] || 'general'
    counts[tabName] = (counts[tabName] || 0) + 1
  })
  return counts
})
</script>

<template>
  <UForm :state="state" :schema="schema" @submit="handleSubmit">
    <CroutonFormLayout
      :tabs="true"
      :navigation-items="navigationItems"
      :tab-errors="tabErrorCounts"
      v-model="activeSection"
    >
      <!-- Tab content sections... -->
      <template #footer>
        <CroutonValidationErrorSummary
          :tab-errors="tabErrorCounts"
          :navigation-items="navigationItems"
          @switch-tab="activeSection = $event"
        />
      </template>
    </CroutonFormLayout>
  </UForm>
</template>

<!-- Default: max-w-7xl -->
<CroutonFormLayout class="max-w-5xl">
  <!-- ... -->
</CroutonFormLayout>

<!-- Feature request: Make configurable -->
<!-- Workaround: Hide sidebar on mobile, use tabs instead -->

interface FormReferenceSelectProps {
  modelValue: string | string[] | null  // Selected ID(s)
  collection: string                     // Collection to fetch from
  label?: string                         // Display label
  labelKey?: string                      // Field to use as label (default: 'title')
  filterFields?: string[]                // Fields to search (default: ['title', 'name'])
  hideCreate?: boolean                   // Hide "Create new" button (default: false)
  multiple?: boolean                     // Multi-select mode (default: false)
}

@update:modelValue="handleUpdate"  // Emits: string | string[] | null

<template>
  <UFormField label="Author" name="authorId">
    <CroutonFormReferenceSelect
      v-model="state.authorId"
      collection="authors"
      label="Author"
    />
  </UFormField>
</template>

<script setup lang="ts">
const state = ref({
  authorId: null,  // Will contain selected author ID
  title: '',
  content: ''
})
</script>

<template>
  <UFormField label="Tags" name="tags">
    <CroutonFormReferenceSelect
      v-model="state.tags"
      collection="tags"
      label="Tags"
      :multiple="true"
    />
  </UFormField>
</template>

<script setup lang="ts">
const state = ref({
  title: '',
  tags: []  // Will contain array of tag IDs: ['tag-1', 'tag-2', 'tag-3']
})
</script>

<template>
  <UFormField label="Category" name="categoryId">
    <CroutonFormReferenceSelect
      v-model="state.categoryId"
      collection="categories"
      label="Category"
      label-key="name"
      :filter-fields="['name', 'description', 'slug']"
    />
  </UFormField>
</template>

<!-- "Create new" button appears in dropdown by default -->
<CroutonFormReferenceSelect
  v-model="state.categoryId"
  collection="categories"
  label="Category"
/>

<!-- Hide create button if you don't want inline creation -->
<CroutonFormReferenceSelect
  v-model="state.categoryId"
  collection="categories"
  label="Category"
  :hide-create="true"
/>

<!-- Component handles these errors automatically -->

<script setup lang="ts">
const state = ref({ authorId: null })
</script>

<template>
  <UFormField label="Author" name="authorId">
    <CroutonFormReferenceSelect
      v-model="state.authorId"
      collection="users"
      label="Author"
      label-key="fullName"
      :filter-fields="['fullName', 'email']"
    />
  </UFormField>
</template>

<script setup lang="ts">
const state = ref({ tags: [] })
</script>

<template>
  <UFormField label="Tags" name="tags">
    <CroutonFormReferenceSelect
      v-model="state.tags"
      collection="tags"
      label="Tags"
      :multiple="true"
    />
  </UFormField>
</template>

<template>
  <CroutonFormReferenceSelect
    v-model="state.categoryId"
    collection="categories"
    label="Category"
    :hide-create="true"
  />
</template>

<template>
  <CroutonFormReferenceSelect
    v-model="state.relatedPosts"
    collection="posts"
    label="Related Posts"
    :multiple="true"
    :filter-fields="['title', 'excerpt']"
  />
</template>

interface CroutonAssetsPickerProps {
  modelValue?: string              // Selected asset ID (v-model)
  collection?: string              // Assets collection name (default: 'assets')
}

<template>
  <UFormField label="Featured Image" name="imageId">
    <CroutonAssetsPicker v-model="state.imageId" />
  </UFormField>
</template>

<script setup lang="ts">
const state = ref({
  imageId: ''
})
</script>

{
  "imageId": {
    "type": "string",
    "refTarget": "assets",
    "meta": {
      "label": "Featured Image"
      // Component automatically detected as CroutonAssetsPicker!
    }
  }
}

<template>
  <div class="space-y-4">
    <!-- Asset picker with preview -->
    <UFormField label="Header Image" name="headerId">
      <CroutonAssetsPicker v-model="state.headerId" />
    </UFormField>

    <!-- Display selected asset URL -->
    <div v-if="state.headerId">
      <img :src="selectedAssetUrl" alt="Selected header" class="w-full rounded-lg" />
    </div>
  </div>
</template>

<script setup lang="ts">
const state = ref({
  headerId: ''
})

// Fetch selected asset details
const { data: selectedAsset } = await useFetch(
  `/api/teams/${useRoute().params.team}/assets/${state.headerId}`,
  { watch: [() => state.headerId] }
)

const selectedAssetUrl = computed(() =>
  selectedAsset.value?.pathname ? `/images/${selectedAsset.value.pathname}` : ''
)
</script>

interface CroutonAssetUploaderProps {
  collection?: string              // Assets collection name (default: 'assets')
}

@uploaded="handleUploaded"        // Emits: string (new asset ID)

<template>
  <UModal v-model="showUploader">
    <template #content="{ close }">
      <div class="p-6">
        <h3 class="text-lg font-semibold mb-4">Upload New Asset</h3>
        <CroutonAssetUploader @uploaded="handleUploaded(close)" />
      </div>
    </template>
  </UModal>
</template>

<script setup lang="ts">
const showUploader = ref(false)

const handleUploaded = async (close: () => void, assetId: string) => {
  console.log('New asset created:', assetId)
  close()
}
</script>

interface CalendarProps {
  // Single Date Mode
  date?: Date | number | null       // Date or timestamp for single date

  // Range Mode
  range?: boolean                   // Enable range selection
  startDate?: Date | number | null  // Start date or timestamp for range
  endDate?: Date | number | null    // End date or timestamp for range

  // Constraints
  minDate?: Date | number | null    // Min selectable date or timestamp
  maxDate?: Date | number | null    // Max selectable date or timestamp
  isDateDisabled?: (date: Date) => boolean  // Function to disable specific dates

  // UI Customization
  color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  ui?: Record<string, unknown>      // Passthrough UI customization to UCalendar

  // Controls
  disabled?: boolean                // Disable selection
  monthControls?: boolean           // Show month navigation (default: true)
  yearControls?: boolean            // Show year navigation (default: true)
  numberOfMonths?: number           // Number of months to display
}

{
  'update:date': [value: Date | null]        // Single date changed
  'update:startDate': [value: Date | null]   // Range start changed
  'update:endDate': [value: Date | null]     // Range end changed
}

<template>
  <div>
    <h3 class="font-semibold mb-2">Select Event Date</h3>
    <Calendar
      v-model:date="eventDate"
      :min-date="new Date()"
      color="primary"
    />
    <p v-if="eventDate" class="mt-2 text-sm">
      Selected: {{ eventDate.toLocaleDateString() }}
    </p>
  </div>
</template>

<script setup lang="ts">
const eventDate = ref<Date | null>(null)
</script>

<template>
  <div>
    <h3 class="font-semibold mb-2">Select Booking Period</h3>
    <Calendar
      range
      v-model:start-date="startDate"
      v-model:end-date="endDate"
      :min-date="new Date()"
      :number-of-months="2"
      color="success"
    />
    <div v-if="startDate && endDate" class="mt-2 text-sm">
      <p>Check-in: {{ startDate.toLocaleDateString() }}</p>
      <p>Check-out: {{ endDate.toLocaleDateString() }}</p>
      <p>Nights: {{ calculateNights(startDate, endDate) }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const startDate = ref<Date | null>(null)
const endDate = ref<Date | null>(null)

const calculateNights = (start: Date, end: Date) => {
  return Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24))
}
</script>

<template>
  <div>
    <h3 class="font-semibold mb-2">Select Appointment Date</h3>
    <Calendar
      v-model:date="appointmentDate"
      :min-date="minDate"
      :max-date="maxDate"
      :disabled="isLoading"
      variant="outline"
    />
  </div>
</template>

<script setup lang="ts">
const appointmentDate = ref<Date | null>(null)
const isLoading = ref(false)

// Only allow dates within next 30 days
const minDate = computed(() => new Date())
const maxDate = computed(() => {
  const date = new Date()
  date.setDate(date.getDate() + 30)
  return date
})
</script>

<template>
  <div>
    <Calendar
      v-model:date="publishTimestamp"
      :min-date="Date.now()"
    />
  </div>
</template>

<script setup lang="ts">
// Can work with timestamps instead of Date objects
const publishTimestamp = ref<number | null>(null)

watchEffect(() => {
  if (publishTimestamp.value) {
    console.log('Publish at:', new Date(publishTimestamp.value))
  }
})
</script>

<template>
  <div>
    <h3 class="font-semibold mb-2">Select Appointment (No Weekends)</h3>
    <Calendar
      v-model:date="appointmentDate"
      :min-date="new Date()"
      :is-date-disabled="isWeekend"
    />
  </div>
</template>

<script setup lang="ts">
const appointmentDate = ref<Date | null>(null)

// Disable weekends
function isWeekend(date: Date): boolean {
  const day = date.getDay()
  return day === 0 || day === 6 // Sunday = 0, Saturday = 6
}
</script>

<script setup lang="ts">
// Disable weekends and specific dates (e.g., holidays)
const holidays = [
  new Date('2024-12-25'),
  new Date('2024-12-26'),
  new Date('2025-01-01')
]

function isDateDisabled(date: Date): boolean {
  // Check weekends
  const day = date.getDay()
  if (day === 0 || day === 6) return true

  // Check holidays
  return holidays.some(h =>
    h.getFullYear() === date.getFullYear() &&
    h.getMonth() === date.getMonth() &&
    h.getDate() === date.getDate()
  )
}
</script>

<template>
  <Calendar v-model:date="selectedDate" :min-date="new Date()">
    <template #day="{ day, date }">
      <div class="relative w-full h-full flex items-center justify-center">
        <!-- Day number -->
        <span>{{ day.day }}</span>

        <!-- Show indicator for dates with bookings -->
        <span
          v-if="hasBooking(date)"
          class="absolute bottom-0.5 w-1.5 h-1.5 bg-primary rounded-full"
        />
      </div>
    </template>
  </Calendar>
</template>

<script setup lang="ts">
const selectedDate = ref<Date | null>(null)

// Example: dates with existing bookings
const bookedDates = [
  new Date('2024-12-15'),
  new Date('2024-12-20'),
  new Date('2024-12-25')
]

function hasBooking(date: Date): boolean {
  return bookedDates.some(b =>
    b.getFullYear() === date.getFullYear() &&
    b.getMonth() === date.getMonth() &&
    b.getDate() === date.getDate()
  )
}
</script>

<template>
  <Calendar
    v-model:date="selectedDate"
    :ui="{
      body: 'p-4',
      day: 'rounded-full',
      daySelected: 'bg-primary text-white'
    }"
  />
</template>

<template>
  <UForm :state="state" :schema="schema" @submit="onSubmit">
    <UFormField label="Event Date" name="eventDate" required>
      <Calendar
        v-model:date="state.eventDate"
        :min-date="new Date()"
      />
    </UFormField>

    <UFormField label="Booking Period" name="dateRange" required>
      <Calendar
        range
        v-model:start-date="state.startDate"
        v-model:end-date="state.endDate"
        :min-date="new Date()"
      />
    </UFormField>

    <UButton type="submit">Submit</UButton>
  </UForm>
</template>

<script setup lang="ts">
import { z } from 'zod'

const schema = z.object({
  eventDate: z.date().min(new Date(), 'Date must be in the future'),
  startDate: z.date(),
  endDate: z.date()
}).refine(
  data => data.endDate > data.startDate,
  { message: 'End date must be after start date', path: ['endDate'] }
)

const state = ref({
  eventDate: null as Date | null,
  startDate: null as Date | null,
  endDate: null as Date | null
})

const onSubmit = (data: any) => {
  console.log('Form submitted:', data)
}
</script>

// Internal conversion helpers
function toCalendarDateValue(value: Date | number | null): DateValue {
  const date = value instanceof Date ? value : new Date(value)
  const zonedDateTime = fromDate(date, getLocalTimeZone())
  return toCalendarDate(zonedDateTime)
}

function calendarDateToDate(date: DateValue | null): Date | null {
  if (!date) return null
  return date.toDate(getLocalTimeZone())
}

<!-- Single mode: Shows 1 month -->
<Calendar v-model:date="date" />

<!-- Range mode: Shows 2 months -->
<Calendar range v-model:start-date="start" v-model:end-date="end" />

<!-- Override: Show 3 months -->
<Calendar range :number-of-months="3" />

<!-- ❌ WRONG: Missing v-model:date binding -->
<Calendar :date="state.date" />

<!-- ✅ CORRECT: Use v-model:date for two-way binding -->
<Calendar v-model:date="state.date" />

<!-- ❌ WRONG: Missing range prop -->
<Calendar
  v-model:start-date="start"
  v-model:end-date="end"
/>

<!-- ✅ CORRECT: Add range prop -->
<Calendar
  range
  v-model:start-date="start"
  v-model:end-date="end"
/>

<!-- ❌ WRONG: Using strings for dates -->
<Calendar
  v-model:date="date"
  min-date="2024-01-01"
  max-date="2024-12-31"
/>

<!-- ✅ CORRECT: Use Date objects or timestamps -->
<Calendar
  v-model:date="date"
  :min-date="new Date('2024-01-01')"
  :max-date="new Date('2024-12-31')"
/>

// ❌ WRONG: Type doesn't match
const date = ref<Date>(Date.now())

// ✅ CORRECT: Use union type
const date = ref<Date | number | null>(Date.now())

// ✅ ALSO CORRECT: Convert to Date
const date = ref<Date | null>(new Date())

interface CalendarYearProps {
  modelValue?: Date | number | null  // Selected date (v-model)
  year?: number                      // Year to display (default: current year)
  color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
  size?: 'xs' | 'sm' | 'md'         // Calendar size (default: 'xs')
}

<template>
  <CroutonCalendarYear />
</template>

<script setup lang="ts">
const selectedDate = ref<Date | null>(null)
</script>

<template>
  <CroutonCalendarYear v-model="selectedDate" />

  <p v-if="selectedDate">
    Selected: {{ selectedDate.toLocaleDateString() }}
  </p>
</template>

<script setup lang="ts">
const selectedDate = ref<Date | null>(null)
const displayYear = ref(2024)
</script>

<template>
  <div class="flex gap-2 mb-4">
    <UButton @click="displayYear--">Previous Year</UButton>
    <span class="font-bold">{{ displayYear }}</span>
    <UButton @click="displayYear++">Next Year</UButton>
  </div>

  <CroutonCalendarYear
    v-model="selectedDate"
    :year="displayYear"
  />
</template>

<template>
  <CroutonCalendarYear
    v-model="selectedDate"
    :year="2025"
    color="neutral"
    size="sm"
  />
</template>

interface CroutonDateProps {
  date?: string | Date   // Date to display
}

<template>
  <CroutonTable
    :rows="bookings"
    :columns="columns"
    collection="bookings"
  >
    <!-- Custom date display for createdAt -->
    <template #createdAt-cell="{ row }">
      <CroutonDate :date="row.original.createdAt" />
    </template>

    <!-- Custom date display for updatedAt -->
    <template #updatedAt-cell="{ row }">
      <CroutonDate :date="row.original.updatedAt" />
    </template>
  </CroutonTable>
</template>

<script setup lang="ts">
const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'createdAt', header: 'Created' },
  { accessorKey: 'updatedAt', header: 'Last Updated' }
]

const { data: bookings } = await useFetch('/api/bookings')
</script>

<template>
  <UCard>
    <template #header>
      <h3 class="font-semibold">{{ booking.title }}</h3>
    </template>

    <div class="space-y-2">
      <div>
        <span class="text-sm text-gray-500">Booking Date:</span>
        <CroutonDate :date="booking.date" />
      </div>

      <div>
        <span class="text-sm text-gray-500">Created:</span>
        <CroutonDate :date="booking.createdAt" />
      </div>
    </div>
  </UCard>
</template>

<template>
  <CroutonDetailLayout collection="projects" :item-id="projectId">
    <template #default="{ item }">
      <div class="space-y-4">
        <div>
          <h2 class="text-2xl font-bold">{{ item.name }}</h2>
          <div class="flex gap-4 mt-2 text-sm text-gray-600">
            <div>
              <span class="font-medium">Created:</span>
              <CroutonDate :date="item.createdAt" />
            </div>
            <div>
              <span class="font-medium">Last Updated:</span>
              <CroutonDate :date="item.updatedAt" />
            </div>
          </div>
        </div>

        <!-- Project details -->
      </div>
    </template>
  </CroutonDetailLayout>
</template>

<template>
  <div>
    <!-- Works with ISO 8601 strings from APIs -->
    <CroutonDate :date="isoTimestamp" />
  </div>
</template>

<script setup lang="ts">
// Common API response format
const isoTimestamp = ref('2025-01-17T15:30:00.000Z')
</script>

<template>
  <div>
    <!-- Works with JavaScript Date objects -->
    <CroutonDate :date="dateObject" />
  </div>
</template>

<script setup lang="ts">
const dateObject = ref(new Date())
</script>

┌─────────────────────────────────┐
│ November 17, 2025, 3:45 PM     │  ← Absolute (normal size, full opacity)
│ 2 hours ago                    │  ← Relative (xs, italic, 50% opacity)
└─────────────────────────────────┘

<template>
  <CroutonTable
    :rows="items"
    :columns="columns"
    collection="items"
  >
    <!-- Default columns (createdAt, updatedAt) automatically use CroutonDate -->
    <!-- Override with custom slot if needed -->
    <template #createdAt-cell="{ row }">
      <div class="flex items-center gap-2">
        <UIcon name="i-heroicons-calendar" />
        <CroutonDate :date="row.original.createdAt" />
      </div>
    </template>
  </CroutonTable>
</template>

<!-- ❌ WRONG: Date is undefined or null -->
<CroutonDate :date="undefined" />

<!-- ✅ CORRECT: Check for date before rendering -->
<CroutonDate v-if="item.createdAt" :date="item.createdAt" />

<!-- ✅ ALSO CORRECT: Use optional chaining -->
<CroutonDate :date="item?.createdAt" />

// ❌ WRONG: Storing dates as local strings
const date = '11/17/2025'  // Ambiguous format

// ✅ CORRECT: Use ISO 8601 format
const date = '2025-11-17T15:30:00.000Z'  // UTC timestamp

// ✅ ALSO CORRECT: Use Date objects
const date = new Date()

<!-- ❌ LIMITATION: CroutonDate only supports "long" style -->
<CroutonDate :date="date" />

<!-- ✅ WORKAROUND: Use NuxtTime directly for custom formatting -->
<NuxtTime
  :datetime="date"
  numeric="auto"
  style="medium"
/>

interface CroutonImageUploadProps {
  modelValue?: string              // Preview URL (v-model)
  accept?: string                  // Accepted file types (default: 'image/*')
  maxSize?: number                 // Max file size in bytes
}

@file-selected="handleFile"       // Emits: File | null

<template>
  <div>
    <CroutonImageUpload
      v-model="imageUrl"
      @file-selected="handleUpload"
    />
  </div>
</template>

<script setup lang="ts">
const imageUrl = ref('')

const handleUpload = async (file: File | null) => {
  if (!file) return

  const formData = new FormData()
  formData.append('image', file)

  const pathname = await $fetch('/api/upload-image', {
    method: 'POST',
    body: formData
  })

  imageUrl.value = `/images/${pathname}`
}
</script>

// Schema
{
  "imageUrl": { "type": "string" }
}

// Schema
{
  "imageId": {
    "type": "string",
    "refTarget": "assets",
    "meta": { "component": "CroutonAssetPicker" }
  }
}

interface CroutonAvatarUploadProps {
  modelValue?: string              // Preview URL (v-model)
  accept?: string                  // Default: 'image/png,image/jpeg,image/webp'
  maxSize?: number                 // Default: 2MB
}