not-bulma 1.0.36 → 1.0.39
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,33 +1,35 @@
|
|
|
1
|
-
import UIAutocomplete from
|
|
2
|
-
import UICheckboxList from
|
|
3
|
-
import UICheckbox from
|
|
4
|
-
import UIColor from
|
|
5
|
-
import UIDate from
|
|
6
|
-
import UIEmail from
|
|
7
|
-
import UIHidden from
|
|
8
|
-
import UILabel from
|
|
9
|
-
import UIPassword from
|
|
10
|
-
import UISelect from
|
|
11
|
-
import UISwitch from
|
|
12
|
-
import UITag from
|
|
13
|
-
import UITelephone from
|
|
14
|
-
import UITextarea from
|
|
15
|
-
import UITextfield from
|
|
1
|
+
import UIAutocomplete from "./ui.autocomplete.svelte";
|
|
2
|
+
import UICheckboxList from "./ui.checkbox.list.svelte";
|
|
3
|
+
import UICheckbox from "./ui.checkbox.svelte";
|
|
4
|
+
import UIColor from "./ui.color.svelte";
|
|
5
|
+
import UIDate from "./ui.date.svelte";
|
|
6
|
+
import UIEmail from "./ui.email.svelte";
|
|
7
|
+
import UIHidden from "./ui.hidden.svelte";
|
|
8
|
+
import UILabel from "./ui.label.svelte";
|
|
9
|
+
import UIPassword from "./ui.password.svelte";
|
|
10
|
+
import UISelect from "./ui.select.svelte";
|
|
11
|
+
import UISwitch from "./ui.switch.svelte";
|
|
12
|
+
import UITag from "./ui.tag.svelte";
|
|
13
|
+
import UITelephone from "./ui.telephone.svelte";
|
|
14
|
+
import UITextarea from "./ui.textarea.svelte";
|
|
15
|
+
import UITextfield from "./ui.textfield.svelte";
|
|
16
|
+
import UIRange from "./ui.range.svelte";
|
|
16
17
|
|
|
17
18
|
export {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
UIAutocomplete,
|
|
20
|
+
UICheckboxList,
|
|
21
|
+
UICheckbox,
|
|
22
|
+
UIColor,
|
|
23
|
+
UIDate,
|
|
24
|
+
UIEmail,
|
|
25
|
+
UIHidden,
|
|
26
|
+
UILabel,
|
|
27
|
+
UIPassword,
|
|
28
|
+
UISelect,
|
|
29
|
+
UISwitch,
|
|
30
|
+
UITag,
|
|
31
|
+
UITelephone,
|
|
32
|
+
UITextarea,
|
|
33
|
+
UITextfield,
|
|
34
|
+
UIRange,
|
|
33
35
|
};
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
|
|
3
|
+
import UICommon from '../common.js';
|
|
4
|
+
import ErrorsList from '../various/ui.errors.list.svelte';
|
|
5
|
+
import {createEventDispatcher} from 'svelte';
|
|
6
|
+
let dispatch = createEventDispatcher();
|
|
7
|
+
|
|
8
|
+
export let inputStarted = false;
|
|
9
|
+
export let value = 10;
|
|
10
|
+
export let min = 0;
|
|
11
|
+
export let max = 100;
|
|
12
|
+
export let step = 1;
|
|
13
|
+
export let tickmarks = false;
|
|
14
|
+
export let placeholder = 'range placeholder';
|
|
15
|
+
export let fieldname = 'range';
|
|
16
|
+
export let icon = false;
|
|
17
|
+
export let required = true;
|
|
18
|
+
export let disabled = false;
|
|
19
|
+
export let readonly = false;
|
|
20
|
+
export let valid = true;
|
|
21
|
+
export let validated = false;
|
|
22
|
+
export let errors = false;
|
|
23
|
+
export let formErrors = false;
|
|
24
|
+
export let formLevelError = false;
|
|
25
|
+
|
|
26
|
+
$: iconClasses = (icon? ' has-icons-left ':'') + ' has-icons-right ';
|
|
27
|
+
$: allErrors = [].concat(errors?errors:[], formErrors?formErrors:[]);
|
|
28
|
+
$: showErrors = (!(validated && valid) && (inputStarted));
|
|
29
|
+
$: invalid = ((valid===false) || (formLevelError));
|
|
30
|
+
$: validationClasses = (valid===true || !inputStarted)?UICommon.CLASS_OK:UICommon.CLASS_ERR;
|
|
31
|
+
|
|
32
|
+
function onBlur(/*ev*/){
|
|
33
|
+
let data = {
|
|
34
|
+
field: fieldname,
|
|
35
|
+
value
|
|
36
|
+
};
|
|
37
|
+
inputStarted = true;
|
|
38
|
+
dispatch('change', data);
|
|
39
|
+
return true;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function onInput(ev){
|
|
43
|
+
let data = {
|
|
44
|
+
field: fieldname,
|
|
45
|
+
value: ev.currentTarget.value
|
|
46
|
+
};
|
|
47
|
+
inputStarted = true;
|
|
48
|
+
dispatch('change', data);
|
|
49
|
+
return true;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
</script>
|
|
53
|
+
<div class="control {iconClasses}">
|
|
54
|
+
{#if readonly }
|
|
55
|
+
<p>{value}</p>
|
|
56
|
+
{:else}
|
|
57
|
+
<input id="form-field-range-{fieldname}"
|
|
58
|
+
class="input {validationClasses}"
|
|
59
|
+
type="range" name="{fieldname}"
|
|
60
|
+
{min} {max} {step}
|
|
61
|
+
list="form-field-range-{fieldname}-tickmarks"
|
|
62
|
+
{invalid}
|
|
63
|
+
{disabled}
|
|
64
|
+
{required} {readonly}
|
|
65
|
+
placeholder="{placeholder}"
|
|
66
|
+
bind:value={value} autocomplete="{fieldname}"
|
|
67
|
+
aria-controls="input-field-helper-{fieldname}"
|
|
68
|
+
on:change={onBlur} on:input={onInput}
|
|
69
|
+
aria-describedby="input-field-helper-{fieldname}" />
|
|
70
|
+
{#if Array.isArray(tickmarks) && tickmarks.length }
|
|
71
|
+
<datalist id="form-field-range-{fieldname}-tickmarks">
|
|
72
|
+
{#each tickmarks as tickmark }
|
|
73
|
+
<option value={tickmark.value} label={tickmark.label} />
|
|
74
|
+
{/each}
|
|
75
|
+
</datalist>
|
|
76
|
+
{/if}
|
|
77
|
+
|
|
78
|
+
{#if icon }
|
|
79
|
+
<span class="icon is-small is-left"><i class="fas fa-{icon}"></i></span>
|
|
80
|
+
{/if}
|
|
81
|
+
{#if validated === true }
|
|
82
|
+
<span class="icon is-small is-right">
|
|
83
|
+
{#if valid === true }
|
|
84
|
+
<i class="fas fa-check"></i>
|
|
85
|
+
{:else if (valid === false) }
|
|
86
|
+
<i class="fas fa-exclamation-triangle"></i>
|
|
87
|
+
{/if}
|
|
88
|
+
</span>
|
|
89
|
+
{/if}
|
|
90
|
+
{/if}
|
|
91
|
+
</div>
|
|
92
|
+
<ErrorsList
|
|
93
|
+
bind:errors={allErrors}
|
|
94
|
+
bind:show={showErrors}
|
|
95
|
+
bind:classes={validationClasses}
|
|
96
|
+
id="input-field-helper-{fieldname}"
|
|
97
|
+
/>
|
|
@@ -1,83 +1,104 @@
|
|
|
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
|
+
<UIBooleans values={[{ value: false }]} />
|
|
74
|
+
<input
|
|
75
|
+
type="checkbox"
|
|
76
|
+
class="switch {styling}"
|
|
77
|
+
id="form-field-switch-{fieldname}"
|
|
78
|
+
bind:checked={value}
|
|
79
|
+
{placeholder}
|
|
80
|
+
name={fieldname}
|
|
81
|
+
{disabled}
|
|
82
|
+
{required}
|
|
83
|
+
{readonly}
|
|
84
|
+
{invalid}
|
|
85
|
+
on:blur={onBlur}
|
|
86
|
+
on:input={onInput}
|
|
87
|
+
aria-controls="input-field-helper-{fieldname}"
|
|
88
|
+
aria-describedby="input-field-helper-{fieldname}"
|
|
89
|
+
/>
|
|
90
|
+
<label class="label" for="form-field-switch-{fieldname}">
|
|
91
|
+
{#if label}
|
|
92
|
+
{$LOCALE[label]}
|
|
93
|
+
{:else}
|
|
94
|
+
<UIBooleans values={[{ value: true }]} />
|
|
95
|
+
{/if}
|
|
96
|
+
</label>
|
|
76
97
|
{/if}
|
|
77
|
-
|
|
78
|
-
|
|
98
|
+
</div>
|
|
99
|
+
<ErrorsList
|
|
79
100
|
bind:errors={allErrors}
|
|
80
101
|
bind:show={showErrors}
|
|
81
102
|
bind:classes={validationClasses}
|
|
82
103
|
id="input-field-helper-{fieldname}"
|
|
83
|
-
|
|
104
|
+
/>
|