chore(release): 2.4.0

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

CHANGELOG.md

@@ -2,6 +2,47 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.4.0](https://github.com/nuxtlabs/ui/compare/v2.3.0...v2.4.0) (2023-06-13)
+
+
+### ⚠ BREAKING CHANGES
+
+* **forms:** bind `$attrs` to elements (#279)
+* **Select:** rename `text-attribute` to `option-attribute` and defaults to `label`
+
+### Features
+
+* **CommandPalette:** handle `empty-state` ([#271](https://github.com/nuxtlabs/ui/issues/271)) ([652af93](https://github.com/nuxtlabs/ui/commit/652af93f5c7cd4b34044a5597f3c14441ed6d998))
+* **module:** smart safelisting ([#268](https://github.com/nuxtlabs/ui/issues/268)) ([20fa4d2](https://github.com/nuxtlabs/ui/commit/20fa4d2317fc1e14fe87fa273957b92e63668945))
+* **Pagination:** new component ([#257](https://github.com/nuxtlabs/ui/issues/257)) ([f0b24ba](https://github.com/nuxtlabs/ui/commit/f0b24ba25d52184b8683e364016ed8fb800fc96b))
+* **table:** add loading state ([#259](https://github.com/nuxtlabs/ui/issues/259)) ([4741532](https://github.com/nuxtlabs/ui/commit/47415322ea56b5388e55c404c901531e807a9f00))
+* **table:** add slot for empty state ([#260](https://github.com/nuxtlabs/ui/issues/260)) ([f7a34c8](https://github.com/nuxtlabs/ui/commit/f7a34c8feeda6a4e1e1daff87b37b375aaa0c90d))
+
+
+### Bug Fixes
+
+* **ButtonGroup:** invalid `size` validator ([a617672](https://github.com/nuxtlabs/ui/commit/a6176720c75b26768ba91efcab50689a932931ad))
+* **ButtonGroup:** use `-space-x-px` on wrapper ([d91c0bb](https://github.com/nuxtlabs/ui/commit/d91c0bb8944224d4e8eb62f99a33a6be94e5cd92))
+* **Button:** same size when no label + uniformize form elements ([a6903df](https://github.com/nuxtlabs/ui/commit/a6903df58fb91da44e6f83cc2bd9c963827fe5dd))
+* **CommandPalette:** input focus after be5f352 ([cbc8ef1](https://github.com/nuxtlabs/ui/commit/cbc8ef13cc3253690c22c32d90ea9746970c345a))
+* **deps:** move `@tailwindcss/container-queries` to dependencies ([9559d0b](https://github.com/nuxtlabs/ui/commit/9559d0b3bc09956d7fe17ee0deeef03599d02d45))
+* **forms:** `padded` prop with `p-0` class ([207444f](https://github.com/nuxtlabs/ui/commit/207444fdea773b8ee64dd4f80b4f70b76462a9d6))
+* **forms:** bind `$attrs` to elements ([#279](https://github.com/nuxtlabs/ui/issues/279)) ([e12e974](https://github.com/nuxtlabs/ui/commit/e12e9740c97b75d3b7b70c38978e249b5e26eead))
+* **module:** deduplicate default safelist as components may share same rules ([2cfa1f8](https://github.com/nuxtlabs/ui/commit/2cfa1f8d0355d4c9cec5d4294d63e043d223cd64))
+* **module:** hardcode `gray` safelist instead of deduplicate complex logic ([a733c13](https://github.com/nuxtlabs/ui/commit/a733c13866cdb74398f3e6f022cc63223e269e19))
+* **module:** only safelist known colors ([cdce519](https://github.com/nuxtlabs/ui/commit/cdce519742b86ff29460aa50264d7bb34ad24bd0))
+* **module:** prevent safelisting dynamic `:color` variables ([ccd9ca5](https://github.com/nuxtlabs/ui/commit/ccd9ca5106d0b81aed6591097f121eb81dcc9b47))
+* **module:** transform `vue` files to detect multi-line components ([88c1930](https://github.com/nuxtlabs/ui/commit/88c1930845d26c66c2fbd32f99f52dbd23244341))
+* **module:** use `@tailwindcss/forms` class strategy ([#278](https://github.com/nuxtlabs/ui/issues/278)) ([be5f352](https://github.com/nuxtlabs/ui/commit/be5f352296cf4e0c9099cf468ed905283b31007d))
+* **Notification:** class priority for icon color ([07f7855](https://github.com/nuxtlabs/ui/commit/07f7855a263e516250f62d0730afc69753d0322c))
+* **Radio/Checkbox:** split preset as `indeterminate` is checkbox only ([429791d](https://github.com/nuxtlabs/ui/commit/429791dab0fbb84bae1e1e13e7e688708f0b5c98))
+* **SelectMenu:** input focus after `be5f352` ([717a514](https://github.com/nuxtlabs/ui/commit/717a5144511c4db013a57869ac06421accf51e38))
+* **Table:** colspan of `empty` and `loading` is wrong when selection enabled ([#284](https://github.com/nuxtlabs/ui/issues/284)) ([786d776](https://github.com/nuxtlabs/ui/commit/786d7765f5517a7e8cdd718ce93fd9fecc427ba7))
+* **Toggle:** missing `disabled` prop ([fe833eb](https://github.com/nuxtlabs/ui/commit/fe833eb2b2b4d1d32eb9e082b437a0259b6f75c6))
+
+
+* **Select:** rename `text-attribute` to `option-attribute` and defaults to `label` ([b4a96a8](https://github.com/nuxtlabs/ui/commit/b4a96a8b01b52751c9a9c6609ed8cf7ccf516a04))
+
 ## [2.3.0](https://github.com/nuxtlabs/ui/compare/v2.2.1...v2.3.0) (2023-06-05)
 
 

docs/components/Header.vue

@@ -10,8 +10,8 @@
           </NuxtLink>
         </div>
 
-        <div class="flex items-center -mr-1.5">
-          <div class="mr-1.5 hidden lg:block">
+        <div class="flex items-center -mr-1.5 gap-1.5">
+          <div class="hidden lg:block">
             <ThemeSelect />
           </div>
 

docs/components/ThemeSelect.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex items-center shadow-sm">
-    <ClientOnly>
+  <ClientOnly>
+    <div class="inline-flex shadow-sm rounded-md">
       <USelectMenu
         v-model="primary"
         name="primary"
-        class="w-full [&>div>button]:!rounded-r-none"
+        class="!rounded-r-none !shadow-none focus:z-[1]"
         color="gray"
         :ui="{ width: 'w-[194px]' }"
         :popper="{ placement: 'bottom-start' }"
@@ -22,15 +22,13 @@
           {{ option.text }}
         </template>
       </USelectMenu>
-    </ClientOnly>
 
-    <ClientOnly>
       <USelectMenu
         v-model="gray"
         name="gray"
-        class="w-full [&>div>button]:!rounded-l-none [&>div>button]:-ml-px"
+        class="!rounded-l-none !shadow-none"
         color="gray"
-        :ui="{ width: 'w-[194px]' }"
+        :ui="{ width: 'w-[194px]', wrapper: '-ml-px' }"
         :popper="{ placement: 'bottom-end' }"
         :options="grayOptions"
       >
@@ -46,8 +44,8 @@
           {{ option.text }}
         </template>
       </USelectMenu>
-    </ClientOnly>
-  </div>
+    </div>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">
@@ -72,7 +70,7 @@ watch(grayCookie, (gray) => {
 const primaryOptions = computed(() => useWithout(appConfig.ui.colors, 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
 const primary = computed({
   get () {
-    return primaryOptions.value.find(option => option.value === primaryCookie.value)
+    return primaryOptions.value.find(option => option.value === primaryCookie.value) || primaryOptions.value.find(option => option.value === 'green')
   },
   set (option) {
     primaryCookie.value = option.value
@@ -82,7 +80,7 @@ const primary = computed({
 const grayOptions = computed(() => ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
 const gray = computed({
   get () {
-    return grayOptions.value.find(option => option.value === grayCookie.value)
+    return grayOptions.value.find(option => option.value === grayCookie.value) || grayOptions.value.find(option => option.value === 'cool')
   },
   set (option) {
     grayCookie.value = option.value

docs/components/content/ComponentCard.vue

@@ -8,18 +8,16 @@
           v-model="componentProps[prop.name]"
           :name="`prop-${prop.name}`"
           variant="none"
-          class="justify-center"
+          :ui="{ wrapper: 'relative flex items-start justify-center' }"
         />
         <USelectMenu
           v-else-if="prop.type === 'string' && prop.options.length"
           v-model="componentProps[prop.name]"
           :options="prop.options"
           :name="`prop-${prop.name}`"
-          :label="componentProps[prop.name]"
           variant="none"
-          class="inline-flex"
-          :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md' }"
-          :ui-select="{ custom: '!py-0' }"
+          :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md', wrapper: 'relative inline-flex' }"
+          class="!py-0"
           :popper="{ strategy: 'fixed', placement: 'bottom-start' }"
         />
         <UInput
@@ -29,7 +27,7 @@
           :name="`prop-${prop.name}`"
           variant="none"
           autocomplete="off"
-          :ui="{ custom: '!py-0' }"
+          class="!py-0"
           @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
         />
       </div>
@@ -121,7 +119,7 @@ const meta = await fetchComponentMeta(name)
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => ({ ...appConfig.ui[camelName], ...props.ui }))
 
-const fullProps = computed(() => ({ ...props.baseProps, ...componentProps }))
+const fullProps = computed(() => ({ ...baseProps, ...componentProps }))
 const vModel = computed({
   get: () => baseProps.modelValue,
   set: (value) => {

docs/components/content/examples/CheckboxExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UCheckbox v-model="selected" name="notifications" label="Notifications" />
+</template>

docs/components/content/examples/CommandPaletteExampleEmptySlot.vue

@@ -0,0 +1,10 @@
+<template>
+  <UCommandPalette>
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">Nothing here!</span>
+        <UButton label="Add item" />
+      </div>
+    </template>
+  </UCommandPalette>
+</template>

docs/components/content/examples/InputExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UInput v-model="value" />
+</template>

docs/components/content/examples/PaginationExampleBasic.vue

@@ -0,0 +1,8 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination v-model="page" :page-count="5" :total="items.length" />
+</template>

docs/components/content/examples/PaginationExamplePrevNextSlots.vue

@@ -0,0 +1,20 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
+    <template #prev="{ onClick }">
+      <UTooltip text="Previous page">
+        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
+      </UTooltip>
+    </template>
+
+    <template #next="{ onClick }">
+      <UTooltip text="Next page">
+        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
+      </UTooltip>
+    </template>
+  </UPagination>
+</template>

docs/components/content/examples/RadioExample.vue

@@ -0,0 +1,23 @@
+<script setup>
+const methods = [{
+  name: 'email',
+  value: 'email',
+  label: 'Email'
+}, {
+  name: 'sms',
+  value: 'sms',
+  label: 'Phone (SMS)'
+}, {
+  name: 'push',
+  value: 'push',
+  label: 'Push notification'
+}]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <div class="space-y-1">
+    <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+  </div>
+</template>

docs/components/content/examples/SelectExample.vue

@@ -0,0 +1,9 @@
+<script setup>
+const countries = ['United States', 'Canada', 'Mexico']
+
+const country = ref(countries[0])
+</script>
+
+<template>
+  <USelect v-model="country" :options="countries" />
+</template>

docs/components/content/examples/SelectExampleObjects.vue

@@ -0,0 +1,18 @@
+<script setup>
+const countries = [{
+  name: 'United States',
+  value: 'US'
+}, {
+  name: 'Canada',
+  value: 'CA'
+}, {
+  name: 'Mexico',
+  value: 'MX'
+}]
+
+const country = ref('CA')
+</script>
+
+<template>
+  <USelect v-model="country" :options="countries" option-attribute="name" />
+</template>

docs/components/content/examples/TableExampleEmptySlot.vue

@@ -0,0 +1,30 @@
+<script setup>
+const columns = [{
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}, {
+  key: 'actions'
+}]
+
+const people = []
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">No one here!</span>
+        <UButton label="Add people" />
+      </div>
+    </template>
+  </UTable>
+</template>

docs/components/content/examples/TableExampleLoadingSlot.vue

@@ -0,0 +1,86 @@
+<script setup>
+const columns = [{
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}, {
+  key: 'actions'
+}]
+
+const people = []
+
+const pending = ref(true)
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :loading="pending">
+    <template #loading-state>
+      <div class="flex items-center justify-center h-32">
+        <i class="loader --6" />
+      </div>
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+/* https://codepen.io/jenning/pen/YzNmzaV */
+
+.loader {
+	--color: rgb(var(--color-primary-400));
+	--size-mid: 6vmin;
+	--size-dot: 1.5vmin;
+	--size-bar: 0.4vmin;
+	--size-square: 3vmin;
+
+	display: block;
+	position: relative;
+	width: 50%;
+	display: grid;
+	place-items: center;
+}
+
+.loader::before,
+.loader::after {
+	content: '';
+	box-sizing: border-box;
+	position: absolute;
+}
+
+/**
+	loader --6
+**/
+.loader.--6::before {
+	width: var(--size-square);
+	height: var(--size-square);
+	background-color: var(--color);
+	top: calc(50% - var(--size-square));
+	left: calc(50% - var(--size-square));
+	animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+}
+
+@keyframes loader-6 {
+	0%, 100% {
+		transform: none;
+	}
+
+	25% {
+		transform: translateX(100%);
+	}
+
+	50% {
+		transform: translateX(100%) translateY(100%);
+	}
+
+	75% {
+		transform: translateY(100%);
+	}
+}
+</style>

docs/components/content/examples/TableExamplePaginable.vue

@@ -0,0 +1,98 @@
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}, {
+  id: 7,
+  name: 'Emily Selman',
+  title: 'VP, User Experience',
+  email: '',
+  role: 'Admin'
+}, {
+  id: 8,
+  name: 'Kristin Watson',
+  title: 'VP, Human Resources',
+  email: '',
+  role: 'Member'
+}, {
+  id: 9,
+  name: 'Emma Watson',
+  title: 'Front-end Developer',
+  email: '',
+  role: 'Member'
+}, {
+  id: 10,
+  name: 'John Doe',
+  title: 'Designer',
+  email: '',
+  role: 'Admin'
+}, {
+  id: 11,
+  name: 'Jane Doe',
+  title: 'Director of Product',
+  email: '',
+  role: 'Member'
+}, {
+  id: 12,
+  name: 'John Smith',
+  title: 'Copywriter',
+  email: '',
+  role: 'Admin'
+}, {
+  id: 13,
+  name: 'Jane Smith',
+  title: 'Senior Designer',
+  email: '',
+  role: 'Owner'
+}]
+
+const page = ref(1)
+const pageCount = 5
+
+const rows = computed(() => {
+  return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
+})
+</script>
+
+<template>
+  <div>
+    <UTable :rows="rows" />
+
+    <div class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700">
+      <UPagination v-model="page" :page-count="pageCount" :total="people.length" />
+    </div>
+  </div>
+</template>

docs/components/content/examples/TextareaExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UTextarea v-model="value" />
+</template>

docs/components/content/examples/ToggleExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UToggle v-model="selected" />
+</template>

docs/components/content/themes/PaginationThemeRounded.vue

@@ -0,0 +1,21 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination
+    v-model="page"
+    :total="items.length"
+    :ui="{
+      wrapper: 'flex items-center gap-1',
+      rounded: 'rounded-full min-w-[32px] justify-center'
+    }"
+    :prev-button="null"
+    :next-button="{
+      icon: 'i-heroicons-arrow-small-right-20-solid',
+      color: 'primary',
+      variant: 'outline'
+    }"
+  />
+</template>

docs/components/docs/DocsAsideLinks.vue

@@ -10,15 +10,21 @@
         class="mt-1"
         :ui="{
           wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
-          base: 'group block border-l -ml-px lg:leading-6',
+          base: 'group block border-l -ml-px lg:leading-6 flex items-center gap-2',
           padding: 'pl-4',
           rounded: '',
           font: '',
           ring: '',
-          active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
+          active: 'text-primary-500 dark:text-primary-400 border-current',
           inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
         }"
-      />
+      >
+        <template #badge="{ link }">
+          <UBadge v-if="link.badge" size="xs" :ui="{ rounded: 'rounded-full' }">
+            {{ link.badge }}
+          </UBadge>
+        </template>
+      </UVerticalNavigation>
     </div>
   </div>
 </template>
@@ -29,6 +35,6 @@ import type { NavItem } from '@nuxt/content/dist/runtime/types'
 const { navigation } = useContent() as { navigation: NavItem[] }
 
 function mapContentLinks (links: NavItem[]) {
-  return links?.map(link => ({ label: link.title, icon: link.icon, to: link._path })) || []
+  return links?.map(link => ({ label: link.title, icon: link.icon, to: link._path, badge: link.badge })) || []
 }
 </script>

docs/components/docs/DocsPageHeader.vue

@@ -8,7 +8,7 @@
         {{ page.title }}
       </h1>
 
-      <div class="flex items-center gap-2 mt-4 lg:mt-0">
+      <div v-if="page.headlessui || page.github" class="flex items-center gap-2 mt-4 lg:mt-0">
         <UButton
           v-if="page.headlessui"
           :label="page.headlessui.label"

docs/content/1.getting-started/2.installation.md

@@ -45,6 +45,7 @@ As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) a
 | `prefix`                 | `u`                    | Define the prefix of the imported components.    |
 | `global`                 | `false`                | Expose components globally.                      |
 | `icons`                  | `['heroicons']`        | Icon collections to load.                        |
+| `safelistColors`         | `['primary']`          | Force safelisting of colors.                     |
 
 ## Edge
 

docs/content/1.getting-started/3.theming.md

@@ -33,13 +33,45 @@ Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 
-Components that have a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
+Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/elements/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
+
+Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
+
+The module uses the [Tailwind CSS safelist](https://tailwindcss.com/docs/content-configuration#safelisting-classes) feature to force the generation of all the classes for the `primary` color **only** as it is the default color for all the components.
+
+Then, the module will automatically detect when you use one of those components with a color and will safelist it for you. This means that if you use a `red` color for a Button component, the `red` color classes will be safelisted for the Button component only. This will allow to keep the CSS bundle size as small as possible.
+
+There is one case where you would want to force the safelisting of a color. For example, if you've set the default color of the Button component to `orange` in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      default: {
+        color: 'orange'
+      }
+    }
+  }
+})
+```
+
+This will apply the orange color when using a default `<UButton />`. You'll need to safelist this color manually in your `nuxt.config.ts` ui options as we won't be able to detect it automatically. You can do so through the `safelistColors` option which defaults to `['primary']`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    safelistColors: ['orange']
+  }
+})
+```
+
+This can also happen when you bind a dynamic color to a component: `<UBadge :color="color" />`, `<UAvatar :chip-color="statuses[user.status]" />`, etc. In this case, you'll need to safelist the possible color values manually as well.
 
 ## Dark mode
 
 All the components are styled with dark mode in mind.
 
-Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) `class` strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
+Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
 
 ## Components
 

docs/content/3.forms/1.input.md

@@ -5,11 +5,22 @@ description: Display an input field.
 
 ## Usage
 
-::component-card
----
-baseProps:
-  name: 'input'
----
+Use a `v-model` to make the Input reactive.
+
+::component-example
+#default
+:input-example
+
+#code
+```vue
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UInput v-model="value" />
+</template>
+```
 ::
 
 ### Style

docs/content/3.forms/2.textarea.md

@@ -5,11 +5,22 @@ description: Display a textarea field.
 
 ## Usage
 
-::component-card
----
-baseProps:
-  name: 'textarea'
----
+Use a `v-model` to make the Textarea reactive.
+
+::component-example
+#default
+:textarea-example
+
+#code
+```vue
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UTextarea v-model="value" />
+</template>
+```
 ::
 
 ### Style

docs/content/3.forms/3.select.md

@@ -7,19 +7,53 @@ description: Display a select field.
 
 The Select component is a wrapper around the native `<select>` HTML element. For more advanced use cases like searching or multiple selection, consider using the [SelectMenu](/forms/select-menu) component.
 
-::component-card
----
-baseProps:
-  name: 'select'
-  modelValue: 'United States'
-props:
-  options:
-    - 'United States'
-    - 'Canada'
-    - 'Mexico'
-excludedProps:
-  - options
----
+Use a `v-model` to make the Select reactive alongside the `options` prop to pass an array of strings or objects.
+
+::component-example
+#default
+:select-example
+
+#code
+```vue
+<script setup>
+const countries = ['United States', 'Canada', 'Mexico']
+
+const country = ref(countries[0])
+</script>
+
+<template>
+  <USelect v-model="country" :options="countries" />
+</template>
+```
+::
+
+When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
+
+::component-example
+#default
+:select-example-objects
+
+#code
+```vue
+<script setup>
+const countries = [{
+  name: 'United States',
+  value: 'US'
+}, {
+  name: 'Canada',
+  value: 'CA'
+}, {
+  name: 'Mexico',
+  value: 'MX'
+}]
+
+const country = ref('CA')
+</script>
+
+<template>
+  <USelect v-model="country" :options="countries" option-attribute="name" />
+</template>
+```
 ::
 
 ### Style

docs/content/3.forms/4.select-menu.md

@@ -10,8 +10,6 @@ headlessui:
 
 The SelectMenu component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the Select props to configure the display if you don't want to override the default slot such as [color](/forms/select#style), [variant](/forms/select#style), [size](/forms/select#size), [placeholder](/forms/select#placeholder), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
 
-### Options
-
 Like the Select component, you can use the `options` prop to pass an array of strings or objects.
 
 ::component-example

docs/content/3.forms/5.checkbox.md

@@ -5,11 +5,22 @@ description: Display a checkbox field.
 
 ## Usage
 
-::component-card
----
-baseProps:
-  name: 'checkbox'
----
+Use a `v-model` to make the Checkbox reactive.
+
+::component-example
+#default
+:checkbox-example
+
+#code
+```vue
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UCheckbox v-model="selected" name="notifications" label="Notifications" />
+</template>
+```
 ::
 
 ### Label

docs/content/3.forms/6.radio.md

@@ -5,11 +5,36 @@ description: Display a radio field.
 
 ## Usage
 
-::component-card
----
-baseProps:
-  name: 'radio'
----
+Use a `v-model` to make the Radio reactive.
+
+::component-example
+#default
+:radio-example
+
+#code
+```vue
+<script setup>
+const methods = [{
+  name: 'email',
+  value: 'email',
+  label: 'Email'
+}, {
+  name: 'sms',
+  value: 'sms',
+  label: 'Phone (SMS)'
+}, {
+  name: 'push',
+  value: 'push',
+  label: 'Push notification'
+}]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+</template>
+```
 ::
 
 ### Label

docs/content/3.forms/7.toggle.md

@@ -8,7 +8,22 @@ headlessui:
 
 ## Usage
 
-::component-card
+Use a `v-model` to make the Toggle reactive.
+
+::component-example
+#default
+:toggle-example
+
+#code
+```vue
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UToggle v-model="selected" />
+</template>
+```
 ::
 
 ### Icon
@@ -26,6 +41,18 @@ excludedProps:
 ---
 ::
 
+### Disabled
+
+Use the `disabled` prop to disable the Toggle.
+
+::component-card
+---
+props:
+  disabled: true
+---
+::
+
+
 ## Props
 
 :component-props

docs/content/4.data/1.table.md

@@ -366,11 +366,95 @@ const filteredRows = computed(() => {
 ```
 ::
 
+### Paginable
+
+You can easily use the [Pagination](/navigation/pagination) component to paginate the rows.
+
+::component-example
+---
+padding: false
+---
+
+#default
+:table-example-paginable{class="w-full"}
+
+#code
+```vue
+<script setup>
+const people = [...]
+
+const page = ref(1)
+const pageCount = 5
+
+const rows = computed(() => {
+  return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
+})
+</script>
+
+<template>
+  <div>
+    <UTable :rows="rows" />
+
+    <UPagination v-model="page" :page-count="pageCount" :total="people.length" />
+  </div>
+</template>
+```
+::
+
+### Loading :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `loading` prop to display a loading state.
+
+Use the `loading-state` prop to customize the `icon` and `label` or change them globally in `ui.table.default.loadingState`.
+
+You can also set it to `null` to hide the loading state.
+
+::component-card
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+    - key: 'title'
+      label: 'Title'
+    - key: 'email'
+      label: 'Email'
+    - key: 'role'
+      label: 'Role'
+props:
+  loading: true
+  loadingState:
+    icon: 'i-heroicons-arrow-path-20-solid'
+    label: "Loading..."
+excludedProps:
+  - loadingState
+---
+::
+
+This can be easily used with Nuxt `useAsyncData` composable.
+
+```vue
+<script setup>
+const columns = [...]
+
+const { pending, data: people } = await useLazyAsyncData('people', () => $fetch('/api/people'))
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :loading="pending" />
+</template>
+```
+
 ### Empty
 
-Use the `empty-state` prop to display a message when there are no results.
+An empty state will be displayed when there are no results.
 
-You can pass an `object` through the `empty-state` prop or globally through `ui.table.default.emptyState`.
+Use the `empty-state` prop to customize the `icon` and `label` or change them globally in `ui.table.default.emptyState`.
 
 You can also set it to `null` to hide the empty state.
 
@@ -482,6 +566,78 @@ const selected = ref([people[1]])
 ```
 ::
 
+### `loading-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `#loading-state` slot to customize the loading state.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-loading-slot{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const columns = [...]
+
+const people = []
+
+const pending = ref(true)
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :loading="pending">
+    <template #loading-state>
+      <div class="flex items-center justify-center h-32">
+        <i class="loader --6" />
+      </div>
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+/* https://codepen.io/jenning/pen/YzNmzaV */
+</style>
+```
+::
+
+### `empty-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `#empty-state` slot to customize the empty state.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-empty-slot{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const columns = [...]
+const people = [...]
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">No one here!</span>
+        <UButton label="Add people" />
+      </div>
+    </template>
+  </UTable>
+</template>
+```
+::
+
 ## Props
 
 :component-props

docs/content/5.navigation/1.vertical-navigation.md

@@ -39,11 +39,9 @@ const links = [{
 ```
 ::
 
-## Themes
+## Theme
 
-Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
-
-### Tailwind
+Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
 
 ::component-example
 #default

docs/content/5.navigation/2.command-palette.md

@@ -232,9 +232,9 @@ excludedProps:
 
 ### Empty
 
-Use the `empty-state` prop to display a message when there are no results.
+An empty state will be displayed when there are no results.
 
-You can pass an `object` through the `empty-state` prop or globally through `ui.commandPalette.default.emptyState`.
+Use the `empty-state` prop to customize the `icon` and `label` or change them globally in `ui.commandPalette.default.emptyState`.
 
 You can also set it to `null` to hide the empty state.
 
@@ -357,6 +357,40 @@ padding: false
 Take a look at the component!
 ::
 
+## Slots
+
+### `empty-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `#empty-state` slot to customize the empty state.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:command-palette-example-empty-slot{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const groups = [...]
+</script>
+
+<template>
+  <UCommandPalette :groups="groups">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">Nothing here!</span>
+        <UButton label="Add item" />
+      </div>
+    </template>
+  </UCommandPalette>
+</template>
+```
+::
+
 ## Props
 
 :component-props

docs/content/5.navigation/3.pagination.md

@@ -0,0 +1,188 @@
+---
+github: true
+description: Add a pagination to handle pages.
+navigation:
+  badge: 'Edge'
+---
+
+## Usage
+
+Use a `v-model` to get a reactive page alongside a `total` which represents the total of items. You can also use the `page-count` prop to define the number of items per page which defaults to `10`.
+
+::component-example
+#default
+:pagination-example-basic
+
+#code
+```vue
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination v-model="page" :page-count="5" :total="items.length" />
+</template>
+```
+::
+
+### Max
+
+Use the `max` prop to set a maximum of displayed pages. Defaults to `7`, being the minimum.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+props:
+  max: 5
+  pageCount: 5
+  total: 100
+excludedProps:
+  - pageCount
+  - total
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the buttons.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  size: 'sm'
+ui:
+  size:
+    2xs: true
+    xs: true
+    sm: true
+    md: true
+    lg: true
+    xl: true
+---
+::
+
+### Active / Inactive
+
+Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  activeButton:
+    variant: 'outline'
+  inactiveButton:
+    color: 'gray'
+excludedProps:
+  - activeButton
+  - inactiveButton
+---
+::
+
+### Prev / Next
+
+Use the `prev-button` and `next-button` props to customize the prev and next buttons of the Pagination.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  prevButton:
+    icon: 'i-heroicons-arrow-small-left-20-solid'
+    label: Prev
+    color: 'gray'
+  nextButton:
+    icon: 'i-heroicons-arrow-small-right-20-solid'
+    trailing: true
+    label: Next
+    color: 'gray'
+excludedProps:
+  - prevButton
+  - nextButton
+---
+::
+
+## Theme
+
+Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
+
+::component-example
+#default
+:pagination-theme-rounded
+#code
+```vue
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination
+    v-model="page"
+    :total="items.length"
+    :ui="{
+      wrapper: 'flex items-center gap-1',
+      rounded: 'rounded-full min-w-[32px] justify-center'
+    }"
+    :prev-button="null"
+    :next-button="{
+      icon: 'i-heroicons-arrow-small-right-20-solid',
+      color: 'primary',
+      variant: 'outline'
+    }"
+  />
+</template>
+```
+::
+
+## Slots
+
+### `prev` / `next`
+
+Use the `#prev` and `#next` slots to set the content of the previous and next buttons.
+
+::component-example
+#default
+:pagination-example-prev-next-slots
+
+#code
+```vue
+<script setup>
+const page = ref(1);
+const items = ref(Array(55));
+</script>
+
+<template>
+  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
+    <template #prev="{ onClick }">
+      <UTooltip text="Previous page">
+        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
+      </UTooltip>
+    </template>
+
+    <template #next="{ onClick }">
+      <UTooltip text="Next page">
+        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
+      </UTooltip>
+    </template>
+  </UPagination>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/6.overlays/6.notification.md

@@ -130,8 +130,8 @@ baseProps:
   description: 'This is a notification.'
   timeout: 600000
 props:
-  icon: 'i-heroicons-x-circle'
-  color: 'red'
+  icon: 'i-heroicons-check-badge'
+  color: 'primary'
 extraColors:
   - gray
 excludedProps:

docs/nuxt.config.ts

@@ -1,4 +1,6 @@
 import ui from '../src/module'
+import { excludeColors } from '../src/colors'
+import colors from 'tailwindcss/colors'
 
 export default defineNuxtConfig({
   // @ts-ignore
@@ -25,7 +27,8 @@ export default defineNuxtConfig({
   },
   ui: {
     global: true,
-    icons: ['heroicons', 'simple-icons']
+    icons: ['heroicons', 'simple-icons'],
+    safelistColors: excludeColors(colors)
   },
   typescript: {
     strict: false,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {
@@ -28,14 +28,15 @@
     "release": "pnpm lint && standard-version && git push --follow-tags"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "^1.0.7",
+    "@egoist/tailwindcss-icons": "^1.1.0",
     "@headlessui/vue": "1.7.10",
-    "@iconify-json/heroicons": "^1.1.10",
-    "@nuxt/kit": "^3.5.2",
+    "@iconify-json/heroicons": "^1.1.11",
+    "@nuxt/kit": "^3.5.3",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.7.0",
+    "@nuxtjs/tailwindcss": "^6.7.2",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
     "@vueuse/core": "^10.1.2",
@@ -47,7 +48,7 @@
     "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
-    "@iconify-json/simple-icons": "^1.1.55",
+    "@iconify-json/simple-icons": "^1.1.56",
     "@nuxt/content": "^2.6.0",
     "@nuxt/devtools": "^0.5.5",
     "@nuxt/eslint-config": "^0.1.1",
@@ -55,10 +56,10 @@
     "@nuxthq/studio": "^0.13.2",
     "@nuxtjs/plausible": "^0.2.1",
     "@types/lodash-es": "^4.17.7",
-    "@types/node": "^20.2.5",
+    "@types/node": "^20.3.1",
     "@vueuse/nuxt": "^10.1.2",
-    "eslint": "^8.41.0",
-    "nuxt": "^3.5.2",
+    "eslint": "^8.42.0",
+    "nuxt": "^3.5.3",
     "nuxt-component-meta": "^0.5.3",
     "nuxt-lodash": "^2.4.1",
     "standard-version": "^9.5.0",

src/colors.ts

@@ -0,0 +1,162 @@
+const colorsToExclude = [
+  'inherit',
+  'transparent',
+  'current',
+  'white',
+  'black',
+  'slate',
+  'gray',
+  'zinc',
+  'neutral',
+  'stone',
+  'cool'
+]
+
+const omit = (obj: object, keys: string[]) => {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => !keys.includes(key))
+  )
+}
+
+const kebabCase = (str: string) => {
+  return str
+    ?.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    ?.map(x => x.toLowerCase())
+    ?.join('-')
+}
+
+const safelistByComponent = {
+  avatar: (colorsAsRegex) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }],
+  badge: (colorsAsRegex) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex})-50`)
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }],
+  button: (colorsAsRegex) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex})-50`),
+    variants: ['hover']
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-100`),
+    variants: ['hover']
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    variants: ['dark', 'dark:disabled']
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-500`),
+    variants: ['disabled', 'dark:hover']
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-600`),
+    variants: ['hover']
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-900`),
+    variants: ['dark:hover']
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-950`),
+    variants: ['dark', 'dark:hover']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-500`),
+    variants: ['dark:hover']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-600`),
+    variants: ['hover']
+  }, {
+    pattern: new RegExp(`outline-(${colorsAsRegex})-400`),
+    variants: ['dark:focus-visible']
+  }, {
+    pattern: new RegExp(`outline-(${colorsAsRegex})-500`),
+    variants: ['focus-visible']
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    variants: ['dark:focus-visible']
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    variants: ['focus-visible']
+  }],
+  input: (colorsAsRegex) => [{
+    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    variants: ['dark', 'dark:focus']
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    variants: ['focus']
+  }],
+  notification: (colorsAsRegex) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }]
+}
+
+const colorsAsRegex = (colors: string[]): string => colors.join('|')
+
+export const excludeColors = (colors: object) => Object.keys(omit(colors, colorsToExclude)).map(color => kebabCase(color)) as string[]
+
+export const generateSafelist = (colors: string[]) => {
+  const safelist = ['avatar', 'badge', 'button', 'input', 'notification'].flatMap(component => safelistByComponent[component](colorsAsRegex(colors)))
+
+  return [
+    ...safelist,
+    // Gray safelist for Avatar & Notification
+    'bg-gray-500',
+    'dark:bg-gray-400',
+    'text-gray-500',
+    'dark:text-gray-400'
+  ]
+}
+
+export const customSafelistExtractor = (prefix, content: string, colors: string[]) => {
+  const classes = []
+  const regex = /<(\w+)\s+[^>:]*color=["']([^"']+)["'][^>]*>/gs
+  const matches = content.matchAll(regex)
+
+  for (const match of matches) {
+    const [, component, color] = match
+
+    if (!colors.includes(color)) {
+      continue
+    }
+
+    if (Object.keys(safelistByComponent).map(component => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`).includes(component)) {
+      const name = component.replace(prefix, '').toLowerCase()
+
+      const matchClasses = safelistByComponent[name](color).flatMap(group => {
+        return ['', ...(group.variants || [])].flatMap(variant => {
+          const matches = group.pattern.source.match(/\(([^)]+)\)/g)
+
+          return matches.map(match => {
+            const colorOptions = match.substring(1, match.length - 1).split('|')
+            return colorOptions.map(color => `${variant ? variant + ':' : ''}` + group.pattern.source.replace(match, color))
+          }).flat()
+        })
+      })
+
+      classes.push(...matchClasses)
+    }
+  }
+
+  return classes
+}

src/module.ts

@@ -1,22 +1,20 @@
 import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin, resolvePath } from '@nuxt/kit'
-import colors from 'tailwindcss/colors.js'
+import defaultColors from 'tailwindcss/colors.js'
+import { defaultExtractor as createDefaultExtractor } from 'tailwindcss/lib/lib/defaultExtractor.js'
 import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons'
 import { name, version } from '../package.json'
-import { colorsAsRegex, excludeColors } from './runtime/utils/colors'
-
+import { generateSafelist, excludeColors, customSafelistExtractor } from './colors'
 import appConfig from './runtime/app.config'
+
 type DeepPartial<T> = Partial<{ [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string } }>
 
-// @ts-ignore
-delete colors.lightBlue
-// @ts-ignore
-delete colors.warmGray
-// @ts-ignore
-delete colors.trueGray
-// @ts-ignore
-delete colors.coolGray
-// @ts-ignore
-delete colors.blueGray
+const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
+
+delete defaultColors.lightBlue
+delete defaultColors.warmGray
+delete defaultColors.trueGray
+delete defaultColors.coolGray
+delete defaultColors.blueGray
 
 declare module 'nuxt/schema' {
   interface AppConfigInput {
@@ -40,6 +38,8 @@ export interface ModuleOptions {
   global?: boolean
 
   icons: string[] | string
+
+  safelistColors?: string[]
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -52,8 +52,9 @@ export default defineNuxtModule<ModuleOptions>({
     }
   },
   defaults: {
-    prefix: 'u',
-    icons: ['heroicons']
+    prefix: 'U',
+    icons: ['heroicons'],
+    safelistColors: ['primary']
   },
   async setup (options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
@@ -70,14 +71,14 @@ export default defineNuxtModule<ModuleOptions>({
       app.configs.push(appConfigFile)
     })
 
-    // @ts-ignore
-    nuxt.hook('tailwindcss:config', function (tailwindConfig: TailwindConfig) {
-      const globalColors = {
-        ...(tailwindConfig.theme.colors || colors),
+    nuxt.hook('tailwindcss:config', function (tailwindConfig) {
+      const globalColors: any = {
+        ...(tailwindConfig.theme.colors || defaultColors),
         ...tailwindConfig.theme.extend?.colors
       }
 
       tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {}
+      // @ts-ignore
       globalColors.primary = tailwindConfig.theme.extend.colors.primary = {
         50: 'rgb(var(--color-primary-50) / <alpha-value>)',
         100: 'rgb(var(--color-primary-100) / <alpha-value>)',
@@ -93,9 +94,11 @@ export default defineNuxtModule<ModuleOptions>({
       }
 
       if (globalColors.gray) {
-        globalColors.cool = tailwindConfig.theme.extend.colors.cool = colors.gray
+        // @ts-ignore
+        globalColors.cool = tailwindConfig.theme.extend.colors.cool = defaultColors.gray
       }
 
+      // @ts-ignore
       globalColors.gray = tailwindConfig.theme.extend.colors.gray = {
         50: 'rgb(var(--color-gray-50) / <alpha-value>)',
         100: 'rgb(var(--color-gray-100) / <alpha-value>)',
@@ -110,65 +113,24 @@ export default defineNuxtModule<ModuleOptions>({
         950: 'rgb(var(--color-gray-950) / <alpha-value>)'
       }
 
-      const variantColors = excludeColors(globalColors)
-      const safeColorsAsRegex = colorsAsRegex(variantColors)
+      const colors = excludeColors(globalColors)
 
       nuxt.options.appConfig.ui = {
         ...nuxt.options.appConfig.ui,
         primary: 'green',
         gray: 'cool',
-        colors: variantColors
+        colors
       }
 
       tailwindConfig.safelist = tailwindConfig.safelist || []
-      tailwindConfig.safelist.push(...[
-        'bg-gray-500',
-        'dark:bg-gray-400',
-        {
-          pattern: new RegExp(`bg-(${safeColorsAsRegex})-(50|400|500)`)
-        }, {
-          pattern: new RegExp(`bg-(${safeColorsAsRegex})-500`),
-          variants: ['disabled']
-        }, {
-          pattern: new RegExp(`bg-(${safeColorsAsRegex})-(400|950)`),
-          variants: ['dark']
-        }, {
-          pattern: new RegExp(`bg-(${safeColorsAsRegex})-(500|900|950)`),
-          variants: ['dark:hover']
-        }, {
-          pattern: new RegExp(`bg-(${safeColorsAsRegex})-400`),
-          variants: ['dark:disabled']
-        }, {
-          pattern: new RegExp(`bg-(${safeColorsAsRegex})-(50|100|600)`),
-          variants: ['hover']
-        }, {
-          pattern: new RegExp(`outline-(${safeColorsAsRegex})-500`),
-          variants: ['focus-visible']
-        }, {
-          pattern: new RegExp(`outline-(${safeColorsAsRegex})-400`),
-          variants: ['dark:focus-visible']
-        }, {
-          pattern: new RegExp(`ring-(${safeColorsAsRegex})-500`),
-          variants: ['focus', 'focus-visible']
-        }, {
-          pattern: new RegExp(`ring-(${safeColorsAsRegex})-400`),
-          variants: ['dark', 'dark:focus', 'dark:focus-visible']
-        }, {
-          pattern: new RegExp(`text-(${safeColorsAsRegex})-400`),
-          variants: ['dark']
-        }, {
-          pattern: new RegExp(`text-(${safeColorsAsRegex})-500`),
-          variants: ['dark:hover']
-        }, {
-          pattern: new RegExp(`text-(${safeColorsAsRegex})-600`),
-          variants: ['hover']
-        }
-      ])
+      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors))
 
       tailwindConfig.plugins = tailwindConfig.plugins || []
       tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons as any[]) }))
     })
 
+    // Modules
+
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
     await installModule('@nuxtjs/tailwindcss', {
       viewer: false,
@@ -176,21 +138,41 @@ export default defineNuxtModule<ModuleOptions>({
       config: {
         darkMode: 'class',
         plugins: [
-          require('@tailwindcss/forms'),
+          require("@tailwindcss/forms")({ strategy: 'class' }),
           require('@tailwindcss/aspect-ratio'),
-          require('@tailwindcss/typography')
+          require('@tailwindcss/typography'),
+          require('@tailwindcss/container-queries')
         ],
-        content: [
-          resolve(runtimeDir, 'components/**/*.{vue,mjs,ts}'),
-          resolve(runtimeDir, '*.{mjs,js,ts}')
-        ]
+        content: {
+          files: [
+            resolve(runtimeDir, 'components/**/*.{vue,mjs,ts}'),
+            resolve(runtimeDir, '*.{mjs,js,ts}')
+          ],
+          transform: {
+            vue: (content) => {
+              return content.replaceAll(/(?:\r\n|\r|\n)/g, ' ')
+            }
+          },
+          extract: {
+            vue: (content) => {
+              return [
+                ...defaultExtractor(content),
+                ...customSafelistExtractor(options.prefix, content, nuxt.options.appConfig.ui.colors)
+              ]
+            }
+          }
+        }
       }
     })
 
+    // Plugins
+
     addPlugin({
       src: resolve(runtimeDir, 'plugins', 'colors')
     })
 
+    // Components
+
     addComponentsDir({
       path: resolve(runtimeDir, 'components', 'elements'),
       prefix: options.prefix,
@@ -228,6 +210,8 @@ export default defineNuxtModule<ModuleOptions>({
       watch: false
     })
 
+    // Composables
+
     addImportsDir(resolve(runtimeDir, 'composables'))
   }
 })

src/runtime/app.config.ts

@@ -24,6 +24,11 @@ const table = {
     font: '',
     size: 'text-sm'
   },
+  loadingState: {
+    wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
+    label: 'text-sm text-center text-gray-900 dark:text-white',
+    icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4 animate-spin'
+  },
   emptyState: {
     wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
     label: 'text-sm text-center text-gray-900 dark:text-white',
@@ -40,6 +45,10 @@ const table = {
       variant: 'ghost',
       class: '-m-1.5'
     },
+    loadingState: {
+      icon: 'i-heroicons-arrow-path-20-solid',
+      label: 'Loading...'
+    },
     emptyState: {
       icon: 'i-heroicons-circle-stack-20-solid',
       label: 'No items.'
@@ -129,32 +138,32 @@ const button = {
     xs: 'text-xs',
     sm: 'text-sm',
     md: 'text-sm',
-    lg: 'text-base',
+    lg: 'text-sm',
     xl: 'text-base'
   },
   gap: {
     '2xs': 'gap-x-1',
     xs: 'gap-x-1.5',
-    sm: 'gap-x-2',
+    sm: 'gap-x-1.5',
     md: 'gap-x-2',
-    lg: 'gap-x-2',
-    xl: 'gap-x-2'
+    lg: 'gap-x-2.5',
+    xl: 'gap-x-2.5'
   },
   padding: {
     '2xs': 'px-2 py-1',
     xs: 'px-2.5 py-1.5',
-    sm: 'px-3 py-1.5',
+    sm: 'px-2.5 py-1.5',
     md: 'px-3 py-2',
-    lg: 'px-4 py-2',
-    xl: 'px-4 py-3'
+    lg: 'px-3.5 py-2.5',
+    xl: 'px-3.5 py-2.5'
   },
   square: {
     '2xs': 'p-1',
     xs: 'p-1.5',
     sm: 'p-1.5',
     md: 'p-2',
-    lg: 'p-2',
-    xl: 'p-3'
+    lg: 'p-2.5',
+    xl: 'p-2.5'
   },
   color: {
     white: {
@@ -181,9 +190,9 @@ const button = {
   icon: {
     base: 'flex-shrink-0',
     size: {
-      '2xs': 'h-3.5 w-3.5',
+      '2xs': 'h-4 w-4',
       xs: 'h-4 w-4',
-      sm: 'h-4 w-4',
+      sm: 'h-5 w-5',
       md: 'h-5 w-5',
       lg: 'h-5 w-5',
       xl: 'h-6 w-6'
@@ -198,7 +207,7 @@ const button = {
 }
 
 const buttonGroup = {
-  wrapper: 'inline-flex',
+  wrapper: 'inline-flex -space-x-px',
   rounded: 'rounded-md',
   shadow: 'shadow-sm'
 }
@@ -207,11 +216,12 @@ const dropdown = {
   wrapper: 'relative inline-flex text-left',
   container: 'z-20',
   width: 'w-48',
+  height: '',
   background: 'bg-white dark:bg-gray-800',
   shadow: 'shadow-lg',
   rounded: 'rounded-md',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
-  base: 'focus:outline-none',
+  base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
   divide: 'divide-y divide-gray-200 dark:divide-gray-700',
   padding: 'p-1',
   item: {
@@ -271,13 +281,12 @@ const input = {
   base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
   rounded: 'rounded-md',
   placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
-  custom: '',
   size: {
     '2xs': 'text-xs',
     xs: 'text-xs',
     sm: 'text-sm',
     md: 'text-sm',
-    lg: 'text-base',
+    lg: 'text-sm',
     xl: 'text-base'
   },
   gap: {
@@ -291,14 +300,14 @@ const input = {
   padding: {
     '2xs': 'px-2 py-1',
     xs: 'px-2.5 py-1.5',
-    sm: 'px-3 py-1.5',
+    sm: 'px-2.5 py-1.5',
     md: 'px-3 py-2',
-    lg: 'px-4 py-2',
-    xl: 'px-4 py-3'
+    lg: 'px-3.5 py-2.5',
+    xl: 'px-3.5 py-2.5'
   },
   leading: {
     padding: {
-      '2xs': 'pl-[26px]',
+      '2xs': 'pl-7',
       xs: 'pl-8',
       sm: 'pl-9',
       md: 'pl-10',
@@ -308,7 +317,7 @@ const input = {
   },
   trailing: {
     padding: {
-      '2xs': 'pr-[26px]',
+      '2xs': 'pr-7',
       xs: 'pr-8',
       sm: 'pr-9',
       md: 'pr-10',
@@ -332,9 +341,9 @@ const input = {
     base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
     color: 'text-{color}-500 dark:text-{color}-400',
     size: {
-      '2xs': 'h-3.5 w-3.5',
+      '2xs': 'h-4 w-4',
       xs: 'h-4 w-4',
-      sm: 'h-4 w-4',
+      sm: 'h-5 w-5',
       md: 'h-5 w-5',
       lg: 'h-5 w-5',
       xl: 'h-6 w-6'
@@ -345,10 +354,10 @@ const input = {
       padding: {
         '2xs': 'pl-2',
         xs: 'pl-2.5',
-        sm: 'pl-3',
+        sm: 'pl-2.5',
         md: 'pl-3',
-        lg: 'pl-4',
-        xl: 'pl-4'
+        lg: 'pl-3.5',
+        xl: 'pl-3.5'
       }
     },
     trailing: {
@@ -357,10 +366,10 @@ const input = {
       padding: {
         '2xs': 'pr-2',
         xs: 'pr-2.5',
-        sm: 'pr-3',
+        sm: 'pr-2.5',
         md: 'pr-3',
-        lg: 'pr-4',
-        xl: 'pr-4'
+        lg: 'pr-3.5',
+        xl: 'pr-3.5'
       }
     }
   },
@@ -418,7 +427,7 @@ const selectMenu = {
   rounded: 'rounded-md',
   padding: 'p-1',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
-  input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500',
+  input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none',
   option: {
     base: 'cursor-default select-none relative flex items-center justify-between gap-1',
     rounded: 'rounded-md',
@@ -464,15 +473,19 @@ const selectMenu = {
 
 const radio = {
   wrapper: 'relative flex items-start',
-  base: 'h-4 w-4 text-primary-500 dark:text-primary-400 focus-visible:ring-2 focus-visible:ring-offset-2 bg-white dark:bg-gray-900 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 border-gray-300 dark:border-gray-700 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  base: 'h-4 w-4 text-primary-500 dark:text-primary-400 focus-visible:ring-2 focus-visible:ring-offset-2 bg-white dark:bg-gray-900 dark:checked:bg-current dark:checked:border-transparent focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 border-gray-300 dark:border-gray-700 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
   label: 'font-medium text-gray-700 dark:text-gray-200',
   required: 'text-red-500 dark:text-red-400',
   help: 'text-gray-500 dark:text-gray-400'
 }
 
 const checkbox = {
-  ...radio,
-  base: radio.base + ' rounded'
+  wrapper: 'relative flex items-start',
+  base: 'h-4 w-4 text-primary-500 dark:text-primary-400 focus-visible:ring-2 focus-visible:ring-offset-2 bg-white dark:bg-gray-900 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 border-gray-300 dark:border-gray-700 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  rounded: 'rounded',
+  label: 'font-medium text-gray-700 dark:text-gray-200',
+  required: 'text-red-500 dark:text-red-400',
+  help: 'text-gray-500 dark:text-gray-400'
 }
 
 const toggle = {
@@ -570,7 +583,7 @@ const commandPalette = {
   container: 'relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
   input: {
     wrapper: 'relative flex items-center',
-    base: 'w-full placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0',
+    base: 'w-full placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 focus:outline-none',
     padding: 'px-4',
     height: 'h-12',
     size: 'sm:text-sm',
@@ -633,6 +646,29 @@ const commandPalette = {
   }
 }
 
+const pagination = {
+  wrapper: 'flex items-center -space-x-px',
+  base: '',
+  rounded: 'first:rounded-l-md last:rounded-r-md',
+  default: {
+    size: 'sm',
+    activeButton: {
+      color: 'primary'
+    },
+    inactiveButton: {
+      color: 'white'
+    },
+    prevButton: {
+      color: 'white',
+      icon: 'i-heroicons-chevron-left-20-solid'
+    },
+    nextButton: {
+      color: 'white',
+      icon: 'i-heroicons-chevron-right-20-solid'
+    }
+  }
+}
+
 // Overlays
 
 const modal = {
@@ -775,7 +811,7 @@ const notification = {
   padding: 'p-4',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
   icon: {
-    base: 'flex-shrink-0 w-5 h-5 text-gray-400 dark:text-gray-500',
+    base: 'flex-shrink-0 w-5 h-5',
     color: 'text-{color}-500 dark:text-{color}-400'
   },
   avatar: {
@@ -840,6 +876,7 @@ export default {
     skeleton,
     verticalNavigation,
     commandPalette,
+    pagination,
     modal,
     slideover,
     popover,

src/runtime/components/data/Table.vue

@@ -34,14 +34,29 @@
           </td>
         </tr>
 
-        <tr v-if="emptyState && !rows.length">
-          <td :colspan="columns.length">
-            <div :class="ui.emptyState.wrapper">
-              <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
-              <p :class="ui.emptyState.label">
-                {{ emptyState.label }}
-              </p>
-            </div>
+        <tr v-if="loadingState && loading">
+          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+            <slot name="loading-state">
+              <div :class="ui.loadingState.wrapper">
+                <UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="ui.loadingState.icon" aria-hidden="true" />
+                <p :class="ui.loadingState.label">
+                  {{ loadingState.label }}
+                </p>
+              </div>
+            </slot>
+          </td>
+        </tr>
+
+        <tr v-else-if="emptyState && !rows.length">
+          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+            <slot name="empty-state">
+              <div :class="ui.emptyState.wrapper">
+                <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
+                <p :class="ui.emptyState.label">
+                  {{ emptyState.label }}
+                </p>
+              </div>
+            </slot>
           </td>
         </tr>
       </tbody>
@@ -104,6 +119,14 @@ export default defineComponent({
       type: String,
       default: () => appConfig.ui.table.default.sortDescIcon
     },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingState: {
+      type: Object as PropType<{ icon: string, label: string }>,
+      default: () => appConfig.ui.table.default.loadingState
+    },
     emptyState: {
       type: Object as PropType<{ icon: string, label: string }>,
       default: () => appConfig.ui.table.default.emptyState

src/runtime/components/elements/ButtonGroup.ts

@@ -15,7 +15,7 @@ export default defineComponent({
       type: String,
       default: null,
       validator (value: string) {
-        return Object.keys(appConfig.ui.avatar.size).includes(value)
+        return Object.keys(appConfig.ui.button.size).includes(value)
       }
     },
     ui: {
@@ -59,10 +59,6 @@ export default defineComponent({
         vProps.ui.rounded = rounded.value.left
       }
 
-      if (index > 0) {
-        vProps.class += ' -ml-px'
-      }
-
       if (index === children.value.length - 1) {
         vProps.ui.rounded = rounded.value.right
       }

src/runtime/components/elements/Dropdown.vue

@@ -17,7 +17,7 @@
 
     <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <transition appear v-bind="ui.transition">
-        <MenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background]" static>
+        <MenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
           <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
             <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
               <ULinkCustom
@@ -50,11 +50,11 @@ import type { PropType } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { defineComponent, ref, computed, onMounted } from 'vue'
 import { defu } from 'defu'
+import { omit } from 'lodash-es'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UKbd from '../elements/Kbd.vue'
 import ULinkCustom from '../elements/LinkCustom.vue'
-import { omit } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
 import type { Avatar } from '../../types/avatar'
 import type { PopperOptions } from '../../types'

src/runtime/components/forms/Checkbox.vue

@@ -11,7 +11,9 @@
         :checked="checked"
         :indeterminate="indeterminate"
         type="checkbox"
-        :class="[ui.base, ui.custom]"
+        class="form-checkbox"
+        :class="[ui.base, ui.rounded, ui.custom]"
+        v-bind="$attrs"
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
       >
@@ -40,6 +42,7 @@ import appConfig from '#build/app.config'
 // const appConfig = useAppConfig()
 
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     value: {
       type: [String, Number, Boolean, Object],

src/runtime/components/forms/Input.vue

@@ -9,10 +9,9 @@
       :required="required"
       :placeholder="placeholder"
       :disabled="disabled || loading"
-      :readonly="readonly"
-      :autocomplete="autocomplete"
-      :spellcheck="spellcheck"
+      class="form-input"
       :class="inputClass"
+      v-bind="$attrs"
       @input="onInput"
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
@@ -50,6 +49,7 @@ export default defineComponent({
   components: {
     UIcon
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number],
@@ -75,22 +75,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
     autofocus: {
       type: Boolean,
       default: false
     },
-    autocomplete: {
-      type: String,
-      default: null
-    },
-    spellcheck: {
-      type: Boolean,
-      default: null
-    },
     icon: {
       type: String,
       default: null
@@ -185,11 +173,10 @@ export default defineComponent({
         ui.value.rounded,
         ui.value.placeholder,
         ui.value.size[props.size],
-        props.padded && ui.value.padding[props.size],
+        props.padded ? ui.value.padding[props.size] : 'p-0',
         variant?.replaceAll('{color}', props.color),
         (isLeading.value || slots.leading) && ui.value.leading.padding[props.size],
-        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size],
-        ui.value.custom
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size]
       )
     })
 

src/runtime/components/forms/Radio.vue

@@ -9,7 +9,9 @@
         :value="value"
         :disabled="disabled"
         type="radio"
+        class="form-radio"
         :class="[ui.base, ui.custom]"
+        v-bind="$attrs"
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
       >
@@ -38,6 +40,7 @@ import appConfig from '#build/app.config'
 // const appConfig = useAppConfig()
 
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     value: {
       type: [String, Number, Boolean],

src/runtime/components/forms/Select.vue

@@ -6,7 +6,9 @@
       :value="modelValue"
       :required="required"
       :disabled="disabled || loading"
+      class="form-select"
       :class="selectClass"
+      v-bind="$attrs"
       @input="onInput"
     >
       <template v-for="(option, index) in normalizedOptionsWithPlaceholder">
@@ -14,7 +16,7 @@
           v-if="option.children"
           :key="`${option[valueAttribute]}-optgroup-${index}`"
           :value="option[valueAttribute]"
-          :label="option[textAttribute]"
+          :label="option[optionAttribute]"
         >
           <option
             v-for="(childOption, index2) in option.children"
@@ -22,7 +24,7 @@
             :value="childOption[valueAttribute]"
             :selected="childOption[valueAttribute] === normalizedValue"
             :disabled="childOption.disabled"
-            v-text="childOption[textAttribute]"
+            v-text="childOption[optionAttribute]"
           />
         </optgroup>
         <option
@@ -31,7 +33,7 @@
           :value="option[valueAttribute]"
           :selected="option[valueAttribute] === normalizedValue"
           :disabled="option.disabled"
-          v-text="option[textAttribute]"
+          v-text="option[optionAttribute]"
         />
       </template>
     </select>
@@ -68,6 +70,7 @@ export default defineComponent({
   components: {
     UIcon
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number, Object],
@@ -149,9 +152,9 @@ export default defineComponent({
         ].includes(value)
       }
     },
-    textAttribute: {
+    optionAttribute: {
       type: String,
-      default: 'text'
+      default: 'label'
     },
     valueAttribute: {
       type: String,
@@ -174,25 +177,25 @@ export default defineComponent({
     }
 
     const guessOptionValue = (option: any) => {
-      return get(option, props.valueAttribute, get(option, props.textAttribute))
+      return get(option, props.valueAttribute, get(option, props.optionAttribute))
     }
 
     const guessOptionText = (option: any) => {
-      return get(option, props.textAttribute, get(option, props.valueAttribute))
+      return get(option, props.optionAttribute, get(option, props.valueAttribute))
     }
 
     const normalizeOption = (option: any) => {
       if (['string', 'number', 'boolean'].includes(typeof option)) {
         return {
           [props.valueAttribute]: option,
-          [props.textAttribute]: option
+          [props.optionAttribute]: option
         }
       }
 
       return {
         ...option,
         [props.valueAttribute]: guessOptionValue(option),
-        [props.textAttribute]: guessOptionText(option)
+        [props.optionAttribute]: guessOptionText(option)
       }
     }
 
@@ -208,7 +211,7 @@ export default defineComponent({
       return [
         {
           [props.valueAttribute]: '',
-          [props.textAttribute]: props.placeholder,
+          [props.optionAttribute]: props.placeholder,
           disabled: true
         },
         ...normalizedOptions.value
@@ -232,11 +235,10 @@ export default defineComponent({
         ui.value.base,
         ui.value.rounded,
         ui.value.size[props.size],
-        props.padded && ui.value.padding[props.size],
+        props.padded ? ui.value.padding[props.size] : 'p-0',
         variant?.replaceAll('{color}', props.color),
         (isLeading.value || slots.leading) && ui.value.leading.padding[props.size],
-        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size],
-        ui.value.custom
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size]
       )
     })
 

src/runtime/components/forms/SelectMenu.vue

@@ -28,7 +28,7 @@
       class="inline-flex w-full"
     >
       <slot :open="open" :disabled="disabled" :loading="loading">
-        <button :class="selectMenuClass" :disabled="disabled || loading" type="button">
+        <button :class="selectMenuClass" :disabled="disabled || loading" type="button" v-bind="$attrs">
           <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
             <slot name="leading" :disabled="disabled" :loading="loading">
               <UIcon :name="leadingIconName" :class="leadingIconClass" />
@@ -146,6 +146,7 @@ export default defineComponent({
     UIcon,
     UAvatar
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number, Object, Array],
@@ -296,11 +297,10 @@ export default defineComponent({
         'text-left cursor-default',
         uiSelect.value.size[props.size],
         uiSelect.value.gap[props.size],
-        props.padded && uiSelect.value.padding[props.size],
+        props.padded ? uiSelect.value.padding[props.size] : 'p-0',
         variant?.replaceAll('{color}', props.color),
         (isLeading.value || slots.leading) && uiSelect.value.leading.padding[props.size],
         (isTrailing.value || slots.trailing) && uiSelect.value.trailing.padding[props.size],
-        uiSelect.value.custom,
         'inline-flex items-center'
       )
     })

src/runtime/components/forms/Textarea.vue

@@ -9,8 +9,9 @@
       :required="required"
       :disabled="disabled"
       :placeholder="placeholder"
-      :autocomplete="autocomplete"
+      class="form-textarea"
       :class="textareaClass"
+      v-bind="$attrs"
       @input="onInput"
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
@@ -31,6 +32,7 @@ import appConfig from '#build/app.config'
 // const appConfig = useAppConfig()
 
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number],
@@ -64,10 +66,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    autocomplete: {
-      type: String,
-      default: null
-    },
     resize: {
       type: Boolean,
       default: false
@@ -167,10 +165,9 @@ export default defineComponent({
         ui.value.rounded,
         ui.value.placeholder,
         ui.value.size[props.size],
-        props.padded && ui.value.padding[props.size],
+        props.padded ? ui.value.padding[props.size] : 'p-0',
         variant?.replaceAll('{color}', props.color),
-        !props.resize && 'resize-none',
-        ui.value.custom
+        !props.resize && 'resize-none'
       )
     })
 

src/runtime/components/forms/Toggle.vue

@@ -2,6 +2,7 @@
   <Switch
     v-model="active"
     :name="name"
+    :disabled="disabled"
     :class="[active ? ui.active : ui.inactive, ui.base]"
   >
     <span :class="[active ? ui.container.active : ui.container.inactive, ui.container.base]">
@@ -43,6 +44,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     onIcon: {
       type: String,
       default: () => appConfig.ui.toggle.default.onIcon

src/runtime/components/navigation/CommandPalette.vue

@@ -51,12 +51,16 @@
         </CommandPaletteGroup>
       </ComboboxOptions>
 
-      <div v-else-if="emptyState" :class="ui.emptyState.wrapper">
-        <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
-        <p :class="query ? ui.emptyState.queryLabel : ui.emptyState.label">
-          {{ query ? emptyState.queryLabel : emptyState.label }}
-        </p>
-      </div>
+      <template v-else-if="emptyState">
+        <slot name="empty-state">
+          <div :class="ui.emptyState.wrapper">
+            <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
+            <p :class="query ? ui.emptyState.queryLabel : ui.emptyState.label">
+              {{ query ? emptyState.queryLabel : emptyState.label }}
+            </p>
+          </div>
+        </slot>
+      </template>
     </div>
   </Combobox>
 </template>

src/runtime/components/navigation/Pagination.vue

@@ -0,0 +1,218 @@
+<template>
+  <div :class="ui.wrapper">
+    <slot name="prev" :on-click="onClickPrev">
+      <UButton
+        v-if="prevButton"
+        :size="size"
+        :disabled="!canGoPrev"
+        :class="[ui.base, ui.rounded]"
+        v-bind="{ ...ui.default.prevButton, ...prevButton }"
+        :ui="{ rounded: '' }"
+        @click="onClickPrev"
+      />
+    </slot>
+
+    <UButton
+      v-for="(page, index) of displayedPages"
+      :key="index"
+      :size="size"
+      :label="`${page}`"
+      v-bind="page === currentPage ? { ...ui.default.activeButton, ...activeButton } : { ...ui.default.inactiveButton, ...inactiveButton }"
+      :class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
+      :ui="{ rounded: '' }"
+      @click="() => onClickPage(page)"
+    />
+
+    <slot name="next" :on-click="onClickNext">
+      <UButton
+        v-if="nextButton"
+        :size="size"
+        :disabled="!canGoNext"
+        :class="[ui.base, ui.rounded]"
+        v-bind="{ ...ui.default.nextButton, ...nextButton }"
+        :ui="{ rounded: '' }"
+        @click="onClickNext"
+      />
+    </slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
+import UButton from '../elements/Button.vue'
+import type { Button } from '../../types/button'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
+
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  components: {
+    UButton
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      required: true
+    },
+    pageCount: {
+      type: Number,
+      default: 10
+    },
+    total: {
+      type: Number,
+      required: true
+    },
+    max: {
+      type: Number,
+      default: 7,
+      validate (value) {
+        return value >= 7 && value < Number.MAX_VALUE
+      }
+    },
+    size: {
+      type: String,
+      default: () => appConfig.ui.pagination.default.size,
+      validator (value: string) {
+        return Object.keys(appConfig.ui.button.size).includes(value)
+      }
+    },
+    activeButton: {
+      type: Object as PropType<Partial<Button>>,
+      default: () => appConfig.ui.pagination.default.activeButton
+    },
+    inactiveButton: {
+      type: Object as PropType<Partial<Button>>,
+      default: () => appConfig.ui.pagination.default.inactiveButton
+    },
+    prevButton: {
+      type: Object as PropType<Partial<Button>>,
+      default: () => appConfig.ui.pagination.default.prevButton
+    },
+    nextButton: {
+      type: Object as PropType<Partial<Button>>,
+      default: () => appConfig.ui.pagination.default.nextButton
+    },
+    divider: {
+      type: String,
+      default: '…'
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.pagination>>,
+      default: () => appConfig.ui.pagination
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit }) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.pagination>>(() => defu({}, props.ui, appConfig.ui.pagination))
+
+    const currentPage = computed({
+      get () {
+        return props.modelValue
+      },
+      set (value) {
+        emit('update:modelValue', value)
+      }
+    })
+
+    const pages = computed(() => Array.from({ length: Math.ceil(props.total / props.pageCount) }, (_, i) => i + 1))
+
+    const displayedPages = computed(() => {
+      if (!props.max || pages.value.length <= 5) {
+        return pages.value
+      } else {
+        const current = currentPage.value
+        const max = pages.value.length
+        const r = Math.floor((Math.min(props.max, max) - 5) / 2)
+        const r1 = current - r
+        const r2 = current + r
+        const beforeWrapped = r1 - 1 > 1
+        const afterWrapped = r2 + 1 < max
+        const items: Array<number | string> = [1]
+
+        if (beforeWrapped) items.push(props.divider)
+
+        if (!afterWrapped) {
+          const addedItems = (current + r + 2) - max
+          for (let i = current - r - addedItems; i <= current - r - 1; i++) {
+            items.push(i)
+          }
+        }
+
+        for (let i = r1 > 2 ? (r1) : 2; i <= Math.min(max, r2); i++) {
+          items.push(i)
+        }
+
+        if (!beforeWrapped) {
+          const addedItems = 1 - (current - r - 2)
+          for (let i = current + r + 1; i <= current + r + addedItems; i++) {
+            items.push(i)
+          }
+        }
+
+        if (afterWrapped) items.push(props.divider)
+
+        if (r2 < max) items.push(max)
+
+        // Replace divider by number on start edge case [1, '…', 3, ...]
+        if (items.length >= 3 && items[1] === props.divider && items[2] === 3) {
+          items[1] = 2
+        }
+        // Replace divider by number on end edge case [..., 48, '…', 50]
+        if (items.length >= 3 && items[items.length - 2] === props.divider && items[items.length - 1] === items.length) {
+          items[items.length - 2] = items.length - 1
+        }
+
+        return items
+      }
+    })
+
+    const canGoPrev = computed(() => currentPage.value > 1)
+    const canGoNext = computed(() => currentPage.value < pages.value.length)
+
+    function onClickPage (page: number | string) {
+      if (typeof page === 'string') {
+        return
+      }
+
+      currentPage.value = page
+    }
+
+    function onClickPrev () {
+      if (!canGoPrev.value) {
+        return
+      }
+
+      currentPage.value--
+    }
+
+    function onClickNext () {
+      if (!canGoNext.value) {
+        return
+      }
+
+      currentPage.value++
+    }
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      currentPage,
+      pages,
+      displayedPages,
+      canGoPrev,
+      canGoNext,
+      onClickPrev,
+      onClickNext,
+      onClickPage
+    }
+  }
+})
+</script>

src/runtime/components/navigation/VerticalNavigation.vue

@@ -42,10 +42,10 @@ import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { defu } from 'defu'
+import { omit } from 'lodash-es'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import ULinkCustom from '../elements/LinkCustom.vue'
-import { omit } from '../../utils'
 import type { Avatar } from '../../types/avatar'
 import { useAppConfig } from '#imports'
 // TODO: Remove

src/runtime/components/overlays/Notification.vue

@@ -134,7 +134,7 @@ export default defineComponent({
     const iconClass = computed(() => {
       return classNames(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(props.color) && ui.value.icon.color?.replaceAll('{color}', props.color)
+        ui.value.icon.color?.replaceAll('{color}', props.color)
       )
     })
 

src/runtime/plugins/colors.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { hexToRgb } from '../utils/colors'
+import { hexToRgb } from '../utils'
 import { defineNuxtPlugin, useHead, useAppConfig, useNuxtApp } from '#imports'
 import colors from '#tailwind-config/theme/colors'
 

src/runtime/utils/colors.ts

@@ -1,32 +0,0 @@
-import { omit, kebabCase } from './index'
-
-export const colorsToExclude = [
-  'inherit',
-  'transparent',
-  'current',
-  'white',
-  'black',
-  'slate',
-  'gray',
-  'zinc',
-  'neutral',
-  'stone',
-  'cool'
-]
-
-export const excludeColors = (colors: object) => Object.keys(omit(colors, colorsToExclude)).map(color => kebabCase(color)) as string[]
-
-export const colorsAsRegex = (colors: string[]): string => colors.join('|')
-
-export const hexToRgb = (hex) => {
-  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
-  hex = hex.replace(shorthandRegex, function (_, r, g, b) {
-    return r + r + g + g + b + b
-  })
-
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result
-    ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
-    : null
-}

src/runtime/utils/index.ts

@@ -2,30 +2,34 @@ export function classNames (...classes: any[string]) {
   return classes.filter(Boolean).join(' ')
 }
 
-export const kebabCase = (str: string) => {
-  return str
-    ?.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
-    ?.map(x => x.toLowerCase())
-    ?.join('-')
-}
+export const hexToRgb = (hex) => {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  hex = hex.replace(shorthandRegex, function (_, r, g, b) {
+    return r + r + g + g + b + b
+  })
 
-export const omit = (obj: object, keys: string[]) => {
-  return Object.fromEntries(
-    Object.entries(obj).filter(([key]) => !keys.includes(key))
-  )
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
+    : null
 }
 
 export const getSlotsChildren = (slots: any) => {
   let children = slots.default?.()
   if (children.length) {
-    if (typeof children[0].type === 'symbol') {
-      // @ts-ignore-next
-      children = children[0].children
-      // @ts-ignore-next
-    } else if (children[0].type.name === 'ContentSlot') {
-      // @ts-ignore-next
-      children = children[0].ctx.slots.default?.()
-    }
+    children = children.flatMap(c => {
+      if (typeof c.type === 'symbol') {
+        if (typeof c.children === 'string') {
+          // `v-if="false"` or commented node
+          return
+        }
+        return c.children
+      } else if (c.type.name === 'ContentSlot') {
+        return c.ctx.slots.default?.()
+      }
+      return c
+    }).filter(Boolean)
   }
   return children
 }