@onsvisual/svelte-components 0.1.94 → 0.1.95
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.
|
@@ -18,6 +18,7 @@ export default class AccessibleSelect extends SvelteComponentTyped<{
|
|
|
18
18
|
scriptUrl?: string;
|
|
19
19
|
}, {
|
|
20
20
|
change: CustomEvent<any>;
|
|
21
|
+
clear: CustomEvent<any>;
|
|
21
22
|
} & {
|
|
22
23
|
[evt: string]: CustomEvent<any>;
|
|
23
24
|
}, {}> {
|
|
@@ -45,6 +46,7 @@ declare const __propDef: {
|
|
|
45
46
|
};
|
|
46
47
|
events: {
|
|
47
48
|
change: CustomEvent<any>;
|
|
49
|
+
clear: CustomEvent<any>;
|
|
48
50
|
} & {
|
|
49
51
|
[evt: string]: CustomEvent<any>;
|
|
50
52
|
};
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
*/
|
|
48
48
|
export let placeholder = mode === "search" ? "Enter text" : "Select one";
|
|
49
49
|
/**
|
|
50
|
-
* A prop to bind to for the selected value
|
|
50
|
+
* A prop to bind to for the selected value
|
|
51
51
|
* @type {object}
|
|
52
52
|
*/
|
|
53
53
|
export let value = null;
|
|
@@ -93,7 +93,6 @@
|
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
function highlight(text, query = "") {
|
|
96
|
-
console.log(query);
|
|
97
96
|
return text.replace(
|
|
98
97
|
new RegExp(`\\b${query.replace(/[^\w\s]/gi, "")}`, "i"),
|
|
99
98
|
(str) => `<b>${str}</b>`
|
|
@@ -101,19 +100,18 @@
|
|
|
101
100
|
}
|
|
102
101
|
|
|
103
102
|
function suggestionTemplate(result) {
|
|
104
|
-
const query = inputElement
|
|
103
|
+
const query = inputElement?.value || "";
|
|
105
104
|
return (
|
|
106
105
|
result &&
|
|
107
106
|
(groupKey
|
|
108
|
-
? `${highlight(result[labelKey], query)} <span class="muted-text">${
|
|
107
|
+
? `${highlight(result?.[labelKey] || "", query)} <span class="muted-text">${
|
|
109
108
|
result[groupKey]
|
|
110
109
|
}</span>`
|
|
111
|
-
: highlight(result[labelKey], query))
|
|
110
|
+
: highlight(result?.[labelKey] || "", query))
|
|
112
111
|
);
|
|
113
112
|
}
|
|
114
113
|
|
|
115
114
|
async function select(option) {
|
|
116
|
-
console.log(option);
|
|
117
115
|
value = option;
|
|
118
116
|
dispatch("change", value);
|
|
119
117
|
if (value && autoClear) {
|
|
@@ -132,9 +130,10 @@
|
|
|
132
130
|
hideMenu = true;
|
|
133
131
|
inputElement.value = "";
|
|
134
132
|
await sleep(110);
|
|
135
|
-
inputElement.focus();
|
|
133
|
+
inputElement.focus({ preventScroll: true });
|
|
136
134
|
inputElement.blur();
|
|
137
135
|
hideMenu = false;
|
|
136
|
+
dispatch("clear", value);
|
|
138
137
|
}
|
|
139
138
|
|
|
140
139
|
function handleScriptLoad() {
|
|
@@ -148,6 +147,7 @@
|
|
|
148
147
|
id,
|
|
149
148
|
name: `${id}-input`,
|
|
150
149
|
source: loadOptions,
|
|
150
|
+
defaultValue: value?.[labelKey] || "",
|
|
151
151
|
autoselect: true,
|
|
152
152
|
onConfirm: select,
|
|
153
153
|
confirmOnBlur: false,
|