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

package/src/components/CartList.astro

@@ -1,122 +0,0 @@
----
-import Element from 'fulldev-ui/components/Element.astro'
-import { scope } from 'simple:scope'
-import Button from './Button.astro'
-import Heading from './Heading.astro'
-import Input from './Input.astro'
-import Price from './Price.astro'
-
-const { ...rest } = Astro.props
----
-
-<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>
-  </template>
-</RootElement>
-
-<script>
-  import { $cart, removeItem, updateQuantity } from 'fulldev-ui/stores/cart.ts'
-  import { formatPrice } from 'fulldev-ui/utils/cart'
-
-  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)
-        })
-
-        $('list').appendChild(clone)
-      })
-    })
-  })
-</script>
-
-<style is:global>
-  @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;
-      }
-
-      .input {
-        @apply w-16;
-      }
-    }
-  }
-</style>

package/src/components/Lead.astro

@@ -1,46 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'p'> {
-  as?: HTMLTag
-  text?: string | undefined
-}
-
-const { as = 'p', text, ...rest } = Astro.props
----
-
-<Element
-  class:list="lead"
-  {as}
-  {...rest}
->
-  <slot />
-  <Fragment set:html={text} />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .lead,
-    .prose-content h1 + p {
-      @apply text-muted-foreground;
-
-      &.size-sm {
-        @apply text-sm;
-      }
-
-      &.size-md {
-        @apply text-base;
-      }
-
-      &.size-lg {
-        @apply text-lg;
-
-        &:is(h1 + p) {
-          @apply text-xl;
-        }
-      }
-    }
-  }
-</style>

package/src/components/ProductCard.astro

@@ -1,52 +0,0 @@
----
-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/Text.astro

@@ -1,43 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'p'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  color?: 'base' | 'brand' | undefined
-  theme?: 'light' | 'dark' | undefined
-  contrast?: boolean | undefined
-  lead?: boolean | undefined
-  text?: string | undefined
-  if?: any
-}
-
-const { color = 'base', text, ...rest } = Astro.props
----
-
-<Element
-  class:list="text"
-  as="p"
-  {color}
-  {...rest}
->
-  <slot />
-  <Fragment set:html={text} />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .text {
-      margin: 0;
-      max-width: calc(var(--space-4) * 44);
-      color: var(--color-11);
-      font-size: var(--text-3);
-      line-height: 1.625;
-
-      &.lead {
-        font-size: var(--text-4);
-        text-wrap: balance;
-      }
-    }
-  }
-</style>

package/src/components/Writeup.astro

@@ -1,108 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Badge from 'fulldev-ui/components/Badge.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import List from 'fulldev-ui/components/List.astro'
-import Price from 'fulldev-ui/components/Price.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Lead from './Lead.astro'
-import Paragraph from './Paragraph.astro'
-
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  level?: ComponentProps<typeof Heading>['level']
-  badge?: ComponentProps<typeof Badge> | undefined
-  tagline?: ComponentProps<typeof Tagline>['text']
-  heading?: ComponentProps<typeof Heading>['text']
-  lead?: ComponentProps<typeof Lead>['text']
-  paragraph?: ComponentProps<typeof Paragraph>['text']
-  text?: ComponentProps<typeof Text>['text']
-  list?: ComponentProps<typeof List>['items']
-  align?: 'start' | 'center' | 'end' | undefined
-  price?: ComponentProps<typeof Price>['value']
-  rating?:
-    | ComponentProps<typeof Rating>
-    | ComponentProps<typeof Rating>['value']
-}
-
-const {
-  level = 2,
-  rating,
-  badge,
-  tagline,
-  heading,
-  lead,
-  paragraph,
-  text,
-  list,
-  price,
-  size,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="writeup"
-  {size}
-  {...rest}
->
-  <slot>
-    <Rating
-      {size}
-      {...typeof rating === 'number' ? { value: rating } : rating}
-    />
-    <Tagline text={tagline} />
-    <Badge
-      {size}
-      {...badge}
-    />
-    <Heading
-      {size}
-      {level}
-      text={heading}
-    />
-    <Lead
-      {size}
-      text={lead}
-    />
-    <Paragraph
-      {size}
-      text={paragraph}
-    />
-    <List
-      items={list}
-      {size}
-    />
-    <Price value={price} />
-  </slot>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .writeup {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      align-items: inherit;
-      text-align: inherit;
-
-      &.align-start {
-        align-items: flex-start;
-        text-align: left;
-      }
-
-      &.align-center {
-        align-items: center;
-        text-align: center;
-      }
-
-      &.align-end {
-        align-items: flex-end;
-        text-align: right;
-      }
-    }
-  }
-</style>

package/src/components/_CartList backup.astro

