@nuxt/ui 3.0.0-alpha.11 → 3.0.0-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (174) hide show
  1. package/.nuxt/ui/accordion.ts +2 -2
  2. package/.nuxt/ui/alert.ts +47 -37
  3. package/.nuxt/ui/avatar-group.ts +1 -1
  4. package/.nuxt/ui/avatar.ts +4 -4
  5. package/.nuxt/ui/badge.ts +37 -28
  6. package/.nuxt/ui/breadcrumb.ts +5 -5
  7. package/.nuxt/ui/button.ts +42 -43
  8. package/.nuxt/ui/calendar.ts +15 -15
  9. package/.nuxt/ui/card.ts +27 -1
  10. package/.nuxt/ui/carousel.ts +2 -2
  11. package/.nuxt/ui/checkbox.ts +18 -18
  12. package/.nuxt/ui/chip.ts +8 -8
  13. package/.nuxt/ui/color-picker.ts +2 -2
  14. package/.nuxt/ui/command-palette.ts +12 -12
  15. package/.nuxt/ui/container.ts +1 -1
  16. package/.nuxt/ui/context-menu.ts +32 -32
  17. package/.nuxt/ui/drawer.ts +72 -11
  18. package/.nuxt/ui/dropdown-menu.ts +33 -33
  19. package/.nuxt/ui/form-field.ts +6 -6
  20. package/.nuxt/ui/input-menu.ts +41 -41
  21. package/.nuxt/ui/input-number.ts +20 -20
  22. package/.nuxt/ui/input.ts +23 -23
  23. package/.nuxt/ui/kbd.ts +4 -4
  24. package/.nuxt/ui/link.ts +3 -3
  25. package/.nuxt/ui/modal.ts +5 -5
  26. package/.nuxt/ui/navigation-menu.ts +144 -77
  27. package/.nuxt/ui/pin-input.ts +20 -20
  28. package/.nuxt/ui/popover.ts +2 -2
  29. package/.nuxt/ui/progress.ts +17 -17
  30. package/.nuxt/ui/radio-group.ts +20 -20
  31. package/.nuxt/ui/select-menu.ts +33 -32
  32. package/.nuxt/ui/select.ts +31 -31
  33. package/.nuxt/ui/separator.ts +8 -8
  34. package/.nuxt/ui/skeleton.ts +1 -1
  35. package/.nuxt/ui/slideover.ts +4 -4
  36. package/.nuxt/ui/slider.ts +16 -16
  37. package/.nuxt/ui/stepper.ts +18 -18
  38. package/.nuxt/ui/switch.ts +20 -20
  39. package/.nuxt/ui/table.ts +16 -16
  40. package/.nuxt/ui/tabs.ts +33 -33
  41. package/.nuxt/ui/textarea.ts +23 -23
  42. package/.nuxt/ui/toast.ts +42 -32
  43. package/.nuxt/ui/toaster.ts +4 -4
  44. package/.nuxt/ui/tooltip.ts +2 -2
  45. package/.nuxt/ui.css +90 -0
  46. package/README.md +2 -2
  47. package/cli/package.json +2 -2
  48. package/cli/templates.mjs +7 -7
  49. package/dist/chunks/component-meta.cjs +2590 -2511
  50. package/dist/chunks/component-meta.mjs +2590 -2511
  51. package/dist/client/devtools/200.html +1 -1
  52. package/dist/client/devtools/404.html +1 -1
  53. package/dist/client/devtools/_nuxt/CG6Dc4jp.js +1 -0
  54. package/dist/client/devtools/_nuxt/{Dtz-o9GB.js → DrNJgD08.js} +1 -1
  55. package/dist/client/devtools/_nuxt/{DNZFyo26.js → ElqrUh1r.js} +1 -1
  56. package/dist/client/devtools/_nuxt/builds/latest.json +1 -1
  57. package/dist/client/devtools/_nuxt/builds/meta/255c8d0b-7281-4d74-b4b6-ec96e6721aa0.json +1 -0
  58. package/dist/client/devtools/_nuxt/entry.Hn8drx4g.css +1 -0
  59. package/dist/client/devtools/_nuxt/error-404.Dew7w9Ee.css +1 -0
  60. package/dist/client/devtools/_nuxt/error-500.Dep59i31.css +1 -0
  61. package/dist/client/devtools/_nuxt/mC2e7kOs.js +57 -0
  62. package/dist/client/devtools/index.html +1 -1
  63. package/dist/devtools/runtime/examples/CardExample.vue +3 -3
  64. package/dist/devtools/runtime/examples/CollapsibleExample.vue +1 -1
  65. package/dist/devtools/runtime/examples/ContainerExample.vue +1 -1
  66. package/dist/devtools/runtime/examples/ContextMenuExample.vue +1 -1
  67. package/dist/devtools/runtime/examples/PopoverExample.vue +1 -1
  68. package/dist/devtools/runtime/examples/TooltipExample.vue +1 -1
  69. package/dist/module.cjs +2 -1
  70. package/dist/module.json +1 -1
  71. package/dist/module.mjs +2 -1
  72. package/dist/runtime/components/Accordion.vue +2 -2
  73. package/dist/runtime/components/Alert.vue +15 -12
  74. package/dist/runtime/components/App.vue +3 -3
  75. package/dist/runtime/components/Avatar.vue +31 -10
  76. package/dist/runtime/components/AvatarGroup.vue +2 -2
  77. package/dist/runtime/components/Badge.vue +7 -3
  78. package/dist/runtime/components/Breadcrumb.vue +2 -2
  79. package/dist/runtime/components/Button.vue +2 -2
  80. package/dist/runtime/components/ButtonGroup.vue +2 -2
  81. package/dist/runtime/components/Calendar.vue +6 -3
  82. package/dist/runtime/components/Card.vue +8 -4
  83. package/dist/runtime/components/Carousel.vue +2 -2
  84. package/dist/runtime/components/Checkbox.vue +4 -4
  85. package/dist/runtime/components/Chip.vue +2 -2
  86. package/dist/runtime/components/Collapsible.vue +2 -2
  87. package/dist/runtime/components/ColorPicker.vue +46 -15
  88. package/dist/runtime/components/CommandPalette.vue +48 -41
  89. package/dist/runtime/components/Container.vue +2 -2
  90. package/dist/runtime/components/ContextMenu.vue +10 -2
  91. package/dist/runtime/components/ContextMenuContent.vue +4 -2
  92. package/dist/runtime/components/Drawer.vue +9 -3
  93. package/dist/runtime/components/DropdownMenu.vue +10 -2
  94. package/dist/runtime/components/DropdownMenuContent.vue +4 -2
  95. package/dist/runtime/components/Form.vue +46 -17
  96. package/dist/runtime/components/FormField.vue +12 -6
  97. package/dist/runtime/components/Input.vue +5 -4
  98. package/dist/runtime/components/InputMenu.vue +6 -5
  99. package/dist/runtime/components/InputNumber.vue +10 -6
  100. package/dist/runtime/components/Kbd.vue +2 -2
  101. package/dist/runtime/components/Link.vue +2 -2
  102. package/dist/runtime/components/Modal.vue +17 -3
  103. package/dist/runtime/components/NavigationMenu.vue +110 -67
  104. package/dist/runtime/components/Pagination.vue +2 -2
  105. package/dist/runtime/components/PinInput.vue +5 -4
  106. package/dist/runtime/components/Popover.vue +2 -2
  107. package/dist/runtime/components/Progress.vue +2 -2
  108. package/dist/runtime/components/RadioGroup.vue +4 -4
  109. package/dist/runtime/components/Select.vue +9 -7
  110. package/dist/runtime/components/SelectMenu.vue +67 -64
  111. package/dist/runtime/components/Separator.vue +2 -2
  112. package/dist/runtime/components/Skeleton.vue +2 -2
  113. package/dist/runtime/components/Slideover.vue +17 -3
  114. package/dist/runtime/components/Slider.vue +4 -4
  115. package/dist/runtime/components/Stepper.vue +3 -3
  116. package/dist/runtime/components/Switch.vue +4 -4
  117. package/dist/runtime/components/Table.vue +96 -18
  118. package/dist/runtime/components/Tabs.vue +2 -2
  119. package/dist/runtime/components/Textarea.vue +7 -5
  120. package/dist/runtime/components/Toast.vue +28 -16
  121. package/dist/runtime/components/Toaster.vue +4 -4
  122. package/dist/runtime/components/Tooltip.vue +2 -2
  123. package/dist/runtime/composables/useFormField.d.ts +6 -2
  124. package/dist/runtime/composables/useFormField.js +18 -11
  125. package/dist/runtime/composables/useToast.d.ts +4 -3
  126. package/dist/runtime/composables/useToast.js +20 -6
  127. package/dist/runtime/index.css +1 -1
  128. package/dist/runtime/locale/az.js +54 -0
  129. package/dist/runtime/locale/bn.js +54 -0
  130. package/dist/runtime/locale/es.js +2 -2
  131. package/dist/runtime/locale/he.d.ts +2 -0
  132. package/dist/runtime/locale/he.js +53 -0
  133. package/dist/runtime/locale/hi.d.ts +2 -0
  134. package/dist/runtime/locale/hi.js +54 -0
  135. package/dist/runtime/locale/hu.d.ts +2 -0
  136. package/dist/runtime/locale/hu.js +54 -0
  137. package/dist/runtime/locale/index.d.ts +8 -2
  138. package/dist/runtime/locale/index.js +8 -2
  139. package/dist/runtime/locale/km.d.ts +2 -0
  140. package/dist/runtime/locale/km.js +54 -0
  141. package/dist/runtime/locale/nb_no.d.ts +2 -0
  142. package/dist/runtime/locale/nb_no.js +54 -0
  143. package/dist/runtime/locale/zh_cn.d.ts +2 -0
  144. package/dist/runtime/locale/{zh_hans.js → zh_cn.js} +1 -1
  145. package/dist/runtime/locale/zh_tw.d.ts +2 -0
  146. package/dist/runtime/locale/{zh_hant.js → zh_tw.js} +1 -1
  147. package/dist/runtime/plugins/colors.js +8 -5
  148. package/dist/runtime/types/form.d.ts +21 -12
  149. package/dist/runtime/types/index.d.ts +1 -0
  150. package/dist/runtime/types/index.js +1 -0
  151. package/dist/runtime/types/utils.d.ts +5 -0
  152. package/dist/runtime/utils/form.js +3 -5
  153. package/dist/runtime/utils/tv.js +2 -2
  154. package/dist/runtime/vue/components/Link.vue +77 -18
  155. package/dist/shared/{ui.DCjJwb6l.cjs → ui.C5FzRWM5.cjs} +529 -366
  156. package/dist/shared/{ui.BKsd22-Q.mjs → ui.DCZM2pl8.mjs} +525 -366
  157. package/dist/unplugin.cjs +44 -20
  158. package/dist/unplugin.d.cts +10 -0
  159. package/dist/unplugin.d.mts +10 -0
  160. package/dist/unplugin.d.ts +10 -0
  161. package/dist/unplugin.mjs +43 -19
  162. package/dist/vite.cjs +3 -2
  163. package/dist/vite.d.cts +2 -0
  164. package/dist/vite.d.mts +2 -0
  165. package/dist/vite.d.ts +2 -0
  166. package/dist/vite.mjs +3 -2
  167. package/package.json +67 -41
  168. package/dist/client/devtools/_nuxt/CQ-XZFu7.js +0 -54
  169. package/dist/client/devtools/_nuxt/builds/meta/1f5fbd7b-9d97-480e-9ae4-e02b4ff7018b.json +0 -1
  170. package/dist/client/devtools/_nuxt/entry.qOdop8tq.css +0 -1
  171. package/dist/client/devtools/_nuxt/error-404.D-rS9BDk.css +0 -1
  172. package/dist/client/devtools/_nuxt/error-500.CfcCHs91.css +0 -1
  173. /package/dist/runtime/locale/{zh_hans.d.ts → az.d.ts} +0 -0
  174. /package/dist/runtime/locale/{zh_hant.d.ts → bn.d.ts} +0 -0
