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

.eslintignore

@@ -1,14 +0,0 @@
-node_modules
-dist
-.nuxt
-coverage
-*.log*
-.DS_Store
-.code
-*.iml
-package-lock.json
-templates/*
-sw.js
-
-# Templates
-src/templates

.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']
-  }
-}

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'

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[]

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 aBase = a.match(/[a-z]+/i)[0].toLowerCase()
-      const bBase = b.match(/[a-zA-Z]+/)[0].toLowerCase()
+      const bBase = b.match(/[a-z]+/i)[0].toLowerCase()
 
-      const aNum = parseInt(a.match(/\d+/)?.[0]) || 1
+      const aNum = Number.parseInt(a.match(/\d+/)?.[0]) || 1
-      const bNum = parseInt(b.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>
@@ -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,

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)}`

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)

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"
   />

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>

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
   })
 }

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>
 

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)
+  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,
+    _page: page.value,
-    '_limit': pageCount.value,
+    _limit: pageCount.value,
-    '_sort': sort.value.column,
+    _sort: sort.value.column,
-    '_order': sort.value.direction
+    _order: sort.value.direction
   }
 }), {
   default: () => [],

docs/components/content/examples/TableExampleClickable.vue

@@ -32,7 +32,7 @@ const people = [{
 }]
 
 function select(row) {
-  const index = selected.value.findIndex((item) => item.id === row.id)
+  const index = selected.value.findIndex(item => item.id === row.id)
   if (index === -1) {
     selected.value.push(row)
   } else {

docs/components/content/examples/TableExampleLoadingSlot.vue

@@ -67,7 +67,9 @@ const pending = ref(true)
 }
 
 @keyframes loader-6 {
-	0%, 100% {
+
+  0%,
+  100% {
     transform: none;
   }
 

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',

docs/components/content/examples/TabsExampleVModel.vue

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

docs/components/date-picker/DatePicker.vue

@@ -31,9 +31,9 @@ const breakpoints = useBreakpoints(breakpointsTailwind)
 const smallerThanSm = breakpoints.smaller('sm')
 
 const attrs = {
-  transparent: true,
+  'transparent': true,
-  borderless: true,
+  'borderless': true,
-  color: 'primary',
+  'color': 'primary',
   'is-dark': { selector: 'html', darkClass: 'dark' },
   'first-day-of-week': 2
 }

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 }}

docs/components/home/HomeTetris.vue

@@ -40,6 +40,7 @@ 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))
   }
 }

docs/composables/useComponentMeta.ts

@@ -7,7 +7,9 @@ export async function fetchComponentMeta (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]
+  }
 
   // Store promise to avoid multiple calls
 

docs/composables/useContentExamplesCode.ts

@@ -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) {

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'

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,10 +8,6 @@ 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'
@@ -74,7 +73,7 @@ export default defineNuxtModule({
 
     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

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: {
+  site: {
-    public: {
+    url: 'https://ui.nuxt.com'
-      version: pkg.version
-    }
-  },
-
-  ui: {
-    global: true,
-    safelistColors: excludeColors(colors)
   },
 
   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: {
+  ui: {
-    provider: 'ipx'
+    global: true,
+    safelistColors: excludeColors(colors)
   },
 
-  icon: {
+  runtimeConfig: {
-    clientBundle: {
+    public: {
-      scan: true
+      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: {
+  vite: {
-    '/components': { redirect: '/components/accordion', prerender: false }
+    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: {
+  icon: {
-    token: '1e2b0c5e9a214f0390b9b94e043d8d4c',
+    clientBundle: {
-    scriptPath: false
+      scan: true
+    }
   },
 
-  hooks: {
+  image: {
-    // Related to https://github.com/nuxt/nuxt/pull/22558
+    provider: 'ipx'
-    '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'
   }
 })
-    }
-  },
-
-  typescript: {
-    strict: false
-  },
-
-  site: {
-    url: 'https://ui.nuxt.com'
-  },
-
-  vite: {
-    optimizeDeps: {
-      include: ['date-fns']
-    }
-  },
-
-  compatibilityDate: '2024-07-23'
-})

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'
       }]

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)),

docs/plugins/prettier.ts

@@ -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) {

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'
+})

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",

renovate.json

@@ -6,8 +6,6 @@
     "enabled": true
   },
   "ignoreDeps": [
-    "@nuxt/eslint-config",
-    "eslint",
     "happy-dom",
     "valibot30",
     "valibot31"

scripts/bump-edge.ts

@@ -1,6 +1,6 @@
-import { promises as fsp } from 'fs'
+import { promises as fsp } from 'node:fs'
-import { resolve } from 'path'
+import { resolve } from 'node:path'
-import { execSync } from 'child_process'
+import { execSync } from 'node:child_process'
 
 async function loadPackage(dir: string) {
   const pkgPath = resolve(dir, 'package.json')
@@ -31,7 +31,6 @@ async function main () {
 }
 
 main().catch((err) => {
-  // eslint-disable-next-line no-console
   console.error(err)
   process.exit(1)
 })

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'
 

src/runtime/components/data/Table.vue

@@ -242,7 +242,7 @@ export default defineComponent({
   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,7 +261,7 @@ 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)
       })
@@ -305,7 +305,7 @@ export default defineComponent({
         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' }) {
@@ -358,7 +358,7 @@ export default defineComponent({
       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)
       }
     }
@@ -369,7 +369,7 @@ export default defineComponent({
 
     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)
       }

src/runtime/components/elements/Accordion.vue

@@ -161,6 +161,7 @@ export default defineComponent({
     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'
 
@@ -170,6 +171,7 @@ export default defineComponent({
     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
     }
 

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'
@@ -41,7 +41,7 @@ export default defineComponent({
 
     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 = {}

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'

src/runtime/components/elements/Dropdown.vue

@@ -209,7 +209,9 @@ export default defineComponent({
         return
       }
       openTimeout = openTimeout || setTimeout(() => {
-        menuApi.value.openMenu && menuApi.value.openMenu()
+        if (menuApi.value.openMenu) {
+          menuApi.value.openMenu()
+        }
         openTimeout = null
       }, props.openDelay)
     }
@@ -229,7 +231,9 @@ export default defineComponent({
         return
       }
       closeTimeout = closeTimeout || setTimeout(() => {
-        menuApi.value.closeMenu && menuApi.value.closeMenu()
+        if (menuApi.value.closeMenu) {
+          menuApi.value.closeMenu()
+        }
         closeTimeout = null
       }, props.closeDelay)
     }

src/runtime/components/elements/Meter.vue

@@ -47,8 +47,8 @@ export default defineComponent({
   },
   inheritAttrs: false,
   slots: Object as SlotsType<{
-    indicator?: { percent: number, value: number },
+    indicator?: { percent: number, value: number }
-    label?: { percent: number, value: number },
+    label?: { percent: number, value: number }
   }>,
   props: {
     value: {

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[],
+    default?: typeof Meter[]
-    indicator?: { percent: number },
+    indicator?: { percent: number }
   }>,
   props: {
     min: {

src/runtime/components/elements/Progress.vue

@@ -421,4 +421,5 @@ progress:indeterminate {
     width: 90%;
     margin-left: 5%
   }
-}</style>
+}
+</style>

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)

src/runtime/components/forms/Form.vue

@@ -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 {
@@ -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]
           }))
@@ -159,7 +159,7 @@ export default defineComponent({
       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
@@ -170,13 +170,13 @@ export default defineComponent({
       },
       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) {
         if (path) {
-          errors.value = errors.value.filter((err) => err.path !== path)
+          errors.value = errors.value.filter(err => err.path !== path)
         } else {
           errors.value = []
         }
@@ -200,10 +200,10 @@ function isYupError (error: any): error is YupError {
 
 function isSuperStructSchema(schema: any): schema is Struct<any, any> {
   return (
-    'schema' in schema &&
+    'schema' in schema
-    typeof schema.coercer === 'function' &&
+    && typeof schema.coercer === 'function'
-    typeof schema.validator === 'function' &&
+    && typeof schema.validator === 'function'
-    typeof schema.refiner === 'function'
+    && typeof schema.refiner === 'function'
   )
 }
 
@@ -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
       }))
@@ -234,7 +234,7 @@ async function getSuperStructErrors (state: any, schema: Struct<any, any>): Prom
   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('.')
     }))
@@ -248,7 +248,7 @@ async function getZodErrors (
 ): 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
     }))
@@ -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,7 +283,6 @@ 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> {
   return '_parse' in schema || '_run' in schema || (typeof schema === 'function' && 'schema' in schema)
 }
@@ -293,9 +292,9 @@ async function getValibotError (
   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
   })) || []
 }

src/runtime/components/forms/FormGroup.vue

@@ -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])

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'
@@ -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()
       }

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)

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)
@@ -152,7 +152,7 @@ export default defineComponent({
       uiRadio,
       attrs,
       normalizedOptions,
-      // eslint-disable-next-line vue/no-dupe-keys
+
       onUpdate
     }
   }

src/runtime/components/forms/Textarea.vue

@@ -158,10 +158,10 @@ export default defineComponent({
         textarea.value.style.overflow = 'hidden'
 
         const styles = window.getComputedStyle(textarea.value)
-        const paddingTop = parseInt(styles.paddingTop)
+        const paddingTop = Number.parseInt(styles.paddingTop)
-        const paddingBottom = parseInt(styles.paddingBottom)
+        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
 

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'
@@ -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)
       })
 

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({

src/runtime/components/navigation/Pagination.vue

@@ -74,11 +74,11 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { RouteLocationRaw } from '#vue-router'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { Button, ButtonSize, DeepPartial, Strategy } from '../../types/index'
+import type { RouteLocationRaw } from '#vue-router'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { pagination, button } from '#ui/ui.config'

src/runtime/components/overlays/Modal.vue

@@ -14,7 +14,7 @@
                 ui.background,
                 ui.ring,
                 ui.shadow,
-                fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin],
+                fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin]
               ]"
             >
               <slot />

src/runtime/components/overlays/Notifications.vue

@@ -23,11 +23,11 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UNotification from './Notification.vue'
 import { useUI } from '../../composables/useUI'
 import { useToast } from '../../composables/useToast'
 import { mergeConfig } from '../../utils'
 import type { DeepPartial, Notification, Strategy } from '../../types/index'
+import UNotification from './Notification.vue'
 import { useState } from '#imports'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/overlays/Popover.vue

@@ -181,7 +181,9 @@ export default defineComponent({
         return
       }
       openTimeout = openTimeout || setTimeout(() => {
-        popoverApi.value.togglePopover && popoverApi.value.togglePopover()
+        if (popoverApi.value.togglePopover) {
+          popoverApi.value.togglePopover()
+        }
         openTimeout = null
       }, props.openDelay)
     }
@@ -201,7 +203,9 @@ export default defineComponent({
         return
       }
       closeTimeout = closeTimeout || setTimeout(() => {
-        popoverApi.value.closePopover && popoverApi.value.closePopover()
+        if (popoverApi.value.closePopover) {
+          popoverApi.value.closePopover()
+        }
         closeTimeout = null
       }, props.closeDelay)
     }

src/runtime/components/overlays/Slideover.vue

@@ -141,7 +141,6 @@ export default defineComponent({
       }
     })
 
-
     function close(value: boolean) {
       if (props.preventClose) {
         emit('close-prevented')

src/runtime/components/overlays/Tooltip.vue

@@ -40,8 +40,6 @@ import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tooltip } from '#ui/ui.config'
-// import useslots
-
 
 const config = mergeConfig<typeof tooltip>(appConfig.ui.strategy, appConfig.ui.tooltip, tooltip)
 

src/runtime/composables/defineShortcuts.ts

@@ -32,7 +32,9 @@ interface Shortcut {
   // keyCode?: number
 }
 
+// eslint-disable-next-line regexp/no-super-linear-backtracking
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/
+// eslint-disable-next-line regexp/no-super-linear-backtracking
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/
 
 export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptions = {}) => {
@@ -48,9 +50,11 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
 
   const onKeyDown = (e: KeyboardEvent) => {
     // Input autocomplete triggers a keydown event
-    if (!e.key) { return }
+    if (!e.key) {
+      return
+    }
 
-    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key)
+    const alphabeticalKey = /^[a-z]$/i.test(e.key)
 
     let chainedKey
     chainedInputs.value.push(e.key)
@@ -59,7 +63,9 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
       chainedKey = chainedInputs.value.slice(-2).join('-')
 
       for (const shortcut of shortcuts.filter(s => s.chained)) {
-        if (shortcut.key !== chainedKey) { continue }
+        if (shortcut.key !== chainedKey) {
+          continue
+        }
 
         if (shortcut.condition.value) {
           e.preventDefault()
@@ -72,12 +78,20 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
 
     // try matching a standard shortcut
     for (const shortcut of shortcuts.filter(s => !s.chained)) {
-      if (e.key.toLowerCase() !== shortcut.key) { continue }
+      if (e.key.toLowerCase() !== shortcut.key) {
-      if (e.metaKey !== shortcut.metaKey) { continue }
+        continue
-      if (e.ctrlKey !== shortcut.ctrlKey) { continue }
+      }
+      if (e.metaKey !== shortcut.metaKey) {
+        continue
+      }
+      if (e.ctrlKey !== shortcut.ctrlKey) {
+        continue
+      }
       // shift modifier is only checked in combination with alphabetical keys
       // (shift with non-alphabetical keys would change the key)
-      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) { continue }
+      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
+        continue
+      }
       // alt modifier changes the combined key anyways
       // if (e.altKey !== shortcut.altKey) { continue }
 

src/runtime/composables/useButtonGroup.ts

@@ -1,6 +1,6 @@
 import { computed, ref, provide, inject, onMounted, onUnmounted, getCurrentInstance } from 'vue'
 import type { Ref, ComponentInternalInstance } from 'vue'
-import { buttonGroup } from '#ui/ui.config'
+import type { buttonGroup } from '#ui/ui.config'
 
 type ButtonGroupProps = {
   orientation?: Ref<'horizontal' | 'vertical'>

src/runtime/composables/useFormGroup.ts

@@ -11,7 +11,6 @@ type InputProps = {
   legend?: string | null
 }
 
-
 export const useFormGroup = (inputProps?: InputProps, config?: any, bind: boolean = true) => {
   const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
   const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)

src/runtime/composables/usePopper.ts

@@ -36,15 +36,23 @@ export function usePopper ({
 
   onMounted(() => {
     watchEffect((onInvalidate) => {
-      if (!popper.value) { return }
+      if (!popper.value) {
-      if (!reference.value && !virtualReference?.value) { return }
+        return
+      }
+      if (!reference.value && !virtualReference?.value) {
+        return
+      }
 
       const popperEl = unrefElement(popper)
       const referenceEl = virtualReference?.value || unrefElement(reference)
 
       // if (!(referenceEl instanceof HTMLElement)) { return }
-      if (!(popperEl instanceof HTMLElement)) { return }
+      if (!(popperEl instanceof HTMLElement)) {
-      if (!referenceEl) { return }
+        return
+      }
+      if (!referenceEl) {
+        return
+      }
 
       const config: Record<string, any> = {
         modifiers: [

src/runtime/composables/useUI.ts

@@ -1,8 +1,8 @@
 import { computed, toValue, useAttrs } from 'vue'
 import type { Ref } from 'vue'
-import { useAppConfig } from '#imports'
 import { mergeConfig, omit, get } from '../utils'
 import type { DeepPartial, Strategy } from '../types/index'
+import { useAppConfig } from '#imports'
 
 export const useUI = <T>(key, $ui?: Ref<DeepPartial<T> & { strategy?: Strategy } | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
   const $attrs = useAttrs()

src/runtime/plugins/modals.ts

@@ -1,7 +1,7 @@
-import { defineNuxtPlugin } from '#imports'
 import { shallowRef } from 'vue'
 import { modalInjectionKey } from '../composables/useModal'
 import type { ModalState } from '../types/modal'
+import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const modalState = shallowRef<ModalState>({

src/runtime/plugins/slideovers.ts

@@ -1,7 +1,7 @@
-import { defineNuxtPlugin } from '#imports'
 import { shallowRef } from 'vue'
 import { slidOverInjectionKey } from '../composables/useSlideover'
 import type { SlideoverState } from '../types/slideover'
+import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const slideoverState = shallowRef<SlideoverState>({

src/runtime/types/alert.d.ts

@@ -1,8 +1,8 @@
-import { alert } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import type { Button } from './button'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { alert } from '../ui.config'
+import type { Button } from './button'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'
 
 export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['ui', 'alert', 'color']> | typeof colors[number]
 export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>

src/runtime/types/avatar.d.ts

@@ -1,7 +1,7 @@
-import { avatar } from '../ui.config'
-import type { ExtractDeepKey } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { avatar } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type colors from '#ui-colors'
 
 export type AvatarSize = keyof typeof avatar.size | ExtractDeepKey<AppConfig, ['ui', 'avatar', 'size']>
 export type AvatarChipColor = 'gray' | typeof colors[number]

src/runtime/types/badge.d.ts

@@ -1,7 +1,7 @@
-import { badge } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { badge } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'
 
 export type BadgeSize = keyof typeof badge.size | ExtractDeepKey<AppConfig, ['ui', 'badge', 'size']>
 export type BadgeColor = keyof typeof badge.color | ExtractDeepKey<AppConfig, ['ui', 'badge', 'color']> | typeof colors[number]

src/runtime/types/button.d.ts

@@ -1,8 +1,8 @@
-import type { Link } from './link'
-import { button } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { button } from '../ui.config'
+import type { Link } from './link'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'
 
 export type ButtonSize = keyof typeof button.size | ExtractDeepKey<AppConfig, ['ui', 'button', 'size']>
 export type ButtonColor = keyof typeof button.color | ExtractDeepKey<AppConfig, ['ui', 'button', 'color']> | typeof colors[number]

src/runtime/types/chip.d.ts

@@ -1,5 +1,5 @@
-import { chip } from '../ui.config'
+import type { chip } from '../ui.config'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'
 
 export type ChipSize = keyof typeof chip.size
 export type ChipColor = 'gray' | typeof colors[number]

src/runtime/types/command-palette.d.ts

@@ -1,4 +1,4 @@
-import { FuseResultMatch } from 'fuse.js'
+import type { FuseResultMatch } from 'fuse.js'
 import type { Avatar } from './avatar'
 
 export interface Command {
@@ -24,6 +24,6 @@ export interface Group {
   commands?: Command[]
   search?: (...args: any[]) => any[] | Promise<any[]>
   filter?: (...args: any[]) => Command[]
-  static?: Boolean
+  static?: boolean
   [key: string]: any
 }

src/runtime/types/component.d.ts

@@ -5,10 +5,10 @@ T extends new () => { $props: infer P } ? NonNullable<P> :
 
 export type ComponentSlots<T> =
 T extends new () => { $slots: infer S } ? NonNullable<S> :
-  T extends (props: any, ctx: { slots: infer S; attrs: any; emit: any }, ...args: any) => any ? NonNullable<S> :
+  T extends (props: any, ctx: { slots: infer S, attrs: any, emit: any }, ...args: any) => any ? NonNullable<S> :
       {}
 
 export type ComponentEmit<T> =
 T extends new () => { $emit: infer E } ? NonNullable<E> :
-  T extends (props: any, ctx: { slots: any; attrs: any; emit: infer E }, ...args: any) => any ? NonNullable<E> :
+  T extends (props: any, ctx: { slots: any, attrs: any, emit: infer E }, ...args: any) => any ? NonNullable<E> :
       {}

src/runtime/types/divider.d.ts

@@ -1,3 +1,3 @@
-import { divider } from '#ui/ui.config'
+import type { divider } from '#ui/ui.config'
 
 export type DividerSize = keyof typeof divider.border.size.horizontal | keyof typeof divider.border.size.vertical

src/runtime/types/dropdown.d.ts

@@ -1,5 +1,5 @@
-import type { NuxtLinkProps } from '#app'
 import type { Avatar } from './avatar'
+import type { NuxtLinkProps } from '#app'
 
 export interface DropdownItem extends NuxtLinkProps {
   label: string

src/runtime/types/form-group.d.ts

@@ -1,5 +1,5 @@
-import { formGroup } from '../ui.config'
-import type { ExtractDeepKey } from '.'
 import type { AppConfig } from 'nuxt/schema'
+import type { formGroup } from '../ui.config'
+import type { ExtractDeepKey } from '.'
 
 export type FormGroupSize = keyof typeof formGroup.size | ExtractDeepKey<AppConfig, ['ui', 'formGroup', 'size']>

src/runtime/types/form.d.ts

@@ -10,8 +10,8 @@ export interface FormErrorWithId extends FormError {
 }
 
 export interface Form<T> {
-  validate(path?: string | string[], opts?: { silent?: true }): Promise<T | false>;
+  validate(path?: string | string[], opts?: { silent?: true }): Promise<T | false>
-  validate(path?: string | string[], opts?: { silent?: false }): Promise<T>;
+  validate(path?: string | string[], opts?: { silent?: false }): Promise<T>
   clear(path?: string): void
   errors: Ref<FormError[]>
   setErrors(errs: FormError[], path?: string): void

src/runtime/types/input.d.ts

@@ -1,7 +1,7 @@
-import { input } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { input } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'
 
 export type InputSize = keyof typeof input.size | ExtractDeepKey<AppConfig, ['ui', 'input', 'size']>
 export type InputColor = keyof typeof input.color | ExtractDeepKey<AppConfig, ['ui', 'input', 'color']> | typeof colors[number]

src/runtime/types/kbd.d.ts

@@ -1,5 +1,5 @@
-import { kbd } from '../ui.config'
-import type { ExtractDeepKey } from '.'
 import type { AppConfig } from 'nuxt/schema'
+import type { kbd } from '../ui.config'
+import type { ExtractDeepKey } from '.'
 
 export type KbdSize = keyof typeof kbd.size | ExtractDeepKey<AppConfig, ['ui', 'kbd', 'size']>

src/runtime/types/meter.d.ts

@@ -1,5 +1,5 @@
-import { meter } from '../ui.config'
+import type { meter } from '../ui.config'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'
 
 export type MeterSize = keyof typeof meter.meter.size
 export type MeterColor = keyof typeof meter.color | typeof colors[number]

src/runtime/types/modal.d.ts

@@ -6,7 +6,7 @@ export interface Modal {
   transition?: boolean
   preventClose?: boolean
   fullscreen?: boolean
-  class?: string | Object | string[]
+  class?: string | object | string[]
   ui?: any
   onClose?: () => void
   onClosePrevented?: () => void

src/runtime/types/notification.d.ts

@@ -1,6 +1,6 @@
 import type { Avatar } from './avatar'
 import type { Button } from './button'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'
 
 export type NotificationColor = 'gray' | typeof colors[number]
 

src/runtime/types/progress.d.ts

@@ -1,5 +1,5 @@
-import { progress } from '../ui.config'
+import type { progress } from '../ui.config'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'
 
 export type ProgressSize = keyof typeof progress.progress.size
 export type ProgressAnimation = keyof typeof progress.animation

src/runtime/types/range.d.ts

@@ -1,7 +1,7 @@
-import { range } from '../ui.config'
-import type { ExtractDeepKey } from '.'
 import type { AppConfig } from 'nuxt/schema'
-import colors from '#ui-colors'
+import type { range } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type colors from '#ui-colors'
 
 export type RangeSize = keyof typeof range.size | ExtractDeepKey<AppConfig, ['ui', 'range', 'size']>
 export type RangeColor = typeof colors[number]

src/runtime/types/select.d.ts

@@ -1,7 +1,7 @@
-import { select } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { select } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'
 
 export type SelectSize = keyof typeof select.size | ExtractDeepKey<AppConfig, ['ui', 'select', 'size']>
 export type SelectColor = keyof typeof select.color | ExtractDeepKey<AppConfig, ['ui', 'select', 'color']> | typeof colors[number]

src/runtime/types/textarea.d.ts

@@ -1,7 +1,7 @@
-import { textarea } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { textarea } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'
 
 export type TextareaSize = keyof typeof textarea.size | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'size']>
 export type TextareaColor = keyof typeof textarea.color | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'color']> | typeof colors[number]

src/runtime/types/toggle.d.ts

@@ -1,7 +1,7 @@
-import { toggle } from '../ui.config'
-import type { ExtractDeepKey } from '.'
 import type { AppConfig } from 'nuxt/schema'
-import colors from '#ui-colors'
+import type { toggle } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type colors from '#ui-colors'
 
 export type ToggleSize = keyof typeof toggle.size | ExtractDeepKey<AppConfig, ['ui', 'toggle', 'size']>
 export type ToggleColor = typeof colors[number]

src/runtime/ui.config/elements/avatar.ts

@@ -7,11 +7,11 @@ export default {
   size: {
     '3xs': 'h-4 w-4 text-[8px]',
     '2xs': 'h-5 w-5 text-[10px]',
-    xs: 'h-6 w-6 text-xs',
+    'xs': 'h-6 w-6 text-xs',
-    sm: 'h-8 w-8 text-sm',
+    'sm': 'h-8 w-8 text-sm',
-    md: 'h-10 w-10 text-base',
+    'md': 'h-10 w-10 text-base',
-    lg: 'h-12 w-12 text-lg',
+    'lg': 'h-12 w-12 text-lg',
-    xl: 'h-14 w-14 text-xl',
+    'xl': 'h-14 w-14 text-xl',
     '2xl': 'h-16 w-16 text-2xl',
     '3xl': 'h-20 w-20 text-3xl'
   },
@@ -27,11 +27,11 @@ export default {
     size: {
       '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
       '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
-      xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+      'xs': 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
-      sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+      'sm': 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
-      md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+      'md': 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
-      lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+      'lg': 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
-      xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+      'xl': 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
       '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
       '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
     }
@@ -41,11 +41,11 @@ export default {
     size: {
       '3xs': 'h-2 w-2',
       '2xs': 'h-2.5 w-2.5',
-      xs: 'h-3 w-3',
+      'xs': 'h-3 w-3',
-      sm: 'h-4 w-4',
+      'sm': 'h-4 w-4',
-      md: 'h-5 w-5',
+      'md': 'h-5 w-5',
-      lg: 'h-6 w-6',
+      'lg': 'h-6 w-6',
-      xl: 'h-7 w-7',
+      'xl': 'h-7 w-7',
       '2xl': 'h-8 w-8',
       '3xl': 'h-10 w-10'
     }

src/runtime/ui.config/elements/button.ts

@@ -7,35 +7,35 @@ export default {
   inline: 'inline-flex items-center',
   size: {
     '2xs': 'text-xs',
-    xs: 'text-xs',
+    'xs': 'text-xs',
-    sm: 'text-sm',
+    'sm': 'text-sm',
-    md: 'text-sm',
+    'md': 'text-sm',
-    lg: 'text-sm',
+    'lg': 'text-sm',
-    xl: 'text-base'
+    'xl': 'text-base'
   },
   gap: {
     '2xs': 'gap-x-1',
-    xs: 'gap-x-1.5',
+    'xs': 'gap-x-1.5',
-    sm: 'gap-x-1.5',
+    'sm': 'gap-x-1.5',
-    md: 'gap-x-2',
+    'md': 'gap-x-2',
-    lg: 'gap-x-2.5',
+    'lg': 'gap-x-2.5',
-    xl: 'gap-x-2.5'
+    'xl': 'gap-x-2.5'
   },
   padding: {
     '2xs': 'px-2 py-1',
-    xs: 'px-2.5 py-1.5',
+    'xs': 'px-2.5 py-1.5',
-    sm: 'px-2.5 py-1.5',
+    'sm': 'px-2.5 py-1.5',
-    md: 'px-3 py-2',
+    'md': 'px-3 py-2',
-    lg: 'px-3.5 py-2.5',
+    'lg': 'px-3.5 py-2.5',
-    xl: 'px-3.5 py-2.5'
+    'xl': 'px-3.5 py-2.5'
   },
   square: {
     '2xs': 'p-1',
-    xs: 'p-1.5',
+    'xs': 'p-1.5',
-    sm: 'p-1.5',
+    'sm': 'p-1.5',
-    md: 'p-2',
+    'md': 'p-2',
-    lg: 'p-2.5',
+    'lg': 'p-2.5',
-    xl: 'p-2.5'
+    'xl': 'p-2.5'
   },
   color: {
     white: {
@@ -64,11 +64,11 @@ export default {
     loading: 'animate-spin',
     size: {
       '2xs': 'h-4 w-4',
-      xs: 'h-4 w-4',
+      'xs': 'h-4 w-4',
-      sm: 'h-5 w-5',
+      'sm': 'h-5 w-5',
-      md: 'h-5 w-5',
+      'md': 'h-5 w-5',
-      lg: 'h-5 w-5',
+      'lg': 'h-5 w-5',
-      xl: 'h-6 w-6'
+      'xl': 'h-6 w-6'
     }
   },
   default: {

src/runtime/ui.config/elements/buttonGroup.ts

@@ -8,7 +8,7 @@ export default {
   orientation: {
     'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
     'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
-    rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
+    'rounded': { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
     'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
     'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
     'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },

src/runtime/ui.config/elements/chip.ts

@@ -17,11 +17,11 @@ export default {
   size: {
     '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
     '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
-    xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+    'xs': 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
-    sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+    'sm': 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
-    md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+    'md': 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
-    lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+    'lg': 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
-    xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+    'xl': 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
     '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
     '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
   },

src/runtime/ui.config/elements/meter.ts

@@ -5,11 +5,11 @@ export default {
     text: 'text-gray-400 dark:text-gray-500 text-end',
     size: {
       '2xs': 'text-xs',
-      xs: 'text-xs',
+      'xs': 'text-xs',
-      sm: 'text-sm',
+      'sm': 'text-sm',
-      md: 'text-sm',
+      'md': 'text-sm',
-      lg: 'text-sm',
+      'lg': 'text-sm',
-      xl: 'text-base',
+      'xl': 'text-base',
       '2xl': 'text-base'
     }
   },
@@ -22,11 +22,11 @@ export default {
     shadow: '',
     size: {
       '2xs': 'h-px',
-      xs: 'h-0.5',
+      'xs': 'h-0.5',
-      sm: 'h-1',
+      'sm': 'h-1',
-      md: 'h-2',
+      'md': 'h-2',
-      lg: 'h-3',
+      'lg': 'h-3',
-      xl: 'h-4',
+      'xl': 'h-4',
       '2xl': 'h-5'
     },
     appearance: {
@@ -41,11 +41,11 @@ export default {
       rounded: '[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full',
       size: {
         '2xs': '[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px',
-        xs: '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
+        'xs': '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
-        sm: '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
+        'sm': '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
-        md: '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
+        'md': '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
-        lg: '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
+        'lg': '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
-        xl: '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
+        'xl': '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
         '2xl': '[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5'
       }
     }
@@ -56,11 +56,11 @@ export default {
     color: 'text-{color}-500 dark:text-{color}-400',
     size: {
       '2xs': 'text-xs',
-      xs: 'text-xs',
+      'xs': 'text-xs',
-      sm: 'text-sm',
+      'sm': 'text-sm',
-      md: 'text-sm',
+      'md': 'text-sm',
-      lg: 'text-sm',
+      'lg': 'text-sm',
-      xl: 'text-base',
+      'xl': 'text-base',
       '2xl': 'text-base'
     }
   },

src/runtime/ui.config/elements/meterGroup.ts

@@ -9,7 +9,7 @@ export default {
   orientation: {
     'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
     'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
-    rounded: { left: 'rounded-s', right: 'rounded-e' },
+    'rounded': { left: 'rounded-s', right: 'rounded-e' },
     'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
     'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
     'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },

src/runtime/ui.config/elements/progress.ts

@@ -11,11 +11,11 @@ export default {
     color: 'text-gray-400 dark:text-gray-500',
     size: {
       '2xs': 'text-xs',
-      xs: 'text-xs',
+      'xs': 'text-xs',
-      sm: 'text-sm',
+      'sm': 'text-sm',
-      md: 'text-sm',
+      'md': 'text-sm',
-      lg: 'text-sm',
+      'lg': 'text-sm',
-      xl: 'text-base',
+      'xl': 'text-base',
       '2xl': 'text-base'
     }
   },
@@ -24,11 +24,11 @@ export default {
     width: 'w-full [&::-webkit-progress-bar]:w-full',
     size: {
       '2xs': 'h-px',
-      xs: 'h-0.5',
+      'xs': 'h-0.5',
-      sm: 'h-1',
+      'sm': 'h-1',
-      md: 'h-2',
+      'md': 'h-2',
-      lg: 'h-3',
+      'lg': 'h-3',
-      xl: 'h-4',
+      'xl': 'h-4',
       '2xl': 'h-5'
     },
     rounded: 'rounded-full [&::-webkit-progress-bar]:rounded-full',
@@ -46,11 +46,11 @@ export default {
     color: 'text-{color}-500 dark:text-{color}-400',
     size: {
       '2xs': 'text-xs',
-      xs: 'text-xs',
+      'xs': 'text-xs',
-      sm: 'text-sm',
+      'sm': 'text-sm',
-      md: 'text-sm',
+      'md': 'text-sm',
-      lg: 'text-sm',
+      'lg': 'text-sm',
-      xl: 'text-base',
+      'xl': 'text-base',
       '2xl': 'text-base'
     }
   },
@@ -61,10 +61,10 @@ export default {
     first: 'text-gray-500 dark:text-gray-400'
   },
   animation: {
-    carousel: 'bar-animation-carousel',
+    'carousel': 'bar-animation-carousel',
     'carousel-inverse': 'bar-animation-carousel-inverse',
-    swing: 'bar-animation-swing',
+    'swing': 'bar-animation-swing',
-    elastic: 'bar-animation-elastic'
+    'elastic': 'bar-animation-elastic'
   },
   default: {
     color: 'primary',

src/runtime/ui.config/forms/formGroup.ts

@@ -4,16 +4,15 @@ export default {
   label: {
     wrapper: 'flex content-center items-center justify-between',
     base: 'block font-medium text-gray-700 dark:text-gray-200',
-    // eslint-disable-next-line quotes
     required: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
   },
   size: {
     '2xs': 'text-xs',
-    xs: 'text-xs',
+    'xs': 'text-xs',
-    sm: 'text-sm',
+    'sm': 'text-sm',
-    md: 'text-sm',
+    'md': 'text-sm',
-    lg: 'text-sm',
+    'lg': 'text-sm',
-    xl: 'text-base'
+    'xl': 'text-base'
   },
   container: 'mt-1 relative',
   description: 'text-gray-500 dark:text-gray-400',

src/runtime/ui.config/forms/input.ts

@@ -9,46 +9,46 @@ export default {
   },
   size: {
     '2xs': 'text-xs',
-    xs: 'text-xs',
+    'xs': 'text-xs',
-    sm: 'text-sm',
+    'sm': 'text-sm',
-    md: 'text-sm',
+    'md': 'text-sm',
-    lg: 'text-sm',
+    'lg': 'text-sm',
-    xl: 'text-base'
+    'xl': 'text-base'
   },
   gap: {
     '2xs': 'gap-x-1',
-    xs: 'gap-x-1.5',
+    'xs': 'gap-x-1.5',
-    sm: 'gap-x-1.5',
+    'sm': 'gap-x-1.5',
-    md: 'gap-x-2',
+    'md': 'gap-x-2',
-    lg: 'gap-x-2.5',
+    'lg': 'gap-x-2.5',
-    xl: 'gap-x-2.5'
+    'xl': 'gap-x-2.5'
   },
   padding: {
     '2xs': 'px-2 py-1',
-    xs: 'px-2.5 py-1.5',
+    'xs': 'px-2.5 py-1.5',
-    sm: 'px-2.5 py-1.5',
+    'sm': 'px-2.5 py-1.5',
-    md: 'px-3 py-2',
+    'md': 'px-3 py-2',
-    lg: 'px-3.5 py-2.5',
+    'lg': 'px-3.5 py-2.5',
-    xl: 'px-3.5 py-2.5'
+    'xl': 'px-3.5 py-2.5'
   },
   leading: {
     padding: {
       '2xs': 'ps-7',
-      xs: 'ps-8',
+      'xs': 'ps-8',
-      sm: 'ps-9',
+      'sm': 'ps-9',
-      md: 'ps-10',
+      'md': 'ps-10',
-      lg: 'ps-11',
+      'lg': 'ps-11',
-      xl: 'ps-12'
+      'xl': 'ps-12'
     }
   },
   trailing: {
     padding: {
       '2xs': 'pe-7',
-      xs: 'pe-8',
+      'xs': 'pe-8',
-      sm: 'pe-9',
+      'sm': 'pe-9',
-      md: 'pe-10',
+      'md': 'pe-10',
-      lg: 'pe-11',
+      'lg': 'pe-11',
-      xl: 'pe-12'
+      'xl': 'pe-12'
     }
   },
   color: {
@@ -69,22 +69,22 @@ export default {
     loading: 'animate-spin',
     size: {
       '2xs': 'h-4 w-4',
-      xs: 'h-4 w-4',
+      'xs': 'h-4 w-4',
-      sm: 'h-5 w-5',
+      'sm': 'h-5 w-5',
-      md: 'h-5 w-5',
+      'md': 'h-5 w-5',
-      lg: 'h-5 w-5',
+      'lg': 'h-5 w-5',
-      xl: 'h-6 w-6'
+      'xl': 'h-6 w-6'
     },
     leading: {
       wrapper: 'absolute inset-y-0 start-0 flex items-center',
       pointer: 'pointer-events-none',
       padding: {
         '2xs': 'px-2',
-        xs: 'px-2.5',
+        'xs': 'px-2.5',
-        sm: 'px-2.5',
+        'sm': 'px-2.5',
-        md: 'px-3',
+        'md': 'px-3',
-        lg: 'px-3.5',
+        'lg': 'px-3.5',
-        xl: 'px-3.5'
+        'xl': 'px-3.5'
       }
     },
     trailing: {
@@ -92,11 +92,11 @@ export default {
       pointer: 'pointer-events-none',
       padding: {
         '2xs': 'px-2',
-        xs: 'px-2.5',
+        'xs': 'px-2.5',
-        sm: 'px-2.5',
+        'sm': 'px-2.5',
-        md: 'px-3',
+        'md': 'px-3',
-        lg: 'px-3.5',
+        'lg': 'px-3.5',
-        xl: 'px-3.5'
+        'xl': 'px-3.5'
       }
     }
   },

src/runtime/ui.config/forms/range.ts

@@ -10,11 +10,11 @@ export default {
     background: 'bg-{color}-500 dark:bg-{color}-400',
     size: {
       '2xs': 'h-px',
-      xs: 'h-0.5',
+      'xs': 'h-0.5',
-      sm: 'h-1',
+      'sm': 'h-1',
-      md: 'h-2',
+      'md': 'h-2',
-      lg: 'h-3',
+      'lg': 'h-3',
-      xl: 'h-4',
+      'xl': 'h-4',
       '2xl': 'h-5'
     }
   },
@@ -25,11 +25,11 @@ export default {
     ring: '[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current',
     size: {
       '2xs': '[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]',
-      xs: '[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]',
+      'xs': '[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]',
-      sm: '[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      'sm': '[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
-      md: '[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      'md': '[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
-      lg: '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      'lg': '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
-      xl: '[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      'xl': '[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
       '2xl': '[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1'
     }
   },
@@ -39,21 +39,21 @@ export default {
     rounded: '[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg',
     size: {
       '2xs': '[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px',
-      xs: '[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5',
+      'xs': '[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5',
-      sm: '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1',
+      'sm': '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1',
-      md: '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2',
+      'md': '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2',
-      lg: '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3',
+      'lg': '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3',
-      xl: '[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4',
+      'xl': '[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4',
       '2xl': '[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5'
     }
   },
   size: {
     '2xs': 'h-1.5',
-    xs: 'h-2',
+    'xs': 'h-2',
-    sm: 'h-3',
+    'sm': 'h-3',
-    md: 'h-4',
+    'md': 'h-4',
-    lg: 'h-5',
+    'lg': 'h-5',
-    xl: 'h-6',
+    'xl': 'h-6',
     '2xl': 'h-7'
   },
   default: {

src/runtime/ui.config/forms/toggle.ts

@@ -6,32 +6,32 @@ export default {
   inactive: 'bg-gray-200 dark:bg-gray-700',
   size: {
     '2xs': 'h-3 w-5',
-    xs: 'h-3.5 w-6',
+    'xs': 'h-3.5 w-6',
-    sm: 'h-4 w-7',
+    'sm': 'h-4 w-7',
-    md: 'h-5 w-9',
+    'md': 'h-5 w-9',
-    lg: 'h-6 w-11',
+    'lg': 'h-6 w-11',
-    xl: 'h-7 w-[3.25rem]',
+    'xl': 'h-7 w-[3.25rem]',
     '2xl': 'h-8 w-[3.75rem]'
   },
   container: {
     base: 'pointer-events-none relative inline-block rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
     active: {
       '2xs': 'translate-x-2 rtl:-translate-x-2',
-      xs: 'translate-x-2.5 rtl:-translate-x-2.5',
+      'xs': 'translate-x-2.5 rtl:-translate-x-2.5',
-      sm: 'translate-x-3 rtl:-translate-x-3',
+      'sm': 'translate-x-3 rtl:-translate-x-3',
-      md: 'translate-x-4 rtl:-translate-x-4',
+      'md': 'translate-x-4 rtl:-translate-x-4',
-      lg: 'translate-x-5 rtl:-translate-x-5',
+      'lg': 'translate-x-5 rtl:-translate-x-5',
-      xl: 'translate-x-6 rtl:-translate-x-6',
+      'xl': 'translate-x-6 rtl:-translate-x-6',
       '2xl': 'translate-x-7 rtl:-translate-x-7'
     },
     inactive: 'translate-x-0 rtl:-translate-x-0',
     size: {
       '2xs': 'h-2 w-2',
-      xs: 'h-2.5 w-2.5',
+      'xs': 'h-2.5 w-2.5',
-      sm: 'h-3 w-3',
+      'sm': 'h-3 w-3',
-      md: 'h-4 w-4',
+      'md': 'h-4 w-4',
-      lg: 'h-5 w-5',
+      'lg': 'h-5 w-5',
-      xl: 'h-6 w-6',
+      'xl': 'h-6 w-6',
       '2xl': 'h-7 w-7'
     }
   },
@@ -41,11 +41,11 @@ export default {
     inactive: 'opacity-0 ease-out duration-100',
     size: {
       '2xs': 'h-2 w-2',
-      xs: 'h-2 w-2',
+      'xs': 'h-2 w-2',
-      sm: 'h-2 w-2',
+      'sm': 'h-2 w-2',
-      md: 'h-3 w-3',
+      'md': 'h-3 w-3',
-      lg: 'h-4 w-4',
+      'lg': 'h-4 w-4',
-      xl: 'h-5 w-5',
+      'xl': 'h-5 w-5',
       '2xl': 'h-6 w-6'
     },
     on: 'text-{color}-500 dark:text-{color}-400',

src/runtime/ui.config/layout/divider.ts

@@ -16,19 +16,19 @@ export default {
     size: {
       horizontal: {
         '2xs': 'border-t',
-        xs: 'border-t-[2px]',
+        'xs': 'border-t-[2px]',
-        sm: 'border-t-[3px]',
+        'sm': 'border-t-[3px]',
-        md: 'border-t-[4px]',
+        'md': 'border-t-[4px]',
-        lg: 'border-t-[5px]',
+        'lg': 'border-t-[5px]',
-        xl: 'border-t-[6px]'
+        'xl': 'border-t-[6px]'
       },
       vertical: {
         '2xs': 'border-s',
-        xs: 'border-s-[2px]',
+        'xs': 'border-s-[2px]',
-        sm: 'border-s-[3px]',
+        'sm': 'border-s-[3px]',
-        md: 'border-s-[4px]',
+        'md': 'border-s-[4px]',
-        lg: 'border-s-[5px]',
+        'lg': 'border-s-[5px]',
-        xl: 'border-s-[6px]'
+        'xl': 'border-s-[6px]'
       }
     },
     type: {

src/runtime/ui.config/popper.ts

@@ -4,6 +4,5 @@ export const arrow = {
   rounded: 'before:rounded-sm',
   background: 'before:bg-gray-200 dark:before:bg-gray-800',
   shadow: 'before:shadow',
-	// eslint-disable-next-line quotes
   placement: `group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1`
 }

src/runtime/utils/colors.ts

@@ -1,7 +1,7 @@
-import { omit } from './lodash'
 import { kebabCase, camelCase, upperFirst } from 'scule'
 import type { Config as TWConfig } from 'tailwindcss'
 import defaultColors from 'tailwindcss/colors.js'
+import { omit } from './lodash'
 
 const colorsToExclude = [
   'inherit',
@@ -18,7 +18,7 @@ const colorsToExclude = [
 ]
 
 const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist']> = {
-  alert: (colorsAsRegex) => [{
+  alert: colorsAsRegex => [{
     pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
   }, {
     pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
@@ -36,13 +36,13 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
   }, {
     pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
   }],
-  avatar: (colorsAsRegex) => [{
+  avatar: colorsAsRegex => [{
     pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
     pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }],
-  badge: (colorsAsRegex) => [{
+  badge: colorsAsRegex => [{
     pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
   }, {
     pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
@@ -60,7 +60,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
   }, {
     pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
   }],
-  button: (colorsAsRegex) => [{
+  button: colorsAsRegex => [{
     pattern: RegExp(`^bg-(${colorsAsRegex})-50$`),
     variants: ['hover', 'disabled']
   }, {
@@ -103,7 +103,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
     pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
-  input: (colorsAsRegex) => [{
+  input: colorsAsRegex => [{
     pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
@@ -115,7 +115,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
     pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus']
   }],
-  radio: (colorsAsRegex) => [{
+  radio: colorsAsRegex => [{
     pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
@@ -127,7 +127,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
     pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
-  checkbox: (colorsAsRegex) => [{
+  checkbox: colorsAsRegex => [{
     pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
@@ -139,7 +139,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
     pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
-  toggle: (colorsAsRegex) => [{
+  toggle: colorsAsRegex => [{
     pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
@@ -156,7 +156,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
     pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
-  range: (colorsAsRegex) => [{
+  range: colorsAsRegex => [{
     pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
@@ -173,13 +173,13 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
     pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
-  progress: (colorsAsRegex) => [{
+  progress: colorsAsRegex => [{
     pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
     pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }],
-  meter: (colorsAsRegex) => [{
+  meter: colorsAsRegex => [{
     pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
@@ -190,7 +190,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
   }, {
     pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }],
-  notification: (colorsAsRegex) => [{
+  notification: colorsAsRegex => [{
     pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
@@ -201,7 +201,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
   }, {
     pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }],
-  chip: (colorsAsRegex) => [{
+  chip: colorsAsRegex => [{
     pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
@@ -210,11 +210,11 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
 }
 
 const safelistComponentAliasesMap = {
-  'USelect': 'UInput',
+  USelect: 'UInput',
-  'USelectMenu': 'UInput',
+  USelectMenu: 'UInput',
-  'UTextarea': 'UInput',
+  UTextarea: 'UInput',
-  'URadioGroup': 'URadio',
+  URadioGroup: 'URadio',
-  'UMeterGroup': 'UMeter'
+  UMeterGroup: 'UMeter'
 }
 
 const colorsAsRegex = (colors: string[]): string => colors.join('|')
@@ -251,8 +251,7 @@ export const setGlobalColors = (theme: TWConfig['theme']) => {
 
   if (globalColors.gray) {
     // @ts-ignore
-    globalColors.cool = theme.extend.colors.cool =
+    globalColors.cool = theme.extend.colors.cool = defaultColors.gray
-      defaultColors.gray
   }
 
   // @ts-ignore
@@ -295,7 +294,8 @@ export const generateSafelist = (colors: string[], globalColors: string[]) => {
 type SafelistFn = Exclude<NonNullable<Extract<TWConfig['content'], { extract?: unknown }>['extract']>, Record<string, unknown>>
 export const customSafelistExtractor = (prefix: string, content: string, colors: string[], safelistColors: string[]): ReturnType<SafelistFn> => {
   const classes: string[] = []
-  const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/gs
+  // eslint-disable-next-line regexp/no-super-linear-backtracking
+  const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/g
 
   const matches = content.matchAll(regex)
 
@@ -318,14 +318,16 @@ export const customSafelistExtractor = (prefix: string, content: string, colors:
 
     name = name.replace(prefix, '').toLowerCase()
 
-    const matchClasses = safelistByComponent[name](color).flatMap(group => {
+    const matchClasses = safelistByComponent[name](color).flatMap((group) => {
-      return typeof group === 'string' ? '' : ['', ...(group.variants || [])].flatMap(variant => {
+      return typeof group === 'string'
+        ? ''
+        : ['', ...(group.variants || [])].flatMap((variant) => {
             const matches = group.pattern.source.match(/\(([^)]+)\)/g)
 
-        return matches.map(match => {
+            return matches.map((match) => {
               const colorOptions = match.substring(1, match.length - 1).split('|')
               return colorOptions.map(
-            color => {
+                (color) => {
                   const classesExtracted = group.pattern.source.replace(match, color).replace('^', '').replace('$', '')
                   if (variant) {
                     return `${variant}:${classesExtracted}`

src/runtime/utils/index.ts

@@ -5,7 +5,7 @@ import type { Strategy } from '../types/index'
 const customTwMerge = extendTailwindMerge<string, string>({
   extend: {
     classGroups: {
-      icons: [(classPart: string) => /^i-/.test(classPart)]
+      icons: [(classPart: string) => classPart.startsWith('i-')]
     }
   }
 })
@@ -23,7 +23,7 @@ const defuTwMerge = createDefu((obj, key, value, namespace) => {
   if (namespace.endsWith('chip') && key === 'size') {
     return false
   }
-  if (namespace.endsWith('badge') && key === 'size' || key === 'color' || key === 'variant') {
+  if ((namespace.endsWith('badge') && key === 'size') || key === 'color' || key === 'variant') {
     return false
   }
   if (typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
@@ -58,14 +58,14 @@ export function hexToRgb (hex: string) {
 
   const result = rxHex.exec(hex)
   return result
-    ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
+    ? `${Number.parseInt(result[1], 16)} ${Number.parseInt(result[2], 16)} ${Number.parseInt(result[3], 16)}`
     : null
 }
 
 export function getSlotsChildren(slots: any) {
   let children = slots.default?.()
   if (children?.length) {
-    children = children.flatMap(c => {
+    children = children.flatMap((c) => {
       if (typeof c.type === 'symbol') {
         if (typeof c.children === 'string') {
           // `v-if="false"` or commented node
@@ -86,8 +86,8 @@ export function getSlotsChildren (slots: any) {
  * This is used for the .number modifier in v-model
  */
 export function looseToNumber(val: any): any {
-  const n = parseFloat(val)
+  const n = Number.parseFloat(val)
-  return isNaN(n) ? val : n
+  return Number.isNaN(n) ? val : n
 }
 
 export * from './lodash'

src/runtime/utils/lodash.ts

@@ -5,6 +5,7 @@ export function omit<T extends Record<string, any>, K extends keyof T> (
   const result = { ...object }
 
   for (const key of keysToOmit) {
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete result[key]
   }
 
@@ -13,9 +14,9 @@ export function omit<T extends Record<string, any>, K extends keyof T> (
 
 export function get(object: Record<string, any>, path: (string | number)[] | string, defaultValue?: any): any {
   if (typeof path === 'string') {
-    path = path.split('.').map(key => {
+    path = path.split('.').map((key) => {
       const numKey = Number(key)
-      return isNaN(numKey) ? key : numKey
+      return Number.isNaN(numKey) ? key : numKey
     })
   }