Add CSS Overwrite

assets/css/fix-carousel.css

@@ -0,0 +1,3 @@
+li.carousel__slide {
+    display: block;
+}

assets/js/Stepper.vue

@@ -2,63 +2,45 @@
     <form action="#" method="POST" class="px-3 transition-all duration-300 mx-auto w-[960px]" @submit.prevent="submit">
         <carousel v-model="innerStep" :per-page="1" :mouse-drag="false" :pagination-enabled="false" class="">
             <slide :key="0" class="py-16 px-8">
-                <div>
                 <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" class="mt-8" :options="categories"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
                 </pagination>
-                </div>
             </slide>
 
             <!-- ********************************* Haus ********************************** -->
             <slide v-if="value.category == 'Haus'" :key="1" class="py-16 px-8">
-                <div>
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
-                    <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?
-                    </heading>
-                    <radio-grid id="house_plot_area" v-model="value.plot_area" class="mt-8"
-                        :options="plotAreas"></radio-grid>
+                <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
+                <radio-grid id="house_plot_area" v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
-                </div>
             </slide>
             <slide v-if="value.category == 'Haus'" :key="2" class="py-16 px-8">
-                <div>
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
                 <radio-grid id="house_living_area" v-model="value.living_area" class="mt-8"
                     :options="livingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
-                </div>
             </slide>
             <slide v-if="value.category == 'Haus'" :key="3" class="py-16 px-8">
-                <div>
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
                 <radio-grid id="house_number_of_rooms" v-model="value.number_of_floors" class="mt-8"
                     :options="numbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
-                </div>
             </slide>
             <slide v-if="value.category == 'Haus'" :key="4" class="py-16 px-8">
-                <div>
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
-                    <!--
-    <veeno :pipsy="pipsy" :tooltips="tooltips" :step="1" :handles="[1950]" class="w-4/5 mx-auto mt-10"
-    :range="range" v-model="value.construction_year" />
-    -->
+                <slider :min="1900" :max="maxYear" v-model="value.construction_year" class="slider-custom"> </slider>
                 <pagination v-model="innerStep" class="mt-24"></pagination>
-                </div>
             </slide>
             <slide v-if="value.category == 'Haus'" :key="5" class="py-16 px-8">
-                <div>
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
-                    <radio-grid id="house_condition" v-model="value.condition" class="mt-8"
-                        :options="conditions"></radio-grid>
+                <radio-grid id="house_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
-                </div>
             </slide>
 
             <!-- ********************************* Gewerbe ********************************** -->
@@ -174,7 +156,7 @@
 
             <slide v-if="value.category" :key="slideCount[value.category] + 1">
                 <div
-                    class="w-full h-full bg-white shadow-2xl 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">
+                    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">
@@ -221,7 +203,7 @@
 
 <script>
 import Heading from './components/Heading.vue';
-import veeno from 'veeno';
+import Slider from '@vueform/slider';
 import wNumb from 'wnumb';
 import 'nouislider/distribute/nouislider.min.css';
 import axios from 'axios';
