fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/components/Sort.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import Select from 'fulldev-ui/components/Select.vue'
+import type { SelectRootProps } from 'radix-vue'
+
+interface Props extends SelectRootProps {
+  options: {
+    label: string
+    value: string
+  }[]
+}
+
+const { options } = defineProps<Props>()
+
+const handleChange = (value: string) => {
+  const container = document.querySelector('[data-sort]')
+  if (!container) throw new Error('Container not found')
+
+  const childElements = container.querySelectorAll(`[data-sort-${value}]`)
+  const childrenArray = Array.from(childElements)
+
+  const sortedChildrenArray = childrenArray.sort((a, b) => {
+    const aValue = a.getAttribute(`data-sort-${value}`)
+    const bValue = b.getAttribute(`data-sort-${value}`)
+    if (!aValue || !bValue) return 0
+
+    const aNum = parseFloat(aValue)
+    const bNum = parseFloat(bValue)
+
+    //
+    if (isNaN(aNum) || isNaN(bNum)) throw new Error('Sort value is not a number')
+
+    return aNum - bNum
+  })
+
+  // Append the sorted children to the container
+  sortedChildrenArray.forEach((child) => container.appendChild(child))
+}
+</script>
+
+<template>
+  <Select
+    class="w-auto"
+    :options="options"
+    @update:modelValue="handleChange"
+  />
+</template>

package/src/components/Split.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Box from 'fulldev-ui/components/Box.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  align?: 'start' | 'center' | 'end'
+  reverse?: boolean | 'auto'
+}
+
+const { align = 'start', reverse = false, class: className, ...rest } = Astro.props
+---
+
+<Box
+  {...rest}
+  class:list={[
+    'grid items-start gap-x-8 gap-y-16 lg:grid-cols-2',
+    {
+      'items-start lg:child:sticky lg:child:top-[7.5rem]': align === 'start',
+      'items-center': align === 'center',
+      'lg:first:child:order-last lg:last:child:order-first': reverse === true,
+      'lg:first:child:even:order-last lg:last:child:even:order-first': reverse === 'auto',
+    },
+    className,
+  ]}
+>
+  <slot />
+</Box>

