feat: add lnbits-dynamic-fields

lnbits/static/js/components.js

@@ -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)
+  }
+})