refactor: migrate NsfwSwitch component

src/components/RefToggle.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  modelValue: boolean;
+  id: string;
+  name?: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(["update:modelValue"]);
+
+const checked = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  },
+});
+</script>
+
+<template>
+  <label :for="id" class="toggle">
+    <div class="toggle__label">
+      <slot name="off"></slot>
+    </div>
+    <div class="toggle__input">
+      <input type="checkbox" :name="name" :id="id" v-model="checked" />
+      <div class="toggle__inner"></div>
+    </div>
+    <div class="toggle__label">
+      <slot name="on"></slot>
+    </div>
+  </label>
+</template>
+
+<style lang="scss">
+.toggle {
+  font-family: "apple color emoji", "noto color emoji", "segoe ui emoji",
+    "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
+    "segoe ui symbol";
+
+  padding: 0.5em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+
+  &__label,
+  &__toggle {
+    flex: 0 1 auto;
+    align-self: center;
+    line-height: 1;
+    text-align: center;
+  }
+
+  &__input {
+    margin: 0 0.5em;
+  }
+
+  &__input input:checked + &__inner {
+    background-color: var(--color-toggle);
+
+    &:before {
+      transform: translate3d(0.9em, 0.1em, 0) scale3d(0, 0, 0);
+    }
+
+    &:after {
+      transform: translate3d(1.1em, 0.1em, 0);
+    }
+  }
+
+  &__inner {
+    position: relative;
+    display: inline-block;
+    width: 2.3em;
+    height: 1.3em;
+    background-color: #e6e6e6;
+    border-radius: 1.15em;
+    vertical-align: text-bottom;
+    transition: all 0.3s linear;
+
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      height: 1.1em;
+      background-color: #fff;
+      border-radius: 0.55em;
+    }
+
+    &:before {
+      width: 2.1em;
+      transform: translate3d(0.1em, 0.1em, 0) scale3d(1, 1, 1);
+      transition: all 0.25s linear;
+    }
+
+    &:after {
+      width: 1.1em;
+      box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.24);
+      transform: translate3d(0.1em, 0.1em, 0);
+      transition: all 0.2s ease-in-out;
+    }
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:active &__inner:after {
+    width: 1.4em;
+    transform: translate3d(0.1em, 0.1em, 0);
+  }
+
+  &:active input:checked + &__inner:after {
+    transform: translate3d(0.8em, 0.1em, 0);
+  }
+}
+</style>