:recyle: adding transitions | emitting events up for preview

frontend/src/components/form/button-choice.vue

@@ -3,13 +3,13 @@
     header
         p selections {{selected}} {{opts}}
     main(:class="{ 'f-row': opts.length > 2, 'f-col': opts.length <= 2 }")
-        button(v-for="op in opts" :class="isSelected(op)" @click="selectOption(op)") {{ op }}
+        button(v-for="op in opts" :class="isSelected(op)" @mouseover="hoverOption(op)" @click="selectOption(op)") {{ op }}
 </template>
 
 <script setup>
 import { defineProps, defineEmits, ref } from 'vue'
 
-const emit = defineEmits(['selected'])
+const emit = defineEmits(['selected', 'hovered'])
 
 const props = defineProps({
     opts: {
@@ -20,7 +20,7 @@ const props = defineProps({
     },
     prompt: {
         required: true,
-        type: String
+        type: String,
     },
 })
 
@@ -40,6 +40,9 @@ const selectOption = optionVal => {
     sel[props.prompt] = selected.value[0]
     emit('selected', sel)
 }
+const hoverOption = optionVal => {
+    emit('hovered', props.prompt, optionVal)
+}
 </script>
 
 <style lang="postcss">

frontend/src/components/form/input-string.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref } from 'vue'
+import { defineProps, defineEmits, ref, watch } from 'vue'
 
-const emit = defineEmits(['onButtonSelect'])
+const emit = defineEmits(['selected', 'input'])
 
 const props = defineProps({
     default: {
@@ -26,7 +26,7 @@ const props = defineProps({
     },
     prompt: {
         required: true,
-        type: String
+        type: String,
     },
 })
 
@@ -37,6 +37,12 @@ const selectOption = () => {
     sel[props.prompt] = input.value
     emit('selected', sel)
 }
+watch(
+    () => input.value,
+    () => {
+        emit('input', props.prompt, input.value)
+    },
+)
 </script>
 
 <style lang="postcss">

frontend/src/views/Survey.vue

@@ -5,41 +5,53 @@ main.f-col.start.w-full
     //- ButtonChoice
     //- InputString
     header.w-full.f-col
-        h3(v-if="!name") hello, what shall i call you?
-        h3(v-if="step == 1") What can i help you with, 
-            span {{ name }}?
-            br
-            span I am seeking a ___________.
-        h3(v-else-if="step == 2") A {{ seeking }} then. You're in the right place.
-            span How would you like to use siimee? 
-            br
-            span I am ________________.
-        h3(v-else-if="[3, 4, 5, 6].includes(step)")
-            span I am a
-            span(v-if="!role && !experience") _________ _________
-            span(v-else-if="role && !experience") _________ {{ role }}
-            span(v-else-if="!role && experience") {{ experience }} _________
-            span(v-else) {{ experience }} {{ role }}
-            span . 
-            br
-            span Looking for a 
-            span(v-if="!distance && !duration") ________ ________ 
-            span(v-else-if="!distance && duration") {{ duration }} ________ 
-            span(v-else-if="distance && !duration") _________ {{ distance }} 
-            span(v-else) {{ duration }} {{ distance }} 
-            span role.
-        h3(v-else)
-            p My name is {{ name }}.
-                span(v-if="pronouns") My pronouns are {{ pronouns }}.
-            p I am 
-                span a {{ experience }}
-                span {{ role }}
-            p Looking for a {{ duration }}, 
-                span {{ distance }} 
-                span {{ seeking }}.
-            p I am proficient in 
-                span(v-for="(lang, i) in language") {{ lang }}  
-                    span(v-if="i > 1") , 
+        Transition(name="slide-up" :duration="1600")
+            h3(v-if="step == 0") hello, what shall i call you?
+                span(v-for="letter in name" class="fade") {{ letter }}
+
+            h3(v-else-if="step == 1") What can i help you with, 
+                span {{ name }}?
+                br
+                span I am seeking a 
+                    span(v-if="!seeking") ___________.
+                    span(v-else class="fade") {{ seeking }}.
+            
+            h3(v-else-if="step == 2") Looking for a {{ seeking }} then. 
+                span You're in the right place. 
+                br
+                span How would you like to use siimee? 
+                br
+                span I am 
+                    span(v-if="!urgency") ___________.
+                    span(v-else class="fade") {{ urgency }}.
+            
+            h3(v-else-if="[3, 4, 5, 6].includes(step)")
+                span I am a 
+                span(v-if="!role && !experience" class="fade") _________ _________
+                span(v-else-if="role && !experience" class="fade") _________ {{ role }}
+                span(v-else-if="!role && experience" class="fade") {{ experience }} _________
+                span(v-else class="fade") {{ experience }} {{ role }}
+                span . 
+                br
+                span Looking for a 
+                span(v-if="!distance && !duration" class="fade") ________ ________ 
+                span(v-else-if="!distance && duration" class="fade") {{ duration }} ________ 
+                span(v-else-if="distance && !duration" class="fade") _________ {{ distance }} 
+                span(v-else class="fade") {{ duration }} {{ distance }} 
+                span role.
+        
+            h3(v-else)
+                p My name is {{ name }}.
+                    span(v-if="pronouns") My pronouns are {{ pronouns }}.
+                p I am 
+                    span a {{ experience }}
+                    span {{ role }}
+                p Looking for a {{ duration }}, 
+                    span {{ distance }} 
+                    span {{ seeking }}.
+                p I am proficient in 
+                    span(v-for="(lang, i) in language") {{ lang }}  
+                        span(v-if="i > 1") , 
 
     article.match.w-full
         ul.w-full
@@ -52,11 +64,13 @@ main.f-col.start.w-full
                             :opts="q.responses"
                             :prompt="q.response_key_prompt"
                             @selected="onButtonSelect"
+                            @hovered="onInputChange"
+                            @input="onInputChange"
                         )
                         div(v-else-if="step >= priorityQuestions.length")
                             button(@click="step = 0") save
                     footer.f-row
-                        button(@click="step--").w-full back
+                        button(@click="back(q.response_key_prompt)").w-full back
         //- SurveyForm(v-if="validSurvey && validSurvey.steps" :form="validSurvey.steps" :pid="pid")
     MainNav(:pid="pid" @show-sidebar="$emit('show-sidebar')")
 </template>
@@ -84,47 +98,88 @@ export default {
             step: 0,
             name: '',
             seeking: '',
+            urgency: '',
             role: '',
+            duration: '',
+            distance: '',
             experience: '',
             position: '',
             language: '',
-            location: '',
+            pronouns: '',
             zipcode: '',
         }
     },
     computed: {
         profileQuestions() {
-            if(!this.validSurvey) return []
-            return this.validSurvey.steps.filter(step => step.response_key_category == 'profile')
+            if (!this.validSurvey) return []
+            return this.validSurvey.steps.filter(
+                step => step.response_key_category == 'profile',
+            )
         },
         priorityQuestions() {
-            if(!this.validSurvey) return []
-            return this.validSurvey.steps.filter(step => step.response_key_category != 'profile')
-        }
+            if (!this.validSurvey) return []
+            return this.validSurvey.steps.filter(
+                step => step.response_key_category != 'profile',
+            )
+        },
     },
     async created() {
-        this.validSurvey = await surveyFactory.createSurvey(allSteps['usa'], possible['usa']['roles'])
+        this.validSurvey = await surveyFactory.createSurvey(
+            allSteps['usa'],
+            possible['usa']['roles'],
+        )
     },
     methods: {
         /**
          * Set state from promptVal key:value object
          * from button-coice or button-multi
          */
-        onButtonSelect(promptVal){
+        onButtonSelect(promptVal) {
             console.log('promptVal :', promptVal)
-            for(const [prompt, val] of Object.entries(promptVal)) {
+            for (const [prompt, val] of Object.entries(promptVal)) {
                 this[prompt] = val
-                if(prompt == 'seeking') {
+                if (prompt == 'seeking') {
                     this.validSurvey.setRoleResponses(val)
                 }
             }
             this.step++
         },
+        onInputChange(prompt, val) {
+            console.log('prompt :>> ', prompt)
+            console.log('val :>> ', val)
+            this[prompt] = val
+        },
+        back(prompt) {
+            console.log('prompt :>> ', prompt)
+            this[prompt] = ''
+            this.step--
+        },
     },
 }
 </script>
 
 <style lang="postcss">
+.slide-up
+    &-leave, &-enter
+        &-active
+            transition-delay: 500ms
+            transition-property: opacity, background-color, font-size, transform, color
+            transition-timing-function: cubic-bezier(1, 0.3, 0.5, 1)
+            transition-duration: 300ms
+    &-enter-from, &-leave-to
+        opacity: 0
+
+.fade
+    animation: fadeIn 300ms ease-in
+
+@keyframes fadeIn
+    0%
+        opacity: 0
+    50%
+        opacity: 0.5
+    100%
+        opacity:1
+
 h1
     color: white