mirrors/lnbits-legend
1
0
Fork 0
mirror of https://github.com/lnbits/lnbits-legend.git synced 2025-03-15 12:20:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat: vue components lnbits-dynamic-fields validation (#2645)

Browse source 
* 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:
dni ⚡ 2024-08-30 18:06:55 +02:00 • committed by GitHub
parent 28df100d9a
commit eb37a064ad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 83 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lnbits/static/bundle.min.js vendored
View file

File diff suppressed because one or more lines are too long

103
lnbits/static/js/components.js
View file

@ -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) {