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

package/dist/runtime/components/Toast.vue

@@ -22,9 +22,19 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   as?: any
   title?: StringOrVNode
   description?: StringOrVNode
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
+  /**
+   * @defaultValue 'primary'
+   */
   color?: ToastVariants['color']
+  /**
+   * The orientation between the content and the actions.
+   * @defaultValue 'vertical'
+   */
   orientation?: ToastVariants['orientation']
   /**
    * Display a list of actions:
@@ -42,6 +52,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   class?: any

package/dist/runtime/components/Toaster.vue

@@ -13,6 +13,10 @@ const toaster = tv({ extend: tv(theme), ...(appConfigToaster.ui?.toaster || {})
 type ToasterVariants = VariantProps<typeof toaster>
 
 export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
+  /**
+   * The position on the screen to display the toasts.
+   * @defaultValue 'bottom-right'
+   */
   position?: ToasterVariants['position']
   /**
    * Expand the toasts to show multiple toasts at once.

package/dist/runtime/components/Tree.vue

@@ -14,8 +14,14 @@ const tree = tv({ extend: tv(theme), ...(appConfig.ui?.tree || {}) })
 type TreeVariants = VariantProps<typeof tree>
 
 export type TreeItem = {
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   label?: string
+  /**
+   * @IconifyIcon
+   */
   trailingIcon?: string
   defaultExpanded?: boolean
   disabled?: boolean
@@ -32,7 +38,13 @@ export interface TreeProps<T extends TreeItem, M extends boolean = false, K exte
    * @defaultValue 'ul'
    */
   as?: any
+  /**
+   * @defaultValue 'primary'
+   */
   color?: TreeVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: TreeVariants['size']
   /**
    * The key used to get the value from the item.
@@ -47,16 +59,19 @@ export interface TreeProps<T extends TreeItem, M extends boolean = false, K exte
   /**
    * The icon displayed on the right side of a parent node.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The icon displayed when a parent node is expanded.
    * @defaultValue appConfig.ui.icons.folderOpen
+   * @IconifyIcon
    */
   expandedIcon?: string
   /**
    * The icon displayed when a parent node is collapsed.
    * @defaultValue appConfig.ui.icons.folder
+   * @IconifyIcon
    */
   collapsedIcon?: string
   items?: T[]

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -1,23 +1,33 @@
 import { type MaybeRefOrGetter } from 'vue';
 import type { AvatarProps } from '../types';
 export interface UseComponentIconsProps {
-    /** Display an icon based on the `leading` and `trailing` props. */
+    /**
+     * Display an icon based on the `leading` and `trailing` props.
+     * @IconifyIcon
+     */
     icon?: string;
     /** Display an avatar on the left side. */
     avatar?: AvatarProps;
     /** When `true`, the icon will be displayed on the left side. */
     leading?: boolean;
-    /** Display an icon on the left side. */
+    /**
+     * Display an icon on the left side.
+     * @IconifyIcon
+     */
     leadingIcon?: string;
     /** When `true`, the icon will be displayed on the right side. */
     trailing?: boolean;
-    /** Display an icon on the right side. */
+    /**
+     * Display an icon on the right side.
+     * @IconifyIcon
+     */
     trailingIcon?: string;
     /** When `true`, the loading icon will be displayed. */
     loading?: boolean;
     /**
      * The icon when the `loading` prop is `true`.
      * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
      */
     loadingIcon?: string;
 }

package/dist/runtime/utils/index.js

