fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/components/Button.astro

@@ -1,94 +1,54 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-
-interface Props
-  extends HTMLAttributes<'button'>,
-    Omit<HTMLAttributes<'a'>, 'type'>,
-    HTMLAttributes<'label'> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-  text?: string | undefined
-  icon?: string | undefined
-  href?: string | undefined
+import type { ButtonVariants } from 'fulldev-ui/components/ui/button'
+import { buttonVariants } from 'fulldev-ui/components/ui/button'
+import Box from './Box.astro'
+
+interface Props extends HTMLAttributes<'button'>, Omit<HTMLAttributes<'a'>, 'type'>, ButtonVariants {
+  href?: string
+  text?: string
+  icon?: string
+  reverse?: boolean
 }
 
+const slot = await Astro.slots.render('default')
+const hasSlot = slot?.trim().length > 0
+
 const {
-  variant = 'primary',
-  size = 'md',
+  href,
   text,
+  size = !(hasSlot || text) ? 'icon' : undefined,
+  variant,
   icon,
-  href,
-  target = href?.startsWith('http') ? '_blank' : undefined,
+  reverse,
+  class: className,
   ...rest
 } = Astro.props
 ---
 
-<Element
-  class:list={['button']}
-  as={href ? 'a' : rest.for ? 'label' : 'button'}
-  {variant}
-  {size}
+<Box
+  class:list={['button', buttonVariants({ variant, size }), className]}
+  as={href ? 'a' : 'button'}
   {href}
-  {target}
   {...rest}
 >
-  <Element as="span">
-    <Fragment set:html={text} />
-    <slot />
-  </Element>
-  <Icon name={icon} />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .button {
-      @apply inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium leading-none ring-offset-background transition-colors;
-      @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;
-
-      &.size-sm {
-        @apply h-9 min-h-9 min-w-9 px-2;
-      }
-
-      &.size-md {
-        @apply h-10 min-h-10 min-w-10 px-4;
-      }
-
-      &.size-lg {
-        @apply h-11 min-h-11 min-w-11 px-5;
-      }
-
-      &.variant-primary {
-        @apply bg-primary text-primary-foreground hover:bg-primary-hover;
-      }
-
-      &.variant-secondary {
-        @apply bg-secondary text-secondary-foreground hover:bg-secondary-hover;
-      }
-
-      &.variant-outline {
-        @apply border border-input text-accent-foreground hover:bg-accent;
-      }
-
-      &.variant-ghost {
-        @apply text-accent-foreground hover:bg-accent;
-      }
-
-      .icon {
-        @apply first:last:absolute;
-      }
-
-      span {
-        @apply text-inherit;
-      }
-
-      &.reverse {
-        .icon {
-          @apply order-last;
-        }
-      }
-    }
+  {
+    !reverse && (
+      <Icon
+        class={!(hasSlot || text) ? 'absolute' : undefined}
+        name={icon}
+      />
+    )
+  }
+  <Fragment set:html={text} />
+  <Fragment set:html={slot} />
+  {
+    reverse && (
+      <Icon
+        class={!(hasSlot || text) ? 'absolute' : undefined}
+        name={icon}
+      />
+    )
   }
-</style>
+</Box>

package/src/components/Buttons.astro

@@ -1,28 +1,50 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
+import Box from './Box.astro'
 
