not-bulma 1.0.82 → 1.0.83

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 (14) hide show
  1. package/package.json +1 -1
  2. package/src/elements/button/ui.button.svelte +66 -57
  3. package/src/elements/button/ui.buttons.svelte +24 -10
  4. package/src/elements/form/index.js +2 -0
  5. package/src/elements/form/ui.radio.buttons.svelte +166 -0
  6. package/src/elements/link/ui.link.svelte +57 -37
  7. package/src/elements/list/index.js +0 -2
  8. package/src/elements/list/ui.list.item.svelte +30 -12
  9. package/src/elements/list/ui.list.select.svelte +275 -55
  10. package/src/elements/various/ui.loader.svelte +17 -13
  11. package/src/elements/various/ui.tag.svelte +56 -52
  12. package/src/scss/_list-select.scss +16 -0
  13. package/src/scss/style.scss +2 -0
  14. package/src/elements/list/ui.list.select.group.svelte +0 -118
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "not-bulma",
3
- "version": "1.0.82",
3
+ "version": "1.0.83",
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/button/ui.button.svelte CHANGED
@@ -1,64 +1,73 @@
1
1
  <script>
2
- import {createEventDispatcher } from 'svelte';
3
- const dispatch = createEventDispatcher();
4
- import {LOCALE} from '../../locale';
2
+ import { createEventDispatcher } from "svelte";
3
+ const dispatch = createEventDispatcher();
4
+ import { LOCALE } from "../../locale";
5
5
 
6
- export let title = '';
7
- export let light = false;
8
- export let loading = false;
9
- export let raised = false;
10
- export let outlined = false;
11
- export let inverted = false;
12
- export let rounded = false;
13
- export let disabled = false;
14
- export let state = '';
15
- export let type = '';
16
- export let color = '';
17
- export let size = '';
18
- export let classes = '';
19
- export let icon = false;
20
- export let iconSide = 'right';
21
- export let action = ()=>{ return true; };
6
+ export let title = "";
7
+ export let light = false;
8
+ export let loading = false;
9
+ export let raised = false;
10
+ export let outlined = false;
11
+ export let inverted = false;
12
+ export let rounded = false;
13
+ export let disabled = false;
14
+ export let state = "";
15
+ export let type = "";
16
+ export let color = "";
17
+ export let size = "";
18
+ export let classes = "";
19
+ export let icon = false;
20
+ export let iconSide = "right";
21
+ export let action = () => {
22
+ return true;
23
+ };
24
+ export let value;
22
25
 
23
-
24
- function onClick(e){
25
- dispatch('click', e);
26
- return action(e);
27
- }
28
-
26
+ function onClick(event) {
27
+ dispatch("click", { event, value });
28
+ return action(event, value);
29
+ }
29
30
  </script>
30
31
 
31
32
  <button
