toggle changed

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

components.d.ts

@@ -26,10 +26,10 @@ declare module 'vue' {
     IconToggleOn: typeof import('./src/components/icons/IconToggleOn.vue')['default']
     ImagePreview: typeof import('./src/components/ImagePreview.vue')['default']
     ImageTile: typeof import('./src/components/ImageTile.vue')['default']
-    InputCheckbox: typeof import('./src/components/InputCheckbox.vue')['default']
     InputFile: typeof import('./src/components/InputFile.vue')['default']
     InputText: typeof import('./src/components/InputText.vue')['default']
     InputTextArea: typeof import('./src/components/InputTextArea.vue')['default']
+    InputToggle: typeof import('./src/components/InputToggle.vue')['default']
     Modal: typeof import('./src/components/Modal.vue')['default']
     WishlistItem: typeof import('./src/components/WishlistItem.vue')['default']
   }

src/components/FormWishlist.vue

@@ -11,7 +11,7 @@
       :value="wishlist.title"
       :label="t('components.form-wishlist.title.label')"
     />
-    <InputCheckbox
+    <InputToggle
       name="public"
       :value="wishlist.public"
       :label="t('components.form-wishlist.public.label')"

src/components/FormWishlistItem.vue

@@ -44,7 +44,7 @@
           :value="item.imageSrc"
           :label="t('components.form-wishlist-item.image-src.label')"
         />
-        <InputCheckbox
+        <InputToggle
           v-if="mode === 'update'"
           name="bought"
           :value="item.bought"

src/components/InputCheckbox.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="relative mb-8">
-    <label class="mb-1 block w-full" :for="name">{{ label }}</label>
-    <div @click="handleChange(!checked)">
-      <IconToggleOn v-if="checked" class="h-12 w-12 fill-emerald-700" />
-      <IconToggleOff
-        v-else
-        class="h-12 w-12 cursor-pointer fill-stone-500 dark:fill-current"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useField } from 'vee-validate'
-
-const props = defineProps({
-  value: {
-    type: Boolean,
-    default: false,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-})
-const { checked, handleChange } = useField(props.name, undefined, {
-  type: 'checkbox',
-  initialValue: props.value,
-  checkedValue: true,
-  uncheckedValue: false,
-})
-</script>

src/components/InputToggle.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="relative mb-8">
+    <label class="flex cursor-pointer items-center">
+      <input
+        v-bind="$attrs"
+        type="checkbox"
+        :checked="checked"
+        class="input sr-only"
+        @change="handleChange(!checked)"
+      />
+      <span class="switch"></span>
+      <span class="ml-3">{{ label }}</span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script setup lang="ts">
+import { useField } from 'vee-validate'
+
+const props = defineProps({
+  value: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+})
+const { checked, handleChange } = useField(props.name, undefined, {
+  type: 'checkbox',
+  initialValue: props.value,
+  checkedValue: true,
+  uncheckedValue: false,
+})
+</script>
+
+<style scoped lang="postcss">
+.switch {
+  --switch-container-width: 50px;
+  --switch-size: calc(var(--switch-container-width) / 2);
+
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: var(--switch-size);
+  flex-basis: var(--switch-container-width);
+  border-radius: var(--switch-size);
+  transition: background-color 0.25s ease-in-out;
+  @apply bg-stone-200;
+}
+
+.switch::before {
+  content: '';
+  position: absolute;
+  left: 1px;
+  height: calc(var(--switch-size) - 4px);
+  width: calc(var(--switch-size) - 4px);
+  border-radius: 9999px;
+  background-color: white;
+  transition: transform 0.375s ease-in-out;
+}
+
+.input:checked + .switch {
+  @apply bg-emerald-500;
+}
+
+.input:checked + .switch::before {
+  @apply border-emerald-500;
+  transform: translateX(
+    calc(var(--switch-container-width) - var(--switch-size))
+  );
+}
+</style>