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)

lnbits/static/js/components.js

@@ -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"
+            <q-input
-              :label="o.label || o.name" :hint="o.description" filled dense>
+              v-if="o.type === 'number'"
-            </q-input>
+              type="number"
-            <q-input v-else-if="o.type === 'text'" v-model="formData[o.name]" @input="handleValueChanged" type="textarea"
+              v-model="formData[o.name]"
-              rows="5" :label="o.label || o.name" :hint="o.description" filled dense>
+              @input="handleValueChanged"
-            </q-input>
+              :label="o.label || o.name"
-            <q-input v-else-if="o.type === 'password'" v-model="formData[o.name]" @input="handleValueChanged" type="password"
+              :hint="o.description"
-                :label="o.label || o.name" :hint="o.description" filled dense>
+              :rules="applyRules(o.required)"
-            </q-input>
+              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"
+            <q-input
-              :hint="o.description" :options="o.values"></q-select>
+              v-else-if="o.type === 'hidden'"
-
+              v-model="formData[o.name]"
-            <q-select v-else-if="o.isList" filled multiple dense v-model.trim="formData[o.name]" use-input use-chips
+              type="text"
-              @input="handleValueChanged" multiple hide-dropdown-icon input-debounce="0" new-value-mode="add-unique"
+              style="display: none"
-              :label="o.label || o.name" :hint="o.description">
+              :rules="applyRules(o.required)"
-            </q-select>
+            ></q-input>
-            <q-input v-else v-model="formData[o.name]" @input="handleValueChanged" :label="o.label || o.name" :hint="o.description"
+            <q-input
-              filled dense>
+              v-else
-            </q-input>
+              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) {