package/dist/client/devtools/index.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html data-capo=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt_ui__/devtools/_nuxt/entry.qOdop8tq.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt_ui__/devtools/_nuxt/CQ-XZFu7.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt_ui__/devtools/_nuxt/error-404.D-rS9BDk.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_ui__/devtools/_nuxt/Dtz-o9GB.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt_ui__/devtools/_nuxt/error-500.CfcCHs91.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_ui__/devtools/_nuxt/DNZFyo26.js"><script type="module" src="/__nuxt_ui__/devtools/_nuxt/CQ-XZFu7.js" crossorigin></script><script>"use strict";(()=>{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("localStorage","nuxt-color-mode")||"system";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["__NUXT_COLOR_MODE__"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}</script></head><body><div id="__nuxt" class="isolate"></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1736765680267,false]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt_ui__/devtools",buildId:"1f5fbd7b-9d97-480e-9ae4-e02b4ff7018b",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
1
+ <!DOCTYPE html><html data-capo=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt_ui__/devtools/_nuxt/entry.Hn8drx4g.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt_ui__/devtools/_nuxt/mC2e7kOs.js"><link rel="prefetch" as="script" crossorigin href="/__nuxt_ui__/devtools/_nuxt/CG6Dc4jp.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt_ui__/devtools/_nuxt/error-404.Dew7w9Ee.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_ui__/devtools/_nuxt/DrNJgD08.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt_ui__/devtools/_nuxt/error-500.Dep59i31.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_ui__/devtools/_nuxt/ElqrUh1r.js"><script type="module" src="/__nuxt_ui__/devtools/_nuxt/mC2e7kOs.js" crossorigin></script><script>"use strict";(()=>{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("localStorage","nuxt-color-mode")||"system";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["__NUXT_COLOR_MODE__"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}</script></head><body><div id="__nuxt" class="isolate"></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1739799100668,false]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt_ui__/devtools",buildId:"255c8d0b-7281-4d74-b4b6-ec96e6721aa0",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
package/dist/devtools/runtime/examples/CardExample.vue CHANGED
@@ -2,11 +2,11 @@
2
2
  <div class="flex flex-col gap-4">
