@nuxt/ui 3.0.0-alpha.0 → 3.0.0-alpha.10

package/dist/runtime/components/Carousel.vue

@@ -0,0 +1,322 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import type { AcceptableValue } from 'reka-ui'
+import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
+import type { AutoplayOptionsType } from 'embla-carousel-autoplay'
+import type { AutoScrollOptionsType } from 'embla-carousel-auto-scroll'
+import type { AutoHeightOptionsType } from 'embla-carousel-auto-height'
+import type { ClassNamesOptionsType } from 'embla-carousel-class-names'
+import type { FadeOptionsType } from 'embla-carousel-fade'
+import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/carousel'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import type { ButtonProps } from '../types'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { carousel: Partial<typeof theme> } }
+
+const carousel = tv({ extend: tv(theme), ...(appConfig.ui?.carousel || {}) })
+
+type CarouselVariants = VariantProps<typeof carousel>
+
+export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * Configure the prev button when arrows are enabled.
+   * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
+   */
+  prev?: ButtonProps
+  /**
+   * The icon displayed in the prev button.
+   * @defaultValue appConfig.ui.icons.arrowLeft
+   */
+  prevIcon?: string
+  /**
+   * Configure the next button when arrows are enabled.
+   * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
+   */
+  next?: ButtonProps
+  /**
+   * The icon displayed in the next button.
+   * @defaultValue appConfig.ui.icons.arrowRight
+   */
+  nextIcon?: string
+  /**
+   * Display prev and next buttons to scroll the carousel.
+   * @defaultValue false
+   */
+  arrows?: boolean
+  /**
+   * Display dots to scroll to a specific slide.
+   * @defaultValue false
+   */
+  dots?: boolean
+  orientation?: CarouselVariants['orientation']
+  items?: T[]
+  /**
+   * Enable Autoplay plugin
+   * @link https://www.embla-carousel.com/plugins/autoplay/
+   */
+  autoplay?: boolean | AutoplayOptionsType
+  /**
+   * Enable Auto Scroll plugin
+   * @link https://www.embla-carousel.com/plugins/auto-scroll/
+   */
+  autoScroll?: boolean | AutoScrollOptionsType
+  /**
+   * Enable Auto Height plugin
+   * @link https://www.embla-carousel.com/plugins/auto-height/
+   */
+  autoHeight?: boolean | AutoHeightOptionsType
+  /**
+   * Enable Class Names plugin
+   * @link https://www.embla-carousel.com/plugins/class-names/
+   */
+  classNames?: boolean | ClassNamesOptionsType
+  /**
+   * Enable Fade plugin
+   * @link https://www.embla-carousel.com/plugins/fade/
+   */
+  fade?: boolean | FadeOptionsType
+  /**
+   * Enable Wheel Gestures plugin
+   * @link https://www.embla-carousel.com/plugins/wheel-gestures/
+   */
+  wheelGestures?: boolean | WheelGesturesPluginOptions
+  class?: any
+  ui?: PartialString<typeof carousel.slots>
+}
+
+export type CarouselSlots<T> = {
+  default(props: { item: T, index: number }): any
+}
+
+extendDevtoolsMeta({ example: 'CarouselExample' })
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue">
+import { computed, ref, watch, onMounted } from 'vue'
+import useEmblaCarousel from 'embla-carousel-vue'
+import { Primitive, useForwardProps } from 'reka-ui'
+import { reactivePick, computedAsync } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
+import UButton from './Button.vue'
+
+const props = withDefaults(defineProps<CarouselProps<T>>(), {
+  orientation: 'horizontal',
+  arrows: false,
+  dots: false,
+  // Embla Options
+  active: true,
+  align: 'center',
+  breakpoints: () => ({}),
+  containScroll: 'trimSnaps',
+  dragFree: false,
+  dragThreshold: 10,
+  duration: 25,
+  inViewThreshold: 0,
+  loop: false,
+  skipSnaps: false,
+  slidesToScroll: 1,
+  startIndex: 0,
+  watchDrag: true,
+  watchResize: true,
+  watchSlides: true,
+  watchFocus: true,
+  // Embla Plugins
+  autoplay: false,
+  autoScroll: false,
+  autoHeight: false,
+  classNames: false,
+  fade: false,
+  wheelGestures: false
+})
+defineSlots<CarouselSlots<T>>()
+
+const appConfig = useAppConfig()
+const { dir, t } = useLocale()
+const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
+
+const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft))
+const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight))
+
+const ui = computed(() => carousel({
+  orientation: props.orientation
+}))
+
+const options = computed<EmblaOptionsType>(() => ({
+  ...(props.fade ? { align: 'center', containScroll: false } : {}),
+  ...rootProps.value,
+  axis: props.orientation === 'horizontal' ? 'x' : 'y',
+  direction: dir.value === 'rtl' ? 'rtl' : 'ltr'
+}))
+
+const plugins = computedAsync<EmblaPluginType[]>(async () => {
+  const plugins = []
+
+  if (props.autoplay) {
+    const AutoplayPlugin = await import('embla-carousel-autoplay').then(r => r.default)
+    plugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
+  }
+
+  if (props.autoScroll) {
+    const AutoScrollPlugin = await import('embla-carousel-auto-scroll').then(r => r.default)
+    plugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
+  }
+
+  if (props.autoHeight) {
+    const AutoHeightPlugin = await import('embla-carousel-auto-height').then(r => r.default)
+    plugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
+  }
+
+  if (props.classNames) {
+    const ClassNamesPlugin = await import('embla-carousel-class-names').then(r => r.default)
+    plugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
+  }
+
+  if (props.fade) {
+    const FadePlugin = await import('embla-carousel-fade').then(r => r.default)
+    plugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
+  }
+
+  if (props.wheelGestures) {
+    const { WheelGesturesPlugin } = await import('embla-carousel-wheel-gestures')
+    plugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
+  }
+
+  return plugins
+})
+
+const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value)
+
+watch([options, plugins], () => {
+  emblaApi.value?.reInit(options.value, plugins.value)
+})
+
+function scrollPrev() {
+  emblaApi.value?.scrollPrev()
+}
+function scrollNext() {
+  emblaApi.value?.scrollNext()
+}
+function scrollTo(index: number) {
+  emblaApi.value?.scrollTo(index)
+}
+
+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()
+  }
+}
+
+const canScrollNext = ref(false)
+const canScrollPrev = ref(false)
+const selectedIndex = ref<number>(0)
+const scrollSnaps = ref<number[]>([])
+
+function onInit(api: EmblaCarouselType) {
+  scrollSnaps.value = api?.scrollSnapList() || []
+}
+function onSelect(api: EmblaCarouselType) {
+  canScrollNext.value = api?.canScrollNext() || false
+  canScrollPrev.value = api?.canScrollPrev() || false
+  selectedIndex.value = api?.selectedScrollSnap() || 0
+}
+
+onMounted(() => {
+  if (!emblaApi.value) {
+    return
+  }
+
+  emblaApi.value?.on('init', onInit)
+  emblaApi.value?.on('init', onSelect)
+  emblaApi.value?.on('reInit', onInit)
+  emblaApi.value?.on('reInit', onSelect)
+  emblaApi.value?.on('select', onSelect)
+})
+
+defineExpose({
+  emblaRef,
+  emblaApi
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    @keydown="onKeyDown"
+  >
+    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div :class="ui.container({ class: props.ui?.container })">
+        <div
+          v-for="(item, index) in items"
+          :key="index"
+          role="group"
+          aria-roledescription="slide"
+          :class="ui.item({ class: props.ui?.item })"
+        >
+          <slot :item="item" :index="index" />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="arrows || dots" :class="ui.controls({ class: props.ui?.controls })">
+      <div v-if="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
+        <UButton
+          :disabled="!canScrollPrev"
+          :icon="prevIcon"
+          size="md"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.prev')"
+          v-bind="typeof prev === 'object' ? prev : undefined"
+          :class="ui.prev({ class: props.ui?.prev })"
+          @click="scrollPrev"
+        />
+        <UButton
+          :disabled="!canScrollNext"
+          :icon="nextIcon"
+          size="md"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.next')"
+          v-bind="typeof next === 'object' ? next : undefined"
+          :class="ui.next({ class: props.ui?.next })"
+          @click="scrollNext"
+        />
+      </div>
+
+      <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
+        <template v-for="(_, index) in scrollSnaps" :key="index">
+          <button
+            :aria-label="t('carousel.goto', { slide: index + 1 })"
+            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            @click="scrollTo(index)"
+          />
+        </template>
+      </div>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/Checkbox.vue

@@ -1,47 +1,79 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/checkbox";
-const appConfig = _appConfig;
-const checkbox = tv({ extend: tv(theme), ...appConfig.ui?.checkbox || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { CheckboxRootProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/checkbox'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+
+const appConfig = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
+
+const checkbox = tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })
+
+type CheckboxVariants = VariantProps<typeof checkbox>
+
+export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  label?: string
+  description?: string
+  color?: CheckboxVariants['color']
+  size?: CheckboxVariants['size']
+  /**
+   * The icon displayed when checked.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  icon?: string
+  /**
+   * The icon displayed when the checkbox is indeterminate.
+   * @defaultValue appConfig.ui.icons.minus
+   */
+  indeterminateIcon?: string
+  class?: any
+  ui?: Partial<typeof checkbox.slots>
+}
+
+export type CheckboxEmits = {
+  change: [payload: Event]
+}
+
+export interface CheckboxSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
+
+extendDevtoolsMeta({ defaultProps: { label: 'Check me!' } })
 </script>
 
 <script setup lang="ts">
 import { computed, useId } from 'vue'
-import { CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'radix-vue'
+import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
 
 const props = defineProps<CheckboxProps>()
 const slots = defineSlots<CheckboxSlots>()
 const emits = defineEmits<CheckboxEmits>()
 
-const modelValue = defineModel<boolean | undefined>({ default: undefined })
+const modelValue = defineModel<boolean | 'indeterminate'>({ default: undefined })
 
-const rootProps = useForwardProps(reactivePick(props, 'required', 'value'))
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
 
 const appConfig = useAppConfig()
 const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<CheckboxProps>(props)
 const id = _id.value ?? useId()
 
-const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
-
-const checked = computed({
-  get() {
-    return indeterminate.value ? 'indeterminate' : modelValue.value
-  },
-  set(value) {
-    modelValue.value = value === 'indeterminate' ? undefined : value
-  }
-})
-
 const ui = computed(() => checkbox({
   size: size.value,
   color: color.value,
   required: props.required,
   disabled: disabled.value,
-  checked: (modelValue.value ?? props.defaultValue) || indeterminate.value
+  checked: Boolean(modelValue.value ?? props.defaultValue)
 }))
 
 function onUpdate(value: any) {
@@ -53,23 +85,25 @@ function onUpdate(value: any) {
 }
 </script>
 
+<!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
-        v-model:checked="checked"
-        :default-checked="defaultValue"
         v-bind="rootProps"
+        v-model="modelValue"
         :name="name"
         :disabled="disabled"
         :class="ui.base({ class: props.ui?.base })"
-        @update:checked="onUpdate"
+        @update:model-value="onUpdate"
       >
-        <CheckboxIndicator as-child>
-          <UIcon v-if="indeterminate" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
-          <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
-        </CheckboxIndicator>
+        <template #default="{ modelValue }">
+          <CheckboxIndicator as-child>
+            <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
+            <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
+          </CheckboxIndicator>
+        </template>
       </CheckboxRoot>
     </div>
 
@@ -85,5 +119,5 @@ function onUpdate(value: any) {
         </slot>
       </p>
     </div>
-  </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Chip.vue

@@ -1,16 +1,54 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/chip";
-const appConfig = _appConfig;
-const chip = tv({ extend: tv(theme), ...appConfig.ui?.chip || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/chip'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+
+const appConfig = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
+
+const chip = tv({ extend: tv(theme), ...(appConfig.ui?.chip || {}) })
+
+type ChipVariants = VariantProps<typeof chip>
+
+export interface ChipProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /** Display some text inside the chip. */
+  text?: string | number
+  color?: ChipVariants['color']
+  size?: ChipVariants['size']
+  position?: ChipVariants['position']
+  /** When `true`, translate the chip at the edge for non rounded elements. */
+  inset?: boolean
+  /** When `true`, render the chip relatively to the parent. */
+  standalone?: boolean
+  class?: any
+  ui?: Partial<typeof chip.slots>
+}
+
+export interface ChipEmits {
+  (e: 'update:show', payload: boolean): void
+}
+
+export interface ChipSlots {
+  default(props?: {}): any
+  content(props?: {}): any
+}
+
+extendDevtoolsMeta({ example: 'ChipExample' })
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Primitive } from 'radix-vue'
+import { Primitive, Slot } from 'reka-ui'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<ChipProps>(), {
   inset: false,
   standalone: false
@@ -32,7 +70,9 @@ const ui = computed(() => chip({
 
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
-    <slot />
+    <Slot v-bind="$attrs">
+      <slot />
+    </Slot>
 
     <span v-if="show" :class="ui.base({ class: props.ui?.base })">
       <slot name="content">

package/dist/runtime/components/Collapsible.vue

@@ -1,20 +1,44 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/collapsible";
-const appConfig = _appConfig;
-const collapsible = tv({ extend: tv(theme), ...appConfig.ui?.collapsible || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/collapsible'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+
+const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
+
+const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
+
+export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  ui?: Partial<typeof collapsible.slots>
+}
+
+export interface CollapsibleEmits extends CollapsibleRootEmits {}
+
+export interface CollapsibleSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
+
+extendDevtoolsMeta({ example: 'CollapsibleExample' })
 </script>
 
 <script setup lang="ts">
-import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'radix-vue'
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 
 const props = defineProps<CollapsibleProps>()
 const emits = defineEmits<CollapsibleEmits>()
 const slots = defineSlots<CollapsibleSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emits)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = collapsible()