@commercejs/ui 0.1.0

package/src/runtime/components/navigation/CSearchBar.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { CommandPaletteGroup } from '#ui/types'
+
+/**
+ * CSearchBar — Modal CommandPalette search (⌘K).
+ * Opens a modal with UCommandPalette for fuzzy search,
+ * keyboard navigation, grouped results, and highlight matching.
+ */
+
+export interface SearchSuggestion {
+  label: string
+  suffix?: string
+  to?: string
+  icon?: string
+  avatar?: Record<string, any>
+  value?: string
+  onSelect?: (e: Event) => void
+}
+
+export interface SearchGroup {
+  id: string
+  label?: string
+  items: SearchSuggestion[]
+  /** If true, skip client-side filtering (for server-side search) */
+  ignoreFilter?: boolean
+}
+
+export interface SearchBarProps {
+  /** Placeholder text */
+  placeholder?: string
+  /** Grouped suggestions */
+  groups?: SearchGroup[]
+  /** Whether results are loading */
+  loading?: boolean
+  /** Close modal on select */
+  closeOnSelect?: boolean
+  /** Per-instance theme overrides */
+  ui?: Record<string, any>
+}
+
+const props = withDefaults(defineProps<SearchBarProps>(), {
+  placeholder: 'Search products...',
+  groups: () => [],
+  loading: false,
+  closeOnSelect: true,
+})
+
+const emit = defineEmits<{
+  'search': [query: string]
+  'select': [item: SearchSuggestion]
+}>()
+
+const open = ref(false)
+const searchTerm = ref('')
+
+// Emit search when user types
+watch(searchTerm, (q) => {
+  emit('search', q)
+})
+
+function handleSelect(item: SearchSuggestion) {
+  emit('select', item)
+  if (props.closeOnSelect) {
+    open.value = false
+    searchTerm.value = ''
+  }
+}
+
+// ⌘K / Ctrl+K global shortcut
+defineShortcuts({
+  meta_k: () => {
+    open.value = !open.value
+  },
+})
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.searchBar ?? {})
+
+const paletteUi = computed(() => ({
+  ...theme.value?.slots,
+  ...props.ui,
+}))
+</script>
+
+<template>
+  <UModal v-model:open="open" class="w-full">
+    <button
+      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-lg ring ring-accented bg-default text-dimmed text-sm cursor-pointer hover:bg-elevated/50 transition-colors"
+    >
+      <UIcon name="i-lucide-search" class="shrink-0 size-5" />
+      <span class="flex-1 text-left">Search...</span>
+      <span class="flex items-center gap-0.5 ms-auto">
+        <UKbd value="meta" />
+        <UKbd value="K" />
+      </span>
+    </button>
+
+    <!-- Modal content: CommandPalette -->
+    <template #content>
+      <UCommandPalette
+        :groups="groups as CommandPaletteGroup[]"
+        :placeholder="placeholder"
+        :loading="loading"
+        :ui="paletteUi"
+        :close="true"
+        :fuse="{ fuseOptions: { includeMatches: true } }"
+        v-model:search-term="searchTerm"
+        class="h-80"
+        @update:model-value="handleSelect"
+        @update:open="open = $event"
+      >
+        <template #empty>
+          <div class="flex flex-col items-center justify-center py-8 gap-2 text-center">
+            <UIcon name="i-lucide-search" class="text-dimmed text-2xl" />
+            <p v-if="searchTerm" class="text-sm text-muted">
+              No results for "<span class="font-medium text-highlighted">{{ searchTerm }}</span>"
+            </p>
+            <p v-else class="text-sm text-muted">
+              Start typing to search...
+            </p>
+          </div>
+        </template>
+      </UCommandPalette>
+    </template>
+  </UModal>
+</template>