3
3
  <UCard class="w-96">
4
4
  <template #header>
5
- <div class="bg-[var(--ui-bg-accented)]/40 h-8" />
5
+ <div class="bg-(--ui-bg-accented)/40 h-8" />
6
6
  </template>
7
- <div class="bg-[var(--ui-bg-accented)]/40 h-32" />
7
+ <div class="bg-(--ui-bg-accented)/40 h-32" />
8
8
  <template #footer>
9
- <div class="bg-[var(--ui-bg-accented)]/40 h-8" />
9
+ <div class="bg-(--ui-bg-accented)/40 h-8" />
10
10
  </template>
11
11
  </UCard>
12
12
  </div>
package/dist/devtools/runtime/examples/CollapsibleExample.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <UCollapsible class="w-48">
3
3
  <UButton label="Open Collapse" block />
4
4
  <template #content>
5
- <div class="bg-[var(--ui-bg-accented)]/40 h-60" />
5
+ <div class="bg-(--ui-bg-accented)/40 h-60" />
6
6
  </template>
7
7
  </UCollapsible>
8
8
  </template>
package/dist/devtools/runtime/examples/ContainerExample.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
2
  <UContainer>
3
- <div class="bg-[var(--ui-bg-accented)]/40 h-60 aspect-video w-72" />
3
+ <div class="bg-(--ui-bg-accented)/40 h-60 aspect-video w-72" />
4
4
  </UContainer>
