intelliwaketssveltekitv25 0.1.171 → 0.1.173

package/dist/MultiSelect.svelte

@@ -17,11 +17,11 @@
 		possibles,
 		selected = $bindable([]),
 		selectedIDs = $bindable(undefined),
-		autoModifySelected = true,
 		created = $bindable([]),
 		existing = $bindable([]),
 		name = null,
 		placeholder = '',
+		placeholderHideNoFocus = false,
 		disabled = false,
 		readonly = false,
 		required = false,
@@ -50,6 +50,7 @@
 		onadd,
 		onselect,
 		oncreate,
+		onchange,
 		onclear,
 		onclearall
 	}: {
@@ -59,11 +60,11 @@
 		possibles: T[]
 		selected?: T[]
 		selectedIDs?: (number | string)[] | undefined
-		autoModifySelected?: boolean
 		created?: T[]
 		existing?: T[]
 		name?: string | null
 		placeholder?: string
+		placeholderHideNoFocus?: boolean
 		disabled?: boolean
 		readonly?: boolean
 		required?: boolean
@@ -93,6 +94,7 @@
 		onadd?: (item: T) => void,
 		onselect?: (item: T) => void,
 		oncreate?: (item: string) => void,
+		onchange?: (items: T[]) => void,
 		onclear?: (item: T) => void,
 		onclearall?: () => void
 	} = $props()
@@ -109,7 +111,7 @@
 	}
 
 	function updateSelectedIDs(sels: T[]) {
-		if (autoModifySelected && !!selectedIDs) {
+		if (!!selectedIDs) {
 			selectedIDs = sels.map(sel => idValue(sel))
 		}
 	}
@@ -117,10 +119,8 @@
 	async function doAdd(item: T | null | undefined, creating: boolean) {
 		if (!disable) {
 			if (item) {
-				if (autoModifySelected) {
-					selected = isMulti ? [...selected, item] : [item]
-					updateSelectedIDs(selected)
-				}
+				selected = isMulti ? [...selected, item] : [item]
+				updateSelectedIDs(selected)
 				searchValue = ''
 				await tick()
 				if (elInput) elInput.focus()
@@ -130,21 +130,21 @@
 				} else {
 					if (oncreate) oncreate(inputValue(item))
 				}
+				if (onchange) onchange(selected)
 			}
 		}
 	}
 
 	async function doClear(item: T) {
 		if (!disable) {
-			if (autoModifySelected) {
-				selected = selected.filter(s => !DeepEqual(idValue(s), idValue(item)))
-				updateSelectedIDs(selected)
-			}
+			selected = selected.filter(s => !DeepEqual(idValue(s), idValue(item)))
+			updateSelectedIDs(selected)
 			if (elInput) {
 				await tick()
 				elInput.focus()
 			}
 			if (onclear) onclear(item)
+			if (onchange) onchange(selected)
 		}
 	}
 
@@ -152,10 +152,8 @@
 		e.stopPropagation()
 		if (!disable) {
 			if (allowClearAll) {
-				if (autoModifySelected) {
-					selected = []
-					updateSelectedIDs(selected)
-				}
+				selected = []
+				updateSelectedIDs(selected)
 				await tick()
 			}
 			if (elInput) {
@@ -163,6 +161,7 @@
 				elInput.focus()
 			}
 			if (onclearall) onclearall()
+			if (onchange) onchange(selected)
 		}
 	}
 
@@ -191,7 +190,7 @@
 		})))
 
 	function setSelected(selIDs: (string | number)[] | undefined, poss: T[]) {
-		if (selIDs && autoModifySelected && (selIDs.length !== selected.length || !selected.every(sel => !!selIDs?.some(selID => selID === idValue(sel))))) {
+		if (selIDs && (selIDs.length !== selected.length || !selected.every(sel => !!selIDs?.some(selID => selID === idValue(sel))))) {
 			selected = poss.filter(po => !!selIDs?.some(selID => selID == idValue(po)))
 		}
 	}
@@ -347,7 +346,9 @@
 								 autocomplete="off"
 								 bind:this={elInput}
 								 bind:value={searchValue}
-								 class="noFormat flex grow-1 m-1 ring-0 focus:ring-0 outline-0 focus:outline-0 min-w-[3em] w-[3em] border-none p-0 placeholder:opacity-0 focus:placeholder:opacity-100 {inputClass}"
+								 class="noFormat flex grow-1 m-1 ring-0 focus:ring-0 outline-0 focus:outline-0 min-w-[3em] w-[3em] border-none p-0 {inputClass}"
+								 class:placeholder:opacity-0={placeholderHideNoFocus}
+								 class:focus:placeholder:opacity-100={placeholderHideNoFocus}
 								 onkeydown={onKeyPress} />
 				{/if}
 			</div>

package/dist/MultiSelect.svelte.d.ts

@@ -8,11 +8,11 @@ declare class __sveltets_Render<T extends TGenericMultiSelect> {
         possibles: T[];
         selected?: T[] | undefined;
         selectedIDs?: (number | string)[] | undefined;
-        autoModifySelected?: boolean;
         created?: T[] | undefined;
         existing?: T[] | undefined;
         name?: string | null;
         placeholder?: string;
+        placeholderHideNoFocus?: boolean;
         disabled?: boolean;
         readonly?: boolean;
         required?: boolean;
@@ -42,6 +42,7 @@ declare class __sveltets_Render<T extends TGenericMultiSelect> {
         onadd?: ((item: T) => void) | undefined;
         onselect?: ((item: T) => void) | undefined;
         oncreate?: ((item: string) => void) | undefined;
+        onchange?: ((items: T[]) => void) | undefined;
         onclear?: ((item: T) => void) | undefined;
         onclearall?: (() => void) | undefined;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelliwaketssveltekitv25",
-  "version": "0.1.171",
+  "version": "0.1.173",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",