77 lines
1.6 KiB
Vue
77 lines
1.6 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 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 {
|
|
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 {
|
|
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: var(--color-accent);
|
|
}
|
|
|
|
.vl-toggle-switch[data-state="checked"] div {
|
|
left: 100%;
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.vl-toggle-switch:active div {
|
|
width: 1.3em;
|
|
}
|
|
</style> |