@@ -230,7 +212,7 @@ import dayjs from 'dayjs';
 export default {
     components: {
         Heading,
-        veeno,
+        Slider,
     },
     data: function () {
         return {
@@ -241,20 +223,8 @@ export default {
                 'Grundstück': 3,
             },
             finished: true,
-            tooltips: [wNumb({ decimals: 0 })],
-            pipsy: {
-                mode: 'steps',
-                density: 1,
-                filter: function (value) {
-                    return value % 50 === 0 ? 1 : 0;
-                },
-                format: wNumb({
-                    decimals: 0,
-                }),
-            },
-            range: { min: [1800, 1], max: [dayjs().year(), 1] },
             value: {
-                category: null,
+                category: 'Haus',
                 living_area: null,
                 plot_area: null,
                 construction_year: null,
@@ -270,7 +240,7 @@ export default {
                 source: 'Deine Immobilienbewertung',
                 datenschutz: false,
             },
-            innerStep: 0,
+            innerStep: 4,
             categories: [
                 { key: 'Haus', label: 'Haus', icon: 'category-house' },
                 { key: 'Grundstück', label: 'Grundstück', icon: 'category-plot' },
@@ -363,6 +333,11 @@ export default {
             furnishings: [{ label: 'einfach' }, { label: 'gepflegt' }, { label: 'sehr gut' }, { label: 'luxuriös' }],
         };
     },
+    computed: {
+        maxYear() {
+            return dayjs().add(1, 'year').get('year');
+        }
+    },
     methods: {
         setCategoryId(id) {
             this.value.category = id;
@@ -381,8 +356,3 @@ export default {
 };
 </script>
 
-<style scoped>
-.radio-grid {
-    display: grid;
-    grid-gap: 1rem;
-}</style>

assets/js/app.js

@@ -10,8 +10,11 @@ import VBtn from './components/VBtn.vue';
 import VText from './components/VText.vue';
 import VCheckbox from './components/VCheckbox.vue';
 import svg from './svg.mixin.js';
+import VSlider from './components/VSlider.vue';
 
 import 'vue3-carousel/dist/carousel.css';
+import '../css/fix-carousel.css';
+import '../css/slider-default.css';
 
 var app = createApp()
     .mixin(svg)
@@ -23,6 +26,7 @@ var app = createApp()
     .component('v-btn', VBtn)
     .component('pagination', Pagination)
     .component('v-checkbox', VCheckbox)
+    .component('v-slider', VSlider)
     .component('v-text', VText);
 
 app.provide('axios', app.config.globalProperties.axios);

assets/js/components/VSlider.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <slider :value="modelValue" @input="$emit('update:modelValue', $event)"> </slider>
+    </div>
+</template>
+
+<script setup>
+import Slider from '@vueform/slider';
+
+defineEmits(['update:modelValue']);
+const props = defineProps({
+    modelValue: {},
+});
+</script>

package-lock.json

@@ -9,6 +9,7 @@
             "version": "1.0.0",
             "license": "ISC",
             "devDependencies": {
+                "@vueform/slider": "^2.1.10",
                 "axios": "^0.21.4",
                 "dayjs": "^1.11.10",
                 "eslint": "^8.55.0",
@@ -2629,6 +2630,12 @@
             "integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw==",
             "dev": true
         },
+        "node_modules/@vueform/slider": {
+            "version": "2.1.10",
+            "resolved": "https://registry.npmjs.org/@vueform/slider/-/slider-2.1.10.tgz",
+            "integrity": "sha512-L2G3Ju51Yq6yWF2wzYYsicUUaH56kL1QKGVtimUVHT1K1ADcRT94xVyIeJpS0klliVEeF6iMZFbdXtHq8AsDHw==",
+            "dev": true
+        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.11.6",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",

package.json

@@ -16,6 +16,7 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
+        "@vueform/slider": "^2.1.10",
         "axios": "^0.21.4",
         "dayjs": "^1.11.10",
         "eslint": "^8.55.0",
@@ -27,7 +28,6 @@
         "postcss-nested": "^4.2.3",
         "prettier": "^3.1.1",
         "tailwindcss": "^3.3.6",
-        "veeno": "^0.0.4",
         "vue": "^3.3",
         "vue-axios": "^3.5.2",
         "vue-loader": "^16.8.3",

src/Stepper.php

@@ -22,12 +22,25 @@ class Stepper
         add_action('wp_enqueue_scripts', [$this, 'enqueue']);
         add_action('wp_ajax_nopriv_stepper_submit', [$this, 'onSubmit']);
         add_action('wp_ajax_stepper_submit', [$this, 'onSubmit']);
+        add_action('wp_footer', [$this, 'enqueueOverwrite']);
 
         if (!is_admin()) {
             add_shortcode('stepper', [$this, 'handle']);
         }
     }
 
+    public function enqueueOverwrite(): void
+    {
+        if (is_admin()) {
+            return;
+        }
+
+        ob_start();
+        require(__DIR__ . '/../templates/overwrite.htm');
+
+        echo ob_get_clean();
+    }
+
     public function enqueue()
     {
         wp_enqueue_script('stepper-js', $this->scriptUrl . 'app.js', [], false, true);

templates/overwrite.htm

@@ -0,0 +1,13 @@
+<style type="text/css">
+.slider-custom {
+    --slider-connect-bg: #ef4444;
+    --slider-tooltip-bg: #ef4444;
+    --slider-handle-ring-color: #ef444430;
+}
+.bg-primary {
+    background-color: #ff0000 !important;
+}
+.text-primary {
+    color: #ff0000 !important;
+}
+</style>