From bd441abce75860b8d6be491fe8639323ce3414a0 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Tue, 3 May 2022 00:28:16 +0200
Subject: [PATCH] Upate slider

---
 .prettierrc                         |   7 +
 assets/js/Stepper.vue               | 340 ++++++++++++++--------------
 assets/js/components/Heading.vue    |   7 +
 assets/js/components/Pagination.vue |  14 +-
 assets/js/components/RadioGrid.vue  |  18 +-
 package-lock.json                   | 118 +++++++++-
 package.json                        |   8 +-
 7 files changed, 330 insertions(+), 182 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 assets/js/components/Heading.vue

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..2da1e94
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "printWidth": 240,
+  "singleQuote": true,
+  "tabWidth": 4,
+  "quoteProps": "consistent",
+  "bracketSpacing": false
+}
diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue
index c93c929..633f034 100644
--- a/assets/js/Stepper.vue
+++ b/assets/js/Stepper.vue
@@ -1,117 +1,84 @@
 <template>
-    <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>
+    <carousel :per-page="1" :navigate-to="innerStep" class="flex gap-8 overflow-auto max-w-[1260px] py-16 px-8 mx-auto">
+        <slide>
+            <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 v-model="value.category_id" @input="innerStep++" class="mt-8" :options="categories"></radio-grid>
+        </slide>
+
+        <!-- ********************************* Haus ********************************** -->
+        <slide v-if="value.category_id == 'house'">
+            <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" @input="innerStep++" class="mt-8" :options="kinds[value.category_id]"></radio-grid>
+            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
+        </slide>
+        <slide v-if="value.category_id == 'house'">
+            <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 v-model="value.living_area" @input="innerStep++" class="mt-8" :options="livingAreas"></radio-grid>
+            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
+        </slide>
+        <slide v-if="value.category_id == 'house'">
+            <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
+            <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
+            <radio-grid v-model="value.plot_area" @input="innerStep++" class="mt-8" :options="plotAreas"></radio-grid>
+            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
+        </slide>
+        <slide v-if="value.category_id == 'house'">
+            <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="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
+            <pagination v-model="innerStep" class="mt-24"></pagination>
+        </slide>
+        <slide v-if="value.category_id == 'house'">
+            <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
+            <heading>Wie viele<br /><span class="text-primary">Etagen</span> hat das Haus?</heading>
+            <radio-grid v-model="value.number_of_floors" @input="innerStep++" class="mt-8" :options="numbersOfFloors"></radio-grid>
+            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
+        </slide>
+        <slide v-if="value.category_id == 'house'">
+            <div class="text-center font-semibold text-gray-700 text-sm">Frage 7</div>
+            <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
+            <radio-grid v-model="value.number_of_rooms" @input="innerStep++" class="mt-8" :options="numbersOfRooms"></radio-grid>
+            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
+        </slide>
+        <slide v-if="value.category_id == 'house'">
+            <div class="text-center font-semibold text-gray-700 text-sm">Frage 8</div>
+            <heading>Welche <span class="text-primary">Parkmöglichkeiten</span><br />sind am Haus vorhanden?</heading>
+            <radio-grid v-model="value.parking_space_type" @input="innerStep++" class="mt-8" :options="parkingSpaceTypes"></radio-grid>
+            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
+        </slide>
+
+        <!-- ******************************** Wohnung ******************************** -->
+        <slide v-if="value.category_id == 'apartment'">
+            <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
+            <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
+            <radio-grid v-model="value.living_area" @input="innerStep++" class="mt-8" :options="livingAreas"></radio-grid>
+            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
+        </slide>
+        <slide v-if="value.category_id == 'apartment'">
+            <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
+            <heading>Wann wurde das<br />Wohnhaus <span class="text-primary">erbaut?</span></heading>
+            <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
+            <pagination v-model="innerStep" class="mt-24"></pagination>
+        </slide>
+        <slide v-if="value.category_id == 'apartment'">
+            <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 die Wohnung?</heading>
+            <radio-grid v-model="value.number_of_rooms" @input="innerStep++" class="mt-8" :options="numbersOfRooms"></radio-grid>
+            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
+        </slide>
+
+        <!-- ******************************** Grundstueck ******************************** -->
+        <slide v-if="value.category_id == 'plot'">
+            <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
+            <heading>Welche Fläche hat<br />das <span class="text-primary">Grundstück</span>?</heading>
+            <radio-grid v-model="value.plot_area" @input="innerStep++" class="mt-8" :options="plotAreas"></radio-grid>
+            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
+        </slide>
         <!--
