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 });

app/src/interfaces/text-input/index.ts

@@ -22,10 +22,10 @@ export default defineInterface(({ i18n }) => ({
 		{
 			field: 'font',
 			name: i18n.t('font'),
+			type: 'string',
 			meta: {
 				width: 'half',
 				interface: 'dropdown',
-				default: 'sans-serif',
 				options: {
 					choices: [
 						{ text: i18n.t('sans_serif'), value: 'sans-serif' },
@@ -34,10 +34,14 @@ export default defineInterface(({ i18n }) => ({
 					],
 				},
 			},
+			schema: {
+				default_value: 'sans-serif',
+			},
 		},
 		{
 			field: 'iconLeft',
 			name: i18n.t('icon_left'),
+			type: 'string',
 			meta: {
 				width: 'half',
 				interface: 'icon',
@@ -46,10 +50,35 @@ export default defineInterface(({ i18n }) => ({
 		{
 			field: 'iconRight',
 			name: i18n.t('icon_right'),
+			type: 'string',
 			meta: {
 				width: 'half',
 				interface: 'icon',
 			},
 		},
+		{
+			field: 'trim',
+			name: i18n.t('trimed'),
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+			},
+			schema: {
+				default_value: false,
+			},
+		},
+		{
+			field: 'mask',
+			name: i18n.t('masked'),
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+			},
+			schema: {
+				default_value: false,
+			},
+		},
 	],
 }));

app/src/interfaces/text-input/text-input.vue

@@ -3,9 +3,10 @@
 		:value="value"
 		:placeholder="placeholder"
 		:disabled="disabled"
+		:trim="trim"
 		:type="masked ? 'password' : 'text'"
 		:class="font"
-		:maxlength="length"
+		:max="length"
 		@input="$listeners.input"
 	>
 		<template v-if="iconLeft" #prepend><v-icon :name="iconLeft" /></template>
@@ -67,7 +68,7 @@ export default defineComponent({
 			default: 'sans-serif',
 		},
 		length: {
-			type: [Number, String],
+			type: Number,
 			default: null,
 		},
 	},

app/src/lang/en-US/index.json

@@ -592,6 +592,7 @@
 	"step_interval": "Step Interval",
 	"icon_left": "Icon Left",
 	"icon_right": "Icon Right",
+	"trimed": "Trimed",
 	"font_family": "Font Family",
 	"font": "Font",
 	"numeric": "Numeric",