add trim, mask and clean up text-input

app/src/components/v-input/readme.md

@@ -24,6 +24,7 @@ You can add any custom (text) prefix/suffix to the value in the input using the
 | `slug`           | Force the value to be URL safe              | `false` |
 | `slug-separator` | What character to use as separator in slugs | `-`     |
 | `active`         | Force the focus state                       | `false` |
+| `trim`           | Trim the start and end whitespace           | `false` |
 
 Note: all other attached attributes are bound to the input HTMLELement in the component. This allows you to attach any of the standard HTML attributes like `min`, `length`, or `pattern`.
 

app/src/components/v-input/v-input.vue

@@ -121,6 +121,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		trim: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	setup(props, { emit, listeners }) {
 		const input = ref<HTMLInputElement | null>(null);
@@ -177,6 +181,10 @@ export default defineComponent({
 		function emitValue(event: InputEvent) {
 			let value = (event.target as HTMLInputElement).value;
 
+			if (props.trim === true) {
+				value = value.trim();
+			}
+
 			if (props.slug === true) {
 				const endsWithSpace = value.endsWith(' ');
 				value = slugify(value, { separator: props.slugSeparator });