[enh] Add some step, autocomplete, trim, visibleIf properties

This commit is contained in:
ljf 2021-08-27 01:09:36 +02:00
parent 56df38d999
commit 927886334b
3 changed files with 27 additions and 11 deletions

View file

@ -9,6 +9,9 @@
:required="required" :required="required"
:min="min" :min="min"
:max="max" :max="max"
:step="step"
:trim="trim"
:autocomplete="autocomplete_"
@blur="$parent.$emit('touch', name)" @blur="$parent.$emit('touch', name)"
/> />
</template> </template>
@ -17,6 +20,12 @@
export default { export default {
name: 'InputItem', name: 'InputItem',
data () {
return {
autocomplete_: (this.autocomplete) ? this.autocomplete : (this.type === 'password') ? 'new-password' : null
}
},
props: { props: {
value: { type: [String, Number], default: null }, value: { type: [String, Number], default: null },
id: { type: String, default: null }, id: { type: String, default: null },
@ -26,6 +35,9 @@ export default {
state: { type: Boolean, default: null }, state: { type: Boolean, default: null },
min: { type: Number, default: null }, min: { type: Number, default: null },
max: { type: Number, default: null }, max: { type: Number, default: null },
step: { type: Number, default: null },
trim: { type: Boolean, default: true },
autocomplete: { type: String, default: null },
name: { type: String, default: null } name: { type: String, default: null }
} }
} }

View file

@ -69,17 +69,17 @@ export function formatYunoHostArgument (arg) {
{ {
types: [undefined, 'string', 'path'], types: [undefined, 'string', 'path'],
name: 'InputItem', name: 'InputItem',
props: defaultProps props: defaultProps.concat(['autocomplete', 'trim'])
}, },
{ {
types: ['email', 'url', 'date', 'time', 'color'], types: ['email', 'url', 'date', 'time', 'color'],
name: 'InputItem', name: 'InputItem',
props: defaultProps.concat(['type']) props: defaultProps.concat(['type', 'trim'])
}, },
{ {
types: ['password'], types: ['password'],
name: 'InputItem', name: 'InputItem',
props: defaultProps.concat(['type']), props: defaultProps.concat(['type', 'autocomplete', 'trim']),
callback: function () { callback: function () {
if (!arg.help) { if (!arg.help) {
arg.help = 'good_practices_about_admin_password' arg.help = 'good_practices_about_admin_password'
@ -91,7 +91,7 @@ export function formatYunoHostArgument (arg) {
{ {
types: ['number', 'range'], types: ['number', 'range'],
name: 'InputItem', name: 'InputItem',
props: defaultProps.concat(['type', 'min', 'max']), props: defaultProps.concat(['type', 'min', 'max', 'step']),
callback: function () { callback: function () {
if (!isNaN(parseInt(arg.min))) { if (!isNaN(parseInt(arg.min))) {
validation.minValue = validators.minValue(parseInt(arg.min)) validation.minValue = validators.minValue(parseInt(arg.min))
@ -123,7 +123,12 @@ export function formatYunoHostArgument (arg) {
{ {
types: ['file'], types: ['file'],
name: 'FileItem', name: 'FileItem',
props: defaultProps.concat(['accept']) props: defaultProps.concat(['accept']),
callback: function () {
if (value) {
value = new File([''], value.replace(/^.*[/]/, ''))
}
}
}, },
{ {
types: ['text'], types: ['text'],
@ -202,8 +207,8 @@ export function formatYunoHostArgument (arg) {
field.link = { href: arg.helpLink.href, text: i18n.t(arg.helpLink.text) } field.link = { href: arg.helpLink.href, text: i18n.t(arg.helpLink.text) }
} }
if (arg.visibleif) { if (arg.visibleIf) {
field.visibleif = arg.visibleif field.visibleIf = arg.visibleIf
} }
return { return {

View file

@ -19,7 +19,7 @@
<template v-for="(field, fname) in section.fields"> <template v-for="(field, fname) in section.fields">
<form-field :key="fname" v-model="forms[id_][fname]" <form-field :key="fname" v-model="forms[id_][fname]"
:validation="$v.forms[id_][fname]" :validation="$v.forms[id_][fname]"
v-if="isVisible(field.visibleif)" v-bind="field" v-if="isVisible(field.visibleIf)" v-bind="field"
/> />
</template> </template>
</div> </div>
@ -73,9 +73,8 @@ export default {
if (!expression) return true if (!expression) return true
const context = {} const context = {}
for (const args of Object.values(this.forms)) { for (const args of Object.values(this.forms)) {
for (const fname in args) { for (const shortname in args) {
const shortname = fname.split('_').slice(4).join('_').toLowerCase() context[shortname] = args[shortname]
context[shortname] = args[fname]
} }
} }
return evaluate(context, expression) return evaluate(context, expression)