Compare commits

..

328 Commits

Author SHA1 Message Date
Benjamin Canac
159acd664c chore(release): v2.19.2 2024-11-05 19:36:54 +01:00
Benjamin Canac
212f7df35b fix(Button): put back target override 2024-11-05 19:26:37 +01:00
Benjamin Canac
d0d37a06d2 chore(release): v2.19.1 2024-11-05 18:06:03 +01:00
Benjamin Canac
cb6f5f2d71 fix(InputMenu/SelectMenu): regex breaks build 2024-11-05 17:57:49 +01:00
Benjamin Canac
22da1a839a docs(date-picker): improve component
Resolves #2082
2024-11-05 17:35:49 +01:00
Benjamin Canac
c5f76a25db chore(release): v2.19.0 2024-11-05 16:56:42 +01:00
kyyy
ceecb60c3b feat(Form): apply transformations (#2460) 2024-11-05 16:13:25 +01:00
CJBoy
23971efdb0 fix(module): missing types in ui config (#2467) 2024-11-05 16:08:54 +01:00
Ersan Karimi
1a94b55caa fix(InputMenu/SelectMenu): prevent unnecessary updates when modelValue is unchanged (#2507) 2024-11-05 16:08:36 +01:00
offich
c71fdc8795 feat(Pagination): improve slot props (#2522) 2024-11-05 16:06:49 +01:00
renovate[bot]
6844f7bbd9 chore(deps): update all non-major dependencies (dev) (#2525)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-11-05 16:06:36 +01:00
kyyy
1acd01a440 feat(Table): improve expanded row (#2485) 2024-11-05 15:52:10 +01:00
Benjamin Canac
0b2a3989a2 chore(deps): dedupe 2024-11-05 15:18:24 +01:00
renovate[bot]
5f8d645231 chore(deps): update nuxt framework to ^3.14.0 (dev) (#2526)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-11-04 19:39:53 +01:00
renovate[bot]
2cc838ea8b chore(deps): lock file maintenance (dev) (#2519)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-11-04 14:20:15 +01:00
Benjamin Canac
2e41e3f238 docs(table): fix expandable example responsive 2024-11-04 14:14:59 +01:00
renovate[bot]
7cb8218ed5 chore(deps): update devdependency eslint to ^9.14.0 (dev) (#2514)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-11-04 10:28:55 +01:00
Eder Soares
ddf67a060b feat(InputMenu): allows to customize labels (#2295) 2024-10-31 15:29:08 +01:00
Eder Soares
54e713d31a feat(SelectMenu): allows to customize labels (#2266) 2024-10-31 15:17:08 +01:00
renovate[bot]
09e232ed05 chore(deps): update dependency @nuxt/ui-pro to v1.4.4-28839576.e8eba4f (dev) (#2504)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-31 14:19:17 +01:00
renovate[bot]
1d455b092d chore(deps): update all non-major dependencies to ^11.2.0 (dev) (#2496)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-31 12:34:00 +01:00
Benjamin Canac
13957ba206 chore(deps): remove vue-tsc resolutions 2024-10-31 11:32:01 +01:00
kyyy
ff1806143c fix(InputMenu/SelectMenu): allow access nested object in option-attribute (#2465)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-10-30 17:33:06 +01:00
Nestor Vera
b6ed1c59ff fix(RadioGroup): rendering empty slots (#2456) 2024-10-30 12:42:56 +01:00
renovate[bot]
424efe783e chore(deps): lock file maintenance (dev) (#2473)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-30 12:08:56 +01:00
renovate[bot]
c3cd3c9940 chore(deps): update all non-major dependencies (dev) (#2453)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-10-30 11:51:25 +01:00
Benjamin Canac
8ab4a14394 fix(Button): wrong to type
Resolves #1253
2024-10-30 11:16:04 +01:00
Mateus Bellei
25378df1d8 fix(Accordion): improve items type (#2487) 2024-10-29 16:38:59 +01:00
kyyy
070d2f89b6 fix(Table): indeterminate checkbox with pagination (#2439)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-10-24 12:41:45 +02:00
renovate[bot]
8e413f0681 chore(deps): update dependency @nuxt/ui-pro to v1.4.4-28829363.bb3c738 (dev) (#2444)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-24 12:32:52 +02:00
Benjamin Canac
03ac697167 docs(deps): remove eslint dependency 2024-10-24 11:16:52 +02:00
renovate[bot]
c6a9b499e3 chore(deps): update dependency eslint to v9 (dev) (#2446)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-24 11:14:38 +02:00
Benjamin Canac
cae4f0c4a8 chore(deps): migrate to eslint 9 (#2443) 2024-10-24 10:30:37 +02:00
renovate[bot]
b29fcd2650 chore(deps): update all non-major dependencies (dev) (#2411)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-23 21:50:02 +02:00
Benjamin Canac
3671b2fbbe chore(renovate): ignore resolutions 2024-10-23 21:15:17 +02:00
renovate[bot]
2577eb2780 chore(deps): update devdependency @nuxt/test-utils to ^3.14.4 (dev) (#2422)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-21 18:21:53 +02:00
renovate[bot]
3d1be39221 chore(deps): lock file maintenance (dev) (#2427)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-21 18:13:04 +02:00
Benjamin Canac
49e04389fa chore(deps): set @nuxt/content & @nuxtjs/mdc resolutions 2024-10-21 11:37:48 +02:00
Benjamin Canac
ee364318d1 docs: use parseMarkdown instead of transformContent 2024-10-21 11:25:41 +02:00
Benjamin Canac
b14afbebe9 docs(prettier): update usage 2024-10-21 10:55:10 +02:00
Malik-Jouda
4bf81be364 fix(HorizontalNavigation/VerticalNavigation): handle badge in RTL mode (#2420) 2024-10-19 19:36:00 +02:00
Benjamin Canac
7846ca35b5 fix(Divider): default type from app config
Resolves nuxt/ui#2398
2024-10-19 14:19:17 +02:00
rizkyyy
b72d3434e9 fix(Table): handle dot nation with by prop (#2413)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-10-19 12:29:06 +02:00
Malik-Jouda
20fb46a3ba fix(Progress): handle carousel and carousel-inverse animations in RTL mode (#2400)
Co-authored-by: malik jouda <m.jouda@approved.tech>
2024-10-17 22:28:19 +02:00
rizkyyy
1b7e36cf70 fix(Table): checkbox not checked while using props by (#2401) 2024-10-17 22:21:19 +02:00
renovate[bot]
3768cd9803 chore(deps): update all non-major dependencies (dev) (#2394)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-17 22:15:05 +02:00
Halil Durak
3d0bba2e83 chore(module): call only a single await to install tailwind (#2397) 2024-10-17 14:46:49 +02:00
Benjamin Canac
494e73932b docs(deps): update @nuxt/ui-pro 2024-10-17 12:31:12 +02:00
renovate[bot]
38200aa392 chore(deps): update all non-major dependencies (dev) (#2381)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-10-15 17:24:07 +02:00
renovate[bot]
19b01f43f1 chore(deps): update dependency tailwindcss to ^3.4.14 (dev) (#2387)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-15 16:51:35 +02:00
Benjamin Canac
c36964b5ea fix(Table): export TableRow and TableColumn types
Resolves nuxt/ui#2373
2024-10-15 11:05:08 +02:00
renovate[bot]
4de8f2e2f7 chore(deps): update all non-major dependencies (dev) (#2380)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-14 17:25:41 +02:00
Benjamin Canac
3cf19ea5af fix(Tabs): allow aria-label on items
Related to nuxt/ui#1934
2024-10-14 16:18:33 +02:00
Gerben Mulder
9dd7e615e9 feat(Input/Textarea): nullify model modifier (#2309) 2024-10-14 12:45:15 +02:00
renovate[bot]
33b9a445c4 chore(deps): update devdependency @release-it/conventional-changelog to v9 (dev) (#2367)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-14 11:05:06 +02:00
renovate[bot]
46cec7ecd1 chore(deps): update all non-major dependencies (dev) (#2351)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-14 11:00:32 +02:00
renovate[bot]
f8e2c94375 chore(deps): lock file maintenance (dev) (#2375)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-14 10:44:13 +02:00
Benjamin Canac
71e0492179 chore(github): add version select 2024-10-12 19:12:14 +02:00
rizkyyy
3cda6c6478 feat(Form): add superstruct validation (#2357) 2024-10-11 11:02:51 +02:00
Benjamin Canac
428ee44fc0 docs(app): add v3-alpha banner 2024-10-10 18:08:39 +02:00
Benjamin Canac
c68ba76fd0 fix(InputMenu/SelectMenu): escape regexp before search
Resolves nuxt/ui#2308
2024-10-10 16:12:42 +02:00
Benjamin Canac
dd0d0551be docs(notification): improve position override example
nuxt/ui#2128
2024-10-10 11:45:19 +02:00
renovate[bot]
3efcf3026a chore(deps): update dependency @nuxt/ui-pro to ^1.4.4 (dev) (#2348)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-09 17:48:41 +02:00
Benjamin Canac
912ec15d08 chore(release): v2.18.7 2024-10-09 15:58:09 +02:00
EdmundChaplin
5cf24fa6e7 fix(Carousel): pages calculation (#2345)
Co-authored-by: Edmund Chaplin <edmund.chaplin@zaros.co.uk>
2024-10-09 15:54:38 +02:00
renovate[bot]
6895b5d443 chore(deps): update all non-major dependencies (dev) (#2343)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-09 15:51:16 +02:00
renovate[bot]
18db7c99a9 chore(deps): update all non-major dependencies (dev) (#2334)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-08 12:16:37 +02:00
renovate[bot]
ede7d7c2b7 chore(deps): update pnpm to v9.12.1 (dev) (#2327)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-07 16:54:09 +02:00
renovate[bot]
7cbe1983f7 chore(deps): update devdependency @nuxt/test-utils to ^3.14.3 (dev) (#2325)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-07 15:41:26 +02:00
renovate[bot]
773665050b chore(deps): update all non-major dependencies (dev) (#2310)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-07 15:19:04 +02:00
renovate[bot]
d581bd9ad0 chore(deps): lock file maintenance (dev) (#2315)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-07 12:24:25 +02:00
OrbisK
a6d106377e chore(github): add separate v3 issue template (#2307) 2024-10-06 13:58:35 +02:00
renovate[bot]
6dbd0e0932 chore(deps): update all non-major dependencies (dev) (#2289)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-10-05 23:14:15 +02:00
Asoka Wotulo
33467ad171 docs(form): specify component ref type (#2296) 2024-10-03 16:43:27 +02:00
Abolfazl
5ed5c57d0d fix(Tooltip): hide when text prop & slot are empty (#2232) 2024-10-02 11:51:26 +02:00
Malik-Jouda
db5e5c4907 fix(Carousel): arrows & indicators are broken in RTL (#2251) 2024-10-02 11:16:00 +02:00
Gerben Mulder
474accbefb feat(forms): allow null as initial value (#2275)
Co-authored-by: Romain Hamel <rom.hml@gmail.com>
2024-10-01 19:55:03 +02:00
Daniel Qolami
4ae9654062 fix(Dropdown/Popover): conflict in toggle for touch devices (#2272) 2024-10-01 15:00:58 +02:00
renovate[bot]
847ee4591a chore(deps): lock file maintenance (dev) (#2278)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-30 09:33:34 +02:00
renovate[bot]
f270c7b76e chore(deps): update all non-major dependencies (dev) (#2276)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-30 09:24:14 +02:00
Benjamin Canac
0aa3909e71 fix(Link): allow title field
Resolves #1439
2024-09-27 12:50:18 +02:00
Benjamin Canac
d324dee4f1 chore(renovate): update 2024-09-26 15:12:12 +02:00
renovate[bot]
29591e275c chore(deps): update all non-major dependencies (dev) (#2252)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-26 15:06:22 +02:00
Benjamin Canac
a9339ccf2a docs: remove /dev switch 2024-09-25 12:18:02 +02:00
Benjamin Canac
39b85f11d8 docs(deps): update @nuxt/ui-pro 2024-09-23 12:44:26 +02:00
Benjamin Canac
0430b34ca7 chore(package): put back docs typecheck 2024-09-23 12:35:23 +02:00
Benjamin Canac
345f396110 chore(release): v2.18.6 2024-09-23 12:29:24 +02:00
Benjamin Canac
1b4c178813 chore(package): disable docs typecheck to release 2024-09-23 12:20:10 +02:00
Benjamin Canac
820e93fd1e docs: types with latest vue 2024-09-23 11:56:37 +02:00
Benjamin Canac
417a6aeb37 chore(Table): types with latest vue 2024-09-23 11:56:27 +02:00
Benjamin Canac
32ba17f8e2 chore(deps): refresh lock 2024-09-23 11:46:00 +02:00
renovate[bot]
60c79453ef chore(deps): update all non-major dependencies (dev) (#2229)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-23 11:42:58 +02:00
Benjamin Canac
b728fc9cdb chore(useUI): accept partial ui config 2024-09-23 11:35:19 +02:00
Larry Williamson
e52a7bc01b docs(table): add additional custom sort details (#2234) 2024-09-23 10:58:15 +02:00
Daniel Roe
eecf4f7ed8 fix(components): accept partial config in ui prop (#2235) 2024-09-23 10:55:44 +02:00
Malik-Jouda
ea05414930 fix(Tabs): handle icon margin in RTL mode (#2233) 2024-09-23 10:54:53 +02:00
anthonyfranc
803c20ad92 fix(Modal/Slideover): bind transition class to TransitionChild for Vue 3.5 (#2227)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-09-20 16:03:46 +02:00
Romain Hamel
0a054a52b6 fix(useFormField): optional property access (#2226) 2024-09-20 15:23:59 +02:00
Alex
56118c4a79 fix(Table): colspan with expand (#2217) 2024-09-20 14:33:14 +02:00
Malik-Jouda
28ad5cf982 fix(SelectMenu): wrong placeholder color with multiple (#2218) 2024-09-20 14:24:25 +02:00
renovate[bot]
7835050cf4 chore(deps): update pnpm to v9.11.0 (dev) (#2225)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-20 14:17:33 +02:00
Benjamin Canac
98728f12ee chore(release): v2.18.5 2024-09-18 10:49:21 +02:00
renovate[bot]
ee908602ea chore(deps): update dependency tailwindcss to ^3.4.12 (dev) (#2214)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-18 10:34:42 +02:00
renovate[bot]
5d6b2d4ce1 chore(deps): update dependency date-fns to ^4.1.0 (dev) (#2212)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-17 16:48:56 +02:00
Benjamin Canac
3bfb659a65 chore(package): add missing description 2024-09-17 12:34:03 +02:00
renovate[bot]
439cadd629 chore(deps): update dependency date-fns to v4 (dev) (#2205)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-16 18:34:12 +02:00
Benjamin Canac
57d5203e6a docs(ComponentCard): put back selects after nuxt-component-meta update
Resolves nuxt/ui#2197
2024-09-16 15:26:22 +02:00
renovate[bot]
1488e20992 chore(deps): update all non-major dependencies to ^11.1.0 (dev) (#2206)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-16 15:15:36 +02:00
Dave Stewart
7f50c7031f fix(module): allow CSS variables in tailwind colors (#2014) 2024-09-16 15:15:04 +02:00
Hussam Mousa
68124de510 fix(Table): select all rows reactivity issue (#2200) 2024-09-16 12:54:43 +02:00
renovate[bot]
bae7f3f393 chore(deps): update nuxt framework to v3.13.2 (dev) (#2119)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-09-16 12:49:01 +02:00
renovate[bot]
5b16ccbce6 chore(deps): update all non-major dependencies (dev) (#2193)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-16 11:25:30 +02:00
Malik-Jouda
d22526c0c1 fix(Slideover): bind shadow class to panel (#2201) 2024-09-16 11:25:02 +02:00
Romain Hamel
67c6a74ed1 feat(Form): add errors slot prop (#2188) 2024-09-12 11:14:32 +02:00
Malik-Jouda
bf32baaab0 fix(Slideover): bind rounded class to panel (#2187)
Co-authored-by: malik jouda <m.jouda@approved.tech>
2024-09-12 10:42:22 +02:00
renovate[bot]
a0d94fabdf chore(deps): update all non-major dependencies (dev) (#2183)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-12 10:39:21 +02:00
Bernardo Oliveira
e8ea84a573 fix(Button): button link not showing disabled classes (#2185) 2024-09-11 18:00:45 +02:00
renovate[bot]
0274febbe7 chore(deps): update all non-major dependencies (dev) (#2175)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-11 16:39:40 +02:00
Benjamin Canac
af4df8a2c0 chore(renovate): update 2024-09-11 14:12:00 +02:00
Neil Richter
c850f85aaa fix(Pagination): use links on prev and next button (#2179) 2024-09-11 14:07:25 +02:00
Neil Richter
730cb4953e docs(modal): clarify file names and UModals purpose (#2178) 2024-09-11 14:07:15 +02:00
Benjamin Canac
b01f88fc47 docs(ComponentProps): remove log 2024-09-11 14:04:18 +02:00
Benjamin Canac
400c170d7b chore(renovate): update 2024-09-10 17:53:13 +02:00
Benjamin Canac
c99bd732fd chore(renovate): ignore deps only on dev branch 2024-09-10 17:45:28 +02:00
Daniel Roe
ead904fd2f fix(module): augment @nuxt/schema rather than nuxt/schema (#2171)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-09-10 17:40:48 +02:00
Benjamin Canac
3920dbc393 chore(renovate): add v3 label for v3 branch 2024-09-09 18:20:43 +02:00
renovate[bot]
9e7212287d chore(deps): update all non-major dependencies (dev) (#2160)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-09 18:13:20 +02:00
Benjamin Canac
686bede78b docs(deps): update nuxt-component-meta 2024-09-09 16:03:03 +02:00
Romain Hamel
7aec42ca15 fix(FormGroup): remove id when used with RadioGroup (#2152) 2024-09-06 18:59:17 +02:00
Emmanuel Ferdman
8d79eea19b fix(README): update license link (#2154)
Signed-off-by: Emmanuel Ferdman <emmanuelferdman@gmail.com>
2024-09-06 18:54:24 +02:00
Benjamin Canac
c7becccdfb chore(renovate): ignore happy-dom 2024-09-06 15:29:29 +02:00
Benjamin Canac
91e3c756a6 chore(package): remove engines 2024-09-06 15:18:15 +02:00
renovate[bot]
3036253b40 chore(deps): update dependency @tailwindcss/forms to ^0.5.9 (dev) (#2118)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-06 11:59:19 +02:00
Alex Liu
8210936f22 fix(Textarea): resolve row count calculation errors caused by scrollbar (#2040)
Co-authored-by: Romain Hamel <rom.hml@gmail.com>
2024-09-06 11:56:27 +02:00
Vann
b1f691f28c fix(Table): checkbox can emit the @select event (#2072) 2024-09-06 09:46:29 +02:00
Benjamin Canac
e495bbda94 chore(renovate): add v3 branch 2024-09-05 16:49:37 +02:00
renovate[bot]
8b4726d6d7 chore(deps): update all non-major dependencies (#2108)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-09-05 16:21:05 +02:00
Jonatan Wackström
82c4926c09 fix(Tabs): recalculate marker if items change (#2101) 2024-09-03 10:52:18 +02:00
Selemondev
1282a5f6c0 fix(Carousel): remove trailing space in next button icon (#2088)
Co-authored-by: selemondev-triply <selemon@triply.co>
2024-09-03 10:51:40 +02:00
renovate[bot]
5754ec565d chore(deps): update all non-major dependencies (#2079)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-09-03 10:50:26 +02:00
Ezra Ashenafi
82313e862c fix(Input): avoid binding value when type is file (#2047) 2024-09-03 10:49:24 +02:00
sam
0527f8db58 docs(table): use status instead of deprecated pending in useFetch and useAsyncData (#2084)
Co-authored-by: Samuel Belo <samuel.belo@devoteam.com>
2024-09-03 10:30:09 +02:00
renovate[bot]
f745550f45 chore(deps): update all non-major dependencies (#2067)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-08-22 23:49:03 +02:00
renovate[bot]
f5a490d98b chore(deps): update nuxt framework to ^3.13.0 (#2076)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-08-22 23:24:24 +02:00
kicaj
5abfc34f18 docs(radio-group): improve config section (#2046) 2024-08-22 11:13:04 +02:00
Inesh Bose
e4ba4f7c72 fix(module): consider user tailwind configPath for module as string (#2074) 2024-08-22 11:04:52 +02:00
Benjamin Canac
cff3671c2b chore(renovate): enable lockfile maintenance 2024-08-20 17:05:15 +02:00
Benjamin Canac
44e97da472 chore(renovate): ignore eslint dep 2024-08-20 12:41:34 +02:00
Benjamin Canac
79d42dd97b chore(deps): update @vueuse/* and fuse.js 2024-08-20 12:41:17 +02:00
renovate[bot]
a894a2f099 chore(deps): update devdependency @nuxt/test-utils to ^3.14.1 (#2038)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-08-20 12:25:47 +02:00
Benjamin Canac
b1e6d2294b docs(Footer): add link to /pro/terms 2024-08-20 11:58:16 +02:00
renovate[bot]
9ea724ea82 chore(deps): update all non-major dependencies (#2025)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-08-20 10:50:42 +02:00
Daniel Roe
d0d79e8a17 chore(deps): use latest versions of color-mode + router (#2056) 2024-08-16 16:36:18 +02:00
Benjamin Canac
8d9b89dec7 chore(github): put back labels in issue templates 2024-08-07 15:35:46 +02:00
renovate[bot]
c9fd1a2c7a chore(deps): update all non-major dependencies (#1997)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-08-07 10:23:47 +02:00
Benjamin Canac
c27124ab91 chore(renovate): ignore @nuxt/eslint-config 2024-08-06 17:40:48 +02:00
Benjamin Canac
d6658209b6 chore(release): v2.18.4 2024-08-05 14:35:54 +02:00
Hash Brown
9c04969022 fix(Tabs): use nextTick before marker calc (#2020) 2024-08-05 11:09:27 +02:00
Benjamin Canac
606c7b6567 docs: import $ui from useNuxtApp 2024-08-04 21:50:38 +02:00
Benjamin Canac
7e37668940 fix(module): suffix types imports with /index
Resolves #2018
2024-08-04 21:41:55 +02:00
Romain Hamel
4d61936e7e fix(Form): submit event data (#2012) 2024-08-04 09:49:56 +02:00
Yu Zhuohao
8ac9ca4978 fix(module): reduce css bundle size by fixing safelist regex (#2005)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-08-02 19:02:39 +02:00
Romain Hamel
3485092edb fix(useFormGroup): app config default input size (#2011) 2024-08-02 18:03:11 +02:00
Dave Stewart
1cc7e2a306 fix(module): handle nested colors from ui config (#2008) 2024-08-02 14:22:22 +02:00
Benjamin Canac
3411b89191 chore(renovate): remove @nuxt/module-builder and vue-tsc from ignore 2024-07-30 12:51:31 +02:00
Benjamin Canac
1b869dc1fb chore(release): v2.18.3 2024-07-30 12:36:44 +02:00
renovate[bot]
4ae6e31bd9 chore(deps): update devdependency @nuxt/test-utils to ^3.14.0 (#1989)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-07-30 12:27:13 +02:00
Benjamin Canac
69f605fa72 fix(Link): define rel as any 2024-07-30 12:26:39 +02:00
Benjamin Canac
93ddf1d60b fix(types): only use .ts for index 2024-07-30 11:14:43 +02:00
renovate[bot]
03c5820f5d chore(deps): update all non-major dependencies (#1975)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-07-30 11:03:34 +02:00
Benjamin Canac
c88bb8c56b chore(release): v2.18.2 2024-07-25 17:43:46 +02:00
Benjamin Canac
aaabf61c01 chore(deps): refresh lock 2024-07-25 16:29:16 +02:00
Benjamin Canac
4fd1be2892 fix(Tabs): add missing UIcon import 2024-07-25 15:10:51 +02:00
Benjamin Canac
e60911010a chore(release): v2.18.1 2024-07-25 14:25:56 +02:00
Benjamin Canac
ea721a3705 fix(components): use relative imports 2024-07-25 12:47:58 +02:00
Benjamin Canac
4614aca70e docs(deps): update @nuxt/ui-pro 2024-07-25 12:47:58 +02:00
Benjamin Canac
ec2c1162dd docs(slideover): clean example 2024-07-25 12:47:58 +02:00
Benjamin Canac
64c38cb35e chore(types): use (...args: any[]) => void instead of Function 2024-07-25 12:47:58 +02:00
Benjamin Canac
503885a5fe chore(deps): remove vue-tsc resolution 2024-07-25 12:42:55 +02:00
Benjamin Canac
635b0f41e2 chore(release): v2.18.0 2024-07-25 10:44:46 +02:00
Benjamin Canac
5db18c0056 fix(Accordion): truncate buttons
Resolves #1909
2024-07-23 16:23:14 +02:00
Benjamin Canac
c3122f776d feat(Checkbox/Radio/RadioGroup): add help slot
Resolves #1957
2024-07-23 16:16:57 +02:00
Maxime Pauvert
b264ad2ebd feat(CommandPalette): handle static groups (#1458)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-07-23 16:05:20 +02:00
Benjamin Canac
f374b14dba docs: update badges 2024-07-23 15:46:14 +02:00
Everton
7155318029 feat(Table): expand row (#1036)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-07-23 15:43:39 +02:00
Benjamin Canac
c39c770a70 chore(Table): columns types 2024-07-23 14:55:06 +02:00
Cardona Simon
d18477def5 feat(RadioGroup): add selected to label slot props (#1587) 2024-07-23 14:54:18 +02:00
Alexander Trost
748e49175d feat(Table): handle rowClass property in columns (#1632)
Signed-off-by: Alexander Trost <galexrt@googlemail.com>
2024-07-23 14:44:33 +02:00
chenying
f74f1df6ca fix(Carousel): remove mix-blend-overlay on indicators (#1714)
Co-authored-by: chenying <chenying@addcn.com>
2024-07-23 14:39:16 +02:00
Benjamin Canac
d2d37e4093 playground(nuxt.config): add compatibilityDate 2024-07-23 14:36:58 +02:00
Benjamin Canac
b57676c1a5 docs(nuxt.config): add compatibilityDate 2024-07-23 14:36:31 +02:00
Abel Derderian
e8eb3941ad feat(Tabs): handle icon in items (#1798)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-07-23 14:36:03 +02:00
Benjamin Canac
839bf72c61 chore(deps): remove typescript 2024-07-23 14:19:30 +02:00
Benjamin Canac
fcf46d7171 chore(CommandPalette): improve fuse.js import types .ts file 2024-07-23 14:17:58 +02:00
Benjamin Canac
8c531615ef chore(types): rename .d.ts to .ts 2024-07-23 14:08:57 +02:00
Benjamin Canac
51e6cb8417 chore(deps): remove @nuxt/module-builder resolution 2024-07-23 14:08:37 +02:00
Benjamin Canac
2443fd70eb docs: typecheck 2024-07-23 13:22:25 +02:00
Benjamin Canac
4974280d82 docs(deps): update @nuxt/ui-pro 2024-07-23 12:14:07 +02:00
Benjamin Canac
b7d90f78b8 chore(deps): update vue-tsc resolution 2024-07-23 12:03:51 +02:00
Benjamin Canac
b2e0566c16 docs: typecheck 2024-07-23 11:51:02 +02:00
Thiago Petherson
64e8a87073 docs(notification): improve example (#1973) 2024-07-23 11:07:02 +02:00
Benjamin Canac
720c44dd5e fix(Link): allow ariaLabel to be picked
Resolves #1934
2024-07-22 12:24:09 +02:00
Matej Černý
6b216cab1b feat(SelectMenu): add selected to label / leading / trailing slots props (#1349)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-07-22 12:12:32 +02:00
Benjamin Canac
82c8717fbf chore(deps): dedupe 2024-07-22 11:15:06 +02:00
renovate[bot]
d1c80861a1 chore(deps): update all non-major dependencies (#1969)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-07-21 15:54:10 +02:00
renovate[bot]
2ac31c0173 chore(deps): update nuxt framework to ^3.12.4 (#1971)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-07-21 12:16:26 +02:00
renovate[bot]
77f0156b43 chore(deps): update dependency @octokit/rest to v21 (#1894)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-07-18 13:51:55 +02:00
Vincent Ratier
7e974b55d7 feat(SelectMenu): handle function in showCreateOptionWhen prop (#1853)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-07-18 13:51:01 +02:00
Benjamin Canac
6aaf12b9af chore(github): update stale workflow 2024-07-18 10:52:30 +02:00
Benjamin Canac
4b397c0f7e chore(github): add stale workflow 2024-07-17 14:58:49 +02:00
renovate[bot]
80b2a60718 chore(deps): update all non-major dependencies (#1967)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-07-17 14:37:48 +02:00
Benjamin Canac
6691311782 chore(github): update issue templates 2024-07-17 14:36:36 +02:00
Benjamin Canac
2c55fb6336 fix(Alert/Notification): missing margin on description
Resolves #1959
2024-07-16 17:10:09 +02:00
Benjamin Canac
e2881d3801 fix(InputMenu/SelectMenu): prevent double filter with async search
Resolves #1966
2024-07-16 15:10:37 +02:00
renovate[bot]
46e9b128da chore(deps): update all non-major dependencies (#1756)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-07-16 14:45:13 +02:00
Benjamin Canac
53003fcd07 fix(Breadcrumb): use rotate on rtl icon 2024-07-10 17:48:42 +02:00
Benjamin Canac
2bb8360223 docs(deps): add nuxt-component-meta resolution 2024-07-10 17:48:42 +02:00
Juho Rutila
bce94db9fd feat(Skeleton): add as prop (#1955) 2024-07-10 13:58:01 +02:00
Adrien Autricque
cf482581f4 docs(form): typo (#1953)
Co-authored-by: Adrien AUTRICQUE <adrien.autricque@exotec.com>
2024-07-10 11:19:29 +02:00
Benjamin Canac
19cab36d73 chore(deps): update 2024-07-09 14:25:30 +02:00
Benjamin Canac
df2b5e2419 chore(renovate): ignore @nuxt/module-builder 2024-07-09 14:20:41 +02:00
Benjamin Canac
1334ec59b1 chore(renovate): ignore vue-tsc 2024-07-09 12:35:19 +02:00
Dave Stewart
3f8ea5dbde feat(module): improve app config types autocomplete (#1870)
Co-authored-by: Dave Stewart <dev@davestewart.co.uk>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-07-09 12:23:57 +02:00
renovate[bot]
c0ef69d314 chore(deps): update devdependency vitest to v2 (#1951)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-07-09 11:08:40 +02:00
Rihan
567045211a chore(deps): update pnpm/action-setup action to v4 (#1942)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-07-09 11:08:11 +02:00
Benjamin Canac
9e12e9519e docs: update headlessui.com broken urls 2024-07-05 16:14:06 +02:00
Benjamin Canac
67e6a4a565 chore(renovate): ignore valibot30 / valibot31 deps 2024-07-03 19:29:31 +02:00
renovate[bot]
2dcf70cf3c chore(deps): update nuxt framework to ^3.12.3 (#1938)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-07-03 18:07:50 +02:00
Adrien Figueiredo
8eca5a0d62 fix(RadioGroup): allow boolean in modelValue prop (#1913)
Co-authored-by: Adrien Figueiredo <>
2024-07-01 11:02:36 +02:00
Daniel Roe
3e9c96bb7a docs: add site.url (#1924) 2024-06-28 15:24:00 +02:00
Christoph Biering
cb36094dbe chore(deps): update @nuxtjs/color-mode to v3.4.2 (#1922)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-06-27 12:31:34 +02:00
Fabian Hiller
839a6029e7 chore(deps): update valibot to v0.33.0 (#1914) 2024-06-27 11:57:34 +02:00
Benjamin Canac
4c0a3d8dc0 docs(icon): put back component page 2024-06-25 11:44:51 +02:00
Benjamin Canac
c904604c23 feat(Icon)!: migrate from @egoist/tailwindcss-icons to new @nuxt/icon (#1789) 2024-06-24 12:46:41 +02:00
Benjamin Canac
bfa2e707d8 chore(deps): update pnpm 2024-06-24 12:20:26 +02:00
Benjamin Canac
f16291d290 docs(deps): update @nuxt/content 2024-06-24 11:37:34 +02:00
Neil Richter
abd13f1f8f fix(Progress): pass down attrs to <progress> to improve accessibility (#1881) 2024-06-24 10:57:01 +02:00
John Tanzer
0a47a2b5f2 chore(eslint): add no-trailing-spaces rule (#1906) 2024-06-24 10:55:50 +02:00
Neil Richter
99c52e5008 fix(FormGroup): don't check for error slot so help slot can render (#1888) 2024-06-24 10:54:14 +02:00
Benjamin Canac
4d5f250902 fix(InputMenu/SelectMenu): invalid label with value-attribute and async search
Resolves #1780
2024-06-19 12:19:15 +02:00
Romain Hamel
6b6b03d59f fix(ButtonGroup/FormGroup): pass default sizes to children (#1875) 2024-06-19 12:08:13 +02:00
Benjamin Canac
4ad904f83d docs(home): improve contributors animation 2024-06-18 22:13:10 +02:00
Benjamin Canac
c28ef0abb8 docs(home): improve community section (#1891) 2024-06-18 17:29:52 +02:00
Benjamin Canac
9c3ed4b78f chore(github): remove pnpm version with packageManger 2024-06-18 17:27:58 +02:00
muri
a1c116de7b docs(form): improve validation references (#1877) 2024-06-18 14:02:51 +02:00
Benjamin Canac
755c4d32b3 docs(deps): update @nuxt/ui-pro 2024-06-18 13:11:24 +02:00
Benjamin Canac
05c7836387 docs(deps): update nuxt-og-image to v3 2024-06-18 11:55:28 +02:00
renovate[bot]
e9d801c52a chore(deps): update nuxt framework to ^3.12.2 (#1884)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-06-18 10:22:47 +02:00
Daniel Roe
7211e3a1eb chore: indicate compatibility with new v4 major (#1879)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-06-15 10:35:32 +02:00
Benjamin Canac
89d18f8f1d docs(deps): update @nuxt/ui-pro 2024-06-13 12:58:37 +02:00
Benjamin Canac
1e7470f531 docs: update badges 2024-06-13 11:29:39 +02:00
Benjamin Canac
b6736d1efd chore(release): v2.17.0 2024-06-13 11:24:50 +02:00
Benjamin Canac
f6e695ffc8 chore(deps): update 2024-06-13 11:15:33 +02:00
Benjamin Canac
e8898d15a6 fix(Alert/Notification): use div for description
Resolves #1551
2024-06-13 11:15:27 +02:00
Thibault Vlacich
f65aefb706 fix(Alert): base style not applied on icon (#1859)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-06-12 10:25:18 +02:00
Benjamin Canac
9b9ccdb59e fix(SelectMenu): wrong placeholder color when modelValue is an empty string
Resolves #1862
2024-06-12 10:11:16 +02:00
renovate[bot]
688232215d chore(deps): update nuxt framework to ^3.12.1 (#1861)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-06-11 17:13:37 +02:00
Benjamin Canac
ebfb835033 fix(Breadcrumb): allow aria-current to be overrideable
Related to #1856
2024-06-11 12:27:44 +02:00
renovate[bot]
838d6c832f chore(deps): update nuxt framework to ^3.12.0 (#1860)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-06-11 12:15:16 +02:00
eduardo-faith
e7c2f7856c fix(Input): hide wrapper when type is hidden (#1797)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-06-11 11:58:49 +02:00
Fabian Hiller
1d5bd89d58 feat(Form): update and migrate valibot to v0.31.0 (#1848)
Co-authored-by: Romain Hamel <romain@boilr.io>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-06-11 11:40:44 +02:00
Benjamin Canac
6c124bb1ac fix(Select): remove defaults for value and text
Resolves #1702
2024-06-06 10:51:34 +02:00
Benjamin Canac
49174b7628 chore(deps): update @​egoist/tailwindcss-icons
Resolves #1840
2024-06-06 10:44:50 +02:00
Vitta
50ad14f9df feat(Slideover): handle top and bottom side (#1834) 2024-06-05 10:30:45 +02:00
Vitta
6e2678d1d8 feat(Tabs): add content prop to avoid the render of the HTML markup (#1831)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-06-04 10:23:17 +02:00
Khaled Oghli
831c560a96 docs(slideover): add close button in some examples for mobile (#1827)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-06-03 15:30:45 +02:00
Romain Hamel
06990beabf fix(Form): maintain other errors when using setErrors with a path (#1818)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-06-03 13:59:26 +02:00
networdai
3ebff4d133 feat(Notification): allow ring customization with {color} (#1830)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-06-03 11:45:36 +02:00
Khaled Oghli
d66cfa9d7d docs(table): ensure scroll and pagination visibility on mobile (#1828)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-06-03 11:44:46 +02:00
Benjamin Canac
75c0d9e31f chore(deps): update 2024-06-03 11:40:39 +02:00
Benjamin Canac
6033872ef8 chore(deps): pin vue-tsc 2024-06-03 11:04:18 +02:00
Benjamin Canac
838cb7212a docs(alert): remove missing example 2024-06-03 11:00:42 +02:00
John Tanz
c8dd71c4f5 feat(Alert): add actions slot (#1785)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-05-28 12:29:10 +02:00
Mukund Shah
4f0d00f7a6 fix(Carousel): prevent mouse click when dragging (#1781) 2024-05-15 12:18:51 +02:00
Benjamin Canac
3b975634e8 chore(package): define packageManager 2024-05-14 15:13:11 +02:00
Benjamin Canac
249bbd49dc fix(CommandPalette): hide empty-state when null
Resolves #1787
2024-05-14 14:57:19 +02:00
Milos Dimitrijevic
3c1602af37 docs(form): fix link to /form-group (#1777) 2024-05-10 16:29:22 +02:00
Benjamin Canac
e1ca6e0cde chore(deps): update @headlessui/vue
Resolves #1760
2024-05-10 11:41:53 +02:00
Benjamin Canac
3b3bd16afe docs(deps): update @nuxt/ui-pro 2024-05-10 11:25:45 +02:00
Benjamin Canac
fab9cbebd8 docs(context-menu): add missing @vueuse/core imports
Resolves #1762
2024-05-10 11:10:00 +02:00
Benjamin Canac
581b470cc7 fix(Link): typo in exactHash type
Resolves #1767
2024-05-09 11:38:39 +02:00
Benjamin Canac
24d30cd1f3 chore(deps): pin @headlessui/vue to 1.7.20
Resolves #1760
2024-05-09 11:38:10 +02:00
Benjamin Canac
cc52bffccf chore(release): v2.16.0 2024-05-07 14:19:28 +02:00
renovate[bot]
eb2601d4da chore(deps): update all non-major dependencies (#1752)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-05-07 14:16:58 +02:00
renovate[bot]
f726b5f094 chore(deps): update all non-major dependencies (#1719)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-05-06 17:00:48 +02:00
guylil
37ce62acb9 docs(FormGroup): incorrect icon in description slot example (#1749) 2024-05-06 12:22:48 +02:00
Romain Hamel
f97b728968 docs(Form): clarify when the @error event is triggered (#1747) 2024-05-06 10:39:05 +02:00
chenying
7e6ba78681 feat(InputMenu/SelectMenu): allow lazy search (#1705)
Co-authored-by: chenying <chenying@addcn.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-04-26 15:43:29 +02:00
Benjamin Canac
ed5c74dc17 fix(Input)!: redesign file type without absolute positioning (#1712) 2024-04-25 17:12:06 +02:00
Benjamin Canac
bb3ea40218 chore(deps): remove resolutions + update 2024-04-25 13:00:16 +02:00
Inesh Bose
821e15b696 feat(module): HMR support with @nuxtjs/tailwindcss (#1665)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-04-24 12:20:10 +02:00
Eugen Istoc
bd3fa8658f fix(Slideover): export and clean types (#1692)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-04-22 11:13:34 +02:00
Moritz
82d619b2a7 feat(useToast): allow clearing all notifications (#1695) 2024-04-22 11:01:48 +02:00
Neil Richter
8d9d9736ba feat(Pagination): allow using links for pagination buttons (#1682) 2024-04-18 12:38:48 +02:00
Neil Richter
3fca66857d feat(Table): allow providing a <caption> (#1680) 2024-04-16 16:39:52 +02:00
renovate[bot]
4853520eb3 chore(deps): update devdependency @nuxt/test-utils to ^3.12.1 (#1677)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-16 11:11:35 +02:00
Benjamin Canac
5481dab53d fix(Breadcrumb): pass click event to ULink 2024-04-16 10:36:45 +02:00
Neil Richter
6f60fa9a98 fix(Table): provide aria-sort for sortable table headings (#1675) 2024-04-15 18:13:01 +02:00
Neil Richter
cba9ad78db fix(Notification): update timer when timeout prop changes (#1673) 2024-04-15 16:38:07 +02:00
Damian Głowala
bbc8f4e6ac chore(README): update installation section (#1659) 2024-04-15 10:28:51 +02:00
Neil Richter
ed3a3babdb feat(useToast): allow updating an existing notification (#1668) 2024-04-15 10:27:39 +02:00
renovate[bot]
4415d4111e chore(deps): update devdependency @nuxt/ui-pro to v1.1.0-28548740.d20325b (#1658)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-12 19:12:53 +02:00
Benjamin Canac
c75c0152ce chore(release): v2.15.2 2024-04-12 14:23:50 +02:00
renovate[bot]
993bb89e02 chore(deps): update all non-major dependencies (#1652)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-12 14:16:34 +02:00
Benjamin Canac
9f01145bc6 fix(Breadcrumb): missing min-w-0 on wrapper to truncate
Resolves #1650
2024-04-11 21:52:07 +02:00
renovate[bot]
c1d9e0ecd4 chore(deps): update all non-major dependencies (#1625)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-10 22:46:08 +02:00
gangan
f610c96a0b docs: use nuxi init -t ui command in installation (#1648) 2024-04-10 18:56:35 +02:00
Alex Thorwaldson
8b546600db feat(Table): add checkbox ui config (#1409)
Co-authored-by: gangan <44604921+shinGangan@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-10 17:54:16 +02:00
Daniel Roe
f08471ccda docs: use new nuxi module add command in installation (#1606)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-04-10 17:52:34 +02:00
Neil Richter
d19d7077e4 docs(modal): provide an example to bind event listeners (#1611) 2024-04-10 17:15:39 +02:00
Eugen Istoc
07a4d13c0f fix(Slideover): wait for transition to complete to reset state (#1624) 2024-04-05 19:31:29 +02:00
renovate[bot]
9e90d1768b chore(deps): update devdependency @nuxt/eslint-config to ^0.3.0 (#1623)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-05 17:51:40 +02:00
Neil Richter
91e5002050 feat(Accordion): add unmount prop to allow lazy mounting for heavy components (#1590) 2024-04-05 14:11:31 +02:00
renovate[bot]
eb68d0d453 chore(deps): update devdependency @nuxt/ui-pro to v1.1.0-28538540.a353e68 (#1622)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-05 14:08:08 +02:00
Neil Richter
2bdb5d2b42 fix(Modal): wait for transition to complete to reset state (#1618) 2024-04-05 14:07:51 +02:00
renovate[bot]
b62cd7905d chore(deps): update devdependency @nuxt/ui-pro to v1.1.0-28538504.d4106a4 (#1620)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-05 12:44:03 +02:00
Eugen Istoc
58faa1053b fix(Slideover): remove dynamic component when closing (#1615)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-04-05 12:43:50 +02:00
Kshitij Subedi
e909884d03 fix(Carousel): next and prev buttons disabled (#1619) 2024-04-05 12:20:50 +02:00
renovate[bot]
5e84fd0570 chore(deps): update devdependency @nuxtjs/plausible to v1 (#1610)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-05 12:18:39 +02:00
Benjamin Canac
98c0f567fc docs: replace i-heroicons-credit-card with i-heroicons-ticket 2024-04-05 11:57:47 +02:00
renovate[bot]
379d20fc3c chore(deps): update all non-major dependencies (#1602)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-05 11:28:22 +02:00
renovate[bot]
c12f94653e chore(deps): update nuxt framework to ^3.11.2 (#1613)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-05 11:06:04 +02:00
vahid bagheri
2392b4aa40 fix(Popover/Dropdown): prevent unintended closure on touchstart in mobile devices (#1609) 2024-04-04 00:18:40 +02:00
Benjamin Canac
36055ba978 chore(release): v2.15.1 2024-04-02 13:08:11 +02:00
renovate[bot]
73541f2d4f chore(deps): update all non-major dependencies (#1562)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-02 12:02:39 +02:00
Benjamin Canac
03030ab1db docs(nuxt.config): remove @nuxtjs/google-fonts and @nuxtjs/fontaine config 2024-03-29 10:57:31 +01:00
Cardona Simon
c98d6e31c0 fix(Checkbox): @change event value (#1580)
Co-authored-by: Romain Hamel <rom.hml@gmail.com>
2024-03-28 21:29:29 +01:00
Benjamin Canac
49b73aa024 feat(Avatar): add as prop to use NuxtImg underneath
Resolves #1577
2024-03-28 11:04:20 +01:00
1500 changed files with 36738 additions and 123649 deletions

View File

@@ -5,7 +5,7 @@ body:
- type: markdown
attributes:
value: |
Before reporting a bug, please make sure that you have read through our [documentation](https://ui2.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
Before reporting a bug, please make sure that you have read through our [documentation](https://ui.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
- type: textarea
id: env
attributes:
@@ -28,7 +28,7 @@ body:
id: version
attributes:
label: Version
placeholder: v2.20.0
placeholder: v2.8.0
validations:
required: true
- type: textarea

View File

@@ -5,7 +5,12 @@ body:
- type: markdown
attributes:
value: |
Before reporting a bug, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
> [!IMPORTANT]
> As Nuxt UI v3 is currently in alpha, we recommend thorough testing before using it in production environments. We're actively working on stabilization and welcome feedback from early adopters to improve the library.
- type: markdown
attributes:
value: |
Before reporting a bug, please make sure that you have read through our [v3 documentation](https://ui3.nuxt.dev/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
- type: textarea
id: env
attributes:
@@ -24,27 +29,18 @@ body:
- Build Modules: `-`
validations:
required: true
- type: dropdown
id: package
attributes:
label: Is this bug related to Nuxt or Vue?
options:
- Nuxt
- Vue
validations:
required: true
- type: input
id: version
attributes:
label: Version
placeholder: v3.0.0
placeholder: v3.0.0-alpha.5
validations:
required: true
- type: textarea
id: reproduction
attributes:
label: Reproduction
description: Please provide a reproduction link using the Nuxt template https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks or the Vue template https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn. A minimal [reproduction is required](https://antfu.me/posts/why-reproductions-are-required) unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "needs reproduction" label. If no reproduction is provided we might close it.
description: Please provide a reproduction link. A minimal [reproduction is required](https://antfu.me/posts/why-reproductions-are-required) unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "needs reproduction" label. If no reproduction is provided we might close it.
placeholder: https://github.com/my/reproduction
validations:
required: true

View File

@@ -1,20 +0,0 @@
name: "🚀 Feature request (v3)"
description: Suggest an idea or enhancement for the module (v3 only).
labels: ["triage", "enhancement", "v3"]
body:
- type: markdown
attributes:
value: |
Before requesting a feature, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
- type: textarea
id: description
attributes:
label: Description
description: A clear and concise description of what you think would be an helpful addition to the module, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
validations:
required: true
- type: textarea
id: additonal
attributes:
label: Additional context
description: If applicable, add any other context or screenshots here.

View File

@@ -5,7 +5,16 @@ body:
- type: markdown
attributes:
value: |
Before requesting a feature, please make sure that you have read through our [documentation](https://ui2.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
Before requesting a feature, please make sure that you have read through our [documentation](https://ui.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
- type: dropdown
id: version
attributes:
label: For what version of Nuxt UI are you suggesting this?
options:
- v2.x
- v3-alpha
validations:
required: true
- type: textarea
id: description
attributes:

View File

@@ -1,14 +0,0 @@
name: "💬 Question (v3)"
description: Ask a question about the module (v3 only).
labels: ["question", "v3"]
body:
- type: markdown
attributes:
value: |
Before asking a question, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
- type: textarea
id: description
attributes:
label: Description
validations:
required: true

View File

@@ -5,7 +5,16 @@ body:
- type: markdown
attributes:
value: |
Before asking a question, please make sure that you have read through our [documentation](https://ui2.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
Before asking a question, please make sure that you have read through our [documentation](https://ui.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
- type: dropdown
id: version
attributes:
label: For what version of Nuxt UI are you asking this question?
options:
- v2.x
- v3-alpha
validations:
required: true
- type: textarea
id: description
attributes:

72
.github/workflows/ci-dev.yml vendored Normal file
View File

@@ -0,0 +1,72 @@
name: ci-dev
on:
push:
branches:
- dev
pull_request:
branches:
- dev
jobs:
ci:
runs-on: ${{ matrix.os }}
permissions:
contents: read
pull-requests: read
strategy:
matrix:
os: [ubuntu-latest] # macos-latest, windows-latest
node: [20]
env:
NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Install node
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node }}
cache: pnpm
- name: Filter changes
uses: dorny/paths-filter@v3
id: changes
with:
filters: |
src:
- 'src/**'
- 'package.json'
- 'pnpm-lock.yaml'
- name: Install dependencies
run: pnpm install
- name: Prepare
run: pnpm run dev:prepare
- name: Lint
run: pnpm run lint
- name: Typecheck
run: pnpm run typecheck
- name: Build
run: pnpm run build
- name: Test
run: pnpm run test run
- name: Release Edge
if: github.event_name == 'push' && steps.changes.outputs.src == 'true'
run: ./scripts/release-edge.sh
env:
NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}

61
.github/workflows/ci.yml vendored Normal file
View File

@@ -0,0 +1,61 @@
name: ci-main
on:
push:
branches:
- main
jobs:
ci:
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest] # macos-latest, windows-latest
node: [20]
env:
NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Install node
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node }}
cache: pnpm
- name: Install dependencies
run: pnpm install
- name: Prepare
run: pnpm run dev:prepare
- name: Lint
run: pnpm run lint
- name: Typecheck
run: pnpm run typecheck
- name: Build
run: pnpm run build
- name: Test
run: pnpm run test run
- name: Version Check
id: check
uses: EndBug/version-check@v2
with:
token: ${{ secrets.GITHUB_TOKEN }}
- name: Release
if: github.event_name == 'push' && steps.check.outputs.changed == 'true'
run: ./scripts/release.sh
env:
NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

View File

@@ -1,53 +0,0 @@
name: docs
on: push
jobs:
deploy:
runs-on: ${{ matrix.os }}
environment:
name: ${{ github.ref == 'refs/heads/v3' && 'production' || 'preview' }}
url: ${{ steps.deploy.outputs.deployment-url }}
permissions:
contents: read
id-token: write
strategy:
matrix:
os: [ubuntu-latest] # macos-latest, windows-latest
node: [22]
env:
NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
steps:
- uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Install node
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node }}
cache: pnpm
- name: Install dependencies
run: pnpm install
- name: Prepare build
run: pnpm run dev:prepare
- name: Build application
run: pnpm run docs:build
env:
NODE_OPTIONS: '--max-old-space-size=8192'
- name: Deploy to NuxtHub
uses: nuxt-hub/action@v1
id: deploy
with:
project-key: ui-7eg3
directory: docs/dist

View File

@@ -1,214 +0,0 @@
name: module
on:
push:
branches:
- v3
pull_request:
branches:
- v3
jobs:
build:
runs-on: ${{ matrix.os }}
permissions:
contents: read
pull-requests: read
strategy:
matrix:
os: [ubuntu-latest, windows-latest] # macos-latest
node: [22]
env:
NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Install node
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node }}
cache: pnpm
- name: Install dependencies
run: pnpm install
- name: Prepare
run: pnpm run dev:prepare
- name: Lint
run: pnpm run lint
- name: Typecheck
run: pnpm run typecheck
- name: Test
run: pnpm run test run
- name: Test (vue)
run: pnpm run test:vue run
- name: Build
run: pnpm run build
- name: Build playground
run: pnpm run dev:build
- name: Build playground (vue)
run: pnpm run dev:vue:build
- name: Publish
if: matrix.os != 'windows-latest'
run: pnpx pkg-pr-new publish --compact --no-template --pnpm
starter-nuxt:
needs: build
runs-on: ${{ matrix.os }}
permissions:
contents: read
pull-requests: read
strategy:
matrix:
os: [ubuntu-latest] # macos-latest, windows-latest
node: [22]
steps:
- name: Checkout
uses: actions/checkout@v4
with:
repository: nuxtlabs/nuxt-ui-starter
- name: Store commit SHA
run: |
echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Install node
uses: actions/setup-node@v4
with:
node-version: 22
cache: pnpm
- name: Install latest nuxt/ui
run: pnpm install https://pkg.pr.new/@nuxt/ui@${{ env.COMMIT_SHA }} --lockfile-only
- name: Install dependencies
run: pnpm install
- name: Typecheck
run: pnpm run typecheck
- name: Build
run: pnpm run build
starter-vue:
needs: build
runs-on: ${{ matrix.os }}
permissions:
contents: read
pull-requests: read
strategy:
matrix:
os: [ubuntu-latest] # macos-latest, windows-latest
node: [22]
steps:
- name: Checkout
uses: actions/checkout@v4
with:
repository: nuxtlabs/nuxt-ui-vue-starter
- name: Store commit SHA
run: |
echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Install node
uses: actions/setup-node@v4
with:
node-version: 22
cache: pnpm
- name: Install latest nuxt/ui
run: pnpm install https://pkg.pr.new/@nuxt/ui@${{ env.COMMIT_SHA }} --lockfile-only
- name: Install dependencies
run: pnpm install
- name: Typecheck
run: pnpm run typecheck
- name: Build
run: pnpm run build
nuxt-ui-pro:
needs: build
# Only run this job if not a fork PR (when push event or PR from same repo)
if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository
runs-on: ${{ matrix.os }}
permissions:
contents: read
pull-requests: read
strategy:
matrix:
os: [ubuntu-latest] # macos-latest, windows-latest
node: [22]
env:
NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
steps:
- name: Checkout
uses: actions/checkout@v4
with:
repository: nuxt/ui-pro
token: ${{ secrets.NUXT_GITHUB_TOKEN }}
- name: Store commit SHA
run: |
echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Install node
uses: actions/setup-node@v4
with:
node-version: 22
cache: pnpm
- name: Install latest nuxt/ui
run: pnpm install https://pkg.pr.new/@nuxt/ui@${{ env.COMMIT_SHA }} --lockfile-only
- name: Install dependencies
run: pnpm install
- name: Prepare
run: pnpm run dev:prepare
- name: Typecheck
run: pnpm run typecheck
- name: Build
run: pnpm run build

View File

@@ -1,53 +0,0 @@
name: playground
on:
push:
branches:
- v3
jobs:
deploy:
runs-on: ${{ matrix.os }}
environment:
name: ${{ github.ref == 'refs/heads/v3' && 'production' || 'preview' }}
url: ${{ steps.deploy.outputs.deployment-url }}
permissions:
contents: read
id-token: write
strategy:
matrix:
os: [ubuntu-latest] # macos-latest, windows-latest
node: [22]
steps:
- uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Install node
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node }}
cache: pnpm
- name: Install dependencies
run: pnpm install
- name: Prepare build
run: pnpm run dev:prepare
- name: Build application
run: pnpm run dev:build
env:
NITRO_PRESET: cloudflare-pages
- name: Deploy to NuxtHub
uses: nuxt-hub/action@v1
id: deploy
with:
project-key: ui3-playground-pb9b
directory: playground/dist

View File

@@ -10,16 +10,14 @@ jobs:
permissions:
issues: write
pull-requests: write
steps:
- uses: actions/stale@v9
with:
days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
stale-issue-label: 'needs reproduction' # Label that flags an issue as stale.
only-labels: 'needs reproduction' # Only process these issues
days-before-issue-close: 7
ignore-updates: true
remove-stale-when-updated: false
close-issue-message: This issue was closed because it was open for 7 days without a reproduction.
close-issue-label: closed-by-bot
operations-per-run: 300 #default 30
exempt-issue-labels: triage,v3
stale-issue-message: 'This issue is stale because it has been open for 30 days with no activity.'
stale-issue-label: stale
stale-pr-label: stale
days-before-stale: 30
days-before-close: -1

34
.gitignore vendored
View File

@@ -1,32 +1,12 @@
.component-meta/
component-meta.*
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules
# Logs
logs
*.log
# Misc
.nuxt
nuxt.d.ts
.output
dist
.DS_Store
.fleet
.history
.vercel
.idea
# Local env files
.env
.env.*
!.env.example
playground-vue/auto-imports.d.ts
playground-vue/components.d.ts
playground-vue/tsconfig.app.tsbuildinfo
playground-vue/tsconfig.node.tsbuildinfo
.data

1
.nuxtrc Normal file
View File

@@ -0,0 +1 @@
typescript.includeWorkspace=true

View File

@@ -3,6 +3,9 @@
"commitMessage": "chore(release): v${version}",
"tagName": "v${version}"
},
"npm": {
"publish": false
},
"github": {
"release": true,
"releaseName": "v${version}",

3
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"prettier.enable": false
}

View File

@@ -1,819 +1,62 @@
# Changelog
## [3.0.2](https://github.com/nuxt/ui/compare/v3.0.1...v3.0.2) (2025-03-28)
## [2.19.2](https://github.com/nuxt/ui/compare/v2.19.1...v2.19.2) (2024-11-05)
### Bug Fixes
* **Button:** put back `target` override ([212f7df](https://github.com/nuxt/ui/commit/212f7df35b9f81d189e1ee3e34f6fd2234cf52fe))
## [2.19.1](https://github.com/nuxt/ui/compare/v2.19.0...v2.19.1) (2024-11-05)
### Bug Fixes
* **InputMenu/SelectMenu:** regex breaks build ([cb6f5f2](https://github.com/nuxt/ui/commit/cb6f5f2d71ea8bb526a8f958daec8e9871469b63))
## [2.19.0](https://github.com/nuxt/ui/compare/v2.18.7...v2.19.0) (2024-11-05)
### Features
* **Calendar:** allow year and month buttons styling ([#3672](https://github.com/nuxt/ui/issues/3672)) ([4a2b77d](https://github.com/nuxt/ui/commit/4a2b77d86c28806234002340eda39de4dc78cce0))
* **locale:** add Armenian language ([#3664](https://github.com/nuxt/ui/issues/3664)) ([c76f590](https://github.com/nuxt/ui/commit/c76f5900970e3f5c451192b1207ccea04771e8b3))
* **Table:** add `empty` prop ([afff54f](https://github.com/nuxt/ui/commit/afff54fecd31497238461e0a44abd8668ed734c3))
* **Form:** add `superstruct` validation ([#2357](https://github.com/nuxt/ui/issues/2357)) ([3cda6c6](https://github.com/nuxt/ui/commit/3cda6c6478d5284a3ffcb973270831601e8e5657))
* **Form:** apply transformations ([#2460](https://github.com/nuxt/ui/issues/2460)) ([ceecb60](https://github.com/nuxt/ui/commit/ceecb60c3bbd5507b1f54faed001818639d9269c))
* **Input/Textarea:** nullify model modifier ([#2309](https://github.com/nuxt/ui/issues/2309)) ([9dd7e61](https://github.com/nuxt/ui/commit/9dd7e615e97b6bf3c4c4096edd35a86ca3cfd53c))
* **InputMenu:** allows to customize labels ([#2295](https://github.com/nuxt/ui/issues/2295)) ([ddf67a0](https://github.com/nuxt/ui/commit/ddf67a060ba659f102673eff31eb2e30231c2d93))
* **Pagination:** improve slot props ([#2522](https://github.com/nuxt/ui/issues/2522)) ([c71fdc8](https://github.com/nuxt/ui/commit/c71fdc8795812bed779ab247451efd3db031e4cd))
* **SelectMenu:** allows to customize labels ([#2266](https://github.com/nuxt/ui/issues/2266)) ([54e713d](https://github.com/nuxt/ui/commit/54e713d31ae0b80b0f69dd507f71387100204ac3))
* **Table:** improve `expanded` row ([#2485](https://github.com/nuxt/ui/issues/2485)) ([1acd01a](https://github.com/nuxt/ui/commit/1acd01a440db7a7fa765189d8bde424ade9074e9))
### Bug Fixes
* **Avatar:** proxy `$attrs` to default slot ([#3712](https://github.com/nuxt/ui/issues/3712)) ([88f349d](https://github.com/nuxt/ui/commit/88f349d0d74eb1c2ce5066818731759c25a9e83e))
* **Button:** use `focus:outline-none` instead of `focus:outline-hidden` ([c231fe5](https://github.com/nuxt/ui/commit/c231fe5f26ca7614df46a7ec8a5ce7f4ec8884e7)), closes [#3658](https://github.com/nuxt/ui/issues/3658)
* **CommandPalette:** use `group.id` as key ([bc61d29](https://github.com/nuxt/ui/commit/bc61d29cce531715a6279444845f02a002a22af7))
* **components:** improve generic types ([#3331](https://github.com/nuxt/ui/issues/3331)) ([b998354](https://github.com/nuxt/ui/commit/b9983549a4b743724ea3ef99cc4a243f5ca41e53))
* **Container:** add `w-full` class ([df00149](https://github.com/nuxt/ui/commit/df001495980647cab1e67fd16154f1bc778de5e2))
* **defineLocale/defineShortcuts:** remove `@__NO_SIDE_EFFECTS__` ([82e2665](https://github.com/nuxt/ui/commit/82e26655a40782555299516f32a76046fa0dbd3a))
* **Drawer:** remove `fadeFromIndex` prop proxy ([f7604e5](https://github.com/nuxt/ui/commit/f7604e565f717001a4d4c2974cf23559a3f01c21))
* **Form:** clear dirty state after submit ([#3692](https://github.com/nuxt/ui/issues/3692)) ([3dd88ba](https://github.com/nuxt/ui/commit/3dd88bacecb2945efba8cc3cb4fe59fcbc056e9a))
* **FormField:** add `help` to `aria-describedby` attribute ([#3691](https://github.com/nuxt/ui/issues/3691)) ([20c3392](https://github.com/nuxt/ui/commit/20c33920d005332db3c83f33a8c54c7c227ce0a0))
* **InputMenu/SelectMenu:** empty search results ([94b6e52](https://github.com/nuxt/ui/commit/94b6e520f5ccf011204e953421fcc5b44b637e51))
* **InputMenu:** reset `searchTerm` on `update:open` ([3074632](https://github.com/nuxt/ui/commit/3074632523e67fa6a0ad3d9a71e5692c285bdc3a)), closes [#3620](https://github.com/nuxt/ui/issues/3620)
* **Link:** handle `aria-current` like `NuxtLink` / `RouterLink` ([c531d02](https://github.com/nuxt/ui/commit/c531d0248be7863980a1f676643c2dea8301c009))
* **Link:** prevent `active="true"` binding on html ([d73768b](https://github.com/nuxt/ui/commit/d73768b70453d60dd4186a996c1cf808b0294bf6))
* **Link:** properly pick all `aria-*` & `data-*` attrs ([ade16b7](https://github.com/nuxt/ui/commit/ade16b76cf535924a8d0f402b4d5d65cb67a55eb))
* **Link:** proxy `onClick` ([370054b](https://github.com/nuxt/ui/commit/370054b20c0201c9dba84ddfcd1e916594619b93)), closes [#3631](https://github.com/nuxt/ui/issues/3631)
* **NavigationMenu:** add `z-index` on viewport ([0095d89](https://github.com/nuxt/ui/commit/0095d8916bf361c0c89972e2f86b79850510c6a9)), closes [#3654](https://github.com/nuxt/ui/issues/3654)
* **Switch:** prevent transition on focus outline ([68787b2](https://github.com/nuxt/ui/commit/68787b26fdf2bd5f9d9e812e5bfddb19abe45d1d))
* **Table:** wrong condition on `caption` slot ([4ebb94c](https://github.com/nuxt/ui/commit/4ebb94cd7ef909b3547bce0922f75fe3ff74de4c))
* **Tabs:** remove `focus:outline-hidden` class ([1769d5e](https://github.com/nuxt/ui/commit/1769d5ed6ea46b1f7eafdc48cb6456512229f98b))
* **types:** add missing export for ButtonGroup ([#3709](https://github.com/nuxt/ui/issues/3709)) ([e7e6745](https://github.com/nuxt/ui/commit/e7e674559981177ad08be42418746060d7737df9))
* **useOverlay:** refine `open` method type to infer close emit return type ([#3716](https://github.com/nuxt/ui/issues/3716)) ([bd99c2d](https://github.com/nuxt/ui/commit/bd99c2d850d57baccc51e049c0b578a6fc6ab431))
* **vue:** mock `nuxtApp.hooks` & `useRuntimeHook` ([23bfeb9](https://github.com/nuxt/ui/commit/23bfeb937004d619187a67fb43e4c76b13d00069))
## [3.0.1](https://github.com/nuxt/ui/compare/v3.0.0...v3.0.1) (2025-03-21)
### ⚠ BREAKING CHANGES
* **Form:** drop explicit support for `zod` and `valibot` (#3617)
### Features
* **components:** handle events in `content` prop ([5dec0e1](https://github.com/nuxt/ui/commit/5dec0e16e28549b8833aaab17a87fada63d6598c))
* **locale:** add Catalan language ([#3550](https://github.com/nuxt/ui/issues/3550)) ([53cf1b4](https://github.com/nuxt/ui/commit/53cf1b4c14a2a0e076e1e77688852e6bd0a28a74))
* **locale:** add Central Kurdish language ([#3566](https://github.com/nuxt/ui/issues/3566)) ([b2034cc](https://github.com/nuxt/ui/commit/b2034ccc91eec6a2842c6f83d159e5aa6fd5f2fd))
* **locale:** add Romanian language ([#3587](https://github.com/nuxt/ui/issues/3587)) ([0229b0f](https://github.com/nuxt/ui/commit/0229b0fd4644a97db7eb3154c3c87a26634dcfbb))
* **locale:** add Urdu language ([#3611](https://github.com/nuxt/ui/issues/3611)) ([126ba23](https://github.com/nuxt/ui/commit/126ba2326f8153e155e1013db92c6ee417117610))
* **locale:** add Uzbek language ([#3548](https://github.com/nuxt/ui/issues/3548)) ([302e04b](https://github.com/nuxt/ui/commit/302e04bd77ae8b165046b264c8d23626e92f8fb5))
### Bug Fixes
* **Calendar:** grey out days outside of displayed month ([#3639](https://github.com/nuxt/ui/issues/3639)) ([a516866](https://github.com/nuxt/ui/commit/a5168666b7dff08e714d57f497737e7a670f457c))
* **ContextMenu/DropdownMenu:** remove `any` from `proxySlots` ([#3623](https://github.com/nuxt/ui/issues/3623)) ([764c41a](https://github.com/nuxt/ui/commit/764c41a0c60dd1c12d39a86af9f5f11b9e6cdc8c))
* **Modal/Slideover/Toast:** prevent unnecessary close instantiation ([f4c417d](https://github.com/nuxt/ui/commit/f4c417d9ef5409b52084bdf9d8cbccee3139709f))
* **module:** handle tailwindcss import without `theme(static)` ([#3630](https://github.com/nuxt/ui/issues/3630)) ([ecff9ab](https://github.com/nuxt/ui/commit/ecff9abc720bdda3a279d5bcfb7b477ff885f2e4))
* **module:** mark functions used in exports as pure ([#3604](https://github.com/nuxt/ui/issues/3604)) ([57efc78](https://github.com/nuxt/ui/commit/57efc78a3b3fa4a54bcd13df47d570a18fba2bc4))
* **RadioGroup:** handle `disabled` on items ([fe0bd83](https://github.com/nuxt/ui/commit/fe0bd83d11b0dfa53b58d423bc917f8e21d73444)), closes [nuxt/ui-pro#911](https://github.com/nuxt/ui-pro/issues/911)
* **Table:** allow links to be opened when [@select](https://github.com/select) is used ([#3580](https://github.com/nuxt/ui/issues/3580)) ([e80cc15](https://github.com/nuxt/ui/commit/e80cc1592fb244dd7692486a4c1ca5b1c2008112))
* **types:** add missing export for Icon ([#3568](https://github.com/nuxt/ui/issues/3568)) ([5e62493](https://github.com/nuxt/ui/commit/5e624933216db95cbfd1b8034b2eb0f13846ae55))
* **unplugin:** include `@compodium/examples` in auto-imports paths ([#3585](https://github.com/nuxt/ui/issues/3585)) ([cc504b8](https://github.com/nuxt/ui/commit/cc504b8a4b69dd76b49659d5c206ef23dcb9e475))
* **useLocale:** unique symbol to use in `@nuxt/ui-pro` ([#3603](https://github.com/nuxt/ui/issues/3603)) ([dec2730](https://github.com/nuxt/ui/commit/dec2730aaea1327434837cfa022ea04056757cbf))
* **vue:** missing unhead context ([#3589](https://github.com/nuxt/ui/issues/3589)) ([0897e9e](https://github.com/nuxt/ui/commit/0897e9ef05fbee4f021f317bb7c2d0b7007f1b75))
### Code Refactoring
* **Form:** drop explicit support for `zod` and `valibot` ([#3617](https://github.com/nuxt/ui/issues/3617)) ([9a4bb34](https://github.com/nuxt/ui/commit/9a4bb34d7d14add0a3199103f4b583e8307d1d6d))
## [3.0.0](https://github.com/nuxt/ui/compare/v3.0.0-beta.4...v3.0.0) (2025-03-12)
## [3.0.0-beta.4](https://github.com/nuxt/ui/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2025-03-12)
### Features
* **Form:** global errors ([#3482](https://github.com/nuxt/ui/issues/3482)) ([6e03d9c](https://github.com/nuxt/ui/commit/6e03d9c6efc8f4cfc306813e733d7d3e03706323))
* **Input/Textarea:** allow `null` value in model ([#3415](https://github.com/nuxt/ui/issues/3415)) ([cfe9b2e](https://github.com/nuxt/ui/commit/cfe9b2ecf34827bc11a5281a069988ab96030047))
* **useLocale:** handle generic messages ([#3100](https://github.com/nuxt/ui/issues/3100)) ([a9c8eb3](https://github.com/nuxt/ui/commit/a9c8eb3f60a10d1a71632991c9db594716b0fba1))
### Bug Fixes
* **Button:** missing import ([21dbf01](https://github.com/nuxt/ui/commit/21dbf01888a161a9d8ac6eb0d957c1342f6cc30d)), closes [nuxt/ui#3417](https://github.com/nuxt/ui/issues/3417)
* **Form:** input blur validation on submit ([#3504](https://github.com/nuxt/ui/issues/3504)) ([97c8098](https://github.com/nuxt/ui/commit/97c8098d4a35c392719ae179d36aa008d6f8f78a))
* **vue:** prevent calling `useHead` in colors ([5ecd227](https://github.com/nuxt/ui/commit/5ecd2271ca86087cb805548397d75c38763ad412))
## [3.0.0-beta.3](https://github.com/nuxt/ui/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2025-03-07)
### Features
* **Button:** handle `active` state ([bd2d484](https://github.com/nuxt/ui/commit/bd2d4848d246a3d5930f8059913f5a1a0abe29fd)), closes [#3417](https://github.com/nuxt/ui/issues/3417)
* **Table:** add `loading` slot ([99e531d](https://github.com/nuxt/ui/commit/99e531d8dfb7954322b7ab7feda3d8814c6d8d02)), closes [#3444](https://github.com/nuxt/ui/issues/3444)
### Bug Fixes
* **InputMenu/SelectMenu:** proxy `required` in root props ([60b7e2d](https://github.com/nuxt/ui/commit/60b7e2d69e80afa7e221855dcec46479d0ca5c6c))
* **InputMenu:** wrong `required` in multiple mode ([01fa230](https://github.com/nuxt/ui/commit/01fa230eae4b6623c5fd71cc218d114d9f6f0f25)), closes [#2741](https://github.com/nuxt/ui/issues/2741)
* **Pagination:** add missing slots ([a47c5ff](https://github.com/nuxt/ui/commit/a47c5ff46616eafee3158cb9801183965f5f9874)), closes [#3441](https://github.com/nuxt/ui/issues/3441)
* **Pagination:** wrong next link ([e823022](https://github.com/nuxt/ui/commit/e823022b19bb172d2e5fabb9144b4a4286a25a5f)), closes [#3008](https://github.com/nuxt/ui/issues/3008)
* **templates:** prevent overriding existing colors ([ccbd89c](https://github.com/nuxt/ui/commit/ccbd89c908fe8af54c7d723dd12da5b7f3906c8f)), closes [#3426](https://github.com/nuxt/ui/issues/3426)
## [3.0.0-beta.2](https://github.com/nuxt/ui/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2025-02-28)
### Bug Fixes
* **OverlayProvider:** missing import ([c555c16](https://github.com/nuxt/ui/commit/c555c1640eb9e9aca643d71aa02e2a659485672e))
* **useOverlay:** missing imports ([0e3c63e](https://github.com/nuxt/ui/commit/0e3c63eb543981835c56a3bfebe71c4534d3f973))
## [3.0.0-beta.1](https://github.com/nuxt/ui/compare/v3.0.0-alpha.13...v3.0.0-beta.1) (2025-02-28)
### ⚠ BREAKING CHANGES
* **module:** remove devtools in favor of compodium (#3380)
* **useOverlay:** handle programmatic modals and slideovers (#3279)
### Features
* **Form:** add prop to disable state transformation ([#3356](https://github.com/nuxt/ui/issues/3356)) ([015ceac](https://github.com/nuxt/ui/commit/015ceacb11f94c6ae0829e59b8dfdef6c325b67d))
* **module:** remove devtools in favor of compodium ([#3380](https://github.com/nuxt/ui/issues/3380)) ([7a8c00c](https://github.com/nuxt/ui/commit/7a8c00c37451f7b9b33630f7a790a12c0fb2caa1))
* **Table:** add `select` event ([#2822](https://github.com/nuxt/ui/issues/2822)) ([0668a39](https://github.com/nuxt/ui/commit/0668a399dced48d1976de3820118bf2a29fe116e))
* **Tree:** new component ([#3180](https://github.com/nuxt/ui/issues/3180)) ([71728d3](https://github.com/nuxt/ui/commit/71728d3c3fa95255db03448c8b87fb75bc2d805c))
* **useOverlay:** handle programmatic modals and slideovers ([#3279](https://github.com/nuxt/ui/issues/3279)) ([108d36f](https://github.com/nuxt/ui/commit/108d36fd8a4c7b325fcf85882f054bb5e784de57))
### Bug Fixes
* **Avatar:** render on SSR ([67e5465](https://github.com/nuxt/ui/commit/67e546504d2eb807c9b707aacc58761b10eb7d37))
* **CommandPalette:** wrong ellipsis color ([ada04f6](https://github.com/nuxt/ui/commit/ada04f64a529feab43f5b54162daffe9d3313435))
* **components:** missing `$attrs` bind ([#3152](https://github.com/nuxt/ui/issues/3152)) ([fb36df5](https://github.com/nuxt/ui/commit/fb36df5302e379f58ceb9c3a91348256806c8df5))
* **Drawer/Modal/Slideover:** disable close autofocus ([ae30f94](https://github.com/nuxt/ui/commit/ae30f9423dfae1f6e27f00176bb3175beeb888e4)), closes [#3227](https://github.com/nuxt/ui/issues/3227)
* **Form:** ensure loading state resets to false after an error ([#3359](https://github.com/nuxt/ui/issues/3359)) ([19d76c8](https://github.com/nuxt/ui/commit/19d76c8b75b053f1c44b691ca46c9d3b234dbce1))
* **Link:** improve external links handling in vue ([b53f77b](https://github.com/nuxt/ui/commit/b53f77b304a520e925af9d4a752e0f2933cfb71d))
* **Modal/Slideover:** add wrapper around title & description ([bc01136](https://github.com/nuxt/ui/commit/bc01136da7e838004088fffbf2acfd6788f3c5fb))
* **Modal/Slideover:** fixed header height ([d33a83e](https://github.com/nuxt/ui/commit/d33a83e147b009ebe1e52b7d677d364d18f24333)), closes [#3333](https://github.com/nuxt/ui/issues/3333)
* **Modal:** use `dvh` unit ([aefa09c](https://github.com/nuxt/ui/commit/aefa09c69b8f0dbd38d29883dc79d77fc7025f43))
* **module:** use key when merging modules options ([9821894](https://github.com/nuxt/ui/commit/98218945328b947e6c2a75f03b89c27e401dc6d5))
* **Tooltip:** bind `$attrs` on trigger ([637f5d3](https://github.com/nuxt/ui/commit/637f5d342ee1f1b1bf7de99020df9ca9f07e197e)), closes [#3339](https://github.com/nuxt/ui/issues/3339) [#2897](https://github.com/nuxt/ui/issues/2897)
* **vite:** exclude `@nuxt/ui` from vite pre-optimization ([#3352](https://github.com/nuxt/ui/issues/3352)) ([09492f7](https://github.com/nuxt/ui/commit/09492f79f29c0b5dd7a642f76f55aa3d305c0a69))
## [3.0.0-alpha.13](https://github.com/nuxt/ui/compare/v3.0.0-alpha.12...v3.0.0-alpha.13) (2025-02-17)
### ⚠ BREAKING CHANGES
* **useToast:** don't return a promise on `add`
* **Toast:** rename `click` to `onClick` for consistency
* **Alert/Toast:** add `orientation` prop
### Features
* **Alert/Toast:** add `orientation` prop ([2c192ac](https://github.com/nuxt/ui/commit/2c192ac145e3550153821627a389f03e26f247b5))
* **Badge:** add support within button groups ([#3224](https://github.com/nuxt/ui/issues/3224)) ([10fb843](https://github.com/nuxt/ui/commit/10fb843f8ffc2cda9cf9a29cdf37c6b5dae9ca17))
* **Card:** add `variant` prop ([847d4aa](https://github.com/nuxt/ui/commit/847d4aa752decc8c21a8eb57bff32a371c800b6d))
* **CommandPalette:** support link props in items ([e2b78a7](https://github.com/nuxt/ui/commit/e2b78a78a45c1b2339ba57e3ec1fcf2a1500b3af)), closes [#3190](https://github.com/nuxt/ui/issues/3190)
* **ContextMenu/DropdownMenu/NavigationMenu:** add `external-icon` prop ([5846c1e](https://github.com/nuxt/ui/commit/5846c1e2ee9f0851e902550f7e873cc703fe7cb4)), closes [#2996](https://github.com/nuxt/ui/issues/2996)
* **Drawer:** add `inset` prop ([6d9b9ed](https://github.com/nuxt/ui/commit/6d9b9edc5524ad32abdec925c276519e1a1a59e4)), closes [#2994](https://github.com/nuxt/ui/issues/2994)
* **locale:** add Azerbaijani language ([#3209](https://github.com/nuxt/ui/issues/3209)) ([0fb6753](https://github.com/nuxt/ui/commit/0fb6753c9de9144b7958052ae287b34911afcbd7))
* **locale:** add Bengali (বাংলা) language ([#3321](https://github.com/nuxt/ui/issues/3321)) ([1d09a2a](https://github.com/nuxt/ui/commit/1d09a2aa35944bc798cf53809ae227d05592a5bd))
* **module:** generate `tailwindcss` theme colors ([#2967](https://github.com/nuxt/ui/issues/2967)) ([443a0be](https://github.com/nuxt/ui/commit/443a0be0174f84526145db8c0349136e5fc4bbf3))
* **Table:** extends core options and support other options like `pagination` ([#3177](https://github.com/nuxt/ui/issues/3177)) ([4aa3179](https://github.com/nuxt/ui/commit/4aa317944e17956b08e5ded3fb564ae0bbd4e888))
* **Toast:** handle vnodes in `title` and `description` ([abd2be1](https://github.com/nuxt/ui/commit/abd2be1aa667f91c47673450445e09211c821365)), closes [#3226](https://github.com/nuxt/ui/issues/3226)
* **unplugin:** expose options for embedded plugins, throw warnings for duplication ([#3207](https://github.com/nuxt/ui/issues/3207)) ([6c20f8a](https://github.com/nuxt/ui/commit/6c20f8a9ea03273a795c5f88c071830decd54c1e))
* **useToast:** proxy emits ([089185f](https://github.com/nuxt/ui/commit/089185fbe4a13fa3253bf49780c4d0a673eef59a))
### Bug Fixes
* **App:** wrap `ModalProvider` / `SlideoverProvider` inside `TooltipProvider` ([cd0a9d3](https://github.com/nuxt/ui/commit/cd0a9d39d879a80342462b1c553602177f1ae8ee)), closes [#3236](https://github.com/nuxt/ui/issues/3236)
* **Badge:** missing `UAvatar` import ([49dd088](https://github.com/nuxt/ui/commit/49dd0885a043e736cfa335d7657bb68ae6142ccf)), closes [#3203](https://github.com/nuxt/ui/issues/3203)
* **Calendar/InputMenu/Textarea:** add missing `PartialString` type on `ui` prop ([9d29e0b](https://github.com/nuxt/ui/commit/9d29e0b4078c4638365caca4784ecad569cd0464)), closes [#3299](https://github.com/nuxt/ui/issues/3299)
* **Card:** remove `shadow-sm` for consistency ([8097fff](https://github.com/nuxt/ui/commit/8097fff79d3d9f63481c6cd8e3e724a67f7761df))
* **Link:** allow usage without `vue-router` in vue ([f55e869](https://github.com/nuxt/ui/commit/f55e86963737238749a8d7e85bca1e724ae4c4c2)), closes [#3001](https://github.com/nuxt/ui/issues/3001)
* **locale:** export `km` ([#3201](https://github.com/nuxt/ui/issues/3201)) ([995e07d](https://github.com/nuxt/ui/commit/995e07d6ffa47ee593b28aa587699676e2ad3b90))
* **Modal/Slideover:** improve `title` & `description` accessibility ([e419dcb](https://github.com/nuxt/ui/commit/e419dcbe61e6949abc76b8a1fc2f088fd7a402a0)), closes [#3267](https://github.com/nuxt/ui/issues/3267) [#3215](https://github.com/nuxt/ui/issues/3215)
* **Modal:** always fullscreen on mobile ([#2637](https://github.com/nuxt/ui/issues/2637)) ([7641d89](https://github.com/nuxt/ui/commit/7641d89552df1ed42e70bbac90f5486b58bd9349))
* **NavigationMenu:** disable collapsible with `collapsed` prop ([07e1b4f](https://github.com/nuxt/ui/commit/07e1b4f1f44efe90ac16138de5dbd78faf66e974))
* **NavigationMenu:** remove negative mb causing overflow issues ([0e46c3e](https://github.com/nuxt/ui/commit/0e46c3e8cf94fb52c47b9d46eaba2d18329a6f45))
* **NavigationMenu:** wrong `level` compute on `vertical` orientation ([c1c9da4](https://github.com/nuxt/ui/commit/c1c9da4d38b7675ce6323d938030e1b9a577f7c4))
* **SelectMenu:** wrap content with `FocusScope` ([e7e7585](https://github.com/nuxt/ui/commit/e7e75858d7c5f0d966d2b9b7a16bc95573a31025)), closes [#2657](https://github.com/nuxt/ui/issues/2657)
* **Table:** proxy props without `useForwardProps` ([f0553eb](https://github.com/nuxt/ui/commit/f0553ebb496f2f4bad5fd5ab0b3006c9ee8edba3))
* **Toast:** rename `click` to `onClick` for consistency ([533e889](https://github.com/nuxt/ui/commit/533e88958916b356c00511a90e16c8b11af0b521))
* **useToast:** don't return a promise on `add` ([153f341](https://github.com/nuxt/ui/commit/153f341a8c1a09a6fd3069886a26d9a3f5de41de))
## [3.0.0-alpha.12](https://github.com/nuxt/ui/compare/v3.0.0-alpha.11...v3.0.0-alpha.12) (2025-01-27)
### ⚠ BREAKING CHANGES
* **ColorPicker:** migrate from `color` to `colortranslator` (#3097)
* **Form:** include nested state in submit data (#3028)
### Features
* **css:** add `light` variant to reverse colors ([75f7064](https://github.com/nuxt/ui/commit/75f7064b409a47d068007d0b4f3af007fb24c679))
* **FormField:** set `aria-describedby` and `aria-invalid` attributes ([#3123](https://github.com/nuxt/ui/issues/3123)) ([b95b913](https://github.com/nuxt/ui/commit/b95b91391af21ee0fd96c69fb6ccf99b3126bc79))
* **Form:** form validation properties ([#3137](https://github.com/nuxt/ui/issues/3137)) ([c0b485d](https://github.com/nuxt/ui/commit/c0b485d56376d6655d15d6241daeef19f25db25f))
* **locale:** add Hebrew language ([#3181](https://github.com/nuxt/ui/issues/3181)) ([f395877](https://github.com/nuxt/ui/commit/f3958773d610d64fe15cf57525044eec22dc1f96))
* **locale:** add Hindi language ([#3170](https://github.com/nuxt/ui/issues/3170)) ([8e96daa](https://github.com/nuxt/ui/commit/8e96daa5cc57e1a2c7605d54f8640f8e012a645d))
* **locale:** add Hungarian language ([#3129](https://github.com/nuxt/ui/issues/3129)) ([891ba1f](https://github.com/nuxt/ui/commit/891ba1fec64255ba4db0f4447e044cc9140ced94))
* **locale:** add Khmer language ([#3119](https://github.com/nuxt/ui/issues/3119)) ([64421a1](https://github.com/nuxt/ui/commit/64421a190ff43563cc73f64b6a9141d69e3f5ca5))
* **locale:** add Norwegian Bokmål language ([#3095](https://github.com/nuxt/ui/issues/3095)) ([9ccfe8f](https://github.com/nuxt/ui/commit/9ccfe8fbb3284a5bdd0766ba5831135d298b563f))
* **NavigationMenu:** add `collapsed` prop ([3fc2210](https://github.com/nuxt/ui/commit/3fc2210e0392b63b065e4f4899ff864f1a3717b1))
* **NavigationMenu:** add `contentOrientation` prop ([ac86ee0](https://github.com/nuxt/ui/commit/ac86ee01b9fc9b5dc882b210d88b8fef73148e42))
* **NavigationMenu:** handle `label` type in items ([27fdc8e](https://github.com/nuxt/ui/commit/27fdc8e260bb8d2ca815c84cfdc30b6ca3baa038)), closes [#2993](https://github.com/nuxt/ui/issues/2993)
### Bug Fixes
* **Alert:** allow actions wrap ([#3083](https://github.com/nuxt/ui/issues/3083)) ([e7c10bc](https://github.com/nuxt/ui/commit/e7c10bcb0dbbfbbe48bbdea7cbd99d4535be1adb))
* **Avatar:** handle loading manually to support `@nuxt/image` ([00c5f26](https://github.com/nuxt/ui/commit/00c5f261117fd986c8be70ecdc21762023e7ebc0)), closes [nuxt/ui-pro#727](https://github.com/nuxt/ui-pro/issues/727)
* **Avatar:** hide fallback when image is loaded ([36d7402](https://github.com/nuxt/ui/commit/36d7402be1f823c753c7cd44cca82bbb5fd4cddd)), closes [nuxt/ui-pro#727](https://github.com/nuxt/ui-pro/issues/727)
* **Button:** wrong avatar size with `block` prop ([ba1dd13](https://github.com/nuxt/ui/commit/ba1dd13173835c9b72b862eb9f875a8cd79c5604))
* **colors:** move css variables to `base` layer ([533ccec](https://github.com/nuxt/ui/commit/533ccec11007ec9078fd8daefd88f6b146991939)), closes [#3075](https://github.com/nuxt/ui/issues/3075)
* **components:** prevent multiple `appConfig` identifier import ([#3186](https://github.com/nuxt/ui/issues/3186)) ([cd16b95](https://github.com/nuxt/ui/commit/cd16b95c98c0ec29bc0586ba890555f79be00290))
* **ContextMenu/DropdownMenu:** remove unnecessary bindings in html ([9b5a957](https://github.com/nuxt/ui/commit/9b5a957cdd01baafaa981864ad7d03902ad6918d))
* **Form:** include nested state in submit data ([#3028](https://github.com/nuxt/ui/issues/3028)) ([de9ecb1](https://github.com/nuxt/ui/commit/de9ecb1d767060f88c1dbdf69b9c04d5731b049d))
* **Form:** standard schema validation no longer wrapped in `value` object ([#3104](https://github.com/nuxt/ui/issues/3104)) ([8f7f579](https://github.com/nuxt/ui/commit/8f7f579da0fc58575184dc445ff0dda0c0ca1298))
* **locale:** remove emoji fallback for Chinese ([#3134](https://github.com/nuxt/ui/issues/3134)) ([1a95104](https://github.com/nuxt/ui/commit/1a951046319eaf85c2adb44928a0255dedef093d))
* **locale:** year translation missing `ñ` in `es` ([#3090](https://github.com/nuxt/ui/issues/3090)) ([1bf370e](https://github.com/nuxt/ui/commit/1bf370e6fd27fab644689335b7356bbf4c359663))
* **NavigationMenu:** handle children recursively in vertical orientation ([2b7ff3e](https://github.com/nuxt/ui/commit/2b7ff3edf6620d7ed4a491d89f0e616b5916984b)), closes [#3128](https://github.com/nuxt/ui/issues/3128)
* **NavigationMenu:** highlight open items on `horizontal` orientation only ([931211a](https://github.com/nuxt/ui/commit/931211a634183a8122ce0be874cc1f9048768d88))
* **useToast:** add in queue and improve unique ids ([aafddd8](https://github.com/nuxt/ui/commit/aafddd8eed0f3fc7c7228c2db4718ba54f3fc522)), closes [#2686](https://github.com/nuxt/ui/issues/2686)
### Code Refactoring
* **ColorPicker:** migrate from `color` to `colortranslator` ([#3097](https://github.com/nuxt/ui/issues/3097)) ([51e5e65](https://github.com/nuxt/ui/commit/51e5e65be7f834ec226be28d95a1b547b85b329c))
## [3.0.0-alpha.11](https://github.com/nuxt/ui/compare/v3.0.0-alpha.10...v3.0.0-alpha.11) (2025-01-13)
### ⚠ BREAKING CHANGES
* **Modal/Popover/Slideover:** rename `prevent-close` to `dismissible` + uniformize docs
### Features
* **Badge:** rework sizes ([d9967f5](https://github.com/nuxt/ui/commit/d9967f5e282d41f4000d5451efed7254b4c1608c))
* **CommandPalette:** add `autofocus` prop ([#2942](https://github.com/nuxt/ui/issues/2942)) ([1b3c919](https://github.com/nuxt/ui/commit/1b3c919222a4002d84dd968f93bcf9d615e412bc))
* **locale:** add Danish language ([#2952](https://github.com/nuxt/ui/issues/2952)) ([e1d385a](https://github.com/nuxt/ui/commit/e1d385a17545f8091c8d2459842fe4c39b8c9399))
* **locale:** add Estonian language ([#3036](https://github.com/nuxt/ui/issues/3036)) ([01bf99e](https://github.com/nuxt/ui/commit/01bf99eec8c2fd0e3dbe1271be152844e401287a))
* **locale:** add Finnish language ([#3013](https://github.com/nuxt/ui/issues/3013)) ([c770ae1](https://github.com/nuxt/ui/commit/c770ae124e626682935475dc6a164aacd1408c01))
* **locale:** add Greek language ([#2975](https://github.com/nuxt/ui/issues/2975)) ([b326a14](https://github.com/nuxt/ui/commit/b326a14fb0e62edc8e55599c16f934f54f95aa42))
* **locale:** add Indonesian language ([#3024](https://github.com/nuxt/ui/issues/3024)) ([a18ad84](https://github.com/nuxt/ui/commit/a18ad84edfe6b3f444d379f24defeecb63e5cdb9))
* **locale:** add Swedish language ([#3012](https://github.com/nuxt/ui/issues/3012)) ([0201a3d](https://github.com/nuxt/ui/commit/0201a3de757db426c877ef2761de8e9d7493983e))
* **locale:** add Thai language ([#2980](https://github.com/nuxt/ui/issues/2980)) ([c8cd06e](https://github.com/nuxt/ui/commit/c8cd06e92dab208271ab7b7f6806793eea1e8969))
* **locale:** add Ukrainian language ([#2908](https://github.com/nuxt/ui/issues/2908)) ([5efae59](https://github.com/nuxt/ui/commit/5efae599b642e65ec8ccaf2361b69abe993a0173))
* **locale:** add Viet language ([#2986](https://github.com/nuxt/ui/issues/2986)) ([ffba108](https://github.com/nuxt/ui/commit/ffba108291f321471650ca9060ea264f41482648))
* **module:** allow `tv` customization through `app.config` ([#2938](https://github.com/nuxt/ui/issues/2938)) ([30ba53e](https://github.com/nuxt/ui/commit/30ba53e20b3b91909c2c8162f35b13b6ad305d13))
### Bug Fixes
* **Accordion/Collapsible/NavigationMenu/Tabs:** define `unmountOnHide` default ([4344e36](https://github.com/nuxt/ui/commit/4344e366647e9618c21fe800b43d2b4ae2611226))
* **Avatar:** bind `$attrs` on `AvatarFallback` ([#2933](https://github.com/nuxt/ui/issues/2933)) ([7f64198](https://github.com/nuxt/ui/commit/7f64198a70104436f39f2f9d8527df0508fd84f6))
* **Badge:** reduce radius on `sm` size ([f97d2e3](https://github.com/nuxt/ui/commit/f97d2e3b88d1ba9be5f7e2916c6502e38ac4d4c1))
* **CommandPalette/SelectMenu:** missing translations ([#3057](https://github.com/nuxt/ui/issues/3057)) ([d5dba0e](https://github.com/nuxt/ui/commit/d5dba0ebc98594906ef1d9428da11d44317b70fc))
* **components:** enable pointer events on menus ([#2881](https://github.com/nuxt/ui/issues/2881)) ([f85b098](https://github.com/nuxt/ui/commit/f85b0985bdd6f51aff41acc6f86dd02db9832b24))
* **defineShortcuts:** handle extract when using `onSelect` or `onClick` ([#2896](https://github.com/nuxt/ui/issues/2896)) ([2e17fb6](https://github.com/nuxt/ui/commit/2e17fb68dee7e7bb27750c816d27b62249a1247b))
* **DropdownMenu/ContextMenu:** correct bindings of `checkbox` items ([#2921](https://github.com/nuxt/ui/issues/2921)) ([4c5a4fb](https://github.com/nuxt/ui/commit/4c5a4fb5265c36a39e551b8ee43b86e9ebd3d064))
* **FormField:** restore `eager-validation` prop behavior ([#3031](https://github.com/nuxt/ui/issues/3031)) ([41dc11c](https://github.com/nuxt/ui/commit/41dc11ceefd8f505fbc5214fe61f12483b0da4a2))
* **InputMenu:** removing `tag` does not change `modelValue` ([#3054](https://github.com/nuxt/ui/issues/3054)) ([5a44394](https://github.com/nuxt/ui/commit/5a443944ae622c8f4a893e0a18a80026ea9c1fe0))
* **locale:** improve Traditional Chinese translation ([#3051](https://github.com/nuxt/ui/issues/3051)) ([5c2c55f](https://github.com/nuxt/ui/commit/5c2c55ff08fbc16c869ad382e5fe5ac9fcc791de))
* **Modal/Popover/Slideover:** rename `prevent-close` to `dismissible` + uniformize docs ([6fb426f](https://github.com/nuxt/ui/commit/6fb426fc17d6d524e7d0503c2c8f3610f60b954d))
* **NavigationMenu:** `arrow` styles after `reka-ui` migration ([9759320](https://github.com/nuxt/ui/commit/97593204384669c479b85932024317a300ce29d8))
* **NavigationMenu:** highlight border on children only with `vertical` orientation ([e931880](https://github.com/nuxt/ui/commit/e93188067172d357a7724f937aeec70a0dabe611))
* **NavigationMenu:** remove `w-full` on root slot ([ef7ecd2](https://github.com/nuxt/ui/commit/ef7ecd242f4550838dbe3a45e33855afff89f506)), closes [#3000](https://github.com/nuxt/ui/issues/3000)
* **NavigationMenu:** unbind link on collapsible trigger with `vertical` orientation ([82d6344](https://github.com/nuxt/ui/commit/82d63446a12445accbca9131a83806994631761b))
* **SelectMenu:** handle `resetSearchTermOnBlur` manually ([#3082](https://github.com/nuxt/ui/issues/3082)) ([c902a40](https://github.com/nuxt/ui/commit/c902a40f7c0ce5ceb4624bbe2bbdfa09c87f7c75))
* **Stepper:** correct item `value` type ([4f05b1a](https://github.com/nuxt/ui/commit/4f05b1aac9af096cdc9404395d25d2261522a1db))
* **Stepper:** wrong `item` in `title` & `description` slots ([473194f](https://github.com/nuxt/ui/commit/473194fbaf2a9d21e2acb67d16715c412528d7d2)), closes [#2888](https://github.com/nuxt/ui/issues/2888)
* **templates:** allow any string in colors autocomplete ([5183582](https://github.com/nuxt/ui/commit/5183582a90c0d86bd986ef0f280bc58e740c6458)), closes [#2143](https://github.com/nuxt/ui/issues/2143)
* **templates:** infer variants types in generated theme ([2c99bb8](https://github.com/nuxt/ui/commit/2c99bb80c72fdbde9cd2ff3ad7caae0be632b864))
* **unplugin:** invalid url schema on windows ([#2899](https://github.com/nuxt/ui/issues/2899)) ([9b4694f](https://github.com/nuxt/ui/commit/9b4694f8d9b0fc244e805a7bfb2795d5131f7d18))
* **vue:** head injection ([#2929](https://github.com/nuxt/ui/issues/2929)) ([7302a84](https://github.com/nuxt/ui/commit/7302a846a9c394373c47def12dca00274e58f269))
### Reverts
* Revert "chore(deps): update `typescript`" ([3107039](https://github.com/nuxt/ui/commit/3107039b560cef973c117a251e4407ca5e615a72))
* Revert "chore(deps): update `@nuxt/module-builder`" ([c79acc1](https://github.com/nuxt/ui/commit/c79acc15b00f23b189821ebe2f4430e900cac34f))
* Revert "build: remove `cjs` support" ([15b411d](https://github.com/nuxt/ui/commit/15b411de4a6a7d322a3dea5703a5a5464c4e709a))
## [3.0.0-alpha.10](https://github.com/nuxt/ui/compare/v3.0.0-alpha.9...v3.0.0-alpha.10) (2024-12-09)
### ⚠ BREAKING CHANGES
* **module:** migrate to `reka-ui` (#2448)
* **Form:** resolve async validation in yup & issue directly mutate state (#2702)
### Features
* **Avatar:** add `default` slot for fallback ([b741ef3](https://github.com/nuxt/ui/commit/b741ef3313bb894beaed0eaa7323ee3d951bf935))
* **Calendar:** add `icon` props ([#2778](https://github.com/nuxt/ui/issues/2778)) ([0f64802](https://github.com/nuxt/ui/commit/0f648024e0468d34c1499bb5b5d2ed32e0e7de4f))
* **Calendar:** implement component ([#2618](https://github.com/nuxt/ui/issues/2618)) ([2e9aeb5](https://github.com/nuxt/ui/commit/2e9aeb5f05e94d63ea453c4f07a3e84ee2a02773))
* **ColorPicker:** implement component ([#2670](https://github.com/nuxt/ui/issues/2670)) ([e475b64](https://github.com/nuxt/ui/commit/e475b6438d405e4695ffb19155d456534d16b897))
* **CommandPalette:** add `active` field on items for consistency ([3765537](https://github.com/nuxt/ui/commit/37655377e9675982e2fce422bdd79ea651424548))
* **css:** use `color-scheme` utilities on body ([a2512f6](https://github.com/nuxt/ui/commit/a2512f680dc0df7add48bc17ef3be30d579be782))
* **i18n:** add Dutch locale ([#2728](https://github.com/nuxt/ui/issues/2728)) ([3baddfd](https://github.com/nuxt/ui/commit/3baddfd12186a68cc302f31cf0934cb9cf48060d))
* **i18n:** add Turkish locale ([#2716](https://github.com/nuxt/ui/issues/2716)) ([de8228e](https://github.com/nuxt/ui/commit/de8228e504affd1a57106101f5168a33702d4d53))
* **locale:** add Brazilian Portuguese language ([#2825](https://github.com/nuxt/ui/issues/2825)) ([b7ff7d8](https://github.com/nuxt/ui/commit/b7ff7d8aa63c41cf7afbecaa31824e098ea291af))
* **locale:** add Japanese language ([#2794](https://github.com/nuxt/ui/issues/2794)) ([ecc4755](https://github.com/nuxt/ui/commit/ecc4755a17874e59e06e70307a40dfd3fb3f20a0))
* **locale:** add Portuguese language ([#2855](https://github.com/nuxt/ui/issues/2855)) ([8b5d412](https://github.com/nuxt/ui/commit/8b5d412fd70b14a53cffa9129f5edd8a40e0f2e8))
* **locale:** add Slovak language ([#2821](https://github.com/nuxt/ui/issues/2821)) ([68a10f0](https://github.com/nuxt/ui/commit/68a10f09d5f164f2f5f07e65297e29fa2d939425))
* **locale:** translate Korean ([#2703](https://github.com/nuxt/ui/issues/2703)) ([2cbf83e](https://github.com/nuxt/ui/commit/2cbf83eb8484ad9abebd6ca01ad344918570af5b))
* **module:** migrate to `reka-ui` ([#2448](https://github.com/nuxt/ui/issues/2448)) ([81ac076](https://github.com/nuxt/ui/commit/81ac076219c3d7ef151f641414a0fbeca2da0bdd))
* **NavigationMenu:** handle `item.trailingIcon` display ([4b653ef](https://github.com/nuxt/ui/commit/4b653ef7735d9d2dfea65260433ade05eb3d3bd7))
* **Stepper:** new component ([#2733](https://github.com/nuxt/ui/issues/2733)) ([6484d01](https://github.com/nuxt/ui/commit/6484d010a1eee6f5d86968e4701b945953089b17))
* **Table:** handle `meta.class` on `th` and `td` ([#2790](https://github.com/nuxt/ui/issues/2790)) ([004a577](https://github.com/nuxt/ui/commit/004a5774678da24ccc267e96697c6088c51d5eea))
### Bug Fixes
* **Breadcrumb:** missing `aria-hidden` on presentation items ([a7a1227](https://github.com/nuxt/ui/commit/a7a1227c93110727e24f822fa50b547eb66bb16e)), closes [#2725](https://github.com/nuxt/ui/issues/2725)
* **Calendar:** handle icons in RTL mode ([#2770](https://github.com/nuxt/ui/issues/2770)) ([e7b69b7](https://github.com/nuxt/ui/commit/e7b69b7d6f0ebb3c578b9f58bcddf8ad36e6c6ce))
* **Calendar:** omit `as` / `asChild` props ([9478fc0](https://github.com/nuxt/ui/commit/9478fc076846d4a7fef13e63bdc274cd8d161063))
* **ColorPicker:** handle RTL mode ([#2858](https://github.com/nuxt/ui/issues/2858)) ([f98b91c](https://github.com/nuxt/ui/commit/f98b91c22ae21071a25f69cc8682eb6197a54c5a))
* **CommandPalette:** keep `ignoreFilter` groups at their place ([#2833](https://github.com/nuxt/ui/issues/2833)) ([3b9ca22](https://github.com/nuxt/ui/commit/3b9ca2263de1b936639b1b20ad0baf1cb059fda5))
* **components:** apply class on `trigger` instead of `content` when present ([a6ecef0](https://github.com/nuxt/ui/commit/a6ecef0f0d87a8dff4e4cb9ec507058ec94ed82b)), closes [#2132](https://github.com/nuxt/ui/issues/2132)
* **components:** specify collisionPadding to all menus ([148b024](https://github.com/nuxt/ui/commit/148b02464d47ada421313327585924b17f4e3f2d))
* **ContextMenu:** remove close animation ([#2798](https://github.com/nuxt/ui/issues/2798)) ([ed27222](https://github.com/nuxt/ui/commit/ed2722257a22c770eda811fbad58980bcef9dad5))
* **defineShortcuts:** return `useEventListener` to unregister the listener ([80befc1](https://github.com/nuxt/ui/commit/80befc107c6c6e7ab99dbe12376976babf315158)), closes [#2031](https://github.com/nuxt/ui/issues/2031)
* **devtools:** error with renderer when `colorMode` is disabled ([#2792](https://github.com/nuxt/ui/issues/2792)) ([f06fbaf](https://github.com/nuxt/ui/commit/f06fbafc1e709c7b4e54e2ba40d44c5770685a5d))
* **Form:** resolve async validation in yup & issue directly mutate state ([#2702](https://github.com/nuxt/ui/issues/2702)) ([c9806da](https://github.com/nuxt/ui/commit/c9806da6d850ea50ff8d2f11a1fbc5a43459b71f))
* **icons:** make `loading` icon clockwise ([#2797](https://github.com/nuxt/ui/issues/2797)) ([bc2bcb3](https://github.com/nuxt/ui/commit/bc2bcb30d97e2e873c4c7d535f82a4980cd35b02))
* **Link:** partial query match for Vue ([#2787](https://github.com/nuxt/ui/issues/2787)) ([a6c2205](https://github.com/nuxt/ui/commit/a6c22052e1c70e4ce6b2c7f783667a7f8c6cafa4))
* **locale:** improve German translation ([#2826](https://github.com/nuxt/ui/issues/2826)) ([c440c91](https://github.com/nuxt/ui/commit/c440c91a29fc1acd281a7f9d9b0cf74f5341553d))
* **Modal:** prevent from going out of screen ([b7ba2c7](https://github.com/nuxt/ui/commit/b7ba2c7759485ddb0a8bae589e4b6536ac9b1c96)), closes [#2711](https://github.com/nuxt/ui/issues/2711)
* **NavigationMenu:** wrong badge class ([86f2b48](https://github.com/nuxt/ui/commit/86f2b4856cc6beaf0440795500a5c74f9af04f36)), closes [#2766](https://github.com/nuxt/ui/issues/2766)
* **Progress:** handle `horizontal` animation in RTL mode ([#2723](https://github.com/nuxt/ui/issues/2723)) ([0baa3a0](https://github.com/nuxt/ui/commit/0baa3a06d449ab97093c451bd16215cf83c39447))
* **Stepper:** handle RTL mode ([#2844](https://github.com/nuxt/ui/issues/2844)) ([198d04d](https://github.com/nuxt/ui/commit/198d04de51d16ec7fcaa546370e4f67aa73bfee0))
* **Stepper:** missing import ([816bb69](https://github.com/nuxt/ui/commit/816bb69debdbf83f36c3ed3627985142e62b7dd1))
* **Table:** handle `loading` animation in RTL mode ([#2771](https://github.com/nuxt/ui/issues/2771)) ([b1550d5](https://github.com/nuxt/ui/commit/b1550d58adfeb09977619ad3ff7e776782a89603))
* **Tabs:** prevent hover on disabled ([a938d24](https://github.com/nuxt/ui/commit/a938d24f90431494c2da89411c301a228ab8d3f7))
* **Tabs:** truncate not working ([c1ff978](https://github.com/nuxt/ui/commit/c1ff978370fb343950837b380ccf02a33db53ccb))
* **types:** handle array of strings in AppConfig ([#2854](https://github.com/nuxt/ui/issues/2854)) ([4b241ba](https://github.com/nuxt/ui/commit/4b241ba3c32f4456252768b664488799a8278f0e))
* **useLocale:** update locale import to enable tree shaking ([#2735](https://github.com/nuxt/ui/issues/2735)) ([3bccb67](https://github.com/nuxt/ui/commit/3bccb6782a601e686df5d0ee405d738572f182e1))
## [3.0.0-alpha.9](https://github.com/nuxt/ui/compare/v3.0.0-alpha.8...v3.0.0-alpha.9) (2024-11-19)
### Features
* **cli:** add locale command ([#2586](https://github.com/nuxt/ui/issues/2586)) ([824ba56](https://github.com/nuxt/ui/commit/824ba5629183bc4cd59321213558770db211f6e5))
* **css:** add `--ui-bg-muted` / `--ui-border-muted` variables ([7f6db45](https://github.com/nuxt/ui/commit/7f6db45f1e15ef39cda9b732cb601c552f29570a))
* **Form:** apply transformations ([#2550](https://github.com/nuxt/ui/issues/2550)) ([75c5e87](https://github.com/nuxt/ui/commit/75c5e87724e7abdf0a6751d7a1dbbafb947f373f))
* **FormField:** add `error-pattern` prop ([#2601](https://github.com/nuxt/ui/issues/2601)) ([143612e](https://github.com/nuxt/ui/commit/143612ec737d1c7571398601c3222f2eed37996e))
* **InputMenu/SelectMenu:** add `create-item` prop ([#2472](https://github.com/nuxt/ui/issues/2472)) ([f516d7b](https://github.com/nuxt/ui/commit/f516d7b36da51565f4ab05a4c9cfe5e5b4015124))
* **InputNumber:** implement component ([#2577](https://github.com/nuxt/ui/issues/2577)) ([bd2f077](https://github.com/nuxt/ui/commit/bd2f077fe8e645d5fce8b1eb5a6eb1068b3e8f7c))
* **Link:** allow partial query match for its active state ([#2664](https://github.com/nuxt/ui/issues/2664)) ([7329900](https://github.com/nuxt/ui/commit/7329900ae549430b88567a09cbb585d3cf0a6d32))
* **locale:** add Persian language ([#2682](https://github.com/nuxt/ui/issues/2682)) ([14fb21b](https://github.com/nuxt/ui/commit/14fb21be0034ffc0ba5d213734c00f12e0d6bea8))
* **locale:** add Polish language ([#2678](https://github.com/nuxt/ui/issues/2678)) ([2fc36c8](https://github.com/nuxt/ui/commit/2fc36c878c67967ec91e4f6999575bad45521d44))
* **locale:** add support for Arabic ([#2582](https://github.com/nuxt/ui/issues/2582)) ([602a667](https://github.com/nuxt/ui/commit/602a667343be22b72383ab3cf42f36ec9e135082))
* **locale:** add support for Czech translation ([#2593](https://github.com/nuxt/ui/issues/2593)) ([4889d30](https://github.com/nuxt/ui/commit/4889d30b448296de42e146dc5771738837c31f8c))
* **locale:** add support for Italian ([#2583](https://github.com/nuxt/ui/issues/2583)) ([4fbbb25](https://github.com/nuxt/ui/commit/4fbbb25f68b0b5ee76e50f2da776a74d54acc041))
* **locale:** provide `code` ([#2611](https://github.com/nuxt/ui/issues/2611)) ([8a8b1ee](https://github.com/nuxt/ui/commit/8a8b1ee2e1628bc5439ef109d3c68b69bf631f81))
* **locale:** provide `dir` on `defineLocale` ([#2620](https://github.com/nuxt/ui/issues/2620)) ([937585c](https://github.com/nuxt/ui/commit/937585cb3f8bc902d60a4b5904711598204aee2d))
* **locale:** translate chinese ([#2580](https://github.com/nuxt/ui/issues/2580)) ([febda5c](https://github.com/nuxt/ui/commit/febda5c2b67374d1358a66694543b77037d239c6))
* **locale:** translate Spanish ([#2644](https://github.com/nuxt/ui/issues/2644)) ([8ed434c](https://github.com/nuxt/ui/commit/8ed434c105b75ae02aa7493a235cebb64d518d09))
* **locale:** typing `dir` ([#2643](https://github.com/nuxt/ui/issues/2643)) ([e55c0e2](https://github.com/nuxt/ui/commit/e55c0e25947e7bcef931b26dafaad120f488a627))
* **module:** support i18n in components ([#2553](https://github.com/nuxt/ui/issues/2553)) ([2636240](https://github.com/nuxt/ui/commit/26362408b161108487b889ff001bec9166059c79))
* **NavigationMenu:** control items `open` & `defaultOpen` on vertical ([30218f1](https://github.com/nuxt/ui/commit/30218f1b5b0a56207fd4db224ffa0401ac194a04)), closes [#2608](https://github.com/nuxt/ui/issues/2608)
* **PinInput:** implement component ([#2570](https://github.com/nuxt/ui/issues/2570)) ([95aa6f6](https://github.com/nuxt/ui/commit/95aa6f68b316d02c28d1124d9a826bca55cde81f))
* **Popover:** add `prevent-close` prop ([ea97759](https://github.com/nuxt/ui/commit/ea97759c2c219bdf5c48b652b47d293ddf513a00)), closes [#2245](https://github.com/nuxt/ui/issues/2245)
* **SelectMenu:** use `UInput` in search to handle props like icon ([ff1e079](https://github.com/nuxt/ui/commit/ff1e0798d384d40ad82a95fe5faa16acb080efe3)), closes [#2021](https://github.com/nuxt/ui/issues/2021)
* **Table:** add `caption` prop ([446f9c1](https://github.com/nuxt/ui/commit/446f9c1085e96187afdc5c1d7ce3450f8df1a2e1))
### Bug Fixes
* **App:** missing `vue` imports ([ddb4690](https://github.com/nuxt/ui/commit/ddb46905e7e3480ab578bcd8a478f25dff60081a))
* **App:** remove `dir` prop ([#2630](https://github.com/nuxt/ui/issues/2630)) ([7cc26d0](https://github.com/nuxt/ui/commit/7cc26d098dff70923bcd9d414d675018951b1967))
* **Breadcrumb/Carousel/Pagination:** handle icons in RTL mode ([#2633](https://github.com/nuxt/ui/issues/2633)) ([e5119a9](https://github.com/nuxt/ui/commit/e5119a9ca4e217ef769904323c16bd8c0cbc02d9))
* **Breadcrumb:** render as `nav` ([756f791](https://github.com/nuxt/ui/commit/756f791a1a8dd3a4a88c212b4e4f775584decb55)), closes [#2649](https://github.com/nuxt/ui/issues/2649)
* **Button:** improve neutral solid variant hover ([8d85498](https://github.com/nuxt/ui/commit/8d85498ee197ec0b26cdd7c4b08f84fec45ddd8f))
* **Carousel:** use `dir` from locale ([#2647](https://github.com/nuxt/ui/issues/2647)) ([1fbbfe8](https://github.com/nuxt/ui/commit/1fbbfe8df06b3b8b294615ac328d582c5230aa8b))
* **ContextMenu/DropdownMenu:** relative imports with prefix ([47f58f5](https://github.com/nuxt/ui/commit/47f58f52ef2d03176a184a3ca2154f5cea655edb))
* **css:** `--font-family-sans` renamed to `--font-sans` ([#2680](https://github.com/nuxt/ui/issues/2680)) ([b2fa657](https://github.com/nuxt/ui/commit/b2fa65734bb59186520c985f7c73fc34a0cb8b37))
* **css:** remove useless spacing override ([8d00265](https://github.com/nuxt/ui/commit/8d0026558a21efbbca08e9939844f7479a0d6cce))
* **FormField:** missing conditions to apply container classes ([#2631](https://github.com/nuxt/ui/issues/2631)) ([9241ba1](https://github.com/nuxt/ui/commit/9241ba1230b0fde41595634362d83c92c66b7699))
* **Form:** match `error-pattern` on input validation ([#2606](https://github.com/nuxt/ui/issues/2606)) ([3584a33](https://github.com/nuxt/ui/commit/3584a3328b8588f024557c9908242bc374853419))
* **InputMenu/SelectMenu:** init `filter` with `labelKey` ([18931ac](https://github.com/nuxt/ui/commit/18931acdb316bc72a3e5ed6d20985688ad5c8d99))
* **InputMenu/SelectMenu:** look in `items` only with `value-attribute` ([0ceafe1](https://github.com/nuxt/ui/commit/0ceafe1d54000f3eb49562b00c188d82fa23c4ee)), closes [#2464](https://github.com/nuxt/ui/issues/2464)
* **InputMenu/SelectMenu:** multiple not working with generic boolean casting ([503f701](https://github.com/nuxt/ui/commit/503f701c7ecdfe27e9057e5ddebfc7e03889d61b)), closes [#2541](https://github.com/nuxt/ui/issues/2541)
* **InputMenu/SelectMenu:** use `isEqual` from `ohash` ([f943f88](https://github.com/nuxt/ui/commit/f943f88fcc9f4678d8f7bd224799e289a0c57dd8))
* **Link:** missing relative import ([#2588](https://github.com/nuxt/ui/issues/2588)) ([95a0bbc](https://github.com/nuxt/ui/commit/95a0bbc581a40677f620eed3170f9a423976214b))
* **locale:** Improve German translation ([#2676](https://github.com/nuxt/ui/issues/2676)) ([992be91](https://github.com/nuxt/ui/commit/992be91823fe1877254ccd092c71c77dd3ff42f7))
* **locale:** it translation ([#2623](https://github.com/nuxt/ui/issues/2623)) ([73e25ed](https://github.com/nuxt/ui/commit/73e25ed23562f755ea4c66e6c5fb06dd18caac1e))
* **locale:** Italian translation ([#2584](https://github.com/nuxt/ui/issues/2584)) ([d167c9b](https://github.com/nuxt/ui/commit/d167c9b807a82fdf0fd280ce8417a66f86d7ed72))
* **Modal/Slideover:** prevent `esc` with `prevent-close` prop ([9e2cc5b](https://github.com/nuxt/ui/commit/9e2cc5b12567472044726924a3896b4b0e7993a1)), closes [#2501](https://github.com/nuxt/ui/issues/2501)
* **module:** remove `fast-deep-equal` in favor of custom `isEqual` ([37a3597](https://github.com/nuxt/ui/commit/37a359701f4b2ce4a9b0727b64c0e3eea6be00b4))
* **module:** skip devtools renderer page injection if router integration is disabled ([#2571](https://github.com/nuxt/ui/issues/2571)) ([afe4003](https://github.com/nuxt/ui/commit/afe40033b088d8aedb73fa8387a0284ef78444e4))
* **PinInput:** missing `useFormField` import ([601f4b2](https://github.com/nuxt/ui/commit/601f4b2cd2027817b935e02a0b4584dc3dce655f))
* **Textarea:** `autoresize` does not work when initializing `modelValue` ([#2681](https://github.com/nuxt/ui/issues/2681)) ([d3a079a](https://github.com/nuxt/ui/commit/d3a079a644db3dfe2f4e9567973550d74b3ba905))
* **Toaster:** teleport to `body` ([b0be26d](https://github.com/nuxt/ui/commit/b0be26d67feab467ac5862edd82e52df03a5091c)), closes [#2404](https://github.com/nuxt/ui/issues/2404)
* **Toast:** unreachable behind overlays ([#2650](https://github.com/nuxt/ui/issues/2650)) ([0daac5b](https://github.com/nuxt/ui/commit/0daac5bafb756c3a2dfaf2bf166c30c0eb476e08))
* **useLocale:** missing import in various components ([#2603](https://github.com/nuxt/ui/issues/2603)) ([df7a61a](https://github.com/nuxt/ui/commit/df7a61a97a14b3d7943baee6a74686134dfdb10b))
### Reverts
* Revert "docs(ComponentCode/ComponentExample): use relative imports" ([5deadc7](https://github.com/nuxt/ui/commit/5deadc709640bbfd3ec14c1c9363deb55e765d6a))
## [3.0.0-alpha.8](https://github.com/nuxt/ui/compare/v3.0.0-alpha.7...v3.0.0-alpha.8) (2024-11-07)
### ⚠ BREAKING CHANGES
* **theme:** migrate from `heroicons` to `lucide` (#2540)
### Features
* **Avatar:** infer `width` / `height` on `<img>` based on `size` prop ([c9adf33](https://github.com/nuxt/ui/commit/c9adf333be3e489b91fd044189809c28c62e7951))
* **Avatar:** use `NuxtImg` component when available ([f1a14dd](https://github.com/nuxt/ui/commit/f1a14dd87c3e250a7eaa6729f68201201a476f9f)), closes [nuxt/ui#2078](https://github.com/nuxt/ui/issues/2078)
* **Badge:** handle `icon` and `avatar` props ([#2497](https://github.com/nuxt/ui/issues/2497)) ([2d52834](https://github.com/nuxt/ui/commit/2d52834529e00a43b1a9b3015d073500b4208981))
* **components:** improve RTL support ([#2433](https://github.com/nuxt/ui/issues/2433)) ([94c4918](https://github.com/nuxt/ui/commit/94c49186e16d84d77a637bbdfe00e7cb880204fe))
* **DropdownMenu/ContextMenu:** handle `color` field in items ([#2510](https://github.com/nuxt/ui/issues/2510)) ([f66c96e](https://github.com/nuxt/ui/commit/f66c96e277970f80c905a8936c73b1d37479a940))
* **InputMenu/Select/SelectMenu:** `arrow` prop implementation ([#2503](https://github.com/nuxt/ui/issues/2503)) ([f26f6c8](https://github.com/nuxt/ui/commit/f26f6c8168ad5e44e47ab770cee10035257841a2))
* **Kbd:** special keys for macOS and other systems ([#2494](https://github.com/nuxt/ui/issues/2494)) ([332c6c0](https://github.com/nuxt/ui/commit/332c6c08d73ebdbffc18e1f196962eaa76e7a8dc))
* **module:** add support for `vue` using `unplugin` ([#2416](https://github.com/nuxt/ui/issues/2416)) ([d4a943e](https://github.com/nuxt/ui/commit/d4a943e631b5e16dc7863395f1dd906087228e1c))
* **module:** devtools integration ([#2196](https://github.com/nuxt/ui/issues/2196)) ([701c75a](https://github.com/nuxt/ui/commit/701c75a2a88a29be2fce193f75e1484799a5539c))
* **NavigationMenu:** add `item-content` slot ([b5ca0d9](https://github.com/nuxt/ui/commit/b5ca0d96f1de049dde698e57a340fc8ee54dd2e7))
* **Table:** customize `header` and `cell` through slots ([#2457](https://github.com/nuxt/ui/issues/2457)) ([ef561e7](https://github.com/nuxt/ui/commit/ef561e7cba172b61f296d4ff11815ec31902fb4a))
* **theme:** migrate from `heroicons` to `lucide` ([#2540](https://github.com/nuxt/ui/issues/2540)) ([a6c1a6c](https://github.com/nuxt/ui/commit/a6c1a6c587ca35439852ce93cd4edc5041c6a9bf))
### Bug Fixes
* **ButtonGroup:** merge class with theme ([d980115](https://github.com/nuxt/ui/commit/d9801154088ec7a20901b805f5d21e485e481d98)), closes [nuxt/ui#2498](https://github.com/nuxt/ui/issues/2498)
* **Carousel:** add missing `aria-label` on dots ([#2489](https://github.com/nuxt/ui/issues/2489)) ([03dd1eb](https://github.com/nuxt/ui/commit/03dd1eba7ece4c48393960dc6c725be3a1eec776))
* **Chip:** proxy attrs to slot ([8669553](https://github.com/nuxt/ui/commit/8669553ea415cc969b2066a78830d03e8dfc811b)), closes [nuxt/ui#2484](https://github.com/nuxt/ui/issues/2484)
* **components:** missing relative imports ([1a93d13](https://github.com/nuxt/ui/commit/1a93d13a1609d8b90783f20b330738cd7456503e)), closes [nuxt/ui#2515](https://github.com/nuxt/ui/issues/2515)
* **InputMenu/Select/SelectMenu:** improve types ([#2471](https://github.com/nuxt/ui/issues/2471)) ([db8111d](https://github.com/nuxt/ui/commit/db8111d7835d030ced79899e826ff1eb74cf1cf4))
* **InputMenu/SelectMenu:** `fast-deep-equal` import ([309e52f](https://github.com/nuxt/ui/commit/309e52faa76fc0a135dbc0d9543380ffd9066bda)), closes [nuxt/ui#2488](https://github.com/nuxt/ui/issues/2488)
* **module:** add `fast-deep-equal` in `optimizeDeps` ([0bfe2b6](https://github.com/nuxt/ui/commit/0bfe2b60b3eb06ec30c80505f10380bab4f7ad4c))
* **module:** define `[#build](https://github.com/nuxt/ui/issues/build)/app.config` ([12ae20d](https://github.com/nuxt/ui/commit/12ae20df20db18d233a185c59ede7dcaeca93071)), closes [nuxt/ui#2532](https://github.com/nuxt/ui/issues/2532)
* **NavigationMenu:** add missing `min-w-0` to make truncate work ([#2476](https://github.com/nuxt/ui/issues/2476)) ([1402436](https://github.com/nuxt/ui/commit/1402436c2b0262edada04273b60c3b2914df2895))
* **NavigationMenu:** enforce `data-orientation` ([64ad4b6](https://github.com/nuxt/ui/commit/64ad4b6892d827df921550bf7ae31048d8d6cc50))
* **NavigationMenu:** improve generic types ([#2482](https://github.com/nuxt/ui/issues/2482)) ([fc2015b](https://github.com/nuxt/ui/commit/fc2015bb0e9ccb017a91ba1ee839cd84cf740cf3))
* **Table:** types in undeclared slots ([#2544](https://github.com/nuxt/ui/issues/2544)) ([f821e66](https://github.com/nuxt/ui/commit/f821e6681bfc5d1515fe7158fe3fda639a897ac8))
* **Tabs:** same behaviour between `pill` and `link` variants ([e592da2](https://github.com/nuxt/ui/commit/e592da2fcb9deb5ad5f2ffb442ff07d86923bab6)), closes [#2338](https://github.com/nuxt/ui/issues/2338)
* **templates:** type error in app config ([77d18d8](https://github.com/nuxt/ui/commit/77d18d8ab7bf28aee316a443d52b852dfc5fd1ca)), closes [nuxt/ui#2481](https://github.com/nuxt/ui/issues/2481)
* **useKbd:** hydration issue ([845f85a](https://github.com/nuxt/ui/commit/845f85a072598f47c7afe10c4e5ebcc480450113)), closes [#2494](https://github.com/nuxt/ui/issues/2494)
* **utils:** improve `escapeRegExp` function ([a97c511](https://github.com/nuxt/ui/commit/a97c511279d32747b487ab5de32677e36a884e53))
## [3.0.0-alpha.7](https://github.com/nuxt/ui/compare/v3.0.0-alpha.6...v3.0.0-alpha.7) (2024-10-23)
### ⚠ BREAKING CHANGES
* **components:** rename `select` to `onSelect` on items
### Features
* **Accordion/Breadcrumb/CommandPalette/ContextMenu/DropdownMenu/NavigationMenu/Tabs:** add `labelKey` prop ([acfc6ce](https://github.com/nuxt/ui/commit/acfc6cef2db88774749d38a98416fdd85922d513))
* **Button:** handle `avatar` prop ([a54c3e4](https://github.com/nuxt/ui/commit/a54c3e49fe782e329f9245e496c336143e3e4b23))
* **CommandPalette:** handle `loading` field in items ([49abad2](https://github.com/nuxt/ui/commit/49abad243cee97b99753e2500c4bdaa0efe5eb75))
* **ContextMenu/DropdownMenu:** handle `checkbox` items type ([8ef6e71](https://github.com/nuxt/ui/commit/8ef6e712acbb2fc026eb35cefa8e29fc0b59d70f)), closes [#2144](https://github.com/nuxt/ui/issues/2144)
* **ContextMenu/DropdownMenu:** handle `loading` field in items ([b975235](https://github.com/nuxt/ui/commit/b975235c8b8e693a32efd3fd5381eed88fa3db4d))
* **Form:** add `superstruct` validation ([#2363](https://github.com/nuxt/ui/issues/2363)) ([5385944](https://github.com/nuxt/ui/commit/53859443593b584f7cd44106021e80f441e9ca06))
* **Input/InputMenu/Select/SelectMenu:** handle `avatar` prop ([53a3796](https://github.com/nuxt/ui/commit/53a3796d1b08717a589028f99fc01084df661708))
* **InputMenu/RadioGroup/Select/SelectMenu:** handle `labelKey` and use `get` to support dot notation ([f6f9823](https://github.com/nuxt/ui/commit/f6f9823b15d84362d093703cb15ecba64c73c2c2))
* **NavigationMenu:** handle children on `vertical` orientation ([#2384](https://github.com/nuxt/ui/issues/2384)) ([34bddd4](https://github.com/nuxt/ui/commit/34bddd45be2ba1d51ddb9b6b40860f2414f63180))
* **Table:** implement component ([#2364](https://github.com/nuxt/ui/issues/2364)) ([b54950e](https://github.com/nuxt/ui/commit/b54950e3ed77a466eb048788757a76018638eafa))
### Bug Fixes
* **AvatarGroup:** wrong ring on big sizes ([61b2323](https://github.com/nuxt/ui/commit/61b232377b4b1fb41de30fd33e690a36b36ba575))
* **Button:** invalid hover on `link` variant ([df2013c](https://github.com/nuxt/ui/commit/df2013ca92a49b5947e2fbc2641fd92860c32042))
* **Checkbox:** `indeterminate` prop not working ([f6631ff](https://github.com/nuxt/ui/commit/f6631ff7bc607e140e9db2c7335c409a811820e4))
* **components:** rename `select` to `onSelect` on items ([b39c4d1](https://github.com/nuxt/ui/commit/b39c4d127e0ddf7607e868ecc83930ca49436bad))
* **css:** `font-sans` already applied on <html> ([9e03da4](https://github.com/nuxt/ui/commit/9e03da41b3537236864ae2a533c47e99a6270b77))
* **css:** make `[@theme](https://github.com/theme)` default ([a2bad2e](https://github.com/nuxt/ui/commit/a2bad2eee2d2a9255152692898078d26e9ecad98))
* **Drawer/Modal/Slideover:** no need for `z-index` since its isolated ([bcfa4b7](https://github.com/nuxt/ui/commit/bcfa4b74a9713be764ecb6db93d60d1360e52f07)), closes [nuxt/ui#2347](https://github.com/nuxt/ui/issues/2347)
* **Input/InputMenu/Select/SelectMenu:** uniformize placeholder color ([f59844b](https://github.com/nuxt/ui/commit/f59844bb617f50ef78ae5abe250b0744d7341a2f))
* **InputMenu/SelectMenu:** escape regexp before search ([7c21dde](https://github.com/nuxt/ui/commit/7c21ddefa87bf3d9999c0e790b48c004c078304d))
* **InputMenu/SelectMenu:** improve displayed value ([0f9ac87](https://github.com/nuxt/ui/commit/0f9ac8733e402d1f22a3eb6c1e24a8d5607b3572)), closes [nuxt/ui#2353](https://github.com/nuxt/ui/issues/2353)
* **InputMenu:** emit `focus` event ([#2386](https://github.com/nuxt/ui/issues/2386)) ([7802aac](https://github.com/nuxt/ui/commit/7802aacf3f5be572dd64c3288196432a41f06b0e))
* **module:** stop using tailwind's shorthand arbitrary variable syntax ([#2366](https://github.com/nuxt/ui/issues/2366)) ([dcce571](https://github.com/nuxt/ui/commit/dcce571cdab08de8408c8ba6b236b051eec3a603))
* **Slideover:** set max height on `top` / `bottom` positions ([a68016e](https://github.com/nuxt/ui/commit/a68016ec5d6859e892c90333d35fd7db09fdcf10)), closes [nuxt/ui#2388](https://github.com/nuxt/ui/issues/2388)
## [3.0.0-alpha.6](https://github.com/nuxt/ui/compare/v3.0.0-alpha.5...v3.0.0-alpha.6) (2024-10-09)
### ⚠ BREAKING CHANGES
* **module:** implement design system with CSS variables (#2298)
### Features
* **Carousel:** implement component ([#2288](https://github.com/nuxt/ui/issues/2288)) ([68ee3f1](https://github.com/nuxt/ui/commit/68ee3f11ca01b19cf890ef8105ffb87ef9bb3188))
* **Form:** add Standard Schema support ([#2303](https://github.com/nuxt/ui/issues/2303)) ([0955c07](https://github.com/nuxt/ui/commit/0955c07edd8ea5b5c39b770804b8e4c6f86d94b0))
* **module:** implement `--ui-radius` CSS variable ([#2341](https://github.com/nuxt/ui/issues/2341)) ([057e86c](https://github.com/nuxt/ui/commit/057e86cfda1ef5c7a370c99ef409d22e48772ca7))
* **module:** set `disableTransition` option on `@nuxtjs/color-mode` ([b82af02](https://github.com/nuxt/ui/commit/b82af02839b7d75344d9431fabdc42f0ac0681e1))
### Bug Fixes
* **Accordion:** use `text-left break-words` instead of `truncate` on label ([6c7c2f0](https://github.com/nuxt/ui/commit/6c7c2f02f395747a0c68a499630f502e3f02ded3))
* **Alert:** default variant to `solid` for consistency ([3a7c5c2](https://github.com/nuxt/ui/commit/3a7c5c26011bfcffcdf6ac3451adb2af1453b9db))
* **Button:** center text with `block` prop ([3cf5535](https://github.com/nuxt/ui/commit/3cf5535b2faa28b557ca55d694abdfa7d7ad0efc)), closes [nuxt/ui#2317](https://github.com/nuxt/ui/issues/2317)
* **Carousel:** move embla plugins to `dependencies` ([bee04ad](https://github.com/nuxt/ui/commit/bee04adf4cc4fd6d69e93ad94500f5ef604405e7))
### Code Refactoring
* **module:** implement design system with CSS variables ([#2298](https://github.com/nuxt/ui/issues/2298)) ([9368c6a](https://github.com/nuxt/ui/commit/9368c6a63955a2e6c2f4f900a9b91c61bb2e5a72))
## [3.0.0-alpha.5](https://github.com/nuxt/ui/compare/v3.0.0-alpha.4...v3.0.0-alpha.5) (2024-10-02)
* **Accordion:** improve `items` type ([#2487](https://github.com/nuxt/ui/issues/2487)) ([25378df](https://github.com/nuxt/ui/commit/25378df1d894546c4b08eb43a58b02b40ab9649b))
* **Button:** wrong `to` type ([8ab4a14](https://github.com/nuxt/ui/commit/8ab4a14394e0890b33a610e6491d891e89386959)), closes [#1253](https://github.com/nuxt/ui/issues/1253)
* **Divider:** default `type` from app config ([7846ca3](https://github.com/nuxt/ui/commit/7846ca35b5332a9e70f9990059f6041d60770e79)), closes [nuxt/ui#2398](https://github.com/nuxt/ui/issues/2398)
* **HorizontalNavigation/VerticalNavigation:** handle `badge` in RTL mode ([#2420](https://github.com/nuxt/ui/issues/2420)) ([4bf81be](https://github.com/nuxt/ui/commit/4bf81be36463bf280f31099c97a751e65240dcf5))
* **InputMenu/SelectMenu:** allow access nested object in `option-attribute` ([#2465](https://github.com/nuxt/ui/issues/2465)) ([ff18061](https://github.com/nuxt/ui/commit/ff1806143c45a7d83b00e78bec979a8f412a2827))
* **InputMenu/SelectMenu:** escape regexp before search ([c68ba76](https://github.com/nuxt/ui/commit/c68ba76fd0eebf411ccd5f047ee9a01b8ec5f5de)), closes [nuxt/ui#2308](https://github.com/nuxt/ui/issues/2308)
* **InputMenu/SelectMenu:** prevent unnecessary updates when modelValue is unchanged ([#2507](https://github.com/nuxt/ui/issues/2507)) ([1a94b55](https://github.com/nuxt/ui/commit/1a94b55caac91685f518ae4c24ca8dcbee827f86))
* **module:** missing types in `ui` config ([#2467](https://github.com/nuxt/ui/issues/2467)) ([23971ef](https://github.com/nuxt/ui/commit/23971efdb007701352ce58412db597cd95b9996b))
* **Progress:** handle `carousel` and `carousel-inverse` animations in RTL mode ([#2400](https://github.com/nuxt/ui/issues/2400)) ([20fb46a](https://github.com/nuxt/ui/commit/20fb46a3ba8d74fcaa1407b23d65b117cc9d6802))
* **RadioGroup:** rendering empty slots ([#2456](https://github.com/nuxt/ui/issues/2456)) ([b6ed1c5](https://github.com/nuxt/ui/commit/b6ed1c59ffe8c8aaac78a34d8559ca793bb92eaa))
* **Table:** `checkbox` not checked while using props by ([#2401](https://github.com/nuxt/ui/issues/2401)) ([1b7e36c](https://github.com/nuxt/ui/commit/1b7e36cf70a7252915c58657bc878cb29c719a7f))
* **Table:** `indeterminate` checkbox with pagination ([#2439](https://github.com/nuxt/ui/issues/2439)) ([070d2f8](https://github.com/nuxt/ui/commit/070d2f89b6d1cb9c236eeb779cb3918ed5770434))
* **Table:** export `TableRow` and `TableColumn` types ([c36964b](https://github.com/nuxt/ui/commit/c36964b5eacbd61a661f02953f0297a390fd1d34)), closes [nuxt/ui#2373](https://github.com/nuxt/ui/issues/2373)
* **Table:** handle dot nation with `by` prop ([#2413](https://github.com/nuxt/ui/issues/2413)) ([b72d343](https://github.com/nuxt/ui/commit/b72d3434e9ab024e8622611d32b5a4467c8364b9))
* **Tabs:** allow `aria-label` on items ([3cf19ea](https://github.com/nuxt/ui/commit/3cf19ea5afcf97ef226d8be231d3b297c5f23b9f)), closes [nuxt/ui#1934](https://github.com/nuxt/ui/issues/1934)
## [2.18.7](https://github.com/nuxt/ui/compare/v2.18.6...v2.18.7) (2024-10-09)
### Features
* **module:** enable `@nuxtjs/color-mode` ([9dcf903](https://github.com/nuxt/ui/commit/9dcf903926046b6e92b4784043e374d2174e4201))
* **module:** override `dark` variant with class strategy ([0f86b87](https://github.com/nuxt/ui/commit/0f86b87385375e5bd859e84d21f8b4f06b0a99e0))
* **forms:** allow `null` as initial value ([#2275](https://github.com/nuxt/ui/issues/2275)) ([474accb](https://github.com/nuxt/ui/commit/474accbefb36ead3b54406ee4ae0fdd2387fab61))
### Bug Fixes
* **Button:** props specified more than once ([66a04ad](https://github.com/nuxt/ui/commit/66a04add91389910e1336bf0be1cfeada3540f76))
## [3.0.0-alpha.4](https://github.com/nuxt/ui/compare/v3.0.0-alpha.3...v3.0.0-alpha.4) (2024-10-01)
### Features
* **Drawer:** handle `direction` + `handle` props ([5f77aac](https://github.com/nuxt/ui/commit/5f77aac368448c7c45a0f9238d2dc3a5b0de825e))
### Bug Fixes
* **Accordion:** missing `min-w-0` on trigger ([6c28597](https://github.com/nuxt/ui/commit/6c285977bd175d4866ca601bca47132ebb2d3440))
* **build.config:** disable mkdist `addRelativeDeclarationExtensions` option ([f54f607](https://github.com/nuxt/ui/commit/f54f6074131db0f68eab1edcde3a4b2a7ecaba92))
* **CommandPalette:** missing `min-w-0` on root ([a61e765](https://github.com/nuxt/ui/commit/a61e7656c25b26409cab77178e67d1cb9ec22dbd))
* **Drawer:** improve max-width on mobile ([fac52fa](https://github.com/nuxt/ui/commit/fac52fa933aeb02f0855d20be37c4214efba0ab7))
* **InputMenu:** missing `group` on trailing ([2c7c41b](https://github.com/nuxt/ui/commit/2c7c41bd046a961d398bbe8ee4a5945cd1fbaeab))
* **README:** npm badge link ([#2271](https://github.com/nuxt/ui/issues/2271)) ([30c33c7](https://github.com/nuxt/ui/commit/30c33c71134ccbea4258949a851eaf8b26213b60))
* **templates:** app config colors type ([96c9246](https://github.com/nuxt/ui/commit/96c9246d83b54637ceb2e2dd77542e435690c387))
* **Toast:** improve focus styles ([1f9abda](https://github.com/nuxt/ui/commit/1f9abdae614acbfa0be868a599071a601406f0f5))
### Reverts
* Revert "chore(deps): refresh lock" ([b83ecc9](https://github.com/nuxt/ui/commit/b83ecc9a6f309d37d3f096667143a4ed7700db6d))
## [3.0.0-alpha.3](https://github.com/nuxt/ui/compare/v3.0.0-alpha.2...v3.0.0-alpha.3) (2024-09-18)
### Features
* **module:** move `colors` options into `theme.colors` ([2e95446](https://github.com/nuxt/ui/commit/2e954467c4679d70b68d3155ae34eca300508e38))
## [3.0.0-alpha.2](https://github.com/nuxt/ui/compare/v3.0.0-alpha.1...v3.0.0-alpha.2) (2024-09-18)
### Features
* **Button:** loading-auto ([#2198](https://github.com/nuxt/ui/issues/2198)) ([ed18e74](https://github.com/nuxt/ui/commit/ed18e7454986ed104fc73b77e88573b3c1df8566))
* **module:** improve options ([5076b8c](https://github.com/nuxt/ui/commit/5076b8cc9e908cf289150c668b1707dc1397dba3))
* **module:** install `@nuxt/fonts` by default ([8898a5d](https://github.com/nuxt/ui/commit/8898a5d6758b1047e35bcdf648362c42de387488))
### Bug Fixes
* **Button:** button link not showing disabled classes ([#2189](https://github.com/nuxt/ui/issues/2189)) ([7c2adf2](https://github.com/nuxt/ui/commit/7c2adf2f7fc88174897cc775c752414a8b84f3a9))
* **Button:** duplicate click handlers ([#2213](https://github.com/nuxt/ui/issues/2213)) ([dd6bf56](https://github.com/nuxt/ui/commit/dd6bf5694ff05ed1eeb9df8c42f833f51dbec66e))
* **playground:** typecheck ([cf92c5f](https://github.com/nuxt/ui/commit/cf92c5f3f0e0f329844ee60772773a844ea1cc71))
## [3.0.0-alpha.1](https://github.com/nuxt/ui/compare/v3.0.0-alpha.0...v3.0.0-alpha.1) (2024-09-11)
### Features
* **module:** hard-code css file to be imported anywhere ([62a2643](https://github.com/nuxt/ui/commit/62a2643a80e7ab6c6e154ba59801d393d9a53c40))
### Bug Fixes
* **ContextMenu/DropdownMenu:** lint unused var ([a03a55c](https://github.com/nuxt/ui/commit/a03a55cf8d89c45fba6607f83b67367cfd419c3e))
* import from `../types/index` ([3e28c8f](https://github.com/nuxt/ui/commit/3e28c8f35a64a7c19ce18f36dbe580503f2050bc))
* **Link:** only bind necessary slot props ([7fe7ff6](https://github.com/nuxt/ui/commit/7fe7ff6fe2055d29b7fd54793ca52850842294e3))
* **NavigationMenu:** handle open state hover effect ([84186e5](https://github.com/nuxt/ui/commit/84186e52e997a4dd55f98bf7bc0199656943b9c9))
* **plugins:** infer type from `[#app](https://github.com/nuxt/ui/issues/app)` to remove build warning ([debf9cc](https://github.com/nuxt/ui/commit/debf9cc85339b7b162ac34392757214a16dad977))
* **README:** license link ([71428da](https://github.com/nuxt/ui/commit/71428da3dc9c6f17a6e21b2bd889f6090be127d6))
* **templates:** augment `@nuxt/schema` rather than `nuxt/schema` ([40b3570](https://github.com/nuxt/ui/commit/40b3570343dc68684d3ecf03e1a439e815f57ba3))
* **types:** no longer need to import types with `/index` suffix ([8277167](https://github.com/nuxt/ui/commit/82771673f20b6ece7e126a4f8914311473d687e3))
* **useButtonGroup:** lint ([97d0593](https://github.com/nuxt/ui/commit/97d05936cd198026e6c4d66920266e0b4b85242c))
## [3.0.0-alpha.0](https://github.com/nuxt/ui/compare/v2.15.0...v3.0.0-alpha.0) (2024-09-05)
### ⚠ BREAKING CHANGES
* **module:** move `primary` and `gray` inside `colors` object
* **Link:** expose `active` instead of `isActive` in default slot
### Features
* **Accordion:** add `body` slot to solve animation flick ([85d1723](https://github.com/nuxt/ui/commit/85d172339f690aeb83a7ae7d3ad812938bb6e000))
* **Accordion:** add `trailingIcon` prop ([fc3d42d](https://github.com/nuxt/ui/commit/fc3d42d5eaba9491ae21f05025899219346f5ca4))
* **Accordion:** new component ([a21648a](https://github.com/nuxt/ui/commit/a21648a1918584b3f4036da96604be66e560b71c))
* add `transition-colors` on hover effects ([633a394](https://github.com/nuxt/ui/commit/633a39452aa28afe4a523f458787fc5102d28ee6))
* **Alert/CommandPalette/Modal/Slideover/Toast:** handle `closeIcon` and uniformize `close` prop ([e4eef89](https://github.com/nuxt/ui/commit/e4eef8976742ac5de418af0fe80d79bfd32fa83f))
* **Alert:** add `actions` slot ([2d15709](https://github.com/nuxt/ui/commit/2d157090c029afb715706e7b464d37c0c377ea82))
* **Alert:** new component ([1535313](https://github.com/nuxt/ui/commit/1535313596cd144886b887ede295da980f394082)), closes [#23](https://github.com/nuxt/ui/issues/23)
* **Avatar:** bind `as` to image to support `NuxtImg` ([cff37bf](https://github.com/nuxt/ui/commit/cff37bf211ddcf67a67ef66dc526ba6cd780ff21))
* **AvatarGroup:** new component ([#71](https://github.com/nuxt/ui/issues/71)) ([def5f7c](https://github.com/nuxt/ui/commit/def5f7c10bd28fbfea5fb8a3c7314ff8592c5335))
* **Avatar:** new component ([978595c](https://github.com/nuxt/ui/commit/978595ce88bfef959f3cd6f405b405727e3929e0))
* **Breacrumb/ContextMenu/DropdownMenu/NavigationMenu:** bind item `class` on link ([d13e27e](https://github.com/nuxt/ui/commit/d13e27eb5bd75227f6e67cbcdfdfe31dcf59e2e4))
* **Breadcrumb:** new component ([53a2bc0](https://github.com/nuxt/ui/commit/53a2bc02642ec9ccecc71fa60cdd2913a4de5214)), closes [#22](https://github.com/nuxt/ui/issues/22)
* **Breadcrumb:** rename `links` to `items` + improve slots ([d56d3a1](https://github.com/nuxt/ui/commit/d56d3a13e3240fedeadcbd8bcadb5c732b7ce2bc))
* **Button:** add `subtle` variant ([1d2e1ca](https://github.com/nuxt/ui/commit/1d2e1caaf5edcbad55bc5c3c75da8afc90ab7a94))
* **ButtonGroup:** new component ([#88](https://github.com/nuxt/ui/issues/88)) ([43066fd](https://github.com/nuxt/ui/commit/43066fd9ea971c6b6c3bf5d58383bb2c9cd076a3))
* **Button:** use `useComponentIcons` ([6e10a09](https://github.com/nuxt/ui/commit/6e10a0942fb408c7092a95f9251ff763a8c3b2d0))
* **Card:** new component ([78908c3](https://github.com/nuxt/ui/commit/78908c3d64a6759a915b5a8b772e750f928740e4))
* **Checkbox/Progress/RadioGroup/Slider/Switch:** add `black` color ([08c91fe](https://github.com/nuxt/ui/commit/08c91fe8f1b7b8d0571bd140e05363e4b71ab6d8))
* **Checkbox:** new component ([#67](https://github.com/nuxt/ui/issues/67)) ([bfd5988](https://github.com/nuxt/ui/commit/bfd59883584aee4c1a0a88952f4277c52afdf2ca))
* **Chip:** new component ([d6bebd5](https://github.com/nuxt/ui/commit/d6bebd5ef9fb40e946a6e6a34c44aff8639c4290))
* **cli:** `init` command ([cdd9b17](https://github.com/nuxt/ui/commit/cdd9b178f32b9807c451734b85c4cfb9f5e8438d))
* **CommandPalette:** handle `filter` false and `postFilter` ([1ef977f](https://github.com/nuxt/ui/commit/1ef977fb8c3a754a909a82733f31b1b45577f021))
* **CommandPalette:** implement group `filter` function ([e29cf79](https://github.com/nuxt/ui/commit/e29cf793cbc46a960dd66241f3bb716887038d18))
* **CommandPalette:** improve theme and performance ([20476f4](https://github.com/nuxt/ui/commit/20476f4b9a95817598fb2e2ae5cb383b0d1411e2))
* **CommandPalette:** new component ([#80](https://github.com/nuxt/ui/issues/80)) ([d0017bf](https://github.com/nuxt/ui/commit/d0017bf847c05f64c3bd131b9e57b2f90009fbe3))
* **components:** allow override of sizes through `ui` prop ([6aa0ea3](https://github.com/nuxt/ui/commit/6aa0ea306f2b89a900c86b1a411217d108d399c0))
* **components:** uniformize colors and variants ([#141](https://github.com/nuxt/ui/issues/141)) ([c018c23](https://github.com/nuxt/ui/commit/c018c23224167df3594f39157d3cb35f0118534b))
* **ContextMenu:** handle `size` prop ([#130](https://github.com/nuxt/ui/issues/130)) ([aa832f3](https://github.com/nuxt/ui/commit/aa832f32a0ddfc6068537f6322603c0fa6f8b1df))
* **ContextMenu:** new component ([65a3b0a](https://github.com/nuxt/ui/commit/65a3b0a2d0f8a4e32b9c0ce4707f22268b32e3dc)), closes [#18](https://github.com/nuxt/ui/issues/18)
* **defineShortcuts:** migrate with reactivity ([#72](https://github.com/nuxt/ui/issues/72)) ([80b413a](https://github.com/nuxt/ui/commit/80b413a724d0702d66df9488b9a974f0d7ba0d41))
* **Drawer:** implement with `vaul-vue` ([5e6275f](https://github.com/nuxt/ui/commit/5e6275fcff151f3607939b1503ff60f970375564)), closes [#53](https://github.com/nuxt/ui/issues/53)
* **DropdownMenu:** add `[#item](https://github.com/nuxt/ui/issues/item)` slot for consistency ([1dcc1f5](https://github.com/nuxt/ui/commit/1dcc1f50740c1b4ed17c77a22562ccd662c85d15))
* **DropdownMenu:** handle `size` prop ([#125](https://github.com/nuxt/ui/issues/125)) ([dfa9936](https://github.com/nuxt/ui/commit/dfa99362d4d70ac76c43a1b1c3e815272bee9a25))
* **DropdownMenu:** handle item type `separator` ([a5bb25d](https://github.com/nuxt/ui/commit/a5bb25dd95be81d34564c5b5c4e3174ec126dbdb))
* **DropdownMenu:** new component ([#37](https://github.com/nuxt/ui/issues/37)) ([4403350](https://github.com/nuxt/ui/commit/44033508a7347a5c75204d359b641a6f2da2cff9))
* **DropdownMenu:** pass `index` to slots ([735f81e](https://github.com/nuxt/ui/commit/735f81e771d3673f444be99b93cff1ef93c3ac6c))
* expose `open` state to slots ([ed2c45a](https://github.com/nuxt/ui/commit/ed2c45ac76285bb394fa16970fca27690d3de454))
* **Form:** `Select` and `InputMenu` integration ([#97](https://github.com/nuxt/ui/issues/97)) ([52cf471](https://github.com/nuxt/ui/commit/52cf471099a78737e13f755fd89ff38c8c761aea))
* **Form:** nested form validation ([#23](https://github.com/nuxt/ui/issues/23)) ([1671278](https://github.com/nuxt/ui/commit/167127861f117ece8a54421b5000f50d8d611b39))
* **Form:** new component ([#4](https://github.com/nuxt/ui/issues/4)) ([de62676](https://github.com/nuxt/ui/commit/de62676647531c4d0a40c4696f9a7a3b75af32ff))
* **Form:** support for `valibot@33` ([#132](https://github.com/nuxt/ui/issues/132)) ([20acc92](https://github.com/nuxt/ui/commit/20acc92eecbd17b9a6ea16ed688fe39af94708a2))
* **Icon:** use `@antfu/nuxt-icon-poc` ([#76](https://github.com/nuxt/ui/issues/76)) ([142affb](https://github.com/nuxt/ui/commit/142affb9a72faa07bb9b448a95042c13aec09623))
* **Input/Textarea:** expose ref ([74a6bca](https://github.com/nuxt/ui/commit/74a6bca2b334f54b99294be8848f345e69ff1141))
* **Input:** handle icons ([de8100a](https://github.com/nuxt/ui/commit/de8100af3a36253d32d449a9bd445a761386b724))
* **InputMenu/Select/SelectMenu:** introduce `valueKey` prop ([eeec967](https://github.com/nuxt/ui/commit/eeec9676cde0201736d70739847ee820fb80657c)), closes [#108](https://github.com/nuxt/ui/issues/108)
* **InputMenu:** expose `modelValue` and `open` to slots ([659d5e2](https://github.com/nuxt/ui/commit/659d5e2c5a9164c684cb49429d5045bdae11eac6))
* **InputMenu:** handle `multiple` ([fe3ab65](https://github.com/nuxt/ui/commit/fe3ab652b4b9258cd02c48ded5b8858001818e03)), closes [#91](https://github.com/nuxt/ui/issues/91)
* **InputMenu:** handle `size` prop ([#131](https://github.com/nuxt/ui/issues/131)) ([18c5ead](https://github.com/nuxt/ui/commit/18c5ead1bd1f253524da587305c234a88c56ed25))
* **InputMenu:** new component ([#86](https://github.com/nuxt/ui/issues/86)) ([99f20a4](https://github.com/nuxt/ui/commit/99f20a4154b26f75fbec0762d5a02a08b5a319a7))
* **Input:** set `autocomplete` to `off` by default ([eba8b4b](https://github.com/nuxt/ui/commit/eba8b4b31a3d83d4dcb67246eed0fc21fb46dce7))
* **Input:** use `defineModel` ([#61](https://github.com/nuxt/ui/issues/61)) ([091f8e9](https://github.com/nuxt/ui/commit/091f8e91c45039391800de80807ce77db3656500))
* **Kbd:** add `color` prop ([2cc41de](https://github.com/nuxt/ui/commit/2cc41dedcfe73183a285a5ce5e7192290926771b))
* **Link:** break component in two with `custom` prop ([3ed5a08](https://github.com/nuxt/ui/commit/3ed5a085181be75d25178640d686274745e54aa3))
* **Link:** style with app config ([349780d](https://github.com/nuxt/ui/commit/349780dae18e3acc4cd1dda8152ae6d0377004ba))
* **Modal:** new component ([5d1d5b3](https://github.com/nuxt/ui/commit/5d1d5b33e8fe959644e5f93986c9c7630ea288cc))
* **Modal:** open programmatically ([#78](https://github.com/nuxt/ui/issues/78)) ([2bf99e1](https://github.com/nuxt/ui/commit/2bf99e1eb4df7333a46df666c446ba7af4e54e93))
* **module:** add `[@source](https://github.com/source)` when `@nuxt/content` is present ([8dfac7f](https://github.com/nuxt/ui/commit/8dfac7fd574bef3ea714e21b852c50aafd6feff4))
* **module:** add option to disable transitions ([5f4fd97](https://github.com/nuxt/ui/commit/5f4fd972ff2251863751549271a9e80123fdbfc8))
* **module:** allow `tailwind.css` customization ([8d560bd](https://github.com/nuxt/ui/commit/8d560bdd212bbbf25a7d4a706a99cc57721d593e))
* **module:** move `primary` and `gray` inside `colors` object ([ccbaf6e](https://github.com/nuxt/ui/commit/ccbaf6ea150e0902d7150585bd09f132fc26ff89))
* **NavigationMenu:** handle content, `color`, `variant`, etc. ([1af449d](https://github.com/nuxt/ui/commit/1af449d6e0e2cd454425d8bc6bf1482e5dac99fd))
* **NavigationMenu:** improve theme with `line` variant and border ([ec6ebba](https://github.com/nuxt/ui/commit/ec6ebbacbe1a0797ec86fe85197a98b084e27e5d))
* **NavigationMenu:** new component ([0d4d86d](https://github.com/nuxt/ui/commit/0d4d86d79db488b79ca2baf7d620b415a36cb135))
* **NavigationMenu:** pass `index` to slots ([0f10d98](https://github.com/nuxt/ui/commit/0f10d9882099256a77b86e5786a7e2ee71c83d46))
* **NavigationMenu:** rename `links` to `items` + improve slots ([ea19a30](https://github.com/nuxt/ui/commit/ea19a3061fb49960fe3b9d28d05cec8fd7f6647e))
* **NavigationMenu:** replace `line` variant with `highlight` prop ([af43b5d](https://github.com/nuxt/ui/commit/af43b5df250fb65bf9696b5b3fb6cb507b2184a1))
* **Pagination:** allow using pagination buttons as links ([#114](https://github.com/nuxt/ui/issues/114)) ([5c5676e](https://github.com/nuxt/ui/commit/5c5676edf957230bf3ac53fa527b1b4b4373750f))
* **Pagination:** new component ([c36bae4](https://github.com/nuxt/ui/commit/c36bae4b21e4a6c899be39800ca90051f79db1e0)), closes [#11](https://github.com/nuxt/ui/issues/11)
* **Popover:** handle `hover` mode ([7b89601](https://github.com/nuxt/ui/commit/7b8960124fcf24a5d3869e3913ea5220af3a76bf))
* **Popover:** new ([c131ce9](https://github.com/nuxt/ui/commit/c131ce955f23ce2613f5493689df8352de3cd4b6))
* **Progress:** new component ([#75](https://github.com/nuxt/ui/issues/75)) ([138cb2d](https://github.com/nuxt/ui/commit/138cb2d12d9414813beed22dcedcee61e3d4f6de))
* **RadioGroup:** handle `horizontal` orientation ([#74](https://github.com/nuxt/ui/issues/74)) ([8144372](https://github.com/nuxt/ui/commit/814437255e47d6be40cd00420e2ab579ab76f5b9))
* **RadioGroup:** handle `value-key` prop ([850e84c](https://github.com/nuxt/ui/commit/850e84c0e0ce11bdc90be1ae652dec6723012243))
* **RadioGroup:** new component ([#41](https://github.com/nuxt/ui/issues/41)) ([e29b514](https://github.com/nuxt/ui/commit/e29b514f8d114a56eee76a29388fe050eb5c2722))
* **Select/SelectMenu:** handle `size` prop ([#133](https://github.com/nuxt/ui/issues/133)) ([b61696c](https://github.com/nuxt/ui/commit/b61696cdca77cc2f671dcbf330e731230ec97ba3))
* **SelectMenu:** add prop to disable search ([db30284](https://github.com/nuxt/ui/commit/db30284e7a24f14544c2c3b758c7912e98d3768a))
* **SelectMenu:** handle `multiple` prop ([27ffb8d](https://github.com/nuxt/ui/commit/27ffb8d8abc466d2a4bbb9a313b0c4f6a3a97501)), closes [#102](https://github.com/nuxt/ui/issues/102)
* **SelectMenu:** new component ([#103](https://github.com/nuxt/ui/issues/103)) ([7a376b5](https://github.com/nuxt/ui/commit/7a376b5e49baf11eb09c1b58326441cb240f7cb7))
* **Select:** new component ([#92](https://github.com/nuxt/ui/issues/92)) ([1942b8e](https://github.com/nuxt/ui/commit/1942b8e117bdae745049b088afe7487b6a9095f9))
* **Separator:** new component ([#46](https://github.com/nuxt/ui/issues/46)) ([8d76a8b](https://github.com/nuxt/ui/commit/8d76a8b1957d6910cdf25c66a966b808cf8525c7))
* **Skeleton:** new component ([e2fb253](https://github.com/nuxt/ui/commit/e2fb25309f13068c7a49de1b507f258013c72e11))
* **Slideover:** add `top` / `bottom` sides ([3e8a992](https://github.com/nuxt/ui/commit/3e8a99244e550f9ed68a30182c9ec0753d240138))
* **Slideover:** new component ([38eb932](https://github.com/nuxt/ui/commit/38eb932b538abb08d10e564308d92538ee345463))
* **Slideover:** open programmatically ([#122](https://github.com/nuxt/ui/issues/122)) ([b886150](https://github.com/nuxt/ui/commit/b886150147afbde882003fb5dc710a5975b633cd))
* **Slider:** new component ([#57](https://github.com/nuxt/ui/issues/57)) ([78e4560](https://github.com/nuxt/ui/commit/78e45600de9ac6a3e197baa7fed4fb4a46164c33))
* **Switch:** add ` label` and ` description` props ([#60](https://github.com/nuxt/ui/issues/60)) ([2fe91f3](https://github.com/nuxt/ui/commit/2fe91f3847198e4415edfda36cb977458866bbd9))
* **Switch:** form integration ([#48](https://github.com/nuxt/ui/issues/48)) ([ebb7c07](https://github.com/nuxt/ui/commit/ebb7c074afb583e6da8e1e06f12318faa1bf552c))
* **Switch:** handle `loading` and `loadingIcon` ([8fd3693](https://github.com/nuxt/ui/commit/8fd369372ba54d7ac2efa3d0186498d8e1608c41)), closes [#65](https://github.com/nuxt/ui/issues/65)
* **Switch:** new component ([cd1073d](https://github.com/nuxt/ui/commit/cd1073d93876c6f15f71bcd8d5c4c4bc76492330))
* **Tabs:** handle `avatar` ([bf0a04e](https://github.com/nuxt/ui/commit/bf0a04eb8bda666df2c88f7d0ea121c135f7d065))
* **Tabs:** handle `color` and `variant` props ([82ffc1e](https://github.com/nuxt/ui/commit/82ffc1ed574d741be03c43dfa300fefca0d042e0)), closes [#116](https://github.com/nuxt/ui/issues/116)
* **Tabs:** handle `content` prop as `boolean` ([e051ef6](https://github.com/nuxt/ui/commit/e051ef682aa7d4ec91b7145c1d96bb1d9913ad2d))
* **Tabs:** handle `size` prop ([#124](https://github.com/nuxt/ui/issues/124)) ([2b69652](https://github.com/nuxt/ui/commit/2b6965211dd9193026b85576d292f9f5138f99e6))
* **Tabs:** handle items `icon` ([06ea029](https://github.com/nuxt/ui/commit/06ea029ef624116792230fdb57cdcee13b610fc0))
* **Tabs:** new component ([13d389f](https://github.com/nuxt/ui/commit/13d389fd3979f089e37006741f51400168e58631))
* **Textarea:** new component ([#62](https://github.com/nuxt/ui/issues/62)) ([2ca6973](https://github.com/nuxt/ui/commit/2ca697333790efe3304f1f03b12be53912bdaf2d))
* **Toast:** actions `color` defaults from prop ([9a42338](https://github.com/nuxt/ui/commit/9a42338da377cc538fddad3c37143a6d74527a9b))
* **Toast:** add `actions` slot ([51872be](https://github.com/nuxt/ui/commit/51872bef6c7187450b63a4b88e4f6e714efd146a))
* **Toast:** implement progress duration ([d726e4d](https://github.com/nuxt/ui/commit/d726e4ddacc68c8bd63084bfbd32893e292d3846)), closes [#51](https://github.com/nuxt/ui/issues/51)
* **Toast:** new component ([#50](https://github.com/nuxt/ui/issues/50)) ([3da1e1a](https://github.com/nuxt/ui/commit/3da1e1a5183852011beadb91af4edbeb3f233e39))
* uniformize components sizes ([#68](https://github.com/nuxt/ui/issues/68)) ([f302a15](https://github.com/nuxt/ui/commit/f302a159727e44dce8f12909c3fbe316efe8b1e4))
* **useComponentIcons:** extract repetitive logic ([e4882e6](https://github.com/nuxt/ui/commit/e4882e6804394ab448dbdbb3673adadb80faafe2))
* **useKbd:** new composable ([#73](https://github.com/nuxt/ui/issues/73)) ([f076019](https://github.com/nuxt/ui/commit/f076019f8f84f2c71c66bfa806d7861ccf8fb959))
* **useToast:** add `clear` method ([89ff6b6](https://github.com/nuxt/ui/commit/89ff6b6702179fde2fff3294a1909463883378ae))
### Bug Fixes
* **Accordion:** dont set a `default-value` ([c36940a](https://github.com/nuxt/ui/commit/c36940a2210219aa36076b480740c044a536634f))
* **Accordion:** handle `disabled` through variants ([6236953](https://github.com/nuxt/ui/commit/6236953ed068721348f912b9033b1fa1beb378ab))
* **Alert:** add missing `close` slot ([26491af](https://github.com/nuxt/ui/commit/26491afcd10509f0f7d4cf8ea6e108f08f525f64))
* **Avatar:** bind `$attrs` on image ([da42c04](https://github.com/nuxt/ui/commit/da42c0489a501724e5bbcfedc76103df3d84f35d))
* **AvatarGroup:** default size to `md` ([9620d90](https://github.com/nuxt/ui/commit/9620d903c5471b76da3d7465d702d0e347c83892))
* **AvatarGroup:** handle deep children ([e9832b9](https://github.com/nuxt/ui/commit/e9832b95f56f97665be82ffe16e7cad72dc62f90))
* **Avatar:** improve sizes ([c726f13](https://github.com/nuxt/ui/commit/c726f13ac2a57a3de36d2c596d5a6ac086fa1a95))
* **Avatar:** increase gray on light mode ([fe467da](https://github.com/nuxt/ui/commit/fe467da9bfec5890bde8130832d4f89f954c84e8))
* **Badge:** handle `label` as `number` ([6cd7c8a](https://github.com/nuxt/ui/commit/6cd7c8a5fbe17c40610163258800f2034a2ba6ad))
* **Breadcrumb:** only apply `aria-current="page"` when link is active ([e5695e7](https://github.com/nuxt/ui/commit/e5695e78bc04827a1f774c4a39d9428eb31941e7))
* **Button:** extend now works with compound variants ([53755da](https://github.com/nuxt/ui/commit/53755da8359d8d5ffa4426b4f696489ebbe51f47))
* **ButtonGroup:** define its own `size` variant ([0dfd8b3](https://github.com/nuxt/ui/commit/0dfd8b3248d2f0fe6422ff4f03f027427282639b))
* **Button:** invalid icon size for `lg` ([f0f8927](https://github.com/nuxt/ui/commit/f0f89272a0992bdd1bba32e3458c864f665d5f58))
* **Button:** loading on trailing ([c8bdb51](https://github.com/nuxt/ui/commit/c8bdb51f68a308169f7ce10ede70612f968fa676))
* **Button:** move span with `truncate` inside default slot ([561c1fb](https://github.com/nuxt/ui/commit/561c1fb6652fe413497f8a04f563c1ed98f754ba))
* **Card:** improve body padding ([cecfb58](https://github.com/nuxt/ui/commit/cecfb58445affccf0d52f975d0329acbcbd3d9c2))
* **Card:** missing slots definition ([02da03b](https://github.com/nuxt/ui/commit/02da03b4a8fc9fd2c8d95a86812e746f789ebe1a))
* **Checkbox:** icon render ([fc50996](https://github.com/nuxt/ui/commit/fc50996ccfeaa2602f53c2f2683300462cf12992))
* **Checkbox:** reduce icon size ([3c89d6b](https://github.com/nuxt/ui/commit/3c89d6b2c5ad5cb0081c4607660760f7460a585e))
* **Chip:** extend now works with compound variants ([6dfd696](https://github.com/nuxt/ui/commit/6dfd696092e6a9633be62ec7d1a7fb2a24dc8657))
* **Chip:** improve sizes ([d5fe5b3](https://github.com/nuxt/ui/commit/d5fe5b3f4da1a834c14a6aae768163967c817a34))
* **Chip:** size injection ([#105](https://github.com/nuxt/ui/issues/105)) ([8baee12](https://github.com/nuxt/ui/commit/8baee1292f62ee7c4380ddb57b69bb9a23dbc2e0))
* **Collapsible:** ensure default slot exists ([c85a8cf](https://github.com/nuxt/ui/commit/c85a8cfe0b8f2e2b4a2ac15d3239c842b91b5bc0))
* **CommandPalette/InputMenu/Select/SelectMenu:** adapt chip size ([bdc3217](https://github.com/nuxt/ui/commit/bdc32175719b538828b4f63ad952dbd6f81b99b9))
* **CommandPalette:** ts errors ([d558b3e](https://github.com/nuxt/ui/commit/d558b3e29c6649bae2762c7412544d5d82b382bf))
* **components:** `ui` prop override with class ([#136](https://github.com/nuxt/ui/issues/136)) ([235556d](https://github.com/nuxt/ui/commit/235556d3e00b7a008fe16beba3f370b4af8bbb56))
* **components:** allow override of `root` through `ui.root` ([47ad74d](https://github.com/nuxt/ui/commit/47ad74d029f03c9013a76b8ee0a4b6cc37072cc5))
* **components:** declare `ui` prop with `PartialString` when arrays in theme slots ([5cc4457](https://github.com/nuxt/ui/commit/5cc4457a743fadbc775b11c41f7bb1fb89b5a728))
* **Container:** missing slots definition ([ab83053](https://github.com/nuxt/ui/commit/ab83053fef1571b0d0bf8519fb3c874b15cfef51))
* **ContextMenu/DropdownMenu:** move `open` and `default-open` props to `Sub` ([9af6d7d](https://github.com/nuxt/ui/commit/9af6d7dc5924f8c73036397e772fcbddf106e1af))
* **ContextMenu:** remove `arrow` prop ([4ac7a7e](https://github.com/nuxt/ui/commit/4ac7a7e3e97c28b0faf0cd1240f9aa6c385399ca))
* define empty props in slots for `nuxt-component-meta` parsing ([369e0b1](https://github.com/nuxt/ui/commit/369e0b195206277dbd8b39514f1bcb4a833512f3))
* **Divider:** add `w-full` only on horizontal wrapper ([#1565](https://github.com/nuxt/ui/issues/1565)) ([bd8b737](https://github.com/nuxt/ui/commit/bd8b737642280e6a83b67f9a27dd7a823a77e963))
* **DropdownMenu:** add overflow scroll if height is added ([80a8c2d](https://github.com/nuxt/ui/commit/80a8c2d772adf188eefa24dfdb1783bbb3fb98b7))
* **DropdownMenu:** handle disabled with data attribute for links ([cd214f9](https://github.com/nuxt/ui/commit/cd214f91dbe25828a99b26b8e908456743ae2cfc))
* **Dropdown:** missing `mouseenter` event on container ([7288953](https://github.com/nuxt/ui/commit/72889535e7e9763e7ebf59498f22c39bf09d6477))
* dynamic slots autocomplete ([#77](https://github.com/nuxt/ui/issues/77)) ([c6a93f7](https://github.com/nuxt/ui/commit/c6a93f71f2b0b9c2d3f89b1de2ae5ee254579ad0))
* **FormField:** added a utility type to fix some type errors ([#81](https://github.com/nuxt/ui/issues/81)) ([559a8cb](https://github.com/nuxt/ui/commit/559a8cba5814194b679de5beb3a66d5bda87e25b))
* **FormField:** allow `error` prop as boolean ([a23c314](https://github.com/nuxt/ui/commit/a23c3140dfef9bead862a4296a8cbfb05868a00e))
* **FormField:** generics ([a78b096](https://github.com/nuxt/ui/commit/a78b0965e8c936b315ac0e51d4955e28941f8a34))
* **Form:** inconsistent validation events for `InputMenu` and `Select` ([#123](https://github.com/nuxt/ui/issues/123)) ([a2114c5](https://github.com/nuxt/ui/commit/a2114c587435af901d5bbea047a297169bc7abfb))
* **fuse:** prevent indices highlight of a single char ([7b278b0](https://github.com/nuxt/ui/commit/7b278b041c4f09b512fc498a2eb54aef3cab845c))
* **Input/SelectMenu:** handle `file` type and `change` events ([#1570](https://github.com/nuxt/ui/issues/1570)) ([878f707](https://github.com/nuxt/ui/commit/878f7078a28c5e70a662682d1293db466d518c7d))
* **Input/Textarea:** remove useless gap ([67a1568](https://github.com/nuxt/ui/commit/67a15686e5adafbe5345253d06394f896e93e6f8))
* **Input:** invalid `xs` size ([4a281b3](https://github.com/nuxt/ui/commit/4a281b30939b0ccecbcfb213bb1102b21d959791))
* **InputMenu/Select/SelectMenu:** use `defuFn` to override base slot ([2aa4358](https://github.com/nuxt/ui/commit/2aa4358d328e7c8e1a1dca718acad391a09280fc))
* **InputMenu:** bind `searchTerm` with `defineModel` ([ff9fd9f](https://github.com/nuxt/ui/commit/ff9fd9f657c8e37a658136301ff4a1872842b956))
* **Input:** missing `file:` selector on dark mode ([f9259f6](https://github.com/nuxt/ui/commit/f9259f685777e5d6a5e5b5326e56579b24cf40d4))
* **Input:** use `pl` / `pr` instead of `ps` / `pe` ([a31d4cf](https://github.com/nuxt/ui/commit/a31d4cffb540db30a8689a170d941620bf4993c3)), closes [#32](https://github.com/nuxt/ui/issues/32)
* **Input:** use `ring` instead of `ring-1` ([0920099](https://github.com/nuxt/ui/commit/0920099362c9a2a8493a9715a9d84f4192d80a36))
* **Input:** wrong type for `type` prop ([3651c7e](https://github.com/nuxt/ui/commit/3651c7ec4135a05061b5aa613fa62867c2e0602f))
* **Kbd:** optional `value` prop when using default slot ([40d17f7](https://github.com/nuxt/ui/commit/40d17f7b03f2ce1306a8f3a9368744fbc1906ae1))
* **Link:** active class ([c384ec9](https://github.com/nuxt/ui/commit/c384ec94a2b5d4a7f92c98ce56c484e440a6afaf))
* **Link:** add missing `slots` definition ([76e3d0b](https://github.com/nuxt/ui/commit/76e3d0b9f3f582f84983f2813430e4d8eae40c84))
* **Link:** allow `ariaLabel` to be picked ([c1ac3a9](https://github.com/nuxt/ui/commit/c1ac3a9f9d5357bc3a7b125d8793d69d8d518bd3))
* **Link:** expose `active` instead of `isActive` in default slot ([46c066d](https://github.com/nuxt/ui/commit/46c066d79146bfad5ecc74769407b0f13595ec03))
* **Link:** improve `type` prop ([802a159](https://github.com/nuxt/ui/commit/802a15990d6c4c192c43730ceb46022fd19c7d61))
* **module:** add `isolate` class on root node ([0c6720b](https://github.com/nuxt/ui/commit/0c6720be7304af94dc3cb54fd772e40845875393))
* **module:** handle theme HMR on dev ([#84](https://github.com/nuxt/ui/issues/84)) ([12ba480](https://github.com/nuxt/ui/commit/12ba480d347f081bc0fac54e49b37b8f1513762f))
* **module:** inject options in `nuxt.options.ui` ([cf38e7e](https://github.com/nuxt/ui/commit/cf38e7ed78037001a159c794b097d2995a6d3f86))
* **module:** prevent `colors` option merge ([c4419fa](https://github.com/nuxt/ui/commit/c4419fa113c04c73e02c613a25fdbdde11cfbc32))
* **module:** prevent override of `rootAttrs.class` ([3097da4](https://github.com/nuxt/ui/commit/3097da486fe0891641d81fefcd38d9b31284a8b0))
* **module:** typo in `fuchsia` color ([7fd38a8](https://github.com/nuxt/ui/commit/7fd38a8cb829c1f19a7da2f80f2a1cc4f1ca257e))
* **module:** use `@tailwindcss/postcss` ([cdf6ebd](https://github.com/nuxt/ui/commit/cdf6ebdafbf3174d27b8a3a29c22df2f5160ac51))
* **module:** use relative imports to components / composables ([42f4f8d](https://github.com/nuxt/ui/commit/42f4f8d3370ab0dd94e09d8960e87076afbb1035))
* **NavigationMenu:** `highlightColor` defaults to `color` prop ([0bdd6df](https://github.com/nuxt/ui/commit/0bdd6dfe8609d1c951023b6785c4ff87a813b2f6))
* **NavigationMenu:** `label` doesn't need to be typed as `number` ([ee1d6ed](https://github.com/nuxt/ui/commit/ee1d6ed08fdcf00ad11ea2ef15869b861ae8a688))
* **NavigationMenu:** add default `highlightColor` ([c838b3a](https://github.com/nuxt/ui/commit/c838b3a040d090aeeab297fca451ea8d80942728))
* **NavigationMenu:** handle `disabled` through variants + `isolate` list + use separator instead of divide ([f664f69](https://github.com/nuxt/ui/commit/f664f690970058088ebfa975297ca2721c03316f))
* **NavigationMenu:** handle `truncate` on vertical orientation ([298ac68](https://github.com/nuxt/ui/commit/298ac68447046a0a37d1857db24fe815cc02fbab))
* **NavigationMenu:** optional `links` ([4301821](https://github.com/nuxt/ui/commit/4301821473b0cca086e634146cc6d9f440ca151b))
* **NavigationMenu:** prevent err without links ([03edad8](https://github.com/nuxt/ui/commit/03edad885d082a38688e0d34efe12c3f86fc0291))
* **NavigationMenu:** use `ULink` with `custom` ([c8bedf8](https://github.com/nuxt/ui/commit/c8bedf84585ad119599a89faa23185a1b94120da))
* **Pagination:** center text when link ([440593c](https://github.com/nuxt/ui/commit/440593c5e43eac3ede2acf257e1862a648b02d40))
* **plugins:** add missing `type` ([63f752a](https://github.com/nuxt/ui/commit/63f752a4a8e4a5966bbe938e65dfdf706c706a07))
* **plugins:** use `import.meta` ([c9f0999](https://github.com/nuxt/ui/commit/c9f09992b7ac9ef2c34d5957fb31fd2aa5db3791))
* **Popover:** ensure default slot exists ([5d3ad6b](https://github.com/nuxt/ui/commit/5d3ad6b93ef5fa583a5dcbee102a7391426308f3))
* **Popover:** missing `mouseenter` event on container ([8517897](https://github.com/nuxt/ui/commit/8517897c34adaa9e3624f867b43106deb59fcbe8)), closes [#1564](https://github.com/nuxt/ui/issues/1564)
* **Popover:** split reactive props with `mode` ([7d2d3b9](https://github.com/nuxt/ui/commit/7d2d3b9c0ffc4e58021639e8b7ea0d23addb4493))
* **Popover:** use `scale-in` / `scale-out` animations ([f90f7d7](https://github.com/nuxt/ui/commit/f90f7d7b7c0d81cf42b2232e9c12597210cd5791))
* **Progress:** initial indicator style when percent is 0 ([d2442a1](https://github.com/nuxt/ui/commit/d2442a1e4793d3869bfc938197b00f21b4033d19))
* **RadioGroup:** missing `as` prop binding ([d3c7991](https://github.com/nuxt/ui/commit/d3c79912d8b9c02fee267958cd34e4fbeb0d3de7))
* **RadioGroup:** style `legend` based on size ([b1bcaab](https://github.com/nuxt/ui/commit/b1bcaabd19eb3087d222dc53a37a520735b2f4ed))
* remove `IconProps` usage ([6d377d1](https://github.com/nuxt/ui/commit/6d377d1f4bb0b29f9bec346a31dbfb29fbdc57fe))
* **SelectMenu:** adapt input size ([5c12d42](https://github.com/nuxt/ui/commit/5c12d428c4e39a5c28b5d0107c0091f8299bca50))
* **SelectMenu:** display `modelValue` even if false ([813fdfd](https://github.com/nuxt/ui/commit/813fdfd646dd4f2cb574653dc6a4e993f5025e10))
* **SelectMenu:** input before empty ([bedb863](https://github.com/nuxt/ui/commit/bedb863fc68fd8b687a5094aa16da6aed21b5959))
* **Select:** missing comma in `&nbsp;` ([c00ec5e](https://github.com/nuxt/ui/commit/c00ec5e2f255d83296cfd71f991cca04b00bfa26))
* **Select:** wrong button group variants ([5b2e7d8](https://github.com/nuxt/ui/commit/5b2e7d8bad6531795c00cdaa37e21d769dee452e))
* **Skeleton:** increase gray on light mode ([3cdbb27](https://github.com/nuxt/ui/commit/3cdbb276357a2a167079507975b285f9c714462f))
* specify pnpm version ([#85](https://github.com/nuxt/ui/issues/85)) ([e5f0063](https://github.com/nuxt/ui/commit/e5f0063dbac29f7d27d8ad5a3d42a4c7ee71dcab))
* **Switch:** improve sizes ([3a89661](https://github.com/nuxt/ui/commit/3a89661c663998b1de440f3f9925564434b43f2e))
* **Tabs:** `force-mount` content ([d294931](https://github.com/nuxt/ui/commit/d2949310eeeea323b1d066f2ccf34b7597b12e32))
* **Tabs:** `horizontal` orientation ([1e65933](https://github.com/nuxt/ui/commit/1e65933d9ca12b91b24e58ddd1273848fe11057c))
* **Tabs:** add missing slots definition ([b78ca9c](https://github.com/nuxt/ui/commit/b78ca9c56a60941d6a2a1d1c6e2234fbc5980e7d))
* **Tabs:** align `link` variant left when vertical ([9d5f9a7](https://github.com/nuxt/ui/commit/9d5f9a70101bcc75f05dc59a3d4dc2d368106b5f))
* **Tabs:** broken design ([80a3a0c](https://github.com/nuxt/ui/commit/80a3a0c28f81656b8c144146b72ceca45d2e99b7))
* **Tabs:** improve config ([88eb4ca](https://github.com/nuxt/ui/commit/88eb4cac974194b13a34281f76d4771f125685a2))
* **Tabs:** missing props pick ([f086f26](https://github.com/nuxt/ui/commit/f086f2662e659e5522adcfbad453d4f44b9be9d1))
* **Tabs:** optional `items` ([20caea1](https://github.com/nuxt/ui/commit/20caea1cd7b896e443c846766865174234a25d20))
* **Tabs:** specific transition ([48ddf39](https://github.com/nuxt/ui/commit/48ddf39188467b3c4d346c22c0a60e4acd4b025d))
* **Tabs:** use `shrink-0` ([f8b50a3](https://github.com/nuxt/ui/commit/f8b50a357152a600ccab784796d8cf11e1eb039d))
* **Tabs:** use `transition-all` ([92e1d09](https://github.com/nuxt/ui/commit/92e1d09990d88ed43eec74d313f76a1c2b7eb565))
* **Tabs:** wrong text color with `pill` colored ([f70b639](https://github.com/nuxt/ui/commit/f70b63970a9791533f7ae29dfc56a12001119e2d))
* **templates:** add `error` in `AppConfig` type ([c7536a7](https://github.com/nuxt/ui/commit/c7536a7af963319ed6307701b38ff2b006b2a3ac))
* **templates:** dont override `AppConfig` type ([e151be4](https://github.com/nuxt/ui/commit/e151be4734d8c9a53cf33f6040994912cce24a67))
* **templates:** export types in dev mode ([1eaec0f](https://github.com/nuxt/ui/commit/1eaec0ff568bcdff78a0aae0fa824f8b7d1c63e6))
* **templates:** handle `-` in regexp ([0a00387](https://github.com/nuxt/ui/commit/0a00387688923fc0cfacbd70c335c664d8d04cc0))
* **templates:** import from `[#build](https://github.com/nuxt/ui/issues/build)/ui.css` no longer works ([eb85fa8](https://github.com/nuxt/ui/commit/eb85fa8353ac791b4c889ec103c7247e60bfd81a))
* **templates:** missing command in keyframes ([6a1b97a](https://github.com/nuxt/ui/commit/6a1b97add00e481bcc6b06d46e17f4d4f6a97468))
* **templates:** pass options to theme in dev mode ([5694823](https://github.com/nuxt/ui/commit/5694823a416fbb70d10702a023420837d31046d6))
* **templates:** unshift css ([e1ab903](https://github.com/nuxt/ui/commit/e1ab9031097d96f0459621c677e1522c49f9297d))
* **Textarea:** invalid `xs` size ([bed6252](https://github.com/nuxt/ui/commit/bed62520a988cc2e9337d3eb72f2e512df40cf14))
* **Textarea:** same `size` as input ([e398637](https://github.com/nuxt/ui/commit/e398637174008cc1bcb8519169bc3c539157cbae))
* **Toast:** add missing slots ([cfb4cfd](https://github.com/nuxt/ui/commit/cfb4cfdd7b81302fb3c3f9cd4b4e3a7c80e28779))
* **Toaster:** add missing transition on `translate` ([239e0a5](https://github.com/nuxt/ui/commit/239e0a5ac1315a37b52a16bb7a024cefa28dac23))
* **Toaster:** increase container height to prevent animation blink ([4dcb74e](https://github.com/nuxt/ui/commit/4dcb74e0a9feea074c6cb56aa73a28107deddc38))
* **Toaster:** proxy slot from `App` ([4b29828](https://github.com/nuxt/ui/commit/4b29828e9ddb2602ad7195a4c21ea7963377248e))
* **Toaster:** wrong leave animation when collapsed ([c3ed18b](https://github.com/nuxt/ui/commit/c3ed18beb64369fe8a5e0ffee0b749f40c9fc736))
* **Toast:** prevent progress bar to blink on leave ([83049fd](https://github.com/nuxt/ui/commit/83049fd23ed4eb829a64061a08be846aefab4b98))
* **Tooltip:** ensure default slot exists ([431255e](https://github.com/nuxt/ui/commit/431255e0fec90555f1b5e8e0fc1f039ed853eb75))
* **Tooltip:** missing conditions on slots ([d00084c](https://github.com/nuxt/ui/commit/d00084c54cebe239f738af0bfdc159124bb85903))
* **Tooltip:** missing root props proxy ([be8bf69](https://github.com/nuxt/ui/commit/be8bf691c3883845582b788b15c99be7fabb3c29))
* **Tooltip:** put back close animation ([34cf395](https://github.com/nuxt/ui/commit/34cf395f1a688404030c2a5f37417fae9b2f38d9))
* **Tooltip:** remove content max-width ([6c5354e](https://github.com/nuxt/ui/commit/6c5354edde42f51cc1c642c2ae5b17ea0886dae2))
* **Tooltip:** use `scale-in` / `scale-out` animations ([0450f6b](https://github.com/nuxt/ui/commit/0450f6b4a91d0af38ff6094fb590915b7164d9e0))
* **types:** useless import ([5f7872f](https://github.com/nuxt/ui/commit/5f7872f06e81e03443e2d1c27a654cfe32c55fb3))
* **useComponentIcons:** reactivity when using `defu` ([45454fa](https://github.com/nuxt/ui/commit/45454fae45b8571a9691284bd6a13a838e8ea1c9))
* **Carousel:** arrows & indicators are broken in RTL ([#2251](https://github.com/nuxt/ui/issues/2251)) ([db5e5c4](https://github.com/nuxt/ui/commit/db5e5c49078a4faac3fb0c41b23b0dbd64efdd77))
* **Carousel:** pages calculation ([#2345](https://github.com/nuxt/ui/issues/2345)) ([5cf24fa](https://github.com/nuxt/ui/commit/5cf24fa6e7ba1508458dd5bc1319ac431d908cb0))
* **Dropdown/Popover:** conflict in toggle for touch devices ([#2272](https://github.com/nuxt/ui/issues/2272)) ([4ae9654](https://github.com/nuxt/ui/commit/4ae96540629faff1c3b5046cf7ce6a9315bb9bf4))
* **Link:** allow `title` field ([0aa3909](https://github.com/nuxt/ui/commit/0aa3909e715e34ac80565c0111d4378c828fb566)), closes [#1439](https://github.com/nuxt/ui/issues/1439)
* **Tooltip:** hide when `text` prop & slot are empty ([#2232](https://github.com/nuxt/ui/issues/2232)) ([5ed5c57](https://github.com/nuxt/ui/commit/5ed5c57d0d09ae39d623c963270bb0a894a97d29))
## [2.18.6](https://github.com/nuxt/ui/compare/v2.18.5...v2.18.6) (2024-09-23)

152
README.md
View File

@@ -1,8 +1,4 @@
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/91ceab67-89ce-4ef4-8678-4402a92baca5">
<source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
<img alt="Nuxt UI" src="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
</picture>
[![nuxt-ui.png](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
# Nuxt UI
@@ -11,133 +7,77 @@
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
Nuxt UI is a module that provides a set of Vue components and composables built with [Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.dev/) to help you build beautiful and accessible user interfaces.
> [!NOTE]
> You are on the `v3` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.
Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
## Features
- Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/)
- HMR support through Nuxt App Config
- Dark mode support
- Support for LTR and RTL languages
- Keyboard shortcuts
- Bundled icons
- Fully typed
- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
Read more on [ui.nuxt.com](https://ui.nuxt.com)
## Installation
```bash
npx nuxi@latest module add ui
```
If you want latest updates, please use `@nuxt/ui-edge` in your `package.json`:
```json
{
"devDependencies": {
"@nuxt/ui": "npm:@nuxt/ui-edge@latest"
}
}
```
## Documentation
Visit https://ui.nuxt.com to explore the documentation.
## Installation
## Credits
```bash [pnpm]
pnpm add @nuxt/ui
```
- [nuxt/nuxt](https://github.com/nuxt/nuxt)
- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
- [vueuse/vueuse](https://github.com/vueuse/vueuse)
- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)
```bash [yarn]
yarn add @nuxt/ui
```
```bash [npm]
npm install @nuxt/ui
```
```bash [bun]
bun add @nuxt/ui
```
### Nuxt
1. Add the Nuxt UI module in your `nuxt.config.ts`:
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```
2. Import Tailwind CSS and Nuxt UI in your CSS:
```css [assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
```
Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/nuxt).
### Vue
1. Add the Nuxt UI Vite plugin in your `vite.config.ts`:
```ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui()
]
})
```
2. Use the Nuxt UI Vue plugin in your `main.ts`:
```ts [main.ts]
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
const router = createRouter({
routes: [],
history: createWebHistory()
})
app.use(router)
app.use(ui)
app.mount('#app')
```
3. Import Tailwind CSS and Nuxt UI in your CSS:
```css [assets/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
```
Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/vue).
## Contribution
## Contributing
Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
- Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contribution) to share your suggestions.
- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contributing) to share your suggestions.
## Local Development
Follow the docs to [set up your local development environment](https://ui.nuxt.com/getting-started/contribution#local-development) and contribute.
## Credits
- [nuxt/nuxt](https://github.com/nuxt/nuxt)
- [nuxt/icon](https://github.com/nuxt/icon)
- [nuxt/fonts](https://github.com/nuxt/fonts)
- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
- [unovue/reka-ui](https://github.com/unovue/reka-ui)
- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- [vueuse/vueuse](https://github.com/vueuse/vueuse)
Follow the docs to [Set up your local development environment](https://ui.nuxt.com/getting-started/contributing#_2-local-development-setup) and contribute.
## License
Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v3/LICENSE.md).
Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md).
<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@nuxt/ui
[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npm.chart.dev/@nuxt/ui
[npm-downloads-href]: https://npmjs.com/package/@nuxt/ui
[license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://github.com/nuxt/ui/blob/v3/LICENSE.md
[license-href]: https://github.com/nuxt/ui/blob/main/LICENSE.md
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com

View File

@@ -1,24 +0,0 @@
import { defineBuildConfig } from 'unbuild'
export default defineBuildConfig({
entries: [
// Vue support
'./src/unplugin',
'./src/vite'
],
rollup: {
replace: {
delimiters: ['', ''],
values: {
// Used in development to import directly from theme
'const isUiDev = true': 'const isUiDev = false'
}
}
},
hooks: {
'mkdist:entry:options'(ctx, entry, options) {
options.addRelativeDeclarationExtensions = false
}
},
externals: ['#build/ui', 'vite']
})

View File

@@ -1,95 +0,0 @@
import { existsSync, promises as fsp } from 'node:fs'
import { resolve } from 'pathe'
import { defineCommand } from 'citty'
import { consola } from 'consola'
import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
import { appendFile, sortFile } from '../../utils.mjs'
import templates from '../../templates.mjs'
export default defineCommand({
meta: {
name: 'component',
description: 'Make a new component.'
},
args: {
name: {
type: 'positional',
required: true,
description: 'Name of the component.'
},
primitive: {
type: 'boolean',
description: 'Create a primitive component.'
},
pro: {
type: 'boolean',
description: 'Create a pro component.'
},
prose: {
type: 'boolean',
description: 'Create a prose component (with --pro).'
},
content: {
type: 'boolean',
description: 'Create a content component (with --pro).'
},
template: {
type: 'string',
description: 'Only generate template.'
}
},
async setup({ args }) {
const name = args.name
if (!name) {
consola.error('`name` argument is missing!')
process.exit(1)
}
if (args.prose && !args.pro) {
consola.error('`--prose` flag can only be used with `--pro` flag!')
process.exit(1)
}
if (args.content && !args.pro) {
consola.error('`--content` flag can only be used with `--pro` flag!')
process.exit(1)
}
const path = resolve('.')
for (const template of Object.keys(templates)) {
if (args.template && template !== args.template) {
continue
}
const { filename, contents } = templates[template](args)
if (!contents) {
continue
}
const filePath = resolve(path, filename)
if (existsSync(filePath)) {
consola.error(`🚨 ${filePath} already exists!`)
continue
}
await fsp.writeFile(filePath, contents.trim() + '\n')
consola.success(`🪄 Generated ${filePath}!`)
}
if (args.template) {
return
}
const themePath = resolve(path, `src/theme/${args.prose ? 'prose/' : ''}${args.content ? 'content/' : ''}index.ts`)
await appendFile(themePath, `export { default as ${camelCase(name)} } from './${kebabCase(name)}'`)
await sortFile(themePath)
if (!args.prose) {
const typesPath = resolve(path, 'src/runtime/types/index.ts')
await appendFile(typesPath, `export * from '../components/${args.content ? 'content/' : ''}${splitByCase(name).map(p => upperFirst(p)).join('')}.vue'`)
await sortFile(typesPath)
}
}
})

View File

@@ -1,14 +0,0 @@
import { defineCommand } from 'citty'
import component from './component.mjs'
import locale from './locale.mjs'
export default defineCommand({
meta: {
name: 'make',
description: 'Commands to create new Nuxt UI entities.'
},
subCommands: {
component,
locale
}
})

View File

@@ -1,64 +0,0 @@
import { existsSync, promises as fsp } from 'node:fs'
import { resolve } from 'pathe'
import { consola } from 'consola'
import { appendFile, sortFile, normalizeLocale } from '../../utils.mjs'
import { defineCommand } from 'citty'
export default defineCommand({
meta: {
name: 'locale',
description: 'Make a new locale.'
},
args: {
code: {
description: 'Locale code to create. For example: en.',
required: true
},
name: {
description: 'Locale name to create. For example: English.',
required: true
},
dir: {
description: 'Locale direction. For example: rtl.',
default: 'ltr'
}
},
async setup({ args }) {
const path = resolve('.')
const localePath = resolve(path, `src/runtime/locale`)
const originLocaleFilePath = resolve(localePath, 'en.ts')
const newLocaleFilePath = resolve(localePath, `${args.code}.ts`)
// Validate locale code
if (existsSync(newLocaleFilePath)) {
consola.error(`🚨 ${args.code} already exists!`)
process.exit(1)
}
if (!['ltr', 'rtl'].includes(args.dir)) {
consola.error(`🚨 Direction ${args.dir} not supported!`)
process.exit(1)
}
if (!args.code.match(/^[a-z]{2}(?:_[a-z]{2,4})?$/)) {
consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en or en_us`)
process.exit(1)
}
// Create new locale export
const localeExportFile = resolve(localePath, `index.ts`)
await appendFile(localeExportFile, `export { default as ${args.code} } from './${args.code}'`)
await sortFile(localeExportFile)
// Create new locale file
await fsp.copyFile(originLocaleFilePath, newLocaleFilePath)
const localeFile = await fsp.readFile(newLocaleFilePath, 'utf-8')
const rewrittenLocaleFile = localeFile
.replace(/name: '(.*)',/, `name: '${args.name}',`)
.replace(/code: '(.*)',/, `code: '${normalizeLocale(args.code)}',${(args.dir && args.dir !== 'ltr') ? `\n dir: '${args.dir}',` : ''}`)
await fsp.writeFile(newLocaleFilePath, rewrittenLocaleFile)
consola.success(`🪄 Generated ${newLocaleFilePath}`)
}
})

View File

@@ -1,15 +0,0 @@
#!/usr/bin/env node
import { defineCommand, runMain } from 'citty'
import make from './commands/make/index.mjs'
const main = defineCommand({
meta: {
name: 'nuxt-ui',
description: 'Nuxt UI CLI'
},
subCommands: {
make
}
})
runMain(main)

View File

@@ -1,13 +0,0 @@
{
"name": "@nuxt/ui-cli",
"type": "module",
"exports": {
".": "./index.mjs"
},
"dependencies": {
"citty": "^0.1.6",
"consola": "^3.4.2",
"pathe": "^2.0.3",
"scule": "^1.3.0"
}
}

View File

@@ -1,222 +0,0 @@
import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
const playground = ({ name, pro }) => {
const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
const kebabName = kebabCase(name)
return {
filename: `playground/app/pages/components/${kebabName}.vue`,
contents: pro
? undefined
: `
<template>
<div>
<U${upperName} />
</div>
</template>
`
}
}
const component = ({ name, primitive, pro, prose, content }) => {
const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
const camelName = camelCase(name)
const kebabName = kebabCase(name)
const key = pro ? 'uiPro' : 'ui'
const path = pro ? 'ui-pro' : 'ui'
return {
filename: `src/runtime/components/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${upperName}.vue`,
contents: primitive
? `
<script lang="ts">
import type { AppConfig } from '@nuxt/schema'
import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
import type { ComponentConfig } from '../types/utils'
type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
export interface ${upperName}Props {
/**
* The element or component this component should render as.
* @defaultValue 'div'
*/
as?: any
class?: any
ui?: ${upperName}['slots']
}
export interface ${upperName}Slots {
default(props?: {}): any
}
</script>
<script setup lang="ts">
import { computed } from 'vue'
import { Primitive } from 'reka-ui'
import { useAppConfig } from '#imports'
import { tv } from '../utils/tv'
const props = defineProps<${upperName}Props>()
defineSlots<${upperName}Slots>()
const appConfig = useAppConfig() as ${upperName}['AppConfig']
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<slot />
</Primitive>
</template>
`
: `
<script lang="ts">
import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
import type { ComponentConfig } from '../types/utils'
type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
export interface ${upperName}Props extends Pick<${upperName}RootProps> {
class?: any
ui?: ${upperName}['slots']
}
export interface ${upperName}Emits extends ${upperName}RootEmits {}
export interface ${upperName}Slots {}
</script>
<script setup lang="ts">
import { computed } from 'vue'
import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
import { reactivePick } from '@vueuse/core'
import { useAppConfig } from '#imports'
import { tv } from '../utils/tv'
const props = defineProps<${upperName}Props>()
const emits = defineEmits<${upperName}Emits>()
const slots = defineSlots<${upperName}Slots>()
const appConfig = useAppConfig() as ${upperName}['AppConfig']
const rootProps = useForwardPropsEmits(reactivePick(props), emits)
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
</script>
<template>
<${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
</template>
`
}
}
const theme = ({ name, prose, content }) => {
const kebabName = kebabCase(name)
return {
filename: `src/theme/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}.ts`,
contents: prose
? `
export default {
base: ''
}
`
: `
export default {
slots: {
root: ''
}
}
`
}
}
const test = ({ name, prose, content }) => {
const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
return {
filename: `test/components/${content ? 'content/' : ''}${upperName}.spec.ts`,
contents: prose
? undefined
: `
import { describe, it, expect } from 'vitest'
import ${upperName}, { type ${upperName}Props, type ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
import ComponentRender from '../${content ? '../' : ''}component-render'
describe('${upperName}', () => {
it.each([
// Props
['with as', { props: { as: 'section' } }],
['with class', { props: { class: '' } }],
['with ui', { props: { ui: {} } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: Partial<${upperName}Slots> }) => {
const html = await ComponentRender(nameOrHtml, options, ${upperName})
expect(html).toMatchSnapshot()
})
})
`
}
}
const docs = ({ name, pro, primitive }) => {
const kebabName = kebabCase(name)
const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
return {
filename: `docs/content/3.components/${kebabName}.md`,
contents: `---
title: ${upperName}
description: ''${pro
? `
module: ui-pro`
: ''}
links:${primitive
? ''
: `
- label: ${upperName}
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/${kebabName}`}
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v3/src/runtime/components/${upperName}.vue
---
## Usage
## Examples
## API
### Props
:component-props${pro ? '{pro}' : ''}
### Slots
:component-slots${pro ? '{pro}' : ''}
### Emits
:component-emits${pro ? '{pro}' : ''}
## Theme
:component-theme${pro ? '{pro}' : ''}
`
}
}
export default {
playground,
component,
theme,
test,
docs
}

View File

@@ -1,31 +0,0 @@
import { promises as fsp } from 'node:fs'
export async function sortFile(path) {
const file = await fsp.readFile(path, 'utf-8')
const lines = file.trim().split('\n').sort()
await fsp.writeFile(path, lines.join('\n') + '\n')
}
export async function appendFile(path, contents) {
const file = await fsp.readFile(path, 'utf-8')
if (!file.includes(contents)) {
await fsp.writeFile(path, file.trim() + '\n' + contents + '\n')
}
}
export function normalizeLocale(locale) {
if (!locale) {
return ''
}
if (locale.includes('_')) {
return locale.split('_')
.map((part, index) => index === 0 ? part.toLowerCase() : part.toUpperCase())
.join('-')
}
return locale.toLowerCase()
}

6
docs/app.config.ts Normal file
View File

@@ -0,0 +1,6 @@
export default defineAppConfig({
ui: {
primary: 'green',
gray: 'slate'
}
})

110
docs/app.vue Normal file
View File

@@ -0,0 +1,110 @@
<!-- eslint-disable vue/no-v-html -->
<template>
<div>
<NuxtLoadingIndicator />
<Banner v-if="!$route.path.startsWith('/examples')" />
<Header v-if="!$route.path.startsWith('/examples')" :links="links" />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<Footer v-if="!$route.path.startsWith('/examples')" />
<ClientOnly>
<LazyUContentSearch ref="searchRef" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 42 }" />
</ClientOnly>
<UNotifications>
<template #title="{ title }">
<span v-html="title" />
</template>
</UNotifications>
<UModals />
<USlideovers />
</div>
</template>
<script setup lang="ts">
import { withoutTrailingSlash } from 'ufo'
import { debounce } from 'perfect-debounce'
import type { ParsedContent } from '@nuxt/content'
const searchRef = ref()
const route = useRoute()
const colorMode = useColorMode()
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
// Computed
const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
const links = computed(() => {
return [{
label: 'Docs',
icon: 'i-heroicons-book-open',
to: '/getting-started',
active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
}, ...(navigation.value.find(item => item._path === '/pro')
? [{
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro',
active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
}, {
label: 'Pricing',
icon: 'i-heroicons-ticket',
to: '/pro/pricing'
}, {
label: 'Templates',
icon: 'i-heroicons-computer-desktop',
to: '/pro/templates'
}]
: []), {
label: 'Releases',
icon: 'i-heroicons-rocket-launch',
to: '/releases'
}].filter(Boolean)
})
// Watch
watch(() => searchRef.value?.commandPaletteRef?.query, debounce((query: string) => {
if (!query) {
return
}
useTrackEvent('Search', { props: { query: `${query} - ${searchRef.value?.commandPaletteRef.results.length} results` } })
}, 500))
// Head
useHead({
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ key: 'theme-color', name: 'theme-color', content: color }
],
link: [
{ rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
{ rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
],
htmlAttrs: {
lang: 'en'
}
})
useServerSeoMeta({
ogSiteName: 'Nuxt UI',
twitterCard: 'summary_large_image'
})
// Provide
provide('navigation', navigation)
provide('files', files)
</script>

View File

@@ -1,17 +0,0 @@
export default defineAppConfig({
toaster: {
position: 'bottom-right' as const,
expand: true,
duration: 5000
},
theme: {
radius: 0.25,
blackAsPrimary: false
},
ui: {
colors: {
primary: 'green',
neutral: 'slate'
}
}
})

View File

@@ -1,89 +0,0 @@
<script setup lang="ts">
import { withoutTrailingSlash } from 'ufo'
import colors from 'tailwindcss/colors'
const route = useRoute()
const appConfig = useAppConfig()
const colorMode = useColorMode()
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content', ['framework', 'module']))
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
server: false
})
const links = useLinks()
const searchLinks = useSearchLinks()
const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
useHead({
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ key: 'theme-color', name: 'theme-color', content: color }
],
link: [
{ rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
{ rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
],
style: [
{ innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
{ innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 }
],
htmlAttrs: {
lang: 'en'
}
})
useServerSeoMeta({
ogSiteName: 'Nuxt UI',
twitterCard: 'summary_large_image'
})
const { frameworks, modules } = useSharedData()
const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)
provide('navigation', mappedNavigation)
</script>
<template>
<UApp :toaster="appConfig.toaster">
<NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
<template v-if="!route.path.startsWith('/examples')">
<Banner />
<Header :links="links" />
</template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<template v-if="!route.path.startsWith('/examples')">
<Footer />
<ClientOnly>
<LazyUContentSearch
:links="searchLinks"
:files="files"
:groups="[{
id: 'framework',
label: 'Framework',
items: frameworks
}, {
id: 'module',
label: 'Module',
items: modules
}]"
:navigation="filteredNavigation"
:fuse="{ resultLimit: 100 }"
/>
</ClientOnly>
</template>
</UApp>
</template>
<style>
/* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full h-64 !px-0 !py-0 !pt-0 !pb-0 !p-0 !justify-start !justify-end !min-h-96 h-136 max-h-[341px] */
</style>

View File

@@ -1,34 +0,0 @@
@import "tailwindcss" theme(static) source("../../../..");
@import "@nuxt/ui-pro";
@source "../../../content";
@source "../../../node_modules/.c12";
@theme static {
--container-8xl: 90rem;
--font-sans: 'Public Sans', sans-serif;
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
:root {
--ui-container: var(--container-8xl);
}
html[data-framework="nuxt"] .vue-only,
html[data-framework="vue"] .nuxt-only,
html[data-module="ui-pro"] .ui-only,
html[data-module="ui"] .ui-pro-only {
display: none;
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90">
<g transform="translate(0,90) scale(0.1,-0.1)" fill="#9b59b6" stroke="none">
<path d="M385 796 c-17 -12 -18 -19 -7 -109 20 -164 25 -158 -75 -77 -50 39 -97 70 -110 70 -26 0 -73 -72 -73 -112 0 -23 10 -30 103 -68 56 -24 106 -46 110 -50 4 -4 -32 -22 -80 -40 -146 -54 -155 -66 -108 -147 19 -31 32 -43 49 -43 13 0 61 29 109 65 99 75 94 80 75 -72 -11 -90 -10 -97 7 -109 24 -18 106 -18 130 0 17 12 18 19 7 109 -19 152 -24 147 75 72 47 -36 96 -65 109 -65 16 0 30 13 48 44 47 81 39 92 -107 147 -48 18 -84 36 -80 39 5 4 54 26 111 50 92 38 102 45 102 68 0 41 -47 112 -74 112 -13 0 -59 -29 -109 -70 -100 -81 -95 -86 -75 77 11 90 10 97 -7 109 -10 8 -40 14 -65 14 -25 0 -55 -6 -65 -14z" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 756 B

View File

@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 283.46">
<defs>
<style>
.cls-1{fill:#231815;}
@media (prefers-color-scheme: dark) { .cls-1{fill:#ffffff;} }
</style>
</defs>
<path class="cls-1" d="M144.89,89.86c-33.46,0-54.44,14.56-66.14,26.76a86,86,0,0,0-23.69,58.94c0,22.64,8.81,43.48,24.8,58.67,15.7,14.92,36.9,23.14,59.68,23.14,23.81,0,46-8.49,62.49-23.91,17-15.9,26.37-37.93,26.37-62C228.4,120.37,185.94,89.86,144.89,89.86Zm.49,153.67a61.49,61.49,0,0,1-46.45-20.4c-12.33-13.76-18.85-32.64-18.85-54.62,0-20.7,6.07-37.67,17.57-49.07,10.11-10,24.39-15.62,40.19-15.74,19,0,35.22,6.56,46.76,19,12.6,13.58,19.27,34,19.27,58.95C203.87,224.39,174.49,243.53,145.38,243.53Z"/>
<polygon class="cls-1" points="198.75 74.96 179.45 74.96 142.09 37.83 104.51 74.96 86.14 74.96 138.09 24.25 146.81 24.25 198.75 74.96"/>
</svg>

Before

Width:  |  Height:  |  Size: 855 B

View File

@@ -1,34 +0,0 @@
<svg width="290" height="290" viewBox="0 0 290 290" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M226.269 52.4044L226.274 52.4067C237.406 58.2619 245.614 66.3008 250.94 76.5218C256.285 86.7776 258.969 98.4614 258.969 111.596C258.969 124.732 256.285 136.34 250.943 146.446C245.618 156.521 237.447 164.451 226.389 170.234C221.59 172.712 219.355 178.881 222.459 183.542L257.922 236.789C261.773 242.571 257.628 250.311 250.681 250.311H196.906C193.806 250.311 190.939 248.661 189.382 245.98L79.3991 56.5686C76.0313 50.7687 80.2159 43.5 86.9227 43.5H183.394C200.888 43.5 215.161 46.4896 226.269 52.4044Z" fill="url(#paint0_linear_30_25)" stroke="url(#paint1_linear_30_25)" stroke-width="1.93333"/>
<path d="M116.722 247.228C113.004 253.687 103.684 253.687 99.9661 247.228L26.2042 119.085C22.4947 112.64 27.1462 104.596 34.5821 104.596L182.106 104.596C189.542 104.596 194.193 112.64 190.484 119.085L116.722 247.228Z" fill="url(#paint2_radial_30_25)"/>
<path d="M116.722 247.228C113.004 253.687 103.684 253.687 99.9661 247.228L26.2042 119.085C22.4947 112.64 27.1462 104.596 34.5821 104.596L182.106 104.596C189.542 104.596 194.193 112.64 190.484 119.085L116.722 247.228Z" fill="url(#paint3_radial_30_25)" fill-opacity="0.5"/>
<path d="M100.804 246.745L27.042 118.602C23.7034 112.802 27.8898 105.562 34.5821 105.562L182.106 105.562C188.798 105.562 192.985 112.802 189.646 118.602L115.884 246.745C112.538 252.558 104.15 252.558 100.804 246.745Z" fill="url(#paint4_radial_30_25)" fill-opacity="0.5" stroke="url(#paint5_linear_30_25)" stroke-width="1.93333" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_30_25" x1="241.666" y1="264.867" x2="88.9331" y2="7.73334" gradientUnits="userSpaceOnUse">
<stop stop-color="#00996C"/>
<stop offset="1" stop-color="#7AFFD8"/>
</linearGradient>
<linearGradient id="paint1_linear_30_25" x1="192.366" y1="289.033" x2="233.933" y2="42.5333" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.56"/>
<stop offset="0.494792" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<radialGradient id="paint2_radial_30_25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(185.6 110.2) rotate(147.858) scale(129.006 128.619)">
<stop offset="0.48614" stop-color="#00C58A"/>
<stop offset="1" stop-color="white" stop-opacity="0.21"/>
</radialGradient>
<radialGradient id="paint3_radial_30_25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(108.266 160.467) rotate(90) scale(191.4 190.827)">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</radialGradient>
<radialGradient id="paint4_radial_30_25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(108.266 181.733) rotate(-90) scale(129.533 129.145)">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</radialGradient>
<linearGradient id="paint5_linear_30_25" x1="105.366" y1="105.367" x2="105.366" y2="261" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.6"/>
<stop offset="0.494792" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white" stop-opacity="0.38"/>
</linearGradient>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 3.2 KiB

View File

@@ -1,50 +0,0 @@
<script setup lang="ts">
const el = ref<HTMLDivElement | null>(null)
onMounted(() => {
if (!el.value) {
return
}
const script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.setAttribute('src', 'https://cdn.carbonads.com/carbon.js?serve=CWYIVK3E&placement=uinuxtcom')
script.setAttribute('id', '_carbonads_js')
el.value?.appendChild(script)
})
</script>
<template>
<div ref="el" class="carbon" />
</template>
<style scoped>
@reference "../assets/css/main.css";
.carbon :deep(#carbonads) {
@apply relative border border-(--ui-border) rounded-[calc(var(--ui-radius)*1.5)] hover:bg-(--ui-bg-elevated)/50 w-full transition-colors min-h-[220px] p-2;
.carbon-img {
@apply flex justify-center w-full;
& > img {
@apply !max-w-full w-full rounded-(--ui-radius);
}
}
.carbon-text {
@apply text-sm text-(--ui-text-muted) transition-colors text-center text-pretty flex pt-2;
}
.carbon-poweredby {
@apply block text-xs text-center text-(--ui-text-muted) pt-2;
}
&:hover {
.carbon-text {
@apply text-(--ui-text);
}
}
}
</style>

View File

@@ -1,18 +0,0 @@
<template>
<UBanner
id="ui3-launch"
icon="i-lucide-rocket"
:actions="[
{
label: 'Discover Nuxt UI Pro',
to: '/pro/pricing',
trailingIcon: 'i-lucide-arrow-right'
}
]"
close
>
<template #title>
<span class="font-semibold">Nuxt UI v3</span> is officially released.
</template>
</UBanner>
</template>

View File

@@ -1,51 +0,0 @@
<script setup lang="ts">
const endDate = new Date('2025-03-14T23:59:59Z')
const second = 1000
const minute = second * 60
const hour = minute * 60
const day = hour * 24
function getCountdown() {
const distance = Math.floor((endDate.getTime() - Date.now()))
return {
day: Math.floor(distance / day),
hour: Math.floor((distance % (day)) / (hour)),
minute: Math.floor((distance % (hour)) / (minute)),
second: Math.floor((distance % (minute)) / (second)),
distance
}
}
const countdown = ref(getCountdown())
let interval: any
if (countdown.value.distance > 0) {
onMounted(() => {
interval = setInterval(() => {
countdown.value = getCountdown()
if (countdown.value.distance <= 0) {
clearInterval(interval)
}
}, 1000)
})
}
const plural = (value: number) => (value === 1 ? '' : 's')
const double = (value: number) => (value < 10 ? `0${value}` : value)
</script>
<template>
<div>
<p class="font-semibold text-gray-900 dark:text-white text-sm mb-3">
Nuxt UI v3 launch offer ends in:
</p>
<div class="flex items-center justify-center gap-2 text-center">
<template v-for="(value, key) in countdown" :key="key">
<div v-if="key !== 'distance'" class="flex flex-col items-center gap-2">
<UBadge color="primary" class="w-14 h-14 font-bold text-2xl flex items-center justify-center tabular-nums" variant="subtle">
{{ double(value) }}
</UBadge>
<span class="text-[10px] font-semibold text-gray-900 dark:text-white tracking-wide tabular-nums uppercase">{{ key }}{{ plural(value) }}</span>
</div>
</template>
</div>
</div>
</template>

View File

@@ -1,80 +0,0 @@
<script setup lang="ts">
const route = useRoute()
const links = [{
label: 'Team',
to: '/team'
}, {
label: 'Roadmap',
to: '/roadmap'
}, {
label: 'Terms',
to: '/pro/terms'
}, {
label: 'Releases',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank'
}]
</script>
<template>
<USeparator :icon="route.path === '/' ? undefined : 'i-simple-icons-nuxtdotjs'" class="h-px" />
<UFooter>
<template #left>
<NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-(--ui-text-muted)">
Published under <span class="text-(--ui-text-highlighted)">MIT License</span>
</NuxtLink>
</template>
<UNavigationMenu :items="links" variant="link" color="neutral" />
<template #right>
<UButton
aria-label="Nuxt Website"
icon="i-simple-icons-nuxtdotjs"
to="https://nuxt.com"
target="_blank"
color="neutral"
variant="ghost"
size="sm"
/>
<UButton
aria-label="Nuxt UI on Discord"
icon="i-simple-icons-discord"
to="https://chat.nuxt.dev"
target="_blank"
color="neutral"
variant="ghost"
size="sm"
/>
<UButton
aria-label="Nuxt on X"
icon="i-simple-icons-x"
to="https://x.com/nuxt_js"
target="_blank"
color="neutral"
variant="ghost"
size="sm"
/>
<UButton
aria-label="Nuxt on BlueSky"
icon="i-simple-icons-bluesky"
to="https://bsky.app/profile/nuxt.com"
target="_blank"
color="neutral"
variant="ghost"
size="sm"
/>
<UButton
aria-label="Nuxt UI on GitHub"
icon="i-simple-icons-github"
to="https://github.com/nuxt/ui"
target="_blank"
color="neutral"
variant="ghost"
size="sm"
/>
</template>
</UFooter>
</template>

View File

@@ -1,28 +0,0 @@
<script setup lang="ts">
const { framework, frameworks } = useSharedData()
const value = ref<string | undefined>(undefined)
onMounted(() => {
value.value = framework.value
})
watch(framework, () => {
value.value = framework.value
})
</script>
<template>
<UTabs
v-model="value"
:items="frameworks"
:content="false"
color="neutral"
:ui="{
indicator: 'bg-(--ui-bg)',
trigger: 'px-1 data-[state=active]:text-(--ui-text-highlighted)'
}"
size="xs"
@update:model-value="(framework = $event as string)"
/>
</template>

View File

@@ -1,117 +0,0 @@
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'
import type { NavigationMenuItem } from '@nuxt/ui'
const props = defineProps<{
links: NavigationMenuItem[]
}>()
const route = useRoute()
const config = useRuntimeConfig().public
const { module } = useSharedData()
const value = ref<string | undefined>(module.value)
watch(module, () => {
value.value = module.value
})
onMounted(() => {
value.value = module.value
})
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
const githubLink = computed(() => {
return `https://github.com/nuxt/${value.value}`
})
const desktopLinks = computed(() => props.links.map(({ icon, ...link }) => link))
const mobileLinks = computed(() => [
...props.links.map(link => ({ ...link, defaultOpen: link.children && route.path.startsWith(link.to as string) })),
{
label: 'Open on GitHub',
to: githubLink.value,
icon: 'i-simple-icons-github',
target: '_blank'
}
])
</script>
<template>
<UHeader :ui="{ left: 'min-w-0' }" :menu="{ shouldScaleBackground: true }">
<template #left>
<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-(--ui-text-highlighted) min-w-0 focus-visible:outline-(--ui-primary) shrink-0" aria-label="Nuxt UI">
<Logo v-if="route.path === '/'" class="w-auto h-6 shrink-0" />
<LogoPro v-else-if="route.path.startsWith('/pro')" class="w-auto h-6 shrink-0" />
<template v-else>
<LogoPro class="w-auto h-6 shrink-0 ui-pro-only" />
<Logo class="w-auto h-6 shrink-0 ui-only" />
</template>
</NuxtLink>
<UDropdownMenu
v-slot="{ open }"
:modal="false"
:items="[{ label: `v${config.version}`, active: true, color: 'primary', checked: true, type: 'checkbox' }, { label: module === 'ui-pro' ? 'v1.7.1' : 'v2.21.1', to: module === 'ui-pro' ? 'https://ui2.nuxt.com/pro' : 'https://ui2.nuxt.com' }]"
:ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
size="xs"
>
<UButton
:label="`v${config.version}`"
variant="subtle"
trailing-icon="i-lucide-chevron-down"
size="xs"
class="-mb-[6px] font-semibold rounded-full truncate"
:class="[open && 'bg-(--ui-primary)/15 ']"
:ui="{
trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
}"
/>
</UDropdownMenu>
</template>
<UNavigationMenu :items="desktopLinks" variant="link" />
<template #right>
<ThemePicker />
<UTooltip text="Search" :kbds="['meta', 'K']">
<UContentSearchButton />
</UTooltip>
<UTooltip text="Open on GitHub" class="hidden lg:flex">
<UButton
:key="value"
color="neutral"
variant="ghost"
:to="githubLink"
target="_blank"
icon="i-simple-icons-github"
aria-label="GitHub"
/>
</UTooltip>
</template>
<template #body>
<UNavigationMenu orientation="vertical" :items="mobileLinks" class="-mx-2.5" />
<USeparator type="dashed" class="mt-4 mb-6" />
<div class="flex flex-col gap-2 w-[calc(100%+1.25rem)] mb-5.5 -mx-2.5">
<FrameworkSelect />
<ModuleSelect />
</div>
<UContentNavigation :navigation="navigation" highlight :ui="{ linkTrailingBadge: 'font-semibold uppercase' }">
<template #link-title="{ link }">
<span class="inline-flex items-center gap-0.5">
{{ link.title }}
<sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
</span>
</template>
</UContentNavigation>
</template>
</UHeader>
</template>

View File

@@ -1,22 +0,0 @@
<script setup lang="ts">
defineProps<{
collapsed?: boolean
}>()
</script>
<template>
<svg :viewBox="collapsed? '0 0 320 200' : '0 0 1352 200'" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z" fill="var(--ui-primary)" />
<g v-if="!collapsed">
<path d="M377 200C379.16 200 381 198.209 381 196V103C381 103 386 112 395 127L434 194C435.785 197.74 439.744 200 443 200H470V50H443C441.202 50 439 51.4941 439 54V148L421 116L385 55C383.248 51.8912 379.479 50 376 50H350V200H377Z" fill="currentColor" />
<path d="M726 92H739C742.314 92 745 89.3137 745 86V60H773V92H800V116H773V159C773 169.5 778.057 174 787 174H800V200H783C759.948 200 745 185.071 745 160V116H726V92Z" fill="currentColor" />
<path d="M591 92V154C591 168.004 585.742 179.809 578 188C570.258 196.191 559.566 200 545 200C530.434 200 518.742 196.191 511 188C503.389 179.809 498 168.004 498 154V92H514C517.412 92 520.769 92.622 523 95C525.231 97.2459 526 98.5652 526 102V154C526 162.059 526.457 167.037 530 171C533.543 174.831 537.914 176 545 176C552.217 176 555.457 174.831 559 171C562.543 167.037 563 162.059 563 154V102C563 98.5652 563.769 96.378 566 94C567.96 91.9107 570.028 91.9599 573 92C573.411 92.0055 574.586 92 575 92H591Z" fill="currentColor" />
<path d="M676 144L710 92H684C680.723 92 677.812 93.1758 676 96L660 120L645 97C643.188 94.1758 639.277 92 636 92H611L645 143L608 200H634C637.25 200 640.182 196.787 642 194L660 167L679 195C680.818 197.787 683.75 200 687 200H713L676 144Z" fill="currentColor" />
<path d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z" fill="currentColor" />
<path d="M1060 200V60H1117C1126.67 60 1134.98 61.2896 1142 65C1149.16 68.7104 1155.29 74.3744 1159 81C1162.71 87.6256 1164 95.3867 1164 104C1164 112.481 1162.71 120.374 1159 127C1155.29 133.626 1149.16 138.157 1142 142C1134.98 145.71 1126.67 148 1117 148H1090V200H1060ZM1115 123C1121.63 123 1126.69 121.578 1130 118C1133.31 114.29 1135 109.433 1135 104C1135 98.567 1133.31 93.5778 1130 90C1126.69 86.2896 1121.63 85 1115 85H1090V123H1115Z" fill="var(--ui-primary)" />
<path d="M1226 123C1219.37 123 1214.31 124.965 1211 130C1207.69 135.035 1206 142.122 1206 151V200H1178V100H1200C1203.31 100 1206 102.686 1206 106V116C1208.65 109.904 1211.16 106.518 1215 104C1218.98 101.482 1224.77 100 1231 100H1242V123H1226Z" fill="var(--ui-primary)" />
<path d="M1299 200C1288.93 200 1280.08 197.373 1272 193C1263.92 188.495 1257.51 182.818 1253 175C1248.49 167.049 1246 157.806 1246 148C1246 138.194 1248.49 129.818 1253 122C1257.51 114.049 1263.92 107.373 1272 103C1280.08 98.4946 1288.93 97 1299 97C1309.07 97 1318.92 98.4946 1327 103C1335.08 107.373 1340.49 114.049 1345 122C1349.51 129.818 1352 138.194 1352 148C1352 157.806 1349.51 167.049 1345 175C1340.49 182.818 1335.08 188.495 1327 193C1318.92 197.373 1309.07 200 1299 200ZM1299 176C1306.42 176 1312.36 173.168 1317 168C1321.64 162.832 1324 156.216 1324 148C1324 139.652 1321.64 133.168 1317 128C1312.36 122.832 1306.42 120 1299 120C1291.58 120 1285.64 122.832 1281 128C1276.36 133.168 1274 139.652 1274 148C1274 156.216 1276.36 162.832 1281 168C1285.64 173.168 1291.58 176 1299 176Z" fill="var(--ui-primary)" />
</g>
</svg>
</template>

View File

@@ -1,28 +0,0 @@
<script setup lang="ts">
const { module, modules } = useSharedData()
const value = ref<string | undefined>(undefined)
onMounted(() => {
value.value = module.value
})
watch(module, () => {
value.value = module.value
})
</script>
<template>
<UTabs
v-model="value"
:items="modules"
:content="false"
color="neutral"
:ui="{
indicator: 'bg-(--ui-bg)',
trigger: 'px-1 data-[state=active]:text-(--ui-text-highlighted)'
}"
size="xs"
@update:model-value="(module = $event as string)"
/>
</template>

View File

@@ -1,95 +0,0 @@
<script setup lang="ts">
import { kebabCase } from 'scule'
interface Star {
x: number
y: number
size: number
twinkleDelay: number
id: string
}
const props = withDefaults(defineProps<{
starCount?: number
color?: string
size?: { min: number, max: number }
speed?: 'slow' | 'normal' | 'fast'
isIndex?: boolean
}>(), {
starCount: 50,
color: 'var(--ui-primary)',
size: () => ({
min: 1,
max: 3
}),
speed: 'normal',
isIndex: false
})
const route = useRoute()
// Generate random stars
const generateStars = (count: number): Star[] => {
return Array.from({ length: count }, () => {
const x = Math.floor(Math.random() * 100)
const y = Math.floor(Math.random() * 100)
const size = Math.random() * (props.size.max - props.size.min) + props.size.min
const twinkleDelay = Math.random() * 5
return { x, y, size, twinkleDelay, id: Math.random().toString(36).substring(2, 9) }
})
}
// Generate all stars
const stars = useState<Star[]>(`${kebabCase(route.path)}-sky`, () => generateStars(props.starCount))
// Compute twinkle animation duration based on speed
const twinkleDuration = computed(() => {
const speedMap: Record<string, string> = {
slow: '4s',
normal: '2s',
fast: '1s'
}
return speedMap[props.speed]
})
</script>
<template>
<div class="absolute pointer-events-none z-[-1] overflow-hidden" :class="isIndex ? 'inset-y-0 left-4 right-4 lg:right-[50%]' : 'inset-0'">
<div
v-for="star in stars"
:key="star.id"
class="star absolute"
:style="{
'left': `${star.x}%`,
'top': `${star.y}%`,
'transform': 'translate(-50%, -50%)',
'--star-size': `${star.size}px`,
'--star-color': color,
'--twinkle-delay': `${star.twinkleDelay}s`,
'--twinkle-duration': twinkleDuration
}"
/>
</div>
</template>
<style scoped>
.star {
width: var(--star-size);
height: var(--star-size);
background-color: var(--star-color);
border-radius: 50%;
animation: twinkle var(--twinkle-duration) ease-in-out infinite;
animation-delay: var(--twinkle-delay);
will-change: opacity;
}
@keyframes twinkle {
0%, 100% {
opacity: 0.2;
}
50% {
opacity: 1;
}
}
</style>

View File

@@ -1,131 +0,0 @@
<script setup lang="ts">
import { kebabCase } from 'scule'
interface Star {
x: number
y: number
size: number
}
const props = withDefaults(defineProps<{
starCount?: number
color?: string
speed?: 'slow' | 'normal' | 'fast'
size?: { min: number, max: number }
}>(), {
starCount: 300,
color: 'var(--ui-primary)',
speed: 'normal',
size: () => ({
min: 1,
max: 2
})
})
const route = useRoute()
// Generate random star positions and sizes
const generateStars = (count: number): Star[] => {
return Array.from({ length: count }, () => ({
x: Math.floor(Math.random() * 2000),
y: Math.floor(Math.random() * 2000),
size: typeof props.size === 'number'
? props.size
: Math.random() * (props.size.max - props.size.min) + props.size.min
}))
}
// Define speed configurations once
const speedMap = {
slow: { duration: 200, opacity: 0.5, ratio: 0.3 },
normal: { duration: 150, opacity: 0.75, ratio: 0.3 },
fast: { duration: 100, opacity: 1, ratio: 0.4 }
}
// Use a more efficient approach to generate and store stars
const stars = useState<{ slow: Star[], normal: Star[], fast: Star[] }>(`${kebabCase(route.path)}-stars`, () => {
return {
slow: generateStars(Math.floor(props.starCount * speedMap.slow.ratio)),
normal: generateStars(Math.floor(props.starCount * speedMap.normal.ratio)),
fast: generateStars(Math.floor(props.starCount * speedMap.fast.ratio))
}
})
// Compute star layers with different speeds and opacities
const starLayers = computed(() => [
{ stars: stars.value.fast, ...speedMap.fast },
{ stars: stars.value.normal, ...speedMap.normal },
{ stars: stars.value.slow, ...speedMap.slow }
])
</script>
<template>
<div class="absolute pointer-events-none z-[-1] inset-y-0 inset-x-5 sm:inset-x-7 lg:inset-x-9 overflow-hidden">
<div class="stars size-full absolute inset-x-0 top-0">
<div
v-for="(layer, index) in starLayers"
:key="index"
class="star-layer"
:style="{
'--star-duration': `${layer.duration}s`,
'--star-opacity': layer.opacity,
'--star-color': color
}"
>
<div
v-for="(star, starIndex) in layer.stars"
:key="starIndex"
class="star absolute rounded-full"
:style="{
left: `${star.x}px`,
top: `${star.y}px`,
width: `${star.size}px`,
height: `${star.size}px`,
backgroundColor: 'var(--star-color)',
opacity: 'var(--star-opacity)'
}"
/>
</div>
</div>
</div>
</template>
<style scoped>
.stars {
left: 50%;
transform: translate(-50%);
-webkit-mask-image: linear-gradient(
180deg,
rgba(217, 217, 217, 0) 0%,
rgba(217, 217, 217, 0.8) 25%,
#d9d9d9 50%,
rgba(217, 217, 217, 0.8) 75%,
rgba(217, 217, 217, 0) 100%
);
mask-image: linear-gradient(
180deg,
rgba(217, 217, 217, 0) 0%,
rgba(217, 217, 217, 0.8) 25%,
#d9d9d9 50%,
rgba(217, 217, 217, 0.8) 75%,
rgba(217, 217, 217, 0) 100%
);
-webkit-mask-size: cover;
mask-size: cover;
}
.star-layer {
animation: risingStarsAnimation linear infinite;
animation-duration: var(--star-duration);
will-change: transform;
}
@keyframes risingStarsAnimation {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-2000px);
}
}
</style>

View File

@@ -1,393 +0,0 @@
<!-- eslint-disable no-useless-escape -->
<script setup lang="ts">
import type { ChipProps } from '@nuxt/ui'
import json5 from 'json5'
import { upperFirst, camelCase, kebabCase } from 'scule'
import { hash } from 'ohash'
import { CalendarDate } from '@internationalized/date'
import * as theme from '#build/ui'
import * as themePro from '#build/ui-pro'
import { get, set } from '#ui/utils'
interface Cast {
get: (args: any) => any
template: (args: any) => string
}
type CastDateValue = [number, number, number]
const castMap: Record<string, Cast> = {
'DateValue': {
get: (args: CastDateValue) => new CalendarDate(...args),
template: (value: CalendarDate) => {
return value ? `new CalendarDate(${value.year}, ${value.month}, ${value.day})` : 'null'
}
},
'DateValue[]': {
get: (args: CastDateValue[]) => args.map(date => new CalendarDate(...date)),
template: (value: CalendarDate[]) => {
return value ? `[${value.map(date => `new CalendarDate(${date.year}, ${date.month}, ${date.day})`).join(', ')}]` : '[]'
}
},
'DateRange': {
get: (args: { start: CastDateValue, end: CastDateValue }) => ({ start: new CalendarDate(...args.start), end: new CalendarDate(...args.end) }),
template: (value: { start: CalendarDate, end: CalendarDate }) => {
if (!value.start || !value.end) {
return `{ start: null, end: null }`
}
return `{ start: new CalendarDate(${value.start.year}, ${value.start.month}, ${value.start.day}), end: new CalendarDate(${value.end.year}, ${value.end.month}, ${value.end.day}) }`
}
}
}
const props = defineProps<{
pro?: boolean
prose?: boolean
prefix?: string
/** Override the slug taken from the route */
slug?: string
class?: any
/** List of props to ignore in selection */
ignore?: string[]
/** List of props to hide from code and selection */
hide?: string[]
/** List of props to externalize in script setup */
external?: string[]
/** The types of the externalized props */
externalTypes?: string[]
/** List of props to use with `v-model` */
model?: string[]
/** List of props to cast from code and selection */
cast?: { [key: string]: string }
/** List of items for each prop */
items?: { [key: string]: string[] }
props?: { [key: string]: any }
slots?: { [key: string]: any }
/**
* Whether to format the code with Prettier
* @defaultValue false
*/
prettier?: boolean
/**
* Whether to collapse the code block
* @defaultValue false
*/
collapse?: boolean
/**
* A list of line numbers to highlight in the code block
*/
highlights?: number[]
/**
* Whether to add overflow-hidden to wrapper
*/
overflowHidden?: boolean
}>()
const route = useRoute()
const { $prettier } = useNuxtApp()
const camelName = camelCase(props.slug ?? route.path.split('/').pop() ?? '')
const name = `${props.prose ? 'Prose' : 'U'}${upperFirst(camelName)}`
const component = defineAsyncComponent(() => {
if (props.pro) {
if (props.prefix) {
return import(`#ui-pro/components/${props.prefix}/${upperFirst(camelName)}.vue`)
}
if (props.prose) {
return import(`#ui-pro/components/prose/${upperFirst(camelName)}.vue`)
}
return import(`#ui-pro/components/${upperFirst(camelName)}.vue`)
}
return import(`#ui/components/${upperFirst(camelName)}.vue`)
})
const componentProps = reactive({
...Object.fromEntries(Object.entries(props.props || {}).map(([key, value]) => {
const cast = props.cast?.[key]
if (cast && !castMap[cast]) {
throw new Error(`Unknown cast: ${cast}`)
}
return [key, cast ? castMap[cast]!.get(value) : value]
}))
})
const componentEvents = reactive({
...Object.fromEntries((props.model || []).map(key => [`onUpdate:${key}`, (e: any) => setComponentProp(key, e)])),
...(componentProps.modelValue ? { [`onUpdate:modelValue`]: (e: any) => setComponentProp('modelValue', e) } : {})
})
function getComponentProp(name: string) {
return get(componentProps, name) ?? undefined
}
function setComponentProp(name: string, value: any) {
set(componentProps, name, value)
}
const componentTheme = ((props.pro ? props.prose ? themePro.prose : themePro : theme) as any)[camelName]
const meta = await fetchComponentMeta(name as any)
function mapKeys(obj: object, parentKey = ''): any {
return Object.entries(obj || {}).flatMap(([key, value]: [string, any]) => {
if (typeof value === 'object' && !Array.isArray(value)) {
return mapKeys(value, key)
}
const fullKey = parentKey ? `${parentKey}.${key}` : key
return !props.ignore?.includes(fullKey) && !props.hide?.includes(fullKey) ? fullKey : undefined
}).filter(Boolean)
}
const options = computed(() => {
const keys = mapKeys(props.props || {})
return keys.map((key: string) => {
const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
const propItems = get(props.items, key, [])
const items = propItems.length
? propItems.map((item: any) => ({
value: item,
label: String(item)
}))
: prop?.type === 'boolean' || prop?.type === 'boolean | undefined'
? [{ value: true, label: 'true' }, { value: false, label: 'false' }]
: Object.keys(componentTheme?.variants?.[key] || {}).filter((variant) => {
return variant !== 'true' && variant !== 'false'
}).map(variant => ({
value: variant,
label: variant,
chip: key.toLowerCase().endsWith('color') ? { color: variant } : undefined
}))
return {
name: key,
label: key,
type: props?.cast?.[key] ?? prop?.type,
items
}
})
})
const code = computed(() => {
let code = ''
if (props.prose) {
code += `\`\`\`mdc
::${camelName}`
const proseProps = Object.entries(componentProps).map(([key, value]) => {
if (value === undefined || value === null || value === '' || props.hide?.includes(key)) {
return
}
return `${key}="${value}"`
}).filter(Boolean).join(' ')
if (proseProps.length) {
code += `{${proseProps}}`
}
code += `
${props.slots?.default}
::
\`\`\``
return code
}
if (props.collapse) {
code += `::code-collapse
`
}
code += `\`\`\`vue${props.highlights?.length ? ` {${props.highlights.join('-')}}` : ''}`
if (props.external?.length) {
code += `
<script setup lang="ts">
`
if (props.externalTypes?.length) {
const removeArrayBrackets = (type: string): string => type.endsWith('[]') ? removeArrayBrackets(type.slice(0, -2)) : type
const types = props.externalTypes.map(type => removeArrayBrackets(type))
code += `import type { ${types.join(', ')} } from '@nuxt/ui${props.pro ? '-pro' : ''}'
`
}
for (const [i, key] of props.external.entries()) {
const cast = props.cast?.[key]
const value = cast ? castMap[cast]!.template(componentProps[key]) : json5.stringify(componentProps[key], null, 2)?.replace(/,([ |\t\n]+[}|\]])/g, '$1')
const type = props.externalTypes?.[i] ? `<${props.externalTypes[i]}>` : ''
code += `const ${key === 'modelValue' ? 'value' : key} = ref${type}(${value})
`
}
code += `<\/script>
`
}
code += `
<template>
<${name}`
for (const [key, value] of Object.entries(componentProps)) {
if (key === 'modelValue') {
code += ` v-model="value"`
continue
}
if (props.model?.includes(key)) {
code += ` v-model:${key}="${key}"`
continue
}
if (value === undefined || value === null || value === '' || props.hide?.includes(key)) {
continue
}
const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
const propDefault = prop && (prop.default ?? prop.tags?.find(tag => tag.name === 'defaultValue')?.text ?? componentTheme?.defaultVariants?.[prop.name])
const name = kebabCase(key)
if (typeof value === 'boolean') {
if (value && (propDefault === 'true' || propDefault === '`true`' || propDefault === true)) {
continue
}
if (!value && (!propDefault || propDefault === 'false' || propDefault === '`false`' || propDefault === false)) {
continue
}
code += value ? ` ${name}` : ` :${name}="false"`
} else if (typeof value === 'object') {
const parsedValue = !props.external?.includes(key) ? json5.stringify(value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1') : key
code += ` :${name}="${parsedValue}"`
} else {
if (propDefault === value) {
continue
}
code += ` ${typeof value === 'number' ? ':' : ''}${name}="${value}"`
}
}
if (props.slots) {
code += `>`
for (const [key, value] of Object.entries(props.slots)) {
if (key === 'default') {
code += props.slots.default
} else {
code += `
<template #${key}>
${value}
</template>\n`
}
}
code += (Object.keys(props.slots).length > 1 ? '\n' : '') + `</${name}>`
} else {
code += ' />'
}
code += `\n</template>
\`\`\`
`
if (props.collapse) {
code += `
::`
}
return code
})
const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props: componentProps, slots: props.slots })}`, async () => {
if (!props.prettier) {
return parseMarkdown(code.value)
}
let formatted = ''
try {
formatted = await $prettier.format(code.value, {
trailingComma: 'none',
semi: false,
singleQuote: true,
printWidth: 100
})
} catch {
formatted = code.value
}
return parseMarkdown(formatted)
}, { watch: [code] })
</script>
<template>
<div class="my-5">
<div class="relative">
<div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
<template v-for="option in options" :key="option.name">
<UFormField
:label="option.label"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
container: 'mt-0'
}"
>
<USelect
v-if="option.items?.length"
:model-value="getComponentProp(option.name)"
:items="option.items"
value-key="value"
color="neutral"
variant="soft"
class="rounded-(--ui-radius) rounded-l-none min-w-12"
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }"
@update:model-value="setComponentProp(option.name, $event)"
>
<template v-if="option.name.toLowerCase().endsWith('color')" #leading="{ modelValue, ui }">
<UChip
v-if="modelValue"
inset
standalone
:color="(modelValue as any)"
:size="(ui.itemLeadingChipSize() as ChipProps['size'])"
class="size-2"
/>
</template>
</USelect>
<UInput
v-else
:type="option.type?.includes('number') && typeof getComponentProp(option.name) === 'number' ? 'number' : 'text'"
:model-value="getComponentProp(option.name)"
color="neutral"
variant="soft"
:ui="{ base: 'rounded-(--ui-radius) rounded-l-none min-w-12' }"
@update:model-value="setComponentProp(option.name, $event)"
/>
</UFormField>
</template>
</div>
<div v-if="component" class="flex justify-center border border-b-0 border-(--ui-border-muted) relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class, { 'overflow-hidden': props.overflowHidden }]">
<component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
<slot :name="slot" mdc-unwrap="p">
{{ slots?.[slot] }}
</slot>
</template>
</component>
</div>
</div>
<MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&_pre]:!rounded-t-none [&_div.my-5]:!mt-0" />
</div>
</template>

View File

@@ -1,41 +0,0 @@
<script setup lang="ts">
import { upperFirst, camelCase } from 'scule'
const props = defineProps<{
prose?: boolean
}>()
const route = useRoute()
const camelName = camelCase(route.path.split('/').pop() ?? '')
const name = props.prose ? `Prose${upperFirst(camelName)}` : `U${upperFirst(camelName)}`
const meta = await fetchComponentMeta(name as any)
</script>
<template>
<ProseTable>
<ProseThead>
<ProseTr>
<ProseTh>
Event
</ProseTh>
<ProseTh>
Type
</ProseTh>
</ProseTr>
</ProseThead>
<ProseTbody>
<ProseTr v-for="event in (meta?.meta?.events || [])" :key="event.name">
<ProseTd>
<ProseCode>
{{ event.name }}
</ProseCode>
</ProseTd>
<ProseTd>
<HighlightInlineType v-if="event.type" :type="event.type" />
</ProseTd>
</ProseTr>
</ProseTbody>
</ProseTable>
</template>

View File

@@ -1,225 +0,0 @@
<script setup lang="ts">
import type { ChipProps } from '@nuxt/ui'
import { camelCase } from 'scule'
import { useElementSize } from '@vueuse/core'
import { get, set } from '#ui/utils'
const props = withDefaults(defineProps<{
name: string
class?: any
/**
* Whether to render the component in an iframe
* @defaultValue false
*/
iframe?: boolean | { [key: string]: any }
/**
* Whether to display the component in a mobile-sized iframe viewport
* @defaultValue false
*/
iframeMobile?: boolean
props?: { [key: string]: any }
/**
* Whether to format the code with Prettier
* @defaultValue false
*/
prettier?: boolean
/**
* Whether to collapse the code block
* @defaultValue false
*/
collapse?: boolean
/**
* Whether to show the preview
* When `false`, the filename will be shown instead
* @defaultValue true
*/
preview?: boolean
/**
* Whether to show the source code
* @defaultValue true
*/
source?: boolean
/**
* A list of variable props to link to the component.
*/
options?: Array<{
alias?: string
name: string
label: string
items?: any[]
default: any
multiple?: boolean
}>
/**
* A list of line numbers to highlight in the code block
*/
highlights?: number[]
/**
* Whether to add overflow-hidden to wrapper
*/
overflowHidden?: boolean
}>(), {
preview: true,
source: true
})
const slots = defineSlots<{
options(props?: {}): any
code(props?: {}): any
}>()
const el = ref<HTMLElement | null>(null)
const { $prettier } = useNuxtApp()
const { width } = useElementSize(el)
const camelName = camelCase(props.name)
const data = await fetchComponentExample(camelName)
const componentProps = reactive({ ...(props.props || {}) })
const code = computed(() => {
let code = ''
if (props.collapse) {
code += `::code-collapse
`
}
code += `\`\`\`vue ${props.preview ? '' : ` [${data.pascalName}.vue]`}${props.highlights?.length ? `{${props.highlights.join('-')}}` : ''}
${data?.code ?? ''}
\`\`\``
if (props.collapse) {
code += `
::`
}
return code
})
const { data: ast } = await useAsyncData(`component-example-${camelName}`, async () => {
if (!props.prettier) {
return parseMarkdown(code.value)
}
let formatted = ''
try {
formatted = await $prettier.format(code.value, {
trailingComma: 'none',
semi: false,
singleQuote: true,
printWidth: 100
})
} catch {
formatted = code.value
}
return parseMarkdown(formatted)
}, { watch: [code] })
const optionsValues = ref(props.options?.reduce((acc, option) => {
if (option.name) {
acc[option.alias || option.name] = option.default
}
if (option.name.toLowerCase().endsWith('color') && option.items?.length) {
option.items = option.items.map((item: any) => ({
label: item,
value: item,
chip: { color: item }
}))
}
return acc
}, {} as Record<string, any>) || {})
const urlSearchParams = computed(() => {
const params = {
...optionsValues.value,
...componentProps
}
if (!props.iframeMobile) {
params.width = Math.round(width.value).toString()
}
return new URLSearchParams(params).toString()
})
</script>
<template>
<div ref="el" class="my-5">
<template v-if="preview">
<div class="border border-(--ui-border-muted) relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source, 'overflow-hidden': props.overflowHidden }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-(--ui-border-muted)">
<slot name="options" />
<UFormField
v-for="option in props.options"
:key="option.name"
:label="option.label"
:name="option.name"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
container: 'mt-0'
}"
>
<USelectMenu
v-if="option.items?.length"
:model-value="get(optionsValues, option.name)"
:items="option.items"
:search-input="false"
:value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
color="neutral"
variant="soft"
class="rounded-(--ui-radius) rounded-l-none min-w-12"
:multiple="option.multiple"
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }"
@update:model-value="set(optionsValues, option.name, $event)"
>
<template v-if="option.name.toLowerCase().endsWith('color')" #leading="{ modelValue, ui }">
<UChip
inset
standalone
:color="(modelValue as any)"
:size="(ui.itemLeadingChipSize() as ChipProps['size'])"
class="size-2"
/>
</template>
</USelectMenu>
<UInput
v-else
:model-value="get(optionsValues, option.name)"
color="neutral"
variant="soft"
:ui="{ base: 'rounded-(--ui-radius) rounded-l-none min-w-12' }"
@update:model-value="set(optionsValues, option.name, $event)"
/>
</UFormField>
</div>
<iframe
v-if="iframe"
v-bind="typeof iframe === 'object' ? iframe : {}"
:src="`/examples/${name}?${urlSearchParams}`"
class="relative w-full"
:class="[props.class, !iframeMobile && 'lg:left-1/2 lg:-translate-x-1/2 lg:w-[1024px]']"
/>
<div v-else class="flex justify-center p-4" :class="props.class">
<component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
</div>
</div>
</template>
<template v-if="props.source">
<div v-if="!!slots.code" class="[&_pre]:!rounded-t-none [&_div.my-5]:!mt-0">
<slot name="code" />
</div>
<MDCRenderer v-else-if="ast" :body="ast.body" :data="ast.data" class="[&_pre]:!rounded-t-none [&_div.my-5]:!mt-0" />
</template>
</div>
</template>

View File

@@ -1,123 +0,0 @@
<script setup lang="ts">
import { upperFirst, camelCase, kebabCase } from 'scule'
import type { ComponentMeta } from 'vue-component-meta'
import * as theme from '#build/ui'
import * as themePro from '#build/ui-pro'
const props = withDefaults(defineProps<{
name?: string
ignore?: string[]
pro?: boolean
prose?: boolean
}>(), {
ignore: () => [
'activeClass',
'inactiveClass',
'exactActiveClass',
'ariaCurrentValue',
'href',
'rel',
'noRel',
'prefetch',
'prefetchOn',
'noPrefetch',
'prefetchedClass',
'replace',
'exact',
'exactQuery',
'exactHash',
'external',
'onClick',
'viewTransition'
]
})
const route = useRoute()
const camelName = camelCase(props.name ?? route.path.split('/').pop() ?? '')
const componentName = props.prose ? `Prose${upperFirst(camelName)}` : `U${upperFirst(camelName)}`
const componentTheme = ((props.pro ? props.prose ? themePro.prose : themePro : theme) as any)[camelName]
const meta = await fetchComponentMeta(componentName as any)
const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
if (!meta?.meta?.props?.length) {
return []
}
return meta.meta.props.filter((prop) => {
return !props.ignore?.includes(prop.name)
}).map((prop) => {
if (prop.default) {
prop.default = prop.default.replace(' as never', '').replace(/^"(.*)"$/, '\'$1\'')
} else {
const tag = prop.tags?.find(tag => tag.name === 'defaultValue')?.text
if (tag) {
prop.default = tag
} else if (componentTheme?.defaultVariants?.[prop.name]) {
prop.default = typeof componentTheme?.defaultVariants?.[prop.name] === 'string' ? `'${componentTheme?.defaultVariants?.[prop.name]}'` : componentTheme?.defaultVariants?.[prop.name]
}
}
// @ts-expect-error - Type is not correct
prop.type = !prop.type.startsWith('boolean') && prop.schema?.kind === 'enum' && Object.keys(prop.schema.schema)?.length ? Object.values(prop.schema.schema).map(schema => schema?.type ? schema.type : schema).join(' | ') : prop.type
return prop
}).sort((a, b) => {
if (a.name === 'as') {
return -1
}
if (b.name === 'as') {
return 1
}
if (a.name === 'ui') {
return 1
}
if (b.name === 'ui') {
return -1
}
return 0
})
})
</script>
<template>
<ProseTable>
<ProseThead>
<ProseTr>
<ProseTh>
Prop
</ProseTh>
<ProseTh>
Default
</ProseTh>
<ProseTh>
Type
</ProseTh>
</ProseTr>
</ProseThead>
<ProseTbody>
<ProseTr v-for="prop in metaProps" :key="prop.name">
<ProseTd>
<ProseCode>
{{ prop.name }}
</ProseCode>
</ProseTd>
<ProseTd>
<HighlightInlineType v-if="prop.default" :type="prop.default" />
</ProseTd>
<ProseTd>
<HighlightInlineType v-if="prop.type" :type="prop.type" />
<MDC v-if="prop.description" :value="prop.description" class="text-(--ui-text-toned) mt-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-description`" />
<ComponentPropsLinks v-if="prop.tags?.length" :prop="prop" />
<ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />
</ProseTd>
</ProseTr>
</ProseTbody>
</ProseTable>
</template>

View File

@@ -1,20 +0,0 @@
<script setup lang="ts">
import { kebabCase } from 'scule'
import type { PropertyMeta } from 'vue-component-meta'
const props = defineProps<{
prop: PropertyMeta
}>()
const route = useRoute()
const links = computed(() => props.prop.tags?.filter((tag: any) => tag.name === 'link'))
</script>
<template>
<ProseUl v-if="links?.length">
<ProseLi v-for="(link, index) in links" :key="index">
<MDC :value="link.text ?? ''" class="my-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-link-${index}`" />
</ProseLi>
</ProseUl>
</template>

View File

@@ -1,50 +0,0 @@
<script setup lang="ts">
import { kebabCase } from 'scule'
import type { PropertyMeta } from 'vue-component-meta'
const props = defineProps<{
prop: PropertyMeta
ignore?: string[]
}>()
const route = useRoute()
function getSchemaProps(schema: PropertyMeta['schema']): any {
if (!schema || typeof schema === 'string' || !schema.schema) {
return []
}
if (schema.kind === 'object') {
return Object.values(schema.schema).filter(prop => !props.ignore?.includes(prop.name))
}
return (Array.isArray(schema.schema) ? schema.schema : Object.values(schema.schema)).flatMap(getSchemaProps as any)
}
const schemaProps = computed(() => {
return getSchemaProps(props.prop.schema).map((prop: any) => {
const defaultValue = prop.default ?? prop.tags?.find((tag: any) => tag.name === 'defaultValue')?.text
let description = prop.description
if (defaultValue) {
description = description ? `${description} Defaults to \`${defaultValue}\`{lang="ts-type"}.` : `Defaults to \`${defaultValue}\`{lang="ts-type"}.`
}
return {
...prop,
description
}
})
})
</script>
<template>
<ProseCollapsible v-if="schemaProps?.length" class="mt-1">
<ProseUl>
<ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
<HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
<MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-(--ui-text-muted) my-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-${schemaProp.name}-description`" />
</ProseLi>
</ProseUl>
</ProseCollapsible>
</template>

View File

@@ -1,44 +0,0 @@
<script setup lang="ts">
import { upperFirst, camelCase, kebabCase } from 'scule'
const props = defineProps<{
prose?: boolean
slug?: string
}>()
const route = useRoute()
const camelName = camelCase(props.slug ?? route.path.split('/').pop() ?? '')
const name = `${props.prose ? 'Prose' : 'U'}${upperFirst(camelName)}`
const meta = await fetchComponentMeta(name as any)
</script>
<template>
<ProseTable>
<ProseThead>
<ProseTr>
<ProseTh>
Slot
</ProseTh>
<ProseTh>
Type
</ProseTh>
</ProseTr>
</ProseThead>
<ProseTbody>
<ProseTr v-for="slot in (meta?.meta?.slots || [])" :key="slot.name">
<ProseTd>
<ProseCode>
{{ slot.name }}
</ProseCode>
</ProseTd>
<ProseTd>
<HighlightInlineType v-if="slot.type" :type="slot.type" />
<MDC v-if="slot.description" :value="slot.description" class="text-(--ui-text-toned) mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
</ProseTd>
</ProseTr>
</ProseTbody>
</ProseTable>
</template>

View File

@@ -1,153 +0,0 @@
<script setup lang="ts">
import json5 from 'json5'
import { camelCase } from 'scule'
import { hash } from 'ohash'
import * as theme from '#build/ui'
import * as themePro from '#build/ui-pro'
const props = defineProps<{
pro?: boolean
prose?: boolean
slug?: string
extra?: string[]
}>()
const route = useRoute()
const { framework } = useSharedData()
const name = props.slug ?? route.path.split('/').pop() ?? ''
const camelName = camelCase(name)
const strippedCompoundVariants = ref(false)
const computedTheme = computed(() => props.pro ? props.prose ? themePro.prose : themePro : theme)
const strippedTheme = computed(() => {
const strippedTheme = {
...(computedTheme.value as any)[camelName]
}
if (strippedTheme?.compoundVariants) {
strippedTheme.compoundVariants = strippedTheme.compoundVariants.filter((compoundVariant: any) => {
if (compoundVariant.color) {
if (!['primary', 'neutral'].includes(compoundVariant.color)) {
strippedCompoundVariants.value = true
return false
}
}
if (compoundVariant.highlightColor) {
if (!['primary', 'neutral'].includes(compoundVariant.highlightColor)) {
strippedCompoundVariants.value = true
return false
}
}
if (compoundVariant.loadingColor) {
if (!['primary', 'neutral'].includes(compoundVariant.loadingColor)) {
strippedCompoundVariants.value = true
return false
}
}
return true
})
}
return strippedTheme
})
const component = computed(() => {
const baseKey = props.pro ? 'uiPro' : 'ui'
const content = props.prose
? { prose: { [camelName]: strippedTheme.value } }
: { [camelName]: strippedTheme.value }
if (props.extra?.length) {
props.extra.forEach((extra) => {
const target = props.prose ? content.prose! : content
target[extra as keyof typeof target] = computedTheme.value[extra as keyof typeof computedTheme.value]
})
}
return {
[baseKey]: content
}
})
const themeLink = computed(() => {
const repo = props.pro ? 'ui-pro' : 'ui'
const slug = name.startsWith('content') ? `content/${name}` : name
return `https://github.com/nuxt/${repo}/blob/v3/src/theme/${slug}.ts`
})
const { data: ast } = await useAsyncData(`component-theme-${camelName}-${hash({ props })}`, async () => {
const md = `
::code-collapse{class="nuxt-only"}
\`\`\`ts [app.config.ts]
export default defineAppConfig(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
\`\`\`\
::
::code-collapse{class="vue-only ui-only"}
\`\`\`ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
.split('\n')
.map((line, i) => i === 0 ? line : ` ${line}`)
.join('\n')})
]
})
\`\`\`
::
::code-collapse{class="vue-only ui-pro-only"}
\`\`\`ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
.split('\n')
.map((line, i) => i === 0 ? line : ` ${line}`)
.join('\n')})
]
})
\`\`\`
::
${strippedCompoundVariants.value
? `
::callout{icon="i-simple-icons-github" to="${themeLink.value}" title="Compound variants"}
Some colors in \`compoundVariants\` are omitted for readability. Check out the source code on GitHub.
::`
: ''}
`
return parseMarkdown(md)
}, { watch: [framework] })
</script>
<template>
<MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" />
</template>

View File

@@ -1,12 +0,0 @@
<script setup lang="ts">
import { Slot } from 'reka-ui'
</script>
<template>
<Slot class="nuxt-only">
<slot name="nuxt" />
</Slot>
<Slot class="vue-only">
<slot name="vue" />
</Slot>
</template>

View File

@@ -1,31 +0,0 @@
<script setup lang="ts">
import { hash } from 'ohash'
const props = defineProps<{
type: string
}>()
const type = computed(() => {
let type = props.type
if (type.includes(', "as" | "asChild" | "forceMount">')) {
type = type.replace(`, "as" | "asChild" | "forceMount">`, ``).replace('Omit<', '')
}
if (type.includes(', "as" | "asChild">')) {
type = type.replace(', "as" | "asChild">', '').replace('Omit<', '')
}
if (type.startsWith('undefined |')) {
type = type.replace('undefined |', '')
}
if (type.endsWith('| undefined')) {
type = type.replace('| undefined', '')
}
return type
})
const { data: ast } = await useAsyncData(`hightlight-inline-code-${hash(type.value).slice(0, 10)}`, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`))
</script>
<template>
<MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" />
</template>

View File

@@ -1,89 +0,0 @@
<script setup lang="ts">
import json5 from 'json5'
import icons from '../../../../src/theme/icons'
const appConfig = useAppConfig()
const { framework, module } = useSharedData()
const { data: ast } = await useAsyncData(`icons-theme`, async () => {
const md = `
::code-collapse{class="ui-only nuxt-only"}
\`\`\`ts [app.config.ts]
export default defineAppConfig(${json5.stringify({
ui: {
icons
}
}, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
\`\`\`\
::
::code-collapse{class="ui-pro-only nuxt-only"}
\`\`\`ts [app.config.ts]
export default defineAppConfig(${json5.stringify({
ui: {
icons: appConfig.ui.icons
}
}, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
\`\`\`\
::
::code-collapse{class="vue-only ui-only"}
\`\`\`ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui(${json5.stringify({
ui: {
icons
}
}, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
.split('\n')
.map((line, i) => i === 0 ? line : ` ${line}`)
.join('\n')})
]
})
\`\`\`
::
::code-collapse{class="vue-only ui-pro-only"}
\`\`\`ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro(${json5.stringify({
ui: {
icons
}
}, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
.split('\n')
.map((line, i) => i === 0 ? line : ` ${line}`)
.join('\n')})
]
})
\`\`\`
::
`
return parseMarkdown(md)
}, { watch: [framework, module] })
</script>
<template>
<MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" />
</template>

View File

@@ -1,12 +0,0 @@
<script setup lang="ts">
import { Slot } from 'reka-ui'
</script>
<template>
<Slot class="ui-only">
<slot name="ui" />
</Slot>
<Slot class="ui-pro-only">
<slot name="ui-pro" />
</Slot>
</template>

View File

@@ -1,21 +0,0 @@
<template>
<div class="relative overflow-hidden rounded-(--ui-radius) border border-dashed border-(--ui-border-accented) opacity-75 px-4 flex items-center justify-center">
<svg class="absolute inset-0 h-full w-full stroke-(--ui-border-inverted)/10" fill="none">
<defs>
<pattern
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
x="0"
y="0"
width="10"
height="10"
patternUnits="userSpaceOnUse"
>
<path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
</pattern>
</defs>
<rect stroke="none" fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)" width="100%" height="100%" />
</svg>
<slot />
</div>
</template>

View File

@@ -1,74 +0,0 @@
<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
const props = withDefaults(defineProps<{
default?: string
}>(), {
default: 'en'
})
function getEmojiFlag(locale: string): string {
const languageToCountry: Record<string, string> = {
ar: 'sa', // Arabic -> Saudi Arabia
bn: 'bd', // Bengali -> Bangladesh
ca: 'es', // Catalan -> Spain
ckb: 'iq', // Central Kurdish -> Iraq
cs: 'cz', // Czech -> Czech Republic (note: modern country code is actually 'cz')
da: 'dk', // Danish -> Denmark
el: 'gr', // Greek -> Greece
en: 'gb', // English -> Great Britain
et: 'ee', // Estonian -> Estonia
he: 'il', // Hebrew -> Israel
hi: 'in', // Hindi -> India
hy: 'am', // Armenian -> Armenia
ja: 'jp', // Japanese -> Japan
kk: 'kz', // Kazakh -> Kazakhstan
km: 'kh', // Khmer -> Cambodia
ko: 'kr', // Korean -> South Korea
nb: 'no', // Norwegian Bokmål -> Norway
sv: 'se', // Swedish -> Sweden
uk: 'ua', // Ukrainian -> Ukraine
ur: 'pk', // Urdu -> Pakistan
vi: 'vn' // Vietnamese -> Vietnam
}
const baseLanguage = locale.split('-')[0]?.toLowerCase() || locale
const countryCode = languageToCountry[baseLanguage] || locale.replace(/^.*-/, '').slice(0, 2)
return countryCode.toUpperCase()
.split('')
.map(char => String.fromCodePoint(0x1F1A5 + char.charCodeAt(0)))
.join('')
}
</script>
<!-- eslint-disable vue/singleline-html-element-content-newline -->
<template>
<div>
<ProseP>
By default, the <ProseCode>{{ props.default }}</ProseCode> locale is used.
</ProseP>
<div class="grid gap-6 grid-cols-2 md:grid-cols-3">
<div v-for="locale in locales" :key="locale.code">
<div class="flex gap-3 items-center">
<UAvatar size="xl">
{{ getEmojiFlag(locale.code) }}
</UAvatar>
<div class="text-sm">
<div class="font-semibold">{{ locale.name }}</div>
<div class="mt-1">Code: <ProseCode class="text-xs">{{ locale.code }}</ProseCode></div>
</div>
</div>
</div>
</div>
<ProseNote to="https://github.com/nuxt/ui/tree/v3/src/runtime/locale" target="_blank">
If you need additional languages, you can contribute by creating a PR to add a new locale in <ProseCode>src/runtime/locale/</ProseCode>.
</ProseNote>
<ProseTip>
You can use the <ProseCode>nuxt-ui</ProseCode> CLI to create a new locale:
<ProsePre language="bash">nuxt-ui make locale --code "en" --name "English"</ProsePre>
</ProseTip>
</div>
</template>

View File

@@ -1,26 +0,0 @@
<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'
const items: AccordionItem[] = [
{
label: 'Icons',
icon: 'i-lucide-smile'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book'
},
{
label: 'Components',
icon: 'i-lucide-box'
}
]
</script>
<template>
<UAccordion :items="items">
<template #body="{ item }">
This is the {{ item.label }} panel.
</template>
</UAccordion>
</template>

View File

@@ -1,28 +0,0 @@
<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'
const items: AccordionItem[] = [
{
label: 'Icons',
icon: 'i-lucide-smile'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book'
},
{
label: 'Components',
icon: 'i-lucide-box'
}
]
</script>
<template>
<UAccordion :items="items">
<template #content="{ item }">
<p class="pb-3.5 text-sm text-(--ui-text-muted)">
This is the {{ item.label }} panel.
</p>
</template>
</UAccordion>
</template>

View File

@@ -1,32 +0,0 @@
<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'
const items = [
{
label: 'Icons',
icon: 'i-lucide-smile',
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
slot: 'colors' as const,
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Components',
icon: 'i-lucide-box',
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
] satisfies AccordionItem[]
</script>
<template>
<UAccordion :items="items">
<template #colors="{ item }">
<p class="text-sm pb-3.5 text-(--ui-primary)">
{{ item.content }}
</p>
</template>
</UAccordion>
</template>

View File

@@ -1,32 +0,0 @@
<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'
import { useSortable } from '@vueuse/integrations/useSortable'
const items = shallowRef<AccordionItem[]>([
{
label: 'Icons',
icon: 'i-lucide-smile',
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Components',
icon: 'i-lucide-box',
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
])
const accordion = useTemplateRef<HTMLElement>('accordion')
useSortable(accordion, items, {
animation: 150
})
</script>
<template>
<UAccordion ref="accordion" :items="items" />
</template>

View File

@@ -1,34 +0,0 @@
<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'
const items: AccordionItem[] = [
{
label: 'Icons',
icon: 'i-lucide-smile',
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Components',
icon: 'i-lucide-box',
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
const active = ref('0')
// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
setInterval(() => {
active.value = String((Number(active.value) + 1) % items.length)
}, 2000)
})
</script>
<template>
<UAccordion v-model="active" :items="items" />
</template>

View File

@@ -1,24 +0,0 @@
<template>
<UAvatarGroup>
<UChip inset color="success">
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</UChip>
<UChip inset color="warning">
<UAvatar
src="https://github.com/romhml.png"
alt="Romain Hamel"
/>
</UChip>
<UChip inset color="error">
<UAvatar
src="https://github.com/noook.png"
alt="Neil Richter"
/>
</UChip>
</UAvatarGroup>
</template>

View File

@@ -1,39 +0,0 @@
<template>
<UAvatarGroup>
<ULink
to="https://github.com/benjamincanac"
target="_blank"
class="hover:ring-(--ui-primary) transition"
raw
>
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</ULink>
<ULink
to="https://github.com/romhml"
target="_blank"
class="hover:ring-(--ui-primary) transition"
raw
>
<UAvatar
src="https://github.com/romhml.png"
alt="Romain Hamel"
/>
</ULink>
<ULink
to="https://github.com/noook"
target="_blank"
class="hover:ring-(--ui-primary) transition"
raw
>
<UAvatar
src="https://github.com/noook.png"
alt="Neil Richter"
/>
</ULink>
</UAvatarGroup>
</template>

View File

@@ -1,24 +0,0 @@
<template>
<UAvatarGroup>
<UTooltip text="benjamincanac">
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</UTooltip>
<UTooltip text="romhml">
<UAvatar
src="https://github.com/romhml.png"
alt="Romain Hamel"
/>
</UTooltip>
<UTooltip text="noook">
<UAvatar
src="https://github.com/noook.png"
alt="Neil Richter"
/>
</UTooltip>
</UAvatarGroup>
</template>

View File

@@ -1,8 +0,0 @@
<template>
<UChip inset>
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</UChip>
</template>

View File

@@ -1,8 +0,0 @@
<template>
<UTooltip text="Benjamin Canac">
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</UTooltip>
</template>

View File

@@ -1,43 +0,0 @@
<script setup lang="ts">
import type { BreadcrumbItem } from '@nuxt/ui'
const items = [
{
label: 'Home',
to: '/'
},
{
slot: 'dropdown' as const,
icon: 'i-lucide-ellipsis',
children: [
{
label: 'Documentation'
},
{
label: 'Themes'
},
{
label: 'GitHub'
}
]
},
{
label: 'Components',
to: '/components'
},
{
label: 'Breadcrumb',
to: '/components/breadcrumb'
}
] satisfies BreadcrumbItem[]
</script>
<template>
<UBreadcrumb :items="items">
<template #dropdown="{ item }">
<UDropdownMenu :items="item.children">
<UButton :icon="item.icon" color="neutral" variant="link" class="p-0.5" />
</UDropdownMenu>
</template>
</UBreadcrumb>
</template>

View File

@@ -1,26 +0,0 @@
<script setup lang="ts">
import type { BreadcrumbItem } from '@nuxt/ui'
const items: BreadcrumbItem[] = [
{
label: 'Home',
to: '/'
},
{
label: 'Components',
to: '/components'
},
{
label: 'Breadcrumb',
to: '/components/breadcrumb'
}
]
</script>
<template>
<UBreadcrumb :items="items">
<template #separator>
<span class="mx-2 text-(--ui-text-muted)">/</span>
</template>
</UBreadcrumb>
</template>

View File

@@ -1,7 +0,0 @@
<template>
<UButtonGroup>
<UBadge color="neutral" variant="outline" size="lg" label="https://" />
<UInput color="neutral" variant="outline" placeholder="www.example.com" />
</UButtonGroup>
</template>

View File

@@ -1,42 +0,0 @@
<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'
const items: DropdownMenuItem[] = [
{
label: 'Team',
icon: 'i-lucide-users'
},
{
label: 'Invite users',
icon: 'i-lucide-user-plus',
children: [
{
label: 'Invite by email',
icon: 'i-lucide-send-horizontal'
},
{
label: 'Invite by link',
icon: 'i-lucide-link'
}
]
},
{
label: 'New team',
icon: 'i-lucide-plus'
}
]
</script>
<template>
<UButtonGroup>
<UButton color="neutral" variant="subtle" label="Settings" />
<UDropdownMenu :items="items">
<UButton
color="neutral"
variant="outline"
icon="i-lucide-chevron-down"
/>
</UDropdownMenu>
</UButtonGroup>
</template>

View File

@@ -1,13 +0,0 @@
<template>
<UButtonGroup>
<UInput color="neutral" variant="outline" placeholder="Enter token" />
<UTooltip text="Copy to clipboard">
<UButton
color="neutral"
variant="subtle"
icon="i-lucide-clipboard"
/>
</UTooltip>
</UButtonGroup>
</template>

View File

@@ -1,11 +0,0 @@
<script setup lang="ts">
async function onClick() {
return new Promise<void>(res => setTimeout(res, 1000))
}
</script>
<template>
<UButton loading-auto @click="onClick">
Button
</UButton>
</template>

View File

@@ -1,23 +0,0 @@
<script setup lang="ts">
const state = reactive({ fullName: '' })
async function onSubmit() {
return new Promise<void>(res => setTimeout(res, 1000))
}
async function validate(data: Partial<typeof state>) {
if (!data.fullName?.length) return [{ name: 'fullName', message: 'Required' }]
return []
}
</script>
<template>
<UForm :state="state" :validate="validate" @submit="onSubmit">
<UFormField name="fullName" label="Full name">
<UInput v-model="state.fullName" />
</UFormField>
<UButton type="submit" class="mt-2" loading-auto>
Submit
</UButton>
</UForm>
</template>

View File

@@ -1,21 +0,0 @@
<script setup lang="ts">
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
const df = new DateFormatter('en-US', {
dateStyle: 'medium'
})
const modelValue = shallowRef(new CalendarDate(2022, 1, 10))
</script>
<template>
<UPopover>
<UButton color="neutral" variant="subtle" icon="i-lucide-calendar">
{{ modelValue ? df.format(modelValue.toDate(getLocalTimeZone())) : 'Select a date' }}
</UButton>
<template #content>
<UCalendar v-model="modelValue" class="p-2" />
</template>
</UPopover>
</template>

View File

@@ -1,35 +0,0 @@
<script setup lang="ts">
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
const df = new DateFormatter('en-US', {
dateStyle: 'medium'
})
const modelValue = shallowRef({
start: new CalendarDate(2022, 1, 20),
end: new CalendarDate(2022, 2, 10)
})
</script>
<template>
<UPopover>
<UButton color="neutral" variant="subtle" icon="i-lucide-calendar">
<template v-if="modelValue.start">
<template v-if="modelValue.end">
{{ df.format(modelValue.start.toDate(getLocalTimeZone())) }} - {{ df.format(modelValue.end.toDate(getLocalTimeZone())) }}
</template>
<template v-else>
{{ df.format(modelValue.start.toDate(getLocalTimeZone())) }}
</template>
</template>
<template v-else>
Pick a date
</template>
</UButton>
<template #content>
<UCalendar v-model="modelValue" class="p-2" :number-of-months="2" range />
</template>
</UPopover>
</template>

View File

@@ -1,17 +0,0 @@
<script setup lang="ts">
import type { DateValue } from '@internationalized/date'
import { CalendarDate } from '@internationalized/date'
const modelValue = shallowRef({
start: new CalendarDate(2022, 1, 1),
end: new CalendarDate(2022, 1, 9)
})
const isDateDisabled = (date: DateValue) => {
return date.day >= 10 && date.day <= 16
}
</script>
<template>
<UCalendar v-model="modelValue" :is-date-disabled="isDateDisabled" range />
</template>

View File

@@ -1,30 +0,0 @@
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'
const modelValue = shallowRef(new CalendarDate(2022, 1, 10))
function getColorByDate(date: Date) {
const isWeekend = date.getDay() % 6 == 0
const isDayMeeting = date.getDay() % 3 == 0
if (isWeekend) {
return undefined
}
if (isDayMeeting) {
return 'error'
}
return 'success'
}
</script>
<template>
<UCalendar v-model="modelValue">
<template #day="{ day }">
<UChip :show="!!getColorByDate(day.toDate('UTC'))" :color="getColorByDate(day.toDate('UTC'))" size="2xs">
{{ day.day }}
</UChip>
</template>
</UCalendar>
</template>

View File

@@ -1,11 +0,0 @@
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'
const modelValue = shallowRef(new CalendarDate(2023, 9, 10))
const minDate = new CalendarDate(2023, 9, 1)
const maxDate = new CalendarDate(2023, 9, 30)
</script>
<template>
<UCalendar v-model="modelValue" :min-value="minDate" :max-value="maxDate" />
</template>

View File

@@ -1,9 +0,0 @@
<script lang="ts" setup>
import { CalendarDate, HebrewCalendar } from '@internationalized/date'
const hebrewDate = shallowRef(new CalendarDate(new HebrewCalendar(), 5781, 1, 1))
</script>
<template>
<UCalendar v-model="hebrewDate" />
</template>

View File

@@ -1,17 +0,0 @@
<script setup lang="ts">
import type { DateValue } from '@internationalized/date'
import { CalendarDate } from '@internationalized/date'
const modelValue = shallowRef({
start: new CalendarDate(2022, 1, 1),
end: new CalendarDate(2022, 1, 9)
})
const isDateUnavailable = (date: DateValue) => {
return date.day >= 10 && date.day <= 16
}
</script>
<template>
<UCalendar v-model="modelValue" :is-date-unavailable="isDateUnavailable" range />
</template>

View File

@@ -1,16 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/640?random=2',
'https://picsum.photos/640/640?random=3',
'https://picsum.photos/640/640?random=4',
'https://picsum.photos/640/640?random=5',
'https://picsum.photos/640/640?random=6'
]
</script>
<template>
<UCarousel v-slot="{ item }" arrows :items="items" class="w-full max-w-xs mx-auto">
<img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,29 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/320?random=2',
'https://picsum.photos/640/640?random=3',
'https://picsum.photos/640/320?random=4',
'https://picsum.photos/640/640?random=5',
'https://picsum.photos/640/320?random=6'
]
</script>
<template>
<UCarousel
v-slot="{ item }"
auto-height
arrows
dots
:items="items"
:ui="{
container: 'transition-[height]',
controls: 'absolute -top-8 inset-x-12',
dots: '-top-7',
dot: 'w-6 h-1'
}"
class="w-full max-w-xs mx-auto"
>
<img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,24 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/468/468?random=1',
'https://picsum.photos/468/468?random=2',
'https://picsum.photos/468/468?random=3',
'https://picsum.photos/468/468?random=4',
'https://picsum.photos/468/468?random=5',
'https://picsum.photos/468/468?random=6'
]
</script>
<template>
<UCarousel
v-slot="{ item }"
loop
dots
arrows
auto-scroll
:items="items"
:ui="{ item: 'basis-1/3' }"
>
<img :src="item" width="234" height="234" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,24 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/468/468?random=1',
'https://picsum.photos/468/468?random=2',
'https://picsum.photos/468/468?random=3',
'https://picsum.photos/468/468?random=4',
'https://picsum.photos/468/468?random=5',
'https://picsum.photos/468/468?random=6'
]
</script>
<template>
<UCarousel
v-slot="{ item }"
loop
arrows
dots
:autoplay="{ delay: 2000 }"
:items="items"
:ui="{ item: 'basis-1/3' }"
>
<img :src="item" width="234" height="234" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,25 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/528/528?random=1',
'https://picsum.photos/528/528?random=2',
'https://picsum.photos/528/528?random=3',
'https://picsum.photos/528/528?random=4',
'https://picsum.photos/528/528?random=5',
'https://picsum.photos/528/528?random=6'
]
</script>
<template>
<UCarousel
v-slot="{ item }"
class-names
arrows
:items="items"
:ui="{
item: 'basis-[70%] transition-opacity [&:not(.is-snapped)]:opacity-10'
}"
class="mx-auto max-w-sm"
>
<img :src="item" width="264" height="264" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,16 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/640?random=2',
'https://picsum.photos/640/640?random=3',
'https://picsum.photos/640/640?random=4',
'https://picsum.photos/640/640?random=5',
'https://picsum.photos/640/640?random=6'
]
</script>
<template>
<UCarousel v-slot="{ item }" dots :items="items" class="w-full max-w-xs mx-auto">
<img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,16 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/640?random=2',
'https://picsum.photos/640/640?random=3',
'https://picsum.photos/640/640?random=4',
'https://picsum.photos/640/640?random=5',
'https://picsum.photos/640/640?random=6'
]
</script>
<template>
<UCarousel v-slot="{ item }" dots :items="items" :ui="{ item: 'basis-1/3' }">
<img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,23 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/640?random=2',
'https://picsum.photos/640/640?random=3',
'https://picsum.photos/640/640?random=4',
'https://picsum.photos/640/640?random=5',
'https://picsum.photos/640/640?random=6'
]
</script>
<template>
<UCarousel
v-slot="{ item }"
fade
arrows
dots
:items="items"
class="w-full max-w-xs mx-auto"
>
<img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,16 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/640?random=2',
'https://picsum.photos/640/640?random=3',
'https://picsum.photos/640/640?random=4',
'https://picsum.photos/640/640?random=5',
'https://picsum.photos/640/640?random=6'
]
</script>
<template>
<UCarousel v-slot="{ item }" :items="items" class="w-full max-w-xs mx-auto">
<img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,16 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/468/468?random=1',
'https://picsum.photos/468/468?random=2',
'https://picsum.photos/468/468?random=3',
'https://picsum.photos/468/468?random=4',
'https://picsum.photos/468/468?random=5',
'https://picsum.photos/468/468?random=6'
]
</script>
<template>
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-1/3' }">
<img :src="item" width="234" height="234" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,22 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/640?random=2',
'https://picsum.photos/640/640?random=3',
'https://picsum.photos/640/640?random=4',
'https://picsum.photos/640/640?random=5',
'https://picsum.photos/640/640?random=6'
]
</script>
<template>
<UCarousel
v-slot="{ item }"
orientation="vertical"
:items="items"
class="w-full max-w-xs mx-auto"
:ui="{ container: 'h-[336px]' }"
>
<img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,23 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/640?random=2',
'https://picsum.photos/640/640?random=3',
'https://picsum.photos/640/640?random=4',
'https://picsum.photos/640/640?random=5',
'https://picsum.photos/640/640?random=6'
]
</script>
<template>
<UCarousel
v-slot="{ item }"
arrows
:prev="{ color: 'primary' }"
:next="{ variant: 'solid' }"
:items="items"
class="w-full max-w-xs mx-auto"
>
<img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,28 +0,0 @@
<script setup lang="ts">
defineProps<{
prevIcon?: string
nextIcon?: string
}>()
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/640?random=2',
'https://picsum.photos/640/640?random=3',
'https://picsum.photos/640/640?random=4',
'https://picsum.photos/640/640?random=5',
'https://picsum.photos/640/640?random=6'
]
</script>
<template>
<UCarousel
v-slot="{ item }"
arrows
:prev-icon="prevIcon"
:next-icon="nextIcon"
:items="items"
class="w-full max-w-xs mx-auto"
>
<img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,22 +0,0 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/468/468?random=1',
'https://picsum.photos/468/468?random=2',
'https://picsum.photos/468/468?random=3',
'https://picsum.photos/468/468?random=4',
'https://picsum.photos/468/468?random=5',
'https://picsum.photos/468/468?random=6'
]
</script>
<template>
<UCarousel
v-slot="{ item }"
loop
wheel-gestures
:items="items"
:ui="{ item: 'basis-1/3' }"
>
<img :src="item" width="234" height="234" class="rounded-lg">
</UCarousel>
</template>

View File

@@ -1,23 +0,0 @@
<script setup lang="ts">
const statuses = ['online', 'away', 'busy', 'offline']
const status = ref(statuses[0])
const color = computed(() => status.value ? { online: 'success', away: 'warning', busy: 'error', offline: 'neutral' }[status.value] as any : 'online')
const show = computed(() => status.value !== 'offline')
// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
setInterval(() => {
if (status.value) {
status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
}
}, 1000)
})
</script>
<template>
<UChip :color="color" :show="show" inset>
<UAvatar src="https://github.com/benjamincanac.png" />
</UChip>
</template>

View File

@@ -1,19 +0,0 @@
<template>
<UCollapsible class="flex flex-col gap-2 w-48">
<UButton
class="group"
label="Open"
color="neutral"
variant="subtle"
trailing-icon="i-lucide-chevron-down"
:ui="{
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
}"
block
/>
<template #content>
<Placeholder class="h-48" />
</template>
</UCollapsible>
</template>

View File

@@ -1,23 +0,0 @@
<script setup lang="ts">
const open = ref(true)
defineShortcuts({
o: () => open.value = !open.value
})
</script>
<template>
<UCollapsible v-model:open="open" class="flex flex-col gap-2 w-48">
<UButton
label="Open"
color="neutral"
variant="subtle"
trailing-icon="i-lucide-chevron-down"
block
/>
<template #content>
<Placeholder class="h-48" />
</template>
</UCollapsible>
</template>

Some files were not shown because too many files have changed in this diff Show More