chore(release): v2.18.6

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.18.6](https://github.com/nuxt/ui/compare/v2.18.5...v2.18.6) (2024-09-23)
+
+
+### Bug Fixes
+
+* **components:** accept partial config in `ui` prop ([#2235](https://github.com/nuxt/ui/issues/2235)) ([eecf4f7](https://github.com/nuxt/ui/commit/eecf4f7ed8a32a874f00afd7bff2964a1366e0b5))
+* **Modal/Slideover:** bind transition class to `TransitionChild` for Vue 3.5 ([#2227](https://github.com/nuxt/ui/issues/2227)) ([803c20a](https://github.com/nuxt/ui/commit/803c20ad92e8a31fefd6d300856735b0e9adbdf9))
+* **SelectMenu:** wrong placeholder color with multiple ([#2218](https://github.com/nuxt/ui/issues/2218)) ([28ad5cf](https://github.com/nuxt/ui/commit/28ad5cf98251c6a8acec8d0bf4f0fd07ff6b7066))
+* **Table:** colspan with expand ([#2217](https://github.com/nuxt/ui/issues/2217)) ([56118c4](https://github.com/nuxt/ui/commit/56118c4a794f3d763dad7b65e044814cf7ef11cf))
+* **Tabs:** handle icon `margin` in RTL mode ([#2233](https://github.com/nuxt/ui/issues/2233)) ([ea05414](https://github.com/nuxt/ui/commit/ea05414930fe3f5e6805c8aa25bbe8f746bcc86e))
+* **useFormField:** optional property access ([#2226](https://github.com/nuxt/ui/issues/2226)) ([0a054a5](https://github.com/nuxt/ui/commit/0a054a52b64b4f774041c40223e18e7e056cfd80))
+
 ## [2.18.5](https://github.com/nuxt/ui/compare/v2.18.4...v2.18.5) (2024-09-18)
 
 

docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue

@@ -45,7 +45,7 @@ const ui = {
         inactive: 'text-gray-400 dark:text-gray-500'
       },
       avatar: {
-        size: '2xs'
+        size: '2xs' as const
       }
     }
   }

docs/components/content/examples/TableExampleAdvanced.vue

@@ -186,7 +186,7 @@ const { data: todos, status } = await useLazyAsyncData<{
       sort-desc-icon="i-heroicons-arrow-down"
       sort-mode="manual"
       class="w-full"
-      :ui="{ td: { base: 'max-w-[0] truncate' }, default: { checkbox: { color: 'gray' } } }"
+      :ui="{ td: { base: 'max-w-[0] truncate' }, default: { checkbox: { color: 'gray' as any } } }"
       @select="select"
     >
       <template #completed-data="{ row }">

docs/components/content/examples/TabsExampleIconSlot.vue

@@ -17,7 +17,7 @@ const items = [{
 <template>
   <UTabs :items="items" class="w-full">
     <template #icon="{ item, selected }">
-      <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0 mr-2" :class="[selected && 'text-primary-500 dark:text-primary-400']" />
+      <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0 me-2" :class="[selected && 'text-primary-500 dark:text-primary-400']" />
     </template>
   </UTabs>
 </template>

docs/content/2.components/table.md

@@ -30,7 +30,19 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 - `direction` - The sort direction to use on first click. Defaults to `asc`.
 - `class` - The class to apply to the column cells.
 - `rowClass` - The class to apply to the data column cells. :u-badge{label="New" class="!rounded-full" variant="subtle"}
-- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
+- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison. 
+
+Arguments for the `sort` function are: Value A, Value B, Direction - 'asc' or 'desc'
+
+Example `sort` function:
+```
+(a, b, direction) => {
+  if (!a || !b) return 0
+  const aPrice = parseInt(a.replace(/[,$]/g, ""))
+  const bPrice = parseInt(b.replace(/[,$]/g, ""))
+  return direction === "asc" ? aPrice - bPrice : bPrice - aPrice
+}
+```
 
 ::component-example{class="grid"}
 ---

docs/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "dependencies": {
     "@iconify-json/heroicons": "^1.2.0",
-    "@iconify-json/simple-icons": "^1.2.3",
+    "@iconify-json/simple-icons": "^1.2.4",
     "@iconify-json/vscode-icons": "^1.2.2",
     "@nuxt/content": "^2.13.2",
     "@nuxt/eslint-config": "^0.4.0",
@@ -25,7 +25,7 @@
     "prettier": "^3.3.3",
     "ufo": "^1.5.4",
     "v-calendar": "^3.1.2",
-    "valibot": "^0.42.0",
+    "valibot": "^0.42.1",
     "yup": "^1.4.0",
     "zod": "^3.23.8"
   }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "2.18.5",
-  "packageManager": "pnpm@9.10.0",
+  "version": "2.18.6",
+  "packageManager": "pnpm@9.11.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -26,7 +26,7 @@
     "build:docs": "nuxi generate docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit && nuxi typecheck docs",
+    "typecheck": "vue-tsc --noEmit",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare docs",
     "release": "release-it",
     "test": "vitest"
@@ -67,7 +67,7 @@
     "nuxt": "^3.13.2",
     "release-it": "^17.6.0",
     "unbuild": "^2.0.0",
-    "valibot": "^0.42.0",
+    "valibot": "^0.42.1",
     "valibot30": "npm:valibot@0.30.0",
     "valibot31": "npm:valibot@0.31.0",
     "vitest": "^2.1.1",

src/runtime/components/data/Table.vue

@@ -44,7 +44,7 @@
       </thead>
       <tbody :class="ui.tbody">
         <tr v-if="loadingState && loading && !rows.length">
-          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+          <td :colspan="columns.length + (modelValue ? 1 : 0) + ($slots.expand ? 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" />
@@ -57,7 +57,7 @@
         </tr>
 
         <tr v-else-if="emptyState && !rows.length">
-          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+          <td :colspan="columns.length + (modelValue ? 1 : 0) + ($slots.expand ? 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" />
@@ -82,7 +82,7 @@
               >
                 <UButton
                   v-bind="{ ...(ui.default.expandButton || {}), ...expandButton }"
-                  :ui="{ icon: { base: [ui.expand.icon, openedRows.includes(index) && 'rotate-180'] } }"
+                  :ui="{ icon: { base: [ui.expand.icon, openedRows.includes(index) && 'rotate-180'].join(' ') } }"
                   @click="toggleOpened(index)"
                 />
               </td>
@@ -121,7 +121,7 @@ import UProgress from '../elements/Progress.vue'
 import UCheckbox from '../forms/Checkbox.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, get } from '../../utils'
-import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types/index'
+import type { Strategy, Button, ProgressColor, ProgressAnimation, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { table } from '#ui/ui.config'
@@ -232,7 +232,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Accordion.vue

@@ -73,7 +73,7 @@ import UIcon from '../elements/Icon.vue'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, omit } from '../../utils'
-import type { AccordionItem, Strategy } from '../../types/index'
+import type { AccordionItem, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { accordion, button } from '#ui/ui.config'
@@ -122,7 +122,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Alert.vue

@@ -47,7 +47,7 @@ import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
-import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types/index'
+import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy, DeepPartial } from '../../types/index'
 import { mergeConfig } from '../../utils'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -109,7 +109,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Avatar.vue

@@ -27,7 +27,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types/index'
+import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { avatar } from '#ui/ui.config'
@@ -94,7 +94,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Badge.vue

@@ -11,7 +11,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types/index'
+import type { BadgeColor, BadgeSize, BadgeVariant, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { badge } from '#ui/ui.config'
@@ -54,7 +54,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Button.vue

@@ -25,7 +25,7 @@ import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types/index'
+import type { ButtonColor, ButtonSize, ButtonVariant, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { button } from '#ui/ui.config'
@@ -125,7 +125,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Carousel.vue

@@ -61,7 +61,7 @@ import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import { mergeConfig } from '../../utils'
 import UButton from '../elements/Button.vue'
-import type { Strategy, Button } from '../../types/index'
+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'
@@ -102,7 +102,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<DeepPartial<typeof config & { strategy?: Strategy }>>,
       default: undefined
     }
   },

src/runtime/components/elements/Chip.vue

@@ -16,7 +16,7 @@ import type { PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { ChipSize, ChipColor, ChipPosition, Strategy } from '../../types/index'
+import type { ChipSize, ChipColor, ChipPosition, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { chip } from '#ui/ui.config'
@@ -64,7 +64,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Dropdown.vue

@@ -67,7 +67,7 @@ import UKbd from '../elements/Kbd.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig, getNuxtLinkProps } from '../../utils'
-import type { DropdownItem, PopperOptions, Strategy } from '../../types/index'
+import type { DeepPartial, DropdownItem, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { dropdown } from '#ui/ui.config'
@@ -121,7 +121,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Kbd.vue

@@ -10,7 +10,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { KbdSize, Strategy } from '../../types/index'
+import type { DeepPartial, KbdSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { kbd } from '#ui/ui.config'
@@ -36,7 +36,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Meter.vue

@@ -34,7 +34,7 @@ import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy, MeterColor, MeterSize } from '../../types/index'
+import type { Strategy, MeterColor, MeterSize, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { meter } from '#ui/ui.config'
@@ -94,7 +94,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Progress.vue

@@ -33,7 +33,7 @@ import type { PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy, ProgressSize, ProgressAnimation, ProgressColor } from '../../types/index'
+import type { Strategy, ProgressSize, ProgressAnimation, ProgressColor, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { progress } from '#ui/ui.config'
@@ -81,7 +81,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/Checkbox.vue

@@ -36,7 +36,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { checkbox } from '#ui/ui.config'
@@ -100,7 +100,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/FormGroup.vue

@@ -44,7 +44,7 @@ import { computed, defineComponent, provide, inject, ref, toRef } from 'vue'
 import type { Ref, PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { FormError, InjectedFormGroupValue, FormGroupSize, Strategy } from '../../types/index'
+import type { FormError, InjectedFormGroupValue, FormGroupSize, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { formGroup } from '#ui/ui.config'
@@ -95,7 +95,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     eagerValidation: {

src/runtime/components/forms/Input.vue

@@ -40,7 +40,7 @@ import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, looseToNumber } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { InputSize, InputColor, InputVariant, Strategy } from '../../types/index'
+import type { InputSize, InputColor, InputVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { input } from '#ui/ui.config'
@@ -154,7 +154,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     modelModifiers: {

src/runtime/components/forms/InputMenu.vue

@@ -111,7 +111,7 @@ import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { get, mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy } from '../../types/index'
+import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { input, inputMenu } from '#ui/ui.config'
@@ -270,11 +270,11 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     uiMenu: {
-      type: Object as PropType<Partial<typeof configMenu> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof configMenu> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/Radio.vue

@@ -35,7 +35,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radio } from '#ui/ui.config'
@@ -95,7 +95,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/RadioGroup.vue

@@ -36,7 +36,7 @@ import type { PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radioGroup, radio } from '#ui/ui.config'
@@ -91,11 +91,11 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     uiRadio: {
-      type: Object as PropType<Partial<typeof configRadio> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof configRadio> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/Range.vue

@@ -26,7 +26,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { RangeSize, RangeColor, Strategy } from '../../types/index'
+import type { RangeSize, RangeColor, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { range } from '#ui/ui.config'
@@ -87,7 +87,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/Select.vue

@@ -61,7 +61,7 @@ import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types/index'
+import type { SelectSize, SelectColor, SelectVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { select } from '#ui/ui.config'
@@ -175,7 +175,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/forms/SelectMenu.vue

@@ -147,7 +147,7 @@ import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { get, mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy } from '../../types/index'
+import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { select, selectMenu } from '#ui/ui.config'
@@ -326,11 +326,11 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     uiMenu: {
-      type: Object as PropType<Partial<typeof configMenu> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof configMenu> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -412,7 +412,7 @@ export default defineComponent({
         variant?.replaceAll('{color}', color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
         (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass)
+      ), props.placeholder && (!props.modelValue || (Array.isArray(props.modelValue) && !props.modelValue.length)) && ui.value.placeholder, props.selectClass)
     })
 
     const isLeading = computed(() => {

src/runtime/components/forms/Textarea.vue

@@ -28,7 +28,7 @@ import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, looseToNumber } from '../../utils'
-import type { TextareaSize, TextareaColor, TextareaVariant, Strategy } from '../../types/index'
+import type { TextareaSize, TextareaColor, TextareaVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { textarea } from '#ui/ui.config'
@@ -123,7 +123,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     },
     modelModifiers: {

src/runtime/components/forms/Toggle.vue

@@ -38,7 +38,7 @@ import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { ToggleSize, ToggleColor, Strategy } from '../../types/index'
+import type { ToggleSize, ToggleColor, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { toggle } from '#ui/ui.config'
@@ -104,7 +104,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/layout/Card.vue

@@ -22,7 +22,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { card } from '#ui/ui.config'
@@ -41,7 +41,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/layout/Container.vue

@@ -10,7 +10,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { container } from '#ui/ui.config'
@@ -29,7 +29,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/layout/Divider.vue

@@ -26,7 +26,7 @@ import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Avatar, DividerSize, Strategy } from '../../types/index'
+import type { Avatar, DeepPartial, DividerSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { divider } from '#ui/ui.config'
@@ -74,7 +74,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/layout/Skeleton.vue

@@ -8,7 +8,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { skeleton } from '#ui/ui.config'
@@ -27,7 +27,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/Breadcrumb.vue

@@ -41,7 +41,7 @@ import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
-import type { BreadcrumbLink, Strategy } from '../../types/index'
+import type { BreadcrumbLink, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { breadcrumb } from '#ui/ui.config'
@@ -68,7 +68,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/CommandPalette.vue

@@ -75,7 +75,7 @@ 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 } from '../../types/index'
+import type { Group, Command, Button, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { commandPalette } from '#ui/ui.config'
@@ -175,7 +175,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/HorizontalNavigation.vue

@@ -61,7 +61,7 @@ import UBadge from '../elements/Badge.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
-import type { HorizontalNavigationLink, Strategy } from '../../types/index'
+import type { DeepPartial, HorizontalNavigationLink, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { horizontalNavigation } from '#ui/ui.config'
@@ -86,7 +86,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/Pagination.vue

@@ -78,7 +78,7 @@ 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, Strategy } from '../../types/index'
+import type { Button, ButtonSize, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { pagination, button } from '#ui/ui.config'
@@ -168,7 +168,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/Tabs.vue

@@ -60,7 +60,7 @@ import { useResizeObserver } from '@vueuse/core'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { TabItem, Strategy } from '../../types/index'
+import type { TabItem, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tabs } from '#ui/ui.config'
@@ -109,7 +109,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/navigation/VerticalNavigation.vue

@@ -63,7 +63,7 @@ import ULink from '../elements/Link.vue'
 import UDivider from '../layout/Divider.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
-import type { VerticalNavigationLink, Strategy } from '../../types/index'
+import type { VerticalNavigationLink, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { verticalNavigation } from '#ui/ui.config'
@@ -89,7 +89,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/overlays/ContextMenu.vue

@@ -22,7 +22,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig } from '../../utils'
-import type { PopperOptions, Strategy } from '../../types/index'
+import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { contextMenu } from '#ui/ui.config'
@@ -49,7 +49,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/overlays/Modal.vue

@@ -1,13 +1,13 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template" @after-leave="onAfterLeave">
     <HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition" :class="ui.overlay.transition.enterFrom">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
 
       <div :class="ui.inner">
         <div :class="[ui.container, !fullscreen && ui.padding]">
-          <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
+          <TransitionChild as="template" :appear="appear" v-bind="transitionClass" :class="transitionClass.enterFrom">
             <HDialogPanel
               :class="[
                 ui.base,
@@ -32,7 +32,7 @@ import type { PropType } from 'vue'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { modal } from '#ui/ui.config'
@@ -78,7 +78,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -97,7 +97,7 @@ export default defineComponent({
 
     const transitionClass = computed(() => {
       if (!props.transition) {
-        return {}
+        return {} as typeof ui.value.transition
       }
 
       return {

src/runtime/components/overlays/Notification.vue

@@ -52,7 +52,7 @@ import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { useTimer } from '../../composables/useTimer'
 import { mergeConfig } from '../../utils'
-import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types/index'
+import type { Avatar, Button, NotificationColor, NotificationAction, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { notification } from '#ui/ui.config'
@@ -115,7 +115,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/overlays/Notifications.vue

@@ -27,7 +27,7 @@ import UNotification from './Notification.vue'
 import { useUI } from '../../composables/useUI'
 import { useToast } from '../../composables/useToast'
 import { mergeConfig } from '../../utils'
-import type { Notification, Strategy } from '../../types/index'
+import type { DeepPartial, Notification, Strategy } from '../../types/index'
 import { useState } from '#imports'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -46,7 +46,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/overlays/Popover.vue

@@ -43,7 +43,7 @@ import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as H
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig } from '../../utils'
-import type { PopperOptions, Strategy } from '../../types/index'
+import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { popover } from '#ui/ui.config'
@@ -93,7 +93,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/overlays/Slideover.vue

@@ -1,11 +1,11 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
     <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }, { 'items-end': side === 'bottom' }]" v-bind="attrs" @close="close">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition" :class="ui.overlay.transition.enterFrom">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
 
-      <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
+      <TransitionChild as="template" :appear="appear" v-bind="transitionClass" :class="transitionClass.enterFrom">
         <HDialogPanel :class="[ui.base, sideType === 'horizontal' ? [ui.width, 'h-full'] : [ui.height, 'w-full'], ui.background, ui.ring, ui.rounded, ui.padding, ui.shadow]">
           <slot />
         </HDialogPanel>
@@ -20,7 +20,7 @@ import type { WritableComputedRef, PropType } from 'vue'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types/index'
+import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { slideover } from '#ui/ui.config'
@@ -67,7 +67,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -86,7 +86,12 @@ export default defineComponent({
 
     const transitionClass = computed(() => {
       if (!props.transition) {
-        return {}
+        return {} as typeof ui.value.transition & {
+          enterFrom: string
+          enterTo: string
+          leaveFrom: string
+          leaveTo: string
+        }
       }
 
       let enterFrom, leaveTo
@@ -120,6 +125,7 @@ export default defineComponent({
         leaveTo
       }
     })
+
     const sideType = computed(() => {
       switch (props.side) {
       case 'left':

src/runtime/components/overlays/Tooltip.vue

@@ -36,7 +36,7 @@ import UKbd from '../elements/Kbd.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig } from '../../utils'
-import type { PopperOptions, Strategy } from '../../types/index'
+import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tooltip } from '#ui/ui.config'
@@ -78,7 +78,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/composables/useFormGroup.ts

@@ -18,7 +18,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any, bind: boolea
   const formInputs = inject<any>('form-inputs', undefined)
 
   if (formGroup) {
-    if (!bind || inputProps.legend) {
+    if (!bind || inputProps?.legend) {
       formGroup.inputId.value = undefined
     } else if (inputProps?.id) {
       // Updates for="..." attribute on label if inputProps.id is provided

src/runtime/composables/useUI.ts

@@ -2,9 +2,9 @@ import { computed, toValue, useAttrs } from 'vue'
 import type { Ref } from 'vue'
 import { useAppConfig } from '#imports'
 import { mergeConfig, omit, get } from '../utils'
-import type { Strategy } from '../types/index'
+import type { DeepPartial, Strategy } from '../types/index'
 
-export const useUI = <T>(key, $ui?: Ref<Partial<T> & { strategy?: Strategy } | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
+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()
   const appConfig = useAppConfig()
 
@@ -17,7 +17,7 @@ export const useUI = <T>(key, $ui?: Ref<Partial<T> & { strategy?: Strategy } | u
       _ui?.strategy || (appConfig.ui?.strategy as Strategy),
       _wrapperClass ? { wrapper: _wrapperClass } : {},
       _ui || {},
-      (process.dev || withAppConfig) ? get(appConfig.ui, key, {}) : {},
+      (import.meta.dev || withAppConfig) ? get(appConfig.ui, key, {}) : {},
       _config || {}
     )
   })

src/runtime/ui.config/navigation/tabs.ts

@@ -28,7 +28,7 @@ export default {
       font: 'font-medium',
       rounded: 'rounded-md',
       shadow: '',
-      icon: 'w-4 h-4 flex-shrink-0 mr-2'
+      icon: 'w-4 h-4 flex-shrink-0 me-2'
     }
   }
 }