fulldev-ui 0.6.5 → 0.7.0-beta.1

package/src/components/Navigation.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+} from 'fulldev-ui/components/ui/navigation-menu'
+import { ref, type HTMLAttributes } from 'vue'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  items?: {
+    text?: string
+    href?: string
+    links?: { text?: string; href?: string }[]
+  }[]
+}
+
+const { items, class: className } = defineProps<Props>()
+
+const offset = ref()
+
+const handleUpdate = (value: string) => {
+  // If value is falsy (emptry string when closing), set offset to undefined to prevent initial transition
+  if (!value) offset.value = undefined
+  // FIXME: may not be working with multiple Navigations on the page.
+  const trigger = document.querySelector(`#radix-navigation-menu-v0-0-trigger-${value}`)
+  if (trigger instanceof HTMLElement) {
+    const triggerOffset = trigger.offsetLeft
+    offset.value = triggerOffset
+  }
+}
+</script>
+
+<template>
+  <NavigationMenu
+    @update:model-value="handleUpdate"
+    :class="className"
+  >
+    <NavigationMenuList class="gap-0">
+      <NavigationMenuItem
+        v-for="item in items"
+        :key="item.text"
+      >
+        <NavigationMenuTrigger
+          v-if="item.links"
+          class="px-3 py-0 h-9"
+        >
+          <NavigationMenuLink
+            v-if="item.href"
+            :href="item.href"
+            class="text-muted-foreground hover:text-foreground transition-colors font-normal"
+          >
+            {{ item.text }}
+          </NavigationMenuLink>
+          <span v-else>{{ item.text }}</span>
+        </NavigationMenuTrigger>
+        <NavigationMenuContent v-if="item.links">
+          <ul class="w-full min-w-48 gap-3 p-6 flex flex-col">
+            <li v-for="link in item.links">
+              <NavigationMenuLink
+                :href="link.href"
+                class="text-muted-foreground hover:text-foreground transition-colors font-normal"
+              >
+                {{ link.text }}
+              </NavigationMenuLink>
+            </li>
+          </ul>
+        </NavigationMenuContent>
+        <NavigationMenuLink
+          v-else
+          :href="item.href"
+          :class="[navigationMenuTriggerStyle(), 'px-3 py-0 h-9']"
+          class="text-muted-foreground hover:text-foreground transition-colors font-normal"
+        >
+          {{ item.text }}
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+    <NavigationMenuViewport
+      :style="{
+        // Avoid transitioning from initial position when first opening
+        display: offset === undefined ? 'none' : undefined,
+        transform: `translateX(${offset}px)`,
+        transition: 'transform 0.15s',
+      }"
+    />
+  </NavigationMenu>
+</template>

