Add first and second step

assets/css/app.css

@@ -1,8 +1,8 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
+@layer components {
     @import "stepper";
     @import "range";
-
-@import "tailwindcss/utilities";
-
+}

assets/js/Stepper.vue

@@ -1,34 +1,27 @@
 <template>
-    <div class="slider" ref="stepper">
-        <div class="px-3 w-full">
-            <div v-show="innerStep === 0">
-                <h2 class="text-xl font-bold text-primary text-center">Welche Immobilie möchten Sie verkaufen?</h2>
-                <div class="radio-grid grid-cols-4">
-                    <label :key="index" v-for="category, index in categories" class="option-box">
-                        <input class="invisible absolute left-0 top-0" v-model="value.category_id" :value="index" @change="step++" type="radio" name="category">
-                        <span>
-                            <span v-html="svg('home')"></span>
-                            <span v-text="category.label"></span>
-                        </span>
-                    </label>
-                </div>
-            </div>
-        </div>
-        <div class="px-3 w-full">
-            <div v-show="innerStep === 1">
-                <h2 class="text-xl font-bold text-primary text-center">Bitte wählen Sie die Art des Hauses</h2>
-                <div v-if="value.category_id !== null" class="radio-grid grid-cols-2">
-                    <label :key="index" v-for="kind, index in categories[value.category_id].kinds" class="option-box">
-                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.kind_id">
-                        <span>
-                            <span v-html="svg('home')"></span>
-                            <span v-text="kind.label"></span>
-                        </span>
-                    </label>
-                </div>
-            </div>
-        </div>
-        <div class="px-3 w-full">
+    <div class="flex gap-8 scroll-smooth snap-mandatory overflow-auto snap-x max-w-[1260px] py-16 px-8 mx-auto" ref="stepper">
+        <div class="w-full flex-none snap-always snap-center">
+            <div>
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
+                <h2 class="text-4xl font-bold text-gray-700 text-center mt-2">
+                    Welche <span class="text-primary">Immobilie</span><br>möchten Sie verkaufen?
+                </h2>
+                <radio-grid v-model="value.category_id" class="mt-8" :options="categories"></radio-grid>
+                <pagination v-model="innerStep" @next="step++" @prev="step--" class="mt-5"></pagination>
+            </div>
+        </div>
+        <div class="w-full flex-none snap-always snap-center">
+            <div>
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
+                <h2 class="text-4xl font-bold text-gray-700 text-center mt-2">
+                    Bitte wählen Sie<br>die <span class="text-primary">Art</span> des Hauses
+                </h2>
+                <radio-grid v-model="value.kind_id" class="mt-8" :options="kinds[value.category_id]"></radio-grid>
+                <pagination v-model="innerStep" @next="step++" @prev="step--" class="mt-5"></pagination>
+            </div>
+        </div>
+        <!--
+        <div class="w-full flex-none snap-always snap-center">
             <div v-show="innerStep === 2">
                 <h2 class="text-xl font-bold text-primary text-center">Wählen Sie die Grundstücksfläche</h2>
                 <div class="radio-grid grid-cols-4">
@@ -42,7 +35,7 @@
                 </div>
             </div>
         </div>
-        <div class="px-3 w-full">
+        <div class="w-full flex-none snap-always snap-center">
             <div v-show="innerStep === 3">
                 <h2 class="text-xl font-bold text-primary text-center">Wählen Sie die Wohnfläche</h2>
                 <div class="radio-grid grid-cols-4">
@@ -56,7 +49,7 @@
                 </div>
             </div>
         </div>
-        <div class="px-3 w-full">
+        <div class="w-full flex-none snap-always snap-center">
             <div v-show="innerStep === 4">
                 <h2 class="text-xl font-bold text-primary text-center">Wie viele Etagen hat das Haus?</h2>
                 <div class="radio-grid grid-cols-4">
@@ -70,7 +63,7 @@
                 </div>
             </div>
         </div>
-        <div class="px-3 w-full">
+        <div class="w-full flex-none snap-always snap-center">
             <div v-show="innerStep === 5">
                 <h2 class="text-xl font-bold text-primary text-center">Wie ist die Ausstattung des Hauses</h2>
                 <div class="radio-grid grid-cols-4">
@@ -84,7 +77,7 @@
                 </div>
             </div>
         </div>
-        <div class="px-3 w-full">
+        <div class="w-full flex-none snap-always snap-center">
             <div v-show="innerStep === 6">
                 <h2 class="text-xl font-bold text-primary text-center">Wie viele Zimmer hat das Haus</h2>
                 <div class="flex flex-col">
