fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/carousel/interface.ts

@@ -1,26 +0,0 @@
-import type useEmblaCarousel from 'embla-carousel-vue'
-import type {
-  EmblaCarouselVueType,
-} from 'embla-carousel-vue'
-import type { HTMLAttributes, UnwrapRef } from 'vue'
-
-type CarouselApi = EmblaCarouselVueType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
-
-export interface CarouselProps {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: 'horizontal' | 'vertical'
-}
-
-export interface CarouselEmits {
-  (e: 'init-api', payload: UnwrapRefCarouselApi): void
-}
-
-export interface WithClassAsProps {
-  class?: HTMLAttributes['class']
-}

package/src/components/ui/carousel/useCarousel.ts

@@ -1,56 +0,0 @@
-import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'
-import { createInjectionState } from '@vueuse/core'
-import emblaCarouselVue from 'embla-carousel-vue'
-import { onMounted, ref } from 'vue'
-
-const [useProvideCarousel, useInjectCarousel] = createInjectionState(
-  ({
-    opts,
-    orientation,
-    plugins,
-  }: CarouselProps, emits: CarouselEmits) => {
-    const [emblaNode, emblaApi] = emblaCarouselVue({
-      ...opts,
-      axis: orientation === 'horizontal' ? 'x' : 'y',
-    }, plugins)
-
-    function scrollPrev() {
-      emblaApi.value?.scrollPrev()
-    }
-    function scrollNext() {
-      emblaApi.value?.scrollNext()
-    }
-
-    const canScrollNext = ref(false)
-    const canScrollPrev = ref(false)
-
-    function onSelect(api: CarouselApi) {
-      canScrollNext.value = api?.canScrollNext() || false
-      canScrollPrev.value = api?.canScrollPrev() || false
-    }
-
-    onMounted(() => {
-      if (!emblaApi.value)
-        return
-
-      emblaApi.value?.on('init', onSelect)
-      emblaApi.value?.on('reInit', onSelect)
-      emblaApi.value?.on('select', onSelect)
-
-      emits('init-api', emblaApi.value)
-    })
-
-    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
-  },
-)
-
-function useCarousel() {
-  const carouselState = useInjectCarousel()
-
-  if (!carouselState)
-    throw new Error('useCarousel must be used within a <Carousel />')
-
-  return carouselState
-}
-
-export { useCarousel, useProvideCarousel }

package/src/components/ui/checkbox/Checkbox.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Check } from 'lucide-vue-next'
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<CheckboxRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <CheckboxRoot
-    v-bind="forwarded"
-    :class="
-      cn(
-        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-        props.class
-      )
-    "
-  >
-    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
-      <slot>
-        <Check class="h-4 w-4" />
-      </slot>
-    </CheckboxIndicator>
-  </CheckboxRoot>
-</template>

package/src/components/ui/collapsible/Collapsible.vue

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

package/src/components/ui/collapsible/CollapsibleContent.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'
-
-const props = defineProps<CollapsibleContentProps>()
-</script>
-
-<template>
-  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-    <slot />
-  </CollapsibleContent>
-</template>

package/src/components/ui/collapsible/CollapsibleTrigger.vue

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

package/src/components/ui/command/Command.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
-  open: true,
-  modelValue: '',
-})
-
-const emits = defineEmits<ComboboxRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ComboboxRoot
-    v-bind="forwarded"
-    :class="
-      cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)
-    "
-  >
-    <slot />
-  </ComboboxRoot>
-</template>

package/src/components/ui/command/CommandDialog.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { Dialog, DialogContent } from '@/components/ui/dialog'
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import { useForwardPropsEmits } from 'radix-vue'
-import Command from './Command.vue'
-
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <Dialog v-bind="forwarded">
-    <DialogContent class="overflow-hidden p-0 shadow-lg">
-      <Command
-        class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
-      >
-        <slot />
-      </Command>
-    </DialogContent>
-  </Dialog>
-</template>

