Merge pull request #129 from dbarenholz/feat/character-limit

Feat: Add a character limit to Text and TextArea fields

Author: mProjectsCode

src/fieldArguments/inputFieldArguments/InputFieldArgumentFactory.ts

@@ -14,6 +14,7 @@ import { PlaceholderInputFieldArgument } from './arguments/PlaceholderInputField
 import { InputFieldArgumentType } from '../../parsers/inputFieldParser/InputFieldConfigs';
 import { UseLinksInputFieldArgument } from './arguments/UseLinksInputFieldArgument';
 import { StepSizeValueInputFieldArgument } from './arguments/StepSizeValueInputFieldArgument';
+import { LimitInputFieldArgument } from './arguments/LimitInputFieldArgument';
 
 export const INPUT_FIELD_ARGUMENT_MAP = {
 	[InputFieldArgumentType.CLASS]: ClassInputFieldArgument,
@@ -30,6 +31,7 @@ export const INPUT_FIELD_ARGUMENT_MAP = {
 	[InputFieldArgumentType.DEFAULT_VALUE]: DefaultValueInputFieldArgument,
 	[InputFieldArgumentType.PLACEHOLDER]: PlaceholderInputFieldArgument,
 	[InputFieldArgumentType.USE_LINKS]: UseLinksInputFieldArgument,
+	[InputFieldArgumentType.LIMIT]: LimitInputFieldArgument,
 } as const;
 
 export type InputFieldArgumentMapType<T extends InputFieldArgumentType> = T extends keyof typeof INPUT_FIELD_ARGUMENT_MAP

src/fieldArguments/inputFieldArguments/arguments/LimitInputFieldArgument.ts

@@ -0,0 +1,27 @@
+import { AbstractInputFieldArgument } from '../AbstractInputFieldArgument';
+import { type InputFieldArgumentConfig, InputFieldArgumentConfigs } from '../../../parsers/inputFieldParser/InputFieldConfigs';
+import { type ParsingResultNode } from '../../../parsers/nomParsers/GeneralParsers';
+import { ErrorLevel, MetaBindParsingError } from '../../../utils/errors/MetaBindErrors';
+
+export class LimitInputFieldArgument extends AbstractInputFieldArgument {
+	value: number | undefined = undefined;
+
+	_parseValue(value: ParsingResultNode[]): void {
+		this.value = Number.parseInt(value[0].value);
+		if (Number.isNaN(this.value)) {
+			throw new MetaBindParsingError(
+				ErrorLevel.WARNING,
+				'failed to set value for input field argument',
+				"value of argument 'limit' must be of type number",
+			);
+		}
+
+		if (this.value <= 0) {
+			throw new MetaBindParsingError(ErrorLevel.WARNING, 'failed to set value for input field argument', "value of argument 'limit' must be positive");
+		}
+	}
+
+	public getConfig(): InputFieldArgumentConfig {
+		return InputFieldArgumentConfigs.limit;
+	}
+}

src/fieldArguments/inputFieldArguments/arguments/StepSizeValueInputFieldArgument.ts

@@ -21,7 +21,6 @@ export class StepSizeValueInputFieldArgument extends AbstractInputFieldArgument
 				'failed to set value for input field argument',
 				"value of argument 'stepSize' must be a positive number",
 			);
-
 		}
 	}
 

src/inputFields/_new/fields/Text/TextComponent.svelte

@@ -1,11 +1,13 @@
 <script lang='ts'>
 	export let value: string;
 	export let placeholder: string;
+	export let limit: number | undefined;
 	export let onValueChange: (value: string) => void;
 
 	export function setValue(v: string): void {
 		value = v;
 	}
 </script>
 
-<input type='text' tabindex='0' placeholder={placeholder} bind:value={value} on:input={() => onValueChange(value)}>
+<input type='text' tabindex='0' placeholder={placeholder} bind:value={value} maxlength={limit}
+	   on:input={() => onValueChange(value)}>

src/inputFields/_new/fields/Text/TextIPF.ts

@@ -33,6 +33,7 @@ export class TextIPF extends NewAbstractInputField<string, string> {
 	protected getMountArgs(): Record<string, unknown> {
 		return {
 			placeholder: this.renderChild.getArgument(InputFieldArgumentType.PLACEHOLDER)?.value ?? 'Text',
+			limit: this.renderChild.getArgument(InputFieldArgumentType.LIMIT)?.value,
 		};
 	}
 }

src/inputFields/_new/fields/TextArea/TextAreaComponent.svelte

@@ -1,11 +1,14 @@
 <script lang='ts'>
 	export let value: string;
 	export let placeholder: string;
+	export let limit: number | undefined;
+
 	export let onValueChange: (value: string) => void;
 
 	export function setValue(v: string): void {
 		value = v;
 	}
 </script>
 
-<textarea tabindex='0' placeholder={placeholder} bind:value={value} on:input={() => onValueChange(value)}></textarea>
+<textarea tabindex='0' placeholder={placeholder} bind:value={value} maxlength={limit}
+		  on:input={() => onValueChange(value)}></textarea>

src/inputFields/_new/fields/TextArea/TextAreaIPF.ts

@@ -33,6 +33,7 @@ export class TextAreaIPF extends NewAbstractInputField<string, string> {
 	protected getMountArgs(): Record<string, unknown> {
 		return {
 			placeholder: this.renderChild.getArgument(InputFieldArgumentType.PLACEHOLDER)?.value ?? 'Text',
+			limit: this.renderChild.getArgument(InputFieldArgumentType.LIMIT)?.value,
 		};
 	}
 }

src/parsers/inputFieldParser/InputFieldConfigs.ts

@@ -40,6 +40,7 @@ export enum InputFieldArgumentType {
 	DEFAULT_VALUE = 'defaultValue',
 	PLACEHOLDER = 'placeholder',
 	USE_LINKS = 'useLinks',
+	LIMIT = 'limit',
 
 	INVALID = 'invalid',
 }
@@ -387,4 +388,19 @@ export const InputFieldArgumentConfigs: Record<InputFieldArgumentType, InputFiel
 		values: [[]],
 		allowMultiple: true,
 	},
+	[InputFieldArgumentType.LIMIT]: {
+		type: InputFieldArgumentType.LIMIT,
+		// FIXME: LIST is not yet converted to the newer version, so should still implement the LIMIT argument
+		allowedFieldTypes: [InputFieldType.TEXT, InputFieldType.TEXT_AREA, InputFieldType.LIST],
+		values: [
+			[
+				{
+					name: 'value',
+					allowed: ['number'],
+					description: 'character limit for text fields',
+				},
+			],
+		],
+		allowMultiple: false,
+	},
 };