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

package/src/components/Search.astro

@@ -1,59 +1,122 @@
 ---
-import Dialog from 'fulldev-ui/components/Dialog.astro'
+import { getCollection } from 'astro:content'
+import { getHref } from 'fulldev-ui/utils/getHref'
+import Button from './Button.astro'
+import Element from './Element.astro'
+import Heading from './Heading.astro'
+import Input from './Input.astro'
+import Paragraph from './Paragraph.astro'
 
-const { variant = 'secondary', ...rest } = Astro.props
+const pages = await getCollection('pages')
+const products = await getCollection('products')
+const categories = await getCollection('categories')
+const posts = await getCollection('posts')
+const docs = await getCollection('docs')
+const entries = [...pages, ...categories, ...products, ...posts, ...docs]
 ---
 
-<Dialog
-  class:list="search"
-  id="search"
+<script>
+  document.addEventListener('astro:page-load', () => {
+    const input = document.querySelector('.search-input')
+    const items = document.querySelectorAll('.search-item')
+
+    input?.addEventListener('input', (e) => {
+      if (!(e.target instanceof HTMLInputElement)) return
+      const value = e.target.value.toLowerCase()
+      items.forEach((item) => {
+        if (!(item instanceof HTMLElement)) return
+
+        const title =
+          item.querySelector('.heading')?.textContent?.toLowerCase() || ''
+        const description =
+          item.querySelector('.paragraph')?.textContent?.toLowerCase() || ''
+
+        const isVisible = title.includes(value) || description.includes(value)
+        item.classList.toggle('hide', !isVisible)
+      })
+    })
+  })
+</script>
+
+<Button
+  class:list="search-button"
+  variant="secondary"
+  size="sm"
   icon="search"
-  {variant}
-  {...rest}
+  onclick={`document.getElementById('search').showModal()`}
 />
 
-<style is:global >
-  :root {
-    --pagefind-ui-primary: var(--brand-11);
-    --pagefind-ui-text: var(--base-12);
-    --pagefind-ui-background: var(--base-2);
-    --pagefind-ui-border: var(--base-6);
-    --pagefind-ui-tag: var(--base-6);
-  }
+<dialog
+  class="search"
+  id="search"
+  onclick={`event.target === this && this.close()`}
+>
+  <Element class:list="search-container">
+    <Element class:list="search-content">
+      <Input
+        class:list="search-input"
+        icon="search"
+        placeholder="Search"
+      />
+      <Element class:list="search-list">
+        {
+          entries.map(({ collection, slug, data }) => (
+            <Element
+              as="a"
+              href={getHref(collection, slug)}
+              class="search-item hide"
+            >
+              <Heading
+                text={data.title}
+                level={6}
+              />
+              <Paragraph
+                set:text={'description' in data ? data.description : undefined}
+              />
+            </Element>
+          ))
+        }
+      </Element>
+    </Element>
+  </Element>
+</dialog>
 
-  @media (max-width: 1023.999px) {
-    .search,
-    #search,
-    #search-button {
-      display: none !important;
-    }
-  }
+<style is:global>
+  @layer fulldev {
+    .search {
+      @apply container h-full w-full max-w-screen-md rounded-lg !border-none bg-transparent py-24 outline-none backdrop:bg-black/50;
 
-  .dialog div {
-    width: 100%;
-  }
+      &:is(.dark &) {
+        color-scheme: dark;
+      }
 
-  .pagefind-ui__search-input {
-    outline: none !important;
-    border: 1px solid var(--base-7);
-    color: var(--base-11);
+      .search-container {
+        @apply w-full overflow-hidden rounded-lg border bg-background shadow-md;
+      }
 
-    &::placeholder {
-      color: var(--base-11);
-    }
+      .search-content {
+        @apply max-h-[400px] w-full overflow-y-auto;
+      }
 
-    &:hover {
-      outline: none;
-    }
+      .input {
+        @apply m-5;
+      }
 
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 2px var(--base-8);
-      border-color: var(--base-8);
-    }
-  }
+      .search-list {
+        @apply flex h-full w-full shrink grow-0 flex-col;
+      }
+
+      .search-item {
+        @apply border-t p-5 transition-colors hover:bg-accent;
 
-  .pagefind-ui__search-clear {
-    background: transparent !important;
+        &.hide {
+          @apply hidden;
+        }
+      }
+
+      .paragraph {
+        @apply mt-2 truncate text-sm text-muted-foreground;
+      }
+    }
   }
 </style>

package/src/components/Section.astro

@@ -1,86 +1,15 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import type Card from 'fulldev-ui/components/Card.astro'
-import Cards from 'fulldev-ui/components/Cards.astro'
-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 Badge from './Badge.astro'
-import Lead from './Lead.astro'
-import List from './List.astro'
-import Paragraph from './Paragraph.astro'
-import Price from './Price.astro'
-import Rating from './Rating.astro'
-import Tagline from './Tagline.astro'
+import { getEntries } from 'astro:content'
 
