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

package/dist/runtime/components/Link.vue

@@ -1,9 +1,46 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/link";
-const appConfig = _appConfig;
-const link = tv({ extend: tv(theme), ...appConfig.ui?.link || {} });
+<script lang="ts">
+import type { ButtonHTMLAttributes } from 'vue'
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/link'
+import type { NuxtLinkProps } from '#app'
+
+const appConfig = _appConfig as AppConfig & { ui: { link: Partial<typeof theme> } }
+
+const link = tv({ extend: tv(theme), ...(appConfig.ui?.link || {}) })
+
+export interface LinkProps extends NuxtLinkProps {
+  /**
+   * The element or component this component should render as when not a link.
+   * @defaultValue 'button'
+   */
+  as?: any
+  /**
+   * The type of the button when not a link.
+   * @defaultValue 'button'
+   */
+  type?: ButtonHTMLAttributes['type']
+  disabled?: boolean
+  /** Force the link to be active independent of the current route. */
+  active?: boolean
+  /** Will only be active if the current route is an exact match. */
+  exact?: boolean
+  /** Will only be active if the current route query is an exact match. */
+  exactQuery?: boolean
+  /** Will only be active if the current route hash is an exact match. */
+  exactHash?: boolean
+  /** The class to apply when the link is inactive. */
+  inactiveClass?: string
+  custom?: boolean
+  /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
+  raw?: boolean
+  class?: any
+}
+
+export interface LinkSlots {
+  default(props: { active: boolean }): any
+}
 </script>
 
 <script setup lang="ts">
@@ -37,31 +74,31 @@ const ui = computed(() => tv({
   }
 }))
 
