From e6d460ba5cc066562c38acc7bd0c8bf9e22e22aa Mon Sep 17 00:00:00 2001
From: Philipp Lang <privat@zoomyboy.de>
Date: Tue, 19 Dec 2023 11:31:31 +0100
Subject: [PATCH] mod overwrites

---
 assets/js/Stepper.vue              | 146 ++++++++++++++---------------
 assets/js/components/RadioGrid.vue |   2 +-
 assets/js/components/VBtn.vue      |   2 +-
 assets/js/components/VCheckbox.vue |   2 +-
 assets/js/components/VText.vue     |  16 +++-
 tailwind.config.js                 |  12 +--
 templates/overwrite.htm            |  15 +--
 7 files changed, 93 insertions(+), 102 deletions(-)

diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue
index 260d26f..968b7dc 100644
--- a/assets/js/Stepper.vue
+++ b/assets/js/Stepper.vue
@@ -68,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">
@@ -99,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,75 +125,73 @@
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></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 !== 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" class="text-primary" 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>
diff --git a/assets/js/components/RadioGrid.vue b/assets/js/components/RadioGrid.vue
index e460b54..d9ee5b3 100644
--- a/assets/js/components/RadioGrid.vue
+++ b/assets/js/components/RadioGrid.vue
@@ -11,7 +11,7 @@
                 @click="$emit('update:modelValue', item.key)"
             />
             <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-primarycustom peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200 items-end"
+                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 items-end"
             >
                 <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 text-sm" v-text="item.label"></span>
diff --git a/assets/js/components/VBtn.vue b/assets/js/components/VBtn.vue
index f6aec2a..8b4d6a5 100644
--- a/assets/js/components/VBtn.vue
+++ b/assets/js/components/VBtn.vue
@@ -1,7 +1,7 @@
 <template>
     <button
         :type="type"
-        class="bg-primarycustom px-6 py-3 leading-none rounded text-lg font-semibold text-white disabled:bg-gray-300"
+        class="bg-primary px-6 py-3 leading-none rounded text-lg font-semibold text-white disabled:bg-gray-300"
         @click.prevent="$emit('click', $event)"
     >
         <slot></slot>
diff --git a/assets/js/components/VCheckbox.vue b/assets/js/components/VCheckbox.vue
index 30cdfca..72a27a9 100644
--- a/assets/js/components/VCheckbox.vue
+++ b/assets/js/components/VCheckbox.vue
@@ -3,7 +3,7 @@
         <label :for="id" class="block relative flex items-center">
             <input :id="id" type="checkbox" :name="name" :checked="inner === true" class="peer absolute invisible" @change="inner = !inner" />
             <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
-            <span class="peer-checked:bg-primarycustom left-[6px] w-3 h-3 absolute rounded-sm block"></span>
+            <span class="peer-checked:bg-primary left-[6px] w-3 h-3 absolute rounded-sm block"></span>
             <span class="pl-8" v-html="label"></span>
         </label>
     </div>
diff --git a/assets/js/components/VText.vue b/assets/js/components/VText.vue
index 7dd4eb5..07930f7 100644
--- a/assets/js/components/VText.vue
+++ b/assets/js/components/VText.vue
@@ -1,6 +1,12 @@
 <template>
     <label class="w-full border border-solid focus-within:border-primary rounded-lg relative flex">
-        <input :name="name" :id="id" placeholder=" " v-model="inner" class="bg-white rounded-lg border-0 focus:shadow-none focus:outline-none text-gray-600 text-left placeholder-white peer py-3 px-3 w-full h-auto" />
+        <input
+            :id="id"
+            v-model="inner"
+            :name="name"
+            placeholder=" "
+            class="bg-white rounded-lg border-0 focus:shadow-none focus:outline-none text-gray-600 text-left placeholder-white peer py-3 px-3 w-full h-auto"
+        />
         <span
             class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:bottom-auto peer-focus:text-sm"
             >{{ label }} <span class="text-red-800 ml-1">*</span></span
@@ -14,7 +20,7 @@ export default {
         value: {},
         label: {},
         id: {},
-        name: {}
+        name: {},
     },
 
     computed: {
@@ -24,8 +30,8 @@ export default {
             },
             set(v) {
                 this.$emit('input', v);
-            }
-        }
-    }
+            },
+        },
+    },
 };
 </script>
diff --git a/tailwind.config.js b/tailwind.config.js
index 080b76c..6d7293d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,16 +1,14 @@
 module.exports = {
-    content: [
-        './assets/js/**/*.vue',
-    ],
+    content: ['./assets/js/**/*.vue'],
     theme: {
         extend: {
             colors: {
                 primary: {
-                    DEFAULT: 'hsl(25.3, 71.3%, 56.3%)'
-                }
-            }
+                    DEFAULT: 'var(--iw-slider-primary-color)',
+                },
+            },
         },
     },
     plugins: [],
     important: true,
-}
+};
diff --git a/templates/overwrite.htm b/templates/overwrite.htm
index a320bc8..dd50965 100644
--- a/templates/overwrite.htm
+++ b/templates/overwrite.htm
@@ -1,16 +1,5 @@
 <style type="text/css">
-.slider-custom {
-    --slider-connect-bg: #ef4444;
-    --slider-tooltip-bg: #ef4444;
-    --slider-handle-ring-color: #ef444430;
-}
-.bg-primarycustom {
-    background-color: #ff0000 !important;
-}
-.peer:checked ~ .peer-checked\:border-b-primarycustom {
-    border-bottom-color: #ff0000 !important;
-}
-.text-primary {
-    color: #ff0000 !important;
+:root {
+    --iw-slider-primary-color: #ff0000;
 }
 </style>