@nuxt/ui 4.2.0 → 4.2.1

package/dist/runtime/components/content/ContentNavigation.vue

@@ -19,7 +19,7 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "nav" },
   defaultOpen: { type: Boolean, required: false, default: void 0 },
-  trailingIcon: { type: [String, Object], required: false },
+  trailingIcon: { type: null, required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },
   highlight: { type: Boolean, required: false, default: false },

package/dist/runtime/components/content/ContentSearch.vue

@@ -15,13 +15,13 @@ import { tv } from "../../utils/tv";
 import UModal from "../Modal.vue";
 import UCommandPalette from "../CommandPalette.vue";
 const props = defineProps({
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: [String, Object], required: false },
+  loadingIcon: { type: null, required: false },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: [String, Object], required: false },
+  closeIcon: { type: null, required: false },
   shortcut: { type: String, required: false, default: "meta_k" },
   links: { type: Array, required: false },
   navigation: { type: Array, required: false },

package/dist/runtime/components/content/ContentSearchButton.vue

@@ -17,7 +17,7 @@ import UKbd from "../Kbd.vue";
 import UTooltip from "../Tooltip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   label: { type: String, required: false },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false },
@@ -35,11 +35,11 @@ const props = defineProps({
   onClick: { type: [Function, Array], required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: [String, Object], required: false },
+  leadingIcon: { type: null, required: false },
   trailing: { type: Boolean, required: false },
-  trailingIcon: { type: [String, Object], required: false },
+  trailingIcon: { type: null, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: [String, Object], required: false },
+  loadingIcon: { type: null, required: false },
   as: { type: null, required: false },
   type: { type: null, required: false },
   disabled: { type: Boolean, required: false },

package/dist/runtime/components/content/ContentSurround.vue

@@ -13,8 +13,8 @@ import UIcon from "../Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
-  prevIcon: { type: [String, Object], required: false },
-  nextIcon: { type: [String, Object], required: false },
+  prevIcon: { type: null, required: false },
+  nextIcon: { type: null, required: false },
   surround: { type: Array, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }

package/dist/runtime/components/content/ContentToc.vue

@@ -14,7 +14,7 @@ import UIcon from "../Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "nav" },
-  trailingIcon: { type: [String, Object], required: false },
+  trailingIcon: { type: null, required: false },
   title: { type: String, required: false },
   color: { type: null, required: false },
   highlight: { type: Boolean, required: false },

package/dist/runtime/components/locale/LocaleSelect.vue

@@ -16,8 +16,8 @@ const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   required: { type: Boolean, required: false },
-  trailingIcon: { type: [String, Object], required: false },
-  selectedIcon: { type: [String, Object], required: false },
+  trailingIcon: { type: null, required: false },
+  selectedIcon: { type: null, required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true },
@@ -42,13 +42,13 @@ const props = defineProps({
   resetSearchTermOnBlur: { type: Boolean, required: false },
   resetSearchTermOnSelect: { type: Boolean, required: false },
   highlightOnHover: { type: Boolean, required: false },
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: [String, Object], required: false },
+  leadingIcon: { type: null, required: false },
   trailing: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: [String, Object], required: false }
+  loadingIcon: { type: null, required: false }
 });
 const selectMenuProps = useForwardProps(reactiveOmit(props, "locales"));
 const modelValue = defineModel({ type: String, ...{ required: true } });

package/dist/runtime/components/prose/Callout.vue

@@ -12,7 +12,7 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   to: { type: null, required: false },
   target: { type: [String, Object, null], required: false },
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   color: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }

package/dist/runtime/components/prose/Card.vue

@@ -12,7 +12,7 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   to: { type: null, required: false },
   target: { type: [String, Object, null], required: false },
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
   color: { type: null, required: false },

package/dist/runtime/components/prose/CodeCollapse.vue

