@vanduo-oss/framework 1.4.0 → 1.4.2

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 (89) hide show
  1. package/README.md +11 -9
  2. package/css/components/affix.css +11 -11
  3. package/css/components/alerts.css +55 -55
  4. package/css/components/avatar.css +62 -62
  5. package/css/components/badges.css +25 -25
  6. package/css/components/breadcrumbs.css +31 -31
  7. package/css/components/bubble.css +40 -40
  8. package/css/components/button-group.css +2 -2
  9. package/css/components/buttons.css +33 -33
  10. package/css/components/cards.css +76 -76
  11. package/css/components/chips.css +27 -27
  12. package/css/components/code-snippet.css +132 -132
  13. package/css/components/collapsible.css +60 -60
  14. package/css/components/collections.css +58 -58
  15. package/css/components/datepicker.css +55 -53
  16. package/css/components/doc-search.css +63 -63
  17. package/css/components/doc-tabs.css +1 -1
  18. package/css/components/draggable.css +69 -69
  19. package/css/components/dropdown.css +48 -48
  20. package/css/components/fab.css +60 -60
  21. package/css/components/flow.css +55 -55
  22. package/css/components/footer.css +52 -52
  23. package/css/components/forms.css +373 -373
  24. package/css/components/image-box.css +39 -39
  25. package/css/components/modals.css +53 -49
  26. package/css/components/music-player.css +150 -150
  27. package/css/components/navbar.css +71 -71
  28. package/css/components/pagination.css +50 -50
  29. package/css/components/preloader.css +18 -18
  30. package/css/components/progress.css +16 -16
  31. package/css/components/rating.css +18 -18
  32. package/css/components/ripple.css +10 -10
  33. package/css/components/sidenav.css +67 -67
  34. package/css/components/skeleton.css +13 -13
  35. package/css/components/spinner.css +30 -30
  36. package/css/components/spotlight.css +27 -27
  37. package/css/components/stepper.css +36 -36
  38. package/css/components/suggest.css +35 -35
  39. package/css/components/tabs.css +46 -46
  40. package/css/components/theme-customizer.css +73 -73
  41. package/css/components/timeline.css +43 -43
  42. package/css/components/timepicker.css +32 -30
  43. package/css/components/toast.css +27 -27
  44. package/css/components/tooltips.css +77 -77
  45. package/css/components/transfer.css +35 -35
  46. package/css/components/tree.css +25 -25
  47. package/css/components/waypoint.css +12 -12
  48. package/css/core/colors.css +610 -610
  49. package/css/core/grid.css +127 -127
  50. package/css/core/helpers.css +338 -338
  51. package/css/core/tokens.css +69 -81
  52. package/css/core/typography.css +91 -91
  53. package/css/effects/morph.css +17 -17
  54. package/css/effects/parallax.css +6 -6
  55. package/css/utilities/color-utilities.css +273 -273
  56. package/css/utilities/media.css +2 -2
  57. package/css/utilities/shadow.css +75 -75
  58. package/css/utilities/table.css +40 -40
  59. package/css/utilities/transitions.css +38 -38
  60. package/css/vanduo.css +1 -2
  61. package/dist/build-info.json +3 -3
  62. package/dist/vanduo.cjs.js +104 -29
  63. package/dist/vanduo.cjs.js.map +2 -2
  64. package/dist/vanduo.cjs.min.js +5 -5
  65. package/dist/vanduo.cjs.min.js.map +3 -3
  66. package/dist/vanduo.css +4042 -4133
  67. package/dist/vanduo.css.map +1 -1
  68. package/dist/vanduo.esm.js +104 -29
  69. package/dist/vanduo.esm.js.map +2 -2
  70. package/dist/vanduo.esm.min.js +5 -5
  71. package/dist/vanduo.esm.min.js.map +3 -3
  72. package/dist/vanduo.js +104 -29
  73. package/dist/vanduo.js.map +2 -2
  74. package/dist/vanduo.min.css +2 -2
  75. package/dist/vanduo.min.css.map +1 -1
  76. package/dist/vanduo.min.js +5 -5
  77. package/dist/vanduo.min.js.map +3 -3
  78. package/js/components/affix.js +2 -2
  79. package/js/components/datepicker.js +51 -4
  80. package/js/components/image-box.js +2 -2
  81. package/js/components/morph.js +1 -1
  82. package/js/components/music-player.js +11 -11
  83. package/js/components/navbar.js +1 -1
  84. package/js/components/preloader.js +1 -1
  85. package/js/components/theme-customizer.js +4 -4
  86. package/js/components/timepicker.js +48 -6
  87. package/js/components/vd-hex.js +8 -10
  88. package/package.json +1 -1
  89. package/css/core/vd-aliases.css +0 -108
