not-bulma 1.0.80 → 1.0.82
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
|
@@ -8,6 +8,11 @@ import UIList from "./ui.list.svelte";
|
|
|
8
8
|
import UIListItem from "./ui.list.item.svelte";
|
|
9
9
|
import UIListEmptyPlaceholder from "./ui.list.empty.placeholder.svelte";
|
|
10
10
|
|
|
11
|
+
//form element based on UIList alike component
|
|
12
|
+
|
|
13
|
+
import UIListSelect from "./ui.list.select.svelte";
|
|
14
|
+
import UIListSelectGroup from "./ui.list.select.group.svelte";
|
|
15
|
+
|
|
11
16
|
export {
|
|
12
17
|
UIEndlessListNavigation,
|
|
13
18
|
UIEndlessListSimpleItem,
|
|
@@ -15,4 +20,6 @@ export {
|
|
|
15
20
|
UIList,
|
|
16
21
|
UIListItem,
|
|
17
22
|
UIListEmptyPlaceholder,
|
|
23
|
+
UIListSelect,
|
|
24
|
+
UIListSelectGroup,
|
|
18
25
|
};
|
|
@@ -17,8 +17,10 @@
|
|
|
17
17
|
//customization
|
|
18
18
|
export let titleComponent = UITitle;
|
|
19
19
|
export let titleComponentProps = { size: 6 };
|
|
20
|
+
//
|
|
20
21
|
export let descriptionComponent;
|
|
21
22
|
export let descriptionComponentProps = {};
|
|
23
|
+
//
|
|
22
24
|
export let imageComponent;
|
|
23
25
|
export let imageComponentProps = {};
|
|
24
26
|
|
|
@@ -0,0 +1,118 @@
|
|
|
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}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { createEventDispatcher, onMount } from "svelte";
|
|
3
|
+
const dispatch = createEventDispatcher();
|
|
4
|
+
|
|
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
|
+
};
|
|
14
|
+
|
|
15
|
+
export const collectData = () => {
|
|
16
|
+
return values;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
//list UI
|
|
20
|
+
export let listComponent = UIList;
|
|
21
|
+
export let listComponentProps = {};
|
|
22
|
+
|
|
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);
|
|
28
|
+
} else {
|
|
29
|
+
values.push(id);
|
|
30
|
+
}
|
|
31
|
+
values = values;
|
|
32
|
+
updateItemsClasses();
|
|
33
|
+
dispatch("change", {
|
|
34
|
+
field: fieldname,
|
|
35
|
+
value: values,
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
onMount(() => {
|
|
40
|
+
if (defaultSelectAll) {
|
|
41
|
+
variants.forEach((val) => {
|
|
42
|
+
values.push(getId(val));
|
|
43
|
+
});
|
|
44
|
+
values = values;
|
|
45
|
+
updateItemsClasses();
|
|
46
|
+
}
|
|
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
|
+
}
|
|
57
|
+
}
|
|
58
|
+
variants = variants;
|
|
59
|
+
}
|
|
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(" ");
|
|
66
|
+
}
|
|
67
|
+
}
|
|
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(" ");
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
<svelte:component
|
|
79
|
+
this={listComponent}
|
|
80
|
+
{listComponentProps}
|
|
81
|
+
bind:items={variants}
|
|
82
|
+
on:click={toggle}
|
|
83
|
+
/>
|
|
@@ -12,6 +12,7 @@ $list-item-title-weight: $weight-semibold !default;
|
|
|
12
12
|
@content;
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
+
|
|
15
16
|
.list {
|
|
16
17
|
color: $list-color;
|
|
17
18
|
display: flex;
|
|
@@ -37,7 +38,12 @@ $list-item-title-weight: $weight-semibold !default;
|
|
|
37
38
|
visibility: hidden;
|
|
38
39
|
}
|
|
39
40
|
}
|
|
41
|
+
&.selectable-items .list-item:hover,
|
|
42
|
+
&.selectable-items .list-item.is-active{
|
|
43
|
+
background-color: $info-light;
|
|
44
|
+
}
|
|
40
45
|
}
|
|
46
|
+
|
|
41
47
|
.list-item {
|
|
42
48
|
align-items: center;
|
|
43
49
|
display: flex;
|
|
@@ -49,7 +55,7 @@ $list-item-title-weight: $weight-semibold !default;
|
|
|
49
55
|
opacity: initial;
|
|
50
56
|
visibility: initial;
|
|
51
57
|
}
|
|
52
|
-
}
|
|
58
|
+
}
|
|
53
59
|
&:not(.box) {
|
|
54
60
|
padding: $list-item-padding;
|
|
55
61
|
}
|