<template> <label class="toggle-container noselect" :class="{ light: $store.state.ui.theme === 'dark' }" > <input :id="`toggle-${id}`" :checked="checked" :true-value="trueValue" :false-value="falseValue" :disabled="disabled" type="checkbox" class="toggle-input" @change="$emit('change', $event.target.checked)" > <label :for="`toggle-${id}`" class="toggle" /> </label> </template> <script> export default { props: { checked: { type: Boolean, default: false, }, trueValue: { type: null, default: true, }, falseValue: { type: null, default: false, }, disabled: { type: Boolean, default: false, }, }, emits: ['change'], data() { return { id: Math.floor(new Date().getTime() * Math.random()), }; }, }; </script> <style lang="scss" scoped> @import 'breakpoints'; .toggle-container { display: inline-block; cursor: pointer; &.light { .toggle { background: var(--lighten-weak); } .toggle-input:checked + .toggle { background: var(--lighten); } } } .toggle { width: 2rem; height: .9rem; display: flex; align-items: center; position: relative; background: var(--shadow-hint); border-radius: 1rem; cursor: pointer; &::after { content: ''; background-color: var(--background-light); width: 1rem; height: 1rem; display: inline-block; position: absolute; left: 0; border-radius: 50%; box-shadow: 0 0 2px var(--darken-strong); transition: background-color .2s ease, left .2s ease; } } .toggle-input { display: none; &:checked + .toggle { background: var(--primary-faded); &::after { background: var(--primary); left: calc(100% - 1rem); } } &[disabled] + .toggle { background: var(--shadow-weak); &::after { background: var(--shadow); } } } </style>