5
5
  </template>
package/dist/devtools/runtime/examples/ContextMenuExample.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
2
  <UContextMenu>
3
- <div class="bg-[var(--ui-bg-accented)]/40 h-60 w-72" />
3
+ <div class="bg-(--ui-bg-accented)/40 h-60 w-72" />
4
4
  </UContextMenu>
5
5
  </template>
package/dist/devtools/runtime/examples/PopoverExample.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <UPopover>
3
3
  <UButton label="Open Collapse" />
4
4
  <template #content>
5
- <div class="bg-[var(--ui-bg-accented)]/40 h-24 w-60" />
5
+ <div class="bg-(--ui-bg-accented)/40 h-24 w-60" />
6
6
  </template>
7
7
  </UPopover>
8
8
  </template>
package/dist/devtools/runtime/examples/TooltipExample.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
2
  <UTooltip>
3
- <div class="bg-[var(--ui-bg-accented)]/40 size-20" />
3
+ <div class="bg-(--ui-bg-accented)/40 size-20" />
4
4
  </UTooltip>
5
5
  </template>
package/dist/module.cjs CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  const defu = require('defu');
4
4
  const kit = require('@nuxt/kit');
5
- const templates = require('./shared/ui.DCjJwb6l.cjs');
5
+ const templates = require('./shared/ui.C5FzRWM5.cjs');
6
6
  const devtoolsKit = require('@nuxt/devtools-kit');
7
7
  const sirv = require('sirv');
8
8
  require('get-port-please');
@@ -10,6 +10,7 @@ const scule = require('scule');
10
10
  const fs = require('node:fs');
11
11
  require('../dist/runtime/utils/index.js');
12
12
  require('node:url');
13
+ require('tailwindcss/colors');
13
14
 
14
15
  var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
15
16
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
package/dist/module.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "nuxt": ">=3.13.1"
6
6
  },
7
7
  "docs": "https://ui3.nuxt.dev/getting-started/installation/nuxt",
8
- "version": "3.0.0-alpha.11",
8
+ "version": "3.0.0-alpha.13",
9
9
  "builder": {
10
10
  "@nuxt/module-builder": "0.8.4",
11
11
  "unbuild": "2.0.0"
package/dist/module.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import defu, { defu as defu$1 } from 'defu';
2
2
  import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, extendPages, hasNuxtModule, installModule } from '@nuxt/kit';
3
- import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates, c as buildTemplates } from './shared/ui.BKsd22-Q.mjs';
3
+ import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates, c as buildTemplates } from './shared/ui.DCZM2pl8.mjs';
4
4
  import { addCustomTab } from '@nuxt/devtools-kit';
5
5
  import sirv from 'sirv';
6
6
  import 'get-port-please';
@@ -8,6 +8,7 @@ import { kebabCase, camelCase } from 'scule';
8
8
  import fs from 'node:fs';
9
9
  import '../dist/runtime/utils/index.js';
10
10
  import 'node:url';
11
+ import 'tailwindcss/colors';
11
12
 
12
13
  const devtoolsComponentMeta = {};
