@nuxt/ui 2.9.0 → 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/module.d.mts +270 -2
  2. package/dist/module.d.ts +270 -2
  3. package/dist/module.json +1 -1
  4. package/dist/module.mjs +21 -2
  5. package/dist/runtime/components/data/Table.vue +8 -6
  6. package/dist/runtime/components/data/Table.vue.d.ts +2 -1
  7. package/dist/runtime/components/elements/Accordion.vue +15 -13
  8. package/dist/runtime/components/elements/Accordion.vue.d.ts +5 -2
  9. package/dist/runtime/components/elements/Button.vue.d.ts +2 -2
  10. package/dist/runtime/components/elements/Dropdown.vue +31 -25
  11. package/dist/runtime/components/elements/Dropdown.vue.d.ts +2 -0
  12. package/dist/runtime/components/elements/Meter.vue +166 -0
  13. package/dist/runtime/components/elements/Meter.vue.d.ts +123 -0
  14. package/dist/runtime/components/elements/MeterGroup.d.ts +78 -0
  15. package/dist/runtime/components/elements/MeterGroup.mjs +172 -0
  16. package/dist/runtime/components/elements/Progress.vue +284 -0
  17. package/dist/runtime/components/elements/Progress.vue.d.ts +2 -0
  18. package/dist/runtime/components/forms/Checkbox.vue.d.ts +2 -2
  19. package/dist/runtime/components/forms/Form.vue +32 -7
  20. package/dist/runtime/components/forms/Form.vue.d.ts +2 -1
  21. package/dist/runtime/components/forms/Input.vue +5 -1
  22. package/dist/runtime/components/forms/Input.vue.d.ts +12 -3
  23. package/dist/runtime/components/forms/Radio.vue +10 -9
  24. package/dist/runtime/components/forms/Radio.vue.d.ts +3 -3
  25. package/dist/runtime/components/forms/RadioGroup.vue +136 -0
  26. package/dist/runtime/components/forms/RadioGroup.vue.d.ts +118 -0
  27. package/dist/runtime/components/forms/Range.vue.d.ts +3 -3
  28. package/dist/runtime/components/forms/Select.vue.d.ts +2 -2
  29. package/dist/runtime/components/forms/SelectMenu.vue +62 -57
  30. package/dist/runtime/components/forms/SelectMenu.vue.d.ts +6 -5
  31. package/dist/runtime/components/forms/Textarea.vue +5 -1
  32. package/dist/runtime/components/forms/Textarea.vue.d.ts +11 -2
  33. package/dist/runtime/components/forms/Toggle.vue.d.ts +2 -2
  34. package/dist/runtime/components/layout/Divider.vue +107 -0
  35. package/dist/runtime/components/layout/Divider.vue.d.ts +82 -0
  36. package/dist/runtime/components/navigation/CommandPalette.vue +10 -3
  37. package/dist/runtime/components/navigation/CommandPalette.vue.d.ts +1 -1
  38. package/dist/runtime/components/navigation/Pagination.vue +65 -9
  39. package/dist/runtime/components/navigation/Pagination.vue.d.ts +41 -3
  40. package/dist/runtime/components/navigation/Tabs.vue +1 -1
  41. package/dist/runtime/components/overlays/ContextMenu.vue +7 -2
  42. package/dist/runtime/components/overlays/ContextMenu.vue.d.ts +2 -1
  43. package/dist/runtime/components/overlays/Modal.vue +1 -1
  44. package/dist/runtime/components/overlays/Modal.vue.d.ts +1 -1
  45. package/dist/runtime/components/overlays/Notification.vue +7 -1
  46. package/dist/runtime/components/overlays/Notifications.vue +1 -1
  47. package/dist/runtime/components/overlays/Popover.vue +22 -7
  48. package/dist/runtime/components/overlays/Popover.vue.d.ts +14 -0
  49. package/dist/runtime/components/overlays/Slideover.vue.d.ts +1 -1
  50. package/dist/runtime/components/overlays/Tooltip.vue +16 -10
  51. package/dist/runtime/components/overlays/Tooltip.vue.d.ts +1 -0
  52. package/dist/runtime/composables/useFormGroup.d.ts +3 -3
  53. package/dist/runtime/composables/useFormGroup.mjs +17 -6
  54. package/dist/runtime/composables/usePopper.d.ts +3 -3
  55. package/dist/runtime/composables/usePopper.mjs +7 -1
  56. package/dist/runtime/composables/useUI.d.ts +2 -2
  57. package/dist/runtime/composables/useUI.mjs +2 -2
  58. package/dist/runtime/types/command-palette.d.ts +1 -0
  59. package/dist/runtime/types/form.d.ts +13 -6
  60. package/dist/runtime/types/index.d.ts +2 -0
  61. package/dist/runtime/types/meter.d.ts +5 -0
  62. package/dist/runtime/types/popper.d.ts +1 -0
  63. package/dist/runtime/types/progress.d.ts +4 -0
  64. package/dist/runtime/types/utils.d.ts +1 -1
  65. package/dist/runtime/ui.config.d.ts +263 -0
  66. package/dist/runtime/ui.config.mjs +263 -19
  67. package/dist/types.d.mts +1 -1
  68. package/dist/types.d.ts +1 -1
  69. package/package.json +19 -19
  70. package/dist/runtime/utils/StateEmitter.d.ts +0 -17
  71. package/dist/runtime/utils/StateEmitter.mjs +0 -21
