87 lines
1.8 KiB
Vue
87 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(['update:modelValue'])
|
|
|
|
const active = ref(props.checked);
|
|
|
|
watch(() => props.checked, (newValue) => {
|
|
active.value = newValue;
|
|
})
|
|
|
|
watch(active, (newValue) => {
|
|
emit('update:modelValue', newValue);
|
|
});
|
|
emit('update:modelValue', props.checked)
|
|
|
|
onMounted(() => {
|
|
document.querySelector(`[for='${props.id}']`).addEventListener('click', () => {
|
|
if (props.disabled) return;
|
|
active.value = !active.value
|
|
});
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<button role="switch" class="vl-toggle-switch" :aria-disabled="(props.disabled === true) ? 'true' : 'false'"
|
|
:aria-label="label" :aria-labelledby="id" :tabindex="(disabled) ? '-1' : '0'"
|
|
@click="(!disabled) ? active = !active : ''" :aria-checked="active" :data-state="(active) ? 'checked' : 'unchecked'">
|
|
<div></div>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped> .vl-toggle-switch {
|
|
font-size: inherit;
|
|
border: 0;
|
|
cursor: pointer;
|
|
width: 2.5em;
|
|
height: 1.4em;
|
|
background: #1a1b1c;
|
|
border-radius: 100px;
|
|
padding: 0.125rem 0.25rem;
|
|
position: relative;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.vl-toggle-switch[aria-disabled="true"] div {
|
|
background: #919191;
|
|
}
|
|
|
|
.vl-toggle-switch div {
|
|
position: relative;
|
|
left: 0;
|
|
width: 1em;
|
|
height: 1em;
|
|
background: #f7f7f7;
|
|
border-radius: 90px;
|
|
pointer-events: none;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.vl-toggle-switch[data-state="checked"] {
|
|
background: hsl(226, 79%, 47.5%);
|
|
}
|
|
|
|
.vl-toggle-switch[data-state="checked"] div {
|
|
left: 100%;
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.vl-toggle-switch:active div {
|
|
width: 1.3em;
|
|
}
|
|
</style> |