@onsvisual/svelte-components 0.1.16 → 0.1.18
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.
|
@@ -10,12 +10,14 @@ export default class Select extends SvelteComponentTyped<{
|
|
|
10
10
|
hideLabel?: boolean;
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
options?: any[];
|
|
13
|
+
filterText?: string;
|
|
13
14
|
multiple?: boolean;
|
|
14
15
|
maxSelected?: number;
|
|
15
16
|
clearable?: boolean;
|
|
16
17
|
autoClear?: boolean;
|
|
17
18
|
idKey?: string;
|
|
18
19
|
labelKey?: string;
|
|
20
|
+
groupKey?: string;
|
|
19
21
|
colors?: any[];
|
|
20
22
|
itemFilter?: Function;
|
|
21
23
|
loadOptions?: Function;
|
|
@@ -44,12 +46,14 @@ declare const __propDef: {
|
|
|
44
46
|
hideLabel?: boolean;
|
|
45
47
|
placeholder?: string;
|
|
46
48
|
options?: any[];
|
|
49
|
+
filterText?: string;
|
|
47
50
|
multiple?: boolean;
|
|
48
51
|
maxSelected?: number;
|
|
49
52
|
clearable?: boolean;
|
|
50
53
|
autoClear?: boolean;
|
|
51
54
|
idKey?: string;
|
|
52
55
|
labelKey?: string;
|
|
56
|
+
groupKey?: string | null;
|
|
53
57
|
colors?: any[];
|
|
54
58
|
itemFilter?: Function;
|
|
55
59
|
loadOptions?: Function;
|
|
@@ -13,6 +13,11 @@
|
|
|
13
13
|
* @type {"default"|"search"}
|
|
14
14
|
*/
|
|
15
15
|
export let mode = "default";
|
|
16
|
+
/**
|
|
17
|
+
* Binding for the filter text entered
|
|
18
|
+
* @type {string}
|
|
19
|
+
*/
|
|
20
|
+
export let filterText = "";
|
|
16
21
|
/**
|
|
17
22
|
* Enable multi-select mode
|
|
18
23
|
* @type {boolean}
|
|
@@ -59,15 +64,20 @@
|
|
|
59
64
|
*/
|
|
60
65
|
export let options = [];
|
|
61
66
|
/**
|
|
62
|
-
* The attribute of an option defines its ID
|
|
67
|
+
* The attribute of an option that defines its ID
|
|
63
68
|
* @type {string}
|
|
64
69
|
*/
|
|
65
70
|
export let idKey = "id";
|
|
66
71
|
/**
|
|
67
|
-
* The attribute of an option defines its label/name
|
|
72
|
+
* The attribute of an option that defines its label/name
|
|
68
73
|
* @type {string}
|
|
69
74
|
*/
|
|
70
75
|
export let labelKey = "label";
|
|
76
|
+
/**
|
|
77
|
+
* The attribute of an option that defines its group (optional)
|
|
78
|
+
* @type {string|null}
|
|
79
|
+
*/
|
|
80
|
+
export let groupKey = null;
|
|
71
81
|
/**
|
|
72
82
|
* Defines the width of the input in characters
|
|
73
83
|
* @type {number}
|
|
@@ -116,8 +126,6 @@
|
|
|
116
126
|
? `No options match <b>${filterText}</b>`
|
|
117
127
|
: "No options available";
|
|
118
128
|
|
|
119
|
-
let filterText = "";
|
|
120
|
-
|
|
121
129
|
const dispatch = createEventDispatcher();
|
|
122
130
|
|
|
123
131
|
async function handleChange(e) {
|
|
@@ -159,6 +167,7 @@
|
|
|
159
167
|
new RegExp(`\\b${filterText}`, "i"),
|
|
160
168
|
(str) => `<b>${str}</b>`
|
|
161
169
|
)}
|
|
170
|
+
{#if groupKey}<span class="item-group">{item[groupKey]}</span>{/if}
|
|
162
171
|
</div>
|
|
163
172
|
<div slot="empty">{@html noOptionsMessage}</div>
|
|
164
173
|
<div slot="chevron-icon" style:transform="{mode === "search" ? "translateY(2px)" : null}">
|
|
@@ -271,4 +280,8 @@
|
|
|
271
280
|
}
|
|
272
281
|
.ons-field {
|
|
273
282
|
overflow: visible;
|
|
283
|
+
}
|
|
284
|
+
span.item-group {
|
|
285
|
+
font-size: smaller;
|
|
286
|
+
opacity: 0.7;
|
|
274
287
|
}</style>
|