package/src/runtime/components/order/COrderCard.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { Order, OrderStatus } from '@commercejs/types'
+
+/**
+ * COrderCard — Order summary card for order listing pages.
+ * Shows order number, status, date, item count, and total.
+ */
+
+export interface OrderCardProps {
+  order: Order
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    header: any
+    items: any
+    footer: any
+  }>
+}
+
+const props = defineProps<OrderCardProps>()
+
+function t(value: any): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  return value.en || value.ar || Object.values(value)[0] || ''
+}
+
+const statusColor = computed(() => {
+  const map: Record<OrderStatus, string> = {
+    pending: 'warning',
+    processing: 'info',
+    shipped: 'primary',
+    delivered: 'success',
+    cancelled: 'error',
+    refunded: 'neutral',
+    returned: 'neutral',
+  }
+  return map[props.order.status] || 'neutral'
+})
+
+const statusLabel = computed(() => {
+  const map: Record<OrderStatus, string> = {
+    pending: 'Pending',
+    processing: 'Processing',
+    shipped: 'Shipped',
+    delivered: 'Delivered',
+    cancelled: 'Cancelled',
+    refunded: 'Refunded',
+    returned: 'Returned',
+  }
+  return map[props.order.status] || props.order.status
+})
+
+const formattedDate = computed(() => new Date(props.order.createdAt).toLocaleDateString())
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.orderCard ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [base[slot], props.ui?.[slot as keyof typeof props.ui]]
+  return {
+    root: merge('root'),
+    header: merge('header'),
+    items: merge('items'),
+    footer: merge('footer'),
+  }
+})
+</script>
+
+<template>
+  <div :class="['rounded-xl ring ring-default bg-default overflow-hidden', slotClasses.root]">
+    <!-- Header -->
+    <div :class="['flex items-center justify-between px-5 py-3 bg-elevated', slotClasses.header]">
+      <div>
+        <span class="text-sm font-medium text-highlighted">#{{ order.orderNumber }}</span>
+        <span class="text-xs text-muted ms-2">{{ formattedDate }}</span>
+      </div>
+      <UBadge :color="statusColor as any" size="sm" variant="subtle">{{ statusLabel }}</UBadge>
+    </div>
+
+    <!-- Item thumbnails -->
+    <div :class="['px-5 py-4', slotClasses.items]">
+      <slot name="items" :items="order.items">
+        <div class="flex items-center gap-3">
+          <div class="flex -space-x-2">
+            <div
+              v-for="(item, i) in order.items.slice(0, 4)"
+              :key="item.id"
+              class="size-10 rounded-lg ring-2 ring-default overflow-hidden bg-elevated shrink-0"
+            >
+              <img v-if="item.image" :src="item.image.url" :alt="t(item.name)" class="size-full object-cover" />
+              <div v-else class="size-full flex items-center justify-center text-xs text-muted">
+                {{ t(item.name).charAt(0) }}
+              </div>
+            </div>
+          </div>
+          <span class="text-sm text-muted">
+            {{ order.items.length }} item{{ order.items.length !== 1 ? 's' : '' }}
+            <span v-if="order.items.length > 4" class="text-xs">(+{{ order.items.length - 4 }} more)</span>
+          </span>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Footer -->
+    <div :class="['flex items-center justify-between px-5 py-3 bg-elevated', slotClasses.footer]">
+      <span class="text-sm font-semibold text-highlighted">{{ order.totals.total?.formatted }}</span>
+      <slot name="actions">
+        <UButton :to="`/orders/${order.id}`" size="xs" variant="outline" color="neutral" trailing-icon="i-heroicons-chevron-right-20-solid">
+          View Details
+        </UButton>
+      </slot>
+    </div>
+  </div>
+</template>