-interface Props extends ComponentProps<typeof Button> {
-  button?: ComponentProps<typeof Button> | undefined
-  buttons?: ComponentProps<typeof Button>[] | undefined
+interface Props extends HTMLAttributes<'div'> {
+  justify?: 'start' | 'center' | 'end'
+  size?: ComponentProps<typeof Button>['size']
+  buttons?: ComponentProps<typeof Button>[]
+  reverse?: boolean
 }
 
-const { variant = 'primary', button, buttons, ...rest } = Astro.props
+const { size = 'default', justify = 'start', reverse = false, class: className, buttons, ...rest } = Astro.props
 
-const buttonVariant = (i: number) => {
-  if (variant === 'primary' && i === 0) return 'primary'
-  else if (variant === 'primary' && i === 1) return 'secondary'
-  else if (variant === 'secondary' && i === 0) return 'secondary'
-  else return 'ghost'
+const getButtonVariant = (index: number) => {
+  if (reverse) {
+    const length = buttons?.length || 0
+    if (index === length - 1) return 'default'
+    if (index === length - 2) return 'outline'
+    return 'ghost'
+  }
+  if (index === 0) return 'default'
+  if (index === 1) return 'outline'
+  return 'ghost'
 }
 ---
 
-{
-  [button, ...(buttons || [])].filter(Boolean).map((button, i) => (
-    <Button
-      variant={buttonVariant(i)}
-      {...rest}
-      {...button}
-    />
-  ))
-}
+<Box
+  class:list={[
+    'buttons justify-inherit inline-flex flex-wrap gap-2',
+    {
+      'justify-start': justify === 'start',
+      'justify-center': justify === 'center',
+      'justify-end': justify === 'end',
+    },
+    className,
+  ]}
+  {...rest}
+>
+  {
+    buttons?.map((button, i) => (
+      <Button
+        variant={getButtonVariant(i)}
+        {size}
+        {...button}
+      />
+    ))
+  }
+  <slot />
+</Box>

package/src/components/Card.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Box from 'fulldev-ui/components/Box.astro'
+
+interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {}
+
+const { href, class: className, ...rest } = Astro.props
+---
+
+<Box
+  class:list={[
+    'card color-card-foreground relative flex flex-col gap-3 overflow-hidden rounded-lg border bg-card p-6',
+    className,
+  ]}
+  as={href ? 'a' : 'div'}
+  {href}
+  {...rest}
+>
+  <slot />
+</Box>

package/src/components/Carousel.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from 'fulldev-ui/components/ui/carousel'
+import { parse } from 'node-html-parser'
+import { renderToString } from 'vue/server-renderer'
+
+interface Props {
+  itemClass?: string
+}
+
+const { itemClass } = defineProps<Props>()
+
+const slots = defineSlots<{
+  default(): any
+}>()
+
+const slot = slots['default']()[0]
+const html = await renderToString(slot)
+const root = parse(html)
+const container = root.querySelector('astro-static-slot') || root.querySelector('astro-slot') || root
+const children = container.children
+const htmlItems = children.map((child) => child.outerHTML)
+</script>
+
+<template>
+  <Carousel v-slot="{ canScrollNext }">
+    <CarouselContent>
+      <CarouselItem
+        v-for="(htmlItem, index) in htmlItems"
+        :key="index"
+        :class="itemClass"
+      >
+        <div v-html="htmlItem" />
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext v-if="canScrollNext" />
+  </Carousel>
+</template>

package/src/components/Chip.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Box from 'fulldev-ui/components/Box.astro'
+import { buttonVariants } from 'fulldev-ui/components/ui/button'
+import { badgeVariants, type BadgeVariants } from './ui/badge'
+
+interface Props extends HTMLAttributes<'a'>, BadgeVariants {
+  text?: string
+  href?: string
+}
+
+const { href, text, variant, class: className, ...rest } = Astro.props
+---
+
+<Box
+  class:list={[
+    'chip',
+    href ? buttonVariants({ variant }) : badgeVariants({ variant }),
+    'h-7 rounded-full px-3.5 text-xs font-medium',
+    className,
+  ]}
+  {href}
+  {...rest}
+>
+  <Fragment set:html={text} />
+  <slot />
+</Box>

package/src/{structures → components}/Code.astro

@@ -1,14 +1,14 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import { Code as AstroCode } from 'astro:components'
-import Element from 'fulldev-ui/components/Element.astro'
+import Box from 'fulldev-ui/components/Box.astro'
 
 interface Props extends ComponentProps<typeof AstroCode> {}
 
 const { lang = 'astro', code, ...rest } = Astro.props
 ---
 
-<Element class:list="code">
+<Box class:list="code">
   <div class="example">
     <slot name="example" />
     <Fragment set:html={code} />
@@ -24,29 +24,48 @@ const { lang = 'astro', code, ...rest } = Astro.props
       />
     )
   }
