From cbbbfe53d1e0ffdc2c47a985ede457a3f339c8dd Mon Sep 17 00:00:00 2001
From: Philipp Lang <privat@zoomyboy.de>
Date: Tue, 19 Dec 2023 11:15:20 +0100
Subject: [PATCH] fix widths of slider

---
 assets/js/Stepper.vue | 160 ++++++++++++++++++++++--------------------
 1 file changed, 82 insertions(+), 78 deletions(-)

diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue
index c06b286..260d26f 100644
--- a/assets/js/Stepper.vue
+++ b/assets/js/Stepper.vue
@@ -1,10 +1,11 @@
 <template>
     <form action="#" method="POST" class="px-3 transition-all duration-300 mx-auto max-w-[960px]" @submit.prevent="submit">
-        <carousel v-model="innerStep" :per-page="1" :mouse-drag="false" :pagination-enabled="false" class="">
+        <carousel v-model="innerStep" :per-page="1" :mouse-drag="false" :pagination-enabled="false" ref="carousel">
             <slide :key="0" class="py-8 sm:py-16 px-3 sm:px-6">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
                 <heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
-                <radio-grid id="category" v-model="value.category" :options="categories"></radio-grid>
+                <radio-grid id="category" :modelValue="value.category" @update:modelValue="onUpdateCategory"
+                    :options="categories"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
                 </pagination>
             </slide>
@@ -67,9 +68,9 @@
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wann wurde das<br />Gewerbe <span class="text-primary">erbaut?</span></heading>
                 <!--
-                                                                                                                                <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
-                                                                                                                                    v-model="value.construction_year" />
-                                                                                                                -->
+                                                                                                                                                                    <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
+                                                                                                                                                                        v-model="value.construction_year" />
+                                                                                                                                                    -->
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
             <slide v-if="value.category == 'Gewerbe'" :key="5" class="py-8 sm:py-16 px-3 sm:px-6">
@@ -98,9 +99,9 @@
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
                 <!--
-                                                                                                                                <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
-                                                                                                                                    v-model="value.construction_year" />
-                                                                                                                -->
+                                                                                                                                                                    <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
+                                                                                                                                                                        v-model="value.construction_year" />
+                                                                                                                                                    -->
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
             <slide v-if="value.category == 'Wohnung'" class="py-8 sm:py-16 px-3 sm:px-6" :key="5">
@@ -125,79 +126,80 @@
             </slide>
 
             <!--
-                                    <slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-8 sm:py-16 px-3 sm:px-6">
-                                        <heading>Bitte geben Sie Ihre Daten ein</heading>
-                                        <div class="grid grid-cols-2 gap-4">
-                                            <v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
-                                            <v-text v-model="value.object_zip" name="object_zip" label="PLZ des Objekts" />
-                                            <v-text v-model="value.object_location" name="object_location" label="Ort des Objekts" />
-                                            <v-text v-model="value.firstname" name="firstname" label="Ihr Vorname" />
-                                            <v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
-                                            <v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
-                                            <v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
-                                            <v-checkbox class="col-span-2" v-model="value.datenschutz" id="datenschutz" name="datenschutz"
-                                                label='Ich habe die <a href="/datenschutzerklaerung" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
-                                        </div>
-                                        <pagination v-model="innerStep" class="mt-6" :nextable="
-                                            value.object_address.length > 0 &&
-                                            value.object_zip.length > 0 &&
-                                            value.object_location.length > 0 &&
-                                            value.firstname.length !== 0 &&
-                                            value.lastname.length !== 0 &&
-                                            value.email.length !== 0 &&
-                                            value.phone.length !== 0
-                                        " submit></pagination>
-                                    </slide>
+                                                                        <slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-8 sm:py-16 px-3 sm:px-6">
+                                                                            <heading>Bitte geben Sie Ihre Daten ein</heading>
+                                                                            <div class="grid grid-cols-2 gap-4">
+                                                                                <v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
+                                                                                <v-text v-model="value.object_zip" name="object_zip" label="PLZ des Objekts" />
+                                                                                <v-text v-model="value.object_location" name="object_location" label="Ort des Objekts" />
+                                                                                <v-text v-model="value.firstname" name="firstname" label="Ihr Vorname" />
+                                                                                <v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
+                                                                                <v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
+                                                                                <v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
+                                                                                <v-checkbox class="col-span-2" v-model="value.datenschutz" id="datenschutz" name="datenschutz"
+                                                                                    label='Ich habe die <a href="/datenschutzerklaerung" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
+                                                                            </div>
+                                                                            <pagination v-model="innerStep" class="mt-6" :nextable="
+                                                                                value.object_address.length > 0 &&
+                                                                                value.object_zip.length > 0 &&
+                                                                                value.object_location.length > 0 &&
+                                                                                value.firstname.length !== 0 &&
+                                                                                value.lastname.length !== 0 &&
+                                                                                value.email.length !== 0 &&
+                                                                                value.phone.length !== 0
+                                                                            " submit></pagination>
+                                                                        </slide>
 
