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

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">

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
+  click?: (e: MouseEvent) => void
+  href?: string
+  navigate?: (e: MouseEvent) => void
+  rel?: string
+  target?: string
+  isExternal?: boolean
+}
 </script>
 
 <script setup lang="ts">

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">