feat: new Toggle.vue component

Author: yaroslav8765

adminforth/spa/src/afcl/Toggle.vue

@@ -0,0 +1,32 @@
+<template>
+    <label class="inline-flex items-center cursor-pointer" :class="{'opacity-50' : props.disabled}">
+        <input :id="id" 
+            type="checkbox" 
+            value="" class="sr-only peer" 
+            :disabled="props.disabled"
+            :checked="props.modelValue"
+            @change="$emit('update:modelValue', $event.target.checked)"
+            >   
+            <div class="relative w-11 h-6 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus:ring-4 
+                peer-focus:ring-lightToggleRing dark:peer-focus:ring-darkToggleRing rounded-full peer dark:bg-darkToggleBgUnactive 
+                peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full 
+                peer-checked:after:border-lightToggleBorderActive after:content-[''] after:absolute after:top-[2px] 
+                after:start-[2px] after:bg-lightToggleCircle dark:after:bg-darkToggleCircle after:border-lightToggleBorderUnactive dark:after:border-darkToggleBorderUnactive after:border after:rounded-full 
+                after:h-5 after:w-5 after:transition-all dark:border-darkToggleBorderUnactive peer-checked:bg-lightToggleBgActive 
+                dark:peer-checked:bg-darkToggleBgActive dark:peer-checked:after:border-darkToggleBorderActive">
+            </div>
+        <label :for="id" class="cursor-pointer ms-2 text-sm font-medium text-lightToggleText dark:text-darkToggleText">
+            <slot></slot>
+        </label>
+    </label>
+</template>
+
+<script setup lang="ts">
+    const props = defineProps({
+        modelValue: Boolean,
+        disabled: Boolean,
+    });
+
+    defineEmits(['update:modelValue']);
+    const id = `afcb-${Math.random().toString(36).substring(7)}`
+</script>