package/src/runtime/components/order/COrderTimeline.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { OrderHistoryEntry } from '@commercejs/types'
+
+/**
+ * COrderTimeline — Displays order status history as a timeline.
+ */
+
+export interface OrderTimelineProps {
+  entries: OrderHistoryEntry[]
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    entry: any
+    dot: any
+    line: any
+  }>
+}
+
+const props = defineProps<OrderTimelineProps>()
+
+const statusIcon = computed(() => (status: string) => {
+  const map: Record<string, string> = {
+    pending: 'i-heroicons-clock',
+    processing: 'i-heroicons-cog-6-tooth',
+    shipped: 'i-heroicons-truck',
+    delivered: 'i-heroicons-check-circle',
+    cancelled: 'i-heroicons-x-circle',
+    refunded: 'i-heroicons-arrow-uturn-left',
+    returned: 'i-heroicons-arrow-path',
+  }
+  return map[status] || 'i-heroicons-ellipsis-horizontal-circle'
+})
+
+const statusColor = computed(() => (status: string) => {
+  const map: Record<string, string> = {
+    pending: 'text-warning',
+    processing: 'text-info',
+    shipped: 'text-primary',
+    delivered: 'text-success',
+    cancelled: 'text-error',
+    refunded: 'text-muted',
+    returned: 'text-muted',
+  }
+  return map[status] || 'text-muted'
+})
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.orderTimeline ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [base[slot], props.ui?.[slot as keyof typeof props.ui]]
+  return {
+    root: merge('root'),
+    entry: merge('entry'),
+    dot: merge('dot'),
+    line: merge('line'),
+  }
+})
+</script>
+
+<template>
+  <div :class="['relative', slotClasses.root]">
+    <div
+      v-for="(entry, i) in entries"
+      :key="entry.timestamp || i"
+      :class="['flex gap-4 pb-6 last:pb-0', slotClasses.entry]"
+    >
+      <!-- Timeline dot & line -->
+      <div class="flex flex-col items-center">
+        <div
+          :class="[
+            'size-8 rounded-full flex items-center justify-center ring-4 ring-default bg-default z-10',
+            statusColor(entry.status),
+            slotClasses.dot,
+          ]"
+        >
+          <UIcon :name="statusIcon(entry.status)" class="text-lg" />
+        </div>
+        <div
+          v-if="i < entries.length - 1"
+          :class="['w-0.5 flex-1 bg-default mt-1', slotClasses.line]"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 pt-1 min-w-0">
+        <div class="flex items-center justify-between gap-2">
+          <span class="font-medium text-sm text-highlighted capitalize">{{ entry.status.replace(/_/g, ' ') }}</span>
+          <time class="text-xs text-muted shrink-0">
+            {{ new Date(entry.timestamp).toLocaleString() }}
+          </time>
+        </div>
+        <p v-if="entry.note" class="text-sm text-muted mt-0.5">{{ entry.note }}</p>
+      </div>
+    </div>
+  </div>
+</template>