@@ -1,3 +1,11 @@
1
+ const _popperArrow = {
2
+ base: "before:w-2 before:h-2",
3
+ ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-800",
4
+ rounded: "before:rounded-sm",
5
+ background: "before:bg-gray-200 dark:before:bg-gray-800",
6
+ shadow: "before:shadow",
7
+ placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
8
+ };
1
9
  export const table = {
2
10
  wrapper: "relative overflow-x-auto",
3
11
  base: "min-w-full table-fixed",
@@ -240,7 +248,7 @@ export const buttonGroup = {
240
248
  };
241
249
  export const dropdown = {
242
250
  wrapper: "relative inline-flex text-left rtl:text-right",
243
- container: "z-20",
251
+ container: "z-20 group",
244
252
  width: "w-48",
245
253
  height: "",
246
254
  background: "bg-white dark:bg-gray-800",
@@ -281,6 +289,11 @@ export const dropdown = {
281
289
  popper: {
282
290
  placement: "bottom-end",
283
291
  strategy: "fixed"
292
+ },
293
+ arrow: {
294
+ ..._popperArrow,
295
+ ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",
296
+ background: "before:bg-white dark:before:bg-gray-700"
284
297
  }
285
298
  };
286
299
  export const accordion = {
@@ -356,6 +369,167 @@ export const kbd = {
356
369
  size: "sm"
357
370
  }
358
371
  };
372
+ export const progress = {
373
+ wrapper: "w-full flex flex-col gap-2",
374
+ indicator: {
375
+ container: {
376
+ base: "flex flex-row justify-end",
377
+ width: "min-w-fit",
378
+ transition: "transition-all"
379
+ },
380
+ align: "text-end",
381
+ width: "w-fit",
382
+ color: "text-gray-400 dark:text-gray-500",
383
+ size: {
384
+ "2xs": "text-xs",
385
+ xs: "text-xs",
386
+ sm: "text-sm",
387
+ md: "text-sm",
388
+ lg: "text-sm",
389
+ xl: "text-base",
390
+ "2xl": "text-base"
391
+ }
392
+ },
393
+ progress: {
394
+ base: "block appearance-none border-none overflow-hidden",
395
+ width: "w-full [&::-webkit-progress-bar]:w-full",
396
+ size: {
397
+ "2xs": "h-px",
398
+ xs: "h-0.5",
399
+ sm: "h-1",
400
+ md: "h-2",
401
+ lg: "h-3",
402
+ xl: "h-4",
403
+ "2xl": "h-5"
404
+ },
405
+ rounded: "rounded-full [&::-webkit-progress-bar]:rounded-full",
406
+ track: "[&::-webkit-progress-bar]:bg-gray-200 [&::-webkit-progress-bar]:dark:bg-gray-700 [@supports(selector(&::-moz-progress-bar))]:bg-gray-200 [@supports(selector(&::-moz-progress-bar))]:dark:bg-gray-700",
407
+ bar: "[&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:ease-in-out [&::-moz-progress-bar]:rounded-full",
408
+ color: "text-{color}-500 dark:text-{color}-400",
409
+ background: "[&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current",
410
+ indeterminate: {
411
+ base: "indeterminate:relative",
412
+ rounded: "indeterminate:after:rounded-full [&:indeterminate::-webkit-progress-value]:rounded-full [&:indeterminate::-moz-progress-bar]:rounded-full"
413
+ }
414
+ },
415
+ steps: {
416
+ base: "grid grid-cols-1",
417
+ color: "text-{color}-500 dark:text-{color}-400",
418
+ size: {
419
+ "2xs": "text-xs",
420
+ xs: "text-xs",
421
+ sm: "text-sm",
422
+ md: "text-sm",
423
+ lg: "text-sm",
424
+ xl: "text-base",
425
+ "2xl": "text-base"
426
+ }
427
+ },
428
+ step: {
429
+ base: "transition-all opacity-0 truncate row-start-1 col-start-1",
430
+ align: "text-end",
431
+ active: "opacity-100",
432
+ first: "text-gray-500 dark:text-gray-400"
433
+ },
434
+ animation: {
435
+ carousel: "bar-animation-carousel",
436
+ "carousel-inverse": "bar-animation-carousel-inverse",
437
+ swing: "bar-animation-swing",
438
+ elastic: "bar-animation-elastic"
439
+ },
440
+ default: {
441
+ color: "primary",
442
+ size: "md",
443
+ animation: "carousel"
444
+ }
445
+ };
446
+ export const meter = {
447
+ wrapper: "w-full flex flex-col gap-2",
448
+ indicator: {
449
+ container: "min-w-fit transition-all",
450
+ text: "text-gray-400 dark:text-gray-500 text-end",
451
+ size: {
452
+ "2xs": "text-xs",
453
+ xs: "text-xs",
454
+ sm: "text-sm",
455
+ md: "text-sm",
456
+ lg: "text-sm",
457
+ xl: "text-base",
458
+ "2xl": "text-base"
459
+ }
460
+ },
461
+ meter: {
462
+ base: "appearance-none block w-full bg-none overflow-y-hidden",
463
+ background: "bg-gray-200 dark:bg-gray-700",
464
+ color: "text-{color}-500 dark:text-{color}-400",
465
+ ring: "",
466
+ rounded: "rounded-full",
467
+ shadow: "",
468
+ size: {
469
+ "2xs": "h-px",
470
+ xs: "h-0.5",
471
+ sm: "h-1",
472
+ md: "h-2",
473
+ lg: "h-3",
474
+ xl: "h-4",
475
+ "2xl": "h-5"
476
+ },
477
+ appearance: {
478
+ inner: "[&::-webkit-meter-inner-element]:block [&::-webkit-meter-inner-element]:relative [&::-webkit-meter-inner-element]:border-none [&::-webkit-meter-inner-element]:bg-none [&::-webkit-meter-inner-element]:bg-transparent",
479
+ meter: "[&::-webkit-meter-bar]:border-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:bg-transparent",
480
+ bar: "[&::-webkit-meter-optimum-value]:border-none [&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-optimum-value]:bg-current",
481
+ value: "[&::-moz-meter-bar]:border-none [&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:bg-current"
482
+ },
483
+ bar: {
484
+ transition: "[&::-webkit-meter-optimum-value]:transition-all [&::-moz-meter-bar]:transition-all",
485
+ ring: "",
486
+ rounded: "[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full",
487
+ size: {
488
+ "2xs": "[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px",
489
+ xs: "[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5",
490
+ sm: "[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1",
491
+ md: "[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2",
492
+ lg: "[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3",
493
+ xl: "[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4",
494
+ "2xl": "[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5"
495
+ }
496
+ }
497
+ },
498
+ label: {
499
+ base: "flex gap-2 items-center",
500
+ text: "truncate",
501
+ color: "text-{color}-500 dark:text-{color}-400",
502
+ size: {
503
+ "2xs": "text-xs",
504
+ xs: "text-xs",
505
+ sm: "text-sm",
506
+ md: "text-sm",
507
+ lg: "text-sm",
508
+ xl: "text-base",
509
+ "2xl": "text-base"
510
+ }
511
+ },
512
+ color: {
513
+ white: "text-white dark:text-black",
514
+ black: "text-black dark:text-white",
515
+ gray: "text-gray-500 dark:text-gray-400"
516
+ },
517
+ default: {
518
+ size: "md",
519
+ color: "primary"
520
+ }
521
+ };
522
+ export const meterGroup = {
523
+ wrapper: "flex flex-col gap-2 w-full",
524
+ base: "flex flex-row flex-nowrap flex-shrink overflow-hidden",
525
+ background: "bg-gray-200 dark:bg-gray-700",
526
+ transition: "transition-all",
527
+ rounded: "rounded-full",
528
+ shadow: "",
529
+ default: {
530
+ size: "md"
531
+ }
532
+ };
359
533
  export const input = {
360
534
  wrapper: "relative",
361
535
  base: "relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0",
@@ -505,7 +679,7 @@ export const select = {
505
679
  }
506
680
  };
507
681
  export const selectMenu = {
508
- container: "z-20",
682
+ container: "z-20 group",
509
683
  width: "w-full",
510
684
  height: "max-h-60",
511
685
  base: "relative focus:outline-none overflow-y-auto scroll-py-1",
@@ -556,6 +730,18 @@ export const selectMenu = {
556
730
  },
557
731
  default: {
558
732
  selectedIcon: "i-heroicons-check-20-solid"
733
+ },
734
+ arrow: {
735
+ ..._popperArrow,
736
+ ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",
737
+ background: "before:bg-white dark:before:bg-gray-700"
738
+ }
739
+ };
740
+ export const radioGroup = {
741
+ wrapper: "relative flex items-start",
742
+ legend: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1",
743
+ default: {
744
+ color: "primary"
559
745
  }
560
746
  };
561
747
  export const radio = {
@@ -565,9 +751,9 @@ export const radio = {
565
751
  background: "bg-white dark:bg-gray-900",
566
752
  border: "border border-gray-300 dark:border-gray-700",
567
753
  ring: "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
568
- label: "font-medium text-gray-700 dark:text-gray-200",
569
- required: "text-red-500 dark:text-red-400",
570
- help: "text-gray-500 dark:text-gray-400",
754
+ label: "text-sm font-medium text-gray-700 dark:text-gray-200",
755
+ required: "text-sm text-red-500 dark:text-red-400",
756
+ help: "text-sm text-gray-500 dark:text-gray-400",
571
757
  default: {
572
758
  color: "primary"
573
759
  }
@@ -622,9 +808,13 @@ export const range = {
622
808
  rounded: "rounded-s-lg",
623
809
  background: "bg-{color}-500 dark:bg-{color}-400",
624
810
  size: {
811
+ "2xs": "h-px",
812
+ xs: "h-0.5",
625
813
  sm: "h-1",
626
814
  md: "h-2",
627
- lg: "h-3"
815
+ lg: "h-3",
816
+ xl: "h-4",
817
+ "2xl": "h-5"
628
818
  }
629
819
  },
630
820
  thumb: {
@@ -633,9 +823,13 @@ export const range = {
633
823
  background: "[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-900 [&::-moz-range-thumb]:bg-current",
634
824
  ring: "[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current",
635
825
  size: {
826
+ "2xs": "[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]",
827
+ xs: "[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]",
636
828
  sm: "[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
637
829
  md: "[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
638
- lg: "[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1"
830
+ lg: "[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
831
+ xl: "[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
832
+ "2xl": "[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1"
639
833
  }
640
834
  },
641
835
  track: {
@@ -643,15 +837,23 @@ export const range = {
643
837
  background: "[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-range-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-range-track]:dark:bg-gray-700",
644
838
  rounded: "[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg",
645
839
  size: {
840
+ "2xs": "[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px",
841
+ xs: "[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5",
646
842
  sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1",
647
843
  md: "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2",
648
- lg: "[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3"
844
+ lg: "[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3",
845
+ xl: "[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4",
846
+ "2xl": "[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5"
649
847
  }
650
848
  },
651
849
  size: {
850
+ "2xs": "h-1.5",
851
+ xs: "h-2",
652
852
  sm: "h-3",
653
853
  md: "h-4",
654
- lg: "h-5"
854
+ lg: "h-5",
855
+ xl: "h-6",
856
+ "2xl": "h-7"
655
857
  },
656
858
  default: {
657
859
  size: "md",
@@ -691,6 +893,35 @@ export const skeleton = {
691
893
  background: "bg-gray-100 dark:bg-gray-800",
692
894
  rounded: "rounded-md"
693
895
  };
896
+ export const divider = {
897
+ wrapper: {
898
+ base: "flex items-center align-center text-center w-full",
899
+ horizontal: "flex-row",
900
+ vertical: "flex-col"
901
+ },
902
+ container: {
903
+ base: "font-medium text-gray-700 dark:text-gray-200 flex",
904
+ horizontal: "mx-3 whitespace-nowrap",
905
+ vertical: "my-2"
906
+ },
907
+ border: {
908
+ base: "flex border-gray-200 dark:border-gray-800",
909
+ horizontal: "w-full",
910
+ vertical: "h-full",
911
+ size: {
912
+ horizontal: "border-t",
913
+ vertical: "border-s"
914
+ }
915
+ },
916
+ icon: {
917
+ base: "flex-shrink-0 w-5 h-5"
918
+ },
919
+ avatar: {
920
+ base: "flex-shrink-0",
921
+ size: "2xs"
922
+ },
923
+ label: "text-sm"
924
+ };
694
925
  export const verticalNavigation = {
695
926
  wrapper: "relative",
696
927
  base: "group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75",
@@ -797,6 +1028,16 @@ export const pagination = {
797
1028
  inactiveButton: {
798
1029
  color: "white"
799
1030
  },
1031
+ firstButton: {
1032
+ color: "white",
1033
+ class: "rtl:[&_span:first-child]:rotate-180",
1034
+ icon: "i-heroicons-chevron-double-left-20-solid"
1035
+ },
1036
+ lastButton: {
1037
+ color: "white",
1038
+ class: "rtl:[&_span:last-child]:rotate-180",
1039
+ icon: "i-heroicons-chevron-double-right-20-solid"
1040
+ },
800
1041
  prevButton: {
801
1042
  color: "white",
802
1043
  class: "rtl:[&_span:first-child]:rotate-180",
@@ -829,7 +1070,7 @@ export const tabs = {
829
1070
  shadow: "shadow-sm"
830
1071
  },
831
1072
  tab: {
832
- base: "relative inline-flex items-center justify-center flex-shrink-0 w-full whitespace-nowrap ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out",
1073
+ base: "relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out",
833
1074
  background: "",
834
1075
  active: "text-gray-900 dark:text-white",
835
1076
  inactive: "text-gray-500 dark:text-gray-400",
@@ -908,14 +1149,14 @@ export const slideover = {
908
1149
  };
909
1150
  export const tooltip = {
910
1151
  wrapper: "relative inline-flex",
911
- container: "z-20",
1152
+ container: "z-20 group",
912
1153
  width: "max-w-xs",
913
1154
  background: "bg-white dark:bg-gray-900",
914
1155
  color: "text-gray-900 dark:text-white",
915
1156
  shadow: "shadow",
916
1157
  rounded: "rounded",
917
1158
  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
918
- base: "[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate",
1159
+ base: "[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative",
919
1160
  shortcuts: "hidden md:inline-flex flex-shrink-0 gap-0.5",
920
1161
  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
921
1162
  transition: {
@@ -928,17 +1169,18 @@ export const tooltip = {
928
1169
  },
929
1170
  popper: {
930
1171
  strategy: "fixed"
931
- }
1172
+ },
1173
+ arrow: _popperArrow
932
1174
  };
933
1175
  export const popover = {
934
1176
  wrapper: "relative",
935
- container: "z-20",
1177
+ container: "z-20 group",
936
1178
  width: "",
937
1179
  background: "bg-white dark:bg-gray-900",
938
1180
  shadow: "shadow-lg",
939
1181
  rounded: "rounded-md",
940
1182
  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
941
- base: "overflow-hidden focus:outline-none",
1183
+ base: "overflow-hidden focus:outline-none relative",
942
1184
  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
943
1185
  transition: {
944
1186
  enterActiveClass: "transition ease-out duration-200",
@@ -950,17 +1192,18 @@ export const popover = {
950
1192
  },
951
1193
  popper: {
952
1194
  strategy: "fixed"
953
- }
1195
+ },
1196
+ arrow: _popperArrow
954
1197
  };
955
1198
  export const contextMenu = {
956
1199
  wrapper: "relative",
957
- container: "z-20",
1200
+ container: "z-20 group",
958
1201
  width: "",
959
1202
  background: "bg-white dark:bg-gray-900",
960
1203
  shadow: "shadow-lg",
961
1204
  rounded: "rounded-md",
962
1205
  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
963
- base: "overflow-hidden focus:outline-none",
1206
+ base: "overflow-hidden focus:outline-none relative",
964
1207
  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
965
1208
  transition: {
966
1209
  enterActiveClass: "transition ease-out duration-200",
@@ -973,7 +1216,8 @@ export const contextMenu = {
973
1216
  popper: {
974
1217
  placement: "bottom-start",
975
1218
  scroll: false
976
- }
1219
+ },
1220
+ arrow: _popperArrow
977
1221
  };
978
1222
  export const notification = {
979
1223
  wrapper: "w-full pointer-events-auto",
package/dist/types.d.mts CHANGED
@@ -12,4 +12,4 @@ declare module 'nuxt/schema' {
12
12
  }
13
13
 
14
14
 
15
- export { accordion, alert, avatar, avatarGroup, badge, button, buttonGroup, card, checkbox, commandPalette, container, contextMenu, dropdown, formGroup, input, kbd, modal, notification, notifications, pagination, popover, radio, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module'
15
+ export { accordion, alert, avatar, avatarGroup, badge, button, buttonGroup, card, checkbox, commandPalette, container, contextMenu, divider, dropdown, formGroup, input, kbd, meter, meterGroup, modal, notification, notifications, pagination, popover, progress, radio, radioGroup, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module'
package/dist/types.d.ts CHANGED
@@ -12,4 +12,4 @@ declare module 'nuxt/schema' {
12
12
  }
13
13
 
14
14
 
15
- export { accordion, alert, avatar, avatarGroup, badge, button, buttonGroup, card, checkbox, commandPalette, container, contextMenu, dropdown, formGroup, input, kbd, modal, notification, notifications, pagination, popover, radio, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module'
15
+ export { accordion, alert, avatar, avatarGroup, badge, button, buttonGroup, card, checkbox, commandPalette, container, contextMenu, divider, dropdown, formGroup, input, kbd, meter, meterGroup, modal, notification, notifications, pagination, popover, progress, radio, radioGroup, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuxt/ui",
3
- "version": "2.9.0",
3
+ "version": "2.10.0",
4
4
  "repository": "https://github.com/nuxt/ui",
5
5
  "license": "MIT",
6
6
  "exports": {
@@ -18,7 +18,7 @@
18
18
  "node": ">=v16.20.2"
19
19
  },
20
20
  "scripts": {
21
- "build": "nuxt-module-build",
21
+ "build": "nuxt-module-build build",
22
22
  "prepack": "pnpm build",
23
23
  "dev": "nuxi dev docs",
24
24
  "play": "nuxi dev playground",
@@ -26,46 +26,46 @@
26
26
  "lint": "eslint .",
27
27
  "lint:fix": "eslint . --fix",
28
28
  "typecheck": "vue-tsc --noEmit && nuxi typecheck docs",
29
- "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare docs",
29
+ "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare docs",
30
30
  "release": "release-it"
31
31
  },
32
32
  "dependencies": {
33
- "@egoist/tailwindcss-icons": "^1.2.0",
33
+ "@egoist/tailwindcss-icons": "^1.4.0",
34
34
  "@headlessui/tailwindcss": "^0.2.0",
35
35
  "@headlessui/vue": "^1.7.16",
36
- "@iconify-json/heroicons": "^1.1.12",
37
- "@nuxt/kit": "^3.7.4",
36
+ "@iconify-json/heroicons": "^1.1.13",
37
+ "@nuxt/kit": "^3.8.0",
38
38
  "@nuxtjs/color-mode": "^3.3.0",
39
- "@nuxtjs/tailwindcss": "^6.8.0",
39
+ "@nuxtjs/tailwindcss": "^6.8.1",
40
40
  "@popperjs/core": "^2.11.8",
41
41
  "@tailwindcss/aspect-ratio": "^0.4.2",
42
42
  "@tailwindcss/container-queries": "^0.1.1",
43
43
  "@tailwindcss/forms": "^0.5.6",
44
44
  "@tailwindcss/typography": "^0.5.10",
45
- "@vueuse/core": "^10.4.1",
46
- "@vueuse/integrations": "^10.4.1",
47
- "@vueuse/math": "^10.4.1",
48
- "defu": "^6.1.2",
45
+ "@vueuse/core": "^10.5.0",
46
+ "@vueuse/integrations": "^10.5.0",
47
+ "@vueuse/math": "^10.5.0",
48
+ "defu": "^6.1.3",
49
49
  "fuse.js": "^6.6.2",
50
50
  "ohash": "^1.1.3",
51
51
  "pathe": "^1.1.1",
52
52
  "scule": "^1.0.0",
53
53
  "tailwind-merge": "^1.14.0",
54
- "tailwindcss": "^3.3.3"
54
+ "tailwindcss": "^3.3.5"
55
55
  },
56
56
  "devDependencies": {
57
57
  "@nuxt/eslint-config": "^0.2.0",
58
58
  "@nuxt/module-builder": "^0.5.2",
59
59
  "@release-it/conventional-changelog": "^7.0.2",
60
- "eslint": "^8.50.0",
61
- "joi": "^17.10.2",
62
- "nuxt": "^3.7.4",
60
+ "eslint": "^8.52.0",
61
+ "joi": "^17.11.0",
62
+ "nuxt": "^3.8.0",
63
63
  "release-it": "^16.2.1",
64
64
  "typescript": "^5.2.2",
65
65
  "unbuild": "^2.0.0",
66
- "valibot": "^0.17.1",
67
- "vue-tsc": "^1.8.15",
68
- "yup": "^1.3.1",
69
- "zod": "^3.22.2"
66
+ "valibot": "^0.19.0",
67
+ "vue-tsc": "^1.8.21",
68
+ "yup": "^1.3.2",
69
+ "zod": "^3.22.4"
70
70
  }
71
71
  }
@@ -1,17 +0,0 @@
1
- declare const _default: import("vue").DefineComponent<{
2
- open: {
3
- type: BooleanConstructor;
4
- default: boolean;
5
- };
6
- }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "open")[], "close" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
7
- open: {
8
- type: BooleanConstructor;
9
- default: boolean;
10
- };
11
- }>> & {
12
- onClose?: ((...args: any[]) => any) | undefined;
13
- onOpen?: ((...args: any[]) => any) | undefined;
14
- }, {
15
- open: boolean;
16
- }, {}>;
17
- export default _default;
@@ -1,21 +0,0 @@
1
- import { watch, defineComponent } from "vue";
2
- export default defineComponent({
3
- props: {
4
- open: {
5
- type: Boolean,
6
- default: false
7
- }
8
- },
9
- emits: ["open", "close"],
10
- setup(props, { emit }) {
11
- watch(() => props.open, (value) => {
12
- if (value) {
13
- emit("open");
14
- } else {
15
- emit("close");
16
- }
17
- });
18
- return () => {
19
- };
20
- }
21
- });