@onsvisual/svelte-components 1.0.21 → 1.0.23

package/dist/inputs/Select/Select.stories.svelte

@@ -26,8 +26,10 @@
 	</div>
 {/snippet}
 
+<Story name="Default" args={{ id: "default", label: "Select an option", options }} {template} />
+
 <Story
-	name="Default"
+	name="Pre-selected value"
 	args={{ id: "default", value: options[0], label: "Select an option", options }}
 	{template}
 />

package/dist/inputs/Select/Select.svelte

@@ -100,13 +100,8 @@
 	 * @type {function}
 	 */
 	export async function clearInput() {
-		hideMenu = true;
-		inputElement.value = "";
-		await sleep(110);
-		inputElement.focus({ preventScroll: true });
-		inputElement.blur();
-		hideMenu = false;
-		dispatch("clear", value);
+		await setInputValue(null);
+		dispatch("clear", null);
 	}
 	/**
 	 * Optional: Set an additional CSS class for the component
@@ -114,6 +109,15 @@
 	 */
 	export let cls = null;
 
+	async function setInputValue(textValue) {
+		hideMenu = true;
+		inputElement.value = textValue || "";
+		await sleep(110);
+		inputElement.focus({ preventScroll: true });
+		inputElement.blur();
+		hideMenu = false;
+	}
+
 	function inputValueTemplate(result) {
 		return result && result[labelKey];
 	}
@@ -138,11 +142,13 @@
 	}
 
 	async function select(option) {
-		value = option;
-		dispatch("change", value);
-		if (value && autoClear) {
-			await sleep(0);
-			clearInput();
+		if (option && value !== option) {
+			value = option;
+			dispatch("change", value);
+			if (value && autoClear) {
+				await sleep(0);
+				clearInput();
+			}
 		}
 	}
 
@@ -163,7 +169,6 @@
 			id,
 			name: `${id}-input`,
 			source: loadOptions,
-			defaultValue: value?.[labelKey] || "",
 			autoselect: true,
 			onConfirm: select,
 			confirmOnBlur: false,
@@ -177,10 +182,21 @@
 				suggestion: suggestionTemplate
 			}
 		});
-		inputElement = document.getElementById(id);
+		inputElement = element.querySelector(`#${id}`);
+		setInputValue(value?.[labelKey] || "");
 		inputElement.addEventListener("blur", inputChange);
 	}
 
+	// In case input value is updated from outside component
+	function bindInputValue(value) {
+		if (inputElement) {
+			const textValue = value?.[labelKey];
+			if (textValue && inputElement.value !== textValue) setInputValue(textValue);
+			else if (!value && inputElement.value) setInputValue("");
+		}
+	}
+	$: bindInputValue(value);
+
 	onMount(handleScriptLoad);
 </script>
 

package/dist/layout/Accordion/Accordion.svelte

@@ -33,20 +33,18 @@
 </script>
 
 <div {id} class="ons-accordion {cls}" bind:this={el}>
-	{#if showToggle}
-		<button
-			type="button"
-			class="ons-btn ons-accordion__toggle-all ons-u-mb-s ons-u-d-no ons-btn--secondary ons-btn--small"
-			class:hide-toggle={!showToggle}
-			data-close-all="Hide all"
-			data-group={id}
-			bind:this={buttonEl}
+	<button
+		type="button"
+		class="ons-btn ons-accordion__toggle-all ons-u-mb-s ons-u-d-no ons-btn--secondary ons-btn--small"
+		class:hide-toggle={!showToggle}
+		data-close-all="Hide all"
+		data-group={id}
+		bind:this={buttonEl}
+	>
+		<span class="ons-btn__inner ons-accordion__toggle-all-inner"
+			><span class="ons-btn__text">Show all</span></span
 		>
-			<span class="ons-btn__inner ons-accordion__toggle-all-inner"
-				><span class="ons-btn__text">Show all</span></span
-			>
-		</button>
-	{/if}
+	</button>
 	<slot />
 </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.21",
+	"version": "1.0.23",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",