fulldev-ui 0.7.0-beta.9 → 0.7.0

package/src/components/ui/card/CardContent.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('p-6 pt-0', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/card/CardDescription.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>
-  <p :class="cn('text-sm text-muted-foreground', props.class)">
-    <slot />
-  </p>
-</template>

package/src/components/ui/card/CardFooter.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 items-center p-6 pt-0', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/card/CardHeader.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 p-6', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/card/CardTitle.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>
-  <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
-    <slot />
-  </h3>
-</template>

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

@@ -1,6 +0,0 @@
-export { default as Card } from './Card.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardFooter } from './CardFooter.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'

package/src/components/ui/carousel/Carousel.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
-import { useProvideCarousel } from './useCarousel'
-
-const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
-  orientation: 'horizontal',
-})
-
-const emits = defineEmits<CarouselEmits>()
-
-const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } =
-  useProvideCarousel(props, emits)
-
-defineExpose({
-  canScrollNext,
-  canScrollPrev,
-  carouselApi,
-  carouselRef,
-  orientation,
-  scrollNext,
-  scrollPrev,
-})
-
-function onKeyDown(event: KeyboardEvent) {
-  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
-  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
-
-  if (event.key === prevKey) {
-    event.preventDefault()
-    scrollPrev()
-
-    return
-  }
-
-  if (event.key === nextKey) {
-    event.preventDefault()
-    scrollNext()
-  }
-}
-</script>
-
-<template>
-  <div
-    :class="cn('relative', props.class)"
-    role="region"
-    aria-roledescription="carousel"
-    tabindex="0"
-    @keydown="onKeyDown"
-  >
-    <slot
-      :can-scroll-next
-      :can-scroll-prev
-      :carousel-api
-      :carousel-ref
-      :orientation
-      :scroll-next
-      :scroll-prev
-    />
-  </div>
-</template>

package/src/components/ui/carousel/CarouselContent.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { WithClassAsProps } from './interface'
-import { useCarousel } from './useCarousel'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<WithClassAsProps>()
-
-const { carouselRef, orientation } = useCarousel()
-</script>
-
-<template>
-  <div
-    ref="carouselRef"
-    class="overflow-hidden"
-  >
-    <div
-      :class="cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', props.class)"
-      v-bind="$attrs"
-    >
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/ui/carousel/CarouselItem.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { WithClassAsProps } from './interface'
-import { useCarousel } from './useCarousel'
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation } = useCarousel()
-</script>
-
-<template>
-  <div
-    role="group"
-    aria-roledescription="slide"
-    :class="cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ui/carousel/CarouselNext.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-import { ArrowRight } from 'lucide-vue-next'
-import type { WithClassAsProps } from './interface'
-import { useCarousel } from './useCarousel'
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation, canScrollNext, scrollNext } = useCarousel()
-</script>
-
-<template>
-  <Button
-    :disabled="!canScrollNext"
-    :class="
-      cn(
-        'touch-manipulation absolute h-8 w-8 rounded-full p-0',
-        orientation === 'horizontal'
-          ? '-right-12 top-1/2 -translate-y-1/2'
-          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-        props.class
-      )
-    "
-    variant="outline"
-    @click="scrollNext"
-  >
-    <slot>
-      <ArrowRight class="h-4 w-4 text-current" />
-      <span class="sr-only">Next Slide</span>
-    </slot>
-  </Button>
-</template>

package/src/components/ui/carousel/CarouselPrevious.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-import { ArrowLeft } from 'lucide-vue-next'
-import type { WithClassAsProps } from './interface'
-import { useCarousel } from './useCarousel'
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation, canScrollPrev, scrollPrev } = useCarousel()
-</script>
-
-<template>
-  <Button
-    :disabled="!canScrollPrev"
-    :class="
-      cn(
-        'touch-manipulation absolute h-8 w-8 rounded-full p-0',
-        orientation === 'horizontal'
-          ? '-left-12 top-1/2 -translate-y-1/2'
-          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-        props.class
-      )
-    "
-    variant="outline"
-    @click="scrollPrev"
-  >
-    <slot>
-      <ArrowLeft class="h-4 w-4 text-current" />
-      <span class="sr-only">Previous Slide</span>
-    </slot>
-  </Button>
-</template>

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

@@ -1,10 +0,0 @@
-export { default as Carousel } from './Carousel.vue'
-export { default as CarouselContent } from './CarouselContent.vue'
-export { default as CarouselItem } from './CarouselItem.vue'
-export { default as CarouselNext } from './CarouselNext.vue'
-export { default as CarouselPrevious } from './CarouselPrevious.vue'
-export type {
-  UnwrapRefCarouselApi as CarouselApi,
-} from './interface'
-
-export { useCarousel } from './useCarousel'

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>