@imaginario27/air-ui-ds 1.7.2 → 1.9.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 (13) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/assets/css/main.css +12 -2
  3. package/assets/css/theme/ui-theme.css +20 -5
  4. package/components/buttons/ActionButton.vue +2 -2
  5. package/components/buttons/ActionIconButton.vue +2 -2
  6. package/components/dropzone/Dropzone.vue +1061 -0
  7. package/components/forms/fields/FileUploadField.vue +262 -114
  8. package/components/forms/fields/SliderField.vue +241 -640
  9. package/components/sliders/Slider.vue +557 -0
  10. package/models/enums/formFields.ts +17 -0
  11. package/models/enums/sliders.ts +7 -0
  12. package/models/types/uploads.ts +7 -0
  13. package/package.json +1 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,28 @@ All notable changes to this package are documented in this file.
5
5
  Historical releases were reconstructed from git history (GitHub repository) and npm publish dates.
6
6
  Future releases will include detailed entries generated with Changesets.
7
7
 
8
+ ## 1.8.0 - 2026-03-28
9
+
10
+ Release type: minor.
11
+ Commits found in range: 1.
12
+
13
+ ### Added
14
+
15
+ 1. add Slider and SliderField components ([5454fba](https://github.com/imaginario27/air-ui/commit/5454fba3558ddb98172fed4805def34d0bf1aeed))
16
+
17
+ - Package: @imaginario27/air-ui-ds.
18
+
19
+ ## 1.7.2 - 2026-03-25
20
+
21
+ Release type: patch.
22
+ Commits found in range: 1.
23
+
24
+ ### Fixed
25
+
26
+ 1. fix disable state for link types in ActionButton and ActionIconButton ([cd538d7](https://github.com/imaginario27/air-ui/commit/cd538d7722d6c68da6180cc48799b5ae168e1886))
27
+
28
+ - Package: @imaginario27/air-ui-ds.
29
+
8
30
  ## 1.7.1 - 2026-03-25
9
31
 
10
32
  Release type: patch.
package/assets/css/main.css CHANGED
@@ -1,8 +1,10 @@
1
1
  @import "tailwindcss";
2
+ @source "../../node_modules/@imaginario27/air-ui-ds";
3
+ @source "../../node_modules/@imaginario27/air-ui-utils";
4
+
2
5
  @import "./theme/primitives.css";
3
6
  @import "./theme/colors.css";
4
7
  @import "./theme/ui-theme.css";
5
- @import "./defaults.css";
6
8
 
7
9
  @theme {
8
10
  /* Disables Tailwind default colors */
@@ -29,8 +31,8 @@
29
31
  --color-background-neutral-filled-transparent: var(--color-background-neutral-filled-transparent);
30
32
  --color-background-neutral-hover: var(--color-background-neutral-hover);
31
33
  --color-background-neutral-hover-subtle: var(--color-background-neutral-hover-subtle);
32
- --color-background-neutral-subtler: var(--color-background-neutral-subtler);
33
34
  --color-background-neutral-subtle: var(--color-background-neutral-subtle);
35
+ --color-background-neutral-subtler: var(--color-background-neutral-subtler);
34
36
  --color-background-neutral-subtlest: var(--color-background-neutral-subtlest);
35
37
  --color-background-neutral-subtlest-on-container-surface: var(--color-background-neutral-subtlest-on-container-surface);
36
38
  --color-background-neutral-filled-default: var(--color-background-neutral-filled-default);
@@ -57,15 +59,20 @@
57
59
  --color-background-warning-subtler: var(--color-background-warning-subtler);
58
60
  --color-background-warning-subtlest: var(--color-background-warning-subtlest);
59
61
  --color-border-danger: var(--color-border-danger);
62
+ --color-border-danger-bold: var(--color-border-danger-bold);
60
63
  --color-border-default: var(--color-border-default);
61
64
  --color-border-error: var(--color-border-error);
62
65
  --color-border-inactive: var(--color-border-inactive);
63
66
  --color-border-info: var(--color-border-info);
67
+ --color-border-info-bold: var(--color-border-info-bold);
64
68
  --color-border-secondary-brand: var(--color-border-secondary-brand);
65
69
  --color-border-success: var(--color-border-success);
70
+ --color-border-success-bold: var(--color-border-success-bold);
66
71
  --color-border-warning: var(--color-border-warning);
72
+ --color-border-warning-bold: var(--color-border-warning-bold);
67
73
  --color-border-delete-default: var(--color-border-delete-default);
68
74
  --color-border-delete-subtle: var(--color-border-delete-subtle);
75
+ --color-border-neutral-bold: var(--color-border-neutral-bold);
69
76
  --color-border-neutral-disabled: var(--color-border-neutral-disabled);
70
77
  --color-border-neutral-hover: var(--color-border-neutral-hover);
71
78
  --color-border-neutral-on-disabled-bg: var(--color-border-neutral-on-disabled-bg);
@@ -75,6 +82,9 @@
75
82
  --color-border-primary-brand-active: var(--color-border-primary-brand-active);
76
83
  --color-border-primary-brand-default: var(--color-border-primary-brand-default);
77
84
  --color-border-primary-brand-hover: var(--color-border-primary-brand-hover);
85
+ --color-border-secondary-brand-active: var(--color-border-secondary-brand-active);
86
+ --color-border-secondary-brand-default: var(--color-border-secondary-brand-default);
87
+ --color-border-secondary-brand-hover: var(--color-border-secondary-brand-hover);
78
88
  --color-chart-variant-five: var(--color-chart-variant-five);
79
89
  --color-chart-variant-four: var(--color-chart-variant-four);
80
90
  --color-chart-variant-one: var(--color-chart-variant-one);
package/assets/css/theme/ui-theme.css CHANGED
@@ -21,8 +21,8 @@
21
21
  --color-background-neutral-filled-transparent: #182953d9;
22
22
  --color-background-neutral-hover: var(--color-theme-neutral-100);
23
23
  --color-background-neutral-hover-subtle: var(--color-theme-neutral-100);
24
- --color-background-neutral-subtler: var(--color-theme-neutral-100);
25
24
  --color-background-neutral-subtle: var(--color-theme-neutral-200);
25
+ --color-background-neutral-subtler: var(--color-theme-neutral-100);
26
26
  --color-background-neutral-subtlest: var(--color-theme-neutral-50);
27
27
  --color-background-neutral-subtlest-on-container-surface: var(--color-theme-neutral-50);
28
28
  --color-background-neutral-filled-default: var(--color-theme-neutral-950);
@@ -49,15 +49,20 @@
49
49
  --color-background-warning-subtler: var(--color-theme-warning-100);
50
50
  --color-background-warning-subtlest: var(--color-theme-warning-50);
51
51
  --color-border-danger: var(--color-theme-danger-300);
52
+ --color-border-danger-bold: var(--color-theme-danger-700);
52
53
  --color-border-default: var(--color-theme-neutral-200);
53
54
  --color-border-error: var(--color-theme-danger-700);
54
55
  --color-border-inactive: var(--color-theme-neutral-200);
55
56
  --color-border-info: var(--color-theme-info-300);
57
+ --color-border-info-bold: var(--color-theme-info-700);
56
58
  --color-border-secondary-brand: var(--color-theme-secondary-brand-700);
57
59
  --color-border-success: var(--color-theme-success-300);
60
+ --color-border-success-bold: var(--color-theme-success-700);
58
61
  --color-border-warning: var(--color-theme-warning-300);
62
+ --color-border-warning-bold: var(--color-theme-warning-700);
59
63
  --color-border-delete-default: var(--color-theme-danger-600);
60
64
  --color-border-delete-subtle: var(--color-theme-danger-200);
65
+ --color-border-neutral-bold: var(--color-theme-neutral-500);
61
66
  --color-border-neutral-disabled: var(--color-theme-neutral-200);
62
67
  --color-border-neutral-hover: var(--color-theme-neutral-400);
63
68
  --color-border-neutral-on-disabled-bg: var(--color-theme-neutral-300);
@@ -67,6 +72,9 @@
67
72
  --color-border-primary-brand-active: var(--color-theme-primary-brand-600);
68
73
  --color-border-primary-brand-default: var(--color-theme-primary-brand-700);
69
74
  --color-border-primary-brand-hover: var(--color-theme-primary-brand-500);
75
+ --color-border-secondary-brand-active: var(--color-theme-secondary-brand-600);
76
+ --color-border-secondary-brand-default: var(--color-theme-secondary-brand-600);
77
+ --color-border-secondary-brand-hover: var(--color-theme-secondary-brand-500);
70
78
  --color-chart-variant-five: #e6bb45;
71
79
  --color-chart-variant-four: #e65a45;
72
80
  --color-chart-variant-one: #5f45e6;
@@ -90,7 +98,7 @@
90
98
  --color-icon-neutral-inactive: var(--color-theme-neutral-400);
91
99
  --color-icon-neutral-on-filled-bg: var(--color-theme-neutral-white);
92
100
  --color-icon-neutral-on-filled-secondary-brand-bg: var(--color-theme-neutral-white);
93
- --color-icon-neutral-on-monochrome-active-bg: var(--color-theme-neutral-700);
101
+ --color-icon-neutral-on-monochrome-active-bg: var(--color-theme-neutral-950);
94
102
  --color-icon-neutral-on-monochrome-hover-bg: var(--color-theme-neutral-600);
95
103
  --color-icon-neutral-on-neutral-bg: var(--color-theme-neutral-950);
96
104
  --color-icon-neutral-on-primary-brand-soft-bg: var(--color-theme-neutral-400);
@@ -118,7 +126,7 @@
118
126
  --color-text-neutral-disabled: var(--color-theme-neutral-400);
119
127
  --color-text-neutral-inactive: var(--color-theme-neutral-400);
120
128
  --color-text-neutral-on-filled: var(--color-theme-neutral-white);
121
- --color-text-neutral-on-monochrome-active-bg: var(--color-theme-neutral-700);
129
+ --color-text-neutral-on-monochrome-active-bg: var(--color-theme-neutral-950);
122
130
  --color-text-neutral-on-monochrome-hover-bg: var(--color-theme-neutral-600);
123
131
  --color-text-neutral-on-neutral-bg: var(--color-theme-neutral-950);
124
132
  --color-text-neutral-on-neutral-filled-bg: var(--color-theme-neutral-white);
@@ -218,7 +226,6 @@
218
226
  --color-theme-warning-950: var(--amber-950);
219
227
  }
220
228
 
221
-
222
229
  /* Dark mode */
223
230
  .dark {
224
231
  /* UI Theme - Colors */
@@ -243,8 +250,8 @@
243
250
  --color-background-neutral-filled-transparent: #182953d9;
244
251
  --color-background-neutral-hover: var(--color-theme-neutral-50);
245
252
  --color-background-neutral-hover-subtle: var(--color-theme-neutral-200);
246
- --color-background-neutral-subtler: var(--color-theme-neutral-100);
247
253
  --color-background-neutral-subtle: var(--color-theme-neutral-200);
254
+ --color-background-neutral-subtler: var(--color-theme-neutral-100);
248
255
  --color-background-neutral-subtlest: var(--color-theme-neutral-50);
249
256
  --color-background-neutral-subtlest-on-container-surface: var(--color-theme-neutral-100);
250
257
  --color-background-neutral-filled-default: var(--color-theme-neutral-950);
@@ -271,15 +278,20 @@
271
278
  --color-background-warning-subtler: var(--color-theme-warning-800);
272
279
  --color-background-warning-subtlest: var(--color-theme-warning-900);
273
280
  --color-border-danger: var(--color-theme-danger-200);
281
+ --color-border-danger-bold: var(--color-theme-danger-400);
274
282
  --color-border-default: var(--color-theme-neutral-100);
275
283
  --color-border-error: var(--color-theme-danger-500);
276
284
  --color-border-inactive: var(--color-theme-neutral-200);
277
285
  --color-border-info: var(--color-theme-info-200);
286
+ --color-border-info-bold: var(--color-theme-info-400);
278
287
  --color-border-secondary-brand: var(--color-theme-secondary-brand-700);
279
288
  --color-border-success: var(--color-theme-success-200);
289
+ --color-border-success-bold: var(--color-theme-success-400);
280
290
  --color-border-warning: var(--color-theme-warning-600);
291
+ --color-border-warning-bold: var(--color-theme-warning-400);
281
292
  --color-border-delete-default: var(--color-theme-danger-400);
282
293
  --color-border-delete-subtle: var(--color-theme-danger-800);
294
+ --color-border-neutral-bold: var(--color-theme-neutral-500);
283
295
  --color-border-neutral-disabled: var(--color-theme-neutral-400);
284
296
  --color-border-neutral-hover: var(--color-theme-neutral-700);
285
297
  --color-border-neutral-on-disabled-bg: var(--color-theme-neutral-300);
@@ -289,6 +301,9 @@
289
301
  --color-border-primary-brand-active: var(--color-theme-primary-brand-500);
290
302
  --color-border-primary-brand-default: var(--color-theme-primary-brand-500);
291
303
  --color-border-primary-brand-hover: var(--color-theme-primary-brand-700);
304
+ --color-border-secondary-brand-active: var(--color-theme-secondary-brand-500);
305
+ --color-border-secondary-brand-default: var(--color-theme-secondary-brand-400);
306
+ --color-border-secondary-brand-hover: var(--color-theme-secondary-brand-700);
292
307
  --color-chart-variant-five: #e6bb45;
293
308
  --color-chart-variant-four: #e65a45;
294
309
  --color-chart-variant-one: #5f45e6;
package/components/buttons/ActionButton.vue CHANGED
@@ -157,9 +157,9 @@ const props = defineProps({
157
157
 
158
158
  // Emits
159
159
  const emit = defineEmits(['click'])
160
- const emitClick = () => {
160
+ const emitClick = (event: MouseEvent) => {
161
161
  if (!props.disabled) {
162
- emit('click')
162
+ emit('click', event)
163
163
  }
164
164
  }
165
165
 
package/components/buttons/ActionIconButton.vue CHANGED
@@ -88,9 +88,9 @@ const props = defineProps({
88
88
 
89
89
  // Emits
90
90
  const emit = defineEmits(['click'])
91
- const emitClick = () => {
91
+ const emitClick = (event: MouseEvent) => {
92
92
  if (!props.disabled) {
93
- emit('click')
93
+ emit('click', event)
94
94
  }
95
95
  }
96
96