fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/Search.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/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

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

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/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

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

@@ -1,32 +0,0 @@
----
-import Button from '@/components/Button.astro'
-import type { ComponentProps } from 'astro/types'
-
-interface Props extends Omit<ComponentProps<typeof Button>, 'text' | 'icon' | 'target' | 'size'> {}
-
-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'
-  if (href.includes('instagram')) return 'brand-instagram'
-  if (href.includes('linkedin')) return 'brand-linkedin'
-  if (href.includes('youtube')) return 'brand-youtube'
-  if (href.includes('tiktok')) return 'brand-tiktok'
-  if (href.includes('twitch')) return 'brand-twitch'
-  if (href.includes('github')) return 'brand-github'
-  if (href.includes('discord')) return 'brand-discord'
-  return undefined
-}
-
-const { href, variant = 'ghost', ...rest } = Astro.props
----
-
-<Button
-  class:list="social"
-  icon={platform(href)}
-  target="_blank"
-  size="sm"
-  {href}
-  {variant}
-  {...rest}
-/>

package/src/components/Socials.astro

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

package/src/components/Sort.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import Select from '@/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

@@ -1,27 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-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,103 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'table'> {
-  header?: string[] | undefined
-  body?: string[][] | undefined
-  footer?: string[] | undefined
-}
-
-const { header, body, footer, ...rest } = Astro.props
----
-
-<Box
-  class:list="table"
-  {...rest}
->
-  <Box as="table">
-    <Box as="thead">
-      <Box as="tr">
-        {header?.map((cell) => <th>{cell}</th>)}
-      </Box>
-    </Box>
-    <Box as="tbody">
-      {
-        body?.map((row: string[]) => (
-          <Box as="tr">
-            {row?.map((cell) => (
-              <td>{cell}</td>
-            ))}
-          </Box>
-        ))
-      }
-    </Box>
-    <Box as="tfoot">
-      <Box as="tr">
-        {footer?.map((cell) => <td>{cell}</td>)}
-      </Box>
-    </Box>
-  </Box>
-</Box>
-
-<style is:global>
-  @layer fulldev {
-    .table {
-      box-shadow: 0 0 0 1px var(--color-6);
-      border-radius: var(--radius-1);
-      overflow-x: auto;
-
-      table {
-        display: table;
-        margin: 0;
-        border-collapse: collapse;
-        width: 100%;
-        caption-side: bottom;
-        white-space: nowrap;
-
-        thead {
-          background-color: var(--color-3);
-
-          &:not(:last-child) {
-            border-bottom: 1px solid var(--color-6);
-          }
-
-          th {
-            color: var(--color-12);
-            font-weight: 500;
-          }
-        }
-
-        tbody {
-          display: table-row-group;
-          vertical-align: middle;
-          background-color: var(--color-2);
-          width: 100%;
-          unicode-bidi: isolate;
-        }
-
-        tfoot {
-          display: table-footer-group;
-          background-color: var(--color-3);
-          color: var(--color-12);
-
-          &:not(:last-child) {
-            border-top: 1px solid var(--color-6);
-          }
-        }
-
-        tr + tr {
-          border-top: 1px solid var(--color-6);
-        }
-
-        th,
-        td {
-          vertical-align: middle;
-          padding: var(--space-3) var(--space-4);
-          font-size: var(--text-2);
-          text-align: left;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Themer.astro

@@ -1,85 +0,0 @@
----
-import Button from '@/components/Button.astro'
-import Icon from '@/components/Icon.astro'
-
-interface Props {
-  show?: any
-  size?: any
-  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | undefined
-}
-
-const { variant = 'secondary', ...rest } = Astro.props
----
-
-<Button
-  class="themer"
-  {variant}
-  {...rest}
->
-  <Icon
-    class="themer-light-icon"
-    name="sun"
-  />
-  <Icon
-    class="themer-dark-icon"
-    name="moon"
-  />
-  <select class="themer-select">
-    <option value="light">Light</option>
-    <option value="dark">Dark</option>
-    <option
-      value="system"
-      selected
-    >
-      System
-    </option>
-  </select>
-</Button>
-
-<script>
-  import { navigate } from 'astro:transitions/client'
-
-  function init(document: Document) {
-    document.querySelectorAll('.themer select').forEach((select) => {
-      select.addEventListener('change', (event) => {
-        if (event.target instanceof HTMLSelectElement) {
-          localStorage.setItem('theme', event.target.value)
-          navigate(window.location.href)
-        }
-      })
-    })
-  }
-
-  init(document)
-
-  document.addEventListener('astro:before-swap', (event) => {
-    init(event.newDocument)
-  })
-</script>
-
-<style is:global>
-  .themer {
-    position: relative;
-    padding-right: 0;
-    padding-left: 0;
-
-    .themer-select {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      appearance: none;
-      opacity: 0;
-      cursor: pointer;
-    }
-  }
-
-  html.dark .themer-light-icon {
-    display: none;
-  }
-
-  html:not(.dark) .themer-dark-icon {
-    display: none;
-  }
-</style>

package/src/components/Toc.astro

@@ -1,65 +0,0 @@
-<!-- ---
-import Box from '@/components/Box.astro'
-import Heading from '@/components/Heading.astro'
-import type { MarkdownHeading } from 'astro'
-import type { HTMLAttributes } from 'astro/types'
-import Links from './Links.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  heading?: string | undefined
-  headings?: MarkdownHeading[] | undefined
-}
-
-const { size = 'md', heading, headings, ...rest } = Astro.props
-
-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}`,
-}))
----
-
-<Box
-  class:list="toc"
-  {...rest}
->
-  {
-    (links?.length || 0) > 0 && (
-      <Heading
-        as="h6"
-        text={'On this page'}
-        size="sm"
-      />
-    )
-  }
-  <Links
-    {size}
-    {links}
-  />
-</Box>
-
-<style is:global>
-  @layer fulldev {
-    .toc {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-2);
-
-      .link:first-child {
-        color: var(--color-foreground);
-        font-weight: var(--font-weight-bold);
-      }
-
-      .link.depth-3 {
-        padding-left: var(--spacing-3);
-      }
-
-      .link.depth-4 {
-        padding-left: var(--spacing-6);
-      }
-    }
-  }
-</style> -->

package/src/components/Writeup.astro

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

@@ -1,19 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/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

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/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>