32
- on:click={onClick}
33
- {disabled}
34
- type={type?type:""}
35
- class="
36
- button
37
- {classes}
38
- {state?`is-${state}`:''}
39
- {inverted?`is-inverted`:''}
40
- {outlined?`is-outlined`:''}
41
- {raised?`is-raised`:''}
42
- {rounded?`is-rounded`:''}
43
- {light?`is-light`:''}
44
- {loading?`is-loading`:''}
45
- {color?`is-${color}`:''}
46
- {size?`is-${size}`:''}
47
- "
48
- >
49
- <slot>
50
- {#if icon }
51
- {#if iconSide === 'left' }
52
- <span class="icon"><i class="fas fa-{icon} {size?`is-${size}`:''}"></i></span>
53
- {/if}
54
- {#if title }
55
- <span>{$LOCALE[title]}</span>
56
- {/if}
57
- {#if iconSide === 'right' }
58
- <span class="icon"><i class="fas fa-{icon} {size?`is-${size}`:''}"></i></span>
59
- {/if}
60
- {:else}
61
- {$LOCALE[title]}
62
- {/if}
63
- </slot>
33
+ on:click={onClick}
34
+ {disabled}
35
+ type={type ? type : ""}
36
+ class="
37
+ button
38
+ {classes}
39
+ {state ? `is-${state}` : ''}
40
+ {inverted ? `is-inverted` : ''}
41
+ {outlined ? `is-outlined` : ''}
42
+ {raised ? `is-raised` : ''}
43
+ {rounded ? `is-rounded` : ''}
44
+ {light ? `is-light` : ''}
45
+ {loading ? `is-loading` : ''}
46
+ {color ? `is-${color}` : ''}
47
+ {size ? `is-${size}` : ''}
48
+ "
49
+ >
50
+ <slot>
51
+ {#if icon}
52
+ {#if iconSide === "left"}
53
+ <span class="icon"
54
+ ><i
55
+ class="fas fa-{icon} {size ? `is-${size}` : ''}"
56
+ /></span
57
+ >
58
+ {/if}
59
+ {#if title}
60
+ <span>{$LOCALE[title]}</span>
61
+ {/if}
62
+ {#if iconSide === "right"}
63
+ <span class="icon"
64
+ ><i
65
+ class="fas fa-{icon} {size ? `is-${size}` : ''}"
66
+ /></span
67
+ >
68
+ {/if}
69
+ {:else}
70
+ {$LOCALE[title]}
71
+ {/if}
72
+ </slot>
64
73
  </button>
package/src/elements/button/ui.buttons.svelte CHANGED
@@ -1,14 +1,28 @@
1
1
  <script>
2
- import UIButton from './ui.button.svelte';
3
-
4
- export let values = [];
5
- export let centered = false;
6
- export let right = false;
7
- export let classes = '';
2
+ import { createEventDispatcher } from "svelte";
3
+ const dispatch = createEventDispatcher();
4
+ import UIButton from "./ui.button.svelte";
5
+
6
+ export let values = [];
7
+ export let centered = false;
8
+ export let right = false;
9
+ export let classes = "";
10
+
11
+ export let action = (e) => {
12
+ dispatch("click", e);
13
+ };
8
14
  </script>
9
15
 
10
- <div class="buttons has-addons {centered?'is-centered':''} {right?'is-right':''} {classes}">
11
- {#each values as item (item) }
12
- <UIButton {...item} />
13
- {/each}
16
+ <div
17
+ class="buttons has-addons {centered ? 'is-centered' : ''} {right
18
+ ? 'is-right'
19
+ : ''} {classes}"
20
+ >
21
+ {#each values as item (item)}
22
+ <UIButton
23
+ {...item}
24
+ action={item.action ? item.action : action}
25
+ on:click
26
+ />
27
+ {/each}
14
28
  </div>
package/src/elements/form/index.js CHANGED
@@ -15,6 +15,7 @@ import UITextarea from "./ui.textarea.svelte";
15
15
  import UITextfield from "./ui.textfield.svelte";
16
16
  import UIRange from "./ui.range.svelte";
17
17
  import UIRangeLogarithmic from "./ui.range.logarithmic.svelte";
18
+ import UIRadioButtons from "./ui.radio.buttons.svelte";
18
19
  import UINumber from "./ui.number.svelte";
19
20
 
20
21
  export {
@@ -35,5 +36,6 @@ export {
35
36
  UITextfield,
36
37
  UIRange,
37
38
  UIRangeLogarithmic,
39
+ UIRadioButtons,
38
40
  UINumber,
39
41
  };
package/src/elements/form/ui.radio.buttons.svelte ADDED
@@ -0,0 +1,166 @@
1
+ <script>
2
+ import { onMount, createEventDispatcher } from "svelte";
3
+ const dispatch = createEventDispatcher();
4
+ //
5
+ import UIList from "../list/ui.list.svelte";
6
+ import UITitle from "../various/ui.title.svelte";
7
+ import UIImage from "../image/ui.image.svelte";
8
+ import UIButtons from "../button/ui.buttons.svelte";
9
+
10
+ export let fieldname = "radio-buttons";
11
+ //
12
+
13
+ /*
14
+ [
15
+ //array of groups
16
+ {
17
+ id:number,
18
+ title:string|object,
19
+ image:string|object,
20
+ variants = [
21
+ //array of values variants in group
22
+ {
23
+ id:number,
24
+ title:string|object,
25
+ description:string|object,
26
+ image:string|object,
27
+ value:object
28
+ }]
29
+ }
30
+ ]
31
+ */
32
+ export let variants = [];
33
+ /*
34
+ multiple && multiple in group
35
+ {
36
+ //array of arrays of selected values in group
37
+ //if no selection group should be empty array
38
+ [groupId]: [...variantsId]
39
+ }
40
+ multiple && one in group
41
+ {
42
+ [groupId]: variantId
43
+ }
44
+ only one (not multiple && one in group)
45
+ {
46
+ group: groupId
47
+ value: variantId
48
+ }
49
+ */
50
+ export let value;
51
+ export let title;
52
+ export let image;
53
+
54
+ export let buttonProps = {};
55
+
56
+ //
57
+ export let titleComponent = UITitle;
58
+ export let titleComponentProps = { size: 5 };
59
+ //
60
+ export let imageComponent = UIImage;
61
+ export let imageComponentProps = { covered: true };
62
+ //
63
+ export let descriptionComponent = UIButtons;
64
+ export let descriptionComponentProps = {};
65
+ //
66
+ export let listComponent = UIList;
67
+ export let listComponentProps = {};
68
+ //
69
+ export let getUIItem = (valueId) => {
70
+ return variantsButtons.find((btnVal) => btnVal.value === valueId);
71
+ };
72
+
73
+ export let getDefaultItemSublime = () => {
74
+ return variants[0].value;
75
+ };
76
+ //
77
+ export let uiOn = (item) => {
78
+ item.color = "success";
79
+ item.outlined = false;
80
+ };
81
+ export let uiOff = (item) => {
82
+ item.color = false;
83
+ item.outlined = true;
84
+ };
85
+
86
+ onMount(() => {
87
+ initVariantsButton();
88
+ selectDefault();
89
+ });
90
+
91
+ let variantsButtons = [],
92
+ listItems = [];
93
+
94
+ function initVariantsButton() {
95
+ variantsButtons = variants.map((variant) => {
96
+ return { ...buttonProps, ...variant };
97
+ });
98
+ listItems = [
99
+ {
100
+ id: 0,
101
+ title,
102
+ image,
103
+ description: { values: variantsButtons },
104
+ },
105
+ ];
106
+ }
107
+
108
+ //
109
+ function toggle(selectedValue) {
110
+ let ui = {
111
+ on: undefined,
112
+ off: undefined,
113
+ };
114
+ //
115
+ if (value) {
116
+ ui.off = value;
117
+ ui.on = selectedValue;
118
+ }
119
+ value = selectedValue;
120
+ updateUI(ui);
121
+ //
122
+ dispatch("change", {
123
+ field: fieldname,
124
+ value,
125
+ });
126
+ }
127
+ //
128
+ function updateUI(changes) {
129
+ if (changes.off) {
130
+ uiOff(getUIItem(changes.off));
131
+ }
132
+ if (changes.on) {
133
+ uiOn(getUIItem(changes.on));
134
+ }
135
+ variantsButtons = variantsButtons;
136
+ listItems = listItems;
137
+ }
138
+ //
139
+ function selectDefault() {
140
+ if (variants.length > 0) {
141
+ if (typeof value !== "undefined") {
142
+ updateUI({ on: value });
143
+ } else {
144
+ const defValue = getDefaultItemSublime();
145
+ toggle(defValue);
146
+ }
147
+ }
148
+ }
149
+ </script>
150
+
151
+ <svelte:component
152
+ this={listComponent}
153
+ {...listComponentProps}
154
+ bind:items={listItems}
155
+ {titleComponent}
156
+ {titleComponentProps}
157
+ {descriptionComponent}
158
+ descriptionComponentProps={{
159
+ ...descriptionComponentProps,
160
+ action(event, value) {
161
+ toggle(value);
162
+ },
163
+ }}
164
+ {imageComponent}
165
+ {imageComponentProps}
166
+ />
package/src/elements/link/ui.link.svelte CHANGED
@@ -1,43 +1,63 @@
1
1
  <script>
2
- import {LOCALE} from '../../locale';
3
- export let title = '';
4
- export let url = '';
5
- export let light = false;
6
- export let loading = false;
7
- export let raised = false;
8
- export let outlined = false;
9
- export let inverted = false;
10
- export let rounded = false;
11
- export let state = '';
12
- export let type = '';
13
- export let color = '';
14
- export let size = '';
15
- export let classes = 'button ';
16
- export let icon = false;
17
- export let iconSide = 'right';
18
- export let action = () => {
19
- return true;
20
- };
2
+ import { LOCALE } from "../../locale";
3
+ export let title = "";
4
+ export let url = "";
5
+ export let target = "blank";
6
+ export let light = false;
7
+ export let loading = false;
8
+ export let raised = false;
9
+ export let outlined = false;
10
+ export let inverted = false;
11
+ export let rounded = false;
12
+ export let state = "";
13
+ export let type = "";
14
+ export let color = "";
15
+ export let size = "";
16
+ export let classes = "button ";
17
+ export let icon = false;
18
+ export let iconSide = "right";
19
+ export let action = () => {
20
+ return true;
21
+ };
21
22
 
22
- $: {
23
- classes = (state && state.length > 0 ? (` is-${state} `) : '') +
24
- (light ? (` is-light `) : '') + (type && type.length > 0 ? (` is-${type} `) : '') +
25
- (size && size.length > 0 ? (` is-${size} `) : '');
26
- }
23
+ $: {
24
+ classes =
25
+ (state && state.length > 0 ? ` is-${state} ` : "") +
26
+ (light ? ` is-light ` : "") +
27
+ (type && type.length > 0 ? ` is-${type} ` : "") +
28
+ (size && size.length > 0 ? ` is-${size} ` : "");
29
+ }
27
30
  </script>
28
31
 
29
- <a on:click="{action}" href="{url}" class="{classes} {state?`is-${state}`:''} {inverted?`is-inverted`:''} {outlined?`is-outlined`:''} {raised?`is-raised`:''} {rounded?`is-rounded`:''} {light?`is-light`:''} {loading?`is-loading`:''} {color?`is-${color}`:''} {type?`is-${type}`:''} {size?`is-${size}`:''}">
30
- {#if icon }
31
- {#if iconSide === 'left' }
32
- <span class="icon"><i class="fas fa-{icon} {size?`is-${size}`:''}"></i></span>
32
+ <a
33
+ on:click={action}
34
+ target="_{target}"
35
+ href={url}
36
+ class="{classes} {state ? `is-${state}` : ''} {inverted
37
+ ? `is-inverted`
38
+ : ''} {outlined ? `is-outlined` : ''} {raised
39
+ ? `is-raised`
40
+ : ''} {rounded ? `is-rounded` : ''} {light ? `is-light` : ''} {loading
41
+ ? `is-loading`
42
+ : ''} {color ? `is-${color}` : ''} {type ? `is-${type}` : ''} {size
43
+ ? `is-${size}`
44
+ : ''}"
45
+ >
46
+ {#if icon}
47
+ {#if iconSide === "left"}
48
+ <span class="icon"
49
+ ><i class="fas fa-{icon} {size ? `is-${size}` : ''}" /></span
50
+ >
51
+ {/if}
52
+ {#if title}
53
+ <span>{$LOCALE[title]}</span>
54
+ {/if}
55
+ {#if iconSide === "right"}
56
+ <span class="icon"
57
+ ><i class="fas fa-{icon} {size ? `is-${size}` : ''}" /></span
58
+ >
59
+ {/if}
60
+ {:else}
61
+ {$LOCALE[title]}
33
62
  {/if}
34
- {#if title }
35
- <span>{$LOCALE[title]}</span>
36
- {/if}
37
- {#if iconSide === 'right' }
38
- <span class="icon"><i class="fas fa-{icon} {size?`is-${size}`:''}"></i></span>
39
- {/if}
40
- {:else}
41
- {$LOCALE[title]}
42
- {/if}
43
63
  </a>
package/src/elements/list/index.js CHANGED
@@ -11,7 +11,6 @@ import UIListEmptyPlaceholder from "./ui.list.empty.placeholder.svelte";
11
11
  //form element based on UIList alike component
12
12
 
13
13
  import UIListSelect from "./ui.list.select.svelte";
14
- import UIListSelectGroup from "./ui.list.select.group.svelte";
15
14
 
16
15
  export {
17
16
  UIEndlessListNavigation,
@@ -21,5 +20,4 @@ export {
21
20
  UIListItem,
22
21
  UIListEmptyPlaceholder,
23
22
  UIListSelect,
24
- UIListSelectGroup,
25
23
  };
package/src/elements/list/ui.list.item.svelte CHANGED
@@ -46,12 +46,19 @@
46
46
  }}
47
47
  >
48
48
  {#if imageComponent}
49
- <svelte:component
50
- this={imageComponent}
51
- value={image}
52
- {...imageComponentProps}
53
- on:change
54
- />
49
+ {#if typeof image === "string"}
50
+ <svelte:component
51
+ this={imageComponent}
52
+ value={image}
53
+ {...imageComponentProps}
54
+ />
55
+ {:else}
56
+ <svelte:component
57
+ this={imageComponent}
58
+ {...image}
59
+ {...imageComponentProps}
60
+ />
61
+ {/if}
55
62
  {:else}
56
63
  <figure class="image is-64x64">
57
64
  <img class="is-rounded" src={image} alt={title} />
@@ -104,12 +111,23 @@
104
111
  }}
105
112
  >
106
113
  {#if descriptionComponent}
107
- <svelte:component
108
- this={descriptionComponent}
109
- value={description}
110
- {...descriptionComponentProps}
111
- on:change
112
- />
114
+ {#if typeof description === "string"}
115
+ <svelte:component
116
+ this={descriptionComponent}
117
+ value={description}
118
+ {...descriptionComponentProps}
119
+ on:change
120
+ on:click
121
+ />
122
+ {:else}
123
+ <svelte:component
124
+ this={descriptionComponent}
125
+ {...description}
126
+ {...descriptionComponentProps}
127
+ on:change
128
+ on:click
129
+ />
130
+ {/if}
113
131
  {:else}
114
132
  {description}
115
133
  {/if}
package/src/elements/list/ui.list.select.svelte CHANGED
@@ -1,83 +1,303 @@
1
1
  <script>
2
- import { createEventDispatcher, onMount } from "svelte";
2
+ import { onMount, createEventDispatcher } from "svelte";
3
3
  const dispatch = createEventDispatcher();
4
-
4
+ //
5
5
  import UIList from "./ui.list.svelte";
6
- export let fieldname = "list-select";
7
- export let variants = [];
8
- export let values = [];
9
- export let defaultSelectAll = true;
10
- export let selectedClass = "is-active";
11
- export let getId = (val) => {
12
- return val.id;
13
- };
6
+ import UITitle from "../various/ui.title.svelte";
7
+ import UIImage from "../image/ui.image.svelte";
8
+ import UIButtons from "../button/ui.buttons.svelte";
14
9
 
15
- export const collectData = () => {
16
- return values;
17
- };
10
+ export let fieldname = "list-select-tags";
11
+ export let multiple = false;
12
+ export let onlyOneInGroup = true;
13
+ export let atLeastOne = true;
18
14
 
19
- //list UI
15
+ /*
16
+ [
17
+ //array of groups
18
+ {
19
+ id:number,
20
+ title:string|object,
21
+ image:string|object,
22
+ variants = [
23
+ //array of values variants in group
24
+ {
25
+ id:number,
26
+ title:string|object,
27
+ description:string|object,
28
+ image:string|object,
29
+ value:object
30
+ }]
31
+ }
32
+ ]
33
+ */
34
+ export let variants = [];
35
+ /*
36
+ multiple && multiple in group
37
+ {
38
+ //array of arrays of selected values in group
39
+ //if no selection group should be empty array
40
+ [groupId]: [...variantsId]
41
+ }
42
+ multiple && one in group
43
+ {
44
+ [groupId]: variantId
45
+ }
46
+ only one (not multiple && one in group)
47
+ {
48
+ group: groupId
49
+ value: variantId
50
+ }
51
+ */
52
+ export let variantsSelected = {};
53
+ //{[groupId]: [...valuesOfSelectedItems]}
54
+ export let value;
55
+ //
56
+ export let titleComponent = UITitle;
57
+ export let titleComponentProps = { size: 5 };
58
+ //
59
+ export let imageComponent = UIImage;
60
+ export let imageComponentProps = { covered: true };
61
+ //
62
+ export let descriptionComponent = UIButtons;
63
+ export let descriptionComponentProps = {};
64
+ //
20
65
  export let listComponent = UIList;
21
66
  export let listComponentProps = {};
67
+ //
68
+ export let sublimeValue = (value) => {
69
+ return {
70
+ groupId: value.group,
71
+ valueId: value.id,
72
+ };
73
+ };
74
+ //
75
+ export let getItem = ({ groupId, valueId }) => {
76
+ return variants
77
+ .find((group) => group.id === groupId)
78
+ .description.values.find((btnVal) => btnVal.value.id === valueId);
79
+ };
80
+ export let getItemValue = ({ groupId, valueId }) => {
81
+ return getItem({ groupId, valueId }).value;
82
+ };
83
+ export let getDefaultItemSublime = () => {
84
+ return {
85
+ groupId: variants[0].id,
86
+ valueId: variants[0].description.values[0].value.id,
87
+ };
88
+ };
89
+ //
90
+ export let uiOn = (item) => {
91
+ item.color = "success";
92
+ item.outlined = false;
93
+ };
94
+ export let uiOff = (item) => {
95
+ item.color = false;
96
+ item.outlined = true;
97
+ };
22
98
 
23
- function toggle({ detail }) {
24
- const value = detail;
25
- const id = getId(value);
26
- if (values.includes(id)) {
27
- values.splice(values.indexOf(id), 1);
99
+ onMount(() => {
100
+ if (value) {
101
+ if (multiple) {
102
+ if (onlyOneInGroup) {
103
+ for (let t of Object.keys(value)) {
104
+ const itemValue = value[t];
105
+ let ui = updateSelected(itemValue);
106
+ updateUI(ui);
107
+ }
108
+ } else {
109
+ for (let t of Object.keys(value)) {
110
+ value[t].forEach((itemValue) => {
111
+ let ui = updateSelected(itemValue);
112
+ updateUI(ui);
113
+ });
114
+ }
115
+ }
116
+ } else {
117
+ let ui = updateSelected(value);
118
+ updateUI(ui);
119
+ }
28
120
  } else {
29
- values.push(id);
121
+ selectDefault();
30
122
  }
31
- values = values;
32
- updateItemsClasses();
123
+ });
124
+ //
125
+ function countOfSelected() {
126
+ let c = 0;
127
+ if (multiple) {
128
+ for (let groupValue of Object.values(variantsSelected)) {
129
+ if (onlyOneInGroup) {
130
+ if (typeof groupValue !== "undefined") {
131
+ c++;
132
+ }
133
+ } else {
134
+ if (
135
+ typeof groupValue !== "undefined" &&
136
+ Array.isArray(groupValue)
137
+ ) {
138
+ c += groupValue.length;
139
+ }
140
+ }
141
+ }
142
+ } else {
143
+ if (
144
+ typeof variantsSelected !== "undefined" &&
145
+ typeof variantsSelected.value !== "undefined" &&
146
+ typeof variantsSelected.group !== "undefined"
147
+ ) {
148
+ c++;
149
+ }
150
+ }
151
+ return c;
152
+ }
153
+ //
154
+ function updateSelected(detail) {
155
+ const { valueId, groupId } = sublimeValue(detail);
156
+ let ui = {
157
+ on: undefined,
158
+ off: undefined,
159
+ };
160
+ //
161
+ if (multiple) {
162
+ if (onlyOneInGroup) {
163
+ if (typeof variantsSelected[groupId] !== "undefined") {
164
+ ui.off = { groupId, valueId: variantsSelected[groupId] };
165
+ }
166
+ variantsSelected[groupId] = valueId;
167
+ ui.on = { groupId, valueId };
168
+ } else {
169
+ if (!Array.isArray(variantsSelected[groupId])) {
170
+ variantsSelected[groupId] = [];
171
+ }
172
+ if (variantsSelected[groupId].includes(valueId)) {
173
+ if (countOfSelected() > 1) {
174
+ variantsSelected[groupId].splice(
175
+ variantsSelected[groupId].indexOf(valueId),
176
+ 1
177
+ );
178
+ ui.off = { groupId, valueId };
179
+ }
180
+ } else {
181
+ variantsSelected[groupId].push(valueId);
182
+ ui.on = { groupId, valueId };
183
+ }
184
+ variantsSelected[groupId] = variantsSelected[groupId];
185
+ }
186
+ variantsSelected = variantsSelected;
187
+ } else {
188
+ if (
189
+ variantsSelected &&
190
+ variantsSelected.groupId === groupId &&
191
+ variantsSelected.valueId === valueId
192
+ ) {
193
+ if (!atLeastOne) {
194
+ variantsSelected = undefined;
195
+ ui.off = { groupId, valueId };
196
+ }
197
+ } else {
198
+ if (variantsSelected) {
199
+ if (typeof variantsSelected.groupId !== "undefined") {
200
+ ui.off = {
201
+ groupId: variantsSelected.groupId,
202
+ valueId: variantsSelected.valueId,
203
+ };
204
+ }
205
+ }
206
+ ui.on = { groupId, valueId };
207
+ variantsSelected = { groupId, valueId };
208
+ }
209
+ }
210
+ return ui;
211
+ }
212
+ //
213
+ function toggle(detail) {
214
+ let ui = updateSelected(detail);
215
+ console.log("image value", value, ui);
216
+ updateUI(ui);
217
+ //
218
+ updateValue();
219
+ //
33
220
  dispatch("change", {
34
221
  field: fieldname,
35
- value: values,
222
+ value,
36
223
  });
37
224
  }
38
-
39
- onMount(() => {
40
- if (defaultSelectAll) {
41
- variants.forEach((val) => {
42
- values.push(getId(val));
43
- });
44
- values = values;
45
- updateItemsClasses();
225
+ //
226
+ function updateUI(changes) {
227
+ if (changes.off) {
228
+ uiOff(getItem(changes.off));
46
229
  }
47
- });
48
-
49
- function updateItemsClasses() {
50
- for (let item of variants) {
51
- const id = getId(item);
52
- if (values.includes(id)) {
53
- addClass(item, selectedClass);
54
- } else {
55
- removeClass(item, selectedClass);
56
- }
230
+ if (changes.on) {
231
+ uiOn(getItem(changes.on));
57
232
  }
58
233
  variants = variants;
59
234
  }
60
-
61
- function addClass(item, cls) {
62
- const lst = item.classes.split(" ");
63
- if (!lst.includes(cls)) {
64
- lst.push(cls);
65
- item.classes = lst.join(" ");
235
+ //
236
+ function updateValue() {
237
+ if (multiple) {
238
+ let newVal = {};
239
+ if (onlyOneInGroup) {
240
+ for (let groupId in variantsSelected) {
241
+ if (typeof variantsSelected[groupId] !== "undefined") {
242
+ newVal[groupId] = getItemValue({
243
+ groupId,
244
+ valueId: variantsSelected[groupId],
245
+ });
246
+ }
247
+ }
248
+ } else {
249
+ for (let groupId in variantsSelected) {
250
+ if (
251
+ typeof variantsSelected[groupId] !== "undefined" &&
252
+ Array.isArray(variantsSelected[groupId])
253
+ ) {
254
+ newVal[groupId] = variantsSelected[groupId]
255
+ .filter((val) => typeof val !== "undefined")
256
+ .map((itemValueId) => {
257
+ return getItemValue({
258
+ groupId,
259
+ valueId: itemValueId,
260
+ });
261
+ });
262
+ }
263
+ }
264
+ }
265
+ if (Object.keys(newVal).length == 0) {
266
+ value = undefined;
267
+ } else {
268
+ value = newVal;
269
+ }
270
+ } else {
271
+ if (variantsSelected) {
272
+ value = getItemValue(variantsSelected);
273
+ } else {
274
+ value = undefined;
275
+ }
66
276
  }
67
277
  }
68
-
69
- function removeClass(item, cls) {
70
- const lst = item.classes.split(" ");
71
- if (lst.includes(cls)) {
72
- lst.splice(lst.indexOf(cls), 1);
73
- item.classes = lst.join(" ");
278
+ //
279
+ function selectDefault() {
280
+ if (atLeastOne && variants.length > 0) {
281
+ const defValue = getDefaultItemSublime();
282
+ toggle({ id: defValue.valueId, group: defValue.groupId });
283
+ } else {
74
284
  }
75
285
  }
76
286
  </script>
77
287
 
78
288
  <svelte:component
79
289
  this={listComponent}
80
- {listComponentProps}
290
+ {...listComponentProps}
81
291
  bind:items={variants}
82
- on:click={toggle}
292
+ {titleComponent}
293
+ {titleComponentProps}
294
+ {descriptionComponent}
295
+ descriptionComponentProps={{
296
+ ...descriptionComponentProps,
297
+ action(event, value) {
298
+ toggle(value);
299
+ },
300
+ }}
301
+ {imageComponent}
302
+ {imageComponentProps}
83
303
  />
package/src/elements/various/ui.loader.svelte CHANGED
@@ -1,18 +1,22 @@
1
1
  <script>
2
- import 'bulma-pageloader';
3
- import {LOCALE} from '../../locale';
4
- //state if form loading
5
- export let loading = false;
6
- //hidden - no loader
7
- //container - parent container of form
8
- //page - whole page
9
- export let size = 'container';
2
+ import "bulma-pageloader";
3
+ import { LOCALE } from "../../locale";
4
+ //state if form loading
5
+ export let loading = false;
6
+ //hidden - no loader
7
+ //container - parent container of form
8
+ //page - whole page
9
+ export let size = "container";
10
10
 
11
- export let title = 'Waiting...';
11
+ export let title = "Waiting...";
12
12
  </script>
13
13
 
14
- {#if size!=='hidden' }
15
- <div class="{size==='page'?'pageloader':'containerloader'} {loading?'is-active':''}" >
16
- <span class="title">{$LOCALE[title]}</span>
17
- </div>
14
+ {#if size !== "hidden"}
15
+ <div
16
+ class="{size === 'page' ? 'pageloader' : 'containerloader'} {loading
17
+ ? 'is-active'
18
+ : ''}"
19
+ >
20
+ <span class="title">{$LOCALE[title]}</span>
21
+ </div>
18
22
  {/if}
package/src/elements/various/ui.tag.svelte CHANGED
@@ -1,63 +1,67 @@
1
1
  <script>
2
- import {onMount} from 'svelte';
3
-
4
- import {LOCALE} from '../../locale';
5
- import notCommon from '../../frame/common';
6
- //if we want to address this tag
7
- export let id = 'tagId';
8
- export let title = 'tag';
9
- export let color = 'info';
10
- export let size = 'normal';
11
-
12
- export let padding = 'normal';
13
- export let bold = false;
14
-
15
- export let right = false;
16
- export let left = false;
17
- export let top = false;
18
- export let bottom = false;
19
-
20
- export let classes = '';
21
- let sided = false;
22
- $: sided = right || left || top || bottom;
23
-
24
- export let events = {}; //events to react on
25
- //register event handlers
26
- export let register = notCommon.registerWidgetEvents.bind(notCommon);
27
- //
28
- export let onUpdate = (data)=>{
29
- if (Object.prototype.hasOwnProperty.call(data, 'title')){
30
- title = data.title;
31
- }
32
- };
2
+ import { onMount } from "svelte";
3
+
4
+ import { LOCALE } from "../../locale";
5
+ import notCommon from "../../frame/common";
6
+ //if we want to address this tag
7
+ export let id = "tagId";
8
+ export let title = "tag";
9
+ export let color = "info";
10
+ export let size = "normal";
11
+
12
+ export let padding = "normal";
13
+ export let bold = false;
14
+
15
+ export let right = false;
16
+ export let left = false;
17
+ export let top = false;
18
+ export let bottom = false;
19
+
20
+ export let classes = "";
21
+ let sided = false;
22
+ $: sided = right || left || top || bottom;
33
23
 
34
- function getStandartUpdateEventName(){
35
- return `tag-${id}:update`;
36
- }
24
+ export let events = {}; //events to react on
25
+ //register event handlers
26
+ export let register = notCommon.registerWidgetEvents.bind(notCommon);
27
+ //
28
+ export let onUpdate = (data) => {
29
+ if (Object.prototype.hasOwnProperty.call(data, "title")) {
30
+ title = data.title;
31
+ }
32
+ };
37
33
 
38
- onMount(()=>{
39
- if (!Object.prototype.hasOwnProperty.call(events, getStandartUpdateEventName())){
40
- events[getStandartUpdateEventName()] = onUpdate;
34
+ function getStandartUpdateEventName() {
35
+ return `tag-${id}:update`;
41
36
  }
42
- register(events);
43
- });
44
37
 
38
+ onMount(() => {
39
+ if (
40
+ !Object.prototype.hasOwnProperty.call(
41
+ events,
42
+ getStandartUpdateEventName()
43
+ )
44
+ ) {
45
+ events[getStandartUpdateEventName()] = onUpdate;
46
+ }
47
+ register(events);
48
+ });
45
49
  </script>
46
50
 
47
- {#if title }
48
- <span
49
- id="tag-{id}"
50
- class="
51
+ {#if title}
52
+ <span
53
+ id="tag-{id}"
54
+ class="
51
55
  tag
52
- {bold?'has-text-weight-bold':''}
53
- {padding!=='normal'?`is-padded-${padding}`:''}
56
+ {bold ? 'has-text-weight-bold' : ''}
57
+ {padding !== 'normal' ? `is-padded-${padding}` : ''}
54
58
  is-{size}
55
59
  is-{color}
56
- {sided?'is-sided':''}
57
- {right?'is-sided-right':''}
58
- {left?'is-sided-left':''}
59
- {top?'is-sided-top':''}
60
- {bottom?'is-sided-bottom':''}
61
- {classes}"
62
- >{$LOCALE[title]}</span>
60
+ {sided ? 'is-sided' : ''}
61
+ {right ? 'is-sided-right' : ''}
62
+ {left ? 'is-sided-left' : ''}
63
+ {top ? 'is-sided-top' : ''}
64
+ {bottom ? 'is-sided-bottom' : ''}
65
+ {classes}">{$LOCALE[title]}</span
66
+ >
63
67
  {/if}
package/src/scss/_list-select.scss ADDED
@@ -0,0 +1,16 @@
1
+ .list.selectable .list-item{
2
+ cursor: pointer;
3
+ &.is-active{
4
+ background-color: hsl(171, 100%, 41%);
5
+ }
6
+ & .list-item-title h6{
7
+ margin-bottom: 0rem !important;
8
+ }
9
+ }
10
+
11
+ figure.image img.is-covered{
12
+ object-fit: cover !important;
13
+ width: 100% !important;
14
+ height: 100% !important;
15
+
16
+ }
package/src/scss/style.scss CHANGED
@@ -9,6 +9,8 @@
9
9
  @import "./_breadcrumbs.scss";
10
10
 
11
11
  @import "./_bulma-list.scss";
12
+
13
+ @import "./_list-select.scss";
12
14
  .navbar-menu.is-active{
13
15
  display: flex;
14
16
  }
package/src/elements/list/ui.list.select.group.svelte DELETED
@@ -1,118 +0,0 @@
1
- <script>
2
- import { onMount, createEventDispatcher } from "svelte";
3
- const dispatch = createEventDispatcher();
4
- //
5
- import { UIColumns, UIColumn } from "../layout";
6
- import UIListSelect from "./ui.list.select.svelte";
7
- import UITitle from "../various/ui.title.svelte";
8
- import UIImage from "../image/ui.image.svelte";
9
-
10
- export let fieldname = "list-select-group";
11
- /*
12
- [
13
- //array of groups
14
- {
15
- id:number,
16
- title:string|object,
17
- image:string|object,
18
- variants = [
19
- //array of values variants in group
20
- {
21
- id:number,
22
- title:string|object,
23
- description:string|object,
24
- image:string|object,
25
- value:object
26
- }]
27
- }
28
- ]
29
- */
30
- export let variants = [];
31
- /*
32
- [
33
- //array of arrays of selected values in group
34
- //if no selection group should be empty array
35
- ...[...selected_variants_values_in_group]
36
- ]
37
- */
38
- export let value = [];
39
- //
40
- export let titleComponent = UITitle;
41
- export let titleComponentProps = { size: 5 };
42
- //
43
- export let imageComponent = UIImage;
44
- export let imageComponentProps = { covered: true, contained: true };
45
- //
46
- export let listComponent = UIListSelect;
47
- export let listComponentProps = {};
48
-
49
- $: {
50
- variants.length;
51
- initValue();
52
- }
53
-
54
- onMount(() => {});
55
-
56
- function initValue() {
57
- value = variants.map(() => []);
58
- value = value;
59
- }
60
-
61
- function updateSelectedInGroup(groupId, values) {
62
- const index = variants.findIndex((val) => val.id === groupId);
63
- value[index] = [...values];
64
- value = value;
65
- dispatch("change", {
66
- field: fieldname,
67
- value,
68
- });
69
- }
70
- </script>
71
-
72
- {#each variants as variantsGroup (variantsGroup.id)}
73
- {#if variantsGroup.title}
74
- {#if typeof variantsGroup.title === "string"}
75
- <svelte:component
76
- this={titleComponent}
77
- {...titleComponentProps}
78
- title={variantsGroup.title}
79
- subtitle={variantsGroup.subtitle}
80
- />
81
- {:else}
82
- <svelte:component
83
- this={titleComponent}
84
- {...titleComponentProps}
85
- {...variantsGroup.title}
86
- />
87
- {/if}
88
- {/if}
89
- <UIColumns>
90
- {#if variantsGroup.image}
91
- <UIColumn>
92
- {#if typeof variantsGroup.title === "string"}
93
- <svelte:component
94
- this={imageComponent}
95
- {...imageComponentProps}
96
- url={variantsGroup.image}
97
- />
98
- {:else}
99
- <svelte:component
100
- this={imageComponent}
101
- {...imageComponentProps}
102
- {...variantsGroup.image}
103
- />
104
- {/if}
105
- </UIColumn>
106
- {/if}
107
- <UIColumn>
108
- <svelte:component
109
- this={listComponent}
110
- {...listComponentProps}
111
- variants={variantsGroup.variants}
112
- on:change={({ detail }) => {
113
- updateSelectedInGroup(variantsGroup.id, detail.value);
114
- }}
115
- />
116
- </UIColumn>
117
- </UIColumns>
118
- {/each}