package/src/components/ui/command/CommandEmpty.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { ComboboxEmptyProps } from 'radix-vue'
-import { ComboboxEmpty } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ComboboxEmpty
-    v-bind="delegatedProps"
-    :class="cn('py-6 text-center text-sm', props.class)"
-  >
-    <slot />
-  </ComboboxEmpty>
-</template>

package/src/components/ui/command/CommandGroup.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { ComboboxGroupProps } from 'radix-vue'
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<
-  ComboboxGroupProps & {
-    class?: HTMLAttributes['class']
-    heading?: string
-  }
->()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ComboboxGroup
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
-        props.class
-      )
-    "
-  >
-    <ComboboxLabel
-      v-if="heading"
-      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
-    >
-      {{ heading }}
-    </ComboboxLabel>
-    <slot />
-  </ComboboxGroup>
-</template>

package/src/components/ui/command/CommandInput.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Search } from 'lucide-vue-next'
-import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<
-  ComboboxInputProps & {
-    class?: HTMLAttributes['class']
-  }
->()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <div
-    class="flex items-center border-b px-3"
-    cmdk-input-wrapper
-  >
-    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <ComboboxInput
-      v-bind="{ ...forwardedProps, ...$attrs }"
-      auto-focus
-      :class="
-        cn(
-          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-          props.class
-        )
-      "
-    />
-  </div>
-</template>

package/src/components/ui/command/CommandItem.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ComboboxItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ComboboxItem
-    v-bind="forwarded"
-    :class="
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class
-      )
-    "
-  >
-    <slot />
-  </ComboboxItem>
-</template>

package/src/components/ui/command/CommandList.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
-  dismissable: false,
-})
-const emits = defineEmits<ComboboxContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ComboboxContent
-    v-bind="forwarded"
-    :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)"
-  >
-    <div role="presentation">
-      <slot />
-    </div>
-  </ComboboxContent>
-</template>

package/src/components/ui/command/CommandSeparator.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { ComboboxSeparatorProps } from 'radix-vue'
-import { ComboboxSeparator } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ComboboxSeparator
-    v-bind="delegatedProps"
-    :class="cn('-mx-1 h-px bg-border', props.class)"
-  >
-    <slot />
-  </ComboboxSeparator>
-</template>

package/src/components/ui/command/CommandShortcut.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { HTMLAttributes } from 'vue'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
-    <slot />
-  </span>
-</template>

package/src/components/ui/dialog/Dialog.vue

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

package/src/components/ui/dialog/DialogClose.vue

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

package/src/components/ui/dialog/DialogContent.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { X } from 'lucide-vue-next'
-import {
-  DialogClose,
-  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    />
-    <DialogContent
-      v-bind="forwarded"
-      :class="
-        cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          props.class
-        )
-      "
-    >
-      <slot />
-
-      <DialogClose
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-      >
-        <X class="w-4 h-4" />
-        <span class="sr-only">Close</span>
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
-</template>

package/src/components/ui/dialog/DialogDescription.vue

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

package/src/components/ui/dialog/DialogFooter.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { HTMLAttributes } from 'vue'
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>
-
-<template>
-  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/dialog/DialogHeader.vue

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

package/src/components/ui/dialog/DialogScrollContent.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { X } from 'lucide-vue-next'
-import {
-  DialogClose,
-  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    >
-      <DialogContent
-        :class="
-          cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-            props.class
-          )
-        "
-        v-bind="forwarded"
-        @pointer-down-outside="
-          (event) => {
-            const originalEvent = event.detail.originalEvent
-            const target = originalEvent.target as HTMLElement
-            if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-              event.preventDefault()
-            }
-          }
-        "
-      >
-        <slot />
-
-        <DialogClose class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary">
-          <X class="w-4 h-4" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
-</template>

package/src/components/ui/dialog/DialogTitle.vue

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

package/src/components/ui/dialog/DialogTrigger.vue

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