@commercejs/ui 0.1.0

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { Product } from '@commercejs/types'
+
+/**
+ * CProductGrid — Responsive product grid layout.
+ * Wraps CProductCard in a CSS grid with configurable columns.
+ */
+
+export interface ProductGridProps {
+  /** Products to display */
+  products: Product[]
+  /** Number of columns (responsive breakpoints) */
+  columns?: 2 | 3 | 4 | 5 | 6
+  /** Gap between items */
+  gap?: 'sm' | 'md' | 'lg'
+  /** Props to pass through to each CProductCard */
+  cardProps?: Record<string, any>
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    empty: any
+  }>
+}
+
+const props = withDefaults(defineProps<ProductGridProps>(), {
+  columns: 4,
+  gap: 'md',
+})
+
+const emit = defineEmits<{
+  'add-to-cart': [product: Product]
+  'toggle-wishlist': [product: Product]
+}>()
+
+const gridCols = computed(() => {
+  const map: Record<number, string> = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
+    5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5',
+    6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6',
+  }
+  return map[props.columns] || map[4]
+})
+
+const gapClass = computed(() => {
+  const map = { sm: 'gap-3', md: 'gap-4 md:gap-6', lg: 'gap-6 md:gap-8' }
+  return map[props.gap] || map.md
+})
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.productGrid ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  return {
+    root: [base.root, props.ui?.root],
+    empty: [base.empty, props.ui?.empty],
+  }
+})
+</script>
+
+<template>
+  <div v-if="products.length > 0" :class="['grid', gridCols, gapClass, slotClasses.root]">
+    <slot name="item" v-for="product in products" :key="product.id" :product="product">
+      <CProductCard
+        :product="product"
+        v-bind="cardProps"
+        @add-to-cart="emit('add-to-cart', $event)"
+        @toggle-wishlist="emit('toggle-wishlist', $event)"
+      />
+    </slot>
+  </div>
+
+  <slot v-else name="empty">
+    <div :class="['text-center py-16', slotClasses.empty]">
+      <UIcon name="i-heroicons-shopping-bag" class="text-4xl text-muted mb-3" />
+      <p class="text-muted">No products found</p>
+    </div>
+  </slot>
+</template>

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { ProductOption, LocalizedString, Id } from '@commercejs/types'
+
+/**
+ * CProductOptions — Variant option selector (size, color, etc.)
+ * Renders each option group with selectable values.
+ */
+
+export interface ProductOptionsProps {
+  /** Available product options */
+  items: ProductOption[]
+  /** Currently selected option values: { optionId: valueId } */
+  modelValue: Record<string, string>
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg'
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    group: any
+    label: any
+    values: any
+    value: any
+    valueActive: any
+  }>
+}
+
+const props = withDefaults(defineProps<ProductOptionsProps>(), {
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Record<string, string>]
+}>()
+
+function t(value: LocalizedString | string | null | undefined): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  return value.en || value.ar || Object.values(value)[0] || ''
+}
+
+function selectValue(optionId: string, valueId: string) {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [optionId]: valueId,
+  })
+}
+
+function isSelected(optionId: string, valueId: string): boolean {
+  return props.modelValue[optionId] === valueId
+}
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.productOptions ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const sizeStyles = theme.value?.variants?.size?.[props.size] ?? {}
+  const merge = (slot: string) => [
+    base[slot],
+    sizeStyles[slot],
+    props.ui?.[slot as keyof typeof props.ui],
+  ]
+  return {
+    root: merge('root'),
+    group: merge('group'),
+    label: merge('label'),
+    values: merge('values'),
+    value: merge('value'),
+    valueActive: merge('valueActive'),
+  }
+})
+</script>
+
+<template>
+  <div :class="slotClasses.root">
+    <div v-for="option in items" :key="option.id" :class="slotClasses.group">
+      <slot name="label" :option="option">
+        <label :class="slotClasses.label">
+          {{ t(option.name) }}
+          <span v-if="modelValue[option.id]" class="text-muted font-normal">
+            — {{ t(option.values.find(v => v.id === modelValue[option.id])?.name) }}
+          </span>
+        </label>
+      </slot>
+
+      <div :class="slotClasses.values">
+        <slot name="value" v-for="val in option.values" :key="val.id" :option="option" :value="val" :selected="isSelected(option.id, val.id)" :select="() => selectValue(option.id, val.id)">
+          <UButton
+            :variant="isSelected(option.id, val.id) ? 'soft' : 'outline'"
+            :color="isSelected(option.id, val.id) ? 'primary' : 'neutral'"
+            size="sm"
+            @click="selectValue(option.id, val.id)"
+          >
+            {{ t(val.name) }}
+          </UButton>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { DiscountablePrice, Price } from '@commercejs/types'
+
+/**
+ * CProductPrice — Display a product price with optional discount.
+ * Follows Nuxt UI conventions: ui prop, slot-based theming, semantic tokens.
+ */
+
+export interface ProductPriceProps {
+  /** The price to display */
+  price: DiscountablePrice | Price
+  /** Size variant */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  /** Show discount percentage badge */
+  showDiscount?: boolean
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    current: any
+    original: any
+    discount: any
+  }>
+}
+
+const props = withDefaults(defineProps<ProductPriceProps>(), {
+  size: 'md',
+  showDiscount: true,
+})
+
+const hasDiscount = computed(() => {
+  const p = props.price as DiscountablePrice
+  return p.originalAmount != null && p.originalAmount > p.amount
+})
+
+const discountPercent = computed(() => {
+  const p = props.price as DiscountablePrice
+  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
+})
+
+const originalFormatted = computed(() => {
+  if (!hasDiscount.value) return ''
+  const p = props.price as DiscountablePrice
+  // Build a formatted original price string
+  if (p.formatted && p.originalAmount) {
+    return p.formatted.replace(String(p.amount), String(p.originalAmount))
+  }
+  return `${p.originalAmount} ${p.currency}`
+})
+
+// Resolve theme classes from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.productPrice ?? {})
+
+const slotClasses = computed(() => {
+  const t = theme.value
+  const sizeVariant = t?.variants?.size?.[props.size] ?? {}
+  const base = t?.slots ?? {}
+  return {
+    root: [base.root, sizeVariant.root, props.ui?.root],
+    current: [base.current, sizeVariant.current, props.ui?.current],
+    original: [base.original, sizeVariant.original, props.ui?.original],
+    discount: [base.discount, sizeVariant.discount, props.ui?.discount],
+  }
+})
+</script>
+
+<template>
+  <span :class="slotClasses.root">
+    <slot name="current" :price="price" :formatted="price.formatted">
+      <span :class="slotClasses.current">{{ price.formatted }}</span>
+    </slot>
+
+    <template v-if="hasDiscount">
+      <slot name="original" :original="originalFormatted">
+        <span :class="slotClasses.original">{{ originalFormatted }}</span>
+      </slot>
+
+      <slot v-if="showDiscount" name="discount" :percent="discountPercent">
+        <span :class="slotClasses.discount">-{{ discountPercent }}%</span>
+      </slot>
+    </template>
+  </span>
+</template>

