chore(deps): migrate to eslint 9 (#2443)

2026-01-14 12:14:41 +01:00 · 2024-10-24 10:30:37 +02:00
parent b29fcd2650
commit cae4f0c4a8
177 changed files with 2034 additions and 1289 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,14 +0,0 @@
-node_modules
-dist
-.nuxt
-coverage
-*.log*
-.DS_Store
-.code
-*.iml
-package-lock.json
-templates/*
-sw.js
-
-# Templates
-src/templates
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,46 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['@nuxt/eslint-config'],
-  rules: {
-    // General
-    semi: ['error', 'never'],
-    quotes: ['error', 'single'],
-    'comma-dangle': ['error', 'never'],
-    'comma-spacing': ['error', { before: false, after: true }],
-    'keyword-spacing': ['error', { before: true, after: true }],
-    'space-before-function-paren': ['error', 'always'],
-    'object-curly-spacing': ['error', 'always'],
-    'arrow-spacing': ['error', { before: true, after: true }],
-    'key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
-    'space-before-blocks': ['error', 'always'],
-    'space-infix-ops': ['error', { int32Hint: false }],
-    'no-multi-spaces': ['error', { ignoreEOLComments: true }],
-    'no-trailing-spaces': ['error'],
-
-    // Typescript
-    '@typescript-eslint/type-annotation-spacing': 'error',
-
-    // Vuejs
-    'vue/multi-word-component-names': 0,
-    'vue/html-indent': ['error', 2],
-    'vue/comma-spacing': ['error', { before: false, after: true }],
-    'vue/script-indent': ['error', 2, { baseIndent: 0 }],
-    'vue/keyword-spacing': ['error', { before: true, after: true }],
-    'vue/object-curly-spacing': ['error', 'always'],
-    'vue/key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
-    'vue/arrow-spacing': ['error', { before: true, after: true }],
-    'vue/array-bracket-spacing': ['error', 'never'],
-    'vue/block-spacing': ['error', 'always'],
-    'vue/brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
-    'vue/space-infix-ops': ['error', { int32Hint: false }],
-    'vue/max-attributes-per-line': [
-      'error',
-      {
-        singleline: {
-          max: 5
-        }
-      }
-    ],
-    'vue/padding-line-between-blocks': ['error', 'always']
-  }
-}
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -50,7 +50,8 @@ const links = computed(() => {
    icon: 'i-heroicons-book-open',
    to: '/getting-started',
    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
-  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
+  }, ...(navigation.value.find(item => item._path === '/pro')
+    ? [{
        label: 'Pro',
        icon: 'i-heroicons-square-3-stack-3d',
        to: '/pro',
@@ -63,7 +64,8 @@ const links = computed(() => {
        label: 'Templates',
        icon: 'i-heroicons-computer-desktop',
        to: '/pro/templates'
-  }] : []), {
+      }]
+    : []), {
    label: 'Releases',
    icon: 'i-heroicons-rocket-launch',
    to: '/releases'
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -48,8 +48,8 @@

 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content'
-import type { HeaderLink } from '#ui-pro/types'
 import pkg from '@nuxt/ui-pro/package.json'
+import type { HeaderLink } from '#ui-pro/types'

 defineProps<{
  links: HeaderLink[]
--- a/docs/components/color-picker/ColorPicker.vue
+++ b/docs/components/color-picker/ColorPicker.vue
@@ -32,10 +32,10 @@ const colorMode = useColorMode()

 const primaryColors = computed(() => appConfig.ui.colors.filter(color => color !== 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
 const primary = computed({
-  get () {
+  get() {
    return primaryColors.value.find(option => option.value === appConfig.ui.primary)
  },
-  set (option) {
+  set(option) {
    appConfig.ui.primary = option.value

    window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.primary)
@@ -44,10 +44,10 @@ const primary = computed({

 const grayColors = computed(() => ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
 const gray = computed({
-  get () {
+  get() {
    return grayColors.value.find(option => option.value === appConfig.ui.gray)
  },
-  set (option) {
+  set(option) {
    appConfig.ui.gray = option.value

    window.localStorage.setItem('nuxt-ui-gray', appConfig.ui.gray)
--- a/docs/components/color-picker/ColorPickerPill.vue
+++ b/docs/components/color-picker/ColorPickerPill.vue
@@ -20,6 +20,6 @@
 </template>

 <script setup lang="ts">
-defineProps<{ color: { value: string, hex: string }, selected: { value: string} }>()
+defineProps<{ color: { value: string, hex: string }, selected: { value: string } }>()
 defineEmits(['select'])
 </script>
--- a/docs/components/content/ColorModeButton.vue
+++ b/docs/components/content/ColorModeButton.vue
@@ -18,10 +18,10 @@
 const colorMode = useColorMode()

 const isDark = computed({
-  get () {
+  get() {
    return colorMode.value === 'dark'
  },
-  set () {
+  set() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
 })
--- a/docs/components/content/ComponentCard.vue
+++ b/docs/components/content/ComponentCard.vue
@@ -54,7 +54,6 @@
 import { upperFirst, camelCase, kebabCase } from 'scule'
 import { useShikiHighlighter } from '~/composables/useShikiHighlighter'

-// eslint-disable-next-line vue/no-dupe-keys
 const props = defineProps({
  slug: {
    type: String,
@@ -89,7 +88,7 @@ const props = defineProps({
    default: () => []
  },
  options: {
-    type: Array as PropType<{ name: string; values: string[]; restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
+    type: Array as PropType<{ name: string, values: string[], restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
    default: () => []
  },
  backgroundClass: {
@@ -114,7 +113,6 @@ const props = defineProps({
  }
 })

-// eslint-disable-next-line vue/no-dupe-keys
 const baseProps = reactive({ ...props.baseProps })
 const componentProps = reactive({ ...props.props })

@@ -158,13 +156,13 @@ const generateOptions = (key: string, schema: { kind: string, schema: [], type:
  const schemaOptions = Object.values(schema?.schema || {})

  if (key.toLowerCase() === 'size' && schemaOptions?.length > 0) {
-    const baseSizeOrder = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4, 'xl': 5 }
+    const baseSizeOrder = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
    schemaOptions.sort((a: string, b: string) => {
-      const aBase = a.match(/[a-zA-Z]+/)[0].toLowerCase()
-      const bBase = b.match(/[a-zA-Z]+/)[0].toLowerCase()
+      const aBase = a.match(/[a-z]+/i)[0].toLowerCase()
+      const bBase = b.match(/[a-z]+/i)[0].toLowerCase()

-      const aNum = parseInt(a.match(/\d+/)?.[0]) || 1
-      const bNum = parseInt(b.match(/\d+/)?.[0]) || 1
+      const aNum = Number.parseInt(a.match(/\d+/)?.[0]) || 1
+      const bNum = Number.parseInt(b.match(/\d+/)?.[0]) || 1

      if (aBase === bBase) {
        return aBase === 'xs' ? bNum - aNum : aNum - bNum
@@ -214,7 +212,6 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
  }
 }).filter(Boolean))

-// eslint-disable-next-line vue/no-dupe-keys
 const code = computed(() => {
  let code = `\`\`\`html
 <template>
@@ -253,7 +250,7 @@ const code = computed(() => {
  return code
 })

-function renderObject (obj: any) {
+function renderObject(obj: any) {
  if (Array.isArray(obj)) {
    return `[${obj.map(renderObject).join(', ')}]`
  }
@@ -272,6 +269,7 @@ function renderObject (obj: any) {
 const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`, async () => {
  let formatted = ''
  try {
+    // @ts-ignore
    formatted = await $prettier.format(code.value, {
      trailingComma: 'none',
      semi: false,
--- a/docs/components/content/ComponentPreset.vue
+++ b/docs/components/content/ComponentPreset.vue
@@ -18,7 +18,6 @@ const props = defineProps({
 const route = useRoute()
 const highlighter = useShikiHighlighter()

-// eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[route.params.slug.length - 1]
 const camelName = camelCase(slug)
 const name = `U${upperFirst(camelName)}`
--- a/docs/components/content/ComponentPropsField.vue
+++ b/docs/components/content/ComponentPropsField.vue
@@ -36,7 +36,7 @@ defineProps({
  }
 })

-function startsWithCapital (word) {
+function startsWithCapital(word) {
  if (word.charAt(0).startsWith('"')) {
    return false
  }
--- a/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
@@ -13,7 +13,7 @@ const links = [{
  <UBreadcrumb :links="links" :divider="null" :ui="{ ol: 'gap-x-3' }">
    <template #icon="{ link, index, isActive }">
      <UAvatar
-        :alt="(index + 1 ).toString()"
+        :alt="(index + 1).toString()"
        :ui="{
          background: isActive ? 'bg-primary-500 dark:bg-primary-400' : undefined,
          placeholder: isActive ? 'text-white dark:text-gray-900' : !!link.to ? 'group-hover:text-gray-700 dark:group-hover:text-gray-200' : ''
--- a/docs/components/content/examples/CommandPaletteExampleGroups.vue
+++ b/docs/components/content/examples/CommandPaletteExampleGroups.vue
@@ -18,10 +18,12 @@ const actions = [
 ]

 const groups = computed(() =>
-  [commandPaletteRef.value?.query ? {
+  [commandPaletteRef.value?.query
+    ? {
        key: 'users',
        commands: users
-  } : {
+      }
+    : {
        key: 'recent',
        label: 'Recent searches',
        commands: users.slice(0, 1)
@@ -30,7 +32,7 @@ const groups = computed(() =>
    commands: actions
  }].filter(Boolean))

-function onSelect (option) {
+function onSelect(option) {
  if (option.click) {
    option.click()
  } else if (option.to) {
--- a/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
+++ b/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
@@ -71,7 +71,7 @@ const ui = {
    :autoselect="false"
    command-attribute="title"
    :fuse="{
-      fuseOptions: { keys: ['title', 'category'] },
+      fuseOptions: { keys: ['title', 'category'] }
    }"
    placeholder="Search docs"
  />
--- a/docs/components/content/examples/ContextMenuExample.vue
+++ b/docs/components/content/examples/ContextMenuExample.vue
@@ -7,7 +7,7 @@ const { y: windowY } = useWindowScroll()
 const isOpen = ref(false)
 const virtualElement = ref({ getBoundingClientRect: () => ({}) })

-function onContextMenu () {
+function onContextMenu() {
  const top = unref(y) - unref(windowY)
  const left = unref(x)

--- a/docs/components/content/examples/ContextMenuExampleArrow.vue
+++ b/docs/components/content/examples/ContextMenuExampleArrow.vue
@@ -7,7 +7,7 @@ const { y: windowY } = useWindowScroll()
 const isOpen = ref(false)
 const virtualElement = ref({ getBoundingClientRect: () => ({}) })

-function onContextMenu () {
+function onContextMenu() {
  const top = unref(y) - unref(windowY)
  const left = unref(x)

--- a/docs/components/content/examples/ContextMenuExampleOffset.vue
+++ b/docs/components/content/examples/ContextMenuExampleOffset.vue
@@ -7,7 +7,7 @@ const { y: windowY } = useWindowScroll()
 const isOpen = ref(false)
 const virtualElement = ref({ getBoundingClientRect: () => ({}) })

-function onContextMenu () {
+function onContextMenu() {
  const top = unref(y) - unref(windowY)
  const left = unref(x)

--- a/docs/components/content/examples/ContextMenuExamplePlacement.vue
+++ b/docs/components/content/examples/ContextMenuExamplePlacement.vue
@@ -7,7 +7,7 @@ const { y: windowY } = useWindowScroll()
 const isOpen = ref(false)
 const virtualElement = ref({ getBoundingClientRect: () => ({}) })

-function onContextMenu () {
+function onContextMenu() {
  const top = unref(y) - unref(windowY)
  const left = unref(x)

--- a/docs/components/content/examples/DatePickerRangeExample.vue
+++ b/docs/components/content/examples/DatePickerRangeExample.vue
@@ -11,11 +11,11 @@ const ranges = [
 ]
 const selected = ref({ start: sub(new Date(), { days: 14 }), end: new Date() })

-function isRangeSelected (duration: Duration) {
+function isRangeSelected(duration: Duration) {
  return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
 }

-function selectRange (duration: Duration) {
+function selectRange(duration: Duration) {
  selected.value = { start: sub(new Date(), duration), end: new Date() }
 }
 </script>
--- a/docs/components/content/examples/FormExampleBasic.vue
+++ b/docs/components/content/examples/FormExampleBasic.vue
@@ -13,7 +13,7 @@ const validate = (state: any): FormError[] => {
  return errors
 }

-async function onSubmit (event: FormSubmitEvent<any>) {
+async function onSubmit(event: FormSubmitEvent<any>) {
  // Do something with data
  console.log(event.data)
 }
--- a/docs/components/content/examples/FormExampleElements.vue
+++ b/docs/components/content/examples/FormExampleElements.vue
@@ -53,7 +53,7 @@ type Schema = z.infer<typeof schema>

 const form = ref()

-async function onSubmit (event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
  // Do something with event.data
  console.log(event.data)
 }
--- a/docs/components/content/examples/FormExampleJoi.vue
+++ b/docs/components/content/examples/FormExampleJoi.vue
@@ -14,7 +14,7 @@ const state = reactive({
  password: undefined
 })

-async function onSubmit (event: FormSubmitEvent<any>) {
+async function onSubmit(event: FormSubmitEvent<any>) {
  // Do something with event.data
  console.log(event.data)
 }
--- a/docs/components/content/examples/FormExampleOnError.vue
+++ b/docs/components/content/examples/FormExampleOnError.vue
@@ -13,12 +13,12 @@ const validate = (state: any): FormError[] => {
  return errors
 }

-async function onSubmit (event: FormSubmitEvent<any>) {
+async function onSubmit(event: FormSubmitEvent<any>) {
  // Do something with data
  console.log(event.data)
 }

-async function onError (event: FormErrorEvent) {
+async function onError(event: FormErrorEvent) {
  const element = document.getElementById(event.errors[0].id)
  element?.focus()
  element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
--- a/docs/components/content/examples/FormExampleSuperstruct.vue
+++ b/docs/components/content/examples/FormExampleSuperstruct.vue
@@ -14,7 +14,7 @@ const state = reactive({

 type Schema = Infer<typeof schema>

-async function onSubmit (event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
  console.log(event.data)
 }
 </script>
--- a/docs/components/content/examples/FormExampleValibot.vue
+++ b/docs/components/content/examples/FormExampleValibot.vue
@@ -14,7 +14,7 @@ const state = reactive({
  password: ''
 })

-async function onSubmit (event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
  // Do something with event.data
  console.log(event.data)
 }
--- a/docs/components/content/examples/FormExampleYup.vue
+++ b/docs/components/content/examples/FormExampleYup.vue
@@ -16,7 +16,7 @@ const state = reactive({
  password: undefined
 })

-async function onSubmit (event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
  // Do something with event.data
  console.log(event.data)
 }
--- a/docs/components/content/examples/FormExampleZod.vue
+++ b/docs/components/content/examples/FormExampleZod.vue
@@ -14,7 +14,7 @@ const state = reactive({
  password: undefined
 })

-async function onSubmit (event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
  // Do something with data
  console.log(event.data)
 }
--- a/docs/components/content/examples/InputMenuExampleSearchAsync.vue
+++ b/docs/components/content/examples/InputMenuExampleSearchAsync.vue
@@ -2,7 +2,7 @@
 const loading = ref(false)
 const selected = ref()

-async function search (q: string) {
+async function search(q: string) {
  loading.value = true

  const users: any[] = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
--- a/docs/components/content/examples/ModalExampleComponent.vue
+++ b/docs/components/content/examples/ModalExampleComponent.vue
@@ -8,7 +8,7 @@ defineProps({

 const emit = defineEmits(['success'])

-function onSuccess () {
+function onSuccess() {
  emit('success')
 }
 </script>
--- a/docs/components/content/examples/ModalExampleComposable.vue
+++ b/docs/components/content/examples/ModalExampleComposable.vue
@@ -5,11 +5,11 @@ const toast = useToast()
 const modal = useModal()
 const count = ref(0)

-function openModal () {
+function openModal() {
  count.value += 1
  modal.open(ModalExampleComponent, {
    count: count.value,
-    onSuccess () {
+    onSuccess() {
      toast.add({
        title: 'Success !',
        id: 'modal-success'
--- a/docs/components/content/examples/NotificationExampleCallback.vue
+++ b/docs/components/content/examples/NotificationExampleCallback.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const toast = useToast()

-function onCallback () {
+function onCallback() {
  alert('Notification expired!')
 }
 </script>
--- a/docs/components/content/examples/NotificationExampleClick.vue
+++ b/docs/components/content/examples/NotificationExampleClick.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const toast = useToast()

-function onClick () {
+function onClick() {
  alert('Clicked!')
 }
 </script>
--- a/docs/components/content/examples/PaginationExampleTo.vue
+++ b/docs/components/content/examples/PaginationExampleTo.vue
@@ -11,7 +11,7 @@ const items = ref(Array(50))
    :to="(page: number) => ({
      query: { page },
      // Hash is specified here to prevent the page from scrolling to the top
-      hash: '#links',
+      hash: '#links'
    })"
  />
 </template>
--- a/docs/components/content/examples/SelectMenuExampleCreatable.vue
+++ b/docs/components/content/examples/SelectMenuExampleCreatable.vue
@@ -37,7 +37,7 @@ const labels = computed({
  }
 })

-function hashCode (str) {
+function hashCode(str) {
  let hash = 0
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash)
@@ -45,7 +45,7 @@ function hashCode (str) {
  return hash
 }

-function intToRGB (i) {
+function intToRGB(i) {
  const c = (i & 0x00FFFFFF)
    .toString(16)
    .toUpperCase()
@@ -53,7 +53,7 @@ function intToRGB (i) {
  return '00000'.substring(0, 6 - c.length) + c
 }

-function generateColorFromString (str) {
+function generateColorFromString(str) {
  return intToRGB(hashCode(str))
 }
 </script>
--- a/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue
+++ b/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue
@@ -38,7 +38,7 @@ const labels = computed({

 const showCreateOption = (query, results) => {
  const lowercaseQuery = String.prototype.toLowerCase.apply(query || '')
-  return lowercaseQuery.length >= 3 && !results.find(option => {
+  return lowercaseQuery.length >= 3 && !results.find((option) => {
    return String.prototype.toLowerCase.apply(option['name'] || '') === lowercaseQuery
  })
 }
--- a/docs/components/content/examples/SelectMenuExampleSearchAsync.vue
+++ b/docs/components/content/examples/SelectMenuExampleSearchAsync.vue
@@ -2,7 +2,7 @@
 const loading = ref(false)
 const selected = ref([])

-async function search (q: string) {
+async function search(q: string) {
  loading.value = true

  const users: any[] = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
--- a/docs/components/content/examples/SlideoverExampleComponent.vue
+++ b/docs/components/content/examples/SlideoverExampleComponent.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 const props = defineProps({
  count: {
    type: Number,
@@ -8,7 +7,7 @@ const props = defineProps({
 })

 const emits = defineEmits<{
-  close: [];
+  close: []
 }>()
 </script>

--- a/docs/components/content/examples/SlideoverExampleComposable.vue
+++ b/docs/components/content/examples/SlideoverExampleComposable.vue
@@ -3,7 +3,7 @@ import { SlideoverExampleComponent } from '#components'

 const slideover = useSlideover()
 const count = ref(0)
-function openSlideover () {
+function openSlideover() {
  count.value += 1
  slideover.open(SlideoverExampleComponent, {
    count: count.value,
--- a/docs/components/content/examples/TableExampleAdvanced.vue
+++ b/docs/components/content/examples/TableExampleAdvanced.vue
@@ -19,13 +19,13 @@ const columns = [{
 }]

 const selectedColumns = ref(columns)
-const columnsTable = computed(() => columns.filter((column) => selectedColumns.value.includes(column)))
+const columnsTable = computed(() => columns.filter(column => selectedColumns.value.includes(column)))

 // Selected Rows
 const selectedRows = ref([])

-function select (row) {
-  const index = selectedRows.value.findIndex((item) => item.id === row.id)
+function select(row) {
+  const index = selectedRows.value.findIndex(item => item.id === row.id)
  if (index === -1) {
    selectedRows.value.push(row)
  } else {
@@ -92,10 +92,10 @@ const { data: todos, status } = await useLazyAsyncData<{
 }[]>('todos', () => ($fetch as any)(`https://jsonplaceholder.typicode.com/todos${searchStatus.value}`, {
  query: {
    q: search.value,
-    '_page': page.value,
-    '_limit': pageCount.value,
-    '_sort': sort.value.column,
-    '_order': sort.value.direction
+    _page: page.value,
+    _limit: pageCount.value,
+    _sort: sort.value.column,
+    _order: sort.value.direction
  }
 }), {
  default: () => [],
--- a/docs/components/content/examples/TableExampleClickable.vue
+++ b/docs/components/content/examples/TableExampleClickable.vue
@@ -31,8 +31,8 @@ const people = [{
  role: 'Owner'
 }]

-function select (row) {
-  const index = selected.value.findIndex((item) => item.id === row.id)
+function select(row) {
+  const index = selected.value.findIndex(item => item.id === row.id)
  if (index === -1) {
    selected.value.push(row)
  } else {
--- a/docs/components/content/examples/TableExampleLoadingSlot.vue
+++ b/docs/components/content/examples/TableExampleLoadingSlot.vue
@@ -55,7 +55,7 @@ const pending = ref(true)
 }

 /**
-	loader --6
+loader --6
 **/
 .loader.--6::before {
  width: var(--size-square);
@@ -67,7 +67,9 @@ const pending = ref(true)
 }

@keyframes loader-6 {
-	0%, 100% {
+
+  0%,
+  100% {
    transform: none;
  }

--- a/docs/components/content/examples/TableExampleSlots.vue
+++ b/docs/components/content/examples/TableExampleSlots.vue
@@ -53,7 +53,7 @@ const people = [{
  role: 'Member'
 }]

-const items = (row) => [
+const items = row => [
  [{
    label: 'Edit',
    icon: 'i-heroicons-pencil-square-20-solid',
--- a/docs/components/content/examples/TabsExampleChange.vue
+++ b/docs/components/content/examples/TabsExampleChange.vue
@@ -13,7 +13,7 @@ const items = [{
  content: 'Finally, this is the content for Tab3'
 }]

-function onChange (index) {
+function onChange(index) {
  const item = items[index]

  alert(`${item.label} was clicked!`)
--- a/docs/components/content/examples/TabsExampleItemCustomSlot.vue
+++ b/docs/components/content/examples/TabsExampleItemCustomSlot.vue
@@ -10,11 +10,11 @@ const items = [{
 const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' })
 const passwordForm = reactive({ currentPassword: '', newPassword: '' })

-function onSubmitAccount () {
+function onSubmitAccount() {
  console.log('Submitted form:', accountForm)
 }

-function onSubmitPassword () {
+function onSubmitPassword() {
  console.log('Submitted form:', passwordForm)
 }
 </script>
--- a/docs/components/content/examples/TabsExampleItemSlot.vue
+++ b/docs/components/content/examples/TabsExampleItemSlot.vue
@@ -12,7 +12,7 @@ const items = [{
 const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' })
 const passwordForm = reactive({ currentPassword: '', newPassword: '' })

-function onSubmit (form) {
+function onSubmit(form) {
  console.log('Submitted form:', form)
 }
 </script>
--- a/docs/components/content/examples/TabsExampleVModel.vue
+++ b/docs/components/content/examples/TabsExampleVModel.vue
@@ -17,15 +17,15 @@ const route = useRoute()
 const router = useRouter()

 const selected = computed({
-  get () {
-    const index = items.findIndex((item) => item.label === route.query.tab)
+  get() {
+    const index = items.findIndex(item => item.label === route.query.tab)
    if (index === -1) {
      return 0
    }

    return index
  },
-  set (value) {
+  set(value) {
    // Hash is specified here to prevent the page from scrolling to the top
    router.replace({ query: { tab: items[value].label }, hash: '#control-the-selected-index' })
  }
--- a/docs/components/date-picker/DatePicker.vue
+++ b/docs/components/date-picker/DatePicker.vue
@@ -31,9 +31,9 @@ const breakpoints = useBreakpoints(breakpointsTailwind)
 const smallerThanSm = breakpoints.smaller('sm')

 const attrs = {
-  transparent: true,
-  borderless: true,
-  color: 'primary',
+  'transparent': true,
+  'borderless': true,
+  'color': 'primary',
  'is-dark': { selector: 'html', darkClass: 'dark' },
  'first-day-of-week': 2
 }
--- a/docs/components/home/HomeProDemoBlock.vue
+++ b/docs/components/home/HomeProDemoBlock.vue
@@ -29,7 +29,7 @@
      v-else
      class="font-semibold flex flex-col gap-1 text-center"
      :class="[
-        !block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900'),
+        !block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900')
      ]"
    >
      {{ block.name }}
--- a/docs/components/home/HomeTetris.vue
+++ b/docs/components/home/HomeTetris.vue
@@ -36,21 +36,22 @@ const cols = ref(0)

 const { width, height } = useElementSize(el)

-function createGrid () {
+function createGrid() {
  grid.value = []

  for (let i = 0; i <= rows.value; i++) {
+    // eslint-disable-next-line unicorn/no-new-array
    grid.value.push(new Array(cols.value).fill(null))
  }
 }

-function createNewCell () {
+function createNewCell() {
  const x = Math.floor(Math.random() * cols.value)

  grid.value[0][x] = true
 }

-function moveCellsDown () {
+function moveCellsDown() {
  for (let row = rows.value - 1; row >= 0; row--) {
    for (let col = 0; col < cols.value; col++) {
      if (grid.value[row][col] !== null && grid.value[row + 1][col] === null) {
@@ -69,11 +70,11 @@ function moveCellsDown () {
  }, 500)
 }

-function removeCell (row, col) {
+function removeCell(row, col) {
  grid.value[row][col] = null
 }

-function calcGrid () {
+function calcGrid() {
  const base = Math.ceil(width.value / 60)
  const cell = width.value / base

--- a/docs/composables/useComponentMeta.ts
+++ b/docs/composables/useComponentMeta.ts
@@ -1,13 +1,15 @@
 const useComponentsMetaState = () => useState('components-meta', () => ({}))

-export async function fetchComponentMeta (name: string) {
+export async function fetchComponentMeta(name: string) {
  const state = useComponentsMetaState()

  if (state.value[name]?.then) {
    await state.value[name]
    return state.value[name]
  }
-  if (state.value[name]) { return state.value[name] }
+  if (state.value[name]) {
+    return state.value[name]
+  }

  // Store promise to avoid multiple calls

--- a/docs/composables/useContentExamplesCode.ts
+++ b/docs/composables/useContentExamplesCode.ts
@@ -1,6 +1,6 @@
 const useContentExamplesCodeState = () => useState('content-examples-code', () => ({}))

-export async function fetchContentExampleCode (name?: string) {
+export async function fetchContentExampleCode(name?: string) {
  if (!name) return
  const state = useContentExamplesCodeState()

@@ -8,7 +8,9 @@ export async function fetchContentExampleCode (name?: string) {
    await state.value[name]
    return state.value[name]
  }
-  if (state.value[name]) { return state.value[name] }
+  if (state.value[name]) {
+    return state.value[name]
+  }

  // add to nitro prerender
  if (import.meta.server) {
--- a/docs/error.vue
+++ b/docs/error.vue
@@ -29,8 +29,8 @@
 </template>

 <script setup lang="ts">
-import type { NuxtError } from '#app'
 import type { ParsedContent } from '@nuxt/content'
+import type { NuxtError } from '#app'

 useSeoMeta({
  title: 'Page not found',
@@ -57,7 +57,8 @@ const links = computed(() => {
    icon: 'i-heroicons-book-open',
    to: '/getting-started',
    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
-  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
+  }, ...(navigation.value.find(item => item._path === '/pro')
+    ? [{
        label: 'Pro',
        icon: 'i-heroicons-square-3-stack-3d',
        to: '/pro',
@@ -70,7 +71,8 @@ const links = computed(() => {
        label: 'Templates',
        icon: 'i-heroicons-computer-desktop',
        to: '/pro/templates'
-  }] : []), {
+      }]
+    : []), {
    label: 'Releases',
    icon: 'i-heroicons-rocket-launch',
    to: '/releases'
--- a/docs/modules/content-examples-code.ts
+++ b/docs/modules/content-examples-code.ts
@@ -1,3 +1,6 @@
+import { existsSync, readFileSync } from 'node:fs'
+import fsp from 'node:fs/promises'
+import { dirname, join } from 'pathe'
 import {
  defineNuxtModule,
  addTemplate,
@@ -5,28 +8,24 @@ import {
  createResolver
 } from '@nuxt/kit'

-import { existsSync, readFileSync } from 'fs'
-import { dirname, join } from 'pathe'
-import fsp from 'fs/promises'
-
 export default defineNuxtModule({
  meta: {
    name: 'content-examples-code'
  },
-  async setup (_options, nuxt) {
+  async setup(_options, nuxt) {
    const resolver = createResolver(import.meta.url)
    let _configResolved: any
    let components: Record<string, any>
    const outputPath = join(nuxt.options.buildDir, 'content-examples-code')

-    async function stubOutput () {
+    async function stubOutput() {
      if (existsSync(outputPath + '.mjs')) {
        return
      }
      await updateOutput('export default {}')
    }

-    async function fetchComponent (component: string | any) {
+    async function fetchComponent(component: string | any) {
      if (typeof component === 'string') {
        if (components[component]) {
          component = components[component]
@@ -57,7 +56,7 @@ export default defineNuxtModule({
    const getVirtualModuleContent = () =>
      `export default ${getStringifiedComponents()}`

-    async function updateOutput (content?: string) {
+    async function updateOutput(content?: string) {
      const path = outputPath + '.mjs'
      if (!existsSync(dirname(path))) {
        await fsp.mkdir(dirname(path), { recursive: true })
@@ -68,13 +67,13 @@ export default defineNuxtModule({
      await fsp.writeFile(path, content || getVirtualModuleContent(), 'utf-8')
    }

-    async function fetchComponents () {
+    async function fetchComponents() {
      await Promise.all(Object.keys(components).map(fetchComponent))
    }

    nuxt.hook('components:extend', async (_components) => {
      components = _components
-        .filter((v) => v.shortPath.includes('components/content/examples/'))
+        .filter(v => v.shortPath.includes('components/content/examples/'))
        .reduce((acc, component) => {
          acc[component.pascalName] = component
          return acc
@@ -93,17 +92,17 @@ export default defineNuxtModule({
      vite.config.plugins.push({
        name: 'content-examples-code',
        enforce: 'post',
-        async buildStart () {
+        async buildStart() {
          if (_configResolved?.build.ssr) {
            return
          }
          await fetchComponents()
          await updateOutput()
        },
-        configResolved (config) {
+        configResolved(config) {
          _configResolved = config
        },
-        async handleHotUpdate ({ file }) {
+        async handleHotUpdate({ file }) {
          if (
            Object.entries(components).some(
              ([, comp]: any) => comp.filePath === file
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -8,10 +8,12 @@ const { resolve } = createResolver(import.meta.url)

 export default defineNuxtConfig({
  // @ts-ignore
-  extends: process.env.NUXT_UI_PRO_PATH ? [
+  extends: process.env.NUXT_UI_PRO_PATH
+    ? [
        process.env.NUXT_UI_PRO_PATH,
        resolve(process.env.NUXT_UI_PRO_PATH, '.docs')
-  ] : [
+      ]
+    : [
        '@nuxt/ui-pro',
        process.env.NUXT_GITHUB_TOKEN && ['github:nuxt/ui-pro/.docs#dev', { giget: { auth: process.env.NUXT_GITHUB_TOKEN } }]
      ].filter(Boolean),
@@ -29,15 +31,8 @@ export default defineNuxtConfig({
    'modules/content-examples-code'
  ],

-  runtimeConfig: {
-    public: {
-      version: pkg.version
-    }
-  },
-
-  ui: {
-    global: true,
-    safelistColors: excludeColors(colors)
+  site: {
+    url: 'https://ui.nuxt.com'
  },

  content: {
@@ -48,31 +43,42 @@ export default defineNuxtConfig({
      ]
    },
    sources: {
-      pro: process.env.NUXT_UI_PRO_PATH ? {
+      pro: process.env.NUXT_UI_PRO_PATH
+        ? {
            prefix: '/pro',
            driver: 'fs',
            base: resolve(process.env.NUXT_UI_PRO_PATH, '.docs/content/pro')
-      } : process.env.NUXT_GITHUB_TOKEN ? {
+          }
+        : process.env.NUXT_GITHUB_TOKEN
+          ? {
              prefix: '/pro',
              driver: 'github',
              repo: 'nuxt/ui-pro',
              branch: 'dev',
              dir: '.docs/content/pro',
              token: process.env.NUXT_GITHUB_TOKEN || ''
-      } : undefined
+            }
+          : undefined
    }
  },

-  image: {
-    provider: 'ipx'
+  ui: {
+    global: true,
+    safelistColors: excludeColors(colors)
  },

-  icon: {
-    clientBundle: {
-      scan: true
+  runtimeConfig: {
+    public: {
+      version: pkg.version
    }
  },

+  routeRules: {
+    '/components': { redirect: '/components/accordion', prerender: false }
+  },
+
+  compatibilityDate: '2024-07-23',
+
  nitro: {
    prerender: {
      routes: [
@@ -86,8 +92,32 @@ export default defineNuxtConfig({
    }
  },

-  routeRules: {
-    '/components': { redirect: '/components/accordion', prerender: false }
+  vite: {
+    optimizeDeps: {
+      include: ['date-fns']
+    }
+  },
+
+  typescript: {
+    strict: false
+  },
+
+  hooks: {
+    // Related to https://github.com/nuxt/nuxt/pull/22558
+    'components:extend': (components) => {
+      components.forEach((component) => {
+        if (component.shortPath.includes(process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro')) {
+          component.global = true
+        } else if (component.global) {
+          component.global = 'sync'
+        }
+      })
+    }
+  },
+
+  cloudflareAnalytics: {
+    token: '1e2b0c5e9a214f0390b9b94e043d8d4c',
+    scriptPath: false
  },

  componentMeta: {
@@ -111,37 +141,13 @@ export default defineNuxtConfig({
    }
  },

-  cloudflareAnalytics: {
-    token: '1e2b0c5e9a214f0390b9b94e043d8d4c',
-    scriptPath: false
-  },
-
-  hooks: {
-    // Related to https://github.com/nuxt/nuxt/pull/22558
-    'components:extend': (components) => {
-      components.forEach((component) => {
-        if (component.shortPath.includes(process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro')) {
-          component.global = true
-        } else if (component.global) {
-          component.global = 'sync'
-        }
-      })
+  icon: {
+    clientBundle: {
+      scan: true
    }
  },

-  typescript: {
-    strict: false
-  },
-
-  site: {
-    url: 'https://ui.nuxt.com'
-  },
-
-  vite: {
-    optimizeDeps: {
-      include: ['date-fns']
+  image: {
+    provider: 'ipx'
  }
-  },
-
-  compatibilityDate: '2024-07-23'
 })
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -295,7 +295,7 @@
                    wrapper: 'px-4 py-2.5 border-gray-800/10 dark:border-gray-200/10 cursor-pointer',
                    icon: {
                      wrapper: 'mb-2 p-1',
-                      base: 'h-4 w-4',
+                      base: 'h-4 w-4'
                    },
                    title: 'text-sm',
                    description: 'text-xs'
@@ -466,7 +466,8 @@ const steps = {

 const inc = computed(() => (height.value - 32 - 64 - 32 - 32) / 4)

-const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs) ? [{
+const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs)
+  ? [{
      class: 'inset-x-0 top-20 bottom-20 overflow-hidden',
      inactive: true,
      children: [{
@@ -506,34 +507,42 @@ const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(
          to: '/pro/components/landing-grid',
          class: ['inset-x-4 bottom-4 top-48', isAfterStep(steps.landing + 8) && 'grid grid-cols-4 gap-4 p-4'].filter(Boolean).join(' '),
          inactive: isAfterStep(steps.landing + 8),
-      children: [isAfterStep(steps.landing + 9) ? {
+          children: [isAfterStep(steps.landing + 9)
+            ? {
                slot: 'landing-card-1',
                class: '!relative'
-      } : {
+              }
+            : {
                name: 'ULandingCard',
                to: '/pro/components/landing-card',
                class: '!relative h-full',
                inactive: false
-      }, isAfterStep(steps.landing + 9) ? {
+              }, isAfterStep(steps.landing + 9)
+            ? {
                slot: 'landing-card-2',
                class: '!relative h-full'
-      } : {
+              }
+            : {
                name: 'ULandingCard',
                to: '/pro/components/landing-card',
                class: '!relative h-full',
                inactive: false
-      }, isAfterStep(steps.landing + 9) ? {
+              }, isAfterStep(steps.landing + 9)
+            ? {
                slot: 'landing-card-3',
                class: '!relative h-full'
-      } : {
+              }
+            : {
                name: 'ULandingCard',
                to: '/pro/components/landing-card',
                class: '!relative h-full',
                inactive: false
-      }, isAfterStep(steps.landing + 9) ? {
+              }, isAfterStep(steps.landing + 9)
+            ? {
                slot: 'landing-card-4',
                class: '!relative h-full'
-      } : {
+              }
+            : {
                name: 'ULandingCard',
                to: '/pro/components/landing-card',
                class: '!relative h-full',
@@ -563,25 +572,30 @@ const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(
          }]
        }]
      }].filter(Boolean)
-}] : [])
+    }]
+  : [])

 const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
  name: 'UPage',
  to: '/pro/components/page',
  class: 'inset-x-0 top-20 bottom-20',
  inactive: isAfterStep(steps.docs + 1),
-  children: [isAfterStep(steps.docs + 2) ? {
+  children: [isAfterStep(steps.docs + 2)
+    ? {
        name: 'UAside',
        to: '/pro/components/aside',
        class: 'left-4 inset-y-4 w-64',
        inactive: isAfterStep(steps.docs + 3),
-    children: [isAfterStep(steps.docs + 4) ? {
+        children: [isAfterStep(steps.docs + 4)
+          ? {
              slot: 'aside-top',
              class: 'inset-x-4 top-4'
-    } : {
+            }
+          : {
              name: '#top',
              class: 'inset-x-4 top-4 h-9'
-    }, isAfterStep(steps.docs + 5) ? {
+            }, isAfterStep(steps.docs + 5)
+          ? {
              name: 'UNavigationTree',
              to: '/pro/components/navigation-tree',
              class: ['inset-x-4 top-[4.25rem] bottom-4', isAfterStep(steps.docs + 6) && '!bg-transparent !border-0'].join(' '),
@@ -590,19 +604,23 @@ const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
                slot: 'aside-default',
                class: 'inset-0'
              }]
-    } : {
+            }
+          : {
              name: '#default',
              class: 'inset-x-4 top-[4.25rem] bottom-4'
            }]
-  } : {
+      }
+    : {
        name: '#left',
        class: 'left-4 inset-y-4 w-64'
-  }, isAfterStep(steps.docs + 7) ? {
+      }, isAfterStep(steps.docs + 7)
+    ? {
        name: 'UPage',
        to: '/pro/components/page',
        class: 'left-72 right-4 inset-y-4',
        inactive: isAfterStep(steps.docs + 8),
-    children: [...(isAfterStep(steps.docs + 9) ? [{
+        children: [...(isAfterStep(steps.docs + 9)
+          ? [{
              name: 'UPageHeader',
              to: '/pro/components/page-header',
              class: 'top-4 left-4 right-72 h-32',
@@ -619,19 +637,23 @@ const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
              children: [{
                slot: 'page-body',
                class: 'inset-x-4 top-4 justify-start'
-      }, isAfterStep(steps.docs + 12) ? {
+              }, isAfterStep(steps.docs + 12)
+                ? {
                    slot: 'content-surround',
                    class: 'bottom-4 inset-x-4 h-28'
-      } : {
+                  }
+                : {
                    name: 'UContentSurround',
                    to: '/pro/components/content-surround',
                    class: 'bottom-4 inset-x-4 h-28',
                    inactive: false
                  }]
-    }] : [{
+            }]
+          : [{
              name: '#default',
              class: 'left-4 right-72 inset-y-4'
-    }]), isAfterStep(steps.docs + 13) ? {
+            }]), isAfterStep(steps.docs + 13)
+          ? {
              name: 'UContentToc',
              to: '/pro/components/content-toc',
              class: 'right-4 inset-y-4 w-64',
@@ -640,11 +662,13 @@ const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
                slot: 'content-toc',
                class: 'inset-4 overflow-y-auto'
              }]
-    } : {
+            }
+          : {
              name: '#right',
              class: 'right-4 inset-y-4 w-64'
            }]
-  } : {
+      }
+    : {
        name: '#default',
        class: 'left-72 right-4 inset-y-4'
      }]
@@ -655,22 +679,28 @@ const blocks = computed(() => [isAfterStep(steps.header) && {
  to: '/pro/components/header',
  class: 'h-16 inset-x-0 top-0',
  inactive: isAfterStep(steps.header + 1),
-  children: [isAfterStep(steps.header + 2) ? {
+  children: [isAfterStep(steps.header + 2)
+    ? {
        slot: 'header-left',
        class: 'left-4 top-4'
-  } : {
+      }
+    : {
        name: '#left',
        class: 'left-4 inset-y-4 w-64'
-  }, isAfterStep(steps.header + 3) ? {
+      }, isAfterStep(steps.header + 3)
+    ? {
        slot: 'header-center',
        class: 'inset-x-72 top-5'
-  } : {
+      }
+    : {
        name: '#center',
        class: 'inset-x-72 inset-y-4'
-  }, isAfterStep(steps.header + 4) ? {
+      }, isAfterStep(steps.header + 4)
+    ? {
        slot: 'header-right',
        class: 'right-4 top-4'
-  } : {
+      }
+    : {
        name: '#right',
        class: 'right-4 inset-y-4 w-64'
      }]
@@ -679,22 +709,28 @@ const blocks = computed(() => [isAfterStep(steps.header) && {
  to: '/pro/components/footer',
  class: 'h-16 inset-x-0 bottom-0',
  inactive: isAfterStep(steps.footer + 1),
-  children: [isAfterStep(steps.footer + 2) ? {
+  children: [isAfterStep(steps.footer + 2)
+    ? {
        slot: 'footer-left',
        class: 'left-4 bottom-5'
-  } : {
+      }
+    : {
        name: '#left',
        class: 'left-4 inset-y-4 w-64'
-  }, isAfterStep(steps.footer + 3) ? {
+      }, isAfterStep(steps.footer + 3)
+    ? {
        slot: 'footer-center',
        class: 'inset-x-72 bottom-5'
-  } : {
+      }
+    : {
        name: '#center',
        class: 'inset-x-72 inset-y-4'
-  }, isAfterStep(steps.footer + 4) ? {
+      }, isAfterStep(steps.footer + 4)
+    ? {
        slot: 'footer-right',
        class: 'right-4 bottom-4'
-  } : {
+      }
+    : {
        name: '#right',
        class: 'right-4 inset-y-4 w-64'
      }]
@@ -702,15 +738,15 @@ const blocks = computed(() => [isAfterStep(steps.header) && {

 // Methods

-function isBeforeStep (i = 0) {
+function isBeforeStep(i = 0) {
  return y.value < (start.value + (i * inc.value))
 }

-function isAfterStep (i = 0) {
+function isAfterStep(i = 0) {
  return y.value >= (start.value + (i * inc.value))
 }

-function getStepY (step: number) {
+function getStepY(step: number) {
  return start.value + (step * inc.value)
 }

--- a/docs/pages/releases.vue
+++ b/docs/pages/releases.vue
@@ -50,7 +50,7 @@ const dates = computed(() => {

  const days = eachDayOfInterval({ start: new Date(first.published_at), end: new Date() })

-  return days.reverse().map(day => {
+  return days.reverse().map((day) => {
    return {
      day,
      release: releases.value.find(release => isSameDay(new Date(release.published_at), day)),
--- a/docs/plugins/prettier.ts
+++ b/docs/plugins/prettier.ts
@@ -6,7 +6,7 @@ export interface SimplePrettier {
  format: (source: string, options?: Options) => Promise<string>
 }

-function createPrettierWorkerApi (worker: Worker): SimplePrettier {
+function createPrettierWorkerApi(worker: Worker): SimplePrettier {
  let counter = 0
  const handlers: any = {}

@@ -18,6 +18,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
    }

    const [resolve, reject] = handlers[uid]
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
    delete handlers[uid]

    if (error) {
@@ -27,7 +28,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
    }
  })

-  function postMessage<T> (message: any) {
+  function postMessage<T>(message: any) {
    const uid = ++counter
    return new Promise<T>((resolve, reject) => {
      handlers[uid] = [resolve, reject]
@@ -36,7 +37,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
  }

  return {
-    format (source: string, options?: Options) {
+    format(source: string, options?: Options) {
      return postMessage({ type: 'format', source, options })
    }
  }
@@ -47,7 +48,7 @@ export default defineNuxtPlugin(async () => {
  if (import.meta.server) {
    const prettierModule = await import('prettier')
    prettier = {
-      format (source, options = {}) {
+      format(source, options = {}) {
        return prettierModule.format(source, defu(options, {
          parser: 'markdown'
        }))
--- a/docs/plugins/ui.ts
+++ b/docs/plugins/ui.ts
@@ -3,7 +3,7 @@ import colors from '#tailwind-config/theme/colors'

 export default defineNuxtPlugin({
  enforce: 'post',
-  setup () {
+  setup() {
    const appConfig = useAppConfig()

    const root = computed(() => {
--- a/docs/server/api/pulls.json.get.ts
+++ b/docs/server/api/pulls.json.get.ts
@@ -1,6 +1,6 @@
 import { Octokit } from '@octokit/rest'

-function isUserABot (user) {
+function isUserABot(user) {
  return user?.login?.endsWith('-bot') || user?.login?.endsWith('[bot]')
 }

--- a/docs/workers/prettier.js
+++ b/docs/workers/prettier.js
@@ -6,14 +6,14 @@ self.onmessage = async function (event) {
  })
 }

-function handleMessage (message) {
+function handleMessage(message) {
  switch (message.type) {
    case 'format':
      return handleFormatMessage(message)
  }
 }

-async function handleFormatMessage (message) {
+async function handleFormatMessage(message) {
  if (!globalThis.prettier) {
    await Promise.all([
      import('https://unpkg.com/prettier@3.3.3/standalone.js'),
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,19 @@
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+export default createConfigForNuxt({
+  features: {
+    tooling: true,
+    stylistic: {
+      commaDangle: 'never',
+      braceStyle: '1tbs'
+    }
+  }
+}).overrideRules({
+  'vue/multi-word-component-names': 'off',
+  'vue/max-attributes-per-line': ['error', { singleline: 5 }],
+  '@typescript-eslint/ban-types': 'off',
+  '@typescript-eslint/ban-ts-comment': 'off',
+  '@typescript-eslint/no-unsafe-function-type': 'off',
+  '@typescript-eslint/no-empty-object-type': 'off',
+  '@typescript-eslint/no-explicit-any': 'off'
+})
--- a/package.json
+++ b/package.json
@@ -56,12 +56,12 @@
    "tailwindcss": "^3.4.14"
  },
  "devDependencies": {
-    "@nuxt/eslint-config": "^0.4.0",
+    "@nuxt/eslint-config": "^0.6.0",
    "@nuxt/module-builder": "^0.8.4",
    "@nuxt/test-utils": "^3.14.4",
    "@release-it/conventional-changelog": "^9.0.1",
    "@vue/test-utils": "^2.4.6",
-    "eslint": "^8.57.0",
+    "eslint": "^9.13.0",
    "happy-dom": "^14.12.3",
    "joi": "^17.13.3",
    "nuxt": "^3.13.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/renovate.json
+++ b/renovate.json
@@ -6,8 +6,6 @@
    "enabled": true
  },
  "ignoreDeps": [
-    "@nuxt/eslint-config",
-    "eslint",
    "happy-dom",
    "valibot30",
    "valibot31"
--- a/scripts/bump-edge.ts
+++ b/scripts/bump-edge.ts
@@ -1,8 +1,8 @@
-import { promises as fsp } from 'fs'
-import { resolve } from 'path'
-import { execSync } from 'child_process'
+import { promises as fsp } from 'node:fs'
+import { resolve } from 'node:path'
+import { execSync } from 'node:child_process'

-async function loadPackage (dir: string) {
+async function loadPackage(dir: string) {
  const pkgPath = resolve(dir, 'package.json')

  const data = JSON.parse(await fsp.readFile(pkgPath, 'utf-8').catch(() => '{}'))
@@ -16,7 +16,7 @@ async function loadPackage (dir: string) {
  }
 }

-async function main () {
+async function main() {
  const pkg = await loadPackage(process.cwd())

  const commit = execSync('git rev-parse --short HEAD').toString('utf-8').trim()
@@ -31,7 +31,6 @@ async function main () {
 }

 main().catch((err) => {
-  // eslint-disable-next-line no-console
  console.error(err)
  process.exit(1)
 })
--- a/src/module.ts
+++ b/src/module.ts
@@ -2,7 +2,7 @@ import { createRequire } from 'node:module'
 import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
 import { name, version } from '../package.json'
 import createTemplates from './templates'
-import * as config from './runtime/ui.config'
+import type * as config from './runtime/ui.config'
 import type { DeepPartial, Strategy } from './runtime/types'
 import installTailwind from './tailwind'

@@ -62,7 +62,7 @@ export default defineNuxtModule<ModuleOptions>({
    safelistColors: ['primary'],
    disableGlobalStyles: false
  },
-  async setup (options, nuxt) {
+  async setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url)

    // Transpile runtime
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -140,11 +140,11 @@ import { table } from '#ui/ui.config'

 const config = mergeConfig<typeof table>(appConfig.ui.strategy, appConfig.ui.table, table)

-function defaultComparator<T> (a: T, z: T): boolean {
+function defaultComparator<T>(a: T, z: T): boolean {
  return JSON.stringify(a) === JSON.stringify(z)
 }

-function defaultSort (a: any, b: any, direction: 'asc' | 'desc') {
+function defaultSort(a: any, b: any, direction: 'asc' | 'desc') {
  if (a === b) {
    return 0
  }
@@ -239,10 +239,10 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'update:sort'],
-  setup (props, { emit, attrs: $attrs }) {
+  setup(props, { emit, attrs: $attrs }) {
    const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))

-    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort }) as TableColumn))
+    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map(key => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort }) as TableColumn))

    const sort = useVModel(props, 'sort', emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: 'asc' }) })

@@ -261,17 +261,17 @@ export default defineComponent({
        const aValue = get(a, column)
        const bValue = get(b, column)

-        const sort = columns.value.find((col) => col.key === column)?.sort ?? defaultSort
+        const sort = columns.value.find(col => col.key === column)?.sort ?? defaultSort

        return sort(aValue, bValue, direction)
      })
    })

    const selected = computed({
-      get () {
+      get() {
        return props.modelValue
      },
-      set (value) {
+      set(value) {
        emit('update:modelValue', value)
      }
    })
@@ -288,7 +288,7 @@ export default defineComponent({
      return { ...ui.value.default.loadingState, ...props.loadingState }
    })

-    function compare (a: any, z: any) {
+    function compare(a: any, z: any) {
      if (typeof props.by === 'string') {
        const accesorFn = accessor(props.by)
        return accesorFn(a) === accesorFn(z)
@@ -296,19 +296,19 @@ export default defineComponent({
      return props.by(a, z)
    }

-    function accessor <T extends Record<string, any>> (key: string) {
+    function accessor<T extends Record<string, any>>(key: string) {
      return (obj: T) => get(obj, key)
    }

-    function isSelected (row: TableRow) {
+    function isSelected(row: TableRow) {
      if (!props.modelValue) {
        return false
      }

-      return selected.value.some((item) => compare(toRaw(item), toRaw(row)))
+      return selected.value.some(item => compare(toRaw(item), toRaw(row)))
    }

-    function onSort (column: { key: string, direction?: 'asc' | 'desc' }) {
+    function onSort(column: { key: string, direction?: 'asc' | 'desc' }) {
      if (sort.value.column === column.key) {
        const direction = !column.direction || column.direction === 'asc' ? 'desc' : 'asc'

@@ -322,7 +322,7 @@ export default defineComponent({
      }
    }

-    function onSelect (row: TableRow) {
+    function onSelect(row: TableRow) {
      if (!$attrs.onSelect) {
        return
      }
@@ -331,7 +331,7 @@ export default defineComponent({
      $attrs.onSelect(row)
    }

-    function selectAllRows () {
+    function selectAllRows() {
      // Create a new array to ensure reactivity
      const newSelected = [...selected.value]

@@ -346,7 +346,7 @@ export default defineComponent({
      selected.value = newSelected
    }

-    function onChange (checked: boolean) {
+    function onChange(checked: boolean) {
      if (checked) {
        selectAllRows()
      } else {
@@ -354,28 +354,28 @@ export default defineComponent({
      }
    }

-    function onChangeCheckbox (checked: boolean, row: TableRow) {
+    function onChangeCheckbox(checked: boolean, row: TableRow) {
      if (checked) {
        selected.value.push(row)
      } else {
-        const index = selected.value.findIndex((item) => compare(item, row))
+        const index = selected.value.findIndex(item => compare(item, row))
        selected.value.splice(index, 1)
      }
    }

-    function getRowData (row: TableRow, rowKey: string | string[], defaultValue: any = '') {
+    function getRowData(row: TableRow, rowKey: string | string[], defaultValue: any = '') {
      return get(row, rowKey, defaultValue)
    }

-    function toggleOpened (index: number) {
+    function toggleOpened(index: number) {
      if (openedRows.value.includes(index)) {
-        openedRows.value = openedRows.value.filter((i) => i !== index)
+        openedRows.value = openedRows.value.filter(i => i !== index)
      } else {
        openedRows.value.push(index)
      }
    }

-    function getAriaSort (column: TableColumn): AriaAttributes['aria-sort'] {
+    function getAriaSort(column: TableColumn): AriaAttributes['aria-sort'] {
      if (!column.sortable) {
        return undefined
      }
--- a/src/runtime/components/elements/Accordion.vue
+++ b/src/runtime/components/elements/Accordion.vue
@@ -127,7 +127,7 @@ export default defineComponent({
    }
  },
  emits: ['open'],
-  setup (props, { emit }) {
+  setup(props, { emit }) {
    const { ui, attrs } = useUI('accordion', toRef(props, 'ui'), config, toRef(props, 'class'))

    const uiButton = computed<typeof configButton>(() => configButton)
@@ -146,7 +146,7 @@ export default defineComponent({
      }
    }, { immediate: true })

-    function closeOthers (currentIndex: number, e: Event) {
+    function closeOthers(currentIndex: number, e: Event) {
      if (!props.items[currentIndex].closeOthers && props.multiple) {
        return
      }
@@ -158,27 +158,29 @@ export default defineComponent({
      })
    }

-    function onEnter (_el: Element, done: () => void) {
+    function onEnter(_el: Element, done: () => void) {
      const el = _el as HTMLElement
      el.style.height = '0'
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      el.offsetHeight // Trigger a reflow, flushing the CSS changes
      el.style.height = el.scrollHeight + 'px'

      el.addEventListener('transitionend', done, { once: true })
    }

-    function onBeforeLeave (_el: Element) {
+    function onBeforeLeave(_el: Element) {
      const el = _el as HTMLElement
      el.style.height = el.scrollHeight + 'px'
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      el.offsetHeight // Trigger a reflow, flushing the CSS changes
    }

-    function onAfterEnter (_el: Element) {
+    function onAfterEnter(_el: Element) {
      const el = _el as HTMLElement
      el.style.height = 'auto'
    }

-    function onLeave (_el: Element, done: () => void) {
+    function onLeave(_el: Element, done: () => void) {
      const el = _el as HTMLElement
      el.style.height = '0'

--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -90,14 +90,14 @@ export default defineComponent({
    color: {
      type: String as PropType<AlertColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
      }
    },
    variant: {
      type: String as PropType<AlertVariant>,
      default: () => config.default.variant,
-      validator (value: string) {
+      validator(value: string) {
        return [
          ...Object.keys(config.variant),
          ...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -114,7 +114,7 @@ export default defineComponent({
    }
  },
  emits: ['close'],
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('alert', toRef(props, 'ui'), config)

    const alertClass = computed(() => {
@@ -129,7 +129,7 @@ export default defineComponent({
      ), props.class)
    })

-    function onAction (action: AlertAction) {
+    function onAction(action: AlertAction) {
      if (action.click) {
        action.click()
      }
--- a/src/runtime/components/elements/Avatar.vue
+++ b/src/runtime/components/elements/Avatar.vue
@@ -63,21 +63,21 @@ export default defineComponent({
    size: {
      type: String as PropType<AvatarSize>,
      default: () => config.default.size,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
    chipColor: {
      type: String as PropType<AvatarChipColor>,
      default: () => config.default.chipColor,
-      validator (value: string) {
+      validator(value: string) {
        return ['gray', ...appConfig.ui.colors].includes(value)
      }
    },
    chipPosition: {
      type: String as PropType<AvatarChipPosition>,
      default: () => config.default.chipPosition,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.chip.position).includes(value)
      }
    },
@@ -98,7 +98,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('avatar', toRef(props, 'ui'), config)

    const url = computed(() => {
@@ -152,7 +152,7 @@ export default defineComponent({
      }
    })

-    function onError () {
+    function onError() {
      error.value = true
    }

--- a/src/runtime/components/elements/AvatarGroup.ts
+++ b/src/runtime/components/elements/AvatarGroup.ts
@@ -1,10 +1,10 @@
 import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UAvatar from './Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
 import type { AvatarSize, Strategy } from '../../types/index'
+import UAvatar from './Avatar.vue'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { avatar, avatarGroup } from '#ui/ui.config'
@@ -19,7 +19,7 @@ export default defineComponent({
    size: {
      type: String as PropType<AvatarSize>,
      default: null,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(avatarConfig.size).includes(value)
      }
    },
@@ -36,12 +36,12 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props, { slots }) {
+  setup(props, { slots }) {
    const { ui, attrs } = useUI('avatarGroup', toRef(props, 'ui'), avatarGroupConfig, toRef(props, 'class'))

    const children = computed(() => getSlotsChildren(slots))

-    const max = computed(() => typeof props.max === 'string' ? parseInt(props.max, 10) : props.max)
+    const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)

    const clones = computed(() => children.value.map((node, index) => {
      const vProps: any = {}
--- a/src/runtime/components/elements/Badge.vue
+++ b/src/runtime/components/elements/Badge.vue
@@ -24,21 +24,21 @@ export default defineComponent({
    size: {
      type: String as PropType<BadgeSize>,
      default: () => config.default.size,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
    color: {
      type: String as PropType<BadgeColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
      }
    },
    variant: {
      type: String as PropType<BadgeVariant>,
      default: () => config.default.variant,
-      validator (value: string) {
+      validator(value: string) {
        return [
          ...Object.keys(config.variant),
          ...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -58,7 +58,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('badge', toRef(props, 'ui'), config)

    const { size, rounded } = useInjectButtonGroup({ ui, props })
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -67,21 +67,21 @@ export default defineComponent({
    size: {
      type: String as PropType<ButtonSize>,
      default: () => config.default.size,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
    color: {
      type: String as PropType<ButtonColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
      }
    },
    variant: {
      type: String as PropType<ButtonVariant>,
      default: () => config.default.variant,
-      validator (value: string) {
+      validator(value: string) {
        return [
          ...Object.keys(config.variant),
          ...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -129,7 +129,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props, { slots }) {
+  setup(props, { slots }) {
    const { ui, attrs } = useUI('button', toRef(props, 'ui'), config)

    const { size, rounded } = useInjectButtonGroup({ ui, props })
--- a/src/runtime/components/elements/ButtonGroup.ts
+++ b/src/runtime/components/elements/ButtonGroup.ts
@@ -19,14 +19,14 @@ export default defineComponent({
    size: {
      type: String as PropType<ButtonSize>,
      default: null,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(buttonConfig.size).includes(value)
      }
    },
    orientation: {
      type: String as PropType<'horizontal' | 'vertical'>,
      default: 'horizontal',
-      validator (value: string) {
+      validator(value: string) {
        return ['horizontal', 'vertical'].includes(value)
      }
    },
@@ -39,7 +39,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props, { slots }) {
+  setup(props, { slots }) {
    const { ui, attrs } = useUI('buttonGroup', toRef(props, 'ui'), buttonGroupConfig)

    const children = computed(() => getSlotsChildren(slots))
--- a/src/runtime/components/elements/Carousel.vue
+++ b/src/runtime/components/elements/Carousel.vue
@@ -59,12 +59,12 @@
 import { ref, toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
+import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
 import { mergeConfig } from '../../utils'
 import UButton from '../elements/Button.vue'
 import type { Strategy, Button, DeepPartial } from '../../types/index'
 import { useUI } from '../../composables/useUI'
 import { useCarouselScroll } from '../../composables/useCarouselScroll'
-import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { carousel } from '#ui/ui.config'
@@ -110,7 +110,7 @@ export default defineComponent({
      default: undefined
    }
  },
-  setup (props, { expose }) {
+  setup(props, { expose }) {
    const { ui, attrs } = useUI('carousel', toRef(props, 'ui'), config, toRef(props, 'class'))

    const carouselRef = ref<HTMLElement>()
@@ -157,15 +157,15 @@ export default defineComponent({
    const isFirst = computed(() => currentPage.value <= 1)
    const isLast = computed(() => currentPage.value === pages.value)

-    function onClickNext () {
+    function onClickNext() {
      x.value += isRtl.value ? -itemWidth.value : itemWidth.value
    }

-    function onClickPrev () {
+    function onClickPrev() {
      x.value -= isRtl.value ? -itemWidth.value : itemWidth.value
    }

-    function onClick (page: number) {
+    function onClick(page: number) {
      x.value = (page - 1) * itemWidth.value * (isRtl.value ? -1 : 1)
    }

--- a/src/runtime/components/elements/Chip.vue
+++ b/src/runtime/components/elements/Chip.vue
@@ -29,21 +29,21 @@ export default defineComponent({
    size: {
      type: String as PropType<ChipSize>,
      default: () => config.default.size,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
    color: {
      type: String as PropType<ChipColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return ['gray', ...appConfig.ui.colors].includes(value)
      }
    },
    position: {
      type: String as PropType<ChipPosition>,
      default: () => config.default.position,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.position).includes(value)
      }
    },
@@ -68,7 +68,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('chip', toRef(props, 'ui'), config, toRef(props, 'class'))

    const chipClass = computed(() => {
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -126,7 +126,7 @@ export default defineComponent({
    }
  },
  emits: ['update:open'],
-  setup (props, { emit }) {
+  setup(props, { emit }) {
    const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))

    const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
@@ -182,7 +182,7 @@ export default defineComponent({
      }
    })

-    function onTouchStart (event: TouchEvent) {
+    function onTouchStart(event: TouchEvent) {
      if (!event.cancelable || !menuApi.value || props.mode === 'click') {
        return
      }
@@ -194,7 +194,7 @@ export default defineComponent({
      }
    }

-    function onMouseEnter () {
+    function onMouseEnter() {
      if (props.mode !== 'hover' || !menuApi.value) {
        return
      }
@@ -209,12 +209,14 @@ export default defineComponent({
        return
      }
      openTimeout = openTimeout || setTimeout(() => {
-        menuApi.value.openMenu && menuApi.value.openMenu()
+        if (menuApi.value.openMenu) {
+          menuApi.value.openMenu()
+        }
        openTimeout = null
      }, props.openDelay)
    }

-    function onMouseLeave () {
+    function onMouseLeave() {
      if (props.mode !== 'hover' || !menuApi.value) {
        return
      }
@@ -229,12 +231,14 @@ export default defineComponent({
        return
      }
      closeTimeout = closeTimeout || setTimeout(() => {
-        menuApi.value.closeMenu && menuApi.value.closeMenu()
+        if (menuApi.value.closeMenu) {
+          menuApi.value.closeMenu()
+        }
        closeTimeout = null
      }, props.closeDelay)
    }

-    function onClick (e, item, { href, navigate, close, isExternal }) {
+    function onClick(e, item, { href, navigate, close, isExternal }) {
      if (item.click) {
        item.click(e)
      }
--- a/src/runtime/components/elements/Kbd.vue
+++ b/src/runtime/components/elements/Kbd.vue
@@ -27,7 +27,7 @@ export default defineComponent({
    size: {
      type: String as PropType<KbdSize>,
      default: () => config.default.size,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
@@ -40,7 +40,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('kbd', toRef(props, 'ui'), config)

    const kbdClass = computed(() => {
--- a/src/runtime/components/elements/Link.vue
+++ b/src/runtime/components/elements/Link.vue
@@ -73,8 +73,8 @@ export default defineComponent({
      default: undefined
    }
  },
-  setup (props) {
-    function resolveLinkClass (route, $route, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
+  setup(props) {
+    function resolveLinkClass(route, $route, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
      if (props.exactQuery && !isEqual(route.query, $route.query)) {
        return props.inactiveClass
      }
--- a/src/runtime/components/elements/Meter.vue
+++ b/src/runtime/components/elements/Meter.vue
@@ -47,8 +47,8 @@ export default defineComponent({
  },
  inheritAttrs: false,
  slots: Object as SlotsType<{
-    indicator?: { percent: number, value: number },
-    label?: { percent: number, value: number },
+    indicator?: { percent: number, value: number }
+    label?: { percent: number, value: number }
  }>,
  props: {
    value: {
@@ -74,14 +74,14 @@ export default defineComponent({
    size: {
      type: String as PropType<MeterSize>,
      default: () => config.default.size,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.meter.size).includes(value)
      }
    },
    color: {
      type: String as PropType<MeterColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
      }
    },
@@ -98,10 +98,10 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('meter', toRef(props, 'ui'), config, toRef(props, 'class'))

-    function clampPercent (value: number, min: number, max: number): number {
+    function clampPercent(value: number, min: number, max: number): number {
      if (min == max) {
        return value < min ? 0 : 100
      }
--- a/src/runtime/components/elements/MeterGroup.ts
+++ b/src/runtime/components/elements/MeterGroup.ts
@@ -2,10 +2,10 @@ import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
 import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
-import Meter from './Meter.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
 import type { Strategy, MeterSize } from '../../types/index'
+import type Meter from './Meter.vue'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { meter, meterGroup } from '#ui/ui.config'
@@ -19,8 +19,8 @@ export default defineComponent({
  },
  inheritAttrs: false,
  slots: Object as SlotsType<{
-    default?: typeof Meter[],
-    indicator?: { percent: number },
+    default?: typeof Meter[]
+    indicator?: { percent: number }
  }>,
  props: {
    min: {
@@ -34,7 +34,7 @@ export default defineComponent({
    size: {
      type: String as PropType<MeterSize>,
      default: () => meterConfig.default.size,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(meterConfig.meter.bar.size).includes(value)
      }
    },
@@ -55,7 +55,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props, { slots }) {
+  setup(props, { slots }) {
    const { ui, attrs } = useUI('meterGroup', toRef(props, 'ui'), meterGroupConfig)
    const { ui: uiMeter } = useUI('meter', undefined, meterConfig)

@@ -72,7 +72,7 @@ export default defineComponent({

    const rounded = computed(() => ui.value.orientation[ui.value.rounded])

-    function clampPercent (value: number, min: number, max: number): number {
+    function clampPercent(value: number, min: number, max: number): number {
      if (min == max) {
        return value < min ? 0 : 100
      }
@@ -138,9 +138,9 @@ export default defineComponent({
      const clone = cloneVNode(node, vProps)

      // @ts-expect-error
-      delete(clone.children?.label)
-      delete(clone.props?.indicator)
-      delete(clone.props?.label)
+      delete (clone.children?.label)
+      delete (clone.props?.indicator)
+      delete (clone.props?.label)

      return clone
    }))
@@ -196,7 +196,7 @@ export default defineComponent({

        return h('li', { class: labelClass.value }, [
          h(UIcon, { name: clones.value[key]?.props.icon ?? props.icon }),
-          `${label} (${ Math.round(percents.value[key]) }%)`
+          `${label} (${Math.round(percents.value[key])}%)`
        ])
      }))

--- a/src/runtime/components/elements/Progress.vue
+++ b/src/runtime/components/elements/Progress.vue
@@ -58,21 +58,21 @@ export default defineComponent({
    animation: {
      type: String as PropType<ProgressAnimation>,
      default: () => config.default.animation,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.animation).includes(value)
      }
    },
    size: {
      type: String as PropType<ProgressSize>,
      default: () => config.default.size,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.progress.size).includes(value)
      }
    },
    color: {
      type: String as PropType<ProgressColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return appConfig.ui.colors.includes(value)
      }
    },
@@ -85,7 +85,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('progress', toRef(props, 'ui'), config, toRef(props, 'class'))

    const indicatorContainerClass = computed(() => {
@@ -154,15 +154,15 @@ export default defineComponent({
      )
    })

-    function isActive (index: number) {
+    function isActive(index: number) {
      return index === Number(props.value)
    }

-    function isFirst (index: number) {
+    function isFirst(index: number) {
      return index === 0
    }

-    function stepClasses (index: string | number) {
+    function stepClasses(index: string | number) {
      index = Number(index)

      const classes = [stepClass.value]
@@ -421,4 +421,5 @@ progress:indeterminate {
    width: 90%;
    margin-left: 5%
  }
-}</style>
+}
+</style>
--- a/src/runtime/components/forms/Checkbox.vue
+++ b/src/runtime/components/forms/Checkbox.vue
@@ -40,7 +40,7 @@ import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { checkbox } from '#ui/ui.config'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'
 import { useId } from '#app'

 const config = mergeConfig<typeof checkbox>(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox)
@@ -87,7 +87,7 @@ export default defineComponent({
    color: {
      type: String as PropType<typeof colors[number]>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return appConfig.ui.colors.includes(value)
      }
    },
@@ -105,17 +105,17 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'change'],
-  setup (props, { emit }) {
+  setup(props, { emit }) {
    const { ui, attrs } = useUI('checkbox', toRef(props, 'ui'), config, toRef(props, 'class'))

    const { emitFormChange, color, name, inputId: _inputId } = useFormGroup(props)
    const inputId = _inputId.value ?? useId()

    const toggle = computed({
-      get () {
+      get() {
        return props.modelValue
      },
-      set (value) {
+      set(value) {
        emit('update:modelValue', value)
      }
    })
--- a/src/runtime/components/forms/Form.vue
+++ b/src/runtime/components/forms/Form.vue
@@ -18,7 +18,7 @@ import type { FormError, FormEvent, FormEventType, FormSubmitEvent, FormErrorEve
 import { useId } from '#imports'

 class FormException extends Error {
-  constructor (message: string) {
+  constructor(message: string) {
    super(message)
    this.message = message
    Object.setPrototypeOf(this, FormException.prototype)
@@ -55,7 +55,7 @@ export default defineComponent({
    }
  },
  emits: ['submit', 'error'],
-  setup (props, { expose, emit }) {
+  setup(props, { expose, emit }) {
    const formId = useId()
    const bus = useEventBus<FormEvent>(`form-${formId}`)

@@ -77,7 +77,7 @@ export default defineComponent({
    const inputs = ref({})
    provide('form-inputs', inputs)

-    async function getErrors (): Promise<FormError[]> {
+    async function getErrors(): Promise<FormError[]> {
      let errs = await props.validate(props.state)

      if (props.schema) {
@@ -99,7 +99,7 @@ export default defineComponent({
      return errs
    }

-    async function validate (path?: string | string[], opts: { silent?: boolean } = { silent: false }) {
+    async function validate(path?: string | string[], opts: { silent?: boolean } = { silent: false }) {
      let paths = path

      if (path && !Array.isArray(path)) {
@@ -108,10 +108,10 @@ export default defineComponent({

      if (paths) {
        const otherErrors = errors.value.filter(
-          (error) => !paths.includes(error.path)
+          error => !paths.includes(error.path)
        )
        const pathErrors = (await getErrors()).filter(
-          (error) => paths.includes(error.path)
+          error => paths.includes(error.path)
        )
        errors.value = otherErrors.concat(pathErrors)
      } else {
@@ -129,7 +129,7 @@ export default defineComponent({
      return props.state
    }

-    async function onSubmit (payload: Event) {
+    async function onSubmit(payload: Event) {
      const event = payload as FormSubmitEvent<any>
      try {
        if (props.validateOn?.includes('submit')) {
@@ -144,7 +144,7 @@ export default defineComponent({

        const errorEvent: FormErrorEvent = {
          ...event,
-          errors: errors.value.map((err) => ({
+          errors: errors.value.map(err => ({
            ...err,
            id: inputs.value[err.path]
          }))
@@ -156,27 +156,27 @@ export default defineComponent({
    expose({
      validate,
      errors,
-      setErrors (errs: FormError[], path?: string) {
+      setErrors(errs: FormError[], path?: string) {
        if (path) {
          errors.value = errors.value.filter(
-            (error) => error.path !== path
+            error => error.path !== path
          ).concat(errs)
        } else {
          errors.value = errs
        }
      },
-      async submit () {
+      async submit() {
        await onSubmit(new Event('submit'))
      },
-      getErrors (path?: string) {
+      getErrors(path?: string) {
        if (path) {
-          return errors.value.filter((err) => err.path === path)
+          return errors.value.filter(err => err.path === path)
        }
        return errors.value
      },
-      clear (path?: string) {
+      clear(path?: string) {
        if (path) {
-          errors.value = errors.value.filter((err) => err.path !== path)
+          errors.value = errors.value.filter(err => err.path !== path)
        } else {
          errors.value = []
        }
@@ -190,24 +190,24 @@ export default defineComponent({
  }
 })

-function isYupSchema (schema: any): schema is YupObjectSchema<any> {
+function isYupSchema(schema: any): schema is YupObjectSchema<any> {
  return schema.validate && schema.__isYupSchema__
 }

-function isYupError (error: any): error is YupError {
+function isYupError(error: any): error is YupError {
  return error.inner !== undefined
 }

-function isSuperStructSchema (schema: any): schema is Struct<any, any> {
+function isSuperStructSchema(schema: any): schema is Struct<any, any> {
  return (
-    'schema' in schema &&
-    typeof schema.coercer === 'function' &&
-    typeof schema.validator === 'function' &&
-    typeof schema.refiner === 'function'
+    'schema' in schema
+    && typeof schema.coercer === 'function'
+    && typeof schema.validator === 'function'
+    && typeof schema.refiner === 'function'
  )
 }

-async function getYupErrors (
+async function getYupErrors(
  state: any,
  schema: YupObjectSchema<any>
 ): Promise<FormError[]> {
@@ -216,7 +216,7 @@ async function getYupErrors (
    return []
  } catch (error) {
    if (isYupError(error)) {
-      return error.inner.map((issue) => ({
+      return error.inner.map(issue => ({
        path: issue.path ?? '',
        message: issue.message
      }))
@@ -226,15 +226,15 @@ async function getYupErrors (
  }
 }

-function isZodSchema (schema: any): schema is ZodSchema {
+function isZodSchema(schema: any): schema is ZodSchema {
  return schema.parse !== undefined
 }

-async function getSuperStructErrors (state: any, schema: Struct<any, any>): Promise<FormError[]> {
+async function getSuperStructErrors(state: any, schema: Struct<any, any>): Promise<FormError[]> {
  const [err] = schema.validate(state)
  if (err) {
    const errors = err.failures()
-    return errors.map((error) => ({
+    return errors.map(error => ({
      message: error.message,
      path: error.path.join('.')
    }))
@@ -242,13 +242,13 @@ async function getSuperStructErrors (state: any, schema: Struct<any, any>): Prom
  return []
 }

-async function getZodErrors (
+async function getZodErrors(
  state: any,
  schema: ZodSchema
 ): Promise<FormError[]> {
  const result = await schema.safeParseAsync(state)
  if (result.success === false) {
-    return result.error.issues.map((issue) => ({
+    return result.error.issues.map(issue => ({
      path: issue.path.join('.'),
      message: issue.message
    }))
@@ -256,15 +256,15 @@ async function getZodErrors (
  return []
 }

-function isJoiSchema (schema: any): schema is JoiSchema {
+function isJoiSchema(schema: any): schema is JoiSchema {
  return schema.validateAsync !== undefined && schema.id !== undefined
 }

-function isJoiError (error: any): error is JoiError {
+function isJoiError(error: any): error is JoiError {
  return error.isJoi === true
 }

-async function getJoiErrors (
+async function getJoiErrors(
  state: any,
  schema: JoiSchema
 ): Promise<FormError[]> {
@@ -273,7 +273,7 @@ async function getJoiErrors (
    return []
  } catch (error) {
    if (isJoiError(error)) {
-      return error.details.map((detail) => ({
+      return error.details.map(detail => ({
        path: detail.path.join('.'),
        message: detail.message
      }))
@@ -283,19 +283,18 @@ async function getJoiErrors (
  }
 }

-
-function isValibotSchema (schema: any): schema is ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> {
+function isValibotSchema(schema: any): schema is ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> {
  return '_parse' in schema || '_run' in schema || (typeof schema === 'function' && 'schema' in schema)
 }

-async function getValibotError (
+async function getValibotError(
  state: any,
  schema: ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>
 ): Promise<FormError[]> {
  const result = await ('_parse' in schema ? schema._parse(state) : '_run' in schema ? schema._run({ typed: false, value: state }, {}) : schema(state))
-  return result.issues?.map((issue) => ({
+  return result.issues?.map(issue => ({
    // We know that the key for a form schema is always a string or a number
-    path: issue.path?.map((item) => item.key).join('.') || '',
+    path: issue.path?.map(item => item.key).join('.') || '',
    message: issue.message
  })) || []
 }
--- a/src/runtime/components/forms/FormGroup.vue
+++ b/src/runtime/components/forms/FormGroup.vue
@@ -62,7 +62,7 @@ export default defineComponent({
    size: {
      type: String as PropType<FormGroupSize>,
      default: null,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
@@ -103,7 +103,7 @@ export default defineComponent({
      default: false
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('formGroup', toRef(props, 'ui'), config, toRef(props, 'class'))

    const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
@@ -111,7 +111,7 @@ export default defineComponent({
    const error = computed(() => {
      return (props.error && typeof props.error === 'string') || typeof props.error === 'boolean'
        ? props.error
-        : formErrors?.value?.find((error) => error.path === props.name)?.message
+        : formErrors?.value?.find(error => error.path === props.name)?.message
    })

    const size = computed(() => ui.value.size[props.size ?? config.default.size])
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -34,8 +34,8 @@
 import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
 import { defu } from 'defu'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, looseToNumber } from '../../utils'
@@ -124,21 +124,21 @@ export default defineComponent({
    size: {
      type: String as PropType<InputSize>,
      default: null,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
    color: {
      type: String as PropType<InputColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
      }
    },
    variant: {
      type: String as PropType<InputVariant>,
      default: () => config.default.variant,
-      validator (value: string) {
+      validator(value: string) {
        return [
          ...Object.keys(config.variant),
          ...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -163,7 +163,7 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'blur', 'change'],
-  setup (props, { emit, slots }) {
+  setup(props, { emit, slots }) {
    const { ui, attrs } = useUI('input', toRef(props, 'ui'), config, toRef(props, 'class'))

    const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
@@ -184,7 +184,6 @@ export default defineComponent({

    // Custom function to handle the v-model properties
    const updateInput = (value: string) => {
-
      if (modelModifiers.value.trim) {
        value = value.trim()
      }
--- a/src/runtime/components/forms/InputMenu.vue
+++ b/src/runtime/components/forms/InputMenu.vue
@@ -212,21 +212,21 @@ export default defineComponent({
    size: {
      type: String as PropType<InputSize>,
      default: null,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
    color: {
      type: String as PropType<InputColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
      }
    },
    variant: {
      type: String as PropType<InputVariant>,
      default: () => config.default.variant,
-      validator (value: string) {
+      validator(value: string) {
        return [
          ...Object.keys(config.variant),
          ...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -279,7 +279,7 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
-  setup (props, { emit, slots }) {
+  setup(props, { emit, slots }) {
    const { ui, attrs } = useUI('input', toRef(props, 'ui'), config, toRef(props, 'class'))
    const { ui: uiMenu } = useUI('inputMenu', toRef(props, 'uiMenu'), configMenu)

@@ -294,10 +294,10 @@ export default defineComponent({

    const internalQuery = ref('')
    const query = computed({
-      get () {
+      get() {
        return props.query ?? internalQuery.value
      },
-      set (value) {
+      set(value) {
        internalQuery.value = value
        emit('update:query', value)
      }
@@ -401,7 +401,7 @@ export default defineComponent({
      lazy: props.searchLazy
    })

-    function escapeRegExp (string: string) {
+    function escapeRegExp(string: string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    }

@@ -434,7 +434,7 @@ export default defineComponent({
      }
    })

-    function onUpdate (value: any) {
+    function onUpdate(value: any) {
      query.value = ''
      emit('update:modelValue', value)
      emit('change', value)
@@ -442,7 +442,7 @@ export default defineComponent({
      emitFormChange()
    }

-    function onQueryChange (event: any) {
+    function onQueryChange(event: any) {
      query.value = event.target.value
    }

--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -39,7 +39,7 @@ import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radio } from '#ui/ui.config'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'
 import { useId } from '#imports'

 const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
@@ -82,7 +82,7 @@ export default defineComponent({
    color: {
      type: String as PropType<typeof colors[number]>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return appConfig.ui.colors.includes(value)
      }
    },
@@ -100,7 +100,7 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'change'],
-  setup (props, { emit }) {
+  setup(props, { emit }) {
    const { ui, attrs } = useUI('radio', toRef(props, 'ui'), config, toRef(props, 'class'))

    const inputId = props.id ?? useId()
@@ -109,10 +109,10 @@ export default defineComponent({
    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)

    const pick = computed({
-      get () {
+      get() {
        return props.modelValue
      },
-      set (value) {
+      set(value) {
        emit('update:modelValue', value)
        if (!radioGroup) {
          emitFormChange()
@@ -120,7 +120,7 @@ export default defineComponent({
      }
    })

-    function onChange (event: Event) {
+    function onChange(event: Event) {
      emit('change', (event.target as HTMLInputElement).value)
    }

--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -30,17 +30,17 @@
 </template>

 <script lang="ts">
-import URadio from './Radio.vue'
 import { computed, defineComponent, provide, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
+import URadio from './Radio.vue'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radioGroup, radio } from '#ui/ui.config'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'

 const config = mergeConfig<typeof radioGroup>(appConfig.ui.strategy, appConfig.ui.radioGroup, radioGroup)
 const configRadio = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
@@ -82,7 +82,7 @@ export default defineComponent({
    color: {
      type: String as PropType<typeof colors[number]>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return appConfig.ui.colors.includes(value)
      }
    },
@@ -100,7 +100,7 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'change'],
-  setup (props, { emit }) {
+  setup(props, { emit }) {
    const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
    const { ui: uiRadio } = useUI('radio', toRef(props, 'uiRadio'), configRadio)

@@ -152,7 +152,7 @@ export default defineComponent({
      uiRadio,
      attrs,
      normalizedOptions,
-      // eslint-disable-next-line vue/no-dupe-keys
+
      onUpdate
    }
  }
--- a/src/runtime/components/forms/Range.vue
+++ b/src/runtime/components/forms/Range.vue
@@ -67,14 +67,14 @@ export default defineComponent({
    size: {
      type: String as PropType<RangeSize>,
      default: null,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
    color: {
      type: String as PropType<RangeColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return appConfig.ui.colors.includes(value)
      }
    },
@@ -92,16 +92,16 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'change'],
-  setup (props, { emit }) {
+  setup(props, { emit }) {
    const { ui, attrs } = useUI('range', toRef(props, 'ui'), config)

    const { emitFormChange, inputId, color, size, name } = useFormGroup(props, config)

    const value = computed({
-      get () {
+      get() {
        return props.modelValue
      },
-      set (value) {
+      set(value) {
        emit('update:modelValue', value)
      }
    })
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -137,21 +137,21 @@ export default defineComponent({
    size: {
      type: String as PropType<SelectSize>,
      default: null,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
    color: {
      type: String as PropType<SelectColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
      }
    },
    variant: {
      type: String as PropType<SelectVariant>,
      default: () => config.default.variant,
-      validator (value: string) {
+      validator(value: string) {
        return [
          ...Object.keys(config.variant),
          ...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -180,7 +180,7 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'change'],
-  setup (props, { emit, slots }) {
+  setup(props, { emit, slots }) {
    const { ui, attrs } = useUI('select', toRef(props, 'ui'), config, toRef(props, 'class'))

    const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -280,21 +280,21 @@ export default defineComponent({
    size: {
      type: String as PropType<SelectSize>,
      default: null,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
    color: {
      type: String as PropType<SelectColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
      }
    },
    variant: {
      type: String as PropType<SelectVariant>,
      default: () => config.default.variant,
-      validator (value: string) {
+      validator(value: string) {
        return [
          ...Object.keys(config.variant),
          ...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -335,7 +335,7 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
-  setup (props, { emit, slots }) {
+  setup(props, { emit, slots }) {
    if (import.meta.dev && props.multiple && !Array.isArray(props.modelValue)) {
      console.warn(`[@nuxt/ui] The USelectMenu components needs to have a modelValue of type Array when using the multiple prop. Got '${typeof props.modelValue}' instead.`, props.modelValue)
    }
@@ -354,10 +354,10 @@ export default defineComponent({

    const internalQuery = ref('')
    const query = computed({
-      get () {
+      get() {
        return props.query ?? internalQuery.value
      },
-      set (value) {
+      set(value) {
        internalQuery.value = value
        emit('update:query', value)
      }
@@ -485,7 +485,7 @@ export default defineComponent({
      lazy: props.searchableLazy
    })

-    function escapeRegExp (string: string) {
+    function escapeRegExp(string: string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    }

@@ -530,7 +530,7 @@ export default defineComponent({
      return ['string', 'number'].includes(typeof props.modelValue) ? query.value : { [props.optionAttribute]: query.value }
    })

-    function clearOnClose () {
+    function clearOnClose() {
      if (props.clearSearchOnClose) {
        query.value = ''
      }
@@ -546,13 +546,13 @@ export default defineComponent({
      }
    })

-    function onUpdate (value: any) {
+    function onUpdate(value: any) {
      emit('update:modelValue', value)
      emit('change', value)
      emitFormChange()
    }

-    function onQueryChange (event: any) {
+    function onQueryChange(event: any) {
      query.value = event.target.value
    }

--- a/src/runtime/components/forms/Textarea.vue
+++ b/src/runtime/components/forms/Textarea.vue
@@ -93,21 +93,21 @@ export default defineComponent({
    size: {
      type: String as PropType<TextareaSize>,
      default: null,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
    color: {
      type: String as PropType<TextareaColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
      }
    },
    variant: {
      type: String as PropType<TextareaVariant>,
      default: () => config.default.variant,
-      validator (value: string) {
+      validator(value: string) {
        return [
          ...Object.keys(config.variant),
          ...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -132,7 +132,7 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'blur', 'change'],
-  setup (props, { emit }) {
+  setup(props, { emit }) {
    const { ui, attrs } = useUI('textarea', toRef(props, 'ui'), config, toRef(props, 'class'))

    const { emitFormBlur, emitFormInput, inputId, color, size, name } = useFormGroup(props, config)
@@ -158,10 +158,10 @@ export default defineComponent({
        textarea.value.style.overflow = 'hidden'

        const styles = window.getComputedStyle(textarea.value)
-        const paddingTop = parseInt(styles.paddingTop)
-        const paddingBottom = parseInt(styles.paddingBottom)
+        const paddingTop = Number.parseInt(styles.paddingTop)
+        const paddingBottom = Number.parseInt(styles.paddingBottom)
        const padding = paddingTop + paddingBottom
-        const lineHeight = parseInt(styles.lineHeight)
+        const lineHeight = Number.parseInt(styles.lineHeight)
        const { scrollHeight } = textarea.value
        const newRows = (scrollHeight - padding) / lineHeight

--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -88,14 +88,14 @@ export default defineComponent({
    color: {
      type: String as PropType<ToggleColor>,
      default: () => config.default.color,
-      validator (value: string) {
+      validator(value: string) {
        return appConfig.ui.colors.includes(value)
      }
    },
    size: {
      type: String as PropType<ToggleSize>,
      default: () => config.default.size,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.size).includes(value)
      }
    },
@@ -109,16 +109,16 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'change'],
-  setup (props, { emit }) {
+  setup(props, { emit }) {
    const { ui, attrs } = useUI('toggle', toRef(props, 'ui'), config)

    const { emitFormChange, color, inputId, name } = useFormGroup(props)

    const active = computed({
-      get () {
+      get() {
        return props.modelValue
      },
-      set (value) {
+      set(value) {
        emit('update:modelValue', value)
        emit('change', value)

--- a/src/runtime/components/layout/Card.vue
+++ b/src/runtime/components/layout/Card.vue
@@ -45,7 +45,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('card', toRef(props, 'ui'), config)

    const cardClass = computed(() => {
--- a/src/runtime/components/layout/Container.vue
+++ b/src/runtime/components/layout/Container.vue
@@ -33,7 +33,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('container', toRef(props, 'ui'), config)

    const containerClass = computed(() => {
--- a/src/runtime/components/layout/Divider.vue
+++ b/src/runtime/components/layout/Divider.vue
@@ -55,7 +55,7 @@ export default defineComponent({
    size: {
      type: String as PropType<DividerSize>,
      default: () => config.default.size,
-      validator (value: string) {
+      validator(value: string) {
        return Object.keys(config.border.size.horizontal).includes(value) || Object.keys(config.border.size.vertical).includes(value)
      }
    },
@@ -78,7 +78,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('divider', toRef(props, 'ui'), config)

    const wrapperClass = computed(() => {
--- a/src/runtime/components/layout/Skeleton.vue
+++ b/src/runtime/components/layout/Skeleton.vue
@@ -31,7 +31,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('skeleton', toRef(props, 'ui'), config)

    const skeletonClass = computed(() => {
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -72,7 +72,7 @@ export default defineComponent({
      default: () => ({})
    }
  },
-  setup (props) {
+  setup(props) {
    const { ui, attrs } = useUI('breadcrumb', toRef(props, 'ui'), config, toRef(props, 'class'))

    return {
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -72,10 +72,10 @@ import { twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
 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'
 import type { Group, Command, Button, Strategy, DeepPartial } from '../../types/index'
+import CommandPaletteGroup from './CommandPaletteGroup.vue'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { commandPalette } from '#ui/ui.config'
@@ -180,7 +180,7 @@ export default defineComponent({
    }
  },
  emits: ['update:modelValue', 'close'],
-  setup (props, { emit, expose }) {
+  setup(props, { emit, expose }) {
    const { ui, attrs } = useUI('commandPalette', toRef(props, 'ui'), config, toRef(props, 'class'))

    const query = ref('')
@@ -228,7 +228,7 @@ export default defineComponent({

    const { results } = useFuse(query, commands, options)

-    function getGroupWithCommands (group: Group, commands: Command[]) {
+    function getGroupWithCommands(group: Group, commands: Command[]) {
      if (!group) {
        return
      }
@@ -269,13 +269,13 @@ export default defineComponent({
        return getGroupWithCommands(group, commands)
      }).filter(Boolean)

-      const searchGroups = props.groups.filter(group => !!group.search && searchResults.value[group.key]?.length).map(group => {
+      const searchGroups = props.groups.filter(group => !!group.search && searchResults.value[group.key]?.length).map((group) => {
        const commands = (searchResults.value[group.key] || [])

        return getGroupWithCommands(group, [...commands])
      })

-      const staticGroups: Group[] = props.groups.filter((group) => group.static && group.commands?.length).map((group) => {
+      const staticGroups: Group[] = props.groups.filter(group => group.static && group.commands?.length).map((group) => {
        return getGroupWithCommands(group, group.commands)
      })

@@ -333,21 +333,21 @@ export default defineComponent({

    // Methods

-    function activateFirstOption () {
+    function activateFirstOption() {
      setTimeout(() => {
        // https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804
        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp' }))
      }, 0)
    }

-    function activateNextOption () {
+    function activateNextOption() {
      setTimeout(() => {
        // https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L769
        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
      }, 0)
    }

-    function onSelect (option: Command | Command[]) {
+    function onSelect(option: Command | Command[]) {
      emit('update:modelValue', option, { query: query.value })

      // Clear input after selection
@@ -358,7 +358,7 @@ export default defineComponent({
      }
    }

-    function onClear () {
+    function onClear() {
      if (query.value) {
        query.value = ''
      } else {
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -77,7 +77,7 @@ import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UKbd from '../elements/Kbd.vue'
 import type { Command, Group } from '../../types/index'
-import { commandPalette } from '#ui/ui.config'
+import type { commandPalette } from '#ui/ui.config'
 import { useId } from '#imports'

 export default defineComponent({
@@ -113,14 +113,14 @@ export default defineComponent({
      required: true
    }
  },
-  setup (props) {
+  setup(props) {
    const label = computed(() => {
      const label = props.group[props.groupAttribute]

      return typeof label === 'function' ? label(props.query) : label
    })

-    function highlight (text: string, { indices, value }: Command['matches'][number]): string {
+    function highlight(text: string, { indices, value }: Command['matches'][number]): string {
      if (text === value) {
        return ''
      }
--- a/Show More
+++ b/Show More