@massimo-cassandro/minimo 0.4.2 → 0.4.3
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/form.minimo.tokens.jsonc +23 -1
- package/design-tokens-src/form.minimo.tokens.mjs +22 -0
- package/package.json +1 -1
- package/src/components/sf-macro/readme.md +55 -0
- package/src/components/sf-macro/sf-macro.css +13 -0
- package/src/css/forms/form-disabled-readonly.css +41 -0
- package/src/css/forms/forms.css +2 -18
- package/src/custom-properties-default.css +5 -1
- package/src/index-template.css +2 -4
|
@@ -136,7 +136,29 @@
|
|
|
136
136
|
},
|
|
137
137
|
"opacity": {
|
|
138
138
|
"$type": "number",
|
|
139
|
-
"$value":
|
|
139
|
+
"$value": 0.7
|
|
140
|
+
},
|
|
141
|
+
"font": {
|
|
142
|
+
"style": {
|
|
143
|
+
"$type": "string",
|
|
144
|
+
"$value": "italic"
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
"readonly": {
|
|
149
|
+
"background": {
|
|
150
|
+
"color": {
|
|
151
|
+
"$type": "color",
|
|
152
|
+
"$value": "{form.control.background.color}"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
"color": {
|
|
156
|
+
"$type": "color",
|
|
157
|
+
"$value": "#666"
|
|
158
|
+
},
|
|
159
|
+
"opacity": {
|
|
160
|
+
"$type": "number",
|
|
161
|
+
"$value": 1
|
|
140
162
|
},
|
|
141
163
|
"font": {
|
|
142
164
|
"style": {
|
|
@@ -148,6 +148,28 @@ export default {
|
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
150
|
},
|
|
151
|
+
readonly: {
|
|
152
|
+
background: {
|
|
153
|
+
color: {
|
|
154
|
+
$value: '{form.control.background.color}',
|
|
155
|
+
$type: 'color'
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
color: {
|
|
159
|
+
$value: '#666',
|
|
160
|
+
$type: 'color'
|
|
161
|
+
},
|
|
162
|
+
opacity: {
|
|
163
|
+
$value: 1,
|
|
164
|
+
$type: 'number'
|
|
165
|
+
},
|
|
166
|
+
font: {
|
|
167
|
+
style: {
|
|
168
|
+
$value: 'italic',
|
|
169
|
+
$type: 'string'
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
},
|
|
151
173
|
required: {
|
|
152
174
|
'flag-color': {
|
|
153
175
|
$value: '#c00',
|
package/package.json
CHANGED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# sf-macro
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
## Usage
|
|
5
|
+
|
|
6
|
+
```javascript
|
|
7
|
+
import { sf_macro } from '@minimo/components/sf-macro/sf-macro.js';
|
|
8
|
+
|
|
9
|
+
sf_macro({
|
|
10
|
+
wrapper_selector: '.sf-macro-wrapper',
|
|
11
|
+
row_selector: '.sf-macro-riga',
|
|
12
|
+
add_callback: null,
|
|
13
|
+
del_callback: null
|
|
14
|
+
});
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Twig macro
|
|
18
|
+
|
|
19
|
+
```twig
|
|
20
|
+
<fieldset class="sf-macro-wrapper">
|
|
21
|
+
<legend>XXXXX</legend>
|
|
22
|
+
|
|
23
|
+
{%- macro makeRow(row) -%}
|
|
24
|
+
{% set anno = row.vars.value.anno %}
|
|
25
|
+
|
|
26
|
+
<div class="sf-macro-riga">
|
|
27
|
+
<div class="grid">
|
|
28
|
+
|
|
29
|
+
{{ form_row(row.__field__, {
|
|
30
|
+
label: "__label__",
|
|
31
|
+
attr: {}
|
|
32
|
+
}) }}
|
|
33
|
+
|
|
34
|
+
</div> {# end .grid #}
|
|
35
|
+
|
|
36
|
+
<button type="button" class="btn-reset sf-macro-close-btn" aria-label="Elimina riga">
|
|
37
|
+
Elimina riga
|
|
38
|
+
</button>
|
|
39
|
+
</div> {# end .sf-macro-riga #}
|
|
40
|
+
{%- endmacro -%}
|
|
41
|
+
{% import _self as m %}
|
|
42
|
+
|
|
43
|
+
<div class="my-3 sf-macro-container" data-template="{{-
|
|
44
|
+
m.makeRow(form.ciclo.vars.prototype)|e('html_attr')
|
|
45
|
+
-}}">
|
|
46
|
+
{% for row in form.ciclo %}
|
|
47
|
+
{{ m.makeRow(row) }}
|
|
48
|
+
{% endfor %}
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div class="mt text-right">
|
|
52
|
+
<button type="button" class="btn btn-outline-secondary sf-macro-riga-add">Aggiungi XXX</button>
|
|
53
|
+
</div>
|
|
54
|
+
</fieldset>
|
|
55
|
+
```
|
|
@@ -38,6 +38,19 @@
|
|
|
38
38
|
border: var(--sf-macro-rows-border);
|
|
39
39
|
border-radius: var(--sf-macro-rows-border-radius);
|
|
40
40
|
|
|
41
|
+
&::before {
|
|
42
|
+
position: absolute;
|
|
43
|
+
top: 0;
|
|
44
|
+
left: 0;
|
|
45
|
+
display: block;
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 100%;
|
|
48
|
+
text-indent: -999em;
|
|
49
|
+
/* TODO content nelle custom properties */
|
|
50
|
+
content: url(../../icons/x-bold.svg?cssInline);
|
|
51
|
+
translate: -50% -50%;
|
|
52
|
+
}
|
|
53
|
+
|
|
41
54
|
&:nth-child(even) {
|
|
42
55
|
background-color: var(--sf-macro-rows-even-background-color);
|
|
43
56
|
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
|
|
2
|
+
.form-control {
|
|
3
|
+
|
|
4
|
+
&[disabled] {
|
|
5
|
+
color: var(--form-control-disabled-color);
|
|
6
|
+
/* border-color: $form-select-disabled-border-color; */
|
|
7
|
+
cursor: not-allowed;
|
|
8
|
+
background-color: var(--form-control-disabled-background-color);
|
|
9
|
+
|
|
10
|
+
&, &::placeholder {
|
|
11
|
+
font-style: var(--form-control-disabled-font-style);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&[readonly] {
|
|
16
|
+
color: var(--form-control-readonly-color);
|
|
17
|
+
pointer-events: none;
|
|
18
|
+
user-select: none;
|
|
19
|
+
background-color: var(--form-control-readonly-background-color);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.form-group {
|
|
25
|
+
&:has([disabled]) {
|
|
26
|
+
opacity: var(--form-control-disabled-opacity);
|
|
27
|
+
.form-label {
|
|
28
|
+
font-style: var(--form-control-disabled-font-style);
|
|
29
|
+
color: var(--form-control-disabled-color);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&:has([readonly]) {
|
|
34
|
+
opacity: var(--form-control-readonly-opacity);
|
|
35
|
+
.form-label {
|
|
36
|
+
font-style: var(--form-control-readonly-font-style);
|
|
37
|
+
color: var(--form-control-readonly-color);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
}
|
package/src/css/forms/forms.css
CHANGED
|
@@ -43,26 +43,9 @@
|
|
|
43
43
|
&:focus {
|
|
44
44
|
outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
&[disabled] {
|
|
48
|
-
color: var(--form-control-disabled-color);
|
|
49
|
-
/* border-color: $form-select-disabled-border-color; */
|
|
50
|
-
cursor: not-allowed;
|
|
51
|
-
background-color: var(--form-control-disabled-background-color);
|
|
52
|
-
|
|
53
|
-
&, &::placeholder {
|
|
54
|
-
font-style: var(--form-control-disabled-font-style);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
46
|
}
|
|
58
47
|
|
|
59
|
-
|
|
60
|
-
opacity: var(--form-control-disabled-opacity);
|
|
61
|
-
.form-label {
|
|
62
|
-
font-style: var(--form-control-disabled-font-style);
|
|
63
|
-
color: var(--form-control-disabled-color);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
48
|
+
|
|
66
49
|
|
|
67
50
|
.form-control, .form-control-static {
|
|
68
51
|
|
|
@@ -158,3 +141,4 @@ textarea.form-control {
|
|
|
158
141
|
flex: 1;
|
|
159
142
|
}
|
|
160
143
|
|
|
144
|
+
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
--form-control-disabled-background-color: #ddd;
|
|
100
100
|
--form-control-disabled-color: #999;
|
|
101
101
|
--form-control-disabled-font-style: italic;
|
|
102
|
-
--form-control-disabled-opacity: .
|
|
102
|
+
--form-control-disabled-opacity: .7;
|
|
103
103
|
--form-control-focus-color: hsl(205 69% 45% / .508);
|
|
104
104
|
--form-control-focus-outline-width: .25rem;
|
|
105
105
|
--form-control-font-size: var(--font-size-base);
|
|
@@ -118,6 +118,10 @@
|
|
|
118
118
|
--form-control-placeholder-font-size: var(--form-control-font-size);
|
|
119
119
|
--form-control-placeholder-font-style: italic;
|
|
120
120
|
--form-control-placeholder-opacity: .8;
|
|
121
|
+
--form-control-readonly-background-color: var(--form-control-background-color);
|
|
122
|
+
--form-control-readonly-color: #666;
|
|
123
|
+
--form-control-readonly-font-style: italic;
|
|
124
|
+
--form-control-readonly-opacity: 1;
|
|
121
125
|
--form-control-required-flag-color: #c00;
|
|
122
126
|
--form-control-required-flag-content: '\002A';
|
|
123
127
|
--form-control-select-trigger-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgb(5%2C%2048%2C%2056)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E');
|
package/src/index-template.css
CHANGED
|
@@ -18,8 +18,10 @@
|
|
|
18
18
|
/* @import '@minimo/css/forms/fieldset.css'; */
|
|
19
19
|
/* @import '@minimo/css/forms/form-group.css'; */
|
|
20
20
|
/* @import '@minimo/css/forms/input-group.css'; */
|
|
21
|
+
/* @import '@minimo/css/forms/form-disabled-readonly.css'; */
|
|
21
22
|
/* @import '@minimo/css/forms/validation.css'; */
|
|
22
23
|
/* @import '@minimo/css/forms/form-utilities.css'; */
|
|
24
|
+
|
|
23
25
|
@import '@minimo/css/buttons/buttons.css';
|
|
24
26
|
/* @import '@minimo/css/buttons/status-buttons.css'; */
|
|
25
27
|
/* @import '@minimo/css/buttons/btn-close.css'; */
|
|
@@ -30,7 +32,6 @@
|
|
|
30
32
|
/* @import '@minimo/css/alerts.css'; */
|
|
31
33
|
/* @import '@minimo/css/icons.css'; */
|
|
32
34
|
@import '@minimo/css/svg.css';
|
|
33
|
-
@import '@minimo/css/overlay.css';
|
|
34
35
|
/* @import '@minimo/css/table.css'; */
|
|
35
36
|
/* @import '@minimo/css/flex.css'; */
|
|
36
37
|
/* @import '@minimo/css/grid.css'; */
|
|
@@ -38,9 +39,6 @@
|
|
|
38
39
|
/* @import '@minimo/css/utilities.css'; */
|
|
39
40
|
|
|
40
41
|
|
|
41
|
-
/* componenti */
|
|
42
|
-
/* @import '@minimo/components/spinner/spinner-circle-basic.css'; */
|
|
43
|
-
/* @import '@minimo/components/modal-alert/modal-alert.css'; */
|
|
44
42
|
|
|
45
43
|
/* file progetto */
|
|
46
44
|
/* @import '@src/path_to/layout.css'; */
|