@@ -1,4 +1,4 @@
-import { isEqual } from "ohash";
+import { isEqual } from "ohash/utils";
 export function pick(data, keys) {
   const result = {};
   for (const key of keys) {

package/dist/runtime/vue/components/Link.vue

@@ -91,7 +91,7 @@ export interface LinkSlots {
 
 <script setup lang="ts">
 import { computed, getCurrentInstance } from 'vue'
-import { isEqual, diff } from 'ohash'
+import { isEqual, diff } from 'ohash/utils'
 import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { hasProtocol } from 'ufo'
@@ -140,11 +140,15 @@ const ui = computed(() => tv({
 function isPartiallyEqual(item1: any, item2: any) {
   const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
     if (q.type === 'added') {
-      filtered.push(q.key)
+      filtered.add(q.key)
     }
     return filtered
-  }, [] as string[])
-  return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
+  }, new Set<string>())
+
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
+
+  return isEqual(item1Filtered, item2Filtered)
 }
 
 const isExternal = computed(() => {

package/dist/shared/{ui.DfK2RX6G.cjs → ui.DG2iA__L.cjs}

@@ -498,6 +498,14 @@ const button = (options) => ({
     },
     loading: {
       true: ""
+    },
+    active: {
+      true: {
+        base: ""
+      },
+      false: {
+        base: ""
+      }
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
@@ -1996,7 +2004,12 @@ const pagination = {
     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: ""
   }
 };
 
@@ -2960,7 +2973,8 @@ const table = (options) => ({
     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: {
@@ -3467,7 +3481,7 @@ function getTemplates(options, uiConfig) {
   --color-old-neutral-800: ${colors__default.neutral[800]};
   --color-old-neutral-900: ${colors__default.neutral[900]};
   --color-old-neutral-950: ${colors__default.neutral[950]};
-  ${[...options.theme?.colors || [], "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
+  ${[...(options.theme?.colors || []).filter((color) => !colors__default[color]), "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
 }
 `
   });

package/dist/shared/{ui.DSPu6Y8j.mjs → ui.S-Be5Oao.mjs}

@@ -492,6 +492,14 @@ const button = (options) => ({
     },
     loading: {
       true: ""
+    },
+    active: {
+      true: {
+        base: ""
+      },
+      false: {
+        base: ""
+      }
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
@@ -1990,7 +1998,12 @@ const pagination = {
     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: ""
   }
 };
 
@@ -2954,7 +2967,8 @@ const table = (options) => ({
     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: {
@@ -3461,7 +3475,7 @@ function getTemplates(options, uiConfig) {
   --color-old-neutral-800: ${colors.neutral[800]};
   --color-old-neutral-900: ${colors.neutral[900]};
   --color-old-neutral-950: ${colors.neutral[950]};
-  ${[...options.theme?.colors || [], "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
+  ${[...(options.theme?.colors || []).filter((color) => !colors[color]), "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
 }
 `
   });

package/dist/unplugin.cjs

@@ -5,7 +5,7 @@ const pathe = require('pathe');
 const unplugin = require('unplugin');
 const defu = require('defu');
 const tailwind = require('@tailwindcss/vite');
-const templates = require('./shared/ui.DfK2RX6G.cjs');
+const templates = require('./shared/ui.DG2iA__L.cjs');
 const tinyglobby = require('tinyglobby');
 const knitwork = require('knitwork');
 const MagicString = require('magic-string');

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.DSPu6Y8j.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.S-Be5Oao.mjs';
 import { globSync } from 'tinyglobby';
 import { genSafeVariableName } from 'knitwork';
 import MagicString from 'magic-string';

package/dist/vite.cjs

@@ -6,7 +6,7 @@ require('pathe');
 require('unplugin');
 require('defu');
 require('@tailwindcss/vite');
-require('./shared/ui.DfK2RX6G.cjs');
+require('./shared/ui.DG2iA__L.cjs');
 require('../dist/runtime/utils/index.js');
 require('scule');
 require('@nuxt/kit');

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.DSPu6Y8j.mjs';
+import './shared/ui.S-Be5Oao.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import '@nuxt/kit';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.0.0-beta.2",
-  "packageManager": "pnpm@10.5.2",
+  "version": "3.0.0-beta.3",
+  "packageManager": "pnpm@10.6.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -86,12 +86,12 @@
     "@nuxt/kit": "^3.15.4",
     "@nuxt/schema": "^3.15.4",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@tailwindcss/postcss": "^4.0.9",
-    "@tailwindcss/vite": "^4.0.9",
+    "@tailwindcss/postcss": "^4.0.12",
+    "@tailwindcss/vite": "^4.0.12",
     "@tanstack/vue-table": "^8.21.2",
     "@unhead/vue": "^1.11.20",
-    "@vueuse/core": "^12.7.0",
-    "@vueuse/integrations": "^12.7.0",
+    "@vueuse/core": "^12.8.2",
+    "@vueuse/integrations": "^12.8.2",
     "colortranslator": "^4.1.0",
     "consola": "^3.4.0",
     "defu": "^6.1.4",
@@ -106,12 +106,12 @@
     "knitwork": "^1.2.0",
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
-    "ohash": "^1.1.4",
+    "ohash": "^2.0.11",
     "pathe": "^2.0.3",
     "reka-ui": "^2.0.2",
     "scule": "^1.3.0",
     "tailwind-variants": "^0.3.1",
-    "tailwindcss": "^4.0.9",
+    "tailwindcss": "^4.0.12",
     "tinyglobby": "^0.2.12",
     "unplugin": "^2.2.0",
     "unplugin-auto-import": "^19.1.1",
@@ -121,7 +121,7 @@
   "devDependencies": {
     "@nuxt/eslint-config": "^1.1.0",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/test-utils": "^3.17.0",
+    "@nuxt/test-utils": "^3.17.1",
     "@release-it/conventional-changelog": "^10.0.0",
     "@standard-schema/spec": "^1.0.0",
     "@vue/test-utils": "^2.4.6",
@@ -133,7 +133,7 @@
     "release-it": "^18.1.2",
     "superstruct": "^2.0.2",
     "valibot": "^0.42.1",
-    "vitest": "^3.0.7",
+    "vitest": "^3.0.8",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.2.0",
     "yup": "^1.6.1",