13
14
  function extractDevtoolsMeta(code) {
package/dist/runtime/components/Accordion.vue CHANGED
@@ -7,9 +7,9 @@ import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
7
7
  import { tv } from '../utils/tv'
8
8
  import type { DynamicSlots } from '../types/utils'
9
9
 
10
- const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
10
+ const appConfigAccordion = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
11
11
 
12
- const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
12
+ const accordion = tv({ extend: tv(theme), ...(appConfigAccordion.ui?.accordion || {}) })
13
13
 
14
14
  export interface AccordionItem {
15
15
  label?: string
package/dist/runtime/components/Alert.vue CHANGED
@@ -7,9 +7,9 @@ import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
7
7
  import { tv } from '../utils/tv'
8
8
  import type { AvatarProps, ButtonProps } from '../types'
9
9
 
10
- const appConfig = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
10
+ const appConfigAlert = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
11
11
 
12
- const alert = tv({ extend: tv(theme), ...(appConfig.ui?.alert || {}) })
12
+ const alert = tv({ extend: tv(theme), ...(appConfigAlert.ui?.alert || {}) })
13
13
 
14
14
  type AlertVariants = VariantProps<typeof alert>
15
15
 
@@ -25,10 +25,11 @@ export interface AlertProps {
25
25
  avatar?: AvatarProps
26
26
  color?: AlertVariants['color']
27
27
  variant?: AlertVariants['variant']
28
+ orientation?: AlertVariants['orientation']
28
29
  /**
29
30
  * Display a list of actions:
30
- * - under the title and description if multiline
31
- * - next to the close button if not multiline
31
+ * - under the title and description when orientation is `vertical`
32
+ * - next to the close button when orientation is `horizontal`
32
33
  * `{ size: 'xs' }`{lang="ts-type"}
33
34
  */
34
35
  actions?: ButtonProps[]
@@ -72,23 +73,25 @@ import UIcon from './Icon.vue'
72
73
  import UAvatar from './Avatar.vue'
73
74
  import UButton from './Button.vue'
74
75
 
75
- const props = defineProps<AlertProps>()
76
+ const props = withDefaults(defineProps<AlertProps>(), {
77
+ orientation: 'vertical'
78
+ })
76
79
  const emits = defineEmits<AlertEmits>()
77
80
  const slots = defineSlots<AlertSlots>()
78
81
 
79
82
  const { t } = useLocale()
80
83
  const appConfig = useAppConfig()
81
84
 
82
- const multiline = computed(() => !!props.title && !!props.description)
83
-
84
85
  const ui = computed(() => alert({
85
86
  color: props.color,
86
- variant: props.variant
87
+ variant: props.variant,
88
+ orientation: props.orientation,
89
+ title: !!props.title || !!slots.title
87
90
  }))
88
91
  </script>
89
92
 
90
93
  <template>
91
- <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root], multiline })">
94
+ <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.class, props.ui?.root] })">
92
95
  <slot name="leading">
93
96
  <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
94
97
  <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
