mirror of
https://github.com/lnbits/lnbits-legend.git
synced 2025-03-15 12:20:21 +01:00
feat: vue components lnbits-dynamic-fields validation (#2645)
* feat: vue components lnbits-dynamic-fields validation - add validation to fields if require = true - add type hidden field (can be useful for create/update dialog with passing item_id into update hidden field)
This commit is contained in:
parent
28df100d9a
commit
eb37a064ad
2 changed files with 83 additions and 22 deletions
2
lnbits/static/bundle.min.js
vendored
2
lnbits/static/bundle.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -610,7 +610,8 @@ Vue.component('lnbits-dynamic-fields', {
|
|||
props: ['options', 'value'],
|
||||
data() {
|
||||
return {
|
||||
formData: null
|
||||
formData: null,
|
||||
rules: [val => !!val || 'Field is required']
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -625,15 +626,66 @@ Vue.component('lnbits-dynamic-fields', {
|
|||
@input="handleValueChanged" class="q-ml-xl">
|
||||
</lnbits-dynamic-fields>
|
||||
<div v-else>
|
||||
<q-input v-if="o.type === 'number'" v-model="formData[o.name]" @input="handleValueChanged" type="number"
|
||||
:label="o.label || o.name" :hint="o.description" filled dense>
|
||||
</q-input>
|
||||
<q-input v-else-if="o.type === 'text'" v-model="formData[o.name]" @input="handleValueChanged" type="textarea"
|
||||
rows="5" :label="o.label || o.name" :hint="o.description" filled dense>
|
||||
</q-input>
|
||||
<q-input v-else-if="o.type === 'password'" v-model="formData[o.name]" @input="handleValueChanged" type="password"
|
||||
:label="o.label || o.name" :hint="o.description" filled dense>
|
||||
</q-input>
|
||||
<q-input
|
||||
v-if="o.type === 'number'"
|
||||
type="number"
|
||||
v-model="formData[o.name]"
|
||||
@input="handleValueChanged"
|
||||
:label="o.label || o.name"
|
||||
:hint="o.description"
|
||||
:rules="applyRules(o.required)"
|
||||
filled
|
||||
dense
|
||||
></q-input>
|
||||
<q-input
|
||||
v-else-if="o.type === 'text'"
|
||||
type="textarea"
|
||||
rows="5"
|
||||
v-model="formData[o.name]"
|
||||
@input="handleValueChanged"
|
||||
:label="o.label || o.name"
|
||||
:hint="o.description"
|
||||
:rules="applyRules(o.required)"
|
||||
filled
|
||||
dense
|
||||
></q-input>
|
||||
<q-input
|
||||
v-else-if="o.type === 'password'"
|
||||
v-model="formData[o.name]"
|
||||
@input="handleValueChanged"
|
||||
type="password"
|
||||
:label="o.label || o.name"
|
||||
:hint="o.description"
|
||||
:rules="applyRules(o.required)"
|
||||
filled
|
||||
dense
|
||||
></q-input>
|
||||
<q-select
|
||||
v-else-if="o.type === 'select'"
|
||||
v-model="formData[o.name]"
|
||||
@input="handleValueChanged"
|
||||
:label="o.label || o.name"
|
||||
:hint="o.description"
|
||||
:options="o.values"
|
||||
:rules="applyRules(o.required)"
|
||||
></q-select>
|
||||
<q-select
|
||||
v-else-if="o.isList"
|
||||
v-model.trim="formData[o.name]"
|
||||
@input="handleValueChanged"
|
||||
input-debounce="0"
|
||||
new-value-mode="add-unique"
|
||||
:label="o.label || o.name"
|
||||
:hint="o.description"
|
||||
:rules="applyRules(o.required)"
|
||||
filled
|
||||
multiple
|
||||
dense
|
||||
use-input
|
||||
use-chips
|
||||
multiple
|
||||
hide-dropdown-icon
|
||||
></q-select>
|
||||
<div v-else-if="o.type === 'bool'">
|
||||
<q-item tag="label" v-ripple>
|
||||
<q-item-section avatar top>
|
||||
|
@ -645,23 +697,32 @@ Vue.component('lnbits-dynamic-fields', {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<q-select v-else-if="o.type === 'select'" v-model="formData[o.name]" @input="handleValueChanged" :label="o.label || o.name"
|
||||
:hint="o.description" :options="o.values"></q-select>
|
||||
|
||||
<q-select v-else-if="o.isList" filled multiple dense v-model.trim="formData[o.name]" use-input use-chips
|
||||
@input="handleValueChanged" multiple hide-dropdown-icon input-debounce="0" new-value-mode="add-unique"
|
||||
:label="o.label || o.name" :hint="o.description">
|
||||
</q-select>
|
||||
<q-input v-else v-model="formData[o.name]" @input="handleValueChanged" :label="o.label || o.name" :hint="o.description"
|
||||
filled dense>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-else-if="o.type === 'hidden'"
|
||||
v-model="formData[o.name]"
|
||||
type="text"
|
||||
style="display: none"
|
||||
:rules="applyRules(o.required)"
|
||||
></q-input>
|
||||
<q-input
|
||||
v-else
|
||||
v-model="formData[o.name]"
|
||||
@input="handleValueChanged"
|
||||
:hint="o.description"
|
||||
:label="o.label || o.name"
|
||||
:rules="applyRules(o.required)"
|
||||
filled
|
||||
dense
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
methods: {
|
||||
applyRules(required) {
|
||||
return required ? this.rules : []
|
||||
},
|
||||
buildData(options, data = {}) {
|
||||
return options.reduce((d, option) => {
|
||||
if (option.options?.length) {
|
||||
|
|
Loading…
Add table
Reference in a new issue