chore(release): v2.18.2

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.18.2](https://github.com/nuxt/ui/compare/v2.18.1...v2.18.2) (2024-07-25)
+
+
+### Bug Fixes
+
+* **Tabs:** add missing `UIcon` import ([4fd1be2](https://github.com/nuxt/ui/commit/4fd1be28922bf39584005c14982e5cd9a7d0c624))
+
+## [2.18.1](https://github.com/nuxt/ui/compare/v2.18.0...v2.18.1) (2024-07-25)
+
+
+### Bug Fixes
+
+* **components:** use relative imports ([ea721a3](https://github.com/nuxt/ui/commit/ea721a3705cfbcef3075f8c9c1f4acf359974597))
+
 ## [2.18.0](https://github.com/nuxt/ui/compare/v2.17.0...v2.18.0) (2024-07-25)
 
 

docs/components/content/examples/SlideoverExampleComposable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { SlideoverExampleComponent } from '#components'
+
 const slideover = useSlideover()
 const count = ref(0)
 function openSlideover () {
@@ -13,4 +14,4 @@ function openSlideover () {
 
 <template>
   <UButton label="Reveal slideover" @click="openSlideover" />
-</template>
+</template>

docs/package.json

@@ -11,7 +11,7 @@
     "@nuxt/fonts": "^0.7.1",
     "@nuxt/image": "^1.7.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@1.3.1-28695485.b267028",
+    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@1.3.1-28698404.4d54eb2",
     "@nuxtjs/plausible": "^1.0.0",
     "@octokit/rest": "^21.0.1",
     "@vueuse/nuxt": "^10.11.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.18.0",
+  "version": "2.18.2",
   "packageManager": "pnpm@9.5.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
@@ -37,7 +37,7 @@
     "@headlessui/tailwindcss": "^0.2.1",
     "@headlessui/vue": "^1.7.22",
     "@iconify-json/heroicons": "^1.1.22",
-    "@nuxt/icon": "^1.2.1",
+    "@nuxt/icon": "^1.3.1",
     "@nuxt/kit": "^3.12.4",
     "@nuxtjs/color-mode": "^3.4.2",
     "@nuxtjs/tailwindcss": "^6.12.1",
@@ -55,7 +55,7 @@
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
     "tailwind-merge": "^2.4.0",
-    "tailwindcss": "^3.4.6"
+    "tailwindcss": "^3.4.7"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.3.13",
@@ -72,15 +72,14 @@
     "valibot": "^0.36.0",
     "valibot30": "npm:valibot@0.30.0",
     "valibot31": "npm:valibot@0.31.0",
-    "vitest": "^2.0.3",
+    "vitest": "^2.0.4",
     "vitest-environment-nuxt": "^1.0.0",
-    "vue-tsc": "^2.0.26",
+    "vue-tsc": "^2.0.29",
     "yup": "^1.4.0",
     "zod": "^3.23.8"
   },
   "resolutions": {
     "@nuxt/ui": "workspace:*",
-    "nuxt-component-meta": "0.6.4",
+    "nuxt-component-meta": "0.6.4"
-    "vue-tsc": "2.0.26"
   }
 }

src/module.ts

@@ -86,7 +86,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Modules
 
-    await installModule('@nuxt/icon', { componentName: 'UIcon' })
+    await installModule('@nuxt/icon')
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
     await installTailwind(options, nuxt, resolve)
 

src/runtime/components/data/Table.vue

@@ -115,7 +115,10 @@ import type { PropType, AriaAttributes } from 'vue'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { useVModel } from '@vueuse/core'
-import { UIcon, UButton, UProgress, UCheckbox } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
+import UProgress from '../elements/Progress.vue'
+import UCheckbox from '../forms/Checkbox.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, get } from '../../utils'
 import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types'

src/runtime/components/elements/Accordion.vue

@@ -69,7 +69,8 @@
 import { ref, computed, toRef, defineComponent, watch } from 'vue'
 import type { PropType } from 'vue'
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel, provideUseId } from '@headlessui/vue'
-import { UIcon, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, omit } from '../../utils'
 import type { AccordionItem, Strategy } from '../../types'

src/runtime/components/elements/Alert.vue

@@ -43,7 +43,9 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types'
 import { mergeConfig } from '../../utils'

src/runtime/components/elements/Avatar.vue

@@ -24,7 +24,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types'

src/runtime/components/elements/Button.vue

@@ -20,7 +20,8 @@
 import { computed, defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, ULink } from '#components'
+import UIcon from '../elements/Icon.vue'
+import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'

src/runtime/components/elements/Dropdown.vue

@@ -61,7 +61,9 @@ import type { PropType } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from '@headlessui/vue'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UKbd } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UKbd from '../elements/Kbd.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig, getNuxtLinkProps } from '../../utils'

src/runtime/components/elements/Icon.vue

@@ -0,0 +1,32 @@
+<template>
+  <Icon v-bind="$props" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    mode: {
+      type: String as PropType<'svg' | 'css'>,
+      required: false,
+      default: null
+    },
+    size: {
+      type: [Number, String],
+      required: false,
+      default: null
+    },
+    customize: {
+      type: Function,
+      required: false,
+      default: null
+    }
+  }
+})
+</script>