@@ -106,15 +109,15 @@ const ui = computed(() => alert({
106
109
  </slot>
107
110
  </div>
108
111
 
109
- <div v-if="multiline && actions?.length" :class="ui.actions({ class: props.ui?.actions, multiline: true })">
112
+ <div v-if="orientation === 'vertical' && actions?.length" :class="ui.actions({ class: props.ui?.actions })">
110
113
  <slot name="actions">
111
114
  <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
112
115
  </slot>
113
116
  </div>
114
117
  </div>
115
118
 
116
- <div v-if="(!multiline && actions?.length) || close" :class="ui.actions({ class: props.ui?.actions, multiline: false })">
117
- <template v-if="!multiline">
119
+ <div v-if="(orientation === 'horizontal' && actions?.length) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
120
+ <template v-if="orientation === 'horizontal' && actions?.length">
118
121
  <slot name="actions">
119
122
  <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
120
123
  </slot>
package/dist/runtime/components/App.vue CHANGED
@@ -47,9 +47,9 @@ provide(localeContextInjectionKey, locale)
47
47
  <slot />
48
48
  </UToaster>
49
49
  <slot v-else />
50
- </TooltipProvider>
51
50
 
52
- <UModalProvider />
53
- <USlideoverProvider />
51
+ <UModalProvider />
52
+ <USlideoverProvider />
53
+ </TooltipProvider>
54
54
  </ConfigProvider>
55
55
  </template>
package/dist/runtime/components/Avatar.vue CHANGED
@@ -7,9 +7,9 @@ import theme from '#build/ui/avatar'
7
7
  import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
8
8
  import { tv } from '../utils/tv'
9
9
 
10
- const appConfig = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
10
+ const appConfigAvatar = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
11
11
 
12
- const avatar = tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })
12
+ const avatar = tv({ extend: tv(theme), ...(appConfigAvatar.ui?.avatar || {}) })
13
13
 
14
14
  type AvatarVariants = VariantProps<typeof avatar>
15
15
 
@@ -36,21 +36,24 @@ extendDevtoolsMeta<AvatarProps>({ defaultProps: { src: 'https://avatars.githubus
36
36
  </script>
37
37
 
38
38
  <script setup lang="ts">
39
- import { computed } from 'vue'
40
- import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'reka-ui'
41
- import { reactivePick } from '@vueuse/core'
39
+ import { ref, computed, useAttrs, onMounted } from 'vue'
40
+ import { AvatarRoot, AvatarFallback, useForwardProps } from 'reka-ui'
41
+ import { reactivePick, useImage } from '@vueuse/core'
42
+ import ImageComponent from '#build/ui-image-component'
42
43
  import { useAvatarGroup } from '../composables/useAvatarGroup'
43
44
  import UIcon from './Icon.vue'
44
- import ImageComponent from '#build/ui-image-component'
45
45
 
46
46
  defineOptions({ inheritAttrs: false })
47
47
 
48
48
  const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
49
+ const attrs = useAttrs() as any
49
50
 
50
51
  const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
51
52
 
52
53
  const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
53
54
 
55
+ const imageLoaded = ref(false)
56
+
54
57
  const { size } = useAvatarGroup(props)
55
58
 
56
59
  // eslint-disable-next-line vue/no-dupe-keys
@@ -69,22 +72,40 @@ const sizePx = computed(() => ({
69
72
  '2xl': 44,
70
73
  '3xl': 48
71
74
  })[props.size || 'md'])
75
+
76
+ // Reproduces Reka UI's [AvatarImage](https://reka-ui.com/docs/components/avatar#image) component behavior which cannot be used with NuxtImg component
77
+ onMounted(() => {
78
+ if (!props.src || (ImageComponent as unknown as string) !== 'img') {
79
+ return
80
+ }
81
+
82
+ const { then } = useImage({ ...props, ...attrs, src: props.src! })
83
+
84
+ then((img) => {
85
+ if (img.isReady.value) {
86
+ imageLoaded.value = true
87
+ }
88
+ })
89
+ })
72
90
  </script>
73
91
 
74
92
  <template>
75
93
  <AvatarRoot :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
76
- <AvatarImage
94
+ <component
95
+ :is="ImageComponent"
77
96
  v-if="src"
78
- :as="ImageComponent"
97
+ v-show="imageLoaded"
98
+ role="img"
79
99
  :src="src"
80
100
  :alt="alt"
81
101
  :width="sizePx"
82
102
  :height="sizePx"
83
- v-bind="$attrs"
103
+ v-bind="attrs"
84
104
  :class="ui.image({ class: props.ui?.image })"
105
+ @load="imageLoaded = true"
85
106
  />
86
107
 
87
- <AvatarFallback as-child v-bind="{ ...fallbackProps, ...$attrs }">
108
+ <AvatarFallback v-if="!imageLoaded" as-child v-bind="{ ...fallbackProps, ...$attrs }">
88
109
  <slot>
89
110
  <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
90
111
  <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
package/dist/runtime/components/AvatarGroup.vue CHANGED
@@ -6,9 +6,9 @@ import theme from '#build/ui/avatar-group'
6
6
  import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
7
7
  import { tv } from '../utils/tv'
8
8
 
9
- const appConfig = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
9
+ const appConfigAvatarGroup = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
10
10
 
11
- const avatarGroup = tv({ extend: tv(theme), ...(appConfig.ui?.avatarGroup || {}) })
11
+ const avatarGroup = tv({ extend: tv(theme), ...(appConfigAvatarGroup.ui?.avatarGroup || {}) })
12
12
 
13
13
  type AvatarGroupVariants = VariantProps<typeof avatarGroup>
14
14
 
package/dist/runtime/components/Badge.vue CHANGED
@@ -8,9 +8,9 @@ import type { UseComponentIconsProps } from '../composables/useComponentIcons'
8
8
  import { tv } from '../utils/tv'
9
9
  import type { AvatarProps } from '../types'
10
10
 
11
- const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
11
+ const appConfigBadge = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
12
12
 
13
- const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
13
+ const badge = tv({ extend: tv(theme), ...(appConfigBadge.ui?.badge || {}) })
14
14
 
15
15
  type BadgeVariants = VariantProps<typeof badge>
16
16
 
@@ -38,20 +38,24 @@ export interface BadgeSlots {
38
38
  <script setup lang="ts">
39
39
  import { computed } from 'vue'
40
40
  import { Primitive } from 'reka-ui'
41
+ import { useButtonGroup } from '../composables/useButtonGroup'
41
42
  import { useComponentIcons } from '../composables/useComponentIcons'
42
43
  import UIcon from './Icon.vue'
44
+ import UAvatar from './Avatar.vue'
43
45
 
44
46
  const props = withDefaults(defineProps<BadgeProps>(), {
45
47
  as: 'span'
46
48
  })
47
49
  defineSlots<BadgeSlots>()
48
50
 
51
+ const { orientation, size: buttonGroupSize } = useButtonGroup<BadgeProps>(props)
49
52
  const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
50
53
 
51
54
  const ui = computed(() => badge({
52
55
  color: props.color,
53
56
  variant: props.variant,
54
- size: props.size
57
+ size: buttonGroupSize.value || props.size,
58
+ buttonGroup: orientation.value
55
59
  }))
56
60
 
57
61
  extendDevtoolsMeta({ defaultProps: { label: 'Badge' } })
package/dist/runtime/components/Breadcrumb.vue CHANGED
@@ -7,9 +7,9 @@ import { tv } from '../utils/tv'
7
7
  import type { AvatarProps, LinkProps } from '../types'
8
8
  import type { DynamicSlots, PartialString } from '../types/utils'
9
9
 
10
- const appConfig = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
10
+ const appConfigBreadcrumb = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
11
11
 
12
- const breadcrumb = tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb || {}) })
12
+ const breadcrumb = tv({ extend: tv(theme), ...(appConfigBreadcrumb.ui?.breadcrumb || {}) })
13
13
 
14
14
  export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
15
15
  label?: string
package/dist/runtime/components/Button.vue CHANGED
@@ -10,9 +10,9 @@ import { tv } from '../utils/tv'
10
10
  import type { AvatarProps } from '../types'
11
11
  import type { PartialString } from '../types/utils'
12
12
 
13
- const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
13
+ const appConfigButton = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
14
14
 
15
- const button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })
15
+ const button = tv({ extend: tv(theme), ...(appConfigButton.ui?.button || {}) })
16
16
 
