traxxx/assets/components/form/toggle.vue

113 lines
1.7 KiB
Vue
Raw Normal View History

<template>
<label class="toggle-container noselect">
<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>