-interface Props extends HTMLAttributes<'section'> {
-  as?: HTMLTag
-  size?: 'sm' | 'md' | 'lg' | undefined
-  image?: ComponentProps<typeof Image>
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  button?: ComponentProps<typeof Button> | undefined
-  variant?: ComponentProps<typeof Button>['variant']
-  cards?: ComponentProps<typeof Cards>['cards']
-  panel?: ComponentProps<typeof Card>['panel']
+interface Props {
   component?: string
-  heading?: any
-  background?: any
-  lead?: any
-  rating?: any
-  tagline?: any
-  badge?: any
-  level?: any
-  paragraph?: any
-  dark?: boolean
-  list?: any
-  price?: any
-  center?: boolean
-  inset?: boolean
-  reverse?: boolean
-  frame?: 'fill' | 'panel' | 'viewport' | undefined
-  position?: 'contain' | 'inset' | 'background' | undefined
-  structure?:
-    | 'left'
-    | 'center'
-    | 'spread'
-    | 'split'
-    | 'grid'
-    | 'masonry'
-    | 'carousel'
-    | 'stack'
-    | undefined
+  [key: string]: any
 }
 
-const { component, ...props } = Astro.props
+let { component, products, categories, ...rest } = Astro.props
 
-const {
-  as = 'section',
-  size = 'md',
-  variant = 'secondary',
-  structure = 'left',
-  inset = false,
-  panel = false,
-  reverse = false,
-  dark = false,
-  frame = 'viewport',
-  position = 'background',
-  level = 2,
-  rating,
-  tagline,
-  badge,
-  heading,
-  lead,
-  paragraph,
-  list,
-  price,
-  buttons,
-  image,
-  background,
-  cards,
-  ...rest
-} = props
+products = products && (await getEntries(products))
+categories = categories && (await getEntries(categories))
 
 const allComponents = {
   ...import.meta.glob('/src/**/*.astro'),
@@ -93,201 +22,14 @@ const componentPath = Object.keys(allComponents).find(
 
 const Component =
   componentPath && (await (allComponents[componentPath] as any)()).default
-
-const hasCards = cards && cards.length > 0
 ---
 
 {
-  Component ? (
-    <Component {...props} />
-  ) : (
-    <Element
-      class:list="section"
-      panel={hasCards ? undefined : panel}
-      {as}
-      {size}
-      {structure}
-      {inset}
-      {reverse}
-      {dark}
-      {position}
-      {frame}
+  Component && (
+    <Component
+      {products}
+      {categories}
       {...rest}
-    >
-      <Element class:list="section-container">
-        <Element class:list="section-segment">
-          <Element class:list="section-content">
-            <Rating
-              {size}
-              {...rating}
-            />
-            <Tagline
-              text={tagline}
-              {size}
-            />
-            <Badge
-              {size}
-              {...badge}
-            />
-            <Heading
-              text={heading}
-              {size}
-              {level}
-            />
-            <Lead
-              text={lead}
-              {size}
-            />
-            <Paragraph
-              text={paragraph}
-              {size}
-            />
-            <List
-              items={list}
-              {size}
-            />
-            <Price
-              value={price}
-              {size}
-            />
-            <slot name="content" />
-          </Element>
-          <Buttons
-            {size}
-            {variant}
-            {buttons}
-          />
-          <slot name="segment" />
-        </Element>
-        <Image {...image} />
-        <Cards
-          {size}
-          {level}
-          {cards}
-        />
-        <slot />
-      </Element>
-    </Element>
+    />
   )
 }
-
-<style is:global>
-  @layer fulldev {
-    .section {
-      @apply relative flex w-full items-center pb-28 pt-14 first:pt-0;
-
-      .section-container {
-        @apply container z-10 w-full;
-      }
-
-      .section-segment {
-        @apply z-10 gap-8 py-16;
-      }
-
-      .section-content {
-        @apply max-w-screen-md gap-6;
-      }
-
-      &.frame-fill {
-        @apply pb-28 pt-14 first:pt-0;
-      }
-
-      &.frame-viewport {
-        @apply min-h-screen pb-28 pt-14;
-
-        .section-container {
-          @apply justify-center;
-        }
-      }
-
-      &.frame-panel {
-        @apply px-gutter first:pt-gutter;
-
-        .section-container {
-          @apply relative overflow-hidden rounded-lg border bg-card;
-        }
-      }
-
-      &.position-contain {
-        .image {
-          @apply h-auto w-full object-contain;
-        }
-      }
-
-      &.position-background {
-        .image {
-          @apply absolute inset-0 h-full max-h-none w-full max-w-none object-cover opacity-30;
-        }
-      }
-
-      &.position-inset {
-        .section-container {
-          @apply px-0;
-        }
-
-        .section-segment {
-          @apply px-gutter;
-        }
-
-        .image {
-          @apply h-auto w-full object-cover;
-        }
-      }
-
-      &.dark {
-        @apply bg-background;
-      }
-
-      &.structure-left {
-        .section-container,
-        .section-segment,
-        .section-content {
-          @apply flex flex-col items-start;
-        }
-      }
-
-      &.structure-center {
-        .section-container,
-        .section-segment,
-        .section-content {
-          @apply flex flex-col items-center text-center;
-        }
-      }
-
-      &.structure-split {
-        .section-container {
-          @apply grid auto-cols-fr gap-x-14 lg:grid-flow-col lg:items-center;
-        }
-
-        .section-segment,
-        .section-content {
-          @apply flex flex-col items-start;
-        }
-      }
-
-      &.structure-spread {
-        .section-container {
-          @apply flex flex-col;
-        }
-
-        .section-segment {
-          @apply flex w-full flex-row flex-wrap items-end justify-between;
-        }
-      }
-
-      &.reverse {
-        &:not(.structure-split) {
-          .section-segment {
-            @apply order-last;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .section-segment {
-            @apply order-last;
-          }
-        }
-      }
-    }
-  }
-</style>

package/src/components/Select.astro

@@ -25,6 +25,7 @@ const {
 ---
 
 <Element
+  if={options}
   class:list="select"
   as="label"
   for={id}

package/src/components/_CartList backup.astro

@@ -0,0 +1,125 @@
+<!-- ---
+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> -->