not-bulma 1.0.39 → 1.0.42
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 +1 -1
- package/src/elements/form/index.js +2 -0
- package/src/elements/form/ui.number.svelte +102 -0
- package/src/elements/form/ui.switch.svelte +3 -1
- package/src/frame/components/table/notTable.js +802 -707
- package/src/scss/{bulma-list.scss → _bulma-list.scss} +0 -0
- package/src/scss/style.scss +3 -0
package/package.json
CHANGED
|
@@ -14,6 +14,7 @@ import UITelephone from "./ui.telephone.svelte";
|
|
|
14
14
|
import UITextarea from "./ui.textarea.svelte";
|
|
15
15
|
import UITextfield from "./ui.textfield.svelte";
|
|
16
16
|
import UIRange from "./ui.range.svelte";
|
|
17
|
+
import UINumber from "./ui.number.svelte";
|
|
17
18
|
|
|
18
19
|
export {
|
|
19
20
|
UIAutocomplete,
|
|
@@ -32,4 +33,5 @@ export {
|
|
|
32
33
|
UITextarea,
|
|
33
34
|
UITextfield,
|
|
34
35
|
UIRange,
|
|
36
|
+
UINumber,
|
|
35
37
|
};
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import UICommon from "../common.js";
|
|
3
|
+
import ErrorsList from "../various/ui.errors.list.svelte";
|
|
4
|
+
import { createEventDispatcher } from "svelte";
|
|
5
|
+
let dispatch = createEventDispatcher();
|
|
6
|
+
|
|
7
|
+
export let inputStarted = false;
|
|
8
|
+
export let value = 0;
|
|
9
|
+
export let placeholder = "0.0";
|
|
10
|
+
export let min = 0;
|
|
11
|
+
export let max = 0;
|
|
12
|
+
export let step = 0;
|
|
13
|
+
export let fieldname = "number";
|
|
14
|
+
export let icon = false;
|
|
15
|
+
export let required = true;
|
|
16
|
+
export let disabled = false;
|
|
17
|
+
export let readonly = false;
|
|
18
|
+
export let valid = true;
|
|
19
|
+
export let validated = false;
|
|
20
|
+
export let errors = false;
|
|
21
|
+
export let formErrors = false;
|
|
22
|
+
export let formLevelError = false;
|
|
23
|
+
|
|
24
|
+
$: iconClasses = (icon ? " has-icons-left " : "") + " has-icons-right ";
|
|
25
|
+
$: allErrors = [].concat(
|
|
26
|
+
errors ? errors : [],
|
|
27
|
+
formErrors ? formErrors : []
|
|
28
|
+
);
|
|
29
|
+
$: showErrors = !(validated && valid) && inputStarted;
|
|
30
|
+
$: invalid = valid === false || formLevelError;
|
|
31
|
+
$: validationClasses =
|
|
32
|
+
valid === true || !inputStarted
|
|
33
|
+
? UICommon.CLASS_OK
|
|
34
|
+
: UICommon.CLASS_ERR;
|
|
35
|
+
|
|
36
|
+
function onBlur(/*ev*/) {
|
|
37
|
+
let data = {
|
|
38
|
+
field: fieldname,
|
|
39
|
+
value,
|
|
40
|
+
};
|
|
41
|
+
inputStarted = true;
|
|
42
|
+
dispatch("change", data);
|
|
43
|
+
return true;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function onInput(ev) {
|
|
47
|
+
let data = {
|
|
48
|
+
field: fieldname,
|
|
49
|
+
value: ev.currentTarget.value,
|
|
50
|
+
};
|
|
51
|
+
inputStarted = true;
|
|
52
|
+
dispatch("change", data);
|
|
53
|
+
return true;
|
|
54
|
+
}
|
|
55
|
+
</script>
|
|
56
|
+
|
|
57
|
+
<div class="control {iconClasses}">
|
|
58
|
+
{#if readonly}
|
|
59
|
+
<p>{value}</p>
|
|
60
|
+
{:else}
|
|
61
|
+
<input
|
|
62
|
+
id="form-field-textfield-{fieldname}"
|
|
63
|
+
class="input {validationClasses}"
|
|
64
|
+
type="number"
|
|
65
|
+
{min}
|
|
66
|
+
{max}
|
|
67
|
+
{step}
|
|
68
|
+
name={fieldname}
|
|
69
|
+
{invalid}
|
|
70
|
+
{disabled}
|
|
71
|
+
{required}
|
|
72
|
+
{readonly}
|
|
73
|
+
{placeholder}
|
|
74
|
+
bind:value
|
|
75
|
+
autocomplete={fieldname}
|
|
76
|
+
aria-controls="input-field-helper-{fieldname}"
|
|
77
|
+
on:change={onBlur}
|
|
78
|
+
on:input={onInput}
|
|
79
|
+
aria-describedby="input-field-helper-{fieldname}"
|
|
80
|
+
/>
|
|
81
|
+
{#if icon}
|
|
82
|
+
<span class="icon is-small is-left"
|
|
83
|
+
><i class="fas fa-{icon}" /></span
|
|
84
|
+
>
|
|
85
|
+
{/if}
|
|
86
|
+
{#if validated === true}
|
|
87
|
+
<span class="icon is-small is-right">
|
|
88
|
+
{#if valid === true}
|
|
89
|
+
<i class="fas fa-check" />
|
|
90
|
+
{:else if valid === false}
|
|
91
|
+
<i class="fas fa-exclamation-triangle" />
|
|
92
|
+
{/if}
|
|
93
|
+
</span>
|
|
94
|
+
{/if}
|
|
95
|
+
{/if}
|
|
96
|
+
</div>
|
|
97
|
+
<ErrorsList
|
|
98
|
+
bind:errors={allErrors}
|
|
99
|
+
bind:show={showErrors}
|
|
100
|
+
bind:classes={validationClasses}
|
|
101
|
+
id="input-field-helper-{fieldname}"
|
|
102
|
+
/>
|