@commercejs/ui 0.1.0

package/dist/runtime/components/auction/CBidPanel.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { Bid, AuctionProductMeta, PlaceBidInput } from '@commercejs/types'
+
+/**
+ * CBidPanel — Bid placement panel for auction products.
+ * Shows current bid, bid input, auto-bidding toggle, and bid history.
+ */
+
+export interface BidPanelProps {
+  /** Auction metadata */
+  auction: AuctionProductMeta
+  /** Recent bids */
+  bids?: Bid[]
+  /** Whether a bid is being submitted */
+  loading?: boolean
+  /** Currency symbol for display */
+  currencySymbol?: string
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    currentBid: any
+    form: any
+    history: any
+  }>
+}
+
+const props = withDefaults(defineProps<BidPanelProps>(), {
+  bids: () => [],
+  loading: false,
+  currencySymbol: '',
+})
+
+const emit = defineEmits<{
+  'place-bid': [input: PlaceBidInput]
+}>()
+
+const bidAmount = ref<number>(0)
+const enableAutoBid = ref(false)
+const maxAutoBidAmount = ref<number>(0)
+
+// Set default bid amount to current bid + increment
+watchEffect(() => {
+  const current = props.auction.currentBid?.amount ?? props.auction.startingPrice.amount
+  const increment = props.auction.bidIncrement.amount
+  if (typeof current === 'number' && typeof increment === 'number') {
+    bidAmount.value = current + increment
+  }
+})
+
+const minBid = computed(() => {
+  const current = props.auction.currentBid?.amount ?? props.auction.startingPrice.amount
+  const increment = props.auction.bidIncrement.amount
+  return typeof current === 'number' && typeof increment === 'number'
+    ? current + increment
+    : 0
+})
+
+function handleSubmit() {
+  emit('place-bid', {
+    productId: '', // Set by parent
+    amount: bidAmount.value,
+    maxAutoBid: enableAutoBid.value ? maxAutoBidAmount.value : undefined,
+  })
+}
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.bidPanel ?? {})
+
+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'),
+    currentBid: merge('currentBid'),
+    form: merge('form'),
+    history: merge('history'),
+  }
+})
+</script>
+
+<template>
+  <div :class="['space-y-6', slotClasses.root]">
+    <!-- Current bid display -->
+    <div :class="['text-center p-6 rounded-xl bg-elevated ring ring-default', slotClasses.currentBid]">
+      <p class="text-sm text-muted mb-1">{{ auction.bidCount > 0 ? 'Current Highest Bid' : 'Starting Price' }}</p>
+      <p class="text-4xl font-bold text-highlighted">
+        {{ auction.currentBid?.formatted || auction.startingPrice.formatted }}
+      </p>
+      <p class="text-xs text-muted mt-2">
+        {{ auction.bidCount }} bid{{ auction.bidCount !== 1 ? 's' : '' }}
+        · Min increment: {{ auction.bidIncrement.formatted }}
+      </p>
+    </div>
+
+    <!-- Bid form -->
+    <form v-if="auction.status === 'active'" :class="['space-y-4', slotClasses.form]" @submit.prevent="handleSubmit">
+      <UFormField label="Your Bid">
+        <UInput
+          v-model.number="bidAmount"
+          type="number"
+          :min="minBid"
+          :step="auction.bidIncrement.amount"
+          :placeholder="`Min: ${minBid}`"
+          size="lg"
+          required
+        />
+      </UFormField>
+
+      <!-- Auto-bidding toggle -->
+      <div v-if="auction.autoBiddingEnabled" class="space-y-2">
+        <UCheckbox v-model="enableAutoBid" label="Enable auto-bidding (proxy bid)" />
+        <UFormField v-if="enableAutoBid" label="Maximum Auto-Bid">
+          <UInput
+            v-model.number="maxAutoBidAmount"
+            type="number"
+            :min="bidAmount"
+            placeholder="Your maximum amount"
+          />
+          <template #hint>
+            <span class="text-xs text-muted">We'll bid on your behalf up to this amount</span>
+          </template>
+        </UFormField>
+      </div>
+
+      <UButton type="submit" block size="lg" color="primary" :loading="loading">
+        Place Bid — {{ currencySymbol }}{{ bidAmount }}
+      </UButton>
+
+      <!-- Buy it now -->
+      <UButton
+        v-if="auction.buyNowPrice"
+        block
+        variant="outline"
+        color="neutral"
+        size="lg"
+      >
+        Buy It Now — {{ auction.buyNowPrice.formatted }}
+      </UButton>
+    </form>
+
+    <!-- Bid status messages -->
+    <UAlert
+      v-else-if="auction.status === 'ended'"
+      icon="i-heroicons-clock"
+      title="Auction ended"
+      color="neutral"
+    />
+    <UAlert
+      v-else-if="auction.status === 'upcoming'"
+      icon="i-heroicons-calendar"
+      title="Auction hasn't started yet"
+      color="info"
+    />
+
+    <!-- Recent bid history -->
+    <div v-if="bids.length > 0" :class="['space-y-2', slotClasses.history]">
+      <h4 class="text-sm font-semibold text-highlighted">Recent Bids</h4>
+      <div class="space-y-1 max-h-48 overflow-y-auto">
+        <div
+          v-for="bid in bids"
+          :key="bid.id"
+          class="flex items-center justify-between text-sm py-1.5 px-2 rounded-md"
+          :class="bid.isWinning ? 'bg-success/10' : 'bg-elevated'"
+        >
+          <div class="flex items-center gap-2">
+            <UIcon v-if="bid.isWinning" name="i-heroicons-trophy-20-solid" class="text-success text-xs" />
+            <span class="text-highlighted">{{ bid.bidderName }}</span>
+            <UBadge v-if="bid.isAutoBid" size="xs" variant="subtle" color="info">Auto</UBadge>
+          </div>
+          <span class="font-medium text-highlighted">{{ bid.amount.formatted }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/cart/CCartDrawer.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import type { Cart, CartItem, LocalizedString } from '@commercejs/types'
+
+/**
+ * CCartDrawer — Slide-over panel showing cart contents.
+ * Opens from the right, displays compact cart items, subtotal, and action buttons.
+ * Designed to be triggered by `onItemAdded` from the `useCart` composable.
+ */
+
+export interface CartDrawerProps {
+  /** Cart data */
+  cart: Cart | null
+  /** Cart line items (overrides cart.items if provided) */
+  items?: CartItem[]
+  /** Number of items in cart (overrides cart.itemCount if provided) */
+  itemCount?: number
+  /** Whether a cart operation is loading */
+  loading?: boolean
+  /** Title shown in the drawer header */
+  title?: string
+  /** Label for the "Checkout" button */
+  checkoutLabel?: string
+  /** Route for the "Checkout" button */
+  checkoutTo?: string
+  /** Label for the "View Cart" button */
+  viewCartLabel?: string
+  /** Route for the "View Cart" button */
+  viewCartTo?: string
+  /** Function to resolve the product URL from a cart item. Defaults to `/products/{productSlug || productId}` */
+  resolveProductUrl?: (item: CartItem) => string
+}
+
+const props = withDefaults(defineProps<CartDrawerProps>(), {
+  loading: false,
+  title: 'Your Cart',
+  checkoutLabel: 'Checkout',
+  checkoutTo: '/checkout',
+  viewCartLabel: 'View Full Cart',
+  viewCartTo: '/cart',
+  resolveProductUrl: (item: CartItem) => `/products/${item.productSlug || item.productId}`,
+})
+
+const emit = defineEmits<{
+  'update:quantity': [itemId: string, quantity: number]
+  'remove': [itemId: string]
+}>()
+
+const open = defineModel<boolean>('open', { default: false })
+
+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] || ''
+}
+
+const cartItems = computed(() => {
+  if (props.items) return props.items
+  return props.cart?.items ?? []
+})
+
+const count = computed(() => {
+  if (props.itemCount != null) return props.itemCount
+  return props.cart?.itemCount ?? 0
+})
+
+const subtotalFormatted = computed(() => {
+  return props.cart?.totals?.subtotal?.formatted ?? ''
+})
+
+function handleClose() {
+  open.value = false
+}
+</script>
+
+<template>
+  <USlideover
+    v-model:open="open"
+    :title="title"
+    side="right"
+    :ui="{
+      content: 'max-w-sm overflow-hidden',
+      body: 'flex flex-col p-0 overflow-hidden',
+      footer: 'p-4',
+    }"
+  >
+    <!-- Hidden default slot (controlled externally via v-model:open) -->
+    <template #default>
+      <slot name="trigger" />
+    </template>
+
+    <!-- Body: cart items list -->
+    <template #body>
+      <!-- Empty state -->
+      <div
+        v-if="cartItems.length === 0"
+        class="flex-1 flex flex-col items-center justify-center text-center py-16 px-6 gap-3"
+      >
+        <div class="w-16 h-16 rounded-full bg-elevated flex items-center justify-center mb-2">
+          <UIcon name="i-heroicons-shopping-cart" class="text-2xl text-muted" />
+        </div>
+        <p class="text-sm font-medium text-highlighted">Your cart is empty</p>
+        <p class="text-xs text-muted">Add items to get started</p>
+        <UButton
+          to="/products"
+          size="sm"
+          variant="soft"
+          color="primary"
+          class="mt-2"
+          @click="handleClose"
+        >
+          Browse Products
+        </UButton>
+      </div>
+
+      <!-- Items list -->
+      <div v-else class="flex-1 overflow-y-auto overflow-x-hidden">
+        <div
+          v-for="item in cartItems"
+          :key="item.id"
+          class="flex items-start gap-3 px-4 py-3 border-b border-(--ui-border) last:border-b-0 overflow-hidden"
+        >
+          <!-- Thumbnail -->
+          <NuxtLink
+            :to="resolveProductUrl(item)"
+            class="shrink-0 w-16 h-16 rounded-lg overflow-hidden bg-elevated"
+            @click="handleClose"
+          >
+            <img
+              v-if="item.image"
+              :src="item.image.url"
+              :alt="item.image.alt || t(item.name)"
+              class="w-full h-full object-cover"
+              loading="lazy"
+            />
+            <div v-else class="w-full h-full flex items-center justify-center">
+              <UIcon name="i-heroicons-photo" class="text-lg text-muted" />
+            </div>
+          </NuxtLink>
+
+          <!-- Item details -->
+          <div class="flex-1 min-w-0">
+            <NuxtLink
+              :to="resolveProductUrl(item)"
+              class="text-sm font-medium text-highlighted hover:text-primary transition-colors line-clamp-1 block"
+              @click="handleClose"
+            >
+              {{ t(item.name) }}
+            </NuxtLink>
+
+            <p v-if="item.variantName" class="text-xs text-muted mt-0.5">
+              {{ t(item.variantName) }}
+            </p>
+
+            <!-- Price -->
+            <CProductPrice
+              v-if="item.price"
+              :price="item.price"
+              size="xs"
+              class="mt-0.5"
+            />
+
+            <!-- Quantity + Remove -->
+            <div class="flex items-center justify-between mt-1.5">
+              <CQuantitySelector
+                :model-value="item.quantity"
+                :disabled="loading"
+                size="sm"
+                @update:model-value="emit('update:quantity', item.id, $event)"
+              />
+
+              <UButton
+                icon="i-heroicons-trash-20-solid"
+                variant="ghost"
+                color="error"
+                size="xs"
+                :loading="loading"
+                @click="emit('remove', item.id)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Footer: subtotal + action buttons -->
+    <template #footer>
+      <div v-if="cartItems.length > 0" class="space-y-3">
+        <!-- Subtotal -->
+        <div class="flex items-center justify-between">
+          <span class="text-sm text-muted">Subtotal ({{ count }} items)</span>
+          <span class="text-base font-bold text-highlighted">{{ subtotalFormatted }}</span>
+        </div>
+
+        <!-- Shipping note -->
+        <p class="text-xs text-dimmed">Shipping & taxes calculated at checkout</p>
+
+        <!-- Action buttons -->
+        <div class="flex flex-col gap-2 pt-1">
+          <UButton
+            :to="checkoutTo"
+            color="primary"
+            size="lg"
+            block
+            @click="handleClose"
+          >
+            {{ checkoutLabel }}
+          </UButton>
+
+          <UButton
+            :to="viewCartTo"
+            variant="ghost"
+            color="neutral"
+            size="sm"
+            block
+            @click="handleClose"
+          >
+            {{ viewCartLabel }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </USlideover>
+</template>

package/dist/runtime/components/cart/CCartItem.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import type { CartItem, LocalizedString } from '@commercejs/types'
+
+/**
+ * CCartItem — Individual cart line item with image, details, quantity, and remove.
+ * Follows Nuxt UI conventions: ui prop, slot-based theming, semantic tokens.
+ */
+
+export interface CartItemProps {
+  /** Cart item data from @commercejs/types */
+  item: CartItem
+  /** Whether an operation is loading */
+  loading?: boolean
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg'
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    imageWrapper: any
+    image: any
+    body: any
+    title: any
+    variant: any
+    priceWrapper: any
+    actions: any
+  }>
+}
+
+const props = withDefaults(defineProps<CartItemProps>(), {
+  loading: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:quantity': [value: number]
+  'remove': []
+}>()
+
+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] || ''
+}
+
+const itemName = computed(() => t(props.item.name))
+
+// Resolve theme classes from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.cartItem ?? {})
+
+const slotClasses = computed(() => {
+  const t = theme.value
+  const sizeStyles = t?.variants?.size?.[props.size] ?? {}
+  const base = t?.slots ?? {}
+
+  const merge = (slot: string) => [
+    base[slot],
+    sizeStyles[slot],
+    props.ui?.[slot as keyof typeof props.ui],
+  ]
+
+  return {
+    root: merge('root'),
+    imageWrapper: merge('imageWrapper'),
+    image: merge('image'),
+    body: merge('body'),
+    title: merge('title'),
+    variant: merge('variant'),
+    priceWrapper: merge('priceWrapper'),
+    actions: merge('actions'),
+  }
+})
+</script>
+
+<template>
+  <div :class="slotClasses.root">
+    <!-- Image -->
+    <slot name="image" :item="item">
+      <div :class="slotClasses.imageWrapper">
+        <img
+          v-if="item.image"
+          :src="item.image.url"
+          :alt="item.image.alt || itemName"
+          :class="slotClasses.image"
+          loading="lazy"
+        />
+        <div v-else class="size-full flex items-center justify-center">
+          <UIcon name="i-heroicons-photo" class="text-xl text-muted" />
+        </div>
+      </div>
+    </slot>
+
+    <!-- Details -->
+    <div :class="slotClasses.body">
+      <slot name="title" :name="itemName">
+        <h4 :class="slotClasses.title">{{ itemName }}</h4>
+      </slot>
+
+      <slot name="variant" :item="item">
+        <p v-if="item.variantId" :class="slotClasses.variant">
+          {{ item.variantId }}
+        </p>
+      </slot>
+
+      <!-- Price -->
+      <slot name="price" :price="item.price">
+        <div :class="slotClasses.priceWrapper">
+          <CProductPrice :price="item.price" size="sm" :show-discount="false" />
+        </div>
+      </slot>
+
+      <!-- Actions: quantity + remove -->
+      <div :class="slotClasses.actions">
+        <slot name="quantity" :quantity="item.quantity" :update="(v: number) => emit('update:quantity', v)">
+          <CQuantitySelector
+            :model-value="item.quantity"
+            :disabled="loading"
+            size="sm"
+            @update:model-value="emit('update:quantity', $event)"
+          />
+        </slot>
+
+        <slot name="remove" :remove="() => emit('remove')">
+          <UButton
+            icon="i-heroicons-trash-20-solid"
+            variant="ghost"
+            color="error"
+            size="sm"
+            :loading="loading"
+            @click="emit('remove')"
+          />
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/cart/CCartSummary.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { Cart } from '@commercejs/types'
+
+/**
+ * CCartSummary — Order summary sidebar with line items and totals.
+ * Follows Nuxt UI conventions: ui prop, slot-based theming, semantic tokens.
+ */
+
+export interface CartSummaryProps {
+  /** Cart data from @commercejs/types */
+  cart: Cart
+  /** Show the checkout/action button */
+  showActions?: boolean
+  /** Label for the checkout button */
+  actionLabel?: string
+  /** Route for the checkout button */
+  actionTo?: string
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    title: any
+    lineItem: any
+    lineLabel: any
+    lineValue: any
+    separator: any
+    total: any
+    totalLabel: any
+    totalValue: any
+    actions: any
+  }>
+}
+
+const props = withDefaults(defineProps<CartSummaryProps>(), {
+  showActions: true,
+  actionLabel: 'Proceed to Checkout',
+  actionTo: '/checkout',
+})
+
+// Resolve theme classes from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.cartSummary ?? {})
+
+const slotClasses = computed(() => {
+  const t = theme.value
+  const base = t?.slots ?? {}
+  const merge = (slot: string) => [
+    base[slot],
+    props.ui?.[slot as keyof typeof props.ui],
+  ]
+
+  return {
+    root: merge('root'),
+    title: merge('title'),
+    lineItem: merge('lineItem'),
+    lineLabel: merge('lineLabel'),
+    lineValue: merge('lineValue'),
+    separator: merge('separator'),
+    total: merge('total'),
+    totalLabel: merge('totalLabel'),
+    totalValue: merge('totalValue'),
+    actions: merge('actions'),
+  }
+})
+</script>
+
+<template>
+  <div :class="slotClasses.root">
+    <slot name="title">
+      <h3 :class="slotClasses.title">Order Summary</h3>
+    </slot>
+
+    <!-- Line items -->
+    <div class="space-y-2">
+      <slot name="subtotal" :subtotal="cart.totals.subtotal">
+        <div :class="slotClasses.lineItem">
+          <span :class="slotClasses.lineLabel">Subtotal ({{ cart.itemCount }} items)</span>
+          <span :class="slotClasses.lineValue">{{ cart.totals.subtotal.formatted }}</span>
+        </div>
+      </slot>
+
+      <slot name="shipping" :shipping="cart.totals.shipping">
+        <div v-if="cart.totals.shipping" :class="slotClasses.lineItem">
+          <span :class="slotClasses.lineLabel">Shipping</span>
+          <span :class="slotClasses.lineValue">{{ cart.totals.shipping.formatted }}</span>
+        </div>
+      </slot>
+
+      <slot name="tax" :tax="cart.totals.tax">
+        <div v-if="cart.totals.tax" :class="slotClasses.lineItem">
+          <span :class="slotClasses.lineLabel">Tax</span>
+          <span :class="slotClasses.lineValue">{{ cart.totals.tax.formatted }}</span>
+        </div>
+      </slot>
+
+      <slot name="discount" :discount="cart.totals.discount">
+        <div v-if="cart.totals.discount" :class="slotClasses.lineItem">
+          <span :class="slotClasses.lineLabel">Discount</span>
+          <span class="font-medium text-success">-{{ cart.totals.discount.formatted }}</span>
+        </div>
+      </slot>
+    </div>
+
+    <USeparator :class="slotClasses.separator" />
+
+    <!-- Total -->
+    <slot name="total" :total="cart.totals.total">
+      <div :class="slotClasses.total">
+        <span :class="slotClasses.totalLabel">Total</span>
+        <span :class="slotClasses.totalValue">{{ cart.totals.total.formatted }}</span>
+      </div>
+    </slot>
+
+    <!-- Actions -->
+    <slot v-if="showActions" name="actions">
+      <div :class="slotClasses.actions">
+        <UButton
+          :to="actionTo"
+          color="primary"
+          size="lg"
+          block
+        >
+          {{ actionLabel }}
+        </UButton>
+      </div>
+    </slot>
+  </div>
+</template>