mirror of
https://github.com/lnbits/lnbits.git
synced 2025-10-10 12:32:34 +02:00
feat: add lnbits-dynamic-fields
This commit is contained in:
@@ -586,3 +586,75 @@ Vue.component('lnbits-notifications-btn', {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Vue.component('lnbits-dynamic-fields', {
|
||||||
|
mixins: [windowMixin],
|
||||||
|
props: ['options', 'value'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formData: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
template: `
|
||||||
|
<div v-if="formData">
|
||||||
|
<div class="row q-mb-lg" v-for="o in options">
|
||||||
|
<div class="col auto-width">
|
||||||
|
<p v-if=o.options?.length class="q-ml-xl">
|
||||||
|
<span v-text="o.name"></span> <small v-if="o.description"> (<span v-text="o.description"></span>)</small>
|
||||||
|
</p>
|
||||||
|
<lnbits-dynamic-fields v-if="o.options?.length" :options="o.options" v-model="formData[o.name]" 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.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.name" :hint="o.description" filled dense>
|
||||||
|
</q-input>
|
||||||
|
<div v-else-if="o.type === 'bool'">
|
||||||
|
<q-item tag="label" v-ripple>
|
||||||
|
<q-item-section avatar top>
|
||||||
|
<q-checkbox v-model="formData[o.name]" @input="handleValueChanged" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label><span v-text="o.name"></span></q-item-label>
|
||||||
|
<q-item-label caption> <span v-text="o.description"></span> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</div>
|
||||||
|
<q-select v-else-if="o.type === 'select'" v-model="formData[o.name]" @input="handleValueChanged" :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.name" :hint="o.description">
|
||||||
|
</q-select>
|
||||||
|
<q-input v-else v-model="formData[o.name]" @input="handleValueChanged" :label="o.name" :hint="o.description"
|
||||||
|
filled dense>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
methods: {
|
||||||
|
buildData(options, data = {}) {
|
||||||
|
return options.reduce((d, option) => {
|
||||||
|
if (option.options?.length) {
|
||||||
|
d[option.name] = this.buildData(option.options, data[option.name])
|
||||||
|
} else {
|
||||||
|
d[option.name] = data[option.name] ?? option.default
|
||||||
|
}
|
||||||
|
return d
|
||||||
|
}, {})
|
||||||
|
},
|
||||||
|
handleValueChanged() {
|
||||||
|
this.$emit('input', this.formData)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: function () {
|
||||||
|
this.formData = this.buildData(this.options, this.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
Reference in New Issue
Block a user