not-bulma 1.0.38 → 1.0.41
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/package.json
CHANGED
|
@@ -1,83 +1,106 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
import { LOCALE } from "../../locale";
|
|
3
|
+
import "bulma-switch";
|
|
4
|
+
import UICommon from "../common.js";
|
|
5
|
+
import ErrorsList from "../various/ui.errors.list.svelte";
|
|
6
|
+
import UIBooleans from "../various/ui.booleans.svelte";
|
|
7
|
+
import { createEventDispatcher } from "svelte";
|
|
8
|
+
let dispatch = createEventDispatcher();
|
|
9
9
|
|
|
10
|
-
export let inputStarted = false;
|
|
11
|
-
export let value = false;
|
|
12
|
-
|
|
13
|
-
export let placeholder =
|
|
14
|
-
export let fieldname =
|
|
15
|
-
export let icon = false;
|
|
16
|
-
export let required = true;
|
|
17
|
-
export let readonly = false;
|
|
18
|
-
export let disabled = false;
|
|
19
|
-
export let valid = true;
|
|
20
|
-
export let styling = " is-rounded is-success ";
|
|
21
|
-
export let validated = false;
|
|
22
|
-
export let errors = false;
|
|
23
|
-
export let formErrors = false;
|
|
24
|
-
export let formLevelError = false;
|
|
10
|
+
export let inputStarted = false;
|
|
11
|
+
export let value = false;
|
|
12
|
+
export let label = "";
|
|
13
|
+
export let placeholder = "input some text here, please";
|
|
14
|
+
export let fieldname = "textfield";
|
|
15
|
+
export let icon = false;
|
|
16
|
+
export let required = true;
|
|
17
|
+
export let readonly = false;
|
|
18
|
+
export let disabled = false;
|
|
19
|
+
export let valid = true;
|
|
20
|
+
export let styling = " is-rounded is-success ";
|
|
21
|
+
export let validated = false;
|
|
22
|
+
export let errors = false;
|
|
23
|
+
export let formErrors = false;
|
|
24
|
+
export let formLevelError = false;
|
|
25
25
|
|
|
26
|
-
$: iconClasses = (icon?
|
|
27
|
-
$: allErrors = [].concat(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
$: iconClasses = (icon ? " has-icons-left " : "") + " has-icons-right ";
|
|
27
|
+
$: allErrors = [].concat(
|
|
28
|
+
errors ? errors : [],
|
|
29
|
+
formErrors ? formErrors : []
|
|
30
|
+
);
|
|
31
|
+
$: showErrors = !(validated && valid) && inputStarted;
|
|
32
|
+
$: invalid = valid === false || formLevelError;
|
|
33
|
+
$: validationClasses =
|
|
34
|
+
valid === true || !inputStarted
|
|
35
|
+
? UICommon.CLASS_OK
|
|
36
|
+
: UICommon.CLASS_ERR;
|
|
31
37
|
|
|
32
|
-
function onBlur(ev){
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
field: fieldname,
|
|
45
|
-
value: ev.currentTarget.type === 'checkbox' ? ev.currentTarget.checked:value
|
|
46
|
-
};
|
|
47
|
-
inputStarted = true;
|
|
48
|
-
dispatch('change', data);
|
|
49
|
-
return true;
|
|
50
|
-
}
|
|
38
|
+
function onBlur(ev) {
|
|
39
|
+
let data = {
|
|
40
|
+
field: fieldname,
|
|
41
|
+
value:
|
|
42
|
+
ev.currentTarget.type === "checkbox"
|
|
43
|
+
? ev.currentTarget.checked
|
|
44
|
+
: value,
|
|
45
|
+
};
|
|
46
|
+
inputStarted = true;
|
|
47
|
+
dispatch("change", data);
|
|
48
|
+
return true;
|
|
49
|
+
}
|
|
51
50
|
|
|
51
|
+
function onInput(ev) {
|
|
52
|
+
let data = {
|
|
53
|
+
field: fieldname,
|
|
54
|
+
value:
|
|
55
|
+
ev.currentTarget.type === "checkbox"
|
|
56
|
+
? ev.currentTarget.checked
|
|
57
|
+
: value,
|
|
58
|
+
};
|
|
59
|
+
inputStarted = true;
|
|
60
|
+
dispatch("change", data);
|
|
61
|
+
return true;
|
|
62
|
+
}
|
|
52
63
|
</script>
|
|
53
64
|
|
|
54
|
-
|
|
55
|
-
{#if readonly
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
65
|
+
<div class="control">
|
|
66
|
+
{#if readonly}
|
|
67
|
+
{#if value}
|
|
68
|
+
<UIBooleans values={[{ value: false }]} />
|
|
69
|
+
{:else}
|
|
70
|
+
<UIBooleans values={[{ value: true }]} />
|
|
71
|
+
{/if}
|
|
61
72
|
{:else}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
{#if !label}
|
|
74
|
+
<UIBooleans values={[{ value: false }]} />
|
|
75
|
+
{/if}
|
|
76
|
+
<input
|
|
77
|
+
type="checkbox"
|
|
78
|
+
class="switch {styling}"
|
|
79
|
+
id="form-field-switch-{fieldname}"
|
|
80
|
+
bind:checked={value}
|
|
81
|
+
{placeholder}
|
|
82
|
+
name={fieldname}
|
|
83
|
+
{disabled}
|
|
84
|
+
{required}
|
|
85
|
+
{readonly}
|
|
86
|
+
{invalid}
|
|
87
|
+
on:blur={onBlur}
|
|
88
|
+
on:input={onInput}
|
|
89
|
+
aria-controls="input-field-helper-{fieldname}"
|
|
90
|
+
aria-describedby="input-field-helper-{fieldname}"
|
|
91
|
+
/>
|
|
92
|
+
<label class="label" for="form-field-switch-{fieldname}">
|
|
93
|
+
{#if label}
|
|
94
|
+
{$LOCALE[label]}
|
|
95
|
+
{:else}
|
|
96
|
+
<UIBooleans values={[{ value: true }]} />
|
|
97
|
+
{/if}
|
|
98
|
+
</label>
|
|
76
99
|
{/if}
|
|
77
|
-
|
|
78
|
-
|
|
100
|
+
</div>
|
|
101
|
+
<ErrorsList
|
|
79
102
|
bind:errors={allErrors}
|
|
80
103
|
bind:show={showErrors}
|
|
81
104
|
bind:classes={validationClasses}
|
|
82
105
|
id="input-field-helper-{fieldname}"
|
|
83
|
-
|
|
106
|
+
/>
|