fulldev-ui 0.5.0-beta.8 → 0.6.0-beta-4

package/src/components/DrawerOld.astro

@@ -0,0 +1,143 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import links from 'fulldev-ui/schemas/components/links'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Buttons from './Buttons.astro'
+import Heading from './Heading.astro'
+import Links from './Links.astro'
+
+interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+  variant?: ComponentProps<typeof Button>['variant']
+  text?: ComponentProps<typeof Button>['text']
+  icon?: ComponentProps<typeof Button>['icon']
+  heading?: ComponentProps<typeof Heading>['text']
+  logo?: ComponentProps<typeof Logo> | undefined
+  company?: ComponentProps<typeof Logo>['company']
+  menu?: ComponentProps<typeof Menu>['groups']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  links?: ComponentProps<typeof Links>['links']
+  size?: 'sm' | 'md' | 'lg' | undefined
+}
+
+const {
+  id = 'drawer',
+  size = 'sm',
+  icon = 'menu-2',
+  color,
+  variant,
+  text,
+  buttons,
+  links,
+  heading,
+  logo,
+  company,
+  menu,
+  if: ifProp,
+  ...rest
+} = Astro.props
+---
+
+<Button
+  variant="secondary"
+  class:list={['drawer-button', `${id}-button`]}
+  onclick={`document.getElementById('${id}').showModal()`}
+  {variant}
+  {text}
+  {icon}
+  {color}
+  {size}
+/>
+
+<Element
+  onclick={`event.target === this && this.close()`}
+  class:list="drawer"
+  as="dialog"
+  {id}
+  {text}
+  {size}
+  {icon}
+  {...rest}
+>
+  <Element class:list="drawer-body">
+    <button autofocus></button>
+    <Element
+      class:list="drawer-header"
+      as="header"
+    >
+      <Logo
+        {size}
+        {company}
+        {...logo}
+      />
+      <Heading
+        level={4}
+        text={heading}
+      />
+      <Button
+        variant="secondary"
+        icon="x"
+        onclick={`document.getElementById('${id}').close()`}
+      />
+      <slot name="header" />
+    </Element>
+    <Element class:list="drawer-content">
+      <Links
+        direction="column"
+        {links}
+      />
+      <Menu groups={menu} />
+      <slot />
+    </Element>
+    <Element
+      class:list="drawer-footer"
+      as="footer"
+    >
+      <slot name="footer" />
+    </Element>
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    body:has(dialog[open]) {
+      @apply max-md:overflow-hidden;
+    }
+
+    .drawer {
+      @apply inset-0 m-0 h-full max-h-full w-full max-w-full p-0 md:max-w-md;
+
+      &::backdrop {
+        @apply cursor-pointer bg-background/50;
+      }
+
+      .drawer-body {
+        @apply flex h-full shrink flex-col overflow-auto bg-background;
+
+        .drawer-content {
+          @apply flex flex-col gap-6 px-gutter py-12;
+        }
+
+        .drawer-header,
+        .drawer-footer {
+          @apply sticky z-10 flex shrink-0 bg-background;
+        }
+
+        .drawer-header {
+          @apply top-0 h-14 items-center px-gutter;
+
+          .button {
+            @apply ml-auto;
+          }
+        }
+
+        .drawer-footer {
+          @apply bottom-0 mt-auto flex-col px-gutter py-8;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Element.astro

@@ -15,6 +15,13 @@ const {
   reverse,
   open,
   lead,
+  current,
+  direction,
+  center,
+  frame,
+  dark,
+  muted,
+  inset,
   ...rest
 } = Astro.props
 
@@ -26,22 +33,25 @@ const render = 'if' in rest ? rest.if : slot?.trim().length > 0
   render && (
     <As
       class:list={[
-        'root',
         {
           contrast,
           panel,
           open,
           reverse,
-          lead,
+          current,
+          center,
+          inset,
+          dark,
+          muted,
           [`size-${size}`]: size,
           [`color-${color}`]: color,
-          [`theme-${theme}`]: theme,
           [`level-${level}`]: level,
+          [`frame-${frame}`]: frame,
           [`variant-${variant}`]: variant,
           [`structure-${structure}`]: structure,
           [`align-${align}`]: align,
           [`position-${position}`]: position,
-          [`position-${position}`]: position,
+          [`direction-${direction}`]: direction,
         },
       ]}
       {...rest}
@@ -51,8 +61,8 @@ const render = 'if' in rest ? rest.if : slot?.trim().length > 0
   )
 }
 
-<style is:global lang="scss">
-  @import '@unocss/reset/tailwind.css' layer(fulldev);
-  @import 'fulldev-ui/css/color.css';
-  @import 'fulldev-ui/css/size.css';
+<style is:global>
+  @import 'tailwindcss/base' layer(fulldev);
+  @import 'fulldev-ui/css/theme' layer(fulldev);
+  @import 'tailwindcss/components';
 </style>

package/src/components/Form.astro

@@ -8,12 +8,16 @@ import Textarea from 'fulldev-ui/components/Textarea.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'form'> {
-  fields: (
-    | ComponentProps<typeof Input>
-    | ComponentProps<typeof Select>
-    | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
-  )[]
   submit?: ComponentProps<typeof Button>['text']
+  fields?:
+    | (
+        | ComponentProps<typeof Input>
+        | ComponentProps<typeof Select>
+        | (ComponentProps<typeof Textarea> & {
+            type?: 'textarea' | undefined
+          })
+      )[]
+    | undefined
 }
 
 const { fields, submit, ...rest } = Astro.props
@@ -25,25 +29,24 @@ const { fields, submit, ...rest } = Astro.props
   {...rest}
 >
   {
-    fields.map((field) => {
+    fields?.map((field) => {
       if ('options' in field) return <Select {...field} />
       if ('type' in field && field.type === 'textarea')
         return <Textarea {...field} />
       return <Input {...(field as any)} />
     })
   }
+  <slot />
   <Button
     type="submit"
     text={submit}
   />
 </Element>
 
-<style is:global lang="scss">
-  .form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-    width: 100%;
-    max-width: calc(var(--space-4) * 44);
+<style is:global>
+  @layer fulldev {
+    .form {
+      @apply flex w-full max-w-screen-md flex-col gap-4;
+    }
   }
 </style>

package/src/components/Gallery.astro

@@ -0,0 +1,174 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+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'])[]
+    | undefined
+}
+
+const { images } = Astro.props
+
+const hasMultiple = images?.length > 1
+const hasMany = images?.length > 5
+---
+
+<script>
+  function scrollLeft(carousel: HTMLElement) {
+    carousel.scrollLeft -= carousel.clientWidth
+  }
+
+  function scrollRight(carousel: HTMLElement) {
+    carousel.scrollLeft += carousel.clientWidth
+  }
+
+  function scrollTo(carousel: HTMLElement, index: number) {
+    carousel.scrollLeft = index * carousel.clientWidth
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    const galleries = document.querySelectorAll('.gallery')
+    galleries.forEach((gallery) => {
+      // Apply left and right event listeners to large and small carousels
+      const containers = gallery.querySelectorAll(
+        '.gallery-small, .gallery-large'
+      )
+      containers?.forEach((element) => {
+        const left = element?.querySelector('.gallery-left')
+        const right = element?.querySelector('.gallery-right')
+        const carousel = element?.querySelector(
+          '.gallery-carousel'
+        ) as HTMLElement
+
+        left?.addEventListener('click', () => scrollLeft(carousel))
+        right?.addEventListener('click', () => scrollRight(carousel))
+      })
+
+      // Apply item click event listener to small carousel items
+      const items = gallery.querySelectorAll('.gallery-small .gallery-item')
+      const largeCarousel = gallery.querySelector(
+        '.gallery-large .gallery-carousel'
+      ) as HTMLElement
+      items?.forEach((item, i) => {
+        item.addEventListener('click', () => {
+          scrollTo(largeCarousel, i)
+        })
+      })
+    })
+  })
+</script>
+
+<Element class:list="gallery">
+  <Element class:list="gallery-large">
+    <Button
+      if={hasMultiple}
+      class="gallery-left"
+      icon="chevron-left"
+      variant="secondary"
+      size="sm"
+    />
+    <Element class:list="gallery-carousel">
+      {
+        images?.map((image: any) => (
+          <Element class:list="gallery-item">
+            <Image {...(typeof image === 'string' ? { src: image } : image)} />
+          </Element>
+        ))
+      }
+    </Element>
+    <Button
+      if={hasMultiple}
+      class="gallery-right"
+      icon="chevron-right"
+      variant="secondary"
+      size="sm"
+    />
+  </Element>
+  <Element
+    if={hasMultiple}
+    class:list="gallery-small"
+  >
+    <Button
+      if={hasMany}
+      class="gallery-left"
+      icon="chevron-left"
+      variant="secondary"
+      size="sm"
+    />
+    <Element class:list="gallery-carousel">
+      {
+        images?.map((image: any) => (
+          <Element
+            as="button"
+            class:list="gallery-item"
+          >
+            <Image {...(typeof image === 'string' ? { src: image } : image)} />
+          </Element>
+        ))
+      }
+    </Element>
+    <Button
+      if={hasMany}
+      class="gallery-right"
+      icon="chevron-right"
+      variant="ghost"
+      size="sm"
+    />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .gallery {
+      @apply relative flex flex-col gap-2;
+
+      .gallery-large,
+      .gallery-small {
+        @apply relative flex items-center;
+      }
+
+      .image {
+        @apply rounded;
+      }
+
+      .button {
+        @apply absolute z-10 bg-secondary-hover opacity-50 hover:opacity-100;
+      }
+
+      .gallery-left {
+        @apply left-2;
+      }
+
+      .gallery-right {
+        @apply right-2;
+      }
+
+      .gallery-carousel {
+        @apply inline-flex w-full snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-none;
+      }
+
+      .gallery-large {
+        .gallery-item {
+          @apply flex w-full min-w-full snap-start;
+        }
+
+        .image {
+          @apply h-full max-h-[768px] w-full object-contain;
+        }
+      }
+
+      .gallery-small {
+        .gallery-carousel {
+          @apply gap-2;
+        }
+
+        .gallery-item {
+          @apply min-w-[calc(20%-0.4rem)] snap-start overflow-hidden transition hover:opacity-80;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Head.astro

@@ -1,18 +1,13 @@
 ---
 import { AstroSeo } from '@astrolib/seo'
-import type { ComponentProps } from 'astro/types'
-import { ViewTransitions } from 'astro:transitions'
-import type Layout from 'fulldev-ui/layouts/Layout.astro'
+import type { HTMLAttributes } from 'astro/types'
+import type { HeadSchema } from 'fulldev-ui/schemas/components/head'
 
-type Props = ComponentProps<typeof Layout>
+type Props = HTMLAttributes<'head'> & HeadSchema & {}
 
-const { title, description, image, seo, code, render } = Astro.props
+const { theme, title, description, image, code } = Astro.props
 
-const renderTitle = render && (await render()).headings[0]?.text
-const mergedTitle = seo?.title || title || renderTitle
-const mergedDescription = seo?.description || description
-const mergedImage =
-  seo?.image || image ? Astro.url.origin + (seo?.image || image) : undefined
+const src = image?.src && Astro.url.origin + image.src
 ---
 
 <head>
@@ -25,22 +20,64 @@ const mergedImage =
     name="generator"
     content={Astro.generator}
   />
-  <ViewTransitions />
+  <link
+    rel="canonical"
+    href={Astro.url.href.endsWith('/') ? Astro.url.href : Astro.url.href + '/'}
+  />
   <AstroSeo
-    title={mergedTitle ?? ''}
-    description={mergedDescription ?? ''}
+    title={title ?? ''}
+    description={description ?? ''}
     openGraph={{
-      title: mergedTitle,
-      description: mergedDescription,
-      images: mergedImage
-        ? [
-            {
-              url: mergedImage,
-              alt: mergedTitle,
-            },
-          ]
-        : undefined,
-    } as any}
+      title: title ?? '',
+      description: description ?? '',
+      images: [
+        {
+          url: src ?? '',
+          alt: title ?? '',
+        },
+      ],
+    }}
   />
-  <Fragment set:html={code?.head} />
+
+  <Fragment set:html={code} />
+
+  <script is:inline define:vars={{ theme }}>
+    function setTheme(document) {
+      const value = localStorage.getItem('theme') || theme
+
+      const isDark =
+        value === 'dark' ||
+        (value === 'system' &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+      document.documentElement.classList.toggle('dark', isDark)
+
+      document.querySelectorAll('.themer').forEach((themer) => {
+        themer?.querySelectorAll('option').forEach((option) => {
+          option.selected = option.value === value
+        })
+      })
+    }
+
+    function setOption(document) {
+      const value = localStorage.getItem('theme') || theme
+
+      document.querySelectorAll('.themer').forEach((themer) => {
+        themer?.querySelectorAll('option').forEach((option) => {
+          option.selected = option.value === value
+        })
+      })
+    }
+
+    setTheme(document)
+    setOption(document)
+
+    document.addEventListener('astro:before-swap', (event) => {
+      setTheme(event.newDocument)
+    })
+
+    document.addEventListener('astro:page-load', (event) => {
+      setOption(document)
+    })
+  </script>
 </head>

package/src/components/Header.astro

@@ -1,136 +1,31 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Cart from './Cart.astro'
-import Drawer from './Drawer.astro'
-import type Menu from './Menu.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'header'> {
-  logo?: ComponentProps<typeof Logo>
-  company?: ComponentProps<typeof Logo>['company']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  menu?: ComponentProps<typeof Menu>['groups']
-  panel?: boolean | undefined
-  search?: boolean | undefined
-  open?: boolean | undefined
-  themeselect?: boolean | undefined
-  cart?: string | undefined
+interface Props extends HTMLAttributes<'header'> {
+  as?: HTMLTag
 }
 
-const {
-  size = 'sm',
-  open = true,
-  logo,
-  company,
-  buttons,
-  search,
-  panel,
-  menu,
-  themeselect,
-  cart,
-  ...rest
-} = Astro.props
+const { as = 'header', ...rest } = Astro.props
 ---
 
 <Element
-  class:list={['header']}
-  as="header"
-  {panel}
-  {size}
-  {open}
+  class:list="header"
+  {as}
   {...rest}
 >
-  <Logo
-    {company}
-    {...typeof logo === 'string' ? { src: logo } : logo}
-  />
-  <Buttons
-    {buttons}
-    variant="link"
-  />
-  {themeselect && <ThemeSelect />}
-  <Drawer
-    icon="menu-2"
-    id="menu"
-    {logo}
-    {company}
-    {buttons}
-    {menu}
-  />
-  <Cart
-    if={cart}
-    heading={cart}
-  />
+  <slot />
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .header {
-      display: flex;
-      position: sticky;
-      top: 0;
-      left: 0;
-      justify-content: flex-end;
-      align-items: center;
-      gap: var(--space-4);
-      z-index: 20;
-      border-bottom-width: 1px;
-      border-style: solid;
-      border-color: var(--base-a6);
-      background-color: var(--base-2);
-      padding: 0 var(--gutter);
-      width: 100%;
+      @apply relative flex w-full items-center bg-background;
       height: var(--header-height);
-      overflow: hidden;
 
       &,
       & ~ * {
-        --header-height: 56px;
-      }
-
-      &.panel {
-        margin: var(--space-4) var(--gutter);
-        border-width: 1px solid;
-        border-radius: var(--radius-2);
-        padding: var(--sapce-4) min(var(--gutter), var(--space-4));
-        width: auto;
-      }
-
-      .logo {
-        margin-right: auto;
-      }
-
-      @media (min-width: 1024px) {
-        &:not(.open) {
-          display: none;
-
-          & ~ * {
-            --header-height: 0px;
-          }
-        }
-      }
-
-      .buttons {
-        display: none;
-
-        @media (min-width: 1024px) {
-          display: flex;
-          gap: var(--space-2);
-
-          .button.variant-link + .button {
-            margin-left: var(--space-3);
-          }
-        }
-      }
-
-      .menu-button {
-        @media (min-width: 1024px) {
-          display: none;
-        }
+        --header-height: 3.5rem;
       }
     }
   }