@vanduo-oss/framework 1.3.9 → 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 (119) hide show
  1. package/README.md +87 -42
  2. package/css/components/affix.css +1 -1
  3. package/css/components/alerts.css +40 -40
  4. package/css/components/avatar.css +33 -33
  5. package/css/components/badges.css +42 -42
  6. package/css/components/breadcrumbs.css +5 -5
  7. package/css/components/bubble.css +4 -4
  8. package/css/components/buttons.css +124 -124
  9. package/css/components/cards.css +10 -10
  10. package/css/components/chips.css +28 -28
  11. package/css/components/code-snippet.css +18 -18
  12. package/css/components/collapsible.css +20 -20
  13. package/css/components/collections.css +21 -21
  14. package/css/components/datepicker.css +13 -13
  15. package/css/components/doc-search.css +46 -53
  16. package/css/components/doc-tabs.css +10 -10
  17. package/css/components/draggable.css +34 -34
  18. package/css/components/dropdown.css +14 -14
  19. package/css/components/expanding-cards.css +1 -1
  20. package/css/components/fab.css +7 -7
  21. package/css/components/flow.css +3 -3
  22. package/css/components/footer.css +26 -26
  23. package/css/components/forms.css +95 -83
  24. package/css/components/image-box.css +13 -17
  25. package/css/components/modals.css +8 -8
  26. package/css/components/music-player.css +26 -26
  27. package/css/components/navbar.css +27 -27
  28. package/css/components/pagination.css +15 -15
  29. package/css/components/preloader.css +10 -10
  30. package/css/components/progress.css +8 -8
  31. package/css/components/rating.css +4 -4
  32. package/css/components/sidenav.css +14 -14
  33. package/css/components/skeleton.css +10 -9
  34. package/css/components/spinner.css +10 -10
  35. package/css/components/spotlight.css +7 -7
  36. package/css/components/stepper.css +13 -13
  37. package/css/components/suggest.css +10 -10
  38. package/css/components/tabs.css +22 -22
  39. package/css/components/theme-customizer.css +87 -87
  40. package/css/components/timeline.css +14 -14
  41. package/css/components/timepicker.css +7 -7
  42. package/css/components/toast.css +31 -31
  43. package/css/components/tooltips.css +11 -11
  44. package/css/components/transfer.css +12 -12
  45. package/css/components/tree.css +9 -9
  46. package/css/components/waypoint.css +3 -3
  47. package/css/core/colors.css +34 -34
  48. package/css/core/grid.css +1 -6
  49. package/css/core/helpers.css +11 -11
  50. package/css/core/tokens.css +113 -35
  51. package/css/core/typography.css +14 -12
  52. package/css/core/vd-aliases.css +100 -52
  53. package/css/effects/morph.css +5 -5
  54. package/css/utilities/media.css +2 -2
  55. package/css/utilities/table.css +34 -34
  56. package/css/utilities/transitions.css +22 -10
  57. package/css/vanduo.css +14 -34
  58. package/dist/build-info.json +3 -3
  59. package/dist/vanduo.cjs.js +929 -289
  60. package/dist/vanduo.cjs.js.map +3 -3
  61. package/dist/vanduo.cjs.min.js +7 -7
  62. package/dist/vanduo.cjs.min.js.map +3 -3
  63. package/dist/vanduo.css +7914 -7823
  64. package/dist/vanduo.css.map +1 -1
  65. package/dist/vanduo.esm.js +929 -289
  66. package/dist/vanduo.esm.js.map +3 -3
  67. package/dist/vanduo.esm.min.js +7 -7
  68. package/dist/vanduo.esm.min.js.map +3 -3
  69. package/dist/vanduo.js +929 -289
  70. package/dist/vanduo.js.map +3 -3
  71. package/dist/vanduo.min.css +2 -2
  72. package/dist/vanduo.min.css.map +1 -1
  73. package/dist/vanduo.min.js +7 -7
  74. package/dist/vanduo.min.js.map +3 -3
  75. package/js/components/affix.js +2 -2
  76. package/js/components/bubble.js +3 -3
  77. package/js/components/code-snippet.js +129 -5
  78. package/js/components/collapsible.js +2 -3
  79. package/js/components/datepicker.js +2 -2
  80. package/js/components/doc-search.js +69 -11
  81. package/js/components/draggable.js +4 -4
  82. package/js/components/dropdown.js +2 -3
  83. package/js/components/expanding-cards.js +2 -2
  84. package/js/components/flow.js +2 -2
  85. package/js/components/font-switcher.js +23 -13
  86. package/js/components/glass.js +2 -2
  87. package/js/components/grid.js +19 -8
  88. package/js/components/image-box.js +49 -10
  89. package/js/components/lazy-load.js +81 -9
  90. package/js/components/modals.js +28 -12
  91. package/js/components/morph.js +2 -2
  92. package/js/components/music-player.js +2 -2
  93. package/js/components/navbar.js +2 -2
  94. package/js/components/pagination.js +2 -3
  95. package/js/components/parallax.js +9 -10
  96. package/js/components/preloader.js +14 -5
  97. package/js/components/rating.js +2 -2
  98. package/js/components/ripple.js +2 -2
  99. package/js/components/select.js +2 -3
  100. package/js/components/sidenav.js +43 -14
  101. package/js/components/spotlight.js +2 -2
  102. package/js/components/stepper.js +2 -2
  103. package/js/components/suggest.js +9 -3
  104. package/js/components/tabs.js +2 -2
  105. package/js/components/theme-customizer.js +151 -21
  106. package/js/components/theme-switcher.js +27 -16
  107. package/js/components/timeline.js +41 -12
  108. package/js/components/timepicker.js +2 -2
  109. package/js/components/toast.js +1 -1
  110. package/js/components/tooltips.js +4 -4
  111. package/js/components/transfer.js +2 -2
  112. package/js/components/tree.js +2 -2
  113. package/js/components/validate.js +2 -2
  114. package/js/components/vd-hex.js +12 -6
  115. package/js/components/waypoint.js +2 -2
  116. package/js/utils/helpers.js +7 -4
  117. package/js/utils/lifecycle.js +158 -83
  118. package/js/vanduo.js +203 -34
  119. package/package.json +2 -1
