diff --git a/app/src/components/v-input/readme.md b/app/src/components/v-input/readme.md index 0996e227d0..c0f740303d 100644 --- a/app/src/components/v-input/readme.md +++ b/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`. diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input/v-input.vue index 6dc5cc2a69..28e6e0c82a 100644 --- a/app/src/components/v-input/v-input.vue +++ b/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(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 }); diff --git a/app/src/interfaces/text-input/index.ts b/app/src/interfaces/text-input/index.ts index 83403f94b5..4ea1f7a1d1 100644 --- a/app/src/interfaces/text-input/index.ts +++ b/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, + }, + }, ], })); diff --git a/app/src/interfaces/text-input/text-input.vue b/app/src/interfaces/text-input/text-input.vue index da8dda915a..c036812235 100644 --- a/app/src/interfaces/text-input/text-input.vue +++ b/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" > @@ -67,7 +68,7 @@ export default defineComponent({ default: 'sans-serif', }, length: { - type: [Number, String], + type: Number, default: null, }, }, diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json index d8e09681f0..4535c9c559 100644 --- a/app/src/lang/en-US/index.json +++ b/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",