vanilla-jui 1.3.10 → 1.4.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 (90) hide show
  1. package/dist/index.d.ts +2927 -0
  2. package/dist/index.js +1 -1
  3. package/dist/index.umd.js +1 -1
  4. package/dist/style.css +1 -1
  5. package/package.json +4 -3
  6. package/src/components/accordion.ts +522 -0
  7. package/src/components/drop.ts +497 -0
  8. package/src/components/flow.ts +1579 -0
  9. package/src/components/form.ts +953 -0
  10. package/src/components/{icons.js → icons.ts} +24 -11
  11. package/src/components/menu.ts +615 -0
  12. package/src/components/{modal.js → modal.ts} +560 -237
  13. package/src/components/offcanvas.ts +496 -0
  14. package/src/components/{pagination.js → pagination.ts} +251 -76
  15. package/src/components/parabola.ts +335 -0
  16. package/src/components/{sticky.js → sticky.ts} +123 -98
  17. package/src/components/{swiper.js → swiper.ts} +510 -232
  18. package/src/components/tabs.ts +984 -0
  19. package/src/components/theme.ts +437 -0
  20. package/src/components/toast.ts +371 -0
  21. package/src/components/toc.ts +385 -0
  22. package/src/components/tooltip.ts +179 -0
  23. package/src/components/validator.ts +596 -0
  24. package/src/core/{Component.js → Component.ts} +134 -27
  25. package/src/css/accordion.css +2 -2
  26. package/src/css/animation.css +31 -1
  27. package/src/css/breadcrumb.css +1 -1
  28. package/src/css/button.css +5 -5
  29. package/src/css/card.css +7 -7
  30. package/src/css/color.css +865 -1028
  31. package/src/css/color_p3.css +871 -1036
  32. package/src/css/components.css +1 -0
  33. package/src/css/drop.css +1 -1
  34. package/src/css/flow.css +1 -1
  35. package/src/css/form.css +21 -21
  36. package/src/css/gradient.css +17 -4
  37. package/src/css/icon.css +17 -1
  38. package/src/css/index.css +3 -3
  39. package/src/css/layout.css +1 -1
  40. package/src/css/menu.css +27 -27
  41. package/src/css/modal.css +10 -27
  42. package/src/css/offcanvas.css +2 -2
  43. package/src/css/pagination.css +1 -1
  44. package/src/css/popup.css +2 -2
  45. package/src/css/swiper.css +12 -12
  46. package/src/css/tabs.css +3 -2
  47. package/src/css/tag.css +3 -4
  48. package/src/css/theme-palette.css +6 -6
  49. package/src/css/tip.css +1 -1
  50. package/src/css/toast.css +8 -8
  51. package/src/css/tokens.css +197 -226
  52. package/src/css/toolbar.css +3 -3
  53. package/src/css/tooltip.css +1 -1
  54. package/src/index.ts +37 -0
  55. package/src/locales/{index.js → index.ts} +1 -2
  56. package/src/types.d.ts +1 -0
  57. package/src/utilities/browser.ts +131 -0
  58. package/src/utilities/cache.ts +57 -0
  59. package/src/utilities/core.ts +614 -0
  60. package/src/utilities/dom.ts +468 -0
  61. package/src/utilities/events.ts +106 -0
  62. package/src/utilities/http.ts +35 -0
  63. package/src/utilities/storage.ts +46 -0
  64. package/src/components/accordion.js +0 -373
  65. package/src/components/drop.js +0 -437
  66. package/src/components/flow.js +0 -1133
  67. package/src/components/form.js +0 -585
  68. package/src/components/menu.js +0 -422
  69. package/src/components/offcanvas.js +0 -332
  70. package/src/components/parabola.js +0 -295
  71. package/src/components/tabs.js +0 -746
  72. package/src/components/theme.js +0 -353
  73. package/src/components/toast.js +0 -329
  74. package/src/components/toc.js +0 -226
  75. package/src/components/tooltip.js +0 -86
  76. package/src/components/validator.js +0 -586
  77. package/src/css/toast.min.css +0 -1
  78. package/src/index.js +0 -45
  79. package/src/locales/index.min.js +0 -1
  80. package/src/utilities/browser.js +0 -111
  81. package/src/utilities/cache.js +0 -159
  82. package/src/utilities/core.js +0 -502
  83. package/src/utilities/debug.js +0 -103
  84. package/src/utilities/dom.js +0 -313
  85. package/src/utilities/events.js +0 -69
  86. package/src/utilities/http.js +0 -30
  87. package/src/utilities/legacy-dom.js +0 -179
  88. package/src/utilities/storage.js +0 -46
  89. /package/src/{components/components.js → css/themes/index.css} +0 -0
  90. /package/src/icons/{index.js → index.ts} +0 -0
package/src/css/tag.css CHANGED
@@ -5,20 +5,19 @@
5
5
  align-items: center;
6
6
  gap: var(--tag-gap, var(--space));
7
7
  padding: 0 var(--tag-padding, calc(var(--space) * 1.5));
8
- height: var(--tag-height, calc(var(--space) * 6));
8
+ height: var(--tag-height, var(--el-height-xs));
9
9
  line-height: var(--tag-line-height, var(--line-height-self));
10
10
  font-size: var(--tag-font-size, var(--font-size-sm));
11
11
  font-weight: var(--font-normal);