@@ -1,125 +0,0 @@
-<!-- ---
-import Element from 'fulldev-ui/components/Element.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Button from './Button.astro'
-import Heading from './Heading.astro'
-import Input from './Input.astro'
-import Price from './Price.astro'
-
-const { ...rest } = Astro.props
----
-
-<Element
-  if={true}
-  class:list="cart-list"
-  {...rest}
-/>
-
-<template id="cart-list-template">
-  <Element class="cart-list-card">
-    <Image src="/placeholder-portrait.webp" />
-    <Element class="cart-list-card-segment">
-      <Element class="cart-list-card-content">
-        <Heading
-          level={6}
-          text="Product title"
-        />
-        <Price value={999} />
-      </Element>
-      <Element class="cart-list-card-actions">
-        <Input
-          type="number"
-          name="quantity"
-          value={1}
-          min={0}
-        />
-        <Button
-          variant="outline"
-          icon="trash"
-          type="button"
-        />
-      </Element>
-    </Element>
-  </Element>
-</template>
-
-<script>
-  import { $cart } 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 instanceof HTMLElement)) return
-    if (!(template instanceof HTMLTemplateElement)) 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 image = card.querySelector('img')
-      const heading = card.querySelector('.heading')
-      const price = card.querySelector('.price')
-      // const input = card.querySelector('.input-input')
-      const remove = card.querySelector('.button')
-
-      if (image) image.src = item.image
-      if (heading) heading.textContent = item.name
-      if (price) price.textContent = formatPrice(item.price)
-
-      remove?.addEventListener('click', () => {
-        const currentCart = $cart.get()
-        const newCart = [...currentCart]
-        newCart.splice(index, 1)
-        $cart.set(newCart)
-      })
-
-      container.appendChild(clone)
-    })
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    setCards($cart.get())
-
-    $cart.subscribe((items: any) => {
-      setCards(items)
-    })
-  })
-</script>
-
-<style is:global>
-  @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;
-      }
-
-      .input {
-        @apply w-16;
-      }
-    }
-  }
-</style> -->

package/src/components/_CartList copy.astro

@@ -1,213 +0,0 @@
-<!-- ---
-import Element from 'fulldev-ui/components/Element.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import { $cart } from 'fulldev-ui/stores/cart.ts'
-import { formatPrice } from 'fulldev-ui/utils/cart'
-import Button from './Button.astro'
-import Card from './Card.astro'
-import Heading from './Heading.astro'
-import Input from './Input.astro'
-import Price from './Price.astro'
-import Text from './Text.astro'
-
-const { ...rest } = Astro.props
----
-
-<Element
-  class:list="cart-list"
-  {...rest}
->
-  <template id="cart-card-template">
-    <Element class="cart-card">
-      <Image src="/placeholder-portrait.webp" />
-      <Element class="cart-card-segment">
-        <Element class="cart-card-content">
-          <Heading
-            level={6}
-            text="Product title"
-          />
-          <Price value={999} />
-        </Element>
-        <Element class="cart-card-actions">
-          <Input
-            type="number"
-            name="quantity"
-            value={1}
-            min={0}
-          />
-          <Button
-            variant="outline"
-            icon="trash"
-            type="button"
-          />
-        </Element>
-      </Element>
-    </Element>
-  </template>
-</Element>
-<Element
-  if
-  class:list="cart-list"
-  {...rest}
-/>
-
-<template>
-  <Card 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"
-        />
-      </Element>
-    </Element>
-  </Card>
-</template>
-
-<script>
-  import { $cart } 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-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)
-        })
-      }
-
-      container.appendChild(clone)
-    })
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    setCards($cart.get())
-
-    $cart.subscribe((items: any) => {
-      setCards(items)
-    })
-  })
-</script>
-
-<script>
-  function setCards(items: any) {
-    const template = document.querySelector('template')
-    const container = document.querySelector('.cart-list')
-    if (!(container instanceof HTMLElement)) return
-    if (!(template instanceof HTMLTemplateElement)) 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 image = card.querySelector('img')
-      const heading = card.querySelector('.heading')
-      const price = card.querySelector('.price')
-      // const input = card.querySelector('.input-input')
-      const remove = card.querySelector('.button')
-
-      if (image) image.src = item.image
-      if (heading) heading.textContent = item.name
-      if (price) price.textContent = formatPrice(item.price)
-
-      remove?.addEventListener('click', () => {
-        const currentCart = $cart.get()
-        const newCart = [...currentCart]
-        newCart.splice(index, 1)
-        $cart.set(newCart)
-      })
-
-      container.appendChild(clone)
-    })
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    setCards($cart.get())
-
-    $cart.subscribe((items: any) => {
-      setCards(items)
-    })
-  })
-</script>
-
-<style is:global>
-  @layer fulldev {
-    .cart-list {
-      @apply flex flex-col text-foreground;
-
-      .cart-card {
-        @apply flex w-full gap-5;
-
-        &:not(:first-child) {
-          @apply mt-5 border-t pt-5;
-        }
-
-        .image {
-          @apply block h-auto w-24;
-        }
-
-        .column {
-          @apply flex h-full w-full flex-col justify-between gap-3;
-        }
-
-        .row {
-          @apply flex w-full flex-row justify-between;
-        }
-      }
-
-      .cart-card-segment {
-        @apply flex h-full w-full flex-col justify-between gap-4;
-      }
-
-      .cart-card-content,
-      .cart-card-actions {
-        @apply flex justify-between gap-2;
-      }
-
-      .input {
-        @apply w-16;
-      }
-    }
-  }
-</style> -->-->