feat/input-chip-add-remove-manually (#2347)

Author: Mahmoud-zino

.changeset/flat-icons-do.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: InputChip - Implemented function to add/remove chips programatically.

packages/skeleton/src/lib/components/InputChip/InputChip.svelte

@@ -28,7 +28,10 @@
 	type InputChipEvent = {
 		add: { event: SubmitEvent; chipIndex: number; chipValue: string };
 		remove: { event: MouseEvent; chipIndex: number; chipValue: string };
+		addManually: { chipIndex: number; chipValue: string };
+		removeManually: { chipValue: string };
 		invalid: { event: SubmitEvent; input: string };
+		invalidManually: { input: string };
 	};
 	const dispatch = createEventDispatcher<InputChipEvent>();
 
@@ -174,27 +177,53 @@
 		inputValid = true;
 	}
 
-	function validate(): boolean {
-		if (!input) return false;
+	function validateCustom(chip: string) {
+		return validation === undefined || validation(chip);
+	}
+
+	function validateCount() {
+		return max === -1 || value.length < max;
+	}
+
+	function validateLength(chip: string) {
+		return (minlength === -1 || chip.length >= minlength) && (maxlength === -1 || chip.length <= maxlength);
+	}
+
+	function validateWhiteList(chip: string) {
+		return whitelist.length === 0 || whitelist.includes(chip);
+	}
+
+	function validateDuplicates(chip: string) {
+		return allowDuplicates || !value.includes(chip);
+	}
+
+	function validate(chip: string = ''): boolean {
+		if (!chip && !input) return false;
 		// Format: trim value
-		input = input.trim();
-		// Custom validation
-		if (validation !== undefined && !validation(input)) return false;
-		// Maximum
-		if (max !== -1 && value.length >= max) return false;
-		// Minimum Character Length
-		if (minlength !== -1 && input.length < minlength) return false;
-		// Maximum Character Length
-		if (maxlength !== -1 && input.length > maxlength) return false;
-		// Whitelist (if available)
-		if (whitelist.length > 0 && !whitelist.includes(input)) return false;
-		// Value is unique
-		if (allowDuplicates === false && value.includes(input)) return false;
-		// State is valid
-		return true;
+		chip = chip !== '' ? chip.trim() : input.trim();
+		return validateCustom(chip) && validateCount() && validateLength(chip) && validateWhiteList(chip) && validateDuplicates(chip);
+	}
+
+	function addChipCommon(chip: string) {
+		// Format: to lowercase (if enabled)
+		chip = allowUpperCase ? chip : chip.toLowerCase();
+		// Append value to array
+		value.push(chip);
+		value = value;
+		chipValues.push({ val: chip, id: Math.random() });
+		chipValues = chipValues;
+	}
+
+	function removeChipCommon(chip: string) {
+		let chipIndex = value.indexOf(chip);
+		// Remove value from array
+		value.splice(chipIndex, 1);
+		value = value;
+		chipValues.splice(chipIndex, 1);
+		chipValues = chipValues;
 	}
 
-	function addChip(event: SvelteEvent<SubmitEvent, HTMLFormElement>): void {
+	function addChipInternally(event: SvelteEvent<SubmitEvent, HTMLFormElement>): void {
 		event.preventDefault();
 		// Validate
 		inputValid = validate();
@@ -204,30 +233,42 @@
 			dispatch('invalid', { event, input });
 			return;
 		}
-		// Format: to lowercase (if enabled)
-		input = allowUpperCase ? input : input.toLowerCase();
-		// Append value to array
-		value.push(input);
-		value = value;
-		chipValues.push({ val: input, id: Math.random() });
-		chipValues = chipValues;
+		addChipCommon(input);
 		/** @event {{ event: Event, chipIndex: number, chipValue: string }} add - Fires when a chip is added. */
 		dispatch('add', { event, chipIndex: value.length - 1, chipValue: input });
 		// Clear input value
 		input = '';
 	}
 
-	function removeChip(event: SvelteEvent<MouseEvent, HTMLButtonElement>, chipIndex: number, chipValue: string): void {
+	function removeChipInternally(event: SvelteEvent<MouseEvent, HTMLButtonElement>, chipIndex: number, chipValue: string): void {
 		if ($$restProps.disabled) return;
-		// Remove value from array
-		value.splice(chipIndex, 1);
-		value = value;
-		chipValues.splice(chipIndex, 1);
-		chipValues = chipValues;
+		removeChipCommon(chipValue);
 		/** @event {{ event: Event, chipIndex: number, chipValue: string }} remove - Fires when a chip is removed. */
 		dispatch('remove', { event, chipIndex, chipValue });
 	}
 
+	// Export functions
+	export function addChip(chip: string) {
+		// Validate
+		inputValid = validate(chip);
+		// When the onInvalid hook is present
+		if (inputValid === false) {
+			/** @event {{ input: string  }} invalidManually - Fires when the manually added value is invalid. */
+			dispatch('invalidManually', { input: chip });
+			return;
+		}
+		addChipCommon(chip);
+		/** @event {{ chipIndex: number, chipValue: string }} addManually - Fires when a chip is added manually. */
+		dispatch('addManually', { chipIndex: value.length - 1, chipValue: chip });
+	}
+
+	export function removeChip(chip: string) {
+		if ($$restProps.disabled) return;
+		removeChipCommon(chip);
+		/** @event {{ chipValue: string }} removeManually - Fires when a chip is removed manually. */
+		dispatch('removeManually', { chipValue: chip });
+	}
+
 	// State
 	$: classesInvalid = inputValid === false ? invalid : '';
 	// Reactive
@@ -253,7 +294,7 @@
 	<!-- Chip Wrapper -->
 	<div class="input-chip-wrapper {classesChipWrapper}">
 		<!-- Input Field -->
-		<form on:submit={addChip}>
+		<form on:submit={addChipInternally}>
 			<input
 				type="text"
 				bind:value={input}
@@ -279,9 +320,7 @@
 						<button
 							type="button"
 							class="chip {chips}"
-							on:click={(e) => {
-								removeChip(e, i, val);
-							}}
+							on:click={(e) => removeChipInternally(e, i, val)}
 							on:click
 							on:keypress
 							on:keydown

sites/skeleton.dev/src/routes/(inner)/components/input-chips/+page.svelte

@@ -30,6 +30,8 @@
 	let emails = ['[email protected]', '[email protected]', '[email protected]'];
 	let musicalGenres = ['rock', 'r&b', 'pop'];
 	let musicalGenresWhitelist = ['rock', 'pop', 'hip-hop', 'metal', 'techno', 'r&b'];
+	let manualList: string[] = [];
+	let manualInputChip: InputChip;
 	const toastStore = getToastStore();
 
 	function isValidEmail(value: string): boolean {
@@ -161,6 +163,50 @@ function onInvalidHandler(event: any): void {
 				</svelte:fragment>
 			</DocsPreview>
 		</section>
+		<!-- Add/Remove Chips Programatically -->
+		<section class="space-y-4">
+			<h2 class="h2">Add / Remove Chips</h2>
+			<p>
+				To add or remove chips programatically, use the exported functions <code class="code">addChip</code> and
+				<code class="code">removeChip</code> after binding the ChipInput.
+			</p>
+			<DocsPreview background="neutral">
+				<svelte:fragment slot="preview">
+					<InputChip
+						bind:this={manualInputChip}
+						bind:value={manualList}
+						name="chips-example-programatic"
+						placeholder="Enter number..."
+						chips="variant-filled-tertiary"
+					/>
+				</svelte:fragment>
+				<svelte:fragment slot="footer">
+					<div class="text-center">
+						<button type="button" class="btn variant-filled" on:click={() => manualInputChip.removeChip(manualList[-1])}
+							>Remove LastChip</button
+						>
+						<button
+							type="button"
+							class="btn variant-filled"
+							on:click={() => manualInputChip.addChip((Math.floor(Math.random() * 10000) + 1).toString())}>Add Random Number</button
+						>
+					</div>
+				</svelte:fragment>
+				<svelte:fragment slot="source">
+					<CodeBlock
+						language="ts"
+						code={`
+let inputChip: InputChip;
+// add chip manually
+inputChip.addChip('chipValue');
+// remove chip manually
+inputChip.removeChip('chipValue');
+						`}
+					/>
+					<CodeBlock language="html" code={`<InputChip ... bind:this={inputChip} />`} />
+				</svelte:fragment>
+			</DocsPreview>
+		</section>
 		<!-- Additional Settings -->
 		<section class="space-y-4">
 			<h2 class="h2">Additional Settings</h2>