package/src/runtime/components/promotion/CCouponInput.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { Coupon } from '@commercejs/types'
+
+/**
+ * CCouponInput — Coupon code input with validation feedback.
+ * Used at cart/checkout to apply discount codes.
+ */
+
+export interface CouponInputProps {
+  /** Applied coupon (if already applied) */
+  appliedCoupon?: Coupon | null
+  /** Whether the coupon is being validated */
+  loading?: boolean
+  /** Error message */
+  error?: string
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    input: any
+    applied: any
+  }>
+}
+
+const props = withDefaults(defineProps<CouponInputProps>(), {
+  appliedCoupon: null,
+  loading: false,
+  error: '',
+})
+
+const emit = defineEmits<{
+  'apply': [code: string]
+  'remove': []
+}>()
+
+const code = ref('')
+
+function t(value: any): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  return value.en || value.ar || Object.values(value)[0] || ''
+}
+
+function handleApply() {
+  if (code.value.trim()) {
+    emit('apply', code.value.trim().toUpperCase())
+  }
+}
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.couponInput ?? {})
+
+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'),
+    input: merge('input'),
+    applied: merge('applied'),
+  }
+})
+</script>
+
+<template>
+  <div :class="['space-y-2', slotClasses.root]">
+    <!-- Applied coupon -->
+    <div v-if="appliedCoupon" :class="['flex items-center justify-between p-3 rounded-lg bg-success/10 ring ring-success/30', slotClasses.applied]">
+      <div class="flex items-center gap-2">
+        <UIcon name="i-heroicons-ticket" class="text-success" />
+        <span class="font-mono font-semibold text-sm text-highlighted">{{ appliedCoupon.code }}</span>
+        <UBadge color="success" size="xs" variant="subtle">
+          {{ appliedCoupon.promotion.discountType === 'percentage'
+            ? `${appliedCoupon.promotion.discountValue}% off`
+            : t(appliedCoupon.promotion.name)
+          }}
+        </UBadge>
+      </div>
+      <UButton
+        icon="i-heroicons-x-mark-20-solid"
+        variant="ghost"
+        color="error"
+        size="xs"
+        @click="emit('remove')"
+      />
+    </div>
+
+    <!-- Input form -->
+    <form v-else class="flex gap-2" @submit.prevent="handleApply">
+      <UInput
+        v-model="code"
+        :class="['flex-1 font-mono uppercase', slotClasses.input]"
+        placeholder="Enter coupon code"
+        :disabled="loading"
+        :color="error ? 'error' : undefined"
+      />
+      <UButton type="submit" :loading="loading" variant="outline" color="neutral">
+        Apply
+      </UButton>
+    </form>
+
+    <!-- Error message -->
+    <p v-if="error" class="text-xs text-error">{{ error }}</p>
+  </div>
+</template>

