@djcali570/component-lib 0.1.94 → 0.1.96

package/README.md

@@ -1,65 +1,9 @@
-# Svelte library
+# Svelte Component library
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+0.1.95
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+- Updated dropdown so onUpdate runs when dropdown is cleared
 
-## Creating a project
+0.1.96
 
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-To recreate this project with the same configuration:
-
-```sh
-# recreate this project
-pnpm dlx sv create --template library --types ts --add prettier eslint sveltekit-adapter="adapter:node" devtools-json --install pnpm component-lib-restored
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```sh
-npm pack
-```
-
-To create a production version of your showcase app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
-```
+- Fixed issue with dropdown and using derived state.

package/dist/DropDown5.svelte

@@ -108,23 +108,37 @@
 		);
 	}
 	function selectItem(item: DropDownItem) {
+		// Set all bound values
+		value = item.value;
 		valueKey = item.id ?? '';
 		extraValue = item.extraValue ?? '';
-		value = item.value;
+
+		// Notify parent
 		onUpdate(valueKey, value, extraValue);
+
+		// Close dropdown
 		showDropdown = false;
 	}
+
 	function validateInput() {
-		const matchedItem = dropdownItems.find((item) => {
-			return item.value.toLowerCase() === value.toLowerCase(); // Add return statement
-		});
-		if (!matchedItem) {
-			// Clear input if the entered value is not in the list
-			value = '';
-		} else if (value !== matchedItem.value) {
-			// Set the inputText to the matched item's value if it's different
+		const matchedItem = dropdownItems.find(
+			(item) => item.value.toLowerCase() === value.toLowerCase()
+		);
+
+		if (matchedItem) {
+			// Valid match: sync values
 			value = matchedItem.value;
+			valueKey = matchedItem.id ?? '';
+			extraValue = matchedItem.extraValue ?? '';
+		} else {
+			// No match: clear all
+			value = '';
+			valueKey = '';
+			extraValue = '';
 		}
+
+		// Always notify parent of the current state
+		onUpdate(valueKey, value, extraValue);
 	}
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@djcali570/component-lib",
-	"version": "0.1.94",
+	"version": "0.1.96",
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",