refactor: migrate NsfwSwitch component

src/components/RefToggle.vue

@@ -1,34 +1,43 @@
+<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 class="nsfw-switch" :for="id">
-    <div class="nsfw-switch__label">😇</div>
-    <div class="nsfw-switch__toggle">
-      <input
-        :checked="modelValue"
-        @change="$emit('update:modelValue', $event.target.checked)"
-        type="checkbox"
-        name="nsfw"
-        :id="id"
-      />
-      <div class="nsfw-switch__toggle-inner"></div>
+  <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>
-    <div class="nsfw-switch__label">😈</div>
   </label>
 </template>
 
-<script>
-export default {
-  props: {
-    modelValue: Boolean,
-    id: { type: String, required: true },
-  },
-};
-</script>
-
 <style lang="scss">
-@import "@/scss/_variables.scss";
-
-.nsfw-switch {
-  font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
+.toggle {
+  font-family: "apple color emoji", "noto color emoji", "segoe ui emoji",
     "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
     "segoe ui symbol";
 
@@ -47,23 +56,23 @@ export default {
     text-align: center;
   }
 
-  &__toggle {
+  &__input {
     margin: 0 0.5em;
+  }
 
-    & input:checked + &-inner {
-      background-color: $sebin-primary;
+  &__input input:checked + &__inner {
+    background-color: var(--color-toggle);
 
-      &:before {
-        transform: translate3d(0.9em, 0.1em, 0) scale3d(0, 0, 0);
-      }
+    &:before {
+      transform: translate3d(0.9em, 0.1em, 0) scale3d(0, 0, 0);
+    }
 
-      &:after {
-        transform: translate3d(1.1em, 0.1em, 0);
-      }
+    &:after {
+      transform: translate3d(1.1em, 0.1em, 0);
     }
   }
 
-  &__toggle-inner {
+  &__inner {
     position: relative;
     display: inline-block;
     width: 2.3em;
@@ -103,12 +112,12 @@ export default {
     pointer-events: none;
   }
 
-  &:active &__toggle-inner:after {
+  &:active &__inner:after {
     width: 1.4em;
     transform: translate3d(0.1em, 0.1em, 0);
   }
 
-  &:active input:checked + &__toggle-inner:after {
+  &:active input:checked + &__inner:after {
     transform: translate3d(0.8em, 0.1em, 0);
   }
 }