initial commit

components/vlToggleSwitch.vue

@@ -0,0 +1,87 @@
+<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>