12
12
  border-radius: var(--tag-radius, var(--radius-md));
13
13
  border: 1px solid var(--tag-border-color, var(--ui-border));
14
14
  color: var(--tag-foreground, var(--ui-fg));
15
- background-color: var(--tag-background, var(--ui-bg));
15
+ background: var(--tag-background, var(--ui-bg));
16
16
  box-shadow: var(--tag-box-shadow, var(--shadow-sm));
17
17
  }
18
18
 
19
19
  .j-font-md .j-tag {
20
- --tag-padding: calc(var(--space) * 2);
21
- --tag-height: calc(var(--space) * 8);
20
+ --tag-padding: var(--s2);
22
21
  }
23
22
 
24
23
  .j-tag.is-contrast {
package/src/css/theme-palette.css CHANGED
@@ -1,22 +1,22 @@
1
1
  @layer components {
2
2
  .j-theme-palette {
3
- padding: var(--palette-padding, calc(var(--space) * 4));
3
+ padding: var(--palette-padding, var(--s4));
4
4
  }
5
5
 
6
6
  .j-theme-palette>h3 {
7
- margin: var(--palette-title-margin, calc(var(--space) * 2) 0);
7
+ margin: var(--palette-title-margin, var(--s2) 0);
8
8
  }
9
9
 
10
10
  .j-theme-palette .palette-container {
11
11
  display: flex;
12
12
  flex-direction: column;
13
- gap: var(--palette-container-gap, calc(var(--space) * 4));
13
+ gap: var(--palette-container-gap, var(--s4));
14
14
  }
15
15
 
16
16
  .j-theme-palette .palette-container .palette-item {
17
17
  display: flex;
18
18
  flex-direction: column;
19
- gap: var(--palette-item-gap, calc(var(--space) * 2));
19
+ gap: var(--palette-item-gap, var(--s2));
20
20
  }
21
21
 
22
22
  .j-theme-palette .palette-container .palette-item .item-title {
@@ -33,8 +33,8 @@
33
33
  }
34
34
 
35
35
  .j-theme-palette .palette-container .palette-item .items>button {
36
- padding-left: calc(var(--space) * 2);
37
- padding-right: calc(var(--space) * 2);
36
+ padding-left: var(--s2);
37
+ padding-right: var(--s2);
38
38
  min-width: 0;
39
39
  overflow: hidden;
40
40
  }
package/src/css/tip.css CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  .j-tip:has(.tip-icon) {
22
22
  column-gap: calc(var(--space, 0.25rem) * 3);
23
- grid-template-columns: calc(var(--space) * 4) 1fr;
23
+ grid-template-columns: var(--s4) 1fr;
24
24
  }
25
25
 
26
26
  .j-font-md .j-tip:has(.tip-icon) {
package/src/css/toast.css CHANGED
@@ -1,12 +1,12 @@
1
1
  @layer components {
2
2
  .j-toast-container {
3
3
  position: fixed;
4
- top: var(--toast-container-offset, calc(var(--space) * 2));
5
- right: var(--toast-container-offset, calc(var(--space) * 2));
6
- z-index: var(--z-index-toast);
4
+ top: var(--toast-container-offset, var(--s2));
5
+ right: var(--toast-container-offset, var(--s2));
6
+ z-index: var(--z-toast);
7
7
  display: flex;
8
8
  flex-direction: column;
9
- gap: var(--toast-container-gap, calc(var(--space) * 2));
9
+ gap: var(--toast-container-gap, var(--s2));
10
10
  align-items: center;
11
11
  left: 50%;
12
12
  transform: translateX(-50%);
@@ -16,7 +16,7 @@
16
16
  .j-toast {
17
17
  display: flex;
18
18
  align-items: center;
19
- padding: var(--toast-padding, calc(var(--space) * 3) calc(var(--space) * 4));
19
+ padding: var(--toast-padding, var(--s3) var(--s4));
20
20
  border-radius: var(--toast-border-radius, var(--radius-md));
21
21
  box-shadow: var(--toast-box-shadow, var(--shadow-md));
22
22
  font-size: var(--toast-font-size, var(--font-size-md));
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
  .j-toast .toast-icon {
48
- margin-right: calc(var(--space) * 2);
48
+ margin-right: var(--s2);
49
49
  width: var(--toast-icon-size, var(--font-size-lg));
50
50
  }
51
51
 
@@ -112,13 +112,13 @@
112
112
  transform: translate(-50%, -50%);
113
113
  transition: opacity var(--speed-sm) ease-in-out;
114
114
  opacity: 0;
115
- z-index: var(--z-index-toast);
115
+ z-index: var(--z-toast);
116
116
  font-size: var(--toast-lite-font-size, var(--font-size-md));
117
117
  text-align: center;
118
118
  color: var(--toast-lite-color, var(--ui-bg));
119
119
  background: var(--toast-lite-background, var(--ui-fg));
120
120
  border-radius: var(--toast-lite-border-radius, var(--radius-md));
121
- padding: var(--toast-lite-padding, calc(var(--space) * 2) calc(var(--space) * 3));
121
+ padding: var(--toast-lite-padding, var(--s2) var(--s3));
122
122
  max-width: var(--toast-lite-max-width, calc(var(--screen-sm) / 2));
123
123
  user-select: none;
124
124
  pointer-events: none;