add checkbox

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: [

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'));

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>