@nuxt/ui 3.0.0-beta.2 → 3.0.0-beta.4

package/.nuxt/ui/button.ts

@@ -113,6 +113,14 @@ export default {
     },
     "loading": {
       "true": ""
+    },
+    "active": {
+      "true": {
+        "base": ""
+      },
+      "false": {
+        "base": ""
+      }
     }
   },
   "compoundVariants": [

package/.nuxt/ui/pagination.ts

@@ -3,6 +3,11 @@ export default {
     "root": "",
     "list": "flex items-center gap-1",
     "ellipsis": "pointer-events-none",
-    "label": "min-w-5 text-center"
+    "label": "min-w-5 text-center",
+    "first": "",
+    "prev": "",
+    "item": "",
+    "next": "",
+    "last": ""
   }
 }

package/.nuxt/ui/table.ts

@@ -25,7 +25,8 @@ export default {
     "tr": "data-[selected=true]:bg-(--ui-bg-elevated)/50",
     "th": "px-4 py-3.5 text-sm text-(--ui-text-highlighted) text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
     "td": "p-4 text-sm text-(--ui-text-muted) whitespace-nowrap [&:has([role=checkbox])]:pe-0",
-    "empty": "py-6 text-center text-sm text-(--ui-text-muted)"
+    "empty": "py-6 text-center text-sm text-(--ui-text-muted)",
+    "loading": "py-6 text-center"
   },
   "variants": {
     "pinned": {

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/ui.DfK2RX6G.cjs');
+const templates = require('./shared/ui.COBs1u5H.cjs');
 require('../dist/runtime/utils/index.js');
 require('node:url');
 require('scule');
@@ -14,7 +14,7 @@ const module$1 = kit.defineNuxtModule({
     name: "ui",
     configKey: "ui",
     compatibility: {
-      nuxt: ">=3.13.1"
+      nuxt: ">=3.16.0"
     },
     docs: "https://ui3.nuxt.dev/getting-started/installation/nuxt"
   },

package/dist/module.json

@@ -2,10 +2,10 @@
   "name": "ui",
   "configKey": "ui",
   "compatibility": {
-    "nuxt": ">=3.13.1"
+    "nuxt": ">=3.16.0"
   },
   "docs": "https://ui3.nuxt.dev/getting-started/installation/nuxt",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.4",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.DSPu6Y8j.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.yjbGE7Dx.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -11,7 +11,7 @@ const module = defineNuxtModule({
     name: "ui",
     configKey: "ui",
     compatibility: {
-      nuxt: ">=3.13.1"
+      nuxt: ">=3.16.0"
     },
     docs: "https://ui3.nuxt.dev/getting-started/installation/nuxt"
   },

package/dist/runtime/components/Accordion.vue

@@ -12,7 +12,13 @@ const accordion = tv({ extend: tv(theme), ...(appConfigAccordion.ui?.accordion |
 
 export interface AccordionItem {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
+  /**
+   * @IconifyIcon
+   */
   trailingIcon?: string
   slot?: string
   content?: string
@@ -31,6 +37,7 @@ export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible
   /**
    * The icon displayed on the right side of the trigger.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**

package/dist/runtime/components/Alert.vue

@@ -20,10 +20,23 @@ export interface AlertProps {
   as?: any
   title?: string
   description?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
+  /**
+   * @defaultValue 'primary'
+   */
   color?: AlertVariants['color']
+  /**
+   * @defaultValue 'solid'
+   */
   variant?: AlertVariants['variant']
+  /**
+   * The orientation between the content and the actions.
+   * @defaultValue 'vertical'
+   */
   orientation?: AlertVariants['orientation']
   /**
    * Display a list of actions:
@@ -42,6 +55,7 @@ export interface AlertProps {
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   class?: any

package/dist/runtime/components/App.vue

@@ -1,12 +1,11 @@
 <script lang="ts">
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
-import { localeContextInjectionKey } from '../composables/useLocale'
-import type { ToasterProps, Locale } from '../types'
+import type { ToasterProps, Locale, Messages } from '../types'
 
-export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps | null
-  locale?: Locale
+  locale?: Locale<T>
 }
 
 export interface AppSlots {
@@ -18,14 +17,15 @@ export default {
 }
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends Messages = Messages">
 import { toRef, useId, provide } from 'vue'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
+import { localeContextInjectionKey } from '../composables/useLocale'
 import UToaster from './Toaster.vue'
 import UOverlayProvider from './OverlayProvider.vue'
 
-const props = defineProps<AppProps>()
+const props = defineProps<AppProps<T>>()
 defineSlots<AppSlots>()
 
 const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))

package/dist/runtime/components/Avatar.vue

@@ -19,10 +19,17 @@ export interface AvatarProps {
   as?: any
   src?: string
   alt?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   text?: string
+  /**
+   * @defaultValue 'md'
+   */
   size?: AvatarVariants['size']
   class?: any
+  style?: any
   ui?: Partial<typeof avatar.slots>
 }
 
@@ -77,7 +84,7 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :style="props.style">
     <component
       :is="ImageComponent"
       v-if="src && !error"

package/dist/runtime/components/AvatarGroup.vue

@@ -17,6 +17,9 @@ export interface AvatarGroupProps {
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: AvatarGroupVariants['size']
   /**
    * The maximum number of avatars to display.

package/dist/runtime/components/Badge.vue

@@ -20,8 +20,17 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
    */
   as?: any
   label?: string | number
+  /**
+   * @defaultValue 'primary'
+   */
   color?: BadgeVariants['color']
+  /**
+   * @defaultValue 'solid'
+   */
   variant?: BadgeVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: BadgeVariants['size']
   class?: any
   ui?: Partial<typeof badge.slots>

package/dist/runtime/components/Breadcrumb.vue

@@ -12,6 +12,9 @@ const breadcrumb = tv({ extend: tv(theme), ...(appConfigBreadcrumb.ui?.breadcrum
 
 export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   slot?: string
@@ -27,6 +30,7 @@ export interface BreadcrumbProps<T> {
   /**
    * The icon to use as a separator.
    * @defaultValue appConfig.ui.icons.chevronRight
+   * @IconifyIcon
    */
   separatorIcon?: string
   /**

package/dist/runtime/components/Button.vue

@@ -17,8 +17,19 @@ type ButtonVariants = VariantProps<typeof button>
 
 export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
   label?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: ButtonVariants['color']
+  activeColor?: ButtonVariants['color']
+  /**
+   * @defaultValue 'solid'
+   */
   variant?: ButtonVariants['variant']
+  activeVariant?: ButtonVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: ButtonVariants['size']
   /** Render the button with equal padding on all sides. */
   square?: boolean
@@ -49,8 +60,13 @@ import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import ULink from './Link.vue'
+import ULinkBase from './LinkBase.vue'
 
-const props = defineProps<ButtonProps>()
+const props = withDefaults(defineProps<ButtonProps>(), {
+  active: undefined,
+  activeClass: '',
+  inactiveClass: ''
+})
 const slots = defineSlots<ButtonSlots>()
 
 const linkProps = useForwardProps(pickLinkProps(props))
@@ -78,7 +94,19 @@ const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponen
   computed(() => ({ ...props, loading: isLoading.value }))
 )
 
-const ui = computed(() => button({
+const ui = computed(() => tv({
+  extend: button,
+  variants: {
+    active: {
+      true: {
+        base: props.activeClass
+      },
+      false: {
+        base: props.inactiveClass
+      }
+    }
+  }
+})({
   color: props.color,
   variant: props.variant,
   size: buttonSize.value,
@@ -93,26 +121,37 @@ const ui = computed(() => button({
 
 <template>
   <ULink
+    v-slot="{ active, ...slotProps }"
     :type="type"
     :disabled="disabled || isLoading"
     :class="ui.base({ class: [props.class, props.ui?.base] })"
     v-bind="omit(linkProps, ['type', 'disabled'])"
-    raw
-    @click="onClickWrapper"
+    custom
   >
-    <slot name="leading">
-      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
-    </slot>
-
-    <slot>
-      <span v-if="label" :class="ui.label({ class: props.ui?.label })">
-        {{ label }}
-      </span>
-    </slot>
-
-    <slot name="trailing">
-      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
-    </slot>
+    <ULinkBase
+      v-bind="slotProps"
+      :class="ui.base({
+        class: [props.class, props.ui?.base],
+        active,
+        ...(active && activeVariant ? { variant: activeVariant } : {}),
+        ...(active && activeColor ? { color: activeColor } : {})
+      })"
+      @click="onClickWrapper"
+    >
+      <slot name="leading">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
+      </slot>
+
+      <slot>
+        <span v-if="label" :class="ui.label({ class: props.ui?.label, active })">
+          {{ label }}
+        </span>
+      </slot>
+
+      <slot name="trailing">
+        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
+      </slot>
+    </ULinkBase>
   </ULink>
 </template>

package/dist/runtime/components/ButtonGroup.vue

@@ -17,6 +17,9 @@ export interface ButtonGroupProps {
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: ButtonGroupVariants['size']
   /**
    * The orientation the buttons are laid out.

package/dist/runtime/components/Calendar.vue

@@ -29,24 +29,34 @@ export interface CalendarProps<R extends boolean, M extends boolean> extends Omi
   /**
    * The icon to use for the next year control.
    * @defaultValue appConfig.ui.icons.chevronDoubleRight
+   * @IconifyIcon
    */
   nextYearIcon?: string
   /**
    * The icon to use for the next month control.
    * @defaultValue appConfig.ui.icons.chevronRight
+   * @IconifyIcon
    */
   nextMonthIcon?: string
   /**
    * The icon to use for the previous year control.
    * @defaultValue appConfig.ui.icons.chevronDoubleLeft
+   * @IconifyIcon
    */
   prevYearIcon?: string
   /**
    * The icon to use for the previous month control.
    * @defaultValue appConfig.ui.icons.chevronLeft
+   * @IconifyIcon
    */
   prevMonthIcon?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: CalendarVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: CalendarVariants['size']
   /** Whether or not a range of dates can be selected */
   range?: R & boolean

package/dist/runtime/components/Card.vue

@@ -17,6 +17,9 @@ export interface CardProps {
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: CardVariants['variant']
   class?: any
   ui?: Partial<typeof card.slots>

package/dist/runtime/components/Carousel.vue

@@ -35,6 +35,7 @@ export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'conta
   /**
    * The icon displayed in the prev button.
    * @defaultValue appConfig.ui.icons.arrowLeft
+   * @IconifyIcon
    */
   prevIcon?: string
   /**
@@ -45,6 +46,7 @@ export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'conta
   /**
    * The icon displayed in the next button.
    * @defaultValue appConfig.ui.icons.arrowRight
+   * @IconifyIcon
    */
   nextIcon?: string
   /**
@@ -57,6 +59,10 @@ export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'conta
    * @defaultValue false
    */
   dots?: boolean
+  /**
+   * The orientation of the carousel.
+   * @defaultValue 'horizontal'
+   */
   orientation?: CarouselVariants['orientation']
   items?: T[]
   /**

package/dist/runtime/components/Checkbox.vue

@@ -20,16 +20,24 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
   as?: any
   label?: string
   description?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: CheckboxVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: CheckboxVariants['size']
   /**
    * The icon displayed when checked.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   icon?: string
   /**
    * The icon displayed when the checkbox is indeterminate.
    * @defaultValue appConfig.ui.icons.minus
+   * @IconifyIcon
    */
   indeterminateIcon?: string
   class?: any

package/dist/runtime/components/Chip.vue

@@ -19,8 +19,18 @@ export interface ChipProps {
   as?: any
   /** Display some text inside the chip. */
   text?: string | number
+  /**
+   * @defaultValue 'primary'
+   */
   color?: ChipVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: ChipVariants['size']
+  /**
+   * The position of the chip.
+   * @defaultValue 'top-right'
+   */
   position?: ChipVariants['position']
   /** When `true`, keep the chip inside the component for rounded elements. */
   inset?: boolean

package/dist/runtime/components/ColorPicker.vue

@@ -63,6 +63,9 @@ export type ColorPickerProps = {
    * @defaultValue 'hex'
    */
   format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab'
+  /**
+   * @defaultValue 'md'
+   */
   size?: ColorPickerVariants['size']
   class?: any
   ui?: Partial<typeof colorPicker.slots>

package/dist/runtime/components/CommandPalette.vue

@@ -18,6 +18,9 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   prefix?: string
   label?: string
   suffix?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   chip?: ChipProps
@@ -42,7 +45,10 @@ export interface CommandPaletteGroup<T> {
   ignoreFilter?: boolean
   /** Filter group items after the search happened. */
   postFilter?: (searchTerm: string, items: T[]) => T[]
-  /** The icon displayed when an item is highlighted. */
+  /**
+   * The icon displayed when an item is highlighted.
+   * @IconifyIcon
+   */
   highlightedIcon?: string
 }
 
@@ -55,11 +61,13 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
   /**
    * The icon displayed in the input.
    * @defaultValue appConfig.ui.icons.search
+   * @IconifyIcon
    */
   icon?: string
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   selectedIcon?: string
   /**
@@ -82,6 +90,7 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   groups?: G[]

package/dist/runtime/components/ContextMenu.vue

@@ -16,6 +16,9 @@ type ContextMenuVariants = VariantProps<typeof contextMenu>
 
 export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   color?: ContextMenuVariants['color']
   avatar?: AvatarProps
@@ -38,22 +41,28 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
 }
 
 export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'> {
+  /**
+   * @defaultValue 'md'
+   */
   size?: ContextMenuVariants['size']
   items?: T[] | T[][]
   /**
    * The icon displayed when an item is checked.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   checkedIcon?: string
   /**
    * The icon displayed when an item is loading.
    * @defaultValue appConfig.ui.icons.loading
+   * @IconifyIcon
    */
   loadingIcon?: string
   /**
    * The icon displayed when the item is an external link.
    * Set to `false` to hide the external icon.
    * @defaultValue appConfig.ui.icons.external
+   * @IconifyIcon
    */
   externalIcon?: boolean | string
   /** The content of the menu. */

package/dist/runtime/components/ContextMenuContent.vue

@@ -11,8 +11,17 @@ interface ContextMenuContentProps<T> extends Omit<RekaContextMenuContentProps, '
   portal?: boolean
   sub?: boolean
   labelKey: string
+  /**
+   * @IconifyIcon
+   */
   checkedIcon?: string
+  /**
+   * @IconifyIcon
+   */
   loadingIcon?: string
+  /**
+   * @IconifyIcon
+   */
   externalIcon?: boolean | string
   class?: any
   ui: typeof _contextMenu

package/dist/runtime/components/DropdownMenu.vue

@@ -16,6 +16,9 @@ type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
 
 export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   color?: DropdownMenuVariants['color']
   avatar?: AvatarProps
@@ -38,22 +41,28 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
 }
 
 export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'> {
+  /**
+   * @defaultValue 'md'
+   */
   size?: DropdownMenuVariants['size']
   items?: T[] | T[][]
   /**
    * The icon displayed when an item is checked.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   checkedIcon?: string
   /**
    * The icon displayed when an item is loading.
    * @defaultValue appConfig.ui.icons.loading
+   * @IconifyIcon
    */
   loadingIcon?: string
   /**
    * The icon displayed when the item is an external link.
    * Set to `false` to hide the external icon.
    * @defaultValue appConfig.ui.icons.external
+   * @IconifyIcon
    */
   externalIcon?: boolean | string
   /**

package/dist/runtime/components/DropdownMenuContent.vue

@@ -12,8 +12,17 @@ interface DropdownMenuContentProps<T> extends Omit<RekaDropdownMenuContentProps,
   portal?: boolean
   sub?: boolean
   labelKey: string
+  /**
+   * @IconifyIcon
+   */
   checkedIcon?: string
+  /**
+   * @IconifyIcon
+   */
   loadingIcon?: string
+  /**
+   * @IconifyIcon
+   */
   externalIcon?: boolean | string
   class?: any
   ui: typeof _dropdownMenu