TagInput maximale Länge

src/components/Ausweis/Ausweisart.svelte

@@ -152,8 +152,9 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 		<TagInput
 			name="baujahr_gebaeude"
 			type="number"
+			minlength={4}
+			maxlength={4}
 			onlyUnique={true}
-			minChars={4}
 			onFocusIn={() => {
 				addNotification({
 					message: "Info",
@@ -193,7 +194,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			name="baujahr_heizung"
 			type="number"
 			onlyUnique={true}
-			minChars={4}
+			minlength={4}
+			maxlength={4}
 			onFocusIn={() => {
 				addNotification({
 					message: "Info",

src/components/TagInput.svelte

@@ -12,7 +12,8 @@
 	export let splitWith: string = ",";
 	export let name: string = "";
 	export let disable: boolean = false;
-	export let minChars: number = 0;
+	export let minlength: number = 0;
+	export let maxlength: number = Infinity;
 	export let readonly: boolean = false;
 	export let onTagClick: Function = ()=>{};
 	export let onFocusIn: () => any = () => {};
@@ -25,7 +26,7 @@
 			return;
 		}
 
-		if (minChars > tag.toString().length) {
+		if (minlength > tag.toString().length || tag.toString().length > maxlength) {
 			return;
 		}
 
@@ -50,15 +51,14 @@
 </script>
 
 <div
-	class="flex flex-row gap-1 h-10 p-0"
+	class="flex flex-row h-10 p-0"
 >
 	{#if tags.length > 0}
 		{#each tags as tag, i}
-			<button class="rounded-lg bg-white px-1.5 border border-gray-300 flex flex-row items-center justify-between gap-2" type="button" on:click={onTagClick(tag)}>
+			<button class="bg-white px-1.5 border border-gray-300 flex flex-row items-center justify-between gap-2" type="button" on:click={onTagClick(tag)}>
 				{tag}
 				{#if !disable && !readonly}
 					<span
-						class="svelte-tags-input-tag-remove"
 						on:pointerdown={() => removeTag(i)}
 					>
 						&#215;</span
@@ -75,12 +75,14 @@
 		on:focusin={onFocusIn}
 		on:focusout={onFocusOut}
 		on:blur={() => {
-			if (tag.toString().length >= minChars) {
+			if (tag.toString().length >= minlength && tag.toString().length < maxlength) {
 				addTag(tag)
 				tag = ""
 			}
 		}}
 		class="input input-bordered h-10 px-2 py-1.5 {className}"
+		{minlength}
+		{maxlength}
 		disabled={disable}
 		readonly={readonly}
 		autocomplete="off"