package/css/components/tree.css CHANGED
@@ -4,24 +4,24 @@
4
4
  */
5
5
 
6
6
  :root {
7
- --tree-indent: 1.3125rem; /* 21px - fib */
8
- --tree-line-color: var(--vd-border-color, #dee2e6);
9
- --tree-line-width: 1px;
10
- --tree-item-padding: 0.25rem 0.3125rem; /* 4px 5px */
11
- --tree-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);
12
- --tree-icon-size: 1rem;
13
- --tree-toggle-size: 1.125rem;
7
+ --vd-tree-indent: 1.3125rem; /* 21px - fib */
8
+ --vd-tree-line-color: var(--vd-border-color, #dee2e6);
9
+ --vd-tree-line-width: 1px;
10
+ --vd-tree-item-padding: 0.25rem 0.3125rem; /* 4px 5px */
11
+ --vd-tree-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);
12
+ --vd-tree-icon-size: 1rem;
13
+ --vd-tree-toggle-size: 1.125rem;
14
14
  }
15
15
 
16
16
  [data-theme="dark"] {
17
- --tree-line-color: var(--vd-color-gray-600, #6c757d);
18
- --tree-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
17
+ --vd-tree-line-color: var(--vd-color-gray-600, #6c757d);
18
+ --vd-tree-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
19
19
  }
20
20
 
21
21
  @media (prefers-color-scheme: dark) {
22
22
  :root:not([data-theme]) {
23
- --tree-line-color: var(--vd-color-gray-600, #6c757d);
24
- --tree-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
23
+ --vd-tree-line-color: var(--vd-color-gray-600, #6c757d);
24
+ --vd-tree-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
25
25
  }
26
26
  }
27
27
 
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  .vd-tree .vd-tree {
37
- padding-left: var(--tree-indent);
37
+ padding-left: var(--vd-tree-indent);
38
38
  }
39
39
 
40
40
  /* ========== Node ========== */
@@ -47,7 +47,7 @@
47
47
  display: flex;
48
48
  align-items: center;
49
49
  gap: 0.3125rem; /* 5px - fib */
50
- padding: var(--tree-item-padding);
50
+ padding: var(--vd-tree-item-padding);
51
51
  border-radius: 0.25rem;
52
52
  cursor: default;
53
53
  font-size: 0.875rem;
@@ -55,7 +55,7 @@
55
55
  }
56
56
 
57
57
  .vd-tree-node-content:hover {
58
- background: var(--tree-item-hover-bg);
58
+ background: var(--vd-tree-item-hover-bg);
59
59
  }
60
60
 
61
61
  /* ========== Toggle ========== */
@@ -64,8 +64,8 @@
64
64
  display: inline-flex;
65
65
  align-items: center;
66
66
  justify-content: center;
67
- width: var(--tree-toggle-size);
68
- height: var(--tree-toggle-size);
67
+ width: var(--vd-tree-toggle-size);
68
+ height: var(--vd-tree-toggle-size);
69
69
  border: none;
70
70
  background: none;
71
71
  padding: 0;
@@ -86,7 +86,7 @@
86
86
 
87
87
  /* Placeholder for leaf nodes (no children) */
88
88
  .vd-tree-toggle-placeholder {
89
- width: var(--tree-toggle-size);
89
+ width: var(--vd-tree-toggle-size);
90
90
  flex-shrink: 0;
91
91
  }
92
92
 
@@ -100,7 +100,7 @@
100
100
  /* ========== Icon ========== */
101
101
 
102
102
  .vd-tree-icon {
103
- font-size: var(--tree-icon-size);
103
+ font-size: var(--vd-tree-icon-size);
104
104
  flex-shrink: 0;
105
105
  color: var(--vd-text-muted, #6c757d);
106
106
  }
@@ -139,7 +139,7 @@
139
139
  list-style: none;
140
140
  padding: 0;
141
141
  margin: 0;
142
- padding-left: var(--tree-indent);
142
+ padding-left: var(--vd-tree-indent);
143
143
  }
144
144
 
145
145
  .vd-tree-node.is-open > .vd-tree-children {
@@ -156,18 +156,18 @@
156
156
  content: '';
157
157
  position: absolute;
158
158
  top: 0;
159
- left: calc(var(--tree-toggle-size) / 2);
159
+ left: calc(var(--vd-tree-toggle-size) / 2);
160
160
  bottom: 0.75rem;
161
- width: var(--tree-line-width);
162
- background: var(--tree-line-color);
161
+ width: var(--vd-tree-line-width);
162
+ background: var(--vd-tree-line-color);
163
163
  }
164
164
 
165
165
  .vd-tree-lines .vd-tree-children .vd-tree-node::before {
166
166
  content: '';
167
167
  position: absolute;
168
168
  top: 50%;
169
- left: calc(var(--tree-toggle-size) / 2 - var(--tree-indent));
169
+ left: calc(var(--vd-tree-toggle-size) / 2 - var(--vd-tree-indent));
170
170
  width: 0.5rem;
171
- height: var(--tree-line-width);
172
- background: var(--tree-line-color);
171
+ height: var(--vd-tree-line-width);
172
+ background: var(--vd-tree-line-color);
173
173
  }
package/css/components/waypoint.css CHANGED
@@ -6,19 +6,19 @@
6
6
 
7
7
  :root {
8
8
  /* Waypoint active indicator */
9
- --waypoint-active-color: var(--vd-color-primary, #0d6efd);
10
- --waypoint-active-bg: transparent;
11
- --waypoint-active-border-width: 2px;
12
- --waypoint-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
9
+ --vd-waypoint-active-color: var(--vd-color-primary, #0d6efd);
10
+ --vd-waypoint-active-bg: transparent;
11
+ --vd-waypoint-active-border-width: 2px;
12
+ --vd-waypoint-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
13
13
  }
14
14
 
15
15
  [data-theme="dark"] {
16
- --waypoint-active-color: var(--vd-color-primary-light, #6ea8fe);
16
+ --vd-waypoint-active-color: var(--vd-color-primary-light, #6ea8fe);
17
17
  }
18
18
 
19
19
  @media (prefers-color-scheme: dark) {
20
20
  :root:not([data-theme]) {
21
- --waypoint-active-color: var(--vd-color-primary-light, #6ea8fe);
21
+ --vd-waypoint-active-color: var(--vd-color-primary-light, #6ea8fe);
22
22
  }
23
23
  }
24
24
 
@@ -27,21 +27,21 @@
27
27
  [data-vd-waypoint-nav] a.is-active,
28
28
  [data-vd-scrollspy-nav] a.is-active,
29
29
  .vd-waypoint-nav a.is-active {
30
- color: var(--waypoint-active-color);
30
+ color: var(--vd-waypoint-active-color);
31
31
  font-weight: 600;
32
- transition: var(--waypoint-transition);
32
+ transition: var(--vd-waypoint-transition);
33
33
  }
34
34
 
35
35
  /* Sidebar variant: left border indicator */
36
36
  .vd-sidenav [data-vd-waypoint-nav] a.is-active,
37
37
  .vd-waypoint-nav.vd-waypoint-border a.is-active {
38
- border-left: var(--waypoint-active-border-width) solid var(--waypoint-active-color);
39
- padding-left: calc(0.8125rem - var(--waypoint-active-border-width)); /* 13px - border */
38
+ border-left: var(--vd-waypoint-active-border-width) solid var(--vd-waypoint-active-color);
39
+ padding-left: calc(0.8125rem - var(--vd-waypoint-active-border-width)); /* 13px - border */
40
40
  }
41
41
 
42
42
  /* Pill variant */
43
43
  .vd-waypoint-nav.vd-waypoint-pill a.is-active {
44
- background-color: var(--waypoint-active-color);
44
+ background-color: var(--vd-waypoint-active-color);
45
45
  color: #fff;
46
46
  border-radius: 1rem;
47
47
  padding: 0.25rem 0.8125rem; /* 4px 13px */
@@ -49,7 +49,7 @@
49
49
 
50
50
  /* Underline variant (for horizontal navs) */
51
51
  .vd-waypoint-nav.vd-waypoint-underline a.is-active {
52
- border-bottom: var(--waypoint-active-border-width) solid var(--waypoint-active-color);
52
+ border-bottom: var(--vd-waypoint-active-border-width) solid var(--vd-waypoint-active-color);
53
53
  }
54
54
 
55
55
  /* ========== Smooth Scroll Target ========== */