-</Element>
+</Box>
 
 <style is:global>
   @layer fulldev {
     .code {
-      @apply mt-8 rounded-md border first:mt-0;
+      margin-top: var(--spacing-8);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      width: 100%;
+      &:first-child {
+        margin-top: 0;
+      }
 
       .example {
-        @apply flex flex-wrap items-center gap-8 p-8;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-8);
+        padding: var(--spacing-8);
 
         > *,
         > slot > * {
-          @apply mt-0;
+          margin-top: 0;
         }
 
         .heading,
         .paragraph {
-          @apply w-full;
+          width: 100%;
         }
       }
 
       .astro-code {
-        @apply mt-0 overflow-x-auto rounded-none border-none p-4 text-sm first:mt-0;
+        margin-top: 0;
+        border: none;
+        border-radius: 0;
+        padding: var(--spacing-4);
+        overflow-x: auto;
+        font-size: var(--text-sm);
+
+        &:first-child {
+          margin-top: 0;
+        }
       }
     }
   }

package/src/components/Collapsible.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'fulldev-ui/components/ui/collapsible'
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <Collapsible v-model:open="isOpen">
+    <CollapsibleTrigger as-child>
+      <div
+        class="max-h-40 overflow-hidden bg-gradient-to-b from-foreground via-foreground text-transparent to-transparent bg-clip-text"
+      >
+        <slot />
+      </div>
+    </CollapsibleTrigger>
+    <CollapsibleContent class="-mt-40">
+      <slot />
+    </CollapsibleContent>
+  </Collapsible>
+</template>

package/src/components/Container.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Box from 'fulldev-ui/components/Box.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  size?: 'sm' | 'default' | 'lg'
+}
+
+const { size = 'default', class: className, ...rest } = Astro.props
+---
+
+<Box
+  class:list={[
+    'mx-auto w-full gap-x-8 gap-y-16 px-4 lg:px-8',
+    {
+      'max-w-screen-md lg:px-16': size === 'sm',
+      'max-w-screen-xl': size === 'default',
+      'max-w-screen-2xl': size === 'lg',
+    },
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</Box>

package/src/components/Drawer.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Button } from 'fulldev-ui/components/ui/button'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from 'fulldev-ui/components/ui/drawer'
+import type { HTMLAttributes } from 'vue'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  button?: {
+    text?: string
+    variant?: 'default' | 'secondary' | 'outline' | 'ghost'
+    size?: 'default' | 'sm' | 'lg'
+  }
+  title?: string
+  description?: string
+}
+
+const { button, title, description, class: className } = defineProps<Props>()
+</script>
+
+<template>
+  <Drawer>
+    <DrawerTrigger as-child>
+      <Button
+        :variant="button?.variant"
+        :size="button?.size"
+        :class="className"
+        name="drawer-trigger"
+      >
+        {{ button?.text }}
+        <slot name="trigger" />
+      </Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>{{ title }}</DrawerTitle>
+        <DrawerDescription>{{ description }}</DrawerDescription>
+        <slot name="header" />
+      </DrawerHeader>
+      <slot />
+      <DrawerFooter>
+        <slot name="footer" />
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+</template>

package/src/components/Form.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { AutoForm } from 'fulldev-ui/components/ui/auto-form'
+import { Button } from 'fulldev-ui/components/ui/button'
+import type { FormHTMLAttributes } from 'vue'
+import { z } from 'zod'
+
+interface Props extends /* @vue-ignore */ FormHTMLAttributes {
+  fields?: {
+    label: string
+    type: 'text' | 'email' | 'checkbox' | 'select'
+    optional?: boolean
+    options?: string[]
+  }[]
+  submit?: string
+}
+
+const { fields, action, method } = defineProps<Props>()
+
+// Conditionally add the optional flag to the zod schema
+const withOptional = (optional: boolean | undefined, schema: z.ZodSchema) => (optional ? schema.optional() : schema)
+
+// Get the correct zod schema for the field
+const getFieldSchema = ({ type, optional, options }: any) => {
+  switch (type) {
+    case 'text':
+      return withOptional(optional, z.string())
+    case 'email':
+      return withOptional(optional, z.string().email())
+    case 'checkbox':
+      return withOptional(optional, z.boolean())
+    case 'select':
+      return withOptional(optional, z.enum(options))
+    case 'date':
+      return withOptional(optional, z.coerce.date())
+    case 'textarea':
+      return withOptional(optional, z.string())
+    default:
+      return withOptional(optional, z.string())
+  }
+}
+
+// Get the correct config object the field
+const getFieldConfig = ({ type }: any) => {
+  switch (type) {
+    case 'textarea':
+      return {
+        component: 'textarea',
+      }
+    default:
+      return {}
+  }
+}
+
+// Loop over fields array and create on object using getFieldSchema for each field
+const schema = z.object(
+  (fields || []).reduce((acc: any, field) => {
+    acc[field.label] = getFieldSchema(field)
+    return acc
+  }, {})
+)
+
+// Loop over fields array and create on object using getFieldSchema for each field
+const config = (fields || []).reduce((acc: any, field) => {
+  acc[field.label] = getFieldConfig(field)
+  return acc
+}, {})
+</script>
+
+<template>
+  <AutoForm
+    class="w-full space-y-6 [&>div>p[role='alert']]:hidden"
+    :field-config="config"
+    :schema="schema"
+    :action
+    :method
+  >
+    <slot />
+    <Button type="submit">
+      {{ submit }}
+    </Button>
+  </AutoForm>
+</template>

