86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
checked: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
id: {
|
|
type: String
|
|
},
|
|
label: {
|
|
type: String
|
|
},
|
|
disabled: {
|
|
type: Boolean
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['click'])
|
|
|
|
const active = ref(props.checked);
|
|
|
|
watch(() => props.checked, (newValue) => {
|
|
active.value = newValue;
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<button :id="id" role="switch" class="vl-toggle-switch"
|
|
:aria-disabled="(props.disabled === true) ? 'true' : 'false'" :aria-label="label" :aria-labelledby="id"
|
|
:tabindex="(disabled) ? '-1' : '0'" @click="(e) => $emit('click', e)" :aria-checked="active"
|
|
:data-state="(active) ? 'checked' : 'unchecked'">
|
|
<div></div>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.vl-toggle-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: inherit;
|
|
border: 0;
|
|
cursor: pointer;
|
|
width: 2.5em;
|
|
height: 1.4em;
|
|
background: var(--color-highlight);
|
|
border-radius: 100px;
|
|
padding: 0.125rem 0.25rem;
|
|
position: relative;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.vl-toggle-switch[aria-disabled="true"] div {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.vl-toggle-switch div {
|
|
transform-origin: center left;
|
|
will-change: transform;
|
|
position: relative;
|
|
left: 0;
|
|
width: 1em;
|
|
height: 1em;
|
|
background: #f7f7f7;
|
|
border-radius: 9999px;
|
|
pointer-events: none;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.vl-toggle-switch[data-state="checked"] {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.vl-toggle-switch[data-state="checked"] div {
|
|
transform-origin: center right;
|
|
transform: translateX(calc(2.5em - 1em - 0.5rem));
|
|
}
|
|
|
|
.vl-toggle-switch:active div {
|
|
width: 1.3em;
|
|
}
|
|
|
|
.vl-toggle-switch[data-state="checked"]:active div {
|
|
transform: translateX(calc(2.5em - 1.3em - 0.5rem));
|
|
}
|
|
</style> |