116 lines
1.8 KiB
Vue
116 lines
1.8 KiB
Vue
|
<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>
|