not-bulma 1.0.89 → 1.0.91

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.
Files changed (16) hide show
  1. package/package.json +1 -1
  2. package/src/elements/form/index.js +12 -10
  3. package/src/elements/form/ui.autocomplete.svelte +82 -72
  4. package/src/elements/form/ui.checkbox.svelte +82 -58
  5. package/src/elements/form/ui.color.svelte +74 -62
  6. package/src/elements/form/ui.hidden.svelte +5 -7
  7. package/src/elements/form/ui.label.svelte +3 -4
  8. package/src/elements/{list/field.ui.named.numbers.list.svelte → form/ui.named.numbers.list.svelte} +4 -4
  9. package/src/elements/form/ui.select.svelte +141 -117
  10. package/src/elements/form/ui.switch.svelte +2 -2
  11. package/src/elements/form/ui.telephone.svelte +87 -80
  12. package/src/elements/form/ui.textarea.svelte +77 -65
  13. package/src/elements/form/ui.textfield.svelte +84 -71
  14. package/src/elements/list/index.js +0 -3
  15. package/src/elements/various/ui.booleans.svelte +10 -10
  16. package/src/frame/interface.js +428 -353
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "not-bulma",
3
- "version": "1.0.89",
3
+ "version": "1.0.91",
4
4
  "description": "not-* family UI components on Bulma CSS Framework",
5
5
  "main": "src/index.js",
6
6
  "svelte": "src/index.js",
package/src/elements/form/index.js CHANGED
@@ -1,41 +1,43 @@
1
1
  import UIAutocomplete from "./ui.autocomplete.svelte";
2
- import UICheckboxList from "./ui.checkbox.list.svelte";
3
2
  import UICheckbox from "./ui.checkbox.svelte";
3
+ import UICheckboxList from "./ui.checkbox.list.svelte";
4
4
  import UIColor from "./ui.color.svelte";
5
5
  import UIDate from "./ui.date.svelte";
6
6
  import UIEmail from "./ui.email.svelte";
7
7
  import UIHidden from "./ui.hidden.svelte";
8
8
  import UILabel from "./ui.label.svelte";
9
+ import UINamedNumbersList from "./ui.named.numbers.list.svelte";
10
+ import UINumber from "./ui.number.svelte";
9
11
  import UIPassword from "./ui.password.svelte";
12
+ import UIRadioButtons from "./ui.radio.buttons.svelte";
13
+ import UIRange from "./ui.range.svelte";
14
+ import UIRangeLogarithmic from "./ui.range.logarithmic.svelte";
10
15
  import UISelect from "./ui.select.svelte";
11
16
  import UISwitch from "./ui.switch.svelte";
12
17
  import UITag from "./ui.tag.svelte";
13
18
  import UITelephone from "./ui.telephone.svelte";
14
19
  import UITextarea from "./ui.textarea.svelte";
15
20
  import UITextfield from "./ui.textfield.svelte";
16
- import UIRange from "./ui.range.svelte";
17
- import UIRangeLogarithmic from "./ui.range.logarithmic.svelte";
18
- import UIRadioButtons from "./ui.radio.buttons.svelte";
19
- import UINumber from "./ui.number.svelte";
20
21
 
21
22
  export {
22
23
  UIAutocomplete,
23
- UICheckboxList,
24
24
  UICheckbox,
25
+ UICheckboxList,
25
26
  UIColor,
26
27
  UIDate,
27
28
  UIEmail,
28
29
  UIHidden,
29
30
  UILabel,
31
+ UINamedNumbersList,
32
+ UINumber,
30
33
  UIPassword,
34
+ UIRadioButtons,
35
+ UIRange,
36
+ UIRangeLogarithmic,
31
37
  UISelect,
32
38
  UISwitch,
33
39
  UITag,
34
40
  UITelephone,
35
41
  UITextarea,
36
42
  UITextfield,
37
- UIRange,
38
- UIRangeLogarithmic,
39
- UIRadioButtons,
40
- UINumber,
41
43
  };