@@ -94,7 +87,7 @@
                 </div>
             </div>
         </div>
-        <div class="px-3 w-full">
+        <div class="w-full flex-none snap-always snap-center">
             <div v-show="innerStep === 7">
                 <h2 class="text-xl font-bold text-primary text-center">Wann wurde das Haus gebaut?</h2>
                 <div class="flex flex-col">
@@ -104,7 +97,7 @@
                 </div>
             </div>
         </div>
-        <div class="px-3 w-full">
+        <div class="w-full flex-none snap-always snap-center">
             <div v-show="innerStep === 8">
                 <h2 class="text-xl font-bold text-primary text-center">Wann wollen Sie die Immobilie verkaufen?</h2>
                 <div class="radio-grid grid-cols-3">
@@ -118,7 +111,7 @@
                 </div>
             </div>
         </div>
-        <div class="px-3 w-full">
+        <div class="w-full flex-none snap-always snap-center">
             <div v-show="innerStep === 9">
                 <h2 class="text-xl font-bold text-primary text-center">Bitte geben Sie ihre Daten ein</h2>
                 <div class="grid grid-cols-2 gap-6">
@@ -136,6 +129,7 @@
                 </div>
             </div>
         </div>
+        -->
     </div>
 </template>
 
@@ -144,7 +138,7 @@ export default {
     data: function() {
         return {
             value: {
-                category_id: null,
+                category_id: 'house',
                 kind_id: null,
                 grundstuecksflaeche: null,
                 wohnflaeche: null,
@@ -163,18 +157,21 @@ export default {
                 furnishing: null,
             },
             innerStep: 0,
-            slideCount: 10,
+            slideCount: 2,
             categories: [
-                { key: 'house', label: 'Haus', kinds: [
-                    { label: 'Einfamilienhaus' },
-                    { label: 'Mehrfamilienhaus' },
-                    { label: 'Reihenhaus' },
-                    { label: 'Doppelhaushälfte' },
-                ] },
-                { key: 'area', label: 'Grundstück', kinds: [] },
-                { key: 'apartment', label: 'Wohnung', kinds: [] },
-                { key: 'gewerbe', label: 'Gewerbe', kinds: [] },
+                {key: 'house', label: 'Haus', 'icon': 'category-house'},
+                {key: 'area', label: 'Grundstück', icon: 'category-plot'},
+                {key: 'apartment', label: 'Wohnung', icon: 'category-apartment'},
+                {key: 'gewerbe', label: 'Gewerbe', icon: 'category-business'},
             ],
+            kinds: {
+                house: [
+                    { kind: 'singleFamily', label: 'Einfamilienhaus', 'icon' : 'kind-house-einfamilie' },
+                    { kind: 'multiFamily', label: 'Mehrfamilienhaus', 'icon' : 'kind-house-mehrfamilie' },
+                    { kind: 'rowHouse', label: 'Reihenhaus', 'icon' : 'kind-house-reihenhaus' },
+                    { kind: 'semiDetached', label: 'Doppelhaushälfte', 'icon' : 'kind-house-doppelhaus' },
+                ]
+            },
             grundstuecksflaechen: [
                 { label: 'bis 200 m²' },
                 { label: 'bis 201 - 800 m²' },
@@ -209,6 +206,7 @@ export default {
     computed: {
         step: {
             set(index) {
+                console.log(index);
                 var _self = this;
                 this.innerStep = index;
 

assets/js/app.js

@@ -2,14 +2,17 @@ import axios from 'axios';
 import wNumb from 'wnumb';
 import Vue from 'vue';
 import Stepper from './Stepper.vue';
+import RadioGrid from './components/RadioGrid.vue';
+import Pagination from './components/Pagination.vue';
+import VBtn from './components/VBtn.vue';
 import svg from './svg.mixin.js';
 
 Vue.mixin(svg);
-const app = new Vue({
-    components: {
-        Stepper
-    },
-});
+Vue.component('radio-grid', RadioGrid);
+Vue.component('stepper', Stepper);
+Vue.component('v-btn', VBtn);
+Vue.component('pagination', Pagination);
+const app = new Vue();
 app.$mount(document.getElementById('stepper-main'));
 
 var units = window.units = {
@@ -35,117 +38,3 @@ var units = window.units = {
         decimals: 2
     })
 };
-
-
-window.stepper = {
-    errors: {},
-    parts: {
-        notar: 0.02,
-        grundsteuer: 0.065,
-        makler: 0.0357
-    },
-    units: units,
-    step: 0,
-    greetings: [ 
-        { value: 'frau', label: 'Frau' },
-        { value: 'herr', label: 'Herr' },
-        { value: 'divers', label: 'Divers' },
-    ],
-    jobs: [ 
-        { value: 'angestellt', label: 'Angestellte*r' },
-    ],
-    titles: [
-        { value: 'prof', label: 'Prof' },
-        { value: 'dr', label: 'Dr' },
-    ],
-    value: {
-        datenschutz: false,
-        kind: null,
-        kauf: {
-            kaufpreis: 300000,
-            modernisierung: 0,
-            baukosten: 0,
-            eigenkapital: 0,
-        },
-        bau: {
-            grundstueckspreis: 300000,
-            bezahlt: '0',
-            baukosten: 0,
-            eigenkapital: 0,
-        },
-        anschluss: {
-            objektwert: 300000,
-            umschuldung: 50000,
-            zuskap: 50000
-        },
-        wert: 300000,
-        umschuldung: 0,
-        kapital_zus: 0,
-        greeting: null,
-        title: null,
-        firstname: '',
-        lastname: '',
-        zip: '',
-        location: '',
-        phone: '',
-        email: '',
-        job: '',
-        haushalt: '',
-        einnahme: '',
-        energetisch: false,
-        modernisierung: false,
-    },
-    kinds: [
-        {label: 'Kauf einer Immobilie', value: 'kauf', icon: 'immobilienfinanzierung'},
-        {label: 'Eigenes Bauvorhaben', value: 'bau', icon: 'bauvorhaben'},
-        {label: 'Anschlussfinanzierung', value: 'anschluss', icon: 'anschlussfinanzierung'}
-    ],
-
-    /* Methods */
-
-    submit() {
-        axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', {
-            ...this.value
-        }).then(ret => {
-            if (ret.data !== undefined && ret.data.errors !== undefined) {
-                this.errors = ret.data.errors;
-            } else {
-                this.errors = {};
-                this.slideTo(null, this.step+1);
-
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(window.arguments);}
-                gtag('js', new Date());
-
-                gtag('config', 'AW-394678894');
-            }
-        });
-    },
-
-    error(field) {
-        return this.errors[field] === undefined ? '' : this.errors[field];
-    },
-
-    slideTo(e, index) {
-        if (e !== null) {
-            e.preventDefault();
-        }
-
-        var _self = this;
-        this.step = index;
-
-        if (index === 0) {
-            window.setTimeout(function() {
-                _self.value.kind = null;
-            }, 500);
-        }
-
-        jQuery('html, body').stop().animate({
-            'scrollTop': jQuery('#stepper-main').offset().top
-        }, 600, 'swing');
-
-        this.$nextTick(function() {
-            _self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index;
-        });
-    },
-};

assets/js/components/Pagination.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="flex justify-between">
+        <v-btn href="#" @click.prevent="$emit('prev')" :disabled="value === 0">Zurück</v-btn>
+        <v-btn href="#" @click.prevent="$emit('next')">Weiter</v-btn>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            default: null
+        }
+    }
+};
+</script>

assets/js/components/RadioGrid.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="flex space-x-4 justify-center">
+        <label :key="index" v-for="item, index in options" class="w-36">
+            <input class="invisible absolute left-0 top-0 peer" :checked="value === item.key" @change="$emit('input', item.key)" :value="item.key" type="radio" name="category">
+            <span class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primary peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200">
+                <img :src="`/wp-content/plugins/stepper/resources/img/icons/${item.icon}.svg`" class="w-16 h-16 flex-none">
+                <span class="mt-4 font-semibold text-gray-700" v-text="item.label"></span>
+            </span>
+        </label>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            default: null,
+        },
+        options: {
+            type: Array,
+            default: []
+        }
+    }
+};
+</script>

assets/js/components/VBtn.vue

@@ -0,0 +1,9 @@
+<template>
+    <button v-on="$listeners" class="bg-primary px-5 py-2 leading-none rounded text-xs font-semibold text-white disabled:bg-gray-300"><slot></slot></button>
+</template>
+
+<script>
+export default {
+    
+};
+</script>

tailwind.config.js

@@ -1,16 +1,16 @@
 module.exports = {
     content: [
-        './views/*.htm',
-        './assets/js/*.vue',
+        './assets/js/**/*.vue',
     ],
     theme: {
         extend: {
             colors: {
                 primary: {
-                    DEFAULT: 'hsl(26.5, 86.5%, 50.8%)'
+                    DEFAULT: 'hsl(25.3, 71.3%, 56.3%)'
                 }
             }
         },
     },
     plugins: [],
+    important: true,
 }