-        <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">
-                    <label :key="index" v-for="gf, index in grundstuecksflaechen" class="option-box">
-                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.grundstuecksflaeche">
-                        <span>
-                            <span v-html="svg('home')"></span>
-                            <span v-text="gf.label"></span>
-                        </span>
-                    </label>
-                </div>
-            </div>
-        </div>
-        <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">
-                    <label :key="index" v-for="gf, index in wohnflaechen" class="option-box">
-                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.wohnflaeche">
-                        <span>
-                            <span v-html="svg('home')"></span>
-                            <span v-text="gf.label"></span>
-                        </span>
-                    </label>
-                </div>
-            </div>
-        </div>
-        <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">
-                    <label :key="index" v-for="etage, index in etagen" class="option-box">
-                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.etagen">
-                        <span>
-                            <span v-html="svg('home')"></span>
-                            <span v-text="etage.label"></span>
-                        </span>
-                    </label>
-                </div>
-            </div>
-        </div>
-        <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">
-                    <label :key="index" v-for="furnishing, index in furnishings" class="option-box">
-                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="furnishing" :value="index" v-model="value.furnishing">
-                        <span>
-                            <span v-html="svg('home')"></span>
-                            <span v-text="furnishing.label"></span>
-                        </span>
-                    </label>
-                </div>
-            </div>
-        </div>
-        <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">
-                    <input type="range" min="1" max="10" v-model="value.rooms">
-                    <input type="text" class="mt-10" v-model="value.rooms" name="rooms">
-                    <a href="#" @click.prevent="step++">Weiter</a>
-                </div>
-            </div>
-        </div>
-        <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">
-                    <input type="range" min="1880" max="2021" v-model="value.constructedAt">
-                    <input type="text" class="mt-10" v-model="value.constructedAt" name="constructed_at">
-                    <a href="#" @click.prevent="step++">Weiter</a>
-                </div>
-            </div>
-        </div>
-        <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">
-                    <label :key="index" v-for="sellable, index in sellables" class="option-box">
-                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="sellable" :value="index" v-model="value.sellable">
-                        <span>
-                            <span v-html="svg('home')"></span>
-                            <span v-text="sellable.label"></span>
-                        </span>
-                    </label>
-                </div>
-            </div>
-        </div>
-        <div class="w-full flex-none snap-always snap-center">
+        <div class="w-full flex-none ">
             <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">
@@ -130,17 +97,38 @@
             </div>
         </div>
         -->
-    </div>
+    </carousel>
 </template>
 
 <script>
