SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: migrate NsfwSwitch component

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-20 00:49:22 +01:00
parent 267830b15d
commit eb749e1796
1 changed files with 46 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/components/NsfwSwitch.vue → src/components/RefToggle.vue
View file

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