public
/
di-stepper
6
0
Fork 0
Code Issues Pull Requests Projects Releases 6 Wiki Activity
Browse Source

update vue3

dev
Philipp Lang 2 years ago
parent
6ad1026d14
commit
cc22c7143e
8 changed files with 10890 additions and 10341 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 259
      assets/js/Stepper.vue
  2. 41
      assets/js/app.js
  3. 60
      assets/js/components/Pagination.vue
  4. 25
      assets/js/components/RadioGrid.vue
  5. 10
      assets/js/components/VBtn.vue
  6. 20764
      package-lock.json
  7. 70
      package.json
  8. 2
      webpack.mix.js

259
assets/js/Stepper.vue
View File

@ -1,39 +1,50 @@
<template> <template>
<form action="#" method="POST" @submit.prevent="submit" class="px-3 transition-all duration-300 mx-auto w-[960px]">
<carousel :per-page="1" :mouse-drag="false" :navigate-to="innerStep" :pagination-enabled="false" class="flex gap-8 shadow-xl my-10 border-2 border-primary rounded-xl overflow-auto max-w-[1260px] mx-auto">
<slide class="py-16 px-8">
<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>
<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="flex gap-8 shadow-xl my-10 border-2 border-primary rounded-xl overflow-auto max-w-[1260px] mx-auto"
>
<slide :key="0" class="py-16 px-8">
<div class="w-full">
<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> </slide>
<!-- ********************************* Haus ********************************** --> <!-- ********************************* Haus ********************************** -->
<slide class="py-16 px-8" v-if="value.category == 'Haus'">
<slide v-if="value.category == 'Haus'" :key="1" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</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> <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> <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> <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Haus'">
<slide v-if="value.category == 'Haus'" :key="2" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</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> <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> <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> <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Haus'">
<slide v-if="value.category == 'Haus'" :key="3" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</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> <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> <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> <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Haus'">
<slide v-if="value.category == 'Haus'" :key="4" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</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> <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" />
<!--
<veeno :pipsy="pipsy" :tooltips="tooltips" :step="1" :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> <pagination v-model="innerStep" class="mt-24"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Haus'">
<slide v-if="value.category == 'Haus'" :key="5" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 6</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> <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>
@ -41,31 +52,34 @@
</slide> </slide>
<!-- ********************************* Gewerbe ********************************** --> <!-- ********************************* Gewerbe ********************************** -->
<slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
<slide v-if="value.category == 'Gewerbe'" :key="1" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</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">Gewerbefläche</span> des Gewerbes?</heading> <heading>Wie ist die gesamte<br /><span class="text-primary">Gewerbefläche</span> des Gewerbes?</heading>
<radio-grid id="gewerbe_living_area" v-model="value.living_area" class="mt-8" :options="gewerbeLivingAreas"></radio-grid> <radio-grid id="gewerbe_living_area" v-model="value.living_area" class="mt-8" :options="gewerbeLivingAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
<slide v-if="value.category == 'Gewerbe'" :key="2" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</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">Grundstücksfläche</span> des Gewerbes?</heading>
<heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes? </heading>
<radio-grid id="gewerbe_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid> <radio-grid id="gewerbe_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
<slide v-if="value.category == 'Gewerbe'" :key="3" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</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 Gewerbe?</heading> <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Gewerbe?</heading>
<radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid> <radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
<slide v-if="value.category == 'Gewerbe'" :key="4" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div> <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> <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 mt-10" :range="range" v-model="value.construction_year" />
<!--
<veeno :pipsy="pipsy" :tooltips="tooltips" :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> <pagination v-model="innerStep" class="mt-24"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
<slide v-if="value.category == 'Gewerbe'" :key="5" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 6</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 Gewerbes?</heading> <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Gewerbes?</heading>
<radio-grid id="gewerbe_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid> <radio-grid id="gewerbe_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
@ -73,25 +87,28 @@
</slide> </slide>
<!-- ******************************** Wohnung ******************************** --> <!-- ******************************** Wohnung ******************************** -->
<slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</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">Wohnfläche</span> der Wohnung?</heading> <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
<radio-grid id="apartment_living_area" v-model="value.living_area" class="mt-8" :options="apartmentLivingAreas"></radio-grid> <radio-grid id="apartment_living_area" v-model="value.living_area" class="mt-8" :options="apartmentLivingAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div> <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
<heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading> <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
<radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid> <radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div> <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> <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 mt-10" :range="range" v-model="value.construction_year" />
<!--
<veeno :pipsy="pipsy" :tooltips="tooltips" :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> <pagination v-model="innerStep" class="mt-24"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div> <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading> <heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading>
<radio-grid id="apartment_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid> <radio-grid id="apartment_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
@ -99,89 +116,93 @@
</slide> </slide>
<!-- ******************************** Grundstueck ******************************** --> <!-- ******************************** Grundstueck ******************************** -->
<slide class="py-16 px-8" v-if="value.category == 'Grundstück'">
<slide v-if="value.category == 'Grundstück'" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div> <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
<heading>Wie ist die <span class="text-primary">Fläche</span><br />des Grundstücks?</heading> <heading>Wie ist die <span class="text-primary">Fläche</span><br />des Grundstücks?</heading>
<radio-grid id="plot_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid> <radio-grid id="plot_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</slide> </slide>
<slide class="py-16 px-8" v-if="value.category == 'Grundstück'">
<slide v-if="value.category == 'Grundstück'" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div> <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading> <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
<radio-grid id="plot_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid> <radio-grid id="plot_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</slide> </slide>
<slide class="py-16 px-8">
<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 class="py-16 px-8">
<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>
<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">
<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>
<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">
<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> </carousel>
</form> </form>
</template> </template>
<script> <script>
import {Carousel, Slide} from 'vue-carousel';
import Heading from './components/Heading.vue'; import Heading from './components/Heading.vue';
import veeno from 'veeno'; import veeno from 'veeno';
import wNumb from 'wnumb'; import wNumb from 'wnumb';
@ -190,19 +211,23 @@ import axios from 'axios';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
export default { export default {
data: function() {
components: {
Heading,
veeno,
},
data: function () {
return { return {
finished: true, finished: true,
tooltips: [wNumb({decimals: 0})], tooltips: [wNumb({decimals: 0})],
pipsy: { pipsy: {
mode: 'steps', mode: 'steps',
density: 1, density: 1,
filter: function(value) {
filter: function (value) {
return value % 50 === 0 ? 1 : 0; return value % 50 === 0 ? 1 : 0;
}, },
format: wNumb({ format: wNumb({
decimals: 0
})
decimals: 0,
}),
}, },
range: {min: [1800, 1], max: [dayjs().year(), 1]}, range: {min: [1800, 1], max: [dayjs().year(), 1]},
value: { value: {
@ -220,99 +245,99 @@ export default {
phone: '', phone: '',
email: '', email: '',
source: 'Deine Immobilienbewertung', source: 'Deine Immobilienbewertung',
datenschutz: false
datenschutz: false,
}, },
innerStep: 0, innerStep: 0,
categories: [ categories: [
{key: 'Haus', label: 'Haus', icon: 'category-house'}, {key: 'Haus', label: 'Haus', icon: 'category-house'},
{key: 'Grundstück', label: 'Grundstück', icon: 'category-plot'}, {key: 'Grundstück', label: 'Grundstück', icon: 'category-plot'},
{key: 'Wohnung', label: 'Wohnung', icon: 'category-apartment'}, {key: 'Wohnung', label: 'Wohnung', icon: 'category-apartment'},
{key: 'Gewerbe', label: 'Gewerbe', icon: 'category-business'}
{key: 'Gewerbe', label: 'Gewerbe', icon: 'category-business'},
], ],
kinds: { kinds: {
house: [ house: [
{ {
kind: 'singleFamily', kind: 'singleFamily',
label: 'Einfamilienhaus', label: 'Einfamilienhaus',
icon: 'kind-house-einfamilie'
icon: 'kind-house-einfamilie',
}, },
{ {
kind: 'multiFamily', kind: 'multiFamily',
label: 'Mehrfamilienhaus', label: 'Mehrfamilienhaus',
icon: 'kind-house-mehrfamilie'
icon: 'kind-house-mehrfamilie',
}, },
{ {
kind: 'rowHouse', kind: 'rowHouse',
label: 'Reihenhaus', label: 'Reihenhaus',
icon: 'kind-house-reihenhaus'
icon: 'kind-house-reihenhaus',
}, },
{ {
kind: 'semiDetached', kind: 'semiDetached',
label: 'Doppelhaushälfte', label: 'Doppelhaushälfte',
icon: 'kind-house-doppelhaus'
}
]
icon: 'kind-house-doppelhaus',
},
],
}, },
livingAreas: [ livingAreas: [
{key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm'}, {key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm'},
{key: '101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md'}, {key: '101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md'},
{key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg'}, {key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'}
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
], ],
apartmentLivingAreas: [ apartmentLivingAreas: [
{key: 'bis 65 m²', label: 'bis 65 m²', icon: 'living-area-sm'}, {key: 'bis 65 m²', label: 'bis 65 m²', icon: 'living-area-sm'},
{key: '66 - 150 m²', label: 'bis 66 - 150 m²', icon: 'living-area-md'}, {key: '66 - 150 m²', label: 'bis 66 - 150 m²', icon: 'living-area-md'},
{key: 'mehr als 150 m²', label: 'mehr als 150 m²', icon: 'living-area-lg'}, {key: 'mehr als 150 m²', label: 'mehr als 150 m²', icon: 'living-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'}
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
], ],
gewerbeLivingAreas: [ gewerbeLivingAreas: [
{key: 'bis 150 m²', label: 'bis 150 m²', icon: 'living-area-sm'}, {key: 'bis 150 m²', label: 'bis 150 m²', icon: 'living-area-sm'},
{key: '151 - 350 m²', label: 'bis 151 - 350 m²', icon: 'living-area-md'}, {key: '151 - 350 m²', label: 'bis 151 - 350 m²', icon: 'living-area-md'},
{key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'living-area-lg'}, {key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'living-area-lg'},
{key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'living-area-lg'}, {key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'living-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'}
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
], ],
conditions: [ conditions: [
{key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md'}, {key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md'},
{key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm'}, {key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm'},
{key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg'}, {key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg'},
{key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg'}, {key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg'},
{key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg'}
{key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg'},
], ],
plotAreas: [ plotAreas: [
{key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm'}, {key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm'},
{key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md'}, {key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md'},
{key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg'}, {key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'}
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
], ],
plotPlotAreas: [ plotPlotAreas: [
{key: 'bis 350 m²', label: 'bis 350 m²', icon: 'plot-area-sm'}, {key: 'bis 350 m²', label: 'bis 350 m²', icon: 'plot-area-sm'},
{key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'plot-area-md'}, {key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'plot-area-md'},
{key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'plot-area-lg'}, {key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'plot-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'}
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
], ],
numbersOfFloors: [ numbersOfFloors: [
{key: '1', label: '1', icon: 'plot-area-sm'}, {key: '1', label: '1', icon: 'plot-area-sm'},
{key: '2', label: '2', icon: 'plot-area-md'}, {key: '2', label: '2', icon: 'plot-area-md'},
{key: '3', label: '3', icon: 'plot-area-lg'}, {key: '3', label: '3', icon: 'plot-area-lg'},
{key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg'}
{key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg'},
], ],
numbersOfRooms: [ numbersOfRooms: [
{key: '1-2', label: '1-2', icon: 'plot-area-sm'}, {key: '1-2', label: '1-2', icon: 'plot-area-sm'},
{key: '3-5', label: '3-5', icon: 'plot-area-md'}, {key: '3-5', label: '3-5', icon: 'plot-area-md'},
{key: '5-8', label: '5-8', icon: 'plot-area-lg'}, {key: '5-8', label: '5-8', icon: 'plot-area-lg'},
{key: 'mehr als 8', label: 'mehr als 8', icon: 'plot-area-lg'}
{key: 'mehr als 8', label: 'mehr als 8', icon: 'plot-area-lg'},
], ],
apartmentNumbersOfRooms: [ apartmentNumbersOfRooms: [
{key: '1-2', label: '1-2', icon: 'plot-area-sm'}, {key: '1-2', label: '1-2', icon: 'plot-area-sm'},
{key: '3-5', label: '3-5', icon: 'plot-area-md'}, {key: '3-5', label: '3-5', icon: 'plot-area-md'},
{key: '6-8', label: '6-8', icon: 'plot-area-lg'}, {key: '6-8', label: '6-8', icon: 'plot-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'}
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
], ],
wohnflaechen: [{label: 'bis 50 m²'}, {label: '51 - 150 m²'}, {label: 'mehr als 151 m²'}, {label: 'nicht bekannt'}], 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'}], etagen: [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4 oder mehr'}],
sellables: [{label: '3 Monate'}, {label: '6 Monate'}, {label: '12 Monate oder später'}], sellables: [{label: '3 Monate'}, {label: '6 Monate'}, {label: '12 Monate oder später'}],
furnishings: [{label: 'einfach'}, {label: 'gepflegt'}, {label: 'sehr gut'}, {label: 'luxuriös'}]
furnishings: [{label: 'einfach'}, {label: 'gepflegt'}, {label: 'sehr gut'}, {label: 'luxuriös'}],
}; };
}, },
methods: { methods: {
@ -328,14 +353,8 @@ export default {
this.innerStep++; this.innerStep++;
this.finished = true; this.finished = true;
}
},
}, },
components: {
Carousel,
Slide,
Heading,
veeno
}
}; };
</script> </script>

41
assets/js/app.js
View File

@ -1,6 +1,8 @@
import axios from 'axios'; import axios from 'axios';
import VueAxios from 'vue-axios';
import {Carousel, Slide} from 'vue3-carousel';
import {createApp} from 'vue';
import wNumb from 'wnumb'; import wNumb from 'wnumb';
import Vue from 'vue';
import Stepper from './Stepper.vue'; import Stepper from './Stepper.vue';
import RadioGrid from './components/RadioGrid.vue'; import RadioGrid from './components/RadioGrid.vue';
import Pagination from './components/Pagination.vue'; import Pagination from './components/Pagination.vue';
@ -9,36 +11,43 @@ import VText from './components/VText.vue';
import VCheckbox from './components/VCheckbox.vue'; import VCheckbox from './components/VCheckbox.vue';
import svg from './svg.mixin.js'; import svg from './svg.mixin.js';
Vue.mixin(svg);
Vue.component('radio-grid', RadioGrid);
Vue.component('stepper', Stepper);
Vue.component('v-btn', VBtn);
Vue.component('pagination', Pagination);
Vue.component('v-checkbox', VCheckbox);
Vue.component('v-text', VText);
const app = new Vue();
app.$mount(document.getElementById('stepper-main'));
import 'vue3-carousel/dist/carousel.css';
var units = window.units = {
var app = createApp()
.mixin(svg)
.use(VueAxios, axios)
.component('radio-grid', RadioGrid)
.component('carousel', Carousel)
.component('slide', Slide)
.component('stepper', Stepper)
.component('v-btn', VBtn)
.component('pagination', Pagination)
.component('v-checkbox', VCheckbox)
.component('v-text', VText);
app.provide('axios', app.config.globalProperties.axios);
app.mount(document.getElementById('stepper-main'));
var units = (window.units = {
currency: wNumb({ currency: wNumb({
mark: ',', mark: ',',
thousand: '.', thousand: '.',
prefix: '', prefix: '',
suffix: '', suffix: '',
decimals: 0
decimals: 0,
}), }),
decimalCurrency: wNumb({ decimalCurrency: wNumb({
mark: ',', mark: ',',
thousand: '.', thousand: '.',
prefix: '', prefix: '',
suffix: '', suffix: '',
decimals: 2
decimals: 2,
}), }),
percent: wNumb({ percent: wNumb({
mark: ',', mark: ',',
thousand: '', thousand: '',
prefix: '', prefix: '',
suffix: '', suffix: '',
decimals: 2
})
};
decimals: 2,
}),
});

60
assets/js/components/Pagination.vue
View File

@ -1,41 +1,39 @@
<template> <template>
<div class="flex w-4/5 mx-auto justify-between"> <div class="flex w-4/5 mx-auto justify-between">
<div> <div>
<v-btn href="#" v-show="prev" @click.prevent="$emit('input', value - 1)" :disabled="!prevable">Zurück</v-btn>
<v-btn v-show="prev" href="#" :disabled="!prevable" @click.prevent="$emit('update:modelValue', value - 1)">Zurück</v-btn>
</div> </div>
<div> <div>
<v-btn href="#" v-show="next && !submit" @click.prevent="$emit('input', value + 1)" :disabled="!nextable">Weiter</v-btn>
<v-btn href="#" class="mt-4" type="submit" :disabled="!nextable" v-show="next && submit">Absenden</v-btn>
<v-btn v-show="next && !submit" href="#" :disabled="!nextable" @click.prevent="$emit('update:modelValue', value + 1)">Weiter</v-btn>
<v-btn v-show="next && submit" href="#" class="mt-4" type="submit" :disabled="!nextable">Absenden</v-btn>
</div> </div>
</div> </div>
</template> </template>
<script>
export default {
props: {
submit: {
type: Boolean,
default: false
},
next: {
type: Boolean,
default: true
},
prev: {
type: Boolean,
default: true
},
value: {
default: null
},
prevable: {
type: Boolean,
default: true
},
nextable: {
type: Boolean,
default: true
}
}
};
<script setup>
defineProps({
submit: {
type: Boolean,
default: () => false,
},
next: {
type: Boolean,
default: () => true,
},
prev: {
type: Boolean,
default: () => true,
},
value: {
default: () => null,
},
prevable: {
type: Boolean,
default: () => true,
},
nextable: {
type: Boolean,
default: () => true,
},
});
</script> </script>

25
assets/js/components/RadioGrid.vue
View File

@ -1,11 +1,12 @@
<template> <template>
<div class="flex space-x-4 flex-wrap justify-center"> <div class="flex space-x-4 flex-wrap justify-center">
<label :key="index" v-for="(item, index) in options" class="w-40" :for="`${id}-${index}`">
<input class="invisible absolute left-0 top-0 peer" :id="`${id}-${index}`" :checked="value === item.key" @click="$emit('input', item.key)" :value="item.key" type="radio" :name="id" />
<label v-for="(item, index) in options" :key="index" class="w-40" :for="`${id}-${index}`">
<input :id="`${id}-${index}`" class="invisible absolute left-0 top-0 peer" :checked="value === item.key"
:value="item.key" type="radio" :name="id" @click="$emit('update:modelValue', item.key)" />
<span <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 items-end"
>
<img :src="`/wp-content/plugins/stepper/resources/img/icons/${item.icon}.svg`" class="w-16 h-16 flex-none" />
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> <span class="mt-4 font-semibold text-gray-700 text-sm" v-text="item.label"></span>
</span> </span>
</label> </label>
@ -16,19 +17,17 @@
export default { export default {
props: { props: {
id: { id: {
required: true
required: true,
}, },
value: { value: {
default: function() {
return null;
}
default: () => null,
}, },
options: { options: {
type: Array, type: Array,
default: function() {
default: function () {
return []; return [];
}
}
}
},
},
},
}; };
</script> </script>

10
assets/js/components/VBtn.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<button v-on="$listeners" :type="type" class="bg-primary px-6 py-3 leading-none rounded text-lg font-semibold text-white disabled:bg-gray-300"><slot></slot></button>
<button :type="type" class="bg-primary px-6 py-3 leading-none rounded text-lg font-semibold text-white disabled:bg-gray-300">
<slot></slot>
</button>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
type: { type: {
default: 'button'
}
}
default: 'button',
},
},
}; };
</script> </script>