package/src/runtime/components/promotion/CPromoBanner.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import type { Promotion } from '@commercejs/types'
+
+/**
+ * CPromoBanner — Promotional banner with countdown timer and CTA.
+ * Used for flash sales, limited-time offers, and campaign banners.
+ */
+
+export interface PromoBannerProps {
+  promotion: Promotion
+  /** Banner variant */
+  variant?: 'inline' | 'full-width' | 'compact'
+  /** Custom background image URL */
+  backgroundImage?: string
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    content: any
+    timer: any
+    cta: any
+  }>
+}
+
+const props = withDefaults(defineProps<PromoBannerProps>(), {
+  variant: 'inline',
+})
+
+const emit = defineEmits<{
+  'click': [promotion: Promotion]
+}>()
+
+function t(value: any): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  return value.en || value.ar || Object.values(value)[0] || ''
+}
+
+// Countdown
+const timeRemaining = ref({ days: 0, hours: 0, mins: 0, secs: 0 })
+const hasEnded = ref(false)
+let timer: ReturnType<typeof setInterval>
+
+function updateTimer() {
+  if (!props.promotion.endsAt) return
+  const diff = new Date(props.promotion.endsAt).getTime() - Date.now()
+  if (diff <= 0) {
+    hasEnded.value = true
+    clearInterval(timer)
+    return
+  }
+  timeRemaining.value = {
+    days: Math.floor(diff / 86400000),
+    hours: Math.floor((diff % 86400000) / 3600000),
+    mins: Math.floor((diff % 3600000) / 60000),
+    secs: Math.floor((diff % 60000) / 1000),
+  }
+}
+
+onMounted(() => {
+  updateTimer()
+  timer = setInterval(updateTimer, 1000)
+})
+
+onUnmounted(() => clearInterval(timer))
+
+// Discount display
+const discountDisplay = computed(() => {
+  if (props.promotion.discountType === 'percentage') return `${props.promotion.discountValue}% OFF`
+  if (props.promotion.discountType === 'fixed_amount') return `${props.promotion.currency || ''} ${props.promotion.discountValue} OFF`
+  if (props.promotion.discountType === 'free_shipping') return 'FREE SHIPPING'
+  if (props.promotion.discountType === 'buy_x_get_y') return 'BOGO'
+  return 'SPECIAL OFFER'
+})
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.promoBanner ?? {})
+
+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'),
+    content: merge('content'),
+    timer: merge('timer'),
+    cta: merge('cta'),
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="promotion.isActive && !hasEnded"
+    :class="[
+      'relative overflow-hidden rounded-xl',
+      variant === 'full-width' ? 'rounded-none' : '',
+      variant === 'compact' ? 'py-2 px-4' : 'py-6 px-6',
+      slotClasses.root,
+    ]"
+    :style="backgroundImage ? { backgroundImage: `url(${backgroundImage})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}"
+  >
+    <!-- Gradient overlay for bg images -->
+    <div v-if="backgroundImage" class="absolute inset-0 bg-gradient-to-r from-black/80 to-black/40" />
+
+    <div :class="[
+      'relative z-10 flex items-center justify-between gap-4',
+      variant === 'compact' ? 'flex-row' : 'flex-col md:flex-row',
+      slotClasses.content,
+    ]">
+      <!-- Left: Promo info -->
+      <div :class="variant === 'compact' ? '' : 'text-center md:text-start'">
+        <span :class="[
+          'font-black tracking-tight',
+          variant === 'compact' ? 'text-lg' : 'text-2xl md:text-3xl',
+          backgroundImage ? 'text-white' : 'text-highlighted',
+        ]">
+          {{ discountDisplay }}
+        </span>
+        <p :class="[
+          'text-sm mt-0.5',
+          backgroundImage ? 'text-white/80' : 'text-muted',
+        ]">
+          {{ t(promotion.name) }}
+        </p>
+      </div>
+
+      <!-- Center: Countdown -->
+      <div v-if="promotion.endsAt" :class="['flex gap-2', slotClasses.timer]">
+        <div v-for="(val, label) in { d: timeRemaining.days, h: timeRemaining.hours, m: timeRemaining.mins, s: timeRemaining.secs }" :key="label"
+          :class="[
+            'text-center rounded-lg px-2 py-1',
+            backgroundImage ? 'bg-white/20 backdrop-blur-sm text-white' : 'bg-elevated text-highlighted',
+          ]"
+        >
+          <span class="text-lg font-bold font-mono block leading-tight">{{ String(val).padStart(2, '0') }}</span>
+          <span class="text-[10px] uppercase opacity-70">{{ label }}</span>
+        </div>
+      </div>
+
+      <!-- Right: CTA -->
+      <slot name="action">
+        <UButton
+          :color="backgroundImage ? 'white' : 'primary'"
+          size="sm"
+          :class="slotClasses.cta"
+          @click="emit('click', promotion)"
+        >
+          Shop Now
+        </UButton>
+      </slot>
+    </div>
+  </div>
+</template>