stalefish 7.4.1 → 7.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.
- package/components/checkbox.mjs +32 -34
- package/package.json +1 -1
package/components/checkbox.mjs
CHANGED
|
@@ -5,53 +5,51 @@ import clone from 'fast-clone'
|
|
|
5
5
|
let cache = new LRU(300)
|
|
6
6
|
|
|
7
7
|
let styles = css`
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
outline: red solid 2px;
|
|
35
|
-
}
|
|
8
|
+
.checkbox {
|
|
9
|
+
margin: 0 10px 0 20px !important;
|
|
10
|
+
position: absolute;
|
|
11
|
+
right: 4px;
|
|
12
|
+
top: 16.5px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.label {
|
|
16
|
+
position: relative;
|
|
17
|
+
display: inline-flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
border-radius: 0;
|
|
20
|
+
font-size: 18px;
|
|
21
|
+
font-weight: normal;
|
|
22
|
+
color: #999;
|
|
23
|
+
margin: 5px 5px 5px 5px;
|
|
24
|
+
border: solid 5px #c9c9c9;
|
|
25
|
+
user-select: none;
|
|
26
|
+
padding: 12px;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
width: calc(100% - 10px);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.checkbox.touched:invalid:not(:focus) {
|
|
32
|
+
outline: red solid 2px;
|
|
33
|
+
}
|
|
36
34
|
`
|
|
37
35
|
|
|
38
36
|
class Checkbox extends Component {
|
|
39
37
|
createElement (args) {
|
|
40
38
|
this.args = clone(args)
|
|
41
39
|
this.onchange = args.onchange
|
|
42
|
-
let { wrapperStyle, holdingPen, label, property, required, indeterminate, disabled } = args
|
|
40
|
+
let { wrapperStyle, holdingPen, label, property, required, indeterminate, disabled, darkBackground } = args
|
|
43
41
|
|
|
44
42
|
let checkboxEl = html`<input data-gramm="false" ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed;' : ''}" class="${styles.checkbox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" value="${holdingPen[property] === true ? 'true' : null}" ${holdingPen[property] === true ? { checked: 'checked' } : ''} onchange=${e => {
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
formField(holdingPen, property)(e)
|
|
44
|
+
this.onchange && this.onchange(e)
|
|
47
45
|
}} type="checkbox" ${required ? { required: 'required' } : ''} />`
|
|
48
46
|
|
|
49
47
|
checkboxEl.indeterminate = indeterminate || false
|
|
50
48
|
|
|
51
49
|
return html`
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
<label style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}text-align: left; width: 100%; display: inline-block; vertical-align: bottom;" ${wrapperStyle ? { 'class': wrapperStyle } : ''}>
|
|
51
|
+
<span class="${styles.label}" style="background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8});">${label}${required ? ' *' : ''}${checkboxEl}</span>
|
|
52
|
+
</label>
|
|
55
53
|
`
|
|
56
54
|
}
|
|
57
55
|
|