17
17
  type ButtonVariants = VariantProps<typeof button>
18
18
 
package/dist/runtime/components/ButtonGroup.vue CHANGED
@@ -6,9 +6,9 @@ import theme from '#build/ui/button-group'
6
6
  import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
7
7
  import { tv } from '../utils/tv'
8
8
 
9
- const appConfig = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
9
+ const appConfigButtonGroup = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
10
10
 
11
- const buttonGroup = tv({ extend: tv(theme), ...(appConfig.ui?.buttonGroup) })
11
+ const buttonGroup = tv({ extend: tv(theme), ...(appConfigButtonGroup.ui?.buttonGroup) })
12
12
 
13
13
  type ButtonGroupVariants = VariantProps<typeof buttonGroup>
14
14
 
package/dist/runtime/components/Calendar.vue CHANGED
@@ -6,10 +6,11 @@ import type { AppConfig } from '@nuxt/schema'
6
6
  import _appConfig from '#build/app.config'
7
7
  import theme from '#build/ui/calendar'
8
8
  import { tv } from '../utils/tv'
9
+ import type { PartialString } from '../types/utils'
9
10
 
10
- const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
11
+ const appConfigCalendar = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
11
12
 
12
- const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
13
+ const calendar = tv({ extend: tv(theme), ...(appConfigCalendar.ui?.calendar || {}) })
13
14
 
14
15
  type CalendarVariants = VariantProps<typeof calendar>
15
16
 
@@ -58,7 +59,7 @@ export interface CalendarProps<R extends boolean, M extends boolean> extends Omi
58
59
  defaultValue?: CalendarModelValue<R, M>
59
60
  modelValue?: CalendarModelValue<R, M>
60
61
  class?: any
61
- ui?: Partial<typeof calendar.slots>
62
+ ui?: PartialString<typeof calendar.slots>
62
63
  }
63
64
 
64
65
  export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
@@ -77,6 +78,7 @@ import { computed } from 'vue'
77
78
  import { useForwardPropsEmits } from 'reka-ui'
78
79
  import { Calendar as SingleCalendar, RangeCalendar } from 'reka-ui/namespaced'
79
80
  import { reactiveOmit } from '@vueuse/core'
81
+ import { useAppConfig } from '#imports'
80
82
  import { useLocale } from '../composables/useLocale'
81
83
  import UButton from './Button.vue'
82
84
 
