fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/drawer/Drawer.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
-import { useForwardPropsEmits } from 'radix-vue'
-import { DrawerRoot } from 'vaul-vue'
-
-const props = withDefaults(defineProps<DrawerRootProps>(), {
-  shouldScaleBackground: true,
-})
-
-const emits = defineEmits<DrawerRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DrawerRoot v-bind="forwarded">
-    <slot />
-  </DrawerRoot>
-</template>

package/src/components/ui/drawer/DrawerContent.vue

@@ -1,31 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
-import { useForwardPropsEmits } from 'radix-vue'
-import { DrawerContent, DrawerPortal } from 'vaul-vue'
-import type { HtmlHTMLAttributes } from 'vue'
-import DrawerOverlay from './DrawerOverlay.vue'
-
-const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerContent
-      v-bind="forwarded"
-      :class="
-        cn(
-          'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
-          props.class
-        )
-      "
-    >
-      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      <slot />
-    </DrawerContent>
-  </DrawerPortal>
-</template>

package/src/components/ui/drawer/DrawerDescription.vue

@@ -1,23 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { DrawerDescriptionProps } from 'vaul-vue'
-import { DrawerDescription } from 'vaul-vue'
-import { computed, type HtmlHTMLAttributes } from 'vue'
-
-const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <DrawerDescription
-    v-bind="delegatedProps"
-    :class="cn('text-sm text-muted-foreground', props.class)"
-  >
-    <slot />
-  </DrawerDescription>
-</template>