-function isLinkActive(slotProps: any) {
+function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   if (props.active !== undefined) {
     return props.active
   }
 
-  if (props.exactQuery && !isEqual(slotProps.route.query, route.query)) {
+  if (props.exactQuery && !isEqual(linkRoute.query, route.query)) {
     return false
   }
-  if (props.exactHash && slotProps.route.hash !== route.hash) {
+  if (props.exactHash && linkRoute.hash !== route.hash) {
     return false
   }
 
-  if (props.exact && slotProps.isExactActive) {
+  if (props.exact && isExactActive) {
     return true
   }
 
-  if (!props.exact && slotProps.isActive) {
+  if (!props.exact && isActive) {
     return true
   }
 
   return false
 }
 
-function resolveLinkClass(slotProps: any) {
-  const active = isLinkActive(slotProps)
+function resolveLinkClass({ route, isActive, isExactActive }: any) {
+  const active = isLinkActive({ route, isActive, isExactActive })
 
   if (props.raw) {
     return [props.class, active ? props.activeClass : props.inactiveClass]
@@ -72,12 +109,39 @@ function resolveLinkClass(slotProps: any) {
 </script>
 
 <template>
-  <NuxtLink v-slot="slotProps" v-bind="nuxtLinkProps" custom>
+  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" custom>
     <template v-if="custom">
-      <slot v-bind="{ ...$attrs, ...slotProps, as, type, disabled, active: isLinkActive(slotProps) }" />
+      <slot
+        v-bind="{
+          ...$attrs,
+          as,
+          type,
+          disabled,
+          href,
+          navigate,
+          rel,
+          target,
+          isExternal,
+          active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+        }"
+      />
     </template>
-    <ULinkBase v-else v-bind="{ ...$attrs, ...slotProps, as, type, disabled }" :class="resolveLinkClass(slotProps)">
-      <slot v-bind="{ ...slotProps, as, type, disabled, active: isLinkActive(slotProps) }" />
+    <ULinkBase
+      v-else
+      v-bind="{
+        ...$attrs,
+        as,
+        type,
+        disabled,
+        href,
+        navigate,
+        rel,
+        target,
+        isExternal
+      }"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+    >
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
     </ULinkBase>
   </NuxtLink>
 </template>

package/dist/runtime/components/LinkBase.vue

@@ -1,5 +1,15 @@
-<script>
-
+<script lang="ts">
+export interface LinkBaseProps {
+  as?: string
+  type?: string
+  disabled?: boolean
+  onClick?: (e: MouseEvent) => void | Promise<void>
+  href?: string
+  navigate?: (e: MouseEvent) => void
+  rel?: string
+  target?: string
+  isExternal?: boolean
+}
 </script>
 
 <script setup lang="ts">
@@ -10,15 +20,15 @@ const props = withDefaults(defineProps<LinkBaseProps>(), {
   type: 'button'
 })
 
-function onClick(e: MouseEvent) {
+function onClickWrapper(e: MouseEvent) {
   if (props.disabled) {
     e.stopPropagation()
     e.preventDefault()
     return
   }
 
-  if (props.click) {
-    props.click(e)
+  if (props.onClick) {
+    props.onClick(e)
   }
 
   if (props.href && props.navigate && !props.isExternal) {
@@ -33,7 +43,8 @@ function onClick(e: MouseEvent) {
       'as': 'a',
       'href': disabled ? undefined : href,
       'aria-disabled': disabled ? 'true' : undefined,
-      'role': disabled ? 'link' : undefined
+      'role': disabled ? 'link' : undefined,
+      'tabindex': disabled ? -1 : undefined
     } : as === 'button' ? {
       as,
       type,
@@ -43,7 +54,7 @@ function onClick(e: MouseEvent) {
     }"
     :rel="rel"
     :target="target"
-    @click="onClick"
+    @click="onClickWrapper"
   >
     <slot />
   </Primitive>

package/dist/runtime/components/Modal.vue

@@ -1,9 +1,72 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/modal";
-const appConfig = _appConfig;
-const modal = tv({ extend: tv(theme), ...appConfig.ui?.modal || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/modal'
+import type { ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { modal: Partial<typeof theme> } }
+
+const modal = tv({ extend: tv(theme), ...(appConfig.ui?.modal || {}) })
+
+export interface ModalProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /** The content of the modal. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the modal.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Animate the modal when opening or closing.
+   * @defaultValue true
+   */
+  transition?: boolean
+  /**
+   * When `true`, the modal will take up the full screen.
+   * @defaultValue false
+   */
+  fullscreen?: boolean
+  /**
+   * Render the modal in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Display a close button to dismiss the modal.
+   * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  /**
+   * When `true`, the modal will not close when clicking outside.
+   * @defaultValue false
+   */
+  preventClose?: boolean
+  class?: any
+  ui?: Partial<typeof modal.slots>
+}
+
+export interface ModalEmits extends DialogRootEmits {}
+
+export interface ModalSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  close(props: { ui: any }): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/NavigationMenu.vue

@@ -1,9 +1,79 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/navigation-menu";
-const appConfig = _appConfig;
-const navigationMenu = tv({ extend: tv(theme), ...appConfig.ui?.navigationMenu || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuItemProps, NavigationMenuContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/navigation-menu'
+import type { AvatarProps, BadgeProps, LinkProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
+
+const navigationMenu = tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu || {}) })
+
+export interface NavigationMenuChildItem extends Omit<LinkProps, 'raw' | 'custom'> {
+  label: string
+  description?: string
+  icon?: string
+  select?(e: Event): void
+}
+
+export interface NavigationMenuItem extends Omit<LinkProps, 'raw' | 'custom'>, Pick<NavigationMenuItemProps, 'value'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  badge?: string | number | BadgeProps
+  trailingIcon?: string
+  slot?: string
+  children?: NavigationMenuChildItem[]
+  select?(e: Event): void
+}
+
+type NavigationMenuVariants = VariantProps<typeof navigationMenu>
+
+export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'modelValue' | 'skipDelayDuration'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  /**
+   * The icon displayed to open the menu.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  items?: T[] | T[][]
+  color?: NavigationMenuVariants['color']
+  variant?: NavigationMenuVariants['variant']
+  /**
+   * The orientation of the menu.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: NavigationMenuRootProps['orientation']
+  /** Display a line next to the active item. */
+  highlight?: boolean
+  highlightColor?: NavigationMenuVariants['highlightColor']
+  /** The content of the menu. */
+  content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean
+  class?: any
+  ui?: Partial<typeof navigationMenu.slots>
+}
+
+export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+
+export type NavigationMenuSlots<T extends { slot?: string }> = {
+  '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 NavigationMenuItem">

package/dist/runtime/components/Pagination.vue

@@ -1,9 +1,102 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/pagination";
-const appConfig = _appConfig;
-const pagination = tv({ extend: tv(theme), ...appConfig.ui?.pagination || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { PaginationRootProps, PaginationRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import type { RouteLocationRaw } from '#vue-router'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/pagination'
+import type { ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { pagination: Partial<typeof theme> } }
+
+const pagination = tv({ extend: tv(theme), ...(appConfig.ui?.pagination || {}) })
+
+export interface PaginationProps extends Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  /**
+   * The icon to use for the first page control.
+   * @defaultValue appConfig.ui.icons.chevronDoubleLeft
+   */
+  firstIcon?: string
+  /**
+   * The icon to use for the previous page control.
+   * @defaultValue appConfig.ui.icons.chevronLeft
+   */
+  prevIcon?: string
+  /**
+   * The icon to use for the next page control.
+   * @defaultValue appConfig.ui.icons.chevronRight
+   */
+  nextIcon?: string
+  /**
+   * The icon to use for the last page control.
+   * @defaultValue appConfig.ui.icons.chevronDoubleRight
+   */
+  lastIcon?: string
+  /**
+   * The icon to use for the ellipsis control.
+   * @defaultValue appConfig.ui.icons.ellipsis
+   */
+  ellipsisIcon?: string
+  /**
+   * The color of the pagination controls.
+   * @defaultValue 'white'
+   */
+  color?: ButtonProps['color']
+  /**
+   * The variant of the pagination controls.
+   * @defaultValue 'solid'
+   */
+  variant?: ButtonProps['variant']
+  /**
+   * The color of the active pagination control.
+   * @defaultValue 'black'
+   */
+  activeColor?: ButtonProps['color']
+  /**
+   * The variant of the active pagination control.
+   * @defaultValue 'solid'
+   */
+  activeVariant?: ButtonProps['variant']
+  /**
+   * Whether to show the first, previous, next, and last controls.
+   * @defaultValue true
+   */
+  showControls?: boolean
+  size?: ButtonProps['size']
+  /**
+   * A function to render page controls as links.
+   * @param page The page number to navigate to.
+   */
+  to?: (page: number) => RouteLocationRaw
+  class?: any
+  ui?: Partial<typeof pagination.slots>
+}
+
+export interface PaginationEmits extends PaginationRootEmits {}
+
+export interface PaginationSlots {
+  first(props?: {}): any
+  prev(props?: {}): any
+  next(props?: {}): any
+  last(props?: {}): any
+  ellipsis(props?: {}): any
+  item(props: {
+    page: number
+    pageCount: number
+    item: {
+      type: 'ellipsis'
+    } | {
+      type: 'page'
+      value: number
+    }
+    index: number
+  }): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Popover.vue

@@ -1,9 +1,45 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/popover";
-const appConfig = _appConfig;
-const popover = tv({ extend: tv(theme), ...appConfig.ui?.popover || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverArrowProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/popover'
+
+const appConfig = _appConfig as AppConfig & { ui: { popover: Partial<typeof theme> } }
+
+const popover = tv({ extend: tv(theme), ...(appConfig.ui?.popover || {}) })
+
+export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+  /**
+   * The display mode of the popover.
+   * @defaultValue 'click'
+   */
+  mode?: 'click' | 'hover'
+  /**
+   * The content of the popover.
+   * @defaultValue { side: 'bottom', sideOffset: 8 }
+   */
+  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the popover.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the popover in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof popover.slots>
+}
+
+export interface PopoverEmits extends PopoverRootEmits {}
+
+export interface PopoverSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Progress.vue

@@ -1,9 +1,47 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/progress";
-const appConfig = _appConfig;
-const progress = tv({ extend: tv(theme), ...appConfig.ui?.progress || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ProgressRootProps, ProgressRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/progress'
+
+const appConfig = _appConfig as AppConfig & { ui: { progress: Partial<typeof theme> } }
+
+const progress = tv({ extend: tv(theme), ...(appConfig.ui?.progress || {}) })
+
+type ProgressVariants = VariantProps<typeof progress>
+
+export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' | 'modelValue'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  /** The maximum progress value. */
+  max?: number | Array<any>
+  /** Display the current progress value. */
+  status?: boolean
+  /** Whether the progress is visually inverted. */
+  inverted?: boolean
+  size?: ProgressVariants['size']
+  color?: ProgressVariants['color']
+  /**
+   * The orientation of the progress bar.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: ProgressVariants['orientation']
+  animation?: ProgressVariants['animation']
+  class?: any
+  ui?: Partial<typeof progress.slots>
+}
+
+export interface ProgressEmits extends ProgressRootEmits {}
+
+export type ProgressSlots = {
+  status(props: { percent?: number }): any
+} & {
+  [key: string]: (props: { step: number }) => any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/RadioGroup.vue

@@ -1,9 +1,57 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/radio-group";
-const appConfig = _appConfig;
-const radioGroup = tv({ extend: tv(theme), ...appConfig.ui?.radioGroup || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { RadioGroupRootProps, RadioGroupRootEmits, RadioGroupItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/radio-group'
+import type { AcceptableValue } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { radioGroup: Partial<typeof theme> } }
+
+const radioGroup = tv({ extend: tv(theme), ...(appConfig.ui?.radioGroup || {}) })
+
+type RadioGroupVariants = VariantProps<typeof radioGroup>
+
+export interface RadioGroupItem extends Pick<RadioGroupItemProps, 'disabled' | 'value'> {
+  label?: string
+  description?: string
+}
+
+export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  legend?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the value.
+   * @defaultValue 'value'
+   */
+  valueKey?: string
+  items?: T[]
+  size?: RadioGroupVariants['size']
+  color?: RadioGroupVariants['color']
+  /**
+   * The orientation the radio buttons are laid out.
+   * @defaultValue 'vertical'
+   */
+  orientation?: RadioGroupRootProps['orientation']
+  class?: any
+  ui?: Partial<typeof radioGroup.slots>
+}
+
+export type RadioGroupEmits = RadioGroupRootEmits & {
+  change: [payload: Event]
+}
+
+type SlotProps<T> = (props: { item: T, modelValue?: string }) => any
+
+export interface RadioGroupSlots<T> {
+  legend(props?: {}): any
+  label: SlotProps<T>
+  description: SlotProps<T>
+}
 </script>
 
 <script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">
@@ -21,7 +69,7 @@ const slots = defineSlots<RadioGroupSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
-const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props, { bind: false })
 const id = _id.value ?? useId()
 
 const ui = computed(() => radioGroup({