@massimo-cassandro/minimo 1.20.12 → 1.20.14
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.
- package/design-tokens/_src/form.minimo.tokens.mjs +5 -1
- package/design-tokens/tokens-config-sample.mjs +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/src/css/forms/forms.css +6 -1
- package/src/custom-properties.css +27 -26
- package/src/utilities/dom-builder-helpers/form-tags.js +9 -5
- package/types/classes.d.ts +1 -0
|
@@ -53,7 +53,6 @@ export default {
|
|
|
53
53
|
$type: 'color'
|
|
54
54
|
}
|
|
55
55
|
},
|
|
56
|
-
|
|
57
56
|
font: {
|
|
58
57
|
style: {
|
|
59
58
|
$value: 'normal',
|
|
@@ -100,12 +99,17 @@ export default {
|
|
|
100
99
|
$value: '1px',
|
|
101
100
|
$type: 'dimension'
|
|
102
101
|
},
|
|
102
|
+
style: {
|
|
103
|
+
$value: 'solid',
|
|
104
|
+
$type: 'string'
|
|
105
|
+
},
|
|
103
106
|
radius: {
|
|
104
107
|
$value: '{radius.xxs}',
|
|
105
108
|
$type: 'dimension'
|
|
106
109
|
}
|
|
107
110
|
},
|
|
108
111
|
|
|
112
|
+
|
|
109
113
|
placeholder: {
|
|
110
114
|
color: {
|
|
111
115
|
$value: '#666',
|
|
@@ -52,7 +52,7 @@ const config = {
|
|
|
52
52
|
// If true (default), dimension token values expressed in px are converted
|
|
53
53
|
// to rem in the generated CSS. Values in other units (em, %, vh, dvw, ...)
|
|
54
54
|
// are never touched regardless of this option.
|
|
55
|
-
pxToRem:
|
|
55
|
+
pxToRem: false,
|
|
56
56
|
|
|
57
57
|
// If true, custom properties already present in the CSS destination file
|
|
58
58
|
// (destFile, from a previous build) take priority over the ones generated
|
package/index.js
CHANGED
|
@@ -20,7 +20,7 @@ export { ValidationError } from './src/utilities/validation-error-class.js';
|
|
|
20
20
|
|
|
21
21
|
// domBuilder helpers
|
|
22
22
|
export { buildPictureTag } from './src/utilities/dom-builder-helpers/picture-tag.js';
|
|
23
|
-
export { buildInput, buildCheckbox, buildTextarea,
|
|
23
|
+
export { buildInput, buildCheckbox, buildTextarea, buildFakeField } from './src/utilities/dom-builder-helpers/form-tags.js';
|
|
24
24
|
|
|
25
25
|
// components
|
|
26
26
|
export { dismissAlerts } from './src/components/dismiss-alerts.js';
|
package/package.json
CHANGED
package/src/css/forms/forms.css
CHANGED
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
line-height: var(--form-control-line-height);
|
|
51
51
|
color: var(--form-control-text-color);
|
|
52
52
|
background-color: var(--form-control-background-color);
|
|
53
|
-
border:
|
|
53
|
+
border: var(--form-control-border-width) var(--form-control-border-style) var(--form-control-border-color);
|
|
54
54
|
border-radius: var(--form-control-border-radius);
|
|
55
55
|
|
|
56
56
|
&:focus {
|
|
@@ -83,6 +83,11 @@
|
|
|
83
83
|
white-space: nowrap;
|
|
84
84
|
cursor: not-allowed;
|
|
85
85
|
background-color: var(--form-control-static-background-color);
|
|
86
|
+
|
|
87
|
+
&.no-border {
|
|
88
|
+
padding: calc(var(--form-control-padding-block) + var(--form-control-border-width)) 0;
|
|
89
|
+
border: none;
|
|
90
|
+
}
|
|
86
91
|
}
|
|
87
92
|
|
|
88
93
|
/* da bootstrap */
|
|
@@ -39,16 +39,16 @@
|
|
|
39
39
|
--btn-close-background-color: var(--body-background-color);
|
|
40
40
|
--btn-close-border-color: var(--btn-close-icon-color);
|
|
41
41
|
--btn-close-border-radius: 50%;
|
|
42
|
-
--btn-close-border-width:
|
|
42
|
+
--btn-close-border-width: 2px;
|
|
43
43
|
--btn-close-focus-outline-color: var(--link-focus-outline-color);
|
|
44
|
-
--btn-close-focus-outline-offset:
|
|
45
|
-
--btn-close-focus-outline-width:
|
|
44
|
+
--btn-close-focus-outline-offset: 2px;
|
|
45
|
+
--btn-close-focus-outline-width: 2px;
|
|
46
46
|
--btn-close-hover-background-color: var(--btn-close-icon-color);
|
|
47
47
|
--btn-close-hover-border-color: var(--btn-close-icon-color);
|
|
48
48
|
--btn-close-hover-icon-color: var(--btn-close-background-color);
|
|
49
|
-
--btn-close-icon-bar-size:
|
|
49
|
+
--btn-close-icon-bar-size: 2px;
|
|
50
50
|
--btn-close-icon-color: var(--text-color);
|
|
51
|
-
--btn-close-padding:
|
|
51
|
+
--btn-close-padding: 3px;
|
|
52
52
|
--btn-close-size: 1.5rem;
|
|
53
53
|
--btn-disabled-opacity: var(--form-control-disabled-opacity);
|
|
54
54
|
--btn-focus-outline-width: var(--form-control-focus-outline-width);
|
|
@@ -56,13 +56,13 @@
|
|
|
56
56
|
--btn-font-style: var(--form-control-font-style);
|
|
57
57
|
--btn-font-weight: var(--font-weight-semibold);
|
|
58
58
|
--btn-hollow-border-width: calc(var(--btn-border-width) * 2);
|
|
59
|
-
--btn-lg-focus-outline-width:
|
|
59
|
+
--btn-lg-focus-outline-width: 4px;
|
|
60
60
|
--btn-lg-font-size: var(--font-size-lg);
|
|
61
61
|
--btn-lg-padding-block: var(--size-base);
|
|
62
62
|
--btn-lg-padding-inline: var(--size-md);
|
|
63
63
|
--btn-link-disabled-color: var(--text-muted);
|
|
64
64
|
--btn-link-disabled-font-style: italic;
|
|
65
|
-
--btn-md-focus-outline-width:
|
|
65
|
+
--btn-md-focus-outline-width: 3px;
|
|
66
66
|
--btn-md-font-size: var(--font-size-md);
|
|
67
67
|
--btn-md-padding-block: var(--size-xs);
|
|
68
68
|
--btn-md-padding-inline: var(--size-sm);
|
|
@@ -96,15 +96,15 @@
|
|
|
96
96
|
--btn-secondary-hover-background-color: var(--btn-secondary-color);
|
|
97
97
|
--btn-secondary-hover-border-color: var(--btn-secondary-hover-color);
|
|
98
98
|
--btn-secondary-hover-color: var(--btn-secondary-background-color);
|
|
99
|
-
--btn-sm-focus-outline-width:
|
|
99
|
+
--btn-sm-focus-outline-width: 2px;
|
|
100
100
|
--btn-sm-font-size: var(--font-size-sm);
|
|
101
101
|
--btn-sm-padding-block: var(--size-xxs);
|
|
102
102
|
--btn-sm-padding-inline: var(--size-xs);
|
|
103
|
-
--btn-xl-focus-outline-width:
|
|
103
|
+
--btn-xl-focus-outline-width: 6px;
|
|
104
104
|
--btn-xl-font-size: var(--font-size-xl);
|
|
105
105
|
--btn-xl-padding-block: var(--size-md);
|
|
106
106
|
--btn-xl-padding-inline: var(--size-xl);
|
|
107
|
-
--btn-xs-focus-outline-width:
|
|
107
|
+
--btn-xs-focus-outline-width: 1px;
|
|
108
108
|
--btn-xs-font-size: var(--font-size-xs);
|
|
109
109
|
--btn-xs-padding-block: var(--size-xxs);
|
|
110
110
|
--btn-xs-padding-inline: var(--size-xxs);
|
|
@@ -135,14 +135,15 @@
|
|
|
135
135
|
--form-control-background-color: var(--body-background-color);
|
|
136
136
|
--form-control-border-color: #666;
|
|
137
137
|
--form-control-border-radius: var(--radius-xxs);
|
|
138
|
-
--form-control-border-
|
|
138
|
+
--form-control-border-style: solid;
|
|
139
|
+
--form-control-border-width: 1px;
|
|
139
140
|
--form-control-disabled-background-color: #ddd;
|
|
140
141
|
--form-control-disabled-color: #999;
|
|
141
142
|
--form-control-disabled-font-style: italic;
|
|
142
143
|
--form-control-disabled-opacity: .7;
|
|
143
144
|
--form-control-focus-color: hsl(205 69% 45% / .508);
|
|
144
|
-
--form-control-focus-outline-offset:
|
|
145
|
-
--form-control-focus-outline-width:
|
|
145
|
+
--form-control-focus-outline-offset: -2px;
|
|
146
|
+
--form-control-focus-outline-width: 4px;
|
|
146
147
|
--form-control-font-size: var(--font-size-base);
|
|
147
148
|
--form-control-font-style: normal;
|
|
148
149
|
--form-control-font-weight: var(--font-weight-regular);
|
|
@@ -184,7 +185,7 @@
|
|
|
184
185
|
--form-control-xs-padding-inline: var(--size-xxs);
|
|
185
186
|
--form-end-margin-block-end: var(--size-base);
|
|
186
187
|
--form-end-margin-block-start: var(--size-base);
|
|
187
|
-
--form-fieldset-border-width:
|
|
188
|
+
--form-fieldset-border-width: 1px;
|
|
188
189
|
--form-group-padding-block: 0 var(--size-base);
|
|
189
190
|
--form-input-group-background-color: transparent;
|
|
190
191
|
--form-label-color: var(--text-color);
|
|
@@ -194,8 +195,8 @@
|
|
|
194
195
|
--form-legend-color: var(--text-color);
|
|
195
196
|
--form-user-info-color: var(--text-muted);
|
|
196
197
|
--form-user-info-font-size: var(--font-size-xs);
|
|
197
|
-
--form-validation-outline-offset:
|
|
198
|
-
--form-validation-outline-width:
|
|
198
|
+
--form-validation-outline-offset: -3px;
|
|
199
|
+
--form-validation-outline-width: 3px;
|
|
199
200
|
|
|
200
201
|
--grid-cols: 3;
|
|
201
202
|
--grid-min-col-width: 6rem;
|
|
@@ -222,7 +223,7 @@
|
|
|
222
223
|
--link-active-color: #51054c;
|
|
223
224
|
--link-color: #0d12ae;
|
|
224
225
|
--link-focus-outline-color: var(--link-color);
|
|
225
|
-
--link-focus-outline-width:
|
|
226
|
+
--link-focus-outline-width: 2px;
|
|
226
227
|
--link-visited-color: #ae0da3;
|
|
227
228
|
|
|
228
229
|
--malert-backdrop: rgb(0 0 0 / .7);
|
|
@@ -280,8 +281,8 @@
|
|
|
280
281
|
--mpopup-height: max-content;
|
|
281
282
|
--mpopup-max-height: 90dvh;
|
|
282
283
|
--mpopup-max-width: 70dvw;
|
|
283
|
-
--mpopup-min-height:
|
|
284
|
-
--mpopup-min-width:
|
|
284
|
+
--mpopup-min-height: 300px;
|
|
285
|
+
--mpopup-min-width: 400px;
|
|
285
286
|
--mpopup-width: max-content;
|
|
286
287
|
|
|
287
288
|
--overlay-color: rgb(0 0 0 / .6);
|
|
@@ -336,8 +337,8 @@
|
|
|
336
337
|
--snackbar-btn-close-border-radius: 50%;
|
|
337
338
|
--snackbar-btn-close-border-width: var(--btn-close-border-width);
|
|
338
339
|
--snackbar-btn-close-focus-outline-color: color-mix(in srgb, var(--snackbar-text-color) 50%, transparent);
|
|
339
|
-
--snackbar-btn-close-focus-outline-offset:
|
|
340
|
-
--snackbar-btn-close-focus-outline-width:
|
|
340
|
+
--snackbar-btn-close-focus-outline-offset: 2px;
|
|
341
|
+
--snackbar-btn-close-focus-outline-width: 2px;
|
|
341
342
|
--snackbar-btn-close-hover-background-color: color-mix(in srgb, var(--snackbar-text-color) 40%, transparent);
|
|
342
343
|
--snackbar-btn-close-hover-border-color: transparent;
|
|
343
344
|
--snackbar-btn-close-hover-icon-color: var(--snackbar-background-color);
|
|
@@ -354,7 +355,7 @@
|
|
|
354
355
|
|
|
355
356
|
--spinner-color: var(--primary-100);
|
|
356
357
|
--spinner-size: var(--size-lg);
|
|
357
|
-
--spinner-stroke-width:
|
|
358
|
+
--spinner-stroke-width: 2px;
|
|
358
359
|
|
|
359
360
|
--status-danger-background-color: var(--status-danger-color);
|
|
360
361
|
--status-danger-border-color: var(--status-danger-color);
|
|
@@ -377,7 +378,7 @@
|
|
|
377
378
|
--switch-checked-background-color: var(--primary-100);
|
|
378
379
|
--switch-cursor-background-color: var(--body-background-color);
|
|
379
380
|
|
|
380
|
-
--table-body-border-width:
|
|
381
|
+
--table-body-border-width: 1px;
|
|
381
382
|
--table-body-tr-alt-bg-color: #efefef;
|
|
382
383
|
--table-body-tr-hover-bg-color: #cbcbcb;
|
|
383
384
|
--table-border-color: #333;
|
|
@@ -388,7 +389,7 @@
|
|
|
388
389
|
--table-tfoot-border-width: var(--table-thead-border-width);
|
|
389
390
|
--table-tfoot-font-weight: var(--font-weight-semibold);
|
|
390
391
|
--table-thead-background-color: #ddd;
|
|
391
|
-
--table-thead-border-width:
|
|
392
|
+
--table-thead-border-width: 3px;
|
|
392
393
|
|
|
393
394
|
--text-color: #000;
|
|
394
395
|
--text-dim: var(--text-muted);
|
|
@@ -418,9 +419,9 @@
|
|
|
418
419
|
--uspg-link-color: #fc0;
|
|
419
420
|
--uspg-link-decoration: none;
|
|
420
421
|
--uspg-link-focus-outline-color: var(--uspg-link-color);
|
|
421
|
-
--uspg-link-focus-outline-offset:
|
|
422
|
+
--uspg-link-focus-outline-offset: 2px;
|
|
422
423
|
--uspg-link-focus-outline-style: solid;
|
|
423
|
-
--uspg-link-focus-outline-width:
|
|
424
|
+
--uspg-link-focus-outline-width: 2px;
|
|
424
425
|
--uspg-link-hover-background-color: transparent;
|
|
425
426
|
--uspg-link-hover-color: var(--uspg-link-color);
|
|
426
427
|
--uspg-link-hover-decoration: underline;
|
|
@@ -177,6 +177,7 @@ export function buildCheckbox({
|
|
|
177
177
|
* @param {string} args.label - textarea label.
|
|
178
178
|
* @param {string | null} args.name - textarea `name` attribute.
|
|
179
179
|
* @param {string | number | null} args.value - textarea content.
|
|
180
|
+
* @param {boolean} [args.autosize=true] - adds `autosize` class
|
|
180
181
|
* @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
|
|
181
182
|
* @param {string | null} [args.className=null] - optional class to be added to the textarea element.
|
|
182
183
|
* @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
|
|
@@ -194,7 +195,8 @@ export function buildTextarea({
|
|
|
194
195
|
condition = true,
|
|
195
196
|
help = null,
|
|
196
197
|
callback = null,
|
|
197
|
-
attrs = {}
|
|
198
|
+
attrs = {},
|
|
199
|
+
autosize = true
|
|
198
200
|
}) {
|
|
199
201
|
|
|
200
202
|
const id = randomId();
|
|
@@ -207,7 +209,7 @@ export function buildTextarea({
|
|
|
207
209
|
`label.form-label[for:${id}] ${label}`,
|
|
208
210
|
{
|
|
209
211
|
tag: 'textarea',
|
|
210
|
-
className: classnames('form-control', className, attrs?.class),
|
|
212
|
+
className: classnames('form-control', className, attrs?.class, autosize && 'autosize'),
|
|
211
213
|
id: id,
|
|
212
214
|
attrs: {
|
|
213
215
|
...(attrs??{}),
|
|
@@ -227,6 +229,7 @@ export function buildTextarea({
|
|
|
227
229
|
* @param {string} args.label - label.
|
|
228
230
|
* @param {string | number | null} args.value - text content.
|
|
229
231
|
* @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
|
|
232
|
+
* @param {boolean} [args.noBorder=true] - adds `no-border` class.
|
|
230
233
|
* @param {string | null} [args.className=null] - optional class to be added to the fake field.
|
|
231
234
|
* @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
|
|
232
235
|
* @param {string | HTMLElement | null} args.help - Optional help text.
|
|
@@ -234,7 +237,7 @@ export function buildTextarea({
|
|
|
234
237
|
* @param {Record<string, any> | null} [args.attrs={}] - Optional attributes object.
|
|
235
238
|
* @returns {DomBuilderItem|null} The fake field domBuilder item, or `null` when `condition` is false.
|
|
236
239
|
*/
|
|
237
|
-
export function
|
|
240
|
+
export function buildFakeField({
|
|
238
241
|
label,
|
|
239
242
|
value = null,
|
|
240
243
|
wrapperClass = null,
|
|
@@ -242,7 +245,8 @@ export function fakeField({
|
|
|
242
245
|
condition = true,
|
|
243
246
|
help = null,
|
|
244
247
|
callback = null,
|
|
245
|
-
attrs = {}
|
|
248
|
+
attrs = {},
|
|
249
|
+
noBorder = true
|
|
246
250
|
}) {
|
|
247
251
|
|
|
248
252
|
|
|
@@ -253,7 +257,7 @@ export function fakeField({
|
|
|
253
257
|
children: [
|
|
254
258
|
`span.form-label ${label}`,
|
|
255
259
|
{
|
|
256
|
-
className: classnames('form-control-static', className, attrs?.class),
|
|
260
|
+
className: classnames('form-control-static', className, attrs?.class, noBorder && 'no-border'),
|
|
257
261
|
attrs: {
|
|
258
262
|
...(attrs??{}),
|
|
259
263
|
name: name,
|