fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.2

package/src/components/CartList.astro

@@ -1,89 +1,89 @@
 ---
 import Element from 'fulldev-ui/components/Element.astro'
+import { scope } from 'simple:scope'
 import Button from './Button.astro'
 import Heading from './Heading.astro'
-import Text from './Text.astro'
+import Input from './Input.astro'
+import Price from './Price.astro'
 
 const { ...rest } = Astro.props
 ---
 
-<Element
-  if
-  class:list="cart-list"
-  {...rest}
-/>
-
-<template>
-  <Element class="cart-list-card">
-    <img class="cart-list-image image" />
-    <Element class="column">
-      <Heading
-        if
-        level={4}
-        class="heading"
-      />
-      <Element class="row">
-        <Text
-          if
-          class="cart-list-price"
-        />
-        <Button
-          class:list="cart-list-remove"
-          variant="ghost"
-          icon="trash"
-          type="button"
-        />
+<RootElement>
+  <Element
+    data-target={scope('list')}
+    class:list={'cart-list'}
+    if={true}
+    {...rest}
+  />
+
+  <template data-target={scope('template')}>
+    <Element class="cart-list-card">
+      <img class="image" />
+      <Element class="cart-list-card-segment">
+        <Element class="cart-list-card-content">
+          <Heading
+            if
+            level={6}
+          />
+          <Price if />
+        </Element>
+        <Element class="cart-list-card-actions">
+          <Input
+            type="number"
+            name="quantity"
+            value={1}
+            min={0}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            icon="trash"
+            type="button"
+          />
+        </Element>
       </Element>
     </Element>
-  </Element>
-</template>
+  </template>
+</RootElement>
 
 <script>
-  import { $cart } from 'fulldev-ui/stores/cart.ts'
+  import { $cart, removeItem, updateQuantity } from 'fulldev-ui/stores/cart.ts'
   import { formatPrice } from 'fulldev-ui/utils/cart'
 