package/src/components/Table.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'
 
 interface Props extends HTMLAttributes<'table'> {
   header?: string[] | undefined
@@ -11,34 +11,34 @@ interface Props extends HTMLAttributes<'table'> {
 const { header, body, footer, ...rest } = Astro.props
 ---
 
-<Element
+<Box
   class:list="table"
   {...rest}
 >
-  <Element as="table">
-    <Element as="thead">
-      <Element as="tr">
+  <Box as="table">
+    <Box as="thead">
+      <Box as="tr">
         {header?.map((cell) => <th>{cell}</th>)}
-      </Element>
-    </Element>
-    <Element as="tbody">
+      </Box>
+    </Box>
+    <Box as="tbody">
       {
         body?.map((row: string[]) => (
-          <Element as="tr">
+          <Box as="tr">
             {row?.map((cell) => (
               <td>{cell}</td>
             ))}
-          </Element>
+          </Box>
         ))
       }
-    </Element>
-    <Element as="tfoot">
-      <Element as="tr">
+    </Box>
+    <Box as="tfoot">
+      <Box as="tr">
         {footer?.map((cell) => <td>{cell}</td>)}
-      </Element>
-    </Element>
-  </Element>
-</Element>
+      </Box>
+    </Box>
+  </Box>
+</Box>
 
 <style is:global>
   @layer fulldev {

package/src/components/Tabs.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Tabs, TabsContent, TabsList, TabsTrigger } from 'fulldev-ui/components/ui/tabs'
+</script>
+
+<template>
+  <Tabs
+    default-value="account"
+    class="w-[400px]"
+  >
+    <TabsList class="grid w-full grid-cols-2">
+      <TabsTrigger value="account"> Account </TabsTrigger>
+      <TabsTrigger value="password"> Password </TabsTrigger>
+    </TabsList>
+    <TabsContent value="account"> Account </TabsContent>
+    <TabsContent value="password"> Password </TabsContent>
+  </Tabs>
+</template>

package/src/components/Themer.astro

@@ -5,7 +5,7 @@ import Icon from 'fulldev-ui/components/Icon.astro'
 interface Props {
   show?: any
   size?: any
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | undefined
 }
 
 const { variant = 'secondary', ...rest } = Astro.props
@@ -59,10 +59,19 @@ const { variant = 'secondary', ...rest } = Astro.props
 
 <style is:global>
   .themer {
-    @apply relative px-0;
+    position: relative;
+    padding-right: 0;
+    padding-left: 0;
 
     .themer-select {
-      @apply absolute inset-0 cursor-pointer appearance-none opacity-0;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      appearance: none;
+      opacity: 0;
+      cursor: pointer;
     }
   }
 

package/src/components/Toc.astro

@@ -1,7 +1,7 @@
----
+<!-- ---
 import type { MarkdownHeading } from 'astro'
 import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
+import Box from 'fulldev-ui/components/Box.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Links from './Links.astro'
 
@@ -17,12 +17,12 @@ const filteredHeadings = headings?.filter((heading: any) => heading.depth <= 4)
 
 const links = filteredHeadings?.map((button: any) => ({
   text: button.text,
-  href: `#${button.slug}`,
-  class: `depth-${button.depth}`,
+  href: `#${button?.slug}`,
+  class: `depth-${button?.depth}`,
 }))
 ---
 
-<Element
+<Box
   class:list="toc"
   {...rest}
 >
@@ -30,7 +30,7 @@ const links = filteredHeadings?.map((button: any) => ({
     (links?.length || 0) > 0 && (
       <Heading
         as="h6"
-        text={heading}
+        text={'On this page'}
         size="sm"
       />
     )
@@ -39,24 +39,27 @@ const links = filteredHeadings?.map((button: any) => ({
     {size}
     {links}
   />
+</Box>
 
-  <style is:global>
-    @layer fulldev {
-      .toc {
-        @apply flex flex-col gap-2;
+<style is:global>
+  @layer fulldev {
+    .toc {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-2);
 
-        .link:first-child {
-          @apply font-bold text-foreground;
-        }
+      .link:first-child {
+        color: var(--color-foreground);
+        font-weight: var(--font-weight-bold);
+      }
 
-        .link.depth-3 {
-          @apply pl-3;
-        }
+      .link.depth-3 {
+        padding-left: var(--spacing-3);
+      }
 
-        .link.depth-4 {
-          @apply pl-6;
-        }
+      .link.depth-4 {
+        padding-left: var(--spacing-6);
       }
     }
-  </style>
-</Element>
+  }
+</style> -->

package/src/components/Toolbar.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from 'fulldev-ui/components/ui/menubar'
+
+interface Props {
+  sort?: {
+    name: string
+    options: {
+      label: string
+      value: string
+    }[]
+  }
+  filters?: {
+    name: string
+    options: {
+      label: string
+      value: string
+    }[]
+  }[]
+}
+
+const { sort, filters } = defineProps<Props>()
+</script>
+
+<template>
+  <Menubar>
+    <MenubarMenu>
+      <MenubarTrigger>File</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem> New Tab <MenubarShortcut>⌘T</MenubarShortcut> </MenubarItem>
+        <MenubarItem> New Window <MenubarShortcut>⌘N</MenubarShortcut> </MenubarItem>
+        <MenubarItem disabled> New Incognito Window </MenubarItem>
+        <MenubarSeparator />
+        <MenubarSub>
+          <MenubarSubTrigger>Share</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItem>Email link</MenubarItem>
+            <MenubarItem>Messages</MenubarItem>
+            <MenubarItem>Notes</MenubarItem>
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarSeparator />
+        <MenubarItem> Print... <MenubarShortcut>⌘P</MenubarShortcut> </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>Edit</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem> Undo <MenubarShortcut>⌘Z</MenubarShortcut> </MenubarItem>
+        <MenubarItem> Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut> </MenubarItem>
+        <MenubarSeparator />
+        <MenubarSub>
+          <MenubarSubTrigger>Find</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItem>Search the web</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>Find...</MenubarItem>
+            <MenubarItem>Find Next</MenubarItem>
+            <MenubarItem>Find Previous</MenubarItem>
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarSeparator />
+        <MenubarItem>Cut</MenubarItem>
+        <MenubarItem>Copy</MenubarItem>
+        <MenubarItem>Paste</MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>View</MenubarTrigger>
+      <MenubarContent>
+        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+        <MenubarCheckboxItem checked> Always Show Full URLs </MenubarCheckboxItem>
+        <MenubarSeparator />
+        <MenubarItem inset> Reload <MenubarShortcut>⌘R</MenubarShortcut> </MenubarItem>
+        <MenubarItem
+          disabled
+          inset
+        >
+          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem inset> Toggle Fullscreen </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem inset> Hide Sidebar </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>Profiles</MenubarTrigger>
+      <MenubarContent>
+        <MenubarRadioGroup value="benoit">
+          <MenubarRadioItem value="andy"> Andy </MenubarRadioItem>
+          <MenubarRadioItem value="benoit"> Benoit </MenubarRadioItem>
+          <MenubarRadioItem value="Luis"> Luis </MenubarRadioItem>
+        </MenubarRadioGroup>
+        <MenubarSeparator />
+        <MenubarItem inset> Edit... </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem inset> Add Profile... </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+  </Menubar>
+</template>

package/src/components/Writeup.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Box from 'fulldev-ui/components/Box.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  size?: 'sm' | 'default' | 'lg' | 'xl' | undefined
+  align?: 'start' | 'center' | 'end' | undefined
+}
+
+const { size = 'default', align = 'start', ...rest } = Astro.props
+---
+
+<Box
+  class:list={[
+    'writeup',
+    'flex-flex-col w-full max-w-screen-md',
+    'first:child:mt-0',
+    'headings:scroll-mt-20 headings:text-pretty headings:font-semibold headings:tracking-tight',
+    'p:max-w-[85%] p:text-pretty p:leading-[1.75] p:text-muted-foreground',
+    'lead:leading-[1.75]',
+    'ul:my-6 ul:ml-4 ul:list-disc ul:li:mt-2',
+    {
+      // size
+      'text-sm headings:mt-2 headings:text-2xl p:mt-2': size === 'sm',
+      'child:mt-6 headings:mt-4 headings:text-4xl p:mt-4': size === 'default',
+      'text-lg child:mt-8 headings:mt-6 headings:text-4xl p:mt-6 md:headings:text-5xl': size === 'lg',
+      'text-lg child:mt-8 headings:mt-6 headings:text-5xl p:mt-6 md:text-xl md:headings:text-6xl': size === 'xl',
+      // align
+      'mr-auto items-start text-left child:mr-auto': align === 'start',
+      'mx-auto items-center text-center child:mx-auto': align === 'center',
+      'ml-auto items-end text-right child:ml-auto': align === 'end',
+    },
+  ]}
+  {...rest}
+>
+  <slot />
+</Box>

package/src/components/ui/accordion/Accordion.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  AccordionRoot,
+  type AccordionRootEmits,
+  type AccordionRootProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>

package/src/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/src/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>

package/src/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { AccordionHeader, AccordionTrigger, type AccordionTriggerProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown class="h-4 w-4 shrink-0 transition-transform duration-200" />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/src/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

package/src/components/ui/auto-form/AutoForm.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts" generic="T extends ZodObjectOrWrapped">
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from 'fulldev-ui/components/ui/form'
+import type { FormContext, GenericObject } from 'vee-validate'
+import { computed, toRefs } from 'vue'
+import type { z, ZodAny } from 'zod'
+import AutoFormField from './AutoFormField.vue'
+import { provideDependencies } from './dependencies'
+import type { Config, ConfigItem, Dependency, Shape } from './interface'
+import {
+  getBaseSchema,
+  getBaseType,
+  getDefaultValueInZodStack,
+  getObjectFormSchema,
+  type ZodObjectOrWrapped,
+} from './utils'
+
+const props = defineProps<{
+  schema: T
+  form?: FormContext<GenericObject>
+  fieldConfig?: Config<z.infer<T>>
+  dependencies?: Dependency<z.infer<T>>[]
+}>()
+
+const emits = defineEmits<{
+  submit: [event: z.infer<T>]
+}>()
+
+const { dependencies } = toRefs(props)
+provideDependencies(dependencies)
+
+const shapes = computed(() => {
+  // @ts-expect-error ignore {} not assignable to object
+  const val: { [key in keyof T]: Shape } = {}
+  const baseSchema = getObjectFormSchema(props.schema)
+  const shape = baseSchema.shape
+  Object.keys(shape).forEach((name) => {
+    const item = shape[name] as ZodAny
+    const baseItem = getBaseSchema(item) as ZodAny
+    let options = baseItem && 'values' in baseItem._def ? (baseItem._def.values as string[]) : undefined
+    if (!Array.isArray(options) && typeof options === 'object') options = Object.values(options)
+
+    val[name as keyof T] = {
+      type: getBaseType(item),
+      default: getDefaultValueInZodStack(item),
+      options,
+      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
+      schema: baseItem,
+    }
+  })
+  return val
+})
+
+const fields = computed(() => {
+  // @ts-expect-error ignore {} not assignable to object
+  const val: { [key in keyof z.infer<T>]: { shape: Shape; fieldName: string; config: ConfigItem } } = {}
+  for (const key in shapes.value) {
+    const shape = shapes.value[key]
+    val[key as keyof z.infer<T>] = {
+      shape,
+      config: props.fieldConfig?.[key] as ConfigItem,
+      fieldName: key,
+    }
+  }
+  return val
+})
+
+const formComponent = computed(() => (props.form ? 'form' : Form))
+const formComponentProps = computed(() => {
+  if (props.form) {
+    return {
+      onSubmit: props.form.handleSubmit((val) => emits('submit', val)),
+    }
+  } else {
+    const formSchema = toTypedSchema(props.schema)
+    return {
+      keepValues: true,
+      validationSchema: formSchema,
+      onSubmit: (val: GenericObject) => emits('submit', val),
+    }
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="formComponent"
+    v-bind="formComponentProps"
+  >
+    <slot
+      name="customAutoForm"
+      :fields="fields"
+    >
+      <template
+        v-for="(shape, key) of shapes"
+        :key="key"
+      >
+        <slot
+          :shape="shape"
+          :name="key.toString() as keyof z.infer<T>"
+          :field-name="key.toString()"
+          :config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
+        >
+          <AutoFormField
+            :config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
+            :field-name="key.toString()"
+            :shape="shape"
+          />
+        </slot>
+      </template>
+    </slot>
+
+    <slot :shapes="shapes" />
+  </component>
+</template>