@robuust-digital/vue-components 1.1.1 → 1.2.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 (16) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/tailwind/base/index.js +22 -0
  3. package/dist/tailwind/components/accordion.js +54 -0
  4. package/dist/tailwind/components/alert.js +102 -134
  5. package/dist/tailwind/components/badge.js +69 -174
  6. package/dist/tailwind/components/button.js +196 -314
  7. package/dist/tailwind/components/checkbox.js +65 -0
  8. package/dist/tailwind/components/drawer.js +83 -79
  9. package/dist/tailwind/components/lightswitch.js +73 -0
  10. package/dist/tailwind/components/modal.js +127 -0
  11. package/dist/tailwind/components/table.js +109 -0
  12. package/dist/tailwind/components/tooltip.js +66 -0
  13. package/dist/tailwind/index.js +17 -1
  14. package/dist/vue-components.es.js +2502 -667
  15. package/dist/vue-components.umd.js +2 -2
  16. package/package.json +5 -3
package/dist/tailwind/components/badge.js CHANGED
@@ -6,218 +6,113 @@
6
6
  export default (theme) => {
7
7
  const customColors = theme('components.badge.custom') || {};
8
8
  const customColorStyles = Object.keys(customColors).reduce((acc, colorName) => {
9
- acc[`&.badge-custom-${colorName}`] = {
9
+ acc[`&.rvc-badge-custom-${colorName}`] = {
10
10
  ...customColors[colorName],
11
11
  };
12
12
  return acc;
13
13
  }, {});
14
14
 
15
15
  return {
16
- '.badge': {
16
+ ':root': {
17
+ // Custom properties
18
+ '--rvc-badge-height': theme('height.8'),
19
+ '--rvc-badge-padding-x': theme('padding.3'),
20
+ '--rvc-badge-padding-y': theme('padding.1.5'),
21
+ '--rvc-badge-font-weight': theme('fontWeight.medium'),
22
+ '--rvc-badge-border-radius': theme('borderRadius.full'),
23
+ '--rvc-badge-font-size': theme('fontSize.base.0'),
24
+ '--rvc-badge-gap': theme('gap.1'),
25
+
26
+ // Default color variables
27
+ '--rvc-badge-bg-color': '#fcffc4',
28
+ '--rvc-badge-color': '#576d07',
29
+ },
30
+
31
+ '.rvc-badge': {
32
+ height: 'var(--rvc-badge-height)',
33
+ paddingTop: 'var(--rvc-badge-padding-y)',
34
+ paddingBottom: 'var(--rvc-badge-padding-y)',
35
+ paddingLeft: 'var(--rvc-badge-padding-x)',
36
+ paddingRight: 'var(--rvc-badge-padding-x)',
37
+ fontWeight: 'var(--rvc-badge-font-weight)',
38
+ borderRadius: 'var(--rvc-badge-border-radius)',
39
+ fontSize: 'var(--rvc-badge-font-size)',
40
+ gap: 'var(--rvc-badge-gap)',
41
+ backgroundColor: 'var(--rvc-badge-bg-color)',
42
+ color: 'var(--rvc-badge-color)',
17
43
  display: 'inline-flex',
18
44
  alignItems: 'center',
19
45
  justifyContent: 'center',
20
46
  textAlign: 'center',
21
47
  position: 'relative',
22
48
  width: 'fit-content',
23
- paddingTop: theme('padding[0.5]'),
24
- paddingBottom: theme('padding[0.5]'),
25
- paddingLeft: theme('padding[2.5]'),
26
- paddingRight: theme('padding[2.5]'),
27
- fontWeight: theme('fontWeight.semibold'),
28
- borderRadius: theme('borderRadius.full'),
29
- borderWidth: theme('borderWidth.DEFAULT'),
30
- borderStyle: 'solid',
31
- fontSize: theme('fontSize.sm.0'),
32
- lineHeight: theme('lineHeight.5'),
33
- gap: theme('gap.1'),
34
49
  whiteSpace: 'nowrap',
35
50
  textDecoration: 'none',
36
51
  ...theme('components.badge'),
37
52
 
38
- '&[type=button], &:where(a.badge)': {
39
- transitionProperty: theme('transitionProperty.colors'),
40
- transitionDuration: theme('transitionDuration.300'),
41
- transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'),
42
- },
43
-
44
53
  // Color variants
45
- '&.badge-primary': {
46
- backgroundColor: theme('colors.lime.300'),
47
- borderColor: theme('colors.lime.600'),
48
- color: theme('colors.lime.900'),
49
- ...theme('components.badge.primary'),
50
-
51
- '&[type=button]:hover, &:where(a.badge):hover': {
52
- backgroundColor: theme('colors.lime.200'),
53
- ...theme('components.badge.primary.hover'),
54
- },
55
- },
56
- '&.badge-primary-soft': {
57
- backgroundColor: theme('colors.lime.100'),
58
- borderColor: theme('colors.lime.300'),
59
- color: theme('colors.lime.500'),
60
- ...theme('components.badge.primary-soft'),
61
-
62
- '&[type=button]:hover, &:where(a.badge):hover': {
63
- backgroundColor: theme('colors.lime.200'),
64
- ...theme('components.badge.primary-soft.hover'),
65
- },
66
- },
67
- '&.badge-secondary': {
68
- backgroundColor: theme('colors.indigo.300'),
69
- borderColor: theme('colors.indigo.600'),
70
- color: theme('colors.indigo.900'),
71
- ...theme('components.badge.secondary'),
72
-
73
- '&[type=button]:hover, &:where(a.badge):hover': {
74
- backgroundColor: theme('colors.indigo.200'),
75
- ...theme('components.badge.secondary.hover'),
76
- },
54
+ '&.rvc-badge-default': {
55
+ ...theme('components.badge.default'),
77
56
  },
78
- '&.badge-secondary-soft': {
79
- backgroundColor: theme('colors.indigo.100'),
80
- borderColor: theme('colors.indigo.300'),
81
- color: theme('colors.indigo.500'),
82
- ...theme('components.badge.secondary-soft'),
83
57
 
84
- '&[type=button]:hover, &:where(a.badge):hover': {
85
- backgroundColor: theme('colors.indigo.200'),
86
- ...theme('components.badge.secondary-hover.hover'),
87
- },
58
+ '&.rvc-badge-gray': {
59
+ '--rvc-badge-bg-color': theme('colors.slate.100'),
60
+ '--rvc-badge-color': theme('colors.slate.700'),
61
+ ...theme('components.badge.gray'),
88
62
  },
89
- '&.badge-tertiary': {
90
- backgroundColor: theme('colors.orange.300'),
91
- borderColor: theme('colors.orange.600'),
92
- color: theme('colors.orange.900'),
93
- ...theme('components.badge.tertiary'),
94
63
 
95
- '&[type=button]:hover, &:where(a.badge):hover': {
96
- backgroundColor: theme('colors.orange.200'),
97
- ...theme('components.badge.tertiary.hover'),
98
- },
64
+ '&.rvc-badge-red': {
65
+ '--rvc-badge-bg-color': theme('colors.red.100'),
66
+ '--rvc-badge-color': theme('colors.red.700'),
67
+ ...theme('components.badge.red'),
99
68
  },
100
- '&.badge-tertiary-soft': {
101
- backgroundColor: theme('colors.orange.100'),
102
- borderColor: theme('colors.orange.300'),
103
- color: theme('colors.orange.500'),
104
- ...theme('components.badge.tertiary-soft'),
105
69
 
106
- '&[type=button]:hover, &:where(a.badge):hover': {
107
- backgroundColor: theme('colors.orange.200'),
108
- ...theme('components.badge.tertiary-soft.hover'),
109
- },
70
+ '&.rvc-badge-yellow': {
71
+ '--rvc-badge-bg-color': theme('colors.yellow.100'),
72
+ '--rvc-badge-color': theme('colors.yellow.700'),
73
+ ...theme('components.badge.yellow'),
110
74
  },
111
- '&.badge-danger': {
112
- backgroundColor: theme('colors.red.300'),
113
- borderColor: theme('colors.red.600'),
114
- color: theme('colors.red.900'),
115
- ...theme('components.badge.danger'),
116
75
 
117
- '&[type=button]:hover, &:where(a.badge):hover': {
118
- backgroundColor: theme('colors.red.200'),
119
- ...theme('components.badge.danger.hover'),
120
- },
76
+ '&.rvc-badge-green': {
77
+ '--rvc-badge-bg-color': theme('colors.green.100'),
78
+ '--rvc-badge-color': theme('colors.green.700'),
79
+ ...theme('components.badge.green'),
121
80
  },
122
- '&.badge-danger-soft': {
123
- backgroundColor: theme('colors.red.100'),
124
- borderColor: theme('colors.red.300'),
125
- color: theme('colors.red.500'),
126
- ...theme('components.badge.danger-soft'),
127
81
 
128
- '&[type=button]:hover, &:where(a.badge):hover': {
129
- backgroundColor: theme('colors.red.200'),
130
- ...theme('components.badge.danger-soft.hover'),
131
- },
82
+ '&.rvc-badge-blue': {
83
+ '--rvc-badge-bg-color': theme('colors.blue.100'),
84
+ '--rvc-badge-color': theme('colors.blue.700'),
85
+ ...theme('components.badge.blue'),
132
86
  },
133
- '&.badge-warning': {
134
- backgroundColor: theme('colors.yellow.300'),
135
- borderColor: theme('colors.yellow.600'),
136
- color: theme('colors.yellow.900'),
137
- ...theme('components.badge.warning'),
138
87
 
139
- '&[type=button]:hover, &:where(a.badge):hover': {
140
- backgroundColor: theme('colors.yellow.200'),
141
- ...theme('components.badge.warning.hover'),
142
- },
88
+ '&.rvc-badge-violet': {
89
+ '--rvc-badge-bg-color': theme('colors.violet.100'),
90
+ '--rvc-badge-color': theme('colors.violet.700'),
91
+ ...theme('components.badge.violet'),
143
92
  },
144
- '&.badge-warning-soft': {
145
- backgroundColor: theme('colors.yellow.100'),
146
- borderColor: theme('colors.yellow.300'),
147
- color: theme('colors.yellow.500'),
148
- ...theme('components.badge.warning-soft'),
149
93
 
150
- '&[type=button]:hover, &:where(a.badge):hover': {
151
- backgroundColor: theme('colors.yellow.200'),
152
- ...theme('components.badge.warning-soft.hover'),
153
- },
94
+ '&.rvc-badge-purple': {
95
+ '--rvc-badge-bg-color': theme('colors.purple.100'),
96
+ '--rvc-badge-color': theme('colors.purple.700'),
97
+ ...theme('components.badge.purple'),
154
98
  },
155
- '&.badge-success': {
156
- backgroundColor: theme('colors.green.300'),
157
- borderColor: theme('colors.green.600'),
158
- color: theme('colors.green.900'),
159
- ...theme('components.badge.success'),
160
99
 
161
- '&[type=button]:hover, &:where(a.badge):hover': {
162
- backgroundColor: theme('colors.green.200'),
163
- ...theme('components.badge.success.hover'),
164
- },
100
+ '&.rvc-badge-pink': {
101
+ '--rvc-badge-bg-color': theme('colors.pink.100'),
102
+ '--rvc-badge-color': theme('colors.pink.700'),
103
+ ...theme('components.badge.pink'),
165
104
  },
166
- '&.badge-success-soft': {
167
- backgroundColor: theme('colors.green.100'),
168
- borderColor: theme('colors.green.300'),
169
- color: theme('colors.green.500'),
170
- ...theme('components.badge.success-soft'),
171
105
 
172
- '&[type=button]:hover, &:where(a.badge):hover': {
173
- backgroundColor: theme('colors.green.200'),
174
- ...theme('components.badge.success-soft.hover'),
175
- },
176
- },
177
- '&.badge-light': {
178
- backgroundColor: theme('colors.stone.100'),
179
- borderColor: theme('colors.stone.500'),
180
- color: theme('colors.stone.700'),
181
- ...theme('components.badge.light'),
182
-
183
- '&[type=button]:hover, &:where(a.badge):hover': {
184
- backgroundColor: theme('colors.stone.200'),
185
- ...theme('components.badge.light.hover'),
186
- },
187
- },
188
- '&.badge-dark': {
189
- backgroundColor: theme('colors.stone.800'),
190
- borderColor: theme('colors.stone.500'),
191
- color: theme('colors.stone.100'),
192
- ...theme('components.badge.dark'),
193
-
194
- '&[type=button]:hover, &:where(a.badge):hover': {
195
- backgroundColor: theme('colors.stone.700'),
196
- ...theme('components.badge.dark.hover'),
197
- },
198
- },
199
- '&.badge-clear': {
200
- backgroundColor: theme('colors.transparent'),
201
- color: theme('colors.stone.800'),
202
- borderColor: theme('colors.transparent'),
203
- ...theme('components.badge.clear'),
204
-
205
- '&[type=button]:hover, &:where(a.badge):hover': {
206
- color: theme('colors.stone.700'),
207
- ...theme('components.badge.clear.hover'),
208
- },
209
- },
210
106
  ...customColorStyles,
211
107
 
212
108
  // Size variants
213
- '&.badge-lg': {
214
- paddingTop: theme('padding[1.5]'),
215
- paddingRight: theme('padding.4'),
216
- paddingBottom: theme('padding[1.5]'),
217
- paddingLeft: theme('padding.4'),
218
- fontSize: theme('fontSize.base.0'),
219
- gap: theme('gap.2'),
220
- ...theme('components.badge.lg'),
109
+ '&.rvc-badge-sm': {
110
+ '--rvc-badge-height': theme('height.6'),
111
+ '--rvc-badge-padding-x': theme('padding.2'),
112
+ '--rvc-badge-padding-y': theme('padding.1'),
113
+ '--rvc-badge-font-size': theme('fontSize.sm.0'),
114
+
115
+ ...theme('components.badge.sm'),
221
116
  },
222
117
  },
223
118
  };