package/src/components/Panel.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Box from 'fulldev-ui/components/Box.astro'
+
+interface Props extends HTMLAttributes<'div'> {}
+
+const { class: className, ...rest } = Astro.props
+---
+
+<Box
+  class:list={[
+    'panel color-card-foreground relative w-full gap-x-8 gap-y-16 overflow-hidden rounded-lg border bg-card px-4 py-16 md:px-8 xl:px-16',
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</Box>

package/src/components/Person.astro

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Abstract from 'fulldev-ui/components/Abstract.astro'
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+import Box from 'fulldev-ui/components/Box.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  src?: string | undefined
+  heading?: string | undefined
+  text?: string | undefined
+}
+
+const { src, heading, text, ...rest } = Astro.props
+---
+
+<Box
+  class:list="person"
+  {...rest}
+>
+  <Avatar
+    {src}
+    alt={[heading, text].join(' - ')}
+  />
+  <Abstract>
+    <Box
+      as="h3"
+      set:html={heading}
+    />
+    <Fragment set:html={text} />
+  </Abstract>
+</Box>
+
+<style is:global>
+  @layer fulldev {
+    .person {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      font-size: var(--text-sm);
+      line-height: var(--text-sm--line-height);
+    }
+  }
+</style>

package/src/components/Price.astro

@@ -1,31 +1,46 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import { formatPrice } from 'fulldev-ui/utils/cart'
+import Box from 'fulldev-ui/components/Box.astro'
 
 interface Props extends HTMLAttributes<'div'> {
   size?: 'sm' | 'md' | 'lg' | undefined
   amount?: number | undefined
 }
 
-const { amount, ...rest } = Astro.props
+const formatPrice = (price: number): string => {
+  return `€${price?.toFixed(2).replace('.', ',').replace(',00', '')}`
+}
+
+const { size = 'md', amount, ...rest } = Astro.props
 ---
 
-<Element
-  class:list="price"
+<Box
+  class:list={`price size-${size}`}
   {...rest}
 >
   {amount && <Fragment set:html={formatPrice(amount)} />}
-</Element>
+</Box>
 
 <style is:global>
   @layer fulldev {
     .price {
-      margin: 0;
-      max-width: calc(var(--space-4) * 44);
-      color: var(--color-12);
-      font-size: var(--text-5);
-      line-height: 1.25;
+      color: var(--color-foreground);
+      font-weight: var(--font-weight-medium);
+
+      &.size-sm {
+        font-size: var(--text-sm);
+        line-height: var(--text-sm--line-height);
+      }
+
+      &.size-md {
+        font-size: var(--text-base);
+        line-height: var(--text-base--line-height);
+      }
+
+      &.size-lg {
+        font-size: var(--text-lg);
+        line-height: var(--text-lg--line-height);
+      }
     }
   }
 </style>

package/src/components/Proof.astro

@@ -1,52 +1,31 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Avatars from 'fulldev-ui/components/Avatars.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Label from 'fulldev-ui/components/Label.astro'
+import Abstract from 'fulldev-ui/components/Abstract.astro'
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+import Box from 'fulldev-ui/components/Box.astro'
 import Rating from 'fulldev-ui/components/Rating.astro'
 
 interface Props extends HTMLAttributes<'div'> {
-  avatar?: ComponentProps<typeof Avatars>['avatar']
-  avatars?: ComponentProps<typeof Avatars>['avatars']
-  rating?: number | undefined
-  text?: string | undefined
+  avatars?: ComponentProps<typeof Avatar>[]
+  rating?: ComponentProps<typeof Rating>['score']
+  text?: string
 }
 
-const { avatar, avatars, rating, text, ...rest } = Astro.props
+const { avatars, rating, text, ...rest } = Astro.props
 ---
 
-<Element
-  class:list="proof"
+<Box
+  class:list="flex items-center gap-2 text-sm"
   {...rest}
 >
-  <Avatars
-    {avatar}
-    {avatars}
-  />
-  <Element class="proof-segment">
+  <Box class:list="flex -space-x-3">
+    {avatars?.map((avatar) => <Avatar {...avatar} />)}
+  </Box>
+  <Abstract>
     <Rating
       score={rating}
       size="sm"
     />
-    <Label
-      size="md"
-      text={text}
-    />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .proof {
-      @apply flex items-center;
-
-      > .avatar {
-        @apply -mr-5 last-of-type:mr-2;
-      }
-
-      .proof-segment {
-        @apply flex flex-col gap-1;
-      }
-    }
-  }
-</style>
+    <Fragment set:html={text} />
+  </Abstract>
+</Box>

package/src/components/{docs/Props.astro → Props.astro}

@@ -1,5 +1,5 @@
 ---
-import Link from 'fulldev-ui/components/Link.astro'
+import Box from './Box.astro'
 
 const slug = Astro.params.page
 const folder = slug?.split('/').slice(-2, -1)[0]
@@ -12,10 +12,10 @@ const path = `src/${folder}/${component}.astro`
 
 <p>
   Please reference
-  <Link
+  <Box
     target="_blank"
     href={`https://github.com/fulldotdev/ui/blob/main/${path}`}
   >
     {path}