src/runtime/components/elements/Meter.vue

@@ -31,7 +31,7 @@
 import { computed, defineComponent, toRef } from 'vue'
 import type { SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { Strategy, MeterColor, MeterSize } from '../../types'

src/runtime/components/elements/MeterGroup.ts

@@ -1,7 +1,7 @@
 import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
 import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import Meter from './Meter.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'

src/runtime/components/forms/Input.vue

@@ -35,7 +35,7 @@
 import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'

src/runtime/components/forms/InputMenu.vue

@@ -104,7 +104,8 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'

src/runtime/components/forms/Select.vue

@@ -56,7 +56,7 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'

src/runtime/components/forms/SelectMenu.vue

@@ -140,7 +140,8 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'

src/runtime/components/forms/Toggle.vue

@@ -34,7 +34,7 @@ import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Switch as HSwitch, provideUseId } from '@headlessui/vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'

src/runtime/components/layout/Divider.vue

@@ -22,7 +22,8 @@
 import { toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { Avatar, DividerSize, Strategy } from '../../types'

src/runtime/components/navigation/Breadcrumb.vue

@@ -37,7 +37,8 @@
 import { defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, ULink } from '#components'
+import UIcon from '../elements/Icon.vue'
+import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
 import type { BreadcrumbLink, Strategy } from '../../types'

src/runtime/components/navigation/CommandPalette.vue

@@ -70,7 +70,8 @@ import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import { twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
-import { UIcon, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -73,7 +73,9 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { ComboboxOption as HComboboxOption, provideUseId } from '@headlessui/vue'
-import { UIcon, UAvatar, UKbd } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UKbd from '../elements/Kbd.vue'
 import type { Command, Group } from '../../types'
 import { commandPalette } from '#ui/ui.config'
 import { useId } from '#imports'

src/runtime/components/navigation/HorizontalNavigation.vue

@@ -55,7 +55,10 @@
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UBadge, ULink } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UBadge from '../elements/Badge.vue'
+import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
 import type { HorizontalNavigationLink, Strategy } from '../../types'

src/runtime/components/navigation/Tabs.vue

@@ -57,6 +57,7 @@ import { toRef, ref, watch, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from '@headlessui/vue'
 import { useResizeObserver } from '@vueuse/core'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { TabItem, Strategy } from '../../types'
@@ -69,6 +70,7 @@ const config = mergeConfig<typeof tabs>(appConfig.ui.strategy, appConfig.ui.tabs
 
 export default defineComponent({
   components: {
+    UIcon,
     HTabGroup,
     HTabList,
     HTab,

src/runtime/components/navigation/VerticalNavigation.vue

@@ -56,7 +56,11 @@
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UBadge, ULink, UDivider } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UBadge from '../elements/Badge.vue'
+import ULink from '../elements/Link.vue'
+import UDivider from '../layout/Divider.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
 import type { VerticalNavigationLink, Strategy } from '../../types'

src/runtime/components/overlays/Notification.vue

@@ -46,7 +46,9 @@
 import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { useTimer } from '../../composables/useTimer'
 import { mergeConfig } from '../../utils'

src/runtime/types/alert.ts

@@ -8,5 +8,5 @@ export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['
 export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>
 
 export interface AlertAction extends Button {
-  click?: Function
+  click?: (...args: any[]) => void
 }

src/runtime/types/command-palette.ts

@@ -22,8 +22,8 @@ export interface Group {
   active?: string
   inactive?: string
   commands?: Command[]
-  search?: Function
+  search?: (...args: any[]) => any[] | Promise<any[]>
-  filter?: Function
+  filter?: (...args: any[]) => Command[]
   static?: Boolean
   [key: string]: any
 }

src/runtime/types/dropdown.ts

@@ -11,5 +11,5 @@ export interface DropdownItem extends NuxtLinkProps {
   shortcuts?: string[]
   disabled?: boolean
   class?: string
-  click?: Function
+  click?: (...args: any[]) => void
 }

src/runtime/types/horizontal-navigation.ts

@@ -8,6 +8,6 @@ export interface HorizontalNavigationLink extends Link {
   icon?: string
   iconClass?: string
   avatar?: Avatar
-  click?: Function
+  click?: (...args: any[]) => void
   badge?: string | number | Badge
 }

src/runtime/types/notification.ts

@@ -5,7 +5,7 @@ import colors from '#ui-colors'
 export type NotificationColor = 'gray' | typeof colors[number]
 
 export interface NotificationAction extends Button {
-  click?: Function
+  click?: (...args: any[]) => void
 }
 
 export interface Notification {
@@ -17,8 +17,8 @@ export interface Notification {
   closeButton?: Button
   timeout: number
   actions?: NotificationAction[]
-  click?: Function
+  click?: (...args: any[]) => void
-  callback?: Function
+  callback?: (...args: any[]) => void
   color?: NotificationColor
   ui?: any
 }

src/runtime/types/vertical-navigation.ts

@@ -8,6 +8,6 @@ export interface VerticalNavigationLink extends Link {
   icon?: string
   iconClass?: string
   avatar?: Avatar
-  click?: Function
+  click?: (...args: any[]) => void
   badge?: string | number | Badge
 }