bravio init project

2025-10-15 09:41:47 +02:00
commit d6859c386f
74 changed files with 15820 additions and 0 deletions
--- a/components/SliceQuestion.vue
+++ b/components/SliceQuestion.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="space-y-6">
+    <form @submit.prevent="handleSubmit" class="space-y-4">
+      <p class="text-sm text-muted">
+        Pregunta {{ currentIndex + 1 }} de {{ total }}
+      </p>
+      <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-1">
+          <h2 class="text-xl font-semibold text-gray-900">{{ data.section.title }}</h2>
+          <p v-if="data.section.description" class="text-muted text-xs">{{ data.section.description }}</p>
+        </div>
+        <div class="flex flex-col gap-1">
+          <h3 class="text-base font-semibold text-gray-900">{{ data.question.title }}</h3>
+          <p v-if="data.question.description" class="text-muted text-xs">{{ data.question.description }}</p>
+        </div>
+        <p v-if="data.question.recommendation" class="w-fit text-xs bg-[#AFE3D2] px-3 py-1 rounded-3xl"><strong>Recomendado:</strong> {{ data.question.recommendation }}</p>
+      </div>
+
+      <template v-if="inputComponent">
+        <component
+          :is="inputComponent"
+          :key="data.question"
+          v-bind="inputProps"
+          
+          :required="data.input.required || false"
+          @input-value="localValue = $event"
+        />
+      </template>
+
+      <div class="flex justify-start gap-4 mt-6">
+        <button-CTA
+          color="transparent"
+          @click="$emit('previous')"
+        >
+          Atrás
+        </button-CTA>
+        <button-CTA
+          color="accent"
+          :disabled="localValue ? false : true"
+          @click="$emit('next', localValue)"
+        >
+          Siguiente
+        </button-CTA>
+      </div>
+      
+    </form>
+  </div>
+</template>
+
+<script>
+import InputText from "@/components/InputText.vue"
+import InputEmail from "@/components/InputEmail.vue"
+import InputTextarea from "@/components/InputTextarea.vue"
+import SelectMenu from "@/components/SelectMenu.vue"
+import InputCheckbox from "@/components/InputCheckbox.vue"
+import InputRadio from "@/components/InputRadio.vue"
+import InputAttach from "@/components/InputAttach.vue"
+import InputTelephone from "@/components/InputTelephone.vue"
+import InputUrl from "@/components/InputUrl.vue"
+import RangeInputs from "@/components/RangeInputs.vue"
+export default {
+  components: {
+    InputText,
+    InputEmail,
+    InputTextarea,
+    SelectMenu,
+    InputCheckbox,
+    InputRadio,
+    InputAttach,
+    InputTelephone,
+    InputUrl,
+    RangeInputs
+  },
+  props: {
+    data: { type: Object, required: true },
+    currentIndex: { type: Number, default: 0 },
+    total: { type: Number, default: 1 }
+  },
+
+  emits: ["next", "previous", "answer"],
+
+  data() {
+    return {
+      localValue: null
+    }
+  },
+
+  computed: {
+    inputComponent() {
+      switch (this.data.input.type) {
+        case "text": return "InputText"
+        case "email": return "InputEmail"
+        case "textarea": return "InputTextarea"
+        case "select": return "SelectMenu"
+        case "checkbox": return "InputCheckbox"
+        case "radio": return "InputRadio"
+        case "file": return "InputAttach"
+        case "telephone": return "InputTelephone"
+        case "url": return "InputUrl"
+        case "range": return "RangeInputs"
+        default: return "InputText"
+      }
+    },
+    inputProps() {
+      return this.data.input
+    }
+  },
+  
+  methods: {
+    handleSubmit() {
+      this.$emit("answer", { id: this.data.question, value: this.localValue })
+      this.$emit("next", this.localValue)
+    }
+  }
+}
+</script>