@nuxt/ui 3.0.0-alpha.8 → 3.0.0-beta.1

package/dist/runtime/components/Slideover.vue

@@ -1,15 +1,15 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/slideover'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 
-const appConfig = _appConfig as AppConfig & { ui: { slideover: Partial<typeof theme> } }
+const appConfigSlideover = _appConfig as AppConfig & { ui: { slideover: Partial<typeof theme> } }
 
-const slideover = tv({ extend: tv(theme), ...(appConfig.ui?.slideover || {}) })
+const slideover = tv({ extend: tv(theme), ...(appConfigSlideover.ui?.slideover || {}) })
 
 type SlideoverVariants = VariantProps<typeof slideover>
 
@@ -39,22 +39,24 @@ export interface SlideoverProps extends DialogRootProps {
    * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
    * @defaultValue true
    */
-  close?: ButtonProps | boolean
+  close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
    */
   closeIcon?: string
   /**
-   * When `true`, the slideover will not close when clicking outside.
-   * @defaultValue false
+   * When `false`, the slideover will not close when clicking outside or pressing escape.
+   * @defaultValue true
    */
-  preventClose?: boolean
+  dismissible?: boolean
   class?: any
   ui?: Partial<typeof slideover.slots>
 }
 
-export interface SlideoverEmits extends DialogRootEmits {}
+export interface SlideoverEmits extends DialogRootEmits {
+  'after:leave': []
+}
 
 export interface SlideoverSlots {
   default(props: { open: boolean }): any
@@ -66,15 +68,14 @@ export interface SlideoverSlots {
   body(props?: {}): any
   footer(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'SlideoverExample' })
 </script>
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
-import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<SlideoverProps>(), {
@@ -83,26 +84,32 @@ const props = withDefaults(defineProps<SlideoverProps>(), {
   overlay: true,
   transition: true,
   modal: true,
+  dismissible: true,
   side: 'right'
 })
 const emits = defineEmits<SlideoverEmits>()
 const slots = defineSlots<SlideoverSlots>()
 
+const { t } = useLocale()
+const appConfig = useAppConfig()
+
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
-  if (props.preventClose) {
+  if (!props.dismissible) {
     return {
       pointerDownOutside: (e: Event) => e.preventDefault(),
-      interactOutside: (e: Event) => e.preventDefault()
+      interactOutside: (e: Event) => e.preventDefault(),
+      escapeKeyDown: (e: Event) => e.preventDefault(),
+      closeAutoFocus: (e: Event) => e.preventDefault()
     }
   }
 
-  return {}
+  return {
+    closeAutoFocus: (e: Event) => e.preventDefault()
+  }
 })
 
-const appConfig = useAppConfig()
-
 const ui = computed(() => slideover({
   transition: props.transition,
   side: props.side
@@ -111,28 +118,44 @@ const ui = computed(() => slideover({
 
 <template>
   <DialogRoot v-slot="{ open }" v-bind="rootProps">
-    <DialogTrigger v-if="!!slots.default" as-child>
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </DialogTrigger>
 
     <DialogPortal :disabled="!portal">
       <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-      <DialogContent :data-side="side" :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+      <DialogContent :data-side="side" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
+        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
+          <DialogTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DialogTitle>
+
+          <DialogDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DialogDescription>
+        </VisuallyHidden>
+
         <slot name="content">
           <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
             <slot name="header">
-              <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-                <slot name="title">
-                  {{ title }}
-                </slot>
-              </DialogTitle>
-
-              <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-                <slot name="description">
-                  {{ description }}
-                </slot>
-              </DialogDescription>
+              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DialogTitle>
+
+                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DialogDescription>
+              </div>
 
               <DialogClose as-child>
                 <slot name="close" :ui="ui">
@@ -142,8 +165,8 @@ const ui = computed(() => slideover({
                     size="md"
                     color="neutral"
                     variant="ghost"
-                    aria-label="Close"
-                    v-bind="typeof close === 'object' ? close : undefined"
+                    :aria-label="t('slideover.close')"
+                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
                     :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>

package/dist/runtime/components/Slider.vue

@@ -1,13 +1,14 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { SliderRootProps } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { SliderRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/slider'
+import { tv } from '../utils/tv'
 
-const appConfig = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
+const appConfigSlider = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
 
-const slider = tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })
+const slider = tv({ extend: tv(theme), ...(appConfigSlider.ui?.slider || {}) })
 
 type SliderVariants = VariantProps<typeof slider>
 
@@ -38,7 +39,7 @@ export interface SliderEmits {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'radix-vue'
+import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useFormField } from '../composables/useFormField'
 
@@ -54,7 +55,7 @@ const modelValue = defineModel<number | number[]>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
 
-const { id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SliderProps>(props)
+const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<SliderProps>(props)
 
 const defaultSliderValue = computed(() => {
   if (typeof props.defaultValue === 'number') {
@@ -94,7 +95,7 @@ function onChange(value: any) {
 
 <template>
   <SliderRoot
-    v-bind="rootProps"
+    v-bind="{ ...rootProps, ...ariaAttrs }"
     :id="id"
     v-model="sliderValue"
     :name="name"

package/dist/runtime/components/Stepper.vue

@@ -0,0 +1,170 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { StepperRootProps, StepperRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/stepper'
+import { tv } from '../utils/tv'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfigStepper = _appConfig as AppConfig & { ui: { stepper: Partial<typeof theme> } }
+
+const stepper = tv({ extend: tv(theme), ...(appConfigStepper.ui?.stepper || {}) })
+
+type StepperVariants = VariantProps<typeof stepper>
+
+export interface StepperItem {
+  slot?: string
+  value?: string | number
+  title?: string
+  description?: string
+  icon?: string
+  content?: string
+  disabled?: boolean
+}
+
+export interface StepperProps<T extends StepperItem> extends Pick<StepperRootProps, 'linear'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items: T[]
+  size?: StepperVariants['size']
+  color?: StepperVariants['color']
+  orientation?: StepperVariants['orientation']
+  /**
+   * The value of the step that should be active when initially rendered. Use when you do not need to control the state of the steps.
+   */
+  defaultValue?: string | number
+  disabled?: boolean
+  ui?: Partial<typeof stepper.slots>
+  class?: any
+}
+
+export type StepperEmits<T> = Omit<StepperRootEmits, 'update:modelValue'> & {
+  next: [payload: T]
+  prev: [payload: T]
+}
+
+type SlotProps<T extends StepperItem> = (props: { item: T }) => any
+
+export type StepperSlots<T extends StepperItem> = {
+  indicator: SlotProps<T>
+  title: SlotProps<T>
+  description: SlotProps<T>
+  content: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends StepperItem">
+import { computed } from 'vue'
+import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription, useForwardProps } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import UIcon from './Icon.vue'
+
+const props = withDefaults(defineProps<StepperProps<T>>(), {
+  orientation: 'horizontal',
+  linear: true
+})
+const emits = defineEmits<StepperEmits<T>>()
+const slots = defineSlots<StepperSlots<T>>()
+
+const modelValue = defineModel<string | number>()
+
+const rootProps = useForwardProps(reactivePick(props, 'as', 'orientation', 'linear'))
+
+const ui = computed(() => stepper({
+  orientation: props.orientation,
+  size: props.size,
+  color: props.color
+}))
+
+const currentStepIndex = computed({
+  get() {
+    const value = modelValue.value ?? props.defaultValue
+
+    return ((typeof value === 'string')
+      ? props.items.findIndex(item => item.value === value)
+      : value) ?? 0
+  },
+  set(value: number) {
+    modelValue.value = props.items?.[value]?.value ?? value
+  }
+})
+
+const currentStep = computed(() => props.items?.[currentStepIndex.value] as T)
+const hasNext = computed(() => currentStepIndex.value < props.items?.length - 1)
+const hasPrev = computed(() => currentStepIndex.value > 0)
+
+defineExpose({
+  next() {
+    if (hasNext.value) {
+      currentStepIndex.value += 1
+      emits('next', currentStep.value)
+    }
+  },
+  prev() {
+    if (hasPrev.value) {
+      currentStepIndex.value -= 1
+      emits('prev', currentStep.value)
+    }
+  },
+  hasNext,
+  hasPrev
+})
+</script>
+
+<template>
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <div :class="ui.header({ class: props.ui?.header })">
+      <StepperItem
+        v-for="(item, count) in items"
+        :key="item.value ?? count"
+        :step="count"
+        :disabled="item.disabled || props.disabled"
+        :class="ui.item({ class: props.ui?.item })"
+      >
+        <div :class="ui.container({ class: props.ui?.container })">
+          <StepperTrigger :class="ui.trigger({ class: props.ui?.trigger })">
+            <StepperIndicator :class="ui.indicator({ class: props.ui?.indicator })">
+              <slot name="indicator" :item="item">
+                <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: props.ui?.indicator })" />
+                <template v-else>
+                  {{ count + 1 }}
+                </template>
+              </slot>
+            </StepperIndicator>
+          </StepperTrigger>
+
+          <StepperSeparator
+            v-if="count < items.length - 1"
+            :class="ui.separator({ class: props.ui?.separator })"
+          />
+        </div>
+
+        <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+          <StepperTitle :class="ui.title({ class: props.ui?.title })">
+            <slot name="title" :item="item">
+              {{ item.title }}
+            </slot>
+          </StepperTitle>
+          <StepperDescription :class="ui.description({ class: props.ui?.description })">
+            <slot name="description" :item="item">
+              {{ item.description }}
+            </slot>
+          </StepperDescription>
+        </div>
+      </StepperItem>
+    </div>
+
+    <div v-if="currentStep?.content || !!slots.content || (currentStep?.slot && !!slots[currentStep.slot]) || (currentStep?.value && !!slots[currentStep.value])" :class="ui.content({ class: props.ui?.description })">
+      <slot
+        :name="!!slots[currentStep?.slot ?? currentStep.value!] ? currentStep.slot ?? currentStep.value : 'content'"
+        :item="currentStep"
+      >
+        {{ currentStep?.content }}
+      </slot>
+    </div>
+  </StepperRoot>
+</template>

package/dist/runtime/components/Switch.vue

@@ -1,19 +1,19 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { SwitchRootProps } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { SwitchRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { PartialString } from '../types/utils'
 
-const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
+const appConfigSwitch = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
 
-const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
+const switchTv = tv({ extend: tv(theme), ...(appConfigSwitch.ui?.switch || {}) })
 
 type SwitchVariants = VariantProps<typeof switchTv>
 
-export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value'> {
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -34,43 +34,40 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
   uncheckedIcon?: string
   label?: string
   description?: string
-  /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */
-  defaultValue?: boolean
   class?: any
   ui?: PartialString<typeof switchTv.slots>
 }
 
-export interface SwitchEmits {
-  (e: 'update:modelValue', payload: boolean): void
-  (e: 'change', payload: Event): void
+export type SwitchEmits = {
+  change: [payload: Event]
 }
 
 export interface SwitchSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { label: 'Switch me!' } })
 </script>
 
 <script setup lang="ts">
 import { computed, useId } from 'vue'
-import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
+import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
 import UIcon from './Icon.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<SwitchProps>()
 const slots = defineSlots<SwitchSlots>()
 const emits = defineEmits<SwitchEmits>()
 
-const modelValue = defineModel<boolean | undefined>({ default: undefined })
+const modelValue = defineModel<boolean>({ default: undefined })
 
 const appConfig = useAppConfig()
-const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
 
-const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SwitchProps>(props)
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<SwitchProps>(props)
 const id = _id.value ?? useId()
 
 const ui = computed(() => switchTv({
@@ -91,17 +88,16 @@ function onUpdate(value: any) {
 </script>
 
 <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 })">
       <SwitchRoot
         :id="id"
-        v-model:checked="modelValue"
-        :default-checked="defaultValue"
-        v-bind="rootProps"
+        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+        v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"
         :class="ui.base({ class: props.ui?.base })"
-        @update:checked="onUpdate"
+        @update:model-value="onUpdate"
       >
         <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })">
           <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
@@ -124,5 +120,5 @@ function onUpdate(value: any) {
         </slot>
       </p>
     </div>
-  </div>
+  </Primitive>
 </template>