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

package/dist/runtime/components/Drawer.vue

@@ -1,9 +1,51 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/drawer";
-const appConfig = _appConfig;
-const drawer = tv({ extend: tv(theme), ...appConfig.ui?.drawer || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
+import type { DialogContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/drawer'
+
+const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
+
+const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
+
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'dismissible' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  title?: string
+  description?: string
+  /** The content of the drawer. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the drawer.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Render the drawer in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof drawer.slots>
+}
+
+export interface DrawerEmits extends DrawerRootEmits {}
+
+export interface DrawerSlots {
+  default(props?: {}): any
+  handle(props?: {}): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/DropdownMenu.vue

@@ -1,9 +1,69 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/dropdown-menu";
-const appConfig = _appConfig;
-const dropdownMenu = tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps, DropdownMenuTriggerProps, DropdownMenuItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/dropdown-menu'
+import type { AvatarProps, KbdProps, LinkProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof theme> } }
+
+const dropdownMenu = tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu || {}) })
+
+export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<DropdownMenuItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The item type.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'separator' | 'link'
+  slot?: string
+  open?: boolean
+  defaultOpen?: boolean
+  children?: DropdownMenuItem[] | DropdownMenuItem[][]
+  select?(e: Event): void
+}
+
+type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
+
+export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>, Pick<DropdownMenuTriggerProps, 'disabled'> {
+  size?: DropdownMenuVariants['size']
+  items?: T[] | T[][]
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8 }
+   */
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof dropdownMenu.slots>
+}
+
+export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type DropdownMenuSlots<T extends { slot?: string }> = {
+  'default'(props: { open: boolean }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
 </script>
 
 <script setup lang="ts" generic="T extends DropdownMenuItem">

package/dist/runtime/components/DropdownMenuContent.vue

@@ -1,7 +1,25 @@
-<script>
-import { tv } from "tailwind-variants";
-import theme from "#build/ui/dropdown-menu";
-const dropdownMenu = tv(theme)();
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DropdownMenuContentProps as RadixDropdownMenuContentProps, DropdownMenuContentEmits as RadixDropdownMenuContentEmits } from 'radix-vue'
+import theme from '#build/ui/dropdown-menu'
+import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots } from '../types'
+
+const _dropdownMenu = tv(theme)()
+
+interface DropdownMenuContentProps<T> extends Omit<RadixDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
+  items?: T[] | T[][]
+  portal?: boolean
+  sub?: boolean
+  class?: any
+  ui: typeof _dropdownMenu
+  uiOverride?: any
+}
+
+interface DropdownMenuContentEmits extends RadixDropdownMenuContentEmits {}
+
+type DropdownMenuContentSlots<T extends { slot?: string }> = Omit<DropdownMenuSlots<T>, 'default'> & {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts" generic="T extends DropdownMenuItem">

package/dist/runtime/components/Form.vue

@@ -1,15 +1,40 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/form";
-const appConfig = _appConfig;
-const form = tv({ extend: tv(theme), ...appConfig.ui?.form || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/form'
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '../types/form'
+
+const appConfig = _appConfig as AppConfig & { ui: { form: Partial<typeof theme> } }
+
+const form = tv({ extend: tv(theme), ...(appConfig.ui?.form || {}) })
+
+export interface FormProps<T extends object> {
+  id?: string | number
+  schema?: FormSchema<T>
+  state: Partial<T>
+  validate?: (state: Partial<T>) => Promise<FormError[]> | FormError[]
+  validateOn?: FormInputEvents[]
+  disabled?: boolean
+  validateOnInputDelay?: number
+  class?: any
+  onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>)
+}
+
+export interface FormEmits<T extends object> {
+  (e: 'submit', payload: FormSubmitEvent<T>): void
+  (e: 'error', payload: FormErrorEvent): void
+}
+
+export interface FormSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script lang="ts" setup generic="T extends object">
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId } from 'vue'
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from 'vue'
 import { useEventBus } from '@vueuse/core'
-import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey } from '../composables/useFormField'
+import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from '../composables/useFormField'
 import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
 import { FormValidationException } from '../types/form'
 
@@ -22,13 +47,14 @@ const props = withDefaults(defineProps<FormProps<T>>(), {
 const emits = defineEmits<FormEmits<T>>()
 defineSlots<FormSlots>()
 
-const formId = props.id ?? useId()
+const formId = props.id ?? useId() as string
 
 const bus = useEventBus<FormEvent>(`form-${formId}`)
 const parentBus = inject(
   formBusInjectionKey,
   undefined
 )
+
 provide(formBusInjectionKey, bus)
 
 const nestedForms = ref<Map<string | number, { validate: () => any }>>(new Map())
@@ -62,11 +88,6 @@ onUnmounted(() => {
   }
 })
 
-provide(formOptionsInjectionKey, computed(() => ({
-  disabled: props.disabled,
-  validateOnInputDelay: props.validateOnInputDelay
-})))
-
 const errors = ref<FormErrorWithId[]>([])
 provide('form-errors', errors)
 
@@ -123,7 +144,8 @@ async function _validate(opts: { name?: string | string[], silent?: boolean, nes
     errors.value = await getErrors()
   }
 
-  const childErrors = nestedValidatePromises ? await Promise.all(nestedValidatePromises) : []
+  const childErrors = (await Promise.all(nestedValidatePromises)).filter(val => val)
+
   if (errors.value.length + childErrors.length > 0) {
     if (opts.silent) return false
     throw new FormValidationException(formId, errors.value, childErrors)
@@ -132,16 +154,18 @@ async function _validate(opts: { name?: string | string[], silent?: boolean, nes
   return props.state as T
 }
 
-async function onSubmit(payload: Event) {
-  const event = payload as SubmitEvent
+const loading = ref(false)
+provide(formLoadingInjectionKey, readonly(loading))
+
+async function onSubmitWrapper(payload: Event) {
+  loading.value = true
+
+  const event = payload as FormSubmitEvent<any>
 
   try {
     await _validate({ nested: true })
-    const submitEvent: FormSubmitEvent<any> = {
-      ...event,
-      data: props.state
-    }
-    emits('submit', submitEvent)
+    event.data = props.state
+    await props.onSubmit?.(event)
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
       throw error
@@ -152,11 +176,19 @@ async function onSubmit(payload: Event) {
       errors: error.errors,
       childrens: error.childrens
     }
-
     emits('error', errorEvent)
   }
+
+  loading.value = false
 }
 
+const disabled = computed(() => props.disabled || loading.value)
+
+provide(formOptionsInjectionKey, computed(() => ({
+  disabled: disabled.value,
+  validateOnInputDelay: props.validateOnInputDelay
+})))
+
 defineExpose<Form<T>>({
   validate: _validate,
   errors,
@@ -172,7 +204,7 @@ defineExpose<Form<T>>({
   },
 
   async submit() {
-    await onSubmit(new Event('submit'))
+    await onSubmitWrapper(new Event('submit'))
   },
 
   getErrors(name?: string) {
@@ -190,7 +222,7 @@ defineExpose<Form<T>>({
     }
   },
 
-  disabled: computed(() => props.disabled)
+  disabled
 })
 </script>
 
@@ -199,7 +231,7 @@ defineExpose<Form<T>>({
     :is="parentBus ? 'div' : 'form'"
     :id="formId"
     :class="form({ class: props.class })"
-    @submit.prevent="onSubmit"
+    @submit.prevent="onSubmitWrapper"
   >
     <slot />
   </component>

package/dist/runtime/components/FormField.vue

@@ -1,16 +1,45 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/form-field";
-const appConfig = _appConfig;
-const formField = tv({ extend: tv(theme), ...appConfig.ui?.formField || {} });
+<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/form-field'
+
+const appConfig = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
+
+const formField = tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })
+
+type FormFieldVariants = VariantProps<typeof formField>
+
+export interface FormFieldProps {
+  name?: string
+  label?: string
+  description?: string
+  help?: string
+  error?: string | boolean
+  hint?: string
+  size?: FormFieldVariants['size']
+  required?: boolean
+  eagerValidation?: boolean
+  validateOnInputDelay?: number
+  class?: any
+  ui?: Partial<typeof formField.slots>
+}
+
+export interface FormFieldSlots {
+  label(props: { label?: string }): any
+  hint(props: { hint?: string }): any
+  description(props: { description?: string }): any
+  help(props: { help?: string }): any
+  error(props: { error?: string | boolean }): any
+  default(props: { error?: string | boolean }): any
+}
 </script>
 
 <script setup lang="ts">
 import { computed, ref, inject, provide, type Ref, useId } from 'vue'
 import { Label } from 'radix-vue'
-import { formFieldInjectionKey } from '../composables/useFormField'
-import type { FormError } from '../types/form'
+import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
+import type { FormError, FormFieldInjectedOptions } from '../types/form'
 
 const props = defineProps<FormFieldProps>()
 const slots = defineSlots<FormFieldSlots>()
@@ -22,23 +51,19 @@ const ui = computed(() => formField({
 
 const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
-const error = computed(() => {
-  return (props.error && typeof props.error === 'string')
-    || typeof props.error === 'boolean'
-    ? props.error
-    : formErrors?.value?.find(error => error.name === props.name)?.message
-})
+const error = computed(() => props.error || formErrors?.value?.find(error => error.name === props.name)?.message)
 
 const id = ref(useId())
 
+provide(inputIdInjectionKey, id)
+
 provide(formFieldInjectionKey, computed(() => ({
-  id: id.value,
   error: error.value,
   name: props.name,
   size: props.size,
   eagerValidation: props.eagerValidation,
   validateOnInputDelay: props.validateOnInputDelay
-})))
+}) as FormFieldInjectedOptions<FormFieldProps>))
 </script>
 
 <template>

package/dist/runtime/components/Icon.vue

@@ -1,5 +1,15 @@
-<script>
-
+<script lang="ts">
+export interface IconProps {
+  name: string
+  mode?: 'svg' | 'css'
+  size?: string | number
+  customize?: (
+    content: string,
+    name?: string,
+    prefix?: string,
+    provider?: string
+  ) => string
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Input.vue

@@ -1,9 +1,49 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/input";
-const appConfig = _appConfig;
-const input = tv({ extend: tv(theme), ...appConfig.ui?.input || {} });
+<script lang="ts">
+import type { InputHTMLAttributes } from 'vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/input'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { input: Partial<typeof theme> } }
+
+const input = tv({ extend: tv(theme), ...(appConfig.ui?.input || {}) })
+
+type InputVariants = VariantProps<typeof input>
+
+export interface InputProps extends UseComponentIconsProps {
+  id?: string
+  name?: string
+  type?: InputHTMLAttributes['type']
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  color?: InputVariants['color']
+  variant?: InputVariants['variant']
+  size?: InputVariants['size']
+  required?: boolean
+  autocomplete?: InputHTMLAttributes['autocomplete']
+  autofocus?: boolean
+  autofocusDelay?: number
+  disabled?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  ui?: PartialString<typeof input.slots>
+}
+
+export interface InputEmits {
+  (e: 'update:modelValue', payload: string | number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface InputSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/InputMenu.vue

@@ -1,9 +1,116 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/input-menu";
-const appConfig = _appConfig;
-const inputMenu = tv({ extend: tv(theme), ...appConfig.ui?.inputMenu || {} });
+<script lang="ts">
+import type { InputHTMLAttributes } from 'vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxItemProps, ComboboxArrowProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/input-menu'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AcceptableValue, ArrayOrWrapped, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { inputMenu: Partial<typeof theme> } }
+
+const inputMenu = tv({ extend: tv(theme), ...(appConfig.ui?.inputMenu || {}) })
+
+export interface InputMenuItem extends Pick<ComboboxItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  chip?: ChipProps
+  /**
+   * The item type.
+   * @defaultValue 'item'
+   */
+  type?: 'label' | 'separator' | 'item'
+}
+
+type InputMenuVariants = VariantProps<typeof inputMenu>
+
+export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValue' | 'defaultValue' | 'selectedValue' | 'open' | 'defaultOpen' | 'searchTerm' | 'multiple' | 'disabled' | 'name' | 'resetSearchTermOnBlur'>, UseComponentIconsProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  id?: string
+  type?: InputHTMLAttributes['type']
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  color?: InputMenuVariants['color']
+  variant?: InputMenuVariants['variant']
+  size?: InputMenuVariants['size']
+  required?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The icon displayed to open the menu.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The icon displayed to delete a tag.
+   * Works only when `multiple` is `true`.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  deleteIcon?: string
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8, position: 'popper' }
+   */
+  content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<ComboboxArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Whether to filter items or not, can be an array of fields to filter.
+   * When `false`, items will not be filtered which is useful for custom filtering.
+   * @defaultValue ['label']
+   */
+  filter?: boolean | string[]
+  /**
+   * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+   * @defaultValue undefined
+   */
+  valueKey?: keyof T
+  items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  ui?: PartialString<typeof inputMenu.slots>
+}
+
+export type InputMenuEmits<T> = ComboboxRootEmits<T> & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type InputMenuSlots<T> = {
+  'leading'(props: { modelValue: T, open: boolean, ui: any }): any
+  'trailing'(props: { modelValue: T, open: boolean, ui: any }): any
+  'empty'(props: { searchTerm?: string }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+  'tags-item-text': SlotProps<T>
+  'tags-item-delete': SlotProps<T>
+}
 </script>
 
 <script setup lang="ts" generic="T extends InputMenuItem | AcceptableValue">

package/dist/runtime/components/Kbd.vue

@@ -1,9 +1,31 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/kbd";
-const appConfig = _appConfig;
-const kbd = tv({ extend: tv(theme), ...appConfig.ui?.kbd || {} });
+<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/kbd'
+import type { KbdKey } from '../composables/useKbd'
+
+const appConfig = _appConfig as AppConfig & { ui: { kbd: Partial<typeof theme> } }
+
+const kbd = tv({ extend: tv(theme), ...(appConfig.ui?.kbd || {}) })
+
+type KbdVariants = VariantProps<typeof kbd>
+
+export interface KbdProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'kbd'
+   */
+  as?: any
+  value?: KbdKey | string
+  variant?: KbdVariants['variant']
+  size?: KbdVariants['size']
+  class?: any
+}
+
+export interface KbdSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">