@onsvisual/svelte-components 0.1.17 → 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.
@@ -17,6 +17,7 @@ export default class Select extends SvelteComponentTyped<{
17
17
  autoClear?: boolean;
18
18
  idKey?: string;
19
19
  labelKey?: string;
20
+ groupKey?: string;
20
21
  colors?: any[];
21
22
  itemFilter?: Function;
22
23
  loadOptions?: Function;
@@ -52,6 +53,7 @@ declare const __propDef: {
52
53
  autoClear?: boolean;
53
54
  idKey?: string;
54
55
  labelKey?: string;
56
+ groupKey?: string | null;
55
57
  colors?: any[];
56
58
  itemFilter?: Function;
57
59
  loadOptions?: Function;
@@ -64,15 +64,20 @@
64
64
  */
65
65
  export let options = [];
66
66
  /**
67
- * The attribute of an option defines its ID
67
+ * The attribute of an option that defines its ID
68
68
  * @type {string}
69
69
  */
70
70
  export let idKey = "id";
71
71
  /**
72
- * The attribute of an option defines its label/name
72
+ * The attribute of an option that defines its label/name
73
73
  * @type {string}
74
74
  */
75
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;
76
81
  /**
77
82
  * Defines the width of the input in characters
78
83
  * @type {number}
@@ -162,6 +167,7 @@
162
167
  new RegExp(`\\b${filterText}`, "i"),
163
168
  (str) => `<b>${str}</b>`
164
169
  )}
170
+ {#if groupKey}<span class="item-group">{item[groupKey]}</span>{/if}
165
171
  </div>
166
172
  <div slot="empty">{@html noOptionsMessage}</div>
167
173
  <div slot="chevron-icon" style:transform="{mode === "search" ? "translateY(2px)" : null}">
@@ -274,4 +280,8 @@
274
280
  }
275
281
  .ons-field {
276
282
  overflow: visible;
283
+ }
284
+ span.item-group {
285
+ font-size: smaller;
286
+ opacity: 0.7;
277
287
  }</style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onsvisual/svelte-components",
3
- "version": "0.1.17",
3
+ "version": "0.1.18",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "homepage": "https://onsvisual.github.io/svelte-components",