package/src/components/Gallery.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { watchOnce } from '@vueuse/core'
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from 'fulldev-ui/components/ui/carousel'
+import { parse } from 'node-html-parser'
+import { ref } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+
+const emblaMainApi = ref<CarouselApi>()
+const emblaThumbnailApi = ref<CarouselApi>()
+const selectedIndex = ref(0)
+
+function onSelect() {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value) return
+  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()
+  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())
+}
+
+function onThumbClick(index: number) {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value) return
+  emblaMainApi.value.scrollTo(index)
+}
+
+watchOnce(emblaMainApi, (emblaMainApi) => {
+  if (!emblaMainApi) return
+
+  onSelect()
+  emblaMainApi.on('select', onSelect)
+  emblaMainApi.on('reInit', onSelect)
+})
+
+const slots = defineSlots<{
+  default(): any
+}>()
+
+const slot = slots['default']()[0]
+const html = await renderToString(slot)
+const root = parse(html)
+const container = root.querySelector('astro-static-slot') || root.querySelector('astro-slot') || root
+const children = container.children
+const htmlItems = children.map((child) => child.outerHTML)
+</script>
+
+<template>
+  <div class="w-full flex flex-col gap-2">
+    <Carousel
+      class="relative"
+      @init-api="(val) => (emblaMainApi = val)"
+    >
+      <CarouselContent>
+        <CarouselItem
+          v-for="(htmlItem, index) in htmlItems"
+          :key="index"
+          class="rounded-md overflow-hidden"
+        >
+          <div v-html="htmlItem" />
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious class="left-2" />
+      <CarouselNext class="right-2" />
+    </Carousel>
+    <Carousel
+      class="relative w-full"
+      @init-api="(val) => (emblaThumbnailApi = val)"
+    >
+      <CarouselContent class="flex gap-2 ml-0">
+        <CarouselItem
+          v-for="(htmlItem, index) in htmlItems"
+          :key="index"
+          class="pl-0 basis-1/5 cursor-pointer border rounded-md"
+          :class="index === selectedIndex ? 'border-ring' : ''"
+          @click="onThumbClick(index)"
+        >
+          <div v-html="htmlItem" />
+        </CarouselItem>
+      </CarouselContent>
+    </Carousel>
+  </div>
+</template>

package/src/components/Grid.astro

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Box from 'fulldev-ui/components/Box.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  size?: 'sm' | 'default' | 'lg'
+  length: number | undefined
+}
+
+const { size = 'default', length = 4, class: className, ...rest } = Astro.props
+---
+
+<Box
+  class:list={[
+    'relative grid w-full gap-x-4 gap-y-8',
+    {
+      'sm:grid-cols-2': size === 'default',
+      'md:grid-cols-3': size === 'default' && length === 3,
+      'lg:grid-cols-4': size === 'default' && length === 4,
+      'md:grid-cols-3 xl:grid-cols-5': size === 'default' && length === 5,
+      'lg:grid-cols-3': size === 'default' && length === 6,
+      'md:grid-cols-3 lg:grid-cols-4': size === 'default' && length > 6,
+    },
+    {
+      'md:grid-cols-2': size === 'lg',
+      'md:grid-cols-3': size === 'lg' && length === 3,
+      'xl:grid-cols-4': size === 'lg' && length === 4,
+      'lg:grid-cols-3': size === 'lg' && length > 4,
+    },
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</Box>