+import {Carousel, Slide} from 'vue-carousel';
+import Heading from './components/Heading.vue';
+import veeno from 'veeno';
+import wNumb from 'wnumb';
+import 'nouislider/distribute/nouislider.min.css';
+
 export default {
     data: function() {
         return {
+            tooltips: [wNumb({decimals: 0})],
+            pipsy: {
+                mode: 'range',
+                density: 3,
+                filter: () => 1,
+                format: wNumb({
+                    decimals: 0
+                })
+            },
+            range: {min: 1600, max: 2020},
             value: {
-                category_id: 'house',
+                category_id: 'plot',
                 kind_id: null,
-                grundstuecksflaeche: null,
+                living_area: null,
+                plot_area: null,
+                construction_year: null,
+                number_of_floors: null,
+                parking_space_type: null,
+
                 wohnflaeche: null,
                 rooms: 1,
                 constructedAt: 1950,
@@ -154,73 +142,93 @@ export default {
                 etagen: null,
                 property_plz: '',
                 sellable: null,
-                furnishing: null,
+                furnishing: null
             },
-            innerStep: 0,
-            slideCount: 2,
+            innerStep: 2,
             categories: [
-                {key: 'house', label: 'Haus', 'icon': 'category-house'},
-                {key: 'area', label: 'Grundstück', icon: 'category-plot'},
+                {key: 'house', label: 'Haus', icon: 'category-house'},
+                {key: 'plot', label: 'Grundstück', icon: 'category-plot'},
                 {key: 'apartment', label: 'Wohnung', icon: 'category-apartment'},
-                {key: 'gewerbe', label: 'Gewerbe', icon: 'category-business'},
+                {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' },
+                    {
+                        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²' },
-                { label: 'mehr als 800 m²' },
-                { label: 'nicht bekannt' },
+            livingAreas: [
+                {key: 'sm', label: 'bis 100 m²', icon: 'living-area-sm'},
+                {key: 'md', label: 'bis 101 - 200 m²', icon: 'living-area-md'},
+                {key: 'lg', label: 'mehr als 200 m²', icon: 'living-area-lg'},
+                {key: 'unknown', label: 'nicht bekannt', icon: 'unknown'}
             ],
-            wohnflaechen: [
-                { label: 'bis 50 m²' },
-                { label: '51 - 150 m²' },
-                { label: 'mehr als 151 m²' },
-                { label: 'nicht bekannt' },
+            plotAreas: [
+                {key: 'sm', label: 'bis 200 m²', icon: 'plot-area-sm'},
+                {key: 'md', label: 'bis 201 - 800 m²', icon: 'plot-area-md'},
+                {key: 'lg', label: 'mehr als 800 m²', icon: 'plot-area-lg'},
+                {key: 'unknown', label: 'nicht bekannt', icon: 'unknown'}
             ],
-            etagen: [
-                { label: '1' },
-                { label: '2' },
-                { label: '3' },
-                { label: '4 oder mehr' },
+            numbersOfFloors: [
+                {key: 'sm', label: '1', icon: 'plot-area-sm'},
+                {key: 'md', label: '2', icon: 'plot-area-md'},
+                {key: 'lg', label: '3', icon: 'plot-area-lg'},
+                {key: 'xl', label: 'mehr als 3', icon: 'plot-area-lg'}
             ],
-            sellables: [
-                { label: '3 Monate' },
-                { label: '6 Monate' },
-                { label: '12 Monate oder später' },
+            numbersOfRooms: [
+                {key: 'sm', label: '1-2', icon: 'plot-area-sm'},
+                {key: 'md', label: '3-5', icon: 'plot-area-md'},
+                {key: 'lg', label: '5-8', icon: 'plot-area-lg'},
+                {key: 'xl', label: 'mehr als 8', icon: 'plot-area-lg'}
             ],
-            furnishings: [
-                { label: 'einfach' },
-                { label: 'gepflegt' },
-                { label: 'sehr gut' },
-                { label: 'luxuriös' },
-            ]
+            parkingSpaceTypes: [
+                {key: 'garage', label: 'Garage', icon: 'plot-area-sm'},
+                {key: 'im-freien', label: 'im Freien', icon: 'plot-area-md'},
+                {key: 'carport', label: 'Carport', icon: 'plot-area-lg'},
+                {key: 'tiefgarage', label: 'Tiefgarage', icon: 'plot-area-lg'}
+            ],
+            wohnflaechen: [{label: 'bis 50 m²'}, {label: '51 - 150 m²'}, {label: 'mehr als 151 m²'}, {label: 'nicht bekannt'}],
+            etagen: [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4 oder mehr'}],
+            sellables: [{label: '3 Monate'}, {label: '6 Monate'}, {label: '12 Monate oder später'}],
+            furnishings: [{label: 'einfach'}, {label: 'gepflegt'}, {label: 'sehr gut'}, {label: 'luxuriös'}]
         };
     },
-    computed: {
-        step: {
-            set(index) {
-                console.log(index);
-                var _self = this;
-                this.innerStep = index;
-
-                this.$nextTick(function() {
-                    _self.$refs.stepper.scrollLeft = _self.$refs.stepper.scrollWidth / _self.slideCount * index;
-                });
-            },
-            get() {
-                return this.innerStep;
-            }
+    methods: {
+        setCategoryId(id) {
+            this.value.category_id = id;
+            this.innerStep++;
+        },
+        setKindId(id) {
+            this.value.kind_id = id;
+            this.innerStep++;
         },
+        back() {
+            this.innerStep--;
+        }
     },
-    mounted() {
-        this.$refs.stepper.scrollLeft = this.$refs.stepper.scrollWidth / this.slideCount * this.innerStep;
+    components: {
+        Carousel,
+        Slide,
+        Heading,
+        veeno
     }
 };
 </script>
diff --git a/assets/js/components/Heading.vue b/assets/js/components/Heading.vue
new file mode 100644
index 0000000..f75d266
--- /dev/null
+++ b/assets/js/components/Heading.vue
@@ -0,0 +1,7 @@
+<template>
+    <h2 class="text-4xl font-bold text-gray-700 text-center mt-2"><slot></slot></h2>
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/assets/js/components/Pagination.vue b/assets/js/components/Pagination.vue
index 694a729..49ee031 100644
--- a/assets/js/components/Pagination.vue
+++ b/assets/js/components/Pagination.vue
@@ -1,13 +1,21 @@
 <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 class="flex w-4/5 mx-auto justify-between">
+        <v-btn href="#" v-show="prev" @click.prevent="$emit('input', value - 1)" :disabled="value === 0">Zurück</v-btn>
+        <v-btn href="#" v-show="next" @click.prevent="$emit('input', value + 1)">Weiter</v-btn>
     </div>
 </template>
 
 <script>
 export default {
     props: {
+        next: {
+            type: Boolean,
+            default: true
+        },
+        prev: {
+            type: Boolean,
+            default: true
+        },
         value: {
             default: null
         }
diff --git a/assets/js/components/RadioGrid.vue b/assets/js/components/RadioGrid.vue
index cd026ca..a4a0a03 100644
--- a/assets/js/components/RadioGrid.vue
+++ b/assets/js/components/RadioGrid.vue
@@ -1,9 +1,11 @@
 <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">
+        <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" @click="$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>
@@ -14,11 +16,15 @@
 export default {
     props: {
         value: {
-            default: null,
+            default: function() {
+                return null;
+            }
         },
         options: {
             type: Array,
-            default: []
+            default: function() {
+                return [];
+            }
         }
     }
 };
diff --git a/package-lock.json b/package-lock.json
index 82f54fb..81062a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,14 +15,16 @@
         "postcss-nested": "^4.0",
         "tailwindcss": "^3.0",
         "vue": "^2.6.14",
-        "wnumb": "^1.2.0"
+        "vue-carousel": "^0.18.0"
       },
       "devDependencies": {
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^7.19.1",
         "postcss-css-variables": "^0.17.0",
+        "veeno": "^0.0.4",
         "vue-loader": "^15.9.8",
-        "vue-template-compiler": "^2.6.12"
+        "vue-template-compiler": "^2.6.12",
+        "wnumb": "^1.2.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -3966,6 +3968,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "node_modules/domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -4984,6 +4991,15 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -6280,6 +6296,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "node_modules/mini-css-extract-plugin": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
@@ -6516,6 +6540,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nouislider": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-11.1.0.tgz",
+      "integrity": "sha512-nD+Fgc8A8j6hnGvR5AaV+OBuLF446z4H2fmcEJ/6U6CJr6rAnFnionMXu7dmdghZ+bhgePvL3wrDRbu+0ux7Jg==",
+      "dev": true
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -9148,6 +9178,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/veeno": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/veeno/-/veeno-0.0.4.tgz",
+      "integrity": "sha512-VcGsy8q3iD7IQ+CbZl5DiBtUvW5Cck0b/ZDJUKiAbTK3o4MJi1vIll9pf81jiuj9pSo027ydoL6K/kQUupJ5+g==",
+      "dev": true,
+      "dependencies": {
+        "nouislider": "^11.1.0"
+      }
+    },
     "node_modules/vendors": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
@@ -9167,6 +9206,21 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "node_modules/vue-carousel": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz",
+      "integrity": "sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==",
+      "dependencies": {
+        "global": "^4.3.2",
+        "regenerator-runtime": "^0.12.1",
+        "vue": "^2.5.17"
+      }
+    },
+    "node_modules/vue-carousel/node_modules/regenerator-runtime": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+      "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -9737,7 +9791,8 @@
     "node_modules/wnumb": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/wnumb/-/wnumb-1.2.0.tgz",
-      "integrity": "sha512-eYut5K/dW7usfk/Mwm6nxBNoTPp/uP7PlXld+hhg7lDtHLdHFnNclywGYM9BRC7Ohd4JhwuHg+vmOUGfd3NhVA=="
+      "integrity": "sha512-eYut5K/dW7usfk/Mwm6nxBNoTPp/uP7PlXld+hhg7lDtHLdHFnNclywGYM9BRC7Ohd4JhwuHg+vmOUGfd3NhVA==",
+      "dev": true
     },
     "node_modules/word-wrap": {
       "version": "1.2.3",
@@ -12860,6 +12915,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -13614,6 +13674,15 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -14559,6 +14628,14 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
@@ -14744,6 +14821,12 @@
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
       "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
     },
+    "nouislider": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-11.1.0.tgz",
+      "integrity": "sha512-nD+Fgc8A8j6hnGvR5AaV+OBuLF446z4H2fmcEJ/6U6CJr6rAnFnionMXu7dmdghZ+bhgePvL3wrDRbu+0ux7Jg==",
+      "dev": true
+    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -16630,6 +16713,15 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
+    "veeno": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/veeno/-/veeno-0.0.4.tgz",
+      "integrity": "sha512-VcGsy8q3iD7IQ+CbZl5DiBtUvW5Cck0b/ZDJUKiAbTK3o4MJi1vIll9pf81jiuj9pSo027ydoL6K/kQUupJ5+g==",
+      "dev": true,
+      "requires": {
+        "nouislider": "^11.1.0"
+      }
+    },
     "vendors": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
@@ -16645,6 +16737,23 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "vue-carousel": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz",
+      "integrity": "sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==",
+      "requires": {
+        "global": "^4.3.2",
+        "regenerator-runtime": "^0.12.1",
+        "vue": "^2.5.17"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -17040,7 +17149,8 @@
     "wnumb": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/wnumb/-/wnumb-1.2.0.tgz",
-      "integrity": "sha512-eYut5K/dW7usfk/Mwm6nxBNoTPp/uP7PlXld+hhg7lDtHLdHFnNclywGYM9BRC7Ohd4JhwuHg+vmOUGfd3NhVA=="
+      "integrity": "sha512-eYut5K/dW7usfk/Mwm6nxBNoTPp/uP7PlXld+hhg7lDtHLdHFnNclywGYM9BRC7Ohd4JhwuHg+vmOUGfd3NhVA==",
+      "dev": true
     },
     "word-wrap": {
       "version": "1.2.3",
diff --git a/package.json b/package.json
index 68e8c74..a358f54 100644
--- a/package.json
+++ b/package.json
@@ -16,19 +16,21 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "laravel-mix": "^6.0.7",
     "axios": "^0.21.0",
+    "laravel-mix": "^6.0.7",
     "postcss-import": "^14.0.2",
     "postcss-nested": "^4.0",
     "tailwindcss": "^3.0",
     "vue": "^2.6.14",
-    "wnumb": "^1.2.0"
+    "vue-carousel": "^0.18.0"
   },
   "devDependencies": {
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^7.19.1",
     "postcss-css-variables": "^0.17.0",
+    "veeno": "^0.0.4",
     "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.12",
+    "wnumb": "^1.2.0"
   }
 }