package/src/components/ui/drawer/DrawerFooter.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { HtmlHTMLAttributes } from 'vue'
-
-const props = defineProps<{
-  class?: HtmlHTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/drawer/DrawerHeader.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { HtmlHTMLAttributes } from 'vue'
-
-const props = defineProps<{
-  class?: HtmlHTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/drawer/DrawerOverlay.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { DialogOverlayProps } from 'radix-vue'
-import { DrawerOverlay } from 'vaul-vue'
-import { computed, type HtmlHTMLAttributes } from 'vue'
-
-const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <DrawerOverlay
-    v-bind="delegatedProps"
-    :class="cn('fixed inset-0 z-50 bg-black/80', props.class)"
-  />
-</template>

package/src/components/ui/drawer/DrawerTitle.vue

@@ -1,23 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { DrawerTitleProps } from 'vaul-vue'
-import { DrawerTitle } from 'vaul-vue'
-import { computed, type HtmlHTMLAttributes } from 'vue'
-
-const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <DrawerTitle
-    v-bind="delegatedProps"
-    :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
-  >
-    <slot />
-  </DrawerTitle>
-</template>

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

@@ -1,8 +0,0 @@
-export { default as Drawer } from './Drawer.vue'
-export { default as DrawerContent } from './DrawerContent.vue'
-export { default as DrawerDescription } from './DrawerDescription.vue'
-export { default as DrawerFooter } from './DrawerFooter.vue'
-export { default as DrawerHeader } from './DrawerHeader.vue'
-export { default as DrawerOverlay } from './DrawerOverlay.vue'
-export { default as DrawerTitle } from './DrawerTitle.vue'
-export { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'

package/src/components/ui/form/FormControl.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-import { Slot } from 'radix-vue'
-import { useFormField } from './useFormField'
-
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-</script>
-
-<template>
-  <Slot
-    :id="formItemId"
-    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
-    :aria-invalid="!!error"
-  >
-    <slot />
-  </Slot>
-</template>

package/src/components/ui/form/FormDescription.vue

@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { HTMLAttributes } from 'vue'
-import { useFormField } from './useFormField'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const { formDescriptionId } = useFormField()
-</script>
-
-<template>
-  <p
-    :id="formDescriptionId"
-    :class="cn('text-sm text-muted-foreground', props.class)"
-  >
-    <slot />
-  </p>
-</template>

package/src/components/ui/form/FormItem.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { useId } from 'radix-vue'
-import { type HTMLAttributes, provide } from 'vue'
-import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const id = useId()
-provide(FORM_ITEM_INJECTION_KEY, id)
-</script>
-
-<template>
-  <div :class="cn('space-y-2', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/form/FormLabel.vue

@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import { Label } from '@/components/ui/label'
-import { cn } from '@/lib/utils'
-import type { LabelProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { useFormField } from './useFormField'
-
-const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
-
-const { error, formItemId } = useFormField()
-</script>
-
-<template>
-  <Label
-    :class="cn(error && 'text-destructive', props.class)"
-    :for="formItemId"
-  >
-    <slot />
-  </Label>
-</template>

package/src/components/ui/form/FormMessage.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-import { ErrorMessage } from 'vee-validate'
-import { toValue } from 'vue'
-import { useFormField } from './useFormField'
-
-const { name, formMessageId } = useFormField()
-</script>
-
-<template>
-  <ErrorMessage
-    :id="formMessageId"
-    as="p"
-    :name="toValue(name)"
-    class="text-sm font-medium text-destructive"
-  />
-</template>

package/src/components/ui/form/injectionKeys.ts

@@ -1,4 +0,0 @@
-import type { InjectionKey } from 'vue'
-
-export const FORM_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<string>

package/src/components/ui/form/useFormField.ts

@@ -1,30 +0,0 @@
-import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
-import { inject } from 'vue'
-import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
-
-export function useFormField() {
-  const fieldContext = inject(FieldContextKey)
-  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
-
-  if (!fieldContext)
-    throw new Error('useFormField should be used within <FormField>')
-
-  const { name } = fieldContext
-  const id = fieldItemContext
-
-  const fieldState = {
-    valid: useIsFieldValid(name),
-    isDirty: useIsFieldDirty(name),
-    isTouched: useIsFieldTouched(name),
-    error: useFieldError(name),
-  }
-
-  return {
-    id,
-    name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}

package/src/components/ui/input/Input.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { useVModel } from '@vueuse/core'
-import type { HTMLAttributes } from 'vue'
-
-const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-  class?: HTMLAttributes['class']
-}>()
-
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
-</script>
-
-<template>
-  <input
-    v-model="modelValue"
-    :class="
-      cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        props.class
-      )
-    "
-  />
-</template>

package/src/components/ui/label/Label.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Label, type LabelProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <Label
-    v-bind="delegatedProps"
-    :class="
-      cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', props.class)
-    "
-  >
-    <slot />
-  </Label>
-</template>

package/src/components/ui/navigation-menu/NavigationMenu.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  NavigationMenuRoot,
-  type NavigationMenuRootEmits,
-  type NavigationMenuRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<NavigationMenuRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuRoot
-    v-bind="forwarded"
-    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
-  >
-    <slot />
-    <!-- Commented because in Navigation.vue we needed a custom one for content box positioning -->
-    <!-- <NavigationMenuViewport /> -->
-  </NavigationMenuRoot>
-</template>

package/src/components/ui/navigation-menu/NavigationMenuContent.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  NavigationMenuContent,
-  type NavigationMenuContentEmits,
-  type NavigationMenuContentProps,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<NavigationMenuContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuContent
-    v-bind="forwarded"
-    :class="
-      cn(
-        'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
-        props.class
-      )
-    "
-  >
-    <slot />
-  </NavigationMenuContent>
-</template>

package/src/components/ui/navigation-menu/NavigationMenuIndicator.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuIndicator
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
-        props.class
-      )
-    "
-  >
-    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuIndicator>
-</template>

package/src/components/ui/navigation-menu/NavigationMenuItem.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'
-
-const props = defineProps<NavigationMenuItemProps>()
-</script>
-
-<template>
-  <NavigationMenuItem v-bind="props">
-    <slot />
-  </NavigationMenuItem>
-</template>

package/src/components/ui/navigation-menu/NavigationMenuLink.vue

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

package/src/components/ui/navigation-menu/NavigationMenuList.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuList
-    v-bind="forwardedProps"
-    :class="cn('group flex flex-1 list-none items-center justify-center gap-x-1', props.class)"
-  >
-    <slot />
-  </NavigationMenuList>
-</template>

package/src/components/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { ChevronDown } from 'lucide-vue-next'
-import { NavigationMenuTrigger, type NavigationMenuTriggerProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { navigationMenuTriggerStyle } from '.'
-
-const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuTrigger
-    v-bind="forwardedProps"
-    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
-  >
-    <slot />
-    <ChevronDown
-      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuTrigger>
-</template>

package/src/components/ui/navigation-menu/NavigationMenuViewport.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { NavigationMenuViewport, type NavigationMenuViewportProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <div class="absolute left-0 top-full flex justify-center">
-    <NavigationMenuViewport
-      v-bind="forwardedProps"
-      :class="
-        cn(
-          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
-          props.class
-        )
-      "
-    />
-  </div>
-</template>

package/src/components/ui/popover/Popover.vue

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

package/src/components/ui/popover/PopoverContent.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  PopoverContent,
-  type PopoverContentEmits,
-  type PopoverContentProps,
-  PopoverPortal,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(), {
-  align: 'center',
-  sideOffset: 4,
-})
-const emits = defineEmits<PopoverContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <PopoverPortal>
-    <PopoverContent
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="
-        cn(
-          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          props.class
-        )
-      "
-    >
-      <slot />
-    </PopoverContent>
-  </PopoverPortal>
-</template>

package/src/components/ui/popover/PopoverTrigger.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
-
-const props = defineProps<PopoverTriggerProps>()
-</script>
-
-<template>
-  <PopoverTrigger v-bind="props">
-    <slot />
-  </PopoverTrigger>
-</template>