package/src/runtime/components/product/CProductCard.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import type { Product, LocalizedString } from '@commercejs/types'
+
+/**
+ * CProductCard — Ecommerce product card.
+ * Follows Nuxt UI conventions: as prop, ui prop, slot-based theming, variants.
+ */
+
+export interface ProductCardProps {
+  /** The element or component this component should render as */
+  as?: any
+  /** Product data from @commercejs/types */
+  product: Product
+  /** Visual variant */
+  variant?: 'outline' | 'soft' | 'ghost'
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg'
+  /** Show quick-add button on hover */
+  showQuickAdd?: boolean
+  /** Show wishlist button */
+  showWishlist?: boolean
+  /** Show star rating */
+  showRating?: boolean
+  /** Image aspect ratio class */
+  imageAspect?: string
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    imageWrapper: any
+    image: any
+    badge: any
+    overlay: any
+    body: any
+    title: any
+    price: any
+    originalPrice: any
+    priceWrapper: any
+    rating: any
+  }>
+}
+
+const props = withDefaults(defineProps<ProductCardProps>(), {
+  variant: 'outline',
+  size: 'md',
+  showQuickAdd: true,
+  showWishlist: false,
+  showRating: false,
+  imageAspect: 'aspect-square',
+})
+
+const emit = defineEmits<{
+  'add-to-cart': [product: Product]
+  'toggle-wishlist': [product: Product]
+}>()
+
+// Resolve localized strings — first try current locale, fallback chain
+function t(value: LocalizedString | string | null | undefined): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  // Simple fallback: en → ar → first available
+  return value.en || value.ar || Object.values(value)[0] || ''
+}
+
+const productName = computed(() => t(props.product.name))
+const mainImage = computed(() => props.product.primaryImage || props.product.gallery?.[0])
+
+const hasDiscount = computed(() => {
+  const p = props.product.price
+  return p?.originalAmount != null && p.originalAmount > p.amount
+})
+
+const discountPercent = computed(() => {
+  const p = props.product.price
+  if (!p) return 0
+  if (p.discountPercent) return p.discountPercent
+  if (p.originalAmount && p.originalAmount > p.amount) {
+    return Math.round(((p.originalAmount - p.amount) / p.originalAmount) * 100)
+  }
+  return 0
+})
+
+// Resolve theme classes from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.productCard ?? {})
+
+const slotClasses = computed(() => {
+  const t = theme.value
+  const variantStyles = t?.variants?.variant?.[props.variant] ?? {}
+  const sizeStyles = t?.variants?.size?.[props.size] ?? {}
+  const base = t?.slots ?? {}
+
+  // Merge: base → variant → size → instance ui prop
+  const merge = (slot: string) => [
+    base[slot],
+    variantStyles[slot],
+    sizeStyles[slot],
+    props.ui?.[slot as keyof typeof props.ui],
+  ]
+
+  return {
+    root: merge('root'),
+    imageWrapper: merge('imageWrapper'),
+    image: merge('image'),
+    badge: merge('badge'),
+    overlay: merge('overlay'),
+    body: merge('body'),
+    title: merge('title'),
+    price: merge('price'),
+    originalPrice: merge('originalPrice'),
+    priceWrapper: merge('priceWrapper'),
+    rating: merge('rating'),
+  }
+})
+
+const productUrl = computed(() => `/products/${props.product.slug || props.product.id}`)
+const rootTag = computed(() => props.as || resolveComponent('NuxtLink'))
+</script>
+
+<template>
+  <component
+    :is="rootTag"
+    :to="rootTag !== 'div' ? productUrl : undefined"
+    :class="slotClasses.root"
+  >
+    <!-- Image -->
+    <div :class="[slotClasses.imageWrapper, imageAspect]">
+      <slot name="image" :product="product" :image="mainImage">
+        <img
+          v-if="mainImage"
+          :src="mainImage.url"
+          :alt="mainImage.alt || productName"
+          :class="slotClasses.image"
+          loading="lazy"
+        />
+        <div v-else class="size-full bg-elevated flex items-center justify-center">
+          <UIcon name="i-heroicons-photo" class="text-3xl text-muted" />
+        </div>
+      </slot>
+
+      <!-- Discount badge -->
+      <slot name="badge" :discount="discountPercent" :has-discount="hasDiscount">
+        <UBadge
+          v-if="hasDiscount"
+          color="error"
+          variant="solid"
+          size="sm"
+          :class="slotClasses.badge"
+        >
+          -{{ discountPercent }}%
+        </UBadge>
+      </slot>
+
+      <!-- Hover overlay (quick add, wishlist) -->
+      <div v-if="showQuickAdd || showWishlist" :class="slotClasses.overlay">
+        <slot name="actions" :product="product">
+          <UButton
+            v-if="showWishlist"
+            icon="i-heroicons-heart"
+            variant="soft"
+            color="neutral"
+            size="sm"
+            class="me-2"
+            @click.prevent="emit('toggle-wishlist', product)"
+          />
+          <UButton
+            v-if="showQuickAdd"
+            icon="i-heroicons-shopping-cart-20-solid"
+            variant="solid"
+            color="primary"
+            size="sm"
+            @click.prevent="emit('add-to-cart', product)"
+          />
+        </slot>
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div :class="slotClasses.body">
+      <slot name="title" :name="productName">
+        <h3 :class="slotClasses.title">{{ productName }}</h3>
+      </slot>
+
+      <!-- Rating -->
+      <slot v-if="showRating && product.rating" name="rating" :rating="product.rating">
+        <div :class="slotClasses.rating">
+          <UIcon name="i-heroicons-star-20-solid" class="text-yellow-400" />
+          <span>{{ product.rating.average.toFixed(1) }}</span>
+          <span class="text-muted">({{ product.rating.count }})</span>
+        </div>
+      </slot>
+
+      <!-- Price -->
+      <slot name="price" :price="product.price">
+        <div v-if="product.price" :class="slotClasses.priceWrapper">
+          <span :class="slotClasses.price">{{ product.price.formatted }}</span>
+          <span
+            v-if="hasDiscount && product.price.originalAmount"
+            :class="slotClasses.originalPrice"
+          >
+            {{ product.price.originalAmount }} {{ product.price.currency }}
+          </span>
+        </div>
+      </slot>
+    </div>
+  </component>
+</template>

