@djcali570/component-lib 0.1.93 → 0.1.95

package/README.md

@@ -1,65 +1,5 @@
-# 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).
-
-## Creating a project
-
-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
-```
+- Updated dropdown so onUpdate runs when dropdown is cleared

package/dist/ContextMenu5.svelte

@@ -24,7 +24,8 @@
 		colorScheme: partialColorScheme = {},
 		ariaLabel = 'Open context menu',
 		menuAlign = 'right',
-		open = $bindable()
+		open = $bindable(),
+		iconSize = '20px'
 	}: {
 		icon?: Snippet;
 		content: Snippet;
@@ -32,6 +33,7 @@
 		ariaLabel?: string;
 		menuAlign?: 'left' | 'right';
 		open?: boolean;
+		iconSize?: string;
 	} = $props();
 
 	// Default colors
@@ -124,6 +126,7 @@
 --context5__IconBorderColor: {colorScheme.iconBorderColor};
 --context5__IconColor: {colorScheme.iconColor};
 --context5__IconFillColor: {colorScheme.iconFillColor};
+--context5__IconSize: {iconSize};
 "
 >
 	<button
@@ -179,28 +182,21 @@ top:{position.y}px;
 	}
 
 	.context5__icon {
-		width: 20px;
-		height: 20px;
+		width: var(--context5__IconSize);
+		height: var(--context5__IconSize);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
 	}
 
-	.context5__icon :global(*) {
-		width: 100% !important;
-		height: 100% !important;
-		display: block;
-	}
-
 	.context5__btn {
-		width: 30px;
-		height: 30px;
+		width: var(--context5__IconSize);
+		height: var(--context5__IconSize);
 		padding: 0;
-		border-radius: 50%;
 		cursor: pointer;
-		background-color: var(--context5__IconFillColor);
-		border: 1px solid var(--context5__IconBorderColor);
+		background: none;
+		border: none;
 		display: flex;
 		align-items: center;
 		justify-content: center;

package/dist/ContextMenu5.svelte.d.ts

@@ -7,6 +7,7 @@ type $$ComponentProps = {
     ariaLabel?: string;
     menuAlign?: 'left' | 'right';
     open?: boolean;
+    iconSize?: string;
 };
 declare const ContextMenu5: import("svelte").Component<$$ComponentProps, {}, "open">;
 type ContextMenu5 = ReturnType<typeof ContextMenu5>;

package/dist/DropDown5.svelte

@@ -39,7 +39,7 @@
 	};
 
 	// Merge partial colorScheme with defaults
-	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+	const colorScheme = $derived({ ...defaultColorScheme, ...partialColorScheme });
 
 	const id = generateRandomString();
 	let showDropdown = $state(false);
@@ -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.93",
+	"version": "0.1.95",
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",