fulldev-ui 0.7.0-beta.9 → 0.7.0

package/src/components/Form.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { AutoForm } from '@/components/ui/auto-form'
-import { Button } from '@/components/ui/button'
-import { z } from 'zod'
-
-interface Props {
-  fields?: {
-    label: string
-    type: 'text' | 'email' | 'checkbox' | 'select'
-    optional?: boolean
-    options?: string[]
-  }[]
-  submit?: string
-}
-
-const { fields, submit } = 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"
-  >
-    <slot />
-    <Button type="submit">
-      {{ submit }}
-    </Button>
-  </AutoForm>
-</template>

package/src/components/Gallery.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import {
-  Carousel,
-  type CarouselApi,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from '@/components/ui/carousel'
-import { watchOnce } from '@vueuse/core'
-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

@@ -1,35 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-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>

package/src/components/Icon.astro

@@ -1,24 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import tablerIcons from '@iconify-json/tabler/icons.json'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'svg'> {
-  name?: string | undefined
-}
-
-const { name, ...rest } = Astro.props
-
-const trimmedName = name?.trim()
-const icon = trimmedName ? (tablerIcons as any)?.icons[trimmedName]?.body : undefined
----
-
-<Box
-  class:list="icon size-[1em] inline-flex child:stroke-[calc(1em/12)]"
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  as="svg"
-  {...rest}
->
-  <Fragment set:html={icon} />
-</Box>

package/src/components/Image.astro

@@ -1,26 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import { Image as AstroImage } from 'astro:assets'
-
-interface Props extends HTMLAttributes<'img'> {
-  src?: string
-  alt?: string
-  height?: number
-  width?: number
-}
-
-const { src, alt = '', height = 1920, width = 1920, class: className, ...rest } = Astro.props
----
-
-{
-  src && (
-    <AstroImage
-      class:list={['image block', className]}
-      {alt}
-      {src}
-      {width}
-      {height}
-      {...rest}
-    />
-  )
-}

package/src/components/Layout.astro

@@ -1,116 +0,0 @@
----
-import { SEO } from 'astro-seo'
-
-interface Props {
-  lang?: string
-  company?: string
-  title?: string
-  description?: string
-  image?: {
-    src?: string
-    alt?: string
-  }
-  canonical?: string
-  noindex?: boolean
-  nofollow?: boolean
-  head?: string
-  body?: string
-  css?: string
-}
-
-const { lang = 'en', company, title, description, image, canonical, noindex, nofollow, head, body, css } = Astro.props
-
-// TODO: shadcn theme switcher
-const theme = 'light'
----
-
-<!doctype html>
-<html
-  class="scheme-light dark:scheme-dark h-full w-full font-sans text-base text-foreground"
-  {lang}
->
-  <head>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1"
-    />
-    <meta
-      name="generator"
-      content={Astro.generator}
-    />
-    <SEO
-      charset="UTF-8"
-      title={title}
-      description={description || description}
-      noindex={noindex}
-      nofollow={nofollow}
-      canonical={canonical || Astro.url.href}
-      openGraph={{
-        basic: {
-          title: title || '',
-          image: Astro.url.origin + image?.src,
-          type: 'website',
-          url: Astro.url.href,
-        },
-        image: {
-          url: Astro.url.origin + image?.src,
-          alt: image?.alt || title || title || company,
-        },
-        optional: {
-          description: description,
-          siteName: company,
-        },
-      }}
-    />
-
-    <!-- Code -->
-    <Fragment set:html={head} />
-    <slot name="head" />
-
-    <!-- Light / Dark theme -->
-    <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', () => {
-        setOption(document)
-      })
-    </script>
-  </head>
-  <body
-    class="scheme-light dark:scheme-dark flex min-h-full w-full flex-col justify-start bg-background font-sans text-base text-foreground"
-  >
-    <slot />
-    <style set:html={css}></style>
-    <Fragment set:html={body} />
-  </body>
-</html>

package/src/components/Link.astro

@@ -1,22 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Box from './Box.astro'
-
-interface Props extends HTMLAttributes<'a'> {
-  text?: string
-  href?: string
-}
-
-const { href, target = href?.startsWith('http') ? '_blank' : undefined, class: className, text, ...rest } = Astro.props
----
-
-<Box
-  as="a"
-  class:list={['link', className]}
-  {href}
-  {target}
-  {...rest}
->
-  <Fragment set:html={text} />
-  <slot />
-</Box>

