From a10704efb739d1b5c35a57be2efd6c16f2dcfa01 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 25 May 2022 01:58:53 +0200
Subject: [PATCH] add checkbox

---
 assets/js/Stepper.vue              | 10 ++++++++-
 assets/js/app.js                   |  2 ++
 assets/js/components/VCheckbox.vue | 36 ++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/components/VCheckbox.vue

diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue
index 7794dfd..0bc920e 100644
--- a/assets/js/Stepper.vue
+++ b/assets/js/Stepper.vue
@@ -128,6 +128,13 @@
                     <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"
@@ -217,7 +224,8 @@ export default {
                 firstname: '',
                 lastname: '',
                 phone: '',
-                email: ''
+                email: '',
+                datenschutz: false
             },
             innerStep: 0,
             categories: [
diff --git a/assets/js/app.js b/assets/js/app.js
index bc4bfd8..162ee5f 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -6,6 +6,7 @@ import RadioGrid from './components/RadioGrid.vue';
 import Pagination from './components/Pagination.vue';
 import VBtn from './components/VBtn.vue';
 import VText from './components/VText.vue';
+import VCheckbox from './components/VCheckbox.vue';
 import svg from './svg.mixin.js';
 
 Vue.mixin(svg);
@@ -13,6 +14,7 @@ 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'));
diff --git a/assets/js/components/VCheckbox.vue b/assets/js/components/VCheckbox.vue
new file mode 100644
index 0000000..c9de12e
--- /dev/null
+++ b/assets/js/components/VCheckbox.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="flex items-center space-x-6">
+        <label :for="id" class="block relative flex items-center">
+            <input type="checkbox" :name="name" :checked="inner === true" @change="inner = !inner" class="peer absolute invisible" :id="id" />
+            <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-primary left-[6px] w-3 h-3 absolute rounded-sm block"></span>
+            <span class="pl-8" v-html="label"></span>
+        </label>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name: {
+            required: true
+        },
+        id: {
+            required: true
+        },
+        value: {},
+        label: {}
+    },
+
+    computed: {
+        inner: {
+            get() {
+                return this.value;
+            },
+            set(v) {
+                this.$emit('input', v === true);
+            }
+        }
+    }
+};
+</script>