package/src/elements/form/ui.autocomplete.svelte CHANGED
@@ -1,87 +1,97 @@
1
1
  <script>
2
+ import { LOCALE } from "../../locale";
3
+ import { createEventDispatcher } from "svelte";
4
+ let dispatch = createEventDispatcher();
2
5
 
3
- import {
4
- createEventDispatcher
5
- } from 'svelte';
6
- let dispatch = createEventDispatcher();
6
+ import AutoComplete from "simple-svelte-autocomplete";
7
+ import ErrorsList from "../various/ui.errors.list.svelte";
8
+ import UITextfield from "./ui.textfield.svelte";
9
+ import UICommon from "../common.js";
7
10
 
8
- import AutoComplete from 'simple-svelte-autocomplete';
9
- import ErrorsList from '../various/ui.errors.list.svelte';
10
- import UITextfield from './ui.textfield.svelte';
11
- import UICommon from '../common.js';
11
+ export let idField = "_id";
12
+ export let labelField = "title";
13
+ export let minCharactersToSearch = 3;
14
+ export let selectFirstIfEmpty = false;
15
+ export let maxItemsToShowInList = 20;
16
+ export let noResultsText = "Ничего не найдено";
17
+ export let showClear = true;
12
18
 
13
- export let idField = '_id';
14
- export let labelField = 'title';
15
- export let minCharactersToSearch = 3;
16
- export let selectFirstIfEmpty = false;
17
- export let maxItemsToShowInList = 20;
18
- export let noResultsText = 'Ничего не найдено';
19
- export let showClear = true;
19
+ export let value;
20
20
 
21
- export let value;
21
+ export let placeholder = "";
22
+ export let fieldname = "checkbox-list";
23
+ export let disabled = false;
24
+ export let readonly = false;
25
+ export let icon = false;
22
26
 
23
- export let placeholder = '';
24
- export let fieldname = 'checkbox-list';
25
- export let disabled = false;
26
- export let readonly = false;
27
- export let icon = false;
27
+ export let inputStarted = false;
28
+ export let valid = true;
29
+ export let validated = false;
30
+ export let errors = false;
31
+ export let formErrors = false;
32
+ export let formLevelError = false;
28
33
 
