first commit

src/components/Form/Toggle.vue

@@ -0,0 +1,97 @@
+<template>
+  <label :for="id">
+    <input :id="id" type="checkbox" v-model="checked" />
+    <span class="slider" :class="{ filled }" />
+    <span>{{ label }}</span>
+    <span v-if="help" class="tooltiped tooltiped--medium" :aria-tooltip="help"
+      ><i class="material-icons">info</i></span
+    >
+  </label>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import "@/assets/css/tooltip.css";
+
+export default defineComponent({
+  data() {
+    return { checked: true };
+  },
+  props: {
+    modelValue: { type: Boolean, required: true },
+    label: String,
+    id: String,
+    filled: Boolean,
+    help: String,
+  },
+  watch: {
+    modelValue(value: boolean) {
+      if (value != this.checked) this.checked = value;
+    },
+    checked(value) {
+      if (value != this.modelValue) this.$emit("update:modelValue", value);
+    },
+  },
+  mounted() {
+    this.checked = this.modelValue;
+  },
+});
+</script>
+
+<style scoped>
+label {
+  display: inline-block;
+  color: var(--color-neutral-200);
+  display: flex;
+  font-size: 0.9rem;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.5rem;
+  margin-bottom: 0.2rem;
+}
+input[type="checkbox"]:not(:checked),
+input[type="checkbox"]:checked {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.slider {
+  position: relative;
+  width: 34px;
+  height: 12px;
+  background: var(--color-neutral-200);
+  border-radius: 6px;
+  top: 6px;
+  margin-right: 8px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+input[type="checkbox"]:checked + .slider {
+  background: var(--color-accent-400);
+}
+.slider::after {
+  content: "";
+  height: 20px;
+  width: 20px;
+  background: var(--color-neutral-400);
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  border-radius: 10px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+input[type="checkbox"]:checked + .slider::after {
+  background: var(--color-accent-600);
+  left: 18px;
+}
+.tooltiped .material-icons {
+  vertical-align: text-top;
+  font-size: 1em;
+}
+.tooltiped {
+  color: var(--color-accent-400);
+  position: relative;
+  margin-left: 4px;
+}
+</style>