package/css/components/spotlight.css CHANGED
@@ -6,7 +6,7 @@
6
6
  :root {
7
7
  --spotlight-overlay-bg: rgba(0, 0, 0, 0.5);
8
8
  --spotlight-tooltip-bg: var(--card-bg, #fff);
9
- --spotlight-tooltip-color: var(--text-primary, #212529);
9
+ --spotlight-tooltip-color: var(--vd-text-primary, #212529);
10
10
  --spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.15);
11
11
  --spotlight-tooltip-padding: 1.3125rem; /* 21px - fib */
12
12
  --spotlight-tooltip-radius: var(--card-border-radius, var(--btn-border-radius-lg, 0.5rem));
@@ -78,7 +78,7 @@
78
78
 
79
79
  .vd-spotlight-counter {
80
80
  font-size: 0.75rem;
81
- color: var(--text-muted, #6c757d);
81
+ color: var(--vd-text-muted, #6c757d);
82
82
  }
83
83
 
84
84
  .vd-spotlight-actions {
@@ -88,7 +88,7 @@
88
88
 
89
89
  .vd-spotlight-btn {
90
90
  padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */
91
- border: 1px solid var(--border-color, #dee2e6);
91
+ border: 1px solid var(--vd-border-color, #dee2e6);
92
92
  border-radius: var(--btn-border-radius-sm, 0.25rem);
93
93
  background: transparent;
94
94
  cursor: pointer;
@@ -97,17 +97,17 @@
97
97
  }
98
98
 
99
99
  .vd-spotlight-btn:hover {
100
- background: var(--bg-secondary, #f8f9fa);
100
+ background: var(--vd-bg-secondary, #f8f9fa);
101
101
  }
102
102
 
103
103
  .vd-spotlight-btn-primary {
104
- background: var(--color-primary, #0d6efd);
104
+ background: var(--vd-color-primary, #0d6efd);
105
105
  color: #fff;
106
- border-color: var(--color-primary, #0d6efd);
106
+ border-color: var(--vd-color-primary, #0d6efd);
107
107
  }
108
108
 
109
109
  .vd-spotlight-btn-primary:hover {
110
- background: var(--color-primary-dark, #0b5ed7);
110
+ background: var(--vd-color-primary-dark, #0b5ed7);
111
111
  }
112
112
 
113
113
  /* ========== Highlighted Target ========== */
package/css/components/stepper.css CHANGED
@@ -5,12 +5,12 @@
5
5
 
6
6
  :root {
7
7
  /* Stepper Colors */
8
- --stepper-active-color: var(--color-primary, #0d6efd);
9
- --stepper-completed-color: var(--color-success, #198754);
10
- --stepper-error-color: var(--color-danger, #dc3545);
11
- --stepper-pending-color: var(--color-gray-400, #ced4da);
12
- --stepper-text-color: var(--text-primary, #212529);
13
- --stepper-line-color: var(--border-color, #dee2e6);
8
+ --stepper-active-color: var(--vd-color-primary, #0d6efd);
9
+ --stepper-completed-color: var(--vd-color-success, #198754);
10
+ --stepper-error-color: var(--vd-color-danger, #dc3545);
11
+ --stepper-pending-color: var(--vd-color-gray-400, #ced4da);
12
+ --stepper-text-color: var(--vd-text-primary, #212529);
13
+ --stepper-line-color: var(--vd-border-color, #dee2e6);
14
14
 
15
15
  /* Stepper Dimensions (Fibonacci) */
16
16
  --stepper-circle-size: 2.125rem; /* 34px ~ fib */
@@ -20,14 +20,14 @@
20
20
  }
21
21
 
22
22
  [data-theme="dark"] {
23
- --stepper-pending-color: var(--color-gray-600, #6c757d);
24
- --stepper-line-color: var(--color-gray-600, #6c757d);
23
+ --stepper-pending-color: var(--vd-color-gray-600, #6c757d);
24
+ --stepper-line-color: var(--vd-color-gray-600, #6c757d);
25
25
  }
26
26
 
27
27
  @media (prefers-color-scheme: dark) {
28
28
  :root:not([data-theme]) {
29
- --stepper-pending-color: var(--color-gray-600, #6c757d);
30
- --stepper-line-color: var(--color-gray-600, #6c757d);
29
+ --stepper-pending-color: var(--vd-color-gray-600, #6c757d);
30
+ --stepper-line-color: var(--vd-color-gray-600, #6c757d);
31
31
  }
32
32
  }
33
33
 
@@ -70,7 +70,7 @@
70
70
  height: var(--stepper-circle-size);
71
71
  border-radius: 50%;
72
72
  border: var(--stepper-line-width) solid var(--stepper-pending-color);
73
- background: var(--bg-primary, #fff);
73
+ background: var(--vd-bg-primary, #fff);
74
74
  font-weight: 600;
75
75
  font-size: 0.875rem;
76
76
  z-index: 1;
@@ -82,12 +82,12 @@
82
82
  margin-top: var(--stepper-gap);
83
83
  font-size: 0.8125rem;
84
84
  font-weight: 500;
85
- color: var(--text-muted, #6c757d);
85
+ color: var(--vd-text-muted, #6c757d);
86
86
  }
87
87
 
88
88
  .vd-stepper-description {
89
89
  font-size: 0.75rem;
90
- color: var(--text-muted, #6c757d);
90
+ color: var(--vd-text-muted, #6c757d);
91
91
  margin-top: 0.125rem;
92
92
  }
93
93
 
package/css/components/suggest.css CHANGED
@@ -7,12 +7,12 @@
7
7
  :root {
8
8
  /* Suggest Colors */
9
9
  --suggest-bg: var(--card-bg, #fff);
10
- --suggest-border-color: var(--border-color, #dee2e6);
10
+ --suggest-border-color: var(--vd-border-color, #dee2e6);
11
11
  --suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.1); /* 4px 13px - fib */
12
- --suggest-item-hover-bg: var(--bg-secondary, #f8f9fa);
13
- --suggest-item-active-bg: var(--color-primary, #0d6efd);
12
+ --suggest-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);
13
+ --suggest-item-active-bg: var(--vd-color-primary, #0d6efd);
14
14
  --suggest-item-active-color: #fff;
15
- --suggest-highlight-color: var(--color-primary, #0d6efd);
15
+ --suggest-highlight-color: var(--vd-color-primary, #0d6efd);
16
16
 
17
17
  /* Suggest Spacing (Fibonacci) */
18
18
  --suggest-padding: 0.3125rem 0; /* 5px - fib */
@@ -26,16 +26,16 @@
26
26
 
27
27
  [data-theme="dark"] {
28
28
  --suggest-bg: var(--card-bg, #2d2d44);
29
- --suggest-border-color: var(--border-color, #3d3d5c);
30
- --suggest-item-hover-bg: var(--bg-primary, #1a1a2e);
29
+ --suggest-border-color: var(--vd-border-color, #3d3d5c);
30
+ --suggest-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
31
31
  --suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
32
32
  }
33
33
 
34
34
  @media (prefers-color-scheme: dark) {
35
35
  :root:not([data-theme]) {
36
36
  --suggest-bg: var(--card-bg, #2d2d44);
37
- --suggest-border-color: var(--border-color, #3d3d5c);
38
- --suggest-item-hover-bg: var(--bg-primary, #1a1a2e);
37
+ --suggest-border-color: var(--vd-border-color, #3d3d5c);
38
+ --suggest-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
39
39
  --suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
40
40
  }
41
41
  }
@@ -106,7 +106,7 @@
106
106
 
107
107
  .vd-suggest-empty {
108
108
  padding: var(--suggest-item-padding);
109
- color: var(--text-muted, #6c757d);
109
+ color: var(--vd-text-muted, #6c757d);
110
110
  font-style: italic;
111
111
  }
112
112
 
@@ -115,5 +115,5 @@
115
115
  .vd-suggest-loading {
116
116
  padding: var(--suggest-item-padding);
117
117
  text-align: center;
118
- color: var(--text-muted, #6c757d);
118
+ color: var(--vd-text-muted, #6c757d);
119
119
  }
package/css/components/tabs.css CHANGED
@@ -15,22 +15,22 @@
15
15
  --tab-border-width: 2px; /* fib(2) */
16
16
 
17
17
  /* Tab Colors */
18
- --tab-text: var(--text-secondary);
19
- --tab-text-hover: var(--text-primary);
20
- --tab-text-active: var(--color-primary);
21
- --tab-border: var(--border-color);
22
- --tab-border-active: var(--color-primary);
23
- --tab-bg-hover: var(--bg-secondary);
18
+ --tab-text: var(--vd-text-secondary);
19
+ --tab-text-hover: var(--vd-text-primary);
20
+ --tab-text-active: var(--vd-color-primary);
21
+ --tab-border: var(--vd-border-color);
22
+ --tab-border-active: var(--vd-color-primary);
23
+ --tab-bg-hover: var(--vd-bg-secondary);
24
24
  }
25
25
 
26
26
  /* Dark Theme Overrides */
27
27
  [data-theme="dark"] {
28
- --tab-bg-hover: var(--color-gray-800);
28
+ --tab-bg-hover: var(--vd-color-gray-800);
29
29
  }
30
30
 
31
31
  @media (prefers-color-scheme: dark) {
32
32
  :root:not([data-theme]) {
33
- --tab-bg-hover: var(--color-gray-800);
33
+ --tab-bg-hover: var(--vd-color-gray-800);
34
34
  }
35
35
  }
36
36
 
@@ -81,7 +81,7 @@
81
81
  }
82
82
 
83
83
  .vd-tab-link:focus-visible {
84
- outline: 2px solid var(--color-primary);
84
+ outline: 2px solid var(--vd-color-primary);
85
85
  outline-offset: -2px;
86
86
  }
87
87
 
@@ -96,7 +96,7 @@
96
96
  .vd-tab-link.disabled,
97
97
  .vd-tab-link:disabled,
98
98
  .vd-tab-item.disabled .vd-tab-link {
99
- color: var(--text-muted);
99
+ color: var(--vd-text-muted);
100
100
  cursor: not-allowed;
101
101
  pointer-events: none;
102
102
  }
@@ -127,7 +127,7 @@
127
127
 
128
128
  /* Tab Variants - Boxed */
129
129
  .vd-tabs-boxed .vd-tab-list {
130
- background-color: var(--bg-secondary);
130
+ background-color: var(--vd-bg-secondary);
131
131
  padding: 0.25rem;
132
132
  border-radius: var(--btn-border-radius);
133
133
  border-bottom: none;
@@ -140,18 +140,18 @@
140
140
  }
141
141
 
142
142
  .vd-tabs-boxed .vd-tab-link:hover {
143
- background-color: var(--color-gray-200);
143
+ background-color: var(--vd-color-gray-200);
144
144
  }
145
145
 
146
146
  .vd-tabs-boxed .vd-tab-link.is-active,
147
147
  .vd-tabs-boxed .vd-tab-item.is-active .vd-tab-link {
148
- background-color: var(--bg-primary);
149
- color: var(--text-primary);
148
+ background-color: var(--vd-bg-primary);
149
+ color: var(--vd-text-primary);
150
150
  box-shadow: var(--shadow-sm);
151
151
  }
152
152
 
153
153
  [data-theme="dark"] .vd-tabs-boxed .vd-tab-link:hover {
154
- background-color: var(--color-gray-700);
154
+ background-color: var(--vd-color-gray-700);
155
155
  }
156
156
 
157
157
  /* Tab Variants - Pills */
@@ -167,8 +167,8 @@
167
167
 
168
168
  .vd-tabs-pills .vd-tab-link.is-active,
169
169
  .vd-tabs-pills .vd-tab-item.is-active .vd-tab-link {
170
- background-color: var(--color-primary);
171
- color: var(--color-white);
170
+ background-color: var(--vd-color-primary);
171
+ color: var(--vd-color-white);
172
172
  }
173
173
 
174
174
  /* Tab Variants - Bordered */
@@ -187,8 +187,8 @@
187
187
  .vd-tabs-bordered .vd-tab-link.is-active,
188
188
  .vd-tabs-bordered .vd-tab-item.is-active .vd-tab-link {
189
189
  border-color: var(--tab-border);
190
- background-color: var(--bg-primary);
191
- border-bottom-color: var(--bg-primary);
190
+ background-color: var(--vd-bg-primary);
191
+ border-bottom-color: var(--vd-bg-primary);
192
192
  border-radius: var(--btn-border-radius) var(--btn-border-radius) 0 0;
193
193
  }
194
194
 
@@ -299,13 +299,13 @@
299
299
  font-size: 0.75rem;
300
300
  font-weight: var(--font-weight-semibold);
301
301
  line-height: 1;
302
- background-color: var(--color-gray-200);
302
+ background-color: var(--vd-color-gray-200);
303
303
  border-radius: 9999px;
304
304
  }
305
305
 
306
306
  .vd-tab-link.is-active .vd-tab-badge {
307
- background-color: var(--color-primary-alpha-20);
308
- color: var(--color-primary);
307
+ background-color: var(--vd-color-primary-alpha-20);
308
+ color: var(--vd-color-primary);
309
309
  }
310
310
 
311
311
  /* Scrollable Tabs (for many tabs) */