From c44424029b5ecbab8f1a0e45c2b6366c996a4552 Mon Sep 17 00:00:00 2001
From: dderbentsov <dderbentsov@gmail.com>
Date: Tue, 3 Jan 2023 03:54:57 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/kit/KitToggle.vue | 74 ++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/components/kit/KitToggle.vue

diff --git a/src/components/kit/KitToggle.vue b/src/components/kit/KitToggle.vue
new file mode 100644
index 0000000..962b33e
--- /dev/null
+++ b/src/components/kit/KitToggle.vue
@@ -0,0 +1,74 @@
+<template lang="pug">
+  base-input-container(:label="label")
+    label.switch
+      input(type="checkbox", v-model="value")
+      span.slider
+</template>
+
+<script>
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+export default {
+  name: "KitToggle",
+  components: { BaseInputContainer },
+  props: {
+    label: String,
+    modelValue: Object,
+  },
+  computed: {
+    value: {
+      get() {
+        return !!this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", !!value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.switch
+  position: relative
+  display: inline-block
+  width: 60px
+  height: 34px
+  input
+    opacity: 0
+    width: 0
+    height: 0
+
+.slider
+  position: absolute
+  cursor: pointer
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background-color: #ccc
+  -webkit-transition: .4s
+  transition: .4s
+  border-radius: 34px
+  &:before
+    position: absolute
+    content: ""
+    height: 26px
+    width: 26px
+    left: 4px
+    bottom: 4px
+    background-color: white
+    -webkit-transition: .4s
+    transition: .4s
+    border-radius: 50%
+
+input:checked + .slider
+  background-color: var(--btn-blue-color)
+
+input:focus + .slider
+  box-shadow: 0 0 1px var(--btn-blue-color)
+
+input:checked + .slider:before
+  -webkit-transform: translateX(26px)
+  -ms-transform: translateX(26px)
+  transform: translateX(26px)
+</style>