<template>
  <div class="row justify-between">
    <q-btn
      class="q-mb-lg bg-accent"
      no-caps
      label="Agregar"
      @click="addField('string')"
    />
  </div>
  <div v-for="(field, index) in fields" :key="index" class="row justify-center">
    <component
      class="q-my-sm col-11"
      :is="componentMap[field]"
      v-model="data"
    />
    <q-btn class="q-ma-sm" icon="delete" dense @click="deleteField(index)" />
  </div>
</template>

<script setup>
import { useComponentsMap } from './ComponentsMap.js';
import {QBtn} from 'quasar'

import { ref } from 'vue';

const fields = ref([]);
const data = ref([]);
const { componentMap } = useComponentsMap();

const addField = (val) => {
  fields.value.push(val);
};

const deleteField = (index) => {
  fields.value.splice(index, 1);
};
</script>