@@ -88,6 +90,7 @@ const props = withDefaults(defineProps<CalendarProps<R, M>>(), {
88
90
  const emits = defineEmits<CalendarEmits<R, M>>()
89
91
  defineSlots<CalendarSlots>()
90
92
 
93
+ const appConfig = useAppConfig()
91
94
  const { code: locale, dir, t } = useLocale()
92
95
 
93
96
  const rootProps = useForwardPropsEmits(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'color', 'size', 'monthControls', 'yearControls', 'class', 'ui'), emits)
package/dist/runtime/components/Card.vue CHANGED
@@ -1,13 +1,16 @@
1
1
  <script lang="ts">
2
+ import type { VariantProps } from 'tailwind-variants'
2
3
  import type { AppConfig } from '@nuxt/schema'
3
4
  import _appConfig from '#build/app.config'
4
5
  import theme from '#build/ui/card'
5
6
  import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
6
7
  import { tv } from '../utils/tv'
7
8
 
8
- const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
9
+ const appConfigCard = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
9
10
 
10
- const card = tv({ extend: tv(theme), ...(appConfig.ui?.card || {}) })
11
+ const card = tv({ extend: tv(theme), ...(appConfigCard.ui?.card || {}) })
12
+
13
+ type CardVariants = VariantProps<typeof card>
11
14
 
12
15
  export interface CardProps {
13
16
  /**
@@ -15,6 +18,7 @@ export interface CardProps {
15
18
  * @defaultValue 'div'
16
19
  */
17
20
  as?: any
21
+ variant?: CardVariants['variant']
18
22
  class?: any
19
23
  ui?: Partial<typeof card.slots>
20
24
  }
@@ -29,13 +33,13 @@ extendDevtoolsMeta({ example: 'CardExample' })
29
33
  </script>
30
34
 
31
35
  <script setup lang="ts">
36
+ import { computed } from 'vue'
32
37
  import { Primitive } from 'reka-ui'
33
38
 
34
39
  const props = defineProps<CardProps>()
35
40
  const slots = defineSlots<CardSlots>()
36
41
 
37
- // eslint-disable-next-line vue/no-dupe-keys
38
- const ui = card()
42
+ const ui = computed(() => card({ variant: props.variant }))
39
43
  </script>
40
44
 
41
45
  <template>
package/dist/runtime/components/Carousel.vue CHANGED
@@ -16,9 +16,9 @@ import { tv } from '../utils/tv'
16
16
  import type { ButtonProps } from '../types'
17
17
  import type { PartialString } from '../types/utils'
18
18
 
19
- const appConfig = _appConfig as AppConfig & { ui: { carousel: Partial<typeof theme> } }
19
+ const appConfigCarousel = _appConfig as AppConfig & { ui: { carousel: Partial<typeof theme> } }
20
20
 
21
- const carousel = tv({ extend: tv(theme), ...(appConfig.ui?.carousel || {}) })
21
+ const carousel = tv({ extend: tv(theme), ...(appConfigCarousel.ui?.carousel || {}) })
22
22
 
23
23
  type CarouselVariants = VariantProps<typeof carousel>
24
24
 
package/dist/runtime/components/Checkbox.vue CHANGED
@@ -7,9 +7,9 @@ import theme from '#build/ui/checkbox'
7
7
  import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
8
8
  import { tv } from '../utils/tv'
9
9
 
10
- const appConfig = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
10
+ const appConfigCheckbox = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
11
11
 
12
- const checkbox = tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })
12
+ const checkbox = tv({ extend: tv(theme), ...(appConfigCheckbox.ui?.checkbox || {}) })
13
13
 
14
14
  type CheckboxVariants = VariantProps<typeof checkbox>
15
15
 
@@ -66,7 +66,7 @@ const modelValue = defineModel<boolean | 'indeterminate'>({ default: undefined }
66
66
  const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
67
67
 
68
68
  const appConfig = useAppConfig()
69
- const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<CheckboxProps>(props)
69
+ const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<CheckboxProps>(props)
70
70
  const id = _id.value ?? useId()
71
71
 
72
72
  const ui = computed(() => checkbox({
@@ -92,7 +92,7 @@ function onUpdate(value: any) {
92
92
  <div :class="ui.container({ class: props.ui?.container })">
93
93
  <CheckboxRoot
94
94
  :id="id"
95
- v-bind="rootProps"
95
+ v-bind="{ ...rootProps, ...ariaAttrs }"
96
96
  v-model="modelValue"
97
97
  :name="name"
98
98
  :disabled="disabled"
package/dist/runtime/components/Chip.vue CHANGED
@@ -6,9 +6,9 @@ import theme from '#build/ui/chip'
6
6
  import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
7
7
  import { tv } from '../utils/tv'
8
8
 
9
- const appConfig = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
9
+ const appConfigChip = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
10
10
 
11
- const chip = tv({ extend: tv(theme), ...(appConfig.ui?.chip || {}) })
11
+ const chip = tv({ extend: tv(theme), ...(appConfigChip.ui?.chip || {}) })
12
12
 
13
13
  type ChipVariants = VariantProps<typeof chip>
14
14
 
package/dist/runtime/components/Collapsible.vue CHANGED
@@ -6,9 +6,9 @@ import theme from '#build/ui/collapsible'
6
6
  import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
7
7
  import { tv } from '../utils/tv'
8
8
 
9
- const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
9
+ const appConfigCollapsible = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
10
10
 
11
- const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
11
+ const collapsible = tv({ extend: tv(theme), ...(appConfigCollapsible.ui?.collapsible || {}) })
12
12
 
13
13
  export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
14
14
  /**