@@ -9,7 +9,7 @@ import { useLocale } from "../../composables/useLocale";
 import { tv } from "../../utils/tv";
 import UButton from "../Button.vue";
 const props = defineProps({
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   name: { type: String, required: false },
   openText: { type: String, required: false },
   closeText: { type: String, required: false },

package/dist/runtime/components/prose/CodeIcon.vue

@@ -8,7 +8,7 @@ import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import UIcon from "../Icon.vue";
 const props = defineProps({
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   filename: { type: String, required: false }
 });
 const appConfig = useAppConfig();

package/dist/runtime/components/prose/Collapsible.vue

@@ -11,7 +11,7 @@ import { tv } from "../../utils/tv";
 import UCollapsible from "../Collapsible.vue";
 import UIcon from "../Icon.vue";
 const props = defineProps({
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   name: { type: String, required: false },
   openText: { type: String, required: false },
   closeText: { type: String, required: false },

package/dist/runtime/components/prose/Pre.vue

@@ -11,7 +11,7 @@ import { tv } from "../../utils/tv";
 import UCodeIcon from "./CodeIcon.vue";
 import UButton from "../Button.vue";
 const props = defineProps({
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   code: { type: String, required: false },
   language: { type: String, required: false },
   filename: { type: String, required: false },

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

@@ -32,8 +32,8 @@ export interface UseComponentIconsProps {
     loadingIcon?: IconProps['name'];
 }
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
-    isLeading: import("vue").ComputedRef<boolean>;
-    isTrailing: import("vue").ComputedRef<boolean>;
+    isLeading: import("vue").ComputedRef<any>;
+    isTrailing: import("vue").ComputedRef<any>;
     leadingIconName: import("vue").ComputedRef<any>;
     trailingIconName: import("vue").ComputedRef<any>;
 };

package/dist/runtime/inertia/components/Link.d.vue.ts

@@ -27,6 +27,10 @@ export interface LinkProps extends Partial<Omit<InertiaLinkProps, 'href' | 'onCl
      * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
      */
     rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
     /**
      * Value passed to the attribute `aria-current` when the link is exact active.
      *
@@ -59,8 +63,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkPr
     type: "reset" | "submit" | "button";
     as: any;
     active: boolean;
-    activeClass: string;
-    inactiveClass: string;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -11,22 +11,24 @@ import { usePage } from "@inertiajs/vue3";
 import { hasProtocol } from "ufo";
 import { useAppConfig } from "#imports";
 import { tv } from "../../utils/tv";
+import { mergeClasses } from "../../utils";
 import ULinkBase from "../../components/LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
-  activeClass: { type: String, required: false, default: "" },
+  activeClass: { type: String, required: false },
   to: { type: String, required: false },
   href: { type: String, required: false },
   external: { type: Boolean, required: false },
   target: { type: [String, Object, null], required: false },
   rel: { type: [String, Object, null], required: false },
-  ariaCurrentValue: { type: String, required: false },
+  noRel: { type: Boolean, required: false },
+  ariaCurrentValue: { type: String, required: false, default: "page" },
   type: { type: null, required: false, default: "button" },
   disabled: { type: Boolean, required: false },
   active: { type: Boolean, required: false, default: void 0 },
   exact: { type: Boolean, required: false },
-  inactiveClass: { type: String, required: false, default: "" },
+  inactiveClass: { type: String, required: false },
   custom: { type: Boolean, required: false },
   raw: { type: Boolean, required: false },
   class: { type: null, required: false },
@@ -59,14 +61,14 @@ const props = defineProps({
 defineSlots();
 const page = usePage();
 const appConfig = useAppConfig();
-const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
+const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class", "noRel"));
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
     variants: {
       active: {
-        true: props.activeClass,
-        false: props.inactiveClass
+        true: mergeClasses(appConfig.ui?.link?.variants?.active?.true, props.activeClass),
+        false: mergeClasses(appConfig.ui?.link?.variants?.active?.false, props.inactiveClass)
       }
     }
   }, appConfig.ui?.link || {})
@@ -84,6 +86,19 @@ const isExternal = computed(() => {
   }
   return typeof href.value === "string" && hasProtocol(href.value, { acceptRelative: true });
 });
+const hasTarget = computed(() => !!props.target && props.target !== "_self");
+const rel = computed(() => {
+  if (props.noRel) {
+    return null;
+  }
+  if (props.rel !== void 0) {
+    return props.rel || null;
+  }
+  if (isExternal.value || hasTarget.value) {
+    return "noopener noreferrer";
+  }
+  return null;
+});
 const isLinkActive = computed(() => {
   if (props.active !== void 0) {
     return props.active;
@@ -118,6 +133,8 @@ const linkClass = computed(() => {
   type,
   disabled,
   href,
+  rel,
+  target,
   active: isLinkActive,
   isExternal
 }"
@@ -132,6 +149,8 @@ const linkClass = computed(() => {
   type,
   disabled,
   href,
+  rel,
+  target,
   isExternal
 }"
     :class="linkClass"

package/dist/runtime/inertia/components/Link.vue.d.ts

@@ -27,6 +27,10 @@ export interface LinkProps extends Partial<Omit<InertiaLinkProps, 'href' | 'onCl
      * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
      */
     rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
     /**
      * Value passed to the attribute `aria-current` when the link is exact active.
      *
@@ -59,8 +63,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkPr
     type: "reset" | "submit" | "button";
     as: any;
     active: boolean;
-    activeClass: string;
-    inactiveClass: string;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/inertia/components/LinkBase.d.vue.ts

@@ -6,6 +6,7 @@ export interface LinkBaseProps {
     onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>;
     href?: string;
     target?: LinkProps['target'];
+    rel?: LinkProps['rel'];
     active?: boolean;
     isExternal?: boolean;
 }

package/dist/runtime/inertia/components/LinkBase.vue

@@ -13,6 +13,7 @@ const props = defineProps({
   onClick: { type: [Function, Array], required: false },
   href: { type: String, required: false },
   target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
   active: { type: Boolean, required: false },
   isExternal: { type: Boolean, required: false }
 });
@@ -35,7 +36,8 @@ function onClickWrapper(e) {
     v-if="!!href && !isExternal && !disabled"
     :href="href"
     v-bind="{
-  target: target || (isExternal ? '_blank' : void 0),
+  rel,
+  target,
   ...$attrs
 }"
     @click="onClickWrapper"
@@ -50,7 +52,8 @@ function onClickWrapper(e) {
   'aria-disabled': disabled ? 'true' : void 0,
   'role': disabled ? 'link' : void 0,
   'tabindex': disabled ? -1 : void 0,
-  'target': target || (isExternal ? '_blank' : void 0),
+  'rel': rel,
+  'target': target,
   ...$attrs
 } : as === 'button' ? {
   as,

package/dist/runtime/inertia/components/LinkBase.vue.d.ts

@@ -6,6 +6,7 @@ export interface LinkBaseProps {
     onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>;
     href?: string;
     target?: LinkProps['target'];
+    rel?: LinkProps['rel'];
     active?: boolean;
     isExternal?: boolean;
 }

package/dist/runtime/vue/components/Icon.vue

@@ -5,7 +5,7 @@
 <script setup>
 import { Icon as IconifyIcon } from "@iconify/vue";
 defineProps({
-  name: { type: [String, Object], required: true }
+  name: { type: null, required: true }
 });
 </script>
 

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

@@ -22,6 +22,10 @@ export interface LinkProps extends Partial<Omit<RouterLinkProps, 'custom'>>, /**
      * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
      */
     rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
     /**
      * The type of the button when not a link.
      * @defaultValue 'button'
@@ -52,9 +56,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkPr
     type: "reset" | "submit" | "button";
     as: any;
     active: boolean;
-    activeClass: string;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-    inactiveClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -12,6 +12,7 @@ import { hasProtocol } from "ufo";
 import { useRoute, RouterLink } from "vue-router";
 import { useAppConfig } from "#imports";
 import { tv } from "../../utils/tv";
+import { mergeClasses } from "../../utils";
 import { isPartiallyEqual } from "../../utils/link";
 import ULinkBase from "../../components/LinkBase.vue";
 defineOptions({ inheritAttrs: false });
@@ -21,17 +22,18 @@ const props = defineProps({
   external: { type: Boolean, required: false },
   target: { type: [String, Object, null], required: false },
   rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
   type: { type: null, required: false, default: "button" },
   disabled: { type: Boolean, required: false },
   active: { type: Boolean, required: false, default: void 0 },
   exact: { type: Boolean, required: false },
   exactQuery: { type: [Boolean, String], required: false },
   exactHash: { type: Boolean, required: false },
-  inactiveClass: { type: String, required: false, default: "" },
+  inactiveClass: { type: String, required: false },
   custom: { type: Boolean, required: false },
   raw: { type: Boolean, required: false },
   class: { type: null, required: false },
-  activeClass: { type: String, required: false, default: "" },
+  activeClass: { type: String, required: false },
   exactActiveClass: { type: String, required: false },
   ariaCurrentValue: { type: String, required: false, default: "page" },
   viewTransition: { type: Boolean, required: false },
@@ -41,14 +43,14 @@ const props = defineProps({
 defineSlots();
 const route = useRoute();
 const appConfig = useAppConfig();
-const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
+const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class", "noRel"));
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
     variants: {
       active: {
-        true: props.activeClass,
-        false: props.inactiveClass
+        true: mergeClasses(appConfig.ui?.link?.variants?.active?.true, props.activeClass),
+        false: mergeClasses(appConfig.ui?.link?.variants?.active?.false, props.inactiveClass)
       }
     }
   }, appConfig.ui?.link || {})
@@ -63,6 +65,19 @@ const isExternal = computed(() => {
   }
   return typeof to.value === "string" && hasProtocol(to.value, { acceptRelative: true });
 });
+const hasTarget = computed(() => !!props.target && props.target !== "_self");
+const rel = computed(() => {
+  if (props.noRel) {
+    return null;
+  }
+  if (props.rel !== void 0) {
+    return props.rel || null;
+  }
+  if (isExternal.value || hasTarget.value) {
+    return "noopener noreferrer";
+  }
+  return null;
+});
 function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
   if (props.active !== void 0) {
     return props.active;
@@ -108,6 +123,9 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   disabled,
   href,
   navigate,
+  rel,
+  target,
+  isExternal,
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
 }"
         />
@@ -121,7 +139,10 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   type,
   disabled,
   href,
-  navigate
+  navigate,
+  rel,
+  target,
+  isExternal
 }"
         :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
       >
@@ -139,7 +160,8 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   type,
   disabled,
   href: to,
-  target: isExternal ? '_blank' : void 0,
+  rel,
+  target,
   active,
   isExternal
 }"
@@ -153,7 +175,8 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   type,
   disabled,
   href: to,
-  target: isExternal ? '_blank' : void 0,
+  rel,
+  target,
   isExternal
 }"
       :class="resolveLinkClass()"

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

@@ -22,6 +22,10 @@ export interface LinkProps extends Partial<Omit<RouterLinkProps, 'custom'>>, /**
      * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
      */
     rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
     /**
      * The type of the button when not a link.
      * @defaultValue 'button'
@@ -52,9 +56,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkPr
     type: "reset" | "submit" | "button";
     as: any;
     active: boolean;
-    activeClass: string;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-    inactiveClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/vue/components/color-mode/ColorModeSelect.vue

@@ -17,8 +17,8 @@ const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   required: { type: Boolean, required: false },
-  trailingIcon: { type: [String, Object], required: false },
-  selectedIcon: { type: [String, Object], required: false },
+  trailingIcon: { type: null, required: false },
+  selectedIcon: { type: null, required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true },
@@ -45,10 +45,10 @@ const props = defineProps({
   highlightOnHover: { type: Boolean, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: [String, Object], required: false },
+  leadingIcon: { type: null, required: false },
   trailing: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: [String, Object], required: false }
+  loadingIcon: { type: null, required: false }
 });
 const { t } = useLocale();
 const colorMode = useColorMode();

package/dist/runtime/vue/components/color-mode/ColorModeSwitch.vue

@@ -14,7 +14,7 @@ const props = defineProps({
   color: { type: null, required: false },
   size: { type: null, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: [String, Object], required: false },
+  loadingIcon: { type: null, required: false },
   label: { type: String, required: false },
   description: { type: String, required: false },
   class: { type: null, required: false },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "packageManager": "pnpm@10.22.0",
   "repository": {
     "type": "git",
@@ -87,12 +87,16 @@
       ]
     }
   },
+  "imports": {
+    "#build/ui.css": "./.nuxt/ui.css"
+  },
   "bin": {
     "nuxt-ui": "./cli/index.mjs"
   },
   "style": "./dist/runtime/index.css",
   "main": "./dist/module.mjs",
   "files": [
+    ".nuxt/ui.css",
     "dist",
     "cli",
     "vue-plugin.d.ts"