-                                    <slide v-if="value.category" :key="slideCount[value.category] + 1">
-                                        <div
-                                            class="w-full h-full bg-white ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
-                                            <div class="bg-green-200 w-40 h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
-                                                <svg class="w-24 h-24 text-green-400 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg"
-                                                    viewBox="0 0 20 20" fill="currentColor">
-                                                    <path fill-rule="evenodd"
-                                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                                                        clip-rule="evenodd" />
-                                                </svg>
-                                            </div>
-                                            <div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
-                                                <div class="absolute right-0 top-0 h-full flex items-center justify-end">
-                                                    <div
-                                                        class="bg-green-200 w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]">
-                                                    </div>
-                                                </div>
-                                                <div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
-                                                    <img class="w-64 h-32 object-cover"
-                                                        src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-2.jpg" />
-                                                </div>
-                                                <div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
-                                                    <img class="w-64 h-32 object-cover"
-                                                        src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-1.jpg" />
-                                                </div>
-                                            </div>
-                                            <div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0">
-                                                <div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
-                                                <div class="text-sm mt-4 md:text-lg">
-                                                    In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei
-                                                    Ihnen melden.
-                                                </div>
-                                                <div class="flex justify-between mt-3 items-end">
-                                                    <span class="text-sm font-semibold text-neutral-700">Viele Grüße<br />Deine
-                                                        Immobilienbewertung</span>
-                                                    <div class="flex-none ml-3">
-                                                        <img
-                                                            src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/logo-slider.png" />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </slide>
-                        -->
+                                                                        <slide v-if="value.category" :key="slideCount[value.category] + 1">
+                                                                            <div
+                                                                                class="w-full h-full bg-white ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
+                                                                                <div class="bg-green-200 w-40 h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
+                                                                                    <svg class="w-24 h-24 text-green-400 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg"
+                                                                                        viewBox="0 0 20 20" fill="currentColor">
+                                                                                        <path fill-rule="evenodd"
+                                                                                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                                                                            clip-rule="evenodd" />
+                                                                                    </svg>
+                                                                                </div>
+                                                                                <div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
+                                                                                    <div class="absolute right-0 top-0 h-full flex items-center justify-end">
+                                                                                        <div
+                                                                                            class="bg-green-200 w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]">
+                                                                                        </div>
+                                                                                    </div>
+                                                                                    <div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
+                                                                                        <img class="w-64 h-32 object-cover"
+                                                                                            src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-2.jpg" />
+                                                                                    </div>
+                                                                                    <div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
+                                                                                        <img class="w-64 h-32 object-cover"
+                                                                                            src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-1.jpg" />
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0">
+                                                                                    <div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
+                                                                                    <div class="text-sm mt-4 md:text-lg">
+                                                                                        In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei
+                                                                                        Ihnen melden.
+                                                                                    </div>
+                                                                                    <div class="flex justify-between mt-3 items-end">
+                                                                                        <span class="text-sm font-semibold text-neutral-700">Viele Grüße<br />Deine
+                                                                                            Immobilienbewertung</span>
+                                                                                        <div class="flex-none ml-3">
+                                                                                            <img
+                                                                                                src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/logo-slider.png" />
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </slide>
+                                                            -->
         </carousel>
     </form>
 </template>
 
 <script>
+import { nextTick } from 'vue';
 import Heading from './components/Heading.vue';
 import VSlider from './components/VSlider.vue';
 import 'nouislider/distribute/nouislider.min.css';
@@ -334,9 +336,11 @@ export default {
         }
     },
     methods: {
-        setCategoryId(id) {
-            this.value.category = id;
-            this.innerStep++;
+        onUpdateCategory(categoryId) {
+            this.value.category = categoryId;
+            nextTick(() => {
+                this.$refs.carousel.updateSlideWidth();
+            });
         },
         back() {
             this.innerStep--;