not-bulma 1.0.52 → 1.0.53
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
|
@@ -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 UIRangeLogarithmic from "./ui.range.logarithmic.svelte";
|
|
17
18
|
import UINumber from "./ui.number.svelte";
|
|
18
19
|
|
|
19
20
|
export {
|
|
@@ -33,5 +34,6 @@ export {
|
|
|
33
34
|
UITextarea,
|
|
34
35
|
UITextfield,
|
|
35
36
|
UIRange,
|
|
37
|
+
UIRangeLogarithmic,
|
|
36
38
|
UINumber,
|
|
37
39
|
};
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
const MAX = Number.MAX_SAFE_INTEGER;
|
|
3
|
+
import "bulma-slider/src/sass/index.sass";
|
|
4
|
+
|
|
5
|
+
import UICommon from "not-bulma/src/elements/common.js";
|
|
6
|
+
import ErrorsList from "not-bulma/src/elements/various/ui.errors.list.svelte";
|
|
7
|
+
import { createEventDispatcher, onMount } from "svelte";
|
|
8
|
+
let dispatch = createEventDispatcher();
|
|
9
|
+
|
|
10
|
+
export let inputStarted = false;
|
|
11
|
+
export let value = 10;
|
|
12
|
+
export let min = 0;
|
|
13
|
+
export let max = 100;
|
|
14
|
+
export let step = 1;
|
|
15
|
+
export let tickmarks = false;
|
|
16
|
+
export let placeholder = "range placeholder";
|
|
17
|
+
export let fieldname = "range";
|
|
18
|
+
export let icon = false;
|
|
19
|
+
export let required = true;
|
|
20
|
+
export let disabled = false;
|
|
21
|
+
export let readonly = false;
|
|
22
|
+
export let valid = true;
|
|
23
|
+
export let validated = false;
|
|
24
|
+
export let errors = false;
|
|
25
|
+
export let formErrors = false;
|
|
26
|
+
export let formLevelError = false;
|
|
27
|
+
|
|
28
|
+
$: iconClasses = (icon ? " has-icons-left " : "") + " has-icons-right ";
|
|
29
|
+
$: allErrors = [].concat(
|
|
30
|
+
errors ? errors : [],
|
|
31
|
+
formErrors ? formErrors : []
|
|
32
|
+
);
|
|
33
|
+
$: showErrors = !(validated && valid) && inputStarted;
|
|
34
|
+
$: invalid = valid === false || formLevelError;
|
|
35
|
+
$: validationClasses =
|
|
36
|
+
valid === true || !inputStarted
|
|
37
|
+
? UICommon.CLASS_OK
|
|
38
|
+
: UICommon.CLASS_ERR;
|
|
39
|
+
|
|
40
|
+
function onBlur(ev) {
|
|
41
|
+
const val = getLogarithmicValue(ev.currentTarget.value);
|
|
42
|
+
value = val;
|
|
43
|
+
let data = {
|
|
44
|
+
field: fieldname,
|
|
45
|
+
value,
|
|
46
|
+
};
|
|
47
|
+
inputStarted = true;
|
|
48
|
+
dispatch("change", data);
|
|
49
|
+
return true;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function onInput(ev) {
|
|
53
|
+
const val = getLogarithmicValue(
|
|
54
|
+
Math.round(parseInt(ev.currentTarget.value))
|
|
55
|
+
);
|
|
56
|
+
value = val;
|
|
57
|
+
let data = {
|
|
58
|
+
field: fieldname,
|
|
59
|
+
value,
|
|
60
|
+
};
|
|
61
|
+
inputStarted = true;
|
|
62
|
+
dispatch("change", data);
|
|
63
|
+
return true;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
let posMin = 0,
|
|
67
|
+
posMax = 100,
|
|
68
|
+
lMin = 0,
|
|
69
|
+
lMax = 100,
|
|
70
|
+
lScale = 10,
|
|
71
|
+
lStep = 0.1,
|
|
72
|
+
posValue = 1;
|
|
73
|
+
|
|
74
|
+
onMount(() => {
|
|
75
|
+
lMin = Math.log(min || 1);
|
|
76
|
+
lMax = Math.log(max || MAX);
|
|
77
|
+
lScale = (lMax - lMin) / (posMax - posMin);
|
|
78
|
+
posValue = getLogarithmicPosition(parseInt(value));
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
function getLogarithmicValue(pos) {
|
|
82
|
+
pos = parseInt(pos);
|
|
83
|
+
return Math.round(Math.exp((pos - posMin) * lScale + lMin));
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
function getLogarithmicPosition(val) {
|
|
87
|
+
val = parseInt(val);
|
|
88
|
+
return min + (Math.log(val) - lMin) / lScale;
|
|
89
|
+
}
|
|
90
|
+
</script>
|
|
91
|
+
|
|
92
|
+
<div class="control {iconClasses}">
|
|
93
|
+
{#if readonly}
|
|
94
|
+
<p>{value}</p>
|
|
95
|
+
{:else}
|
|
96
|
+
<input
|
|
97
|
+
id="form-field-range-{fieldname}"
|
|
98
|
+
class="input big-number slider has-output is-fullwidth is-success {validationClasses}"
|
|
99
|
+
type="range"
|
|
100
|
+
name={fieldname}
|
|
101
|
+
min={posMin}
|
|
102
|
+
max={posMax}
|
|
103
|
+
step={lStep}
|
|
104
|
+
list="form-field-range-{fieldname}-tickmarks"
|
|
105
|
+
{invalid}
|
|
106
|
+
{disabled}
|
|
107
|
+
{required}
|
|
108
|
+
{readonly}
|
|
109
|
+
{placeholder}
|
|
110
|
+
bind:value={posValue}
|
|
111
|
+
autocomplete={fieldname}
|
|
112
|
+
aria-controls="input-field-helper-{fieldname}"
|
|
113
|
+
on:change={onBlur}
|
|
114
|
+
on:input={onInput}
|
|
115
|
+
aria-describedby="input-field-helper-{fieldname}"
|
|
116
|
+
/>
|
|
117
|
+
<output for="form-field-range-{fieldname}">{value}</output>
|
|
118
|
+
{#if Array.isArray(tickmarks) && tickmarks.length}
|
|
119
|
+
<datalist id="form-field-range-{fieldname}-tickmarks">
|
|
120
|
+
{#each tickmarks as tickmark}
|
|
121
|
+
<option value={tickmark.value} label={tickmark.label} />
|
|
122
|
+
{/each}
|
|
123
|
+
</datalist>
|
|
124
|
+
{/if}
|
|
125
|
+
|
|
126
|
+
{#if icon}
|
|
127
|
+
<span class="icon is-small is-left"
|
|
128
|
+
><i class="fas fa-{icon}" /></span
|
|
129
|
+
>
|
|
130
|
+
{/if}
|
|
131
|
+
{/if}
|
|
132
|
+
</div>
|
|
133
|
+
<ErrorsList
|
|
134
|
+
bind:errors={allErrors}
|
|
135
|
+
bind:show={showErrors}
|
|
136
|
+
bind:classes={validationClasses}
|
|
137
|
+
id="input-field-helper-{fieldname}"
|
|
138
|
+
/>
|