package/src/runtime/components/product/CProductGallery.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { Image } from '@commercejs/types'
+
+/**
+ * CProductGallery — Product image gallery with thumbnails and main image.
+ * Uses Nuxt UI's UCarousel when available, falls back to manual implementation.
+ */
+
+export interface ProductGalleryProps {
+  /** Array of product images */
+  images: Image[]
+  /** Selected image index */
+  modelValue?: number
+  /** Show thumbnail strip */
+  showThumbnails?: boolean
+  /** Thumbnail position */
+  thumbnailPosition?: 'bottom' | 'start'
+  /** Enable zoom on hover */
+  zoomable?: boolean
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    main: any
+    mainImage: any
+    thumbnails: any
+    thumbnail: any
+    thumbnailActive: any
+  }>
+}
+
+const props = withDefaults(defineProps<ProductGalleryProps>(), {
+  modelValue: 0,
+  showThumbnails: true,
+  thumbnailPosition: 'bottom',
+  zoomable: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [index: number]
+}>()
+
+const selectedIndex = ref(props.modelValue)
+
+watch(() => props.modelValue, (v) => { selectedIndex.value = v })
+
+function selectImage(index: number) {
+  selectedIndex.value = index
+  emit('update:modelValue', index)
+}
+
+const currentImage = computed(() => props.images[selectedIndex.value] || props.images[0])
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.productGallery ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const positionStyles = theme.value?.variants?.thumbnailPosition?.[props.thumbnailPosition] ?? {}
+  const merge = (slot: string) => [
+    base[slot],
+    positionStyles[slot],
+    props.ui?.[slot as keyof typeof props.ui],
+  ]
+  return {
+    root: merge('root'),
+    main: merge('main'),
+    mainImage: merge('mainImage'),
+    thumbnails: merge('thumbnails'),
+    thumbnail: merge('thumbnail'),
+    thumbnailActive: merge('thumbnailActive'),
+  }
+})
+</script>
+
+<template>
+  <div :class="slotClasses.root">
+    <!-- Main image -->
+    <slot name="main" :image="currentImage" :index="selectedIndex">
+      <div :class="slotClasses.main">
+        <img
+          v-if="currentImage"
+          :src="currentImage.url"
+          :alt="currentImage.alt"
+          :class="slotClasses.mainImage"
+        />
+        <div v-else class="size-full bg-elevated flex items-center justify-center">
+          <UIcon name="i-heroicons-photo" class="text-5xl text-muted" />
+        </div>
+      </div>
+    </slot>
+
+    <!-- Thumbnails -->
+    <slot v-if="showThumbnails && images.length > 1" name="thumbnails" :images="images" :selected="selectedIndex" :select="selectImage">
+      <div :class="slotClasses.thumbnails">
+        <button
+          v-for="(img, i) in images"
+          :key="i"
+          :class="[
+            slotClasses.thumbnail,
+            selectedIndex === i ? slotClasses.thumbnailActive : ''
+          ]"
+          @click="selectImage(i)"
+        >
+          <img :src="img.url" :alt="img.alt" class="size-full object-cover" />
+        </button>
+      </div>
+    </slot>
+  </div>
+</template>