package/src/components/List.astro

@@ -1,32 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import Icon from '@/components/Icon.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'ul' | 'ol'> {
-  as?: 'ul' | 'ol'
-  muted?: boolean
-  items?: string[]
-  icon?: string
-}
-
-const { as = 'ul', muted = false, class: className, items, icon, ...rest } = Astro.props
----
-
-<Box
-  class:list={['list ml-4 list-disc space-y-2', className]}
-  {as}
-  {...rest}
->
-  {
-    items?.map((item) => (
-      <Box as="li">
-        <Icon name={icon} />
-        <Box as="span">
-          <Fragment set:html={item} />
-        </Box>
-      </Box>
-    ))
-  }
-  <slot />
-</Box>

package/src/components/Logo.astro

@@ -1,30 +0,0 @@
----
-import Image from '@/components/Image.astro'
-import type { HTMLAttributes } from 'astro/types'
-import Box from './Box.astro'
-
-interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
-  src?: string
-  alt?: string
-  text?: string
-}
-
-const { href = '/', class: className, text, src, alt, ...rest } = Astro.props as Props
----
-
-<Box
-  class:list={[
-    'flex items-center gap-3 whitespace-nowrap text-base font-medium leading-none text-foreground',
-    className,
-  ]}
-  as={href ? 'a' : 'div'}
-  {href}
-  {...rest}
->
-  <Image
-    class="h-9 w-auto object-contain"
-    {src}
-    {alt}
-  />
-  <Fragment set:html={text} />
-</Box>

package/src/components/Masonry.astro

@@ -1,35 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-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={[
-    'masonry relative w-full gap-x-4 space-y-4',
-    {
-      'sm:columns-2': size === 'default',
-      'md:columns-3': size === 'default' && length === 3,
-      'lg:columns-4': size === 'default' && length === 4,
-      'md:columns-3 xl:columns-5': size === 'default' && length === 5,
-      'lg:columns-3': size === 'default' && length === 6,
-      'md:columns-3 lg:columns-4': size === 'default' && length > 6,
-    },
-    {
-      'md:columns-2': size === 'lg',
-      'md:columns-3': size === 'lg' && length === 3,
-      'xl:columns-4': size === 'lg' && length === 4,
-      'lg:columns-3': size === 'lg' && length > 4,
-    },
-    className,
-  ]}
-  {...rest}
->
-  <slot />
-</Box>

package/src/components/Menu.astro

@@ -1,48 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-import Link from './Link.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  text?: string | undefined
-  links?:
-    | {
-        text?: string
-        href?: string
-      }[]
-    | undefined
-}
-
-const { text, links, ...rest } = Astro.props
----
-
-<Box
-  class:list="menu inline-flex flex-col items-start gap-4"
-  as="div"
-  {...rest}
->
-  {
-    links && links.length > 0 && (
-      <Box
-        class="font-medium"
-        as="h6"
-        set:html={text}
-      />
-    )
-  }
-  <Box
-    as="menu"
-    class="flex flex-col gap-2"
-  >
-    {
-      links?.map((link) => (
-        <Box as="li">
-          <Link
-            class="font-normal text-muted-foreground transition-colors hover:text-foreground"
-            {...link}
-          />
-        </Box>
-      ))
-    }
-  </Box>
-</Box>

package/src/components/Menus.astro

@@ -1,25 +0,0 @@
----
-import Menu from '@/components/Menu.astro'
-import type { ComponentProps } from 'astro/types'
-import Box from './Box.astro'
-
-interface Props extends ComponentProps<typeof Menu> {
-  menus?: ComponentProps<typeof Menu>[] | undefined
-}
-
-const { menus, ...rest } = Astro.props
----
-
-<Box
-  class:list="grid grid-cols-[repeat(auto-fit,minmax(176px,1fr))] gap-8"
-  {...rest}
->
-  {
-    menus?.map((menu) => (
-      <Menu
-        {...rest}
-        {...menu}
-      />
-    ))
-  }
-</Box>

package/src/components/Navigation.vue

@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-} from '@/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

@@ -1,18 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-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>