-  </Link> for now.
+  </Box> for now.
 </p>

package/src/components/Prose.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Box from 'fulldev-ui/components/Box.astro'
+
+interface Props extends HTMLAttributes<'div'> {}
+
+const { ...rest } = Astro.props
+---
+
+<Box
+  class:list={[
+    'prose',
+    'flex-flex-col w-full',
+    'child:mt-9 first:child:mt-0',
+    'headings:scroll-mt-20 headings:text-pretty headings:font-semibold headings:tracking-tight',
+    'h1:text-4xl h1:font-extrabold lg:h1:text-5xl',
+    'h2:h1:text-3xl',
+    'h3:text-2xl',
+    'h4:text-xl',
+    'h5:text-lg',
+    'h6:text-base',
+    'p:mt-6 p:leading-[1.8] p:text-foreground/80',
+    'img:p:rounded-lg',
+  ]}
+  {...rest}
+>
+  <slot />
+</Box>

package/src/components/Rating.astro

@@ -1,6 +1,6 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
+import Box from 'fulldev-ui/components/Box.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
 
 interface Props extends HTMLAttributes<'div'> {
@@ -19,37 +19,18 @@ const getIcon = (count: number) => {
 }
 ---
 
-<Element
-  class:list="rating"
+<Box
+  class:list="flex gap-1"
   {...rest}
 >
   {
     score &&
       [1, 2, 3, 4, 5].map((count) => (
         <Icon
+          class="!h-4 !w-4 !text-primary"
           name={getIcon(count)}
           {size}
         />
       ))
   }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .rating {
-      @apply flex gap-1 text-primary;
-    }
-
-    &.size-sm {
-      @apply text-xs;
-    }
-
-    &.size-md {
-      @apply text-sm;
-    }
-
-    &.size-lg {
-      @apply text-base;
-    }
-  }
-</style>
+</Box>