29
- export let inputStarted = false;
30
- export let valid = true;
31
- export let validated = false;
32
- export let errors = false;
33
- export let formErrors = false;
34
- export let formLevelError = false;
35
-
36
- export let searchFunction = (/*term*/)=>{return [];};
37
-
38
- $: iconClasses = (icon? ' has-icons-left ':'') + ' has-icons-right ';
39
- $: allErrors = [].concat(errors ? errors : [], formErrors ? formErrors : []);
40
- $: showErrors = (!(validated && valid) && (inputStarted));
41
- $: invalid = ((valid === false) || (formLevelError));
42
- $: validationClasses = (valid === true || !inputStarted) ? UICommon.CLASS_OK : UICommon.CLASS_ERR;
43
-
44
- function onChange() {
45
- let data = {
46
- field: fieldname,
47
- value,
34
+ export let searchFunction = (/*term*/) => {
35
+ return [];
48
36
  };
49
37
 
50
- inputStarted = true;
51
- dispatch('change', data);
52
- return true;
53
- }
38
+ $: iconClasses = (icon ? " has-icons-left " : "") + " has-icons-right ";
39
+ $: allErrors = [].concat(
40
+ errors ? errors : [],
41
+ formErrors ? formErrors : []
42
+ );
43
+ $: showErrors = !(validated && valid) && inputStarted;
44
+ $: invalid = valid === false || formLevelError;
45
+ $: validationClasses =
46
+ valid === true || !inputStarted
47
+ ? UICommon.CLASS_OK
48
+ : UICommon.CLASS_ERR;
54
49
 
50
+ function onChange() {
51
+ let data = {
52
+ field: fieldname,
53
+ value,
54
+ };
55
+
56
+ inputStarted = true;
57
+ dispatch("change", data);
58
+ return true;
59
+ }
55
60
  </script>
56
61
 
57
- {#if readonly }
58
- <UITextfield value={value?value.title:''} {fieldname} {placeholder} {icon} />
62
+ {#if readonly}
63
+ <UITextfield
64
+ value={value ? value.title : ""}
65
+ {fieldname}
66
+ {placeholder}
67
+ {icon}
68
+ />
59
69
  {:else}
60
- <div class="control">
61
- {#if readonly }
62
- <p>{value}</p>
63
- {:else}
64
- <AutoComplete
65
- {showClear}
66
- {disabled}
67
- {placeholder}
68
- {noResultsText}
69
- {onChange}
70
- {searchFunction}
71
- hideArrow={true}
72
- labelFieldName={labelField}
73
- valueFieldName={idField}
74
- {minCharactersToSearch}
75
- {selectFirstIfEmpty}
76
- {maxItemsToShowInList}
77
- bind:selectedItem={value}
70
+ <div class="control">
71
+ {#if readonly}
72
+ <p>{$LOCALE[value]}</p>
73
+ {:else}
74
+ <AutoComplete
75
+ {showClear}
76
+ {disabled}
77
+ {placeholder}
78
+ {noResultsText}
79
+ {onChange}
80
+ {searchFunction}
81
+ hideArrow={true}
82
+ labelFieldName={labelField}
83
+ valueFieldName={idField}
84
+ {minCharactersToSearch}
85
+ {selectFirstIfEmpty}
86
+ {maxItemsToShowInList}
87
+ bind:selectedItem={value}
88
+ />
89
+ {/if}
90
+ </div>
91
+ <ErrorsList
92
+ bind:errors={allErrors}
93
+ bind:show={showErrors}
94
+ bind:classes={validationClasses}
95
+ id="input-field-helper-{fieldname}"
78
96
  />
79
- {/if}
80
- </div>
81
- <ErrorsList
82
- bind:errors={allErrors}
83
- bind:show={showErrors}
84
- bind:classes={validationClasses}
85
- id="input-field-helper-{fieldname}"
86
- />
87
97
  {/if}
package/src/elements/form/ui.checkbox.svelte CHANGED
@@ -1,69 +1,93 @@
1
1
  <script>
2
- import {LOCALE} from '../../locale';
3
- import UICommon from '../common.js';
4
- import ErrorsList from '../various/ui.errors.list.svelte';
5
- import UIBooleans from '../various/ui.booleans.svelte';
2
+ import { LOCALE } from "../../locale";
3
+ import UICommon from "../common.js";
4
+ import ErrorsList from "../various/ui.errors.list.svelte";
5
+ import UIBooleans from "../various/ui.booleans.svelte";
6
6
 
7
- import {createEventDispatcher} from 'svelte';
8
- let dispatch = createEventDispatcher();
7
+ import { createEventDispatcher } from "svelte";
8
+ let dispatch = createEventDispatcher();
9
9
 
10
- export let inputStarted = false;
11
- export let value = false;
12
- export let label = 'checkbox';
13
- export let placeholder = 'checkbox placeholder';
14
- export let fieldname = 'checkbox';
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 validated = false;
21
- export let errors = false;
22
- export let formErrors = false;
23
- export let formLevelError = false;
10
+ export let inputStarted = false;
11
+ export let value = false;
12
+ export let label = "checkbox";
13
+ export let placeholder = "checkbox placeholder";
14
+ export let fieldname = "checkbox";
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 validated = false;
21
+ export let errors = false;
22
+ export let formErrors = false;
23
+ export let formLevelError = false;
24
24
 
25
- $: iconClasses = (icon? ' has-icons-left ':'') + ' has-icons-right ';
26
- $: allErrors = [].concat(errors?errors:[], formErrors?formErrors:[]);
27
- $: showErrors = (!(validated && valid) && (inputStarted));
28
- $: invalid = ((valid===false) || (formLevelError));
29
- $: validationClasses = (valid===true || !inputStarted)?UICommon.CLASS_OK:UICommon.CLASS_ERR;
25
+ $: iconClasses = (icon ? " has-icons-left " : "") + " has-icons-right ";
26
+ $: allErrors = [].concat(
27
+ errors ? errors : [],
28
+ formErrors ? formErrors : []
29
+ );
30
+ $: showErrors = !(validated && valid) && inputStarted;
31
+ $: invalid = valid === false || formLevelError;
32
+ $: validationClasses =
33
+ valid === true || !inputStarted
34
+ ? UICommon.CLASS_OK
35
+ : UICommon.CLASS_ERR;
30
36
 
31
- function onBlur(ev){
32
- let data = {
33
- field: fieldname,
34
- value: ev.currentTarget.type==='checkbox'?ev.currentTarget.checked: value
35
- };
36
- inputStarted = true;
37
- dispatch('change', data);
38
- return true;
39
- }
40
-
41
- function onInput(ev){
42
- let data = {
43
- field: fieldname,
44
- value: ev.currentTarget.type === 'checkbox'?ev.currentTarget.checked: value
45
- };
46
- inputStarted = true;
47
- dispatch('change', data);
48
- return true;
49
- }
37
+ function onBlur(ev) {
38
+ let data = {
39
+ field: fieldname,
40
+ value:
41
+ ev.currentTarget.type === "checkbox"
42
+ ? ev.currentTarget.checked
43
+ : value,
44
+ };
45
+ inputStarted = true;
46
+ dispatch("change", data);
47
+ return true;
48
+ }
50
49
 
50
+ function onInput(ev) {
51
+ let data = {
52
+ field: fieldname,
53
+ value:
54
+ ev.currentTarget.type === "checkbox"
55
+ ? ev.currentTarget.checked
56
+ : value,
57
+ };
58
+ inputStarted = true;
59
+ dispatch("change", data);
60
+ return true;
61
+ }
51
62
  </script>
52
63
 
53
64
  <div class="control {iconClasses}">
54
- <label class="checkbox" disabled={disabled} for="form-field-checkbox-{fieldname}">
55
- {#if readonly }
56
- <UIBooleans LC_TRUE={label} LC_FALSE={label} values={[{value}]} />
57
- {:else}
58
- <input type="checkbox" id="form-field-checkbox-{fieldname}" bind:checked={value} placeholder="{placeholder}" name="{fieldname}" required={required} {readonly} invalid="{invalid}" on:change={onBlur} on:input={onInput} aria-controls="input-field-helper-{fieldname}"
59
- aria-describedby="input-field-helper-{fieldname}" disabled={disabled}>
60
- {$LOCALE[label]}
61
- {/if}
62
- </label>
65
+ <label class="checkbox" {disabled} for="form-field-checkbox-{fieldname}">
66
+ {#if readonly}
67
+ <UIBooleans LC_TRUE={label} LC_FALSE={label} values={[{ value }]} />
68
+ {:else}
69
+ <input
70
+ type="checkbox"
71
+ id="form-field-checkbox-{fieldname}"
72
+ bind:checked={value}
73
+ {placeholder}
74
+ name={fieldname}
75
+ {required}
76
+ {readonly}
77
+ {invalid}
78
+ on:change={onBlur}
79
+ on:input={onInput}
80
+ aria-controls="input-field-helper-{fieldname}"
81
+ aria-describedby="input-field-helper-{fieldname}"
82
+ {disabled}
83
+ />
84
+ {$LOCALE[label]}
85
+ {/if}
86
+ </label>
63
87
  </div>
64
88
  <ErrorsList
65
- bind:errors={allErrors}
66
- bind:show={showErrors}
67
- bind:classes={validationClasses}
68
- id="input-field-helper-{fieldname}"
69
- />
89
+ bind:errors={allErrors}
90
+ bind:show={showErrors}
91
+ bind:classes={validationClasses}
92
+ id="input-field-helper-{fieldname}"
93
+ />
package/src/elements/form/ui.color.svelte CHANGED
@@ -1,76 +1,88 @@
1
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();
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
6
 
7
- export let inputStarted = false;
8
- export let value = '';
9
- export let placeholder = 'Select you favorite color';
10
- export let fieldname = 'color';
11
- export let icon = false;
12
- export let required = true;
13
- export let readonly = false;
14
- export let valid = true;
15
- export let validated = false;
16
- export let errors = false;
17
- export let formErrors = false;
18
- export let formLevelError = false;
7
+ export let inputStarted = false;
8
+ export let value = "";
9
+ export let placeholder = "Select you favorite color";
10
+ export let fieldname = "color";
11
+ export let icon = false;
12
+ export let required = true;
13
+ export let readonly = false;
14
+ export let valid = true;
15
+ export let validated = false;
16
+ export let errors = false;
17
+ export let formErrors = false;
18
+ export let formLevelError = false;
19
19
 
20
- $: iconClasses = (icon? ' has-icons-left ':'') + ' has-icons-right ';
21
- $: allErrors = [].concat(errors?errors:[], formErrors?formErrors:[]);
22
- $: showErrors = (!(validated && valid) && (inputStarted));
23
- $: invalid = ((valid===false) || (formLevelError));
24
- $: validationClasses = (valid===true || !inputStarted)?UICommon.CLASS_OK:UICommon.CLASS_ERR;
20
+ $: iconClasses = (icon ? " has-icons-left " : "") + " has-icons-right ";
21
+ $: allErrors = [].concat(
22
+ errors ? errors : [],
23
+ formErrors ? formErrors : []
24
+ );
25
+ $: showErrors = !(validated && valid) && inputStarted;
26
+ $: invalid = valid === false || formLevelError;
27
+ $: validationClasses =
28
+ valid === true || !inputStarted
29
+ ? UICommon.CLASS_OK
30
+ : UICommon.CLASS_ERR;
25
31
 
26
- function onBlur(ev){
27
- let data = {
28
- field: fieldname,
29
- value: ev.currentTarget.value
30
- };
31
- inputStarted = true;
32
- dispatch('change', data);
33
- return true;
34
- }
35
-
36
- function onInput(ev){
37
- let data = {
38
- field: fieldname,
39
- value: ev.currentTarget.value
40
- };
41
- inputStarted = true;
42
- dispatch('change', data);
43
- return true;
44
- }
32
+ function onBlur(ev) {
33
+ let data = {
34
+ field: fieldname,
35
+ value: ev.currentTarget.value,
36
+ };
37
+ inputStarted = true;
38
+ dispatch("change", data);
39
+ return true;
40
+ }
45
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
+ }
46
51
  </script>
47
52
 
48
- <div class="control {iconClasses}">
53
+ <div class="control {iconClasses}">
49
54
  <input
50
- id="form-field-color-{fieldname}"
51
- class="input {validationClasses}" type="color" name="{fieldname}"
52
- invalid="{invalid}" required={required}
53
- placeholder="{placeholder}"
54
- bind:value={value} autocomplete="{fieldname}"
55
- aria-controls="input-field-helper-{fieldname}"
56
- on:change={onBlur} on:input={onInput} {readonly}
57
- aria-describedby="input-field-helper-{fieldname}" />
58
- {#if icon }
59
- <span class="icon is-small is-left"><i class="fas fa-{icon}"></i></span>
55
+ id="form-field-color-{fieldname}"
56
+ class="input {validationClasses}"
57
+ type="color"
58
+ name={fieldname}
59
+ {invalid}
60
+ {required}
61
+ {placeholder}
62
+ bind:value
63
+ autocomplete={fieldname}
64
+ aria-controls="input-field-helper-{fieldname}"
65
+ on:change={onBlur}
66
+ on:input={onInput}
67
+ {readonly}
68
+ aria-describedby="input-field-helper-{fieldname}"
69
+ />
70
+ {#if icon}
71
+ <span class="icon is-small is-left"><i class="fas fa-{icon}" /></span>
60
72
  {/if}
61
- {#if validated === true }
62
- <span class="icon is-small is-right">
63
- {#if valid === true }
64
- <i class="fas fa-check"></i>
65
- {:else if (valid === false) }
66
- <i class="fas fa-exclamation-triangle"></i>
67
- {/if}
68
- </span>
73
+ {#if validated === true}
74
+ <span class="icon is-small is-right">
75
+ {#if valid === true}
76
+ <i class="fas fa-check" />
77
+ {:else if valid === false}
78
+ <i class="fas fa-exclamation-triangle" />
79
+ {/if}
80
+ </span>
69
81
  {/if}
70
- </div>
71
- <ErrorsList
82
+ </div>
83
+ <ErrorsList
72
84
  bind:errors={allErrors}
73
85
  bind:show={showErrors}
74
86
  bind:classes={validationClasses}
75
87
  id="input-field-helper-{fieldname}"
76
- />
88
+ />
package/src/elements/form/ui.hidden.svelte CHANGED
@@ -1,10 +1,8 @@
1
1
  <script>
2
-
3
- export let value = '';
4
- export let fieldname = 'hidden';
5
- export let required = true;
6
- export let readonly = false;
7
-
2
+ export let value = "";
3
+ export let fieldname = "hidden";
4
+ export let required = true;
5
+ export let readonly = false;
8
6
  </script>
9
7
 
10
- <input type="hidden" bind:value="{value}" {required} {readonly} name="{fieldname}"/>
8
+ <input type="hidden" bind:value {required} {readonly} name={fieldname} />
package/src/elements/form/ui.label.svelte CHANGED
@@ -1,9 +1,8 @@
1
1
  <script>
2
- import {LOCALE} from '../../locale';
2
+ import { LOCALE } from "../../locale";
3
3
 
4
- export let id;
5
- export let label = 'label';
4
+ export let id;
5
+ export let label = "label";
6
6
  </script>
7
7
 
8
-
9
8
  <label class="label" for={id}>{$LOCALE[label]}</label>
package/src/elements/{list/field.ui.named.numbers.list.svelte → form/ui.named.numbers.list.svelte} RENAMED
@@ -5,8 +5,8 @@
5
5
 
6
6
  import { UIColumns, UIColumn } from "../layout";
7
7
  import { UIButton } from "../button";
8
- import UINumber from "../form/ui.number.svelte";
9
- import UITextfield from "../form/ui.textfield.svelte";
8
+ import UINumber from "./ui.number.svelte";
9
+ import UITextfield from "./ui.textfield.svelte";
10
10
  import { UITitle } from "../various";
11
11
 
12
12
  export let fieldname = "numbers_list";
@@ -43,7 +43,7 @@
43
43
  if (Object.hasOwn(value, id)) {
44
44
  delete value[id];
45
45
  value = value;
46
- dispatch('change', {value: field: fieldname});
46
+ dispatch("change", { value, field: fieldname });
47
47
  }
48
48
  }
49
49
 
@@ -53,7 +53,7 @@
53
53
  if (id && id !== "" && !isNaN(number) && !Object.hasOwn(value, id)) {
54
54
  value[id] = number;
55
55
  }
56
- dispatch('change', {value: field: fieldname});
56
+ dispatch("change", { value, field: fieldname });
57
57
  }
58
58
 
59
59
  const createNewVal = () => {