20764
package-lock.json
View File

File diff suppressed because it is too large

70
package.json
View File

@ -1,37 +1,37 @@
{ {
"name": "stepper",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npm run development",
"development": "npx mix build",
"watch": "npx mix watch",
"hot": "npx mix watch --hot",
"prod": "npm run production",
"production": "npx mix build --production",
"img": "rm -R assets/public/img; cd resources/img/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../sprite.svg && rm -R sprite && cd ../../../ && cp -R resources/img assets/public/img"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.4",
"dayjs": "^1.11.2",
"laravel-mix": "^6.0.7",
"postcss-import": "^14.0.2",
"postcss-nested": "^4.0",
"tailwindcss": "^3.2",
"vue": "^2.6.14",
"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",
"wnumb": "^1.2.0"
}
"name": "stepper",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npm run development",
"development": "npx mix build",
"watch": "npx mix watch",
"hot": "npx mix watch --hot",
"prod": "npm run production",
"production": "npx mix build --production",
"img": "rm -R assets/public/img; cd resources/img/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../sprite.svg && rm -R sprite && cd ../../../ && cp -R resources/img assets/public/img"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.21.4",
"dayjs": "^1.11.10",
"eslint": "^8.55.0",
"eslint-config-prettier": "^8.10.0",
"eslint-plugin-vue": "^8.7.1",
"laravel-mix": "^6.0.49",
"postcss-css-variables": "^0.17.0",
"postcss-import": "^14.1.0",
"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",
"vue3-carousel": "^0.3.1",
"wnumb": "^1.2.0"
}
} }

2
webpack.mix.js
View File

@ -16,5 +16,5 @@ mix.postCss('assets/css/app.css', 'app.css', [
atImport(), atImport(),
nested, nested,
tailwindcss('./tailwind.config.js'), tailwindcss('./tailwind.config.js'),
]).js('assets/js/app.js', 'app.js').vue({ version: 2 });
]).js('assets/js/app.js', 'app.js').vue();

Write Preview
Loading…
Cancel
Save