package/src/components/Search.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import Button from 'fulldev-ui/components/ui/button/Button.vue'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from 'fulldev-ui/components/ui/command'
+import { SearchIcon } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+interface Props {
+  groups?: {
+    heading?: string
+    links?: {
+      text?: string
+      href?: string
+    }[]
+  }[]
+}
+
+const { groups } = defineProps<Props>()
+
+const open = ref(false)
+
+function handleOpenChange() {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <Button
+    @click="handleOpenChange"
+    size="sm"
+    class="gap-8"
+    variant="outline"
+  >
+    Zoeken...
+    <SearchIcon />
+  </Button>
+  <CommandDialog v-model:open="open">
+    <CommandInput placeholder="Typ om te zoeken..." />
+    <CommandList>
+      <CommandEmpty>Geen resultaten gevonden.</CommandEmpty>
+      <CommandGroup
+        v-for="group in groups"
+        :key="group.heading"
+        :heading="group.heading"
+      >
+        <CommandItem
+          v-for="item in group.links"
+          :key="item.text"
+          :value="item.text ?? ''"
+          as-child
+        >
+          <a :href="item.href">
+            {{ item.text }}
+          </a>
+        </CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </CommandDialog>
+</template>

package/src/components/Section.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Box from 'fulldev-ui/components/Box.astro'
+
+interface Props extends HTMLAttributes<'section'> {
+  as?: HTMLTag
+}
+
+const { as = 'section', class: className, ...rest } = Astro.props
+---
+
+<Box
+  class:list={['section relative w-full gap-x-8 gap-y-12 py-16', className]}
+  {as}
+  {...rest}
+>
+  <slot />
+</Box>

package/src/components/Select.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from 'fulldev-ui/components/ui/select'
+import type { HTMLAttributes } from 'vue'
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { useForwardPropsEmits } from 'radix-vue'
+
+interface Props extends SelectRootProps {
+  class?: HTMLAttributes['class']
+  options?: {
+    label: string
+    value: string
+  }[]
+  placeholder?: string
+}
+
+const { options, placeholder, class: className, ...props } = defineProps<Props>()
+
+const emits = defineEmits<SelectRootEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Select
+    :id="name"
+    v-bind="forwarded"
+  >
+    <SelectTrigger " :class="className">
+      <SelectValue :placeholder="placeholder || options?.[0]?.label" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectItem
+          v-for="option in options"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>

package/src/components/Sidebar.astro

@@ -0,0 +1,50 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Box from 'fulldev-ui/components/Box.astro'
+
+interface Props extends HTMLAttributes<'aside'> {}
+
+const { ...rest } = Astro.props
+---
+
+<Box
+  class:list="sidebar"
+  as="aside"
+  {...rest}
+>
+  <slot />
+</Box>
+
+<style is:global>
+  @layer fulldev {
+    .sidebar {
+      display: none;
+      position: sticky;
+      top: var(--header-height);
+      flex-shrink: 0;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-8);
+      background-color: var(--color-background);
+      /* padding: var(--spacing-8); */
+      width: var(--sidebar-width);
+      max-width: var(--sidebar-width);
+      max-height: calc(100vh - var(--header-height, 0px));
+      overflow-y: auto;
+
+      /* TODO: scrollbar styling */
+      /* @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover; */
+
+      @media (min-width: 1024px) {
+        display: flex;
+      }
+
+      &,
+      & ~ * {
+        @media (min-width: 1024px) {
+          --sidebar-width: 14rem;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Social.astro

@@ -2,18 +2,9 @@
 import type { ComponentProps } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 
-interface Props extends ComponentProps<typeof Button> {}
+interface Props extends Omit<ComponentProps<typeof Button>, 'text' | 'icon' | 'target' | 'size'> {}
 
-const {
-  variant = 'ghost',
-  target = '_blank',
-  size = 'sm',
-  icon,
-  href,
-  ...rest
-} = Astro.props
-
-const platform = () => {
+const platform = (href: string | undefined) => {
   if (typeof href !== 'string') return
   if (href.includes('x.com')) return 'brand-x'
   if (href.includes('facebook')) return 'brand-facebook'
@@ -26,14 +17,16 @@ const platform = () => {
   if (href.includes('discord')) return 'brand-discord'
   return undefined
 }
+
+const { href, variant = 'ghost', ...rest } = Astro.props
 ---
 
 <Button
   class:list="social"
-  icon={icon ?? platform()}
-  {variant}
+  icon={platform(href)}
+  target="_blank"
+  size="sm"
   {href}
-  {target}
-  {size}
+  {variant}
   {...rest}
 />

package/src/components/Socials.astro

@@ -1,25 +1,27 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import Social from 'fulldev-ui/components/Social.astro'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Box from './Box.astro'
+import Social from './Social.astro'
 
-interface Props extends ComponentProps<typeof Social> {
-  social?:
-    | ComponentProps<typeof Social>
-    | ComponentProps<typeof Social>['href']
-    | undefined
-  socials?:
-    | (ComponentProps<typeof Social> | ComponentProps<typeof Social>['href'])[]
-    | undefined
+interface Props extends HTMLAttributes<'div'> {
+  variant?: ComponentProps<typeof Social>['variant'] | undefined
+  socials?: ComponentProps<typeof Social>['href'][] | undefined
 }
 
-const { social, socials, ...rest } = Astro.props
+const { variant = 'secondary', socials, ...rest } = Astro.props
 ---
 
-{
-  [social, ...(socials || [])].filter(Boolean).map((social) => (
-    <Social
-      {...rest}
-      {...(typeof social === 'string' ? { href: social } : social)}
-    />
-  ))
-}
+<Box
+  class:list="socials inline-flex gap-1"
+  {...rest}
+>
+  {
+    socials?.map((social) => (
+      <Social
+        href={social}
+        {variant}
+      />
+    ))
+  }
+  <slot />
+</Box>