-  function setCards(items: any) {
-    const template = document.querySelector('template')
-    const container = document.querySelector('.cart-list')
-
-    if (!container || !template) return
-
-    container.innerHTML = ''
-
-    items.forEach((item: any, index: number) => {
-      const clone = template?.content.cloneNode(true)
-      if (!(clone instanceof DocumentFragment)) return
-      const card = clone.querySelector('.cart-list-card')
-      if (!card) return
-
-      const img = card.querySelector('img')
-      if (img) img.src = item.image
-
-      const h4 = card.querySelector('h4')
-      if (h4) h4.textContent = item.name
-
-      const p = card.querySelector('p')
-      if (p) p.textContent = formatPrice(item.price)
-
-      const button = card.querySelector('button')
-      if (button) {
-        button.addEventListener('click', () => {
-          const currentCart = $cart.get()
-          const newCart = [...currentCart]
-          newCart.splice(index, 1)
-          $cart.set(newCart)
+  RootElement.ready(($) => {
+    $cart.subscribe((items) => {
+      const list = $('list')
+      const template = $('template') as HTMLTemplateElement
+
+      // list.innerHTML = ''
+      items.forEach((item) => {
+        const clone = template?.content.cloneNode(true) as HTMLElement
+        const clonedCard = clone.querySelector('.cart-list-card') as HTMLElement
+        const existingCard = list.querySelector(`[data-slug="${item.slug}"]`)
+        const card = existingCard || (clonedCard as HTMLElement)
+        const heading = card.querySelector('.heading') as HTMLElement
+        const price = card.querySelector('.price') as HTMLElement
+        const image = card.querySelector('.image') as HTMLImageElement
+        const remove = card.querySelector('.button') as HTMLButtonElement
+        const quantity = card.querySelector('.input') as HTMLInputElement
+
+        card.dataset.slug = item.slug
+        heading.textContent = item.title
+        price.textContent = formatPrice(item.price)
+        image.src = item.image
+
+        remove.addEventListener('click', () => removeItem(item.slug))
+
+        quantity.addEventListener('change', (e) => {
+          console.log('blur')
+          const target = e.target as HTMLInputElement
+          const value = Number(target.value)
+          updateQuantity(item.slug, value)
         })
-      }
-
-      container.appendChild(clone)
-    })
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    setCards($cart.get())
 
-    $cart.subscribe((items: any) => {
-      setCards(items)
+        $('list').appendChild(clone)
+      })
     })
   })
 </script>
@@ -99,18 +99,23 @@ const { ...rest } = Astro.props
         &:not(:first-child) {
           @apply mt-5 border-t pt-5;
         }
+      }
 
-        .image {
-          @apply block h-auto w-24;
-        }
+      .image {
+        @apply block h-auto w-24;
+      }
 
-        .column {
-          @apply flex h-full w-full flex-col justify-between gap-3;
-        }
+      .cart-list-card-segment {
+        @apply flex h-full w-full flex-col justify-between gap-4;
+      }
 
-        .row {
-          @apply flex w-full flex-row justify-between;
-        }
+      .cart-list-card-content,
+      .cart-list-card-actions {
+        @apply flex justify-between gap-2;
+      }
+
+      .input {
+        @apply w-16;
       }
     }
   }

package/src/components/CartList.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { cart } from 'fulldev-ui/stores/cart.svelte.ts'
+  import { formatPrice } from 'fulldev-ui/utils/cart'
+  import CartQuantity from './CartQuantity.svelte'
+
+  function removeItem(index: number) {
+    cart.update((currentCart) => {
+      currentCart.splice(index, 1)
+      return [...currentCart]
+    })
+  }
+</script>
+
+<div class="cart-list">
+  {#each $cart as item, index}
+    <div
+      class="cart-list-card"
+      data-slug={item.slug}
+    >
+      <img
+        class="image"
+        src={item.image}
+        alt={item.title}
+      />
+      <div class="cart-list-card-segment">
+        <div class="cart-list-card-content">
+          <h3 class="heading">{item.title}</h3>
+          {#if item.price}
+            <div class="price">{formatPrice(item.price)}</div>
+          {/if}
+        </div>
+        <div class="cart-list-card-actions">
+          <CartQuantity bind:value={item.quantity} />
+          <button
+            class="button variant-outline size-sm"
+            type="button"
+            aria-label="trash"
+            on:click={() => removeItem(index)}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="icon size-md"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
+              ></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style lang="postcss">
+  @layer fulldev {
+    .cart-list {
+      @apply flex flex-col text-foreground;
+
+      .cart-list-card {
+        @apply flex w-full gap-5;
+
+        &:not(:first-child) {
+          @apply mt-5 border-t pt-5;
+        }
+      }
+
+      .image {
+        @apply block h-auto w-24;
+      }
+
+      .cart-list-card-segment {
+        @apply flex h-full w-full flex-col justify-between gap-4;
+      }
+
+      .cart-list-card-content,
+      .cart-list-card-actions {
+        @apply flex justify-between gap-2;
+      }
+    }
+  }
+</style>

package/src/components/CartQuantity.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { tick } from 'svelte'
+
+  interface Props {
+    value: number
+    size?: 'sm' | 'md' | 'lg'
+    change?: (quantity: number) => void
+  }
+
+  let { value = $bindable(), size = 'md', change }: Props = $props()
+  let inputElement: HTMLInputElement | null = $state(null)
+
+  let quantity = $state(value)
+
+  async function handleChange() {
+    value = quantity
+    if (change) change(value)
+    if (value === 11) {
+      await tick()
+      inputElement?.focus()
+    }
+  }
+</script>
+
+<label
+  class="quantity input select size-{size}"
+  for="quantity"
+>
+  {#if value > 10}
+    <input
+      bind:this={inputElement}
+      bind:value={quantity}
+      class="input-input"
+      name="quantity"
+      type="number"
+      min={1}
+      onchange={handleChange}
+    />
+  {:else}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      class="icon size-{size}"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="m6 9l6 6l6-6"
+      ></path>
+    </svg>
+    <select
+      class="select-select"
+      bind:value={quantity}
+      onchange={handleChange}
+    >
+      {#each Array(10) as _, i}
+        <option
+          value={i + 1}
+          selected={value === i + 1}
+        >
+          {i + 1}
+        </option>
+      {/each}
+      <option
+        value={11}
+        selected={value > 10}
+      >
+        Meer
+      </option>
+    </select>
+  {/if}
+</label>
+
+<style lang="postcss">
+  .quantity {
+    @apply w-20;
+  }
+</style>

package/src/components/CartSummary.astro

@@ -1,7 +1,8 @@
 ---
-import Button from './Button.astro'
+import { STRIPE_RESTRICTED_KEY, URL } from 'astro:env/client'
+import CartCheckout from './CartCheckout.svelte'
+import CartTotal from './CartTotal.svelte'
 import Element from './Element.astro'
-import Price from './Price.astro'
 import Text from './Text.astro'
 
 interface Props {}
@@ -22,16 +23,16 @@ const { ...rest } = Astro.props
       text="Totaal"
       contrast
     />
-    <Price value={10} />
+    <CartTotal client:load />
   </div>
   <Text
     class:list="shipping"
     text="Verzendkosten worden berekend bij het afrekenen."
   />
-  <Button
-    class:list="checkout-button"
-    variant="primary"
-    text="Afrekenen"
+  <CartCheckout
+    {STRIPE_RESTRICTED_KEY}
+    {URL}
+    client:load
   />
 </Element>
 
@@ -55,90 +56,3 @@ const { ...rest } = Astro.props
     }
   }
 </style>
-
-<script>
-  import { STRIPE_RESTRICTED_KEY, URL } from 'astro:env/client'
-  import { $cart } from 'fulldev-ui/stores/cart.ts'
-  import { formatPrice } from 'fulldev-ui/utils/cart'
-  import Stripe from 'stripe'
-
-  function setPrice(items: any) {
-    const price = document.querySelector('.cart-summary .price')
-    console.log('settings price', price)
-    if (price)
-      price.textContent = formatPrice(
-        items.reduce(
-          (acc: number, item: { price: number }) => acc + item.price,
-          0
-        )
-      )
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    if (!STRIPE_RESTRICTED_KEY) return
-    const stripe = new Stripe(STRIPE_RESTRICTED_KEY)
-    setPrice($cart.get())
-
-    $cart.subscribe((items: any) => {
-      setPrice(items)
-    })
-
-    const button = document.querySelector('.cart-summary .checkout-button')
-
-    button?.addEventListener('click', async () => {
-      const items = $cart.get()
-
-      const checkoutConfig = {
-        success_url: `${URL}/checkout`,
-        mode: 'payment',
-        customer_creation: 'always',
-        shipping_address_collection: {
-          allowed_countries: ['NL'],
-        },
-        phone_number_collection: {
-          enabled: true,
-        },
-      }
-
-      try {
-        const lineItems = items.map((item: any) => ({
-          price_data: {
-            currency: 'eur',
-            product: item.id,
-          },
-          quantity: 1,
-        }))
-
-        // @ts-ignore
-        const checkoutSession = await stripe.checkout.sessions.create({
-          line_items: lineItems,
-          ...checkoutConfig,
-        })
-
-        checkoutSession.url && window.location.replace(checkoutSession.url)
-      } catch (error) {
-        console.error(error)
-
-        const lineItems = items.map((item: any) => ({
-          quantity: 1,
-          price_data: {
-            currency: 'eur',
-            product_data: {
-              name: item.name,
-              images: [URL + item.image],
-            },
-            unit_amount: Math.round(item.price * 100),
-          },
-        }))
-
-        // @ts-ignore
-        const checkoutSession = await stripe.checkout.sessions.create({
-          line_items: lineItems,
-          ...checkoutConfig,
-        })
-
-        checkoutSession.url && window.location.replace(checkoutSession.url)
-      }
-    })
-  })
-</script>

package/src/components/CartTotal.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cart } from 'fulldev-ui/stores/cart.svelte.ts'
+  import { formatPrice } from 'fulldev-ui/utils/cart'
+
+  let total = $derived(
+    $cart.reduce(
+      (acc, item) => acc + (item.price || 0) * (item.quantity || 0),
+      0
+    )
+  )
+</script>
+
+<div>
+  {formatPrice(total)}
+</div>

package/src/components/Dialog.astro

@@ -20,6 +20,7 @@ const {
 ---
 
 <Button
+  size="sm"
   id={`${id}-button`}
   variant="secondary"
   onclick={`document.getElementById('${id}').showModal()`}

package/src/components/Drawer.astro

@@ -63,6 +63,7 @@ const {
   {...rest}
 >
   <Element class:list="drawer-body">
+    <button autofocus></button>
     <Element
       class:list="drawer-header"
       as="header"

package/src/components/Gallery.astro

@@ -5,7 +5,9 @@ import Element from 'fulldev-ui/components/Element.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 
 interface Props {
-  images: (ComponentProps<typeof Image> | ComponentProps<typeof Image>['src'])[]
+  images?:
+    | (ComponentProps<typeof Image> | ComponentProps<typeof Image>['src'])[]
+    | undefined
 }
 
 const { images } = Astro.props

package/src/components/Header.astro

@@ -10,6 +10,7 @@ import Menu from 'fulldev-ui/components/Menu.astro'
 import Socials from 'fulldev-ui/components/Socials.astro'
 import Themer from 'fulldev-ui/components/Themer.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Search from './Search.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'header'> {
   logo?: ComponentProps<typeof Logo>
@@ -71,6 +72,7 @@ const {
       {size}
       {buttons}
     >
+      <Search size="sm" />
       <Themer
         if={themer}
         {size}

package/src/components/Image.astro

@@ -5,9 +5,9 @@ import type { HTMLAttributes } from 'astro/types'
 import { Image as AstroImage } from 'astro:assets'
 import { getEntry } from 'astro:content'
 
-interface Props extends HTMLAttributes<'img'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
+interface Props extends GlobalProps, HTMLAttributes<'img'> {
   id?: any
+  size?: 'sm' | 'md' | 'lg' | undefined
   position?: 'background' | 'cover' | 'inset' | undefined
 }
 

package/src/components/Input.astro

@@ -16,6 +16,10 @@ const {
   name = label || placeholder,
   id = name,
   type = 'text',
+  min,
+  max,
+  value,
+  step,
   size = 'md',
   icon,
   ...rest
@@ -27,6 +31,7 @@ const {
   as="label"
   for={id}
   {size}
+  {...rest}
 >
   <Label
     for={name}
@@ -42,12 +47,23 @@ const {
     {name}
     {placeholder}
     {type}
-    {...rest}
+    {min}
+    {max}
+    {value}
+    {step}
   />
 </Element>
 
 <style is:global>
   @layer fulldev {
+    .input-input {
+      @apply flex w-full rounded-md border border-input bg-background text-sm text-foreground ring-offset-background;
+      @apply file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground;
+      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+      @apply disabled:pointer-events-none disabled:opacity-50;
+      @apply [&[readonly]]:pointer-events-none;
+    }
+
     .input {
       @apply relative flex flex-col gap-1.5;
 
@@ -55,14 +71,6 @@ const {
         @apply pointer-events-none absolute;
       }
 
-      .input-input {
-        @apply flex w-full rounded-md border border-input bg-background text-sm ring-offset-background;
-        @apply file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground;
-        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
-        @apply disabled:pointer-events-none disabled:opacity-50;
-        @apply [&[readonly]]:pointer-events-none;
-      }
-
       &.size-sm {
         @apply gap-1;
 

package/src/components/ProductCard.astro

@@ -0,0 +1,52 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Price from 'fulldev-ui/components/Price.astro'
+import type { ProductSchema } from 'fulldev-ui/schemas/productSchema'
+
+interface Props extends ProductSchema {
+  slug?: CollectionEntry<'products'>['slug']
+}
+
+const { slug, images, title, price, ...rest } = Astro.props
+---
+
+<Element
+  class:list="product-card"
+  as="a"
+  href={`/producten/${slug}/`}
+  {...rest}
+>
+  <Image {...images?.[0]} />
+  <Element class:list="product-card-content">
+    <Heading
+      as="h3"
+      level={5}
+      size={'sm'}
+      text={title}
+    />
+    <Price value={price} />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .product-card {
+      @apply relative flex flex-col gap-3;
+
+      &:hover > .image {
+        @apply opacity-75 transition-opacity;
+      }
+
+      .image {
+        @apply rounded-md border;
+      }
+
+      .product-card-content {
+        @apply flex h-full flex-col gap-2;
+      }
+    }
+  }
+</style>

package/src/components/Prose.astro

@@ -13,7 +13,7 @@ import type Sidebar from './Sidebar.astro'
 
 interface Props extends HTMLAttributes<'div'> {
   as?: HTMLTag | undefined
-  render: CollectionEntry<'pages'>['render']
+  render?: any
   sidebar?: ComponentProps<typeof Sidebar> | undefined
   slug?: CollectionEntry<'pages'>['slug'] | undefined
   toc?: boolean | ComponentProps<typeof Toc>['heading'] | undefined