added switch component

2025-02-02 23:05:17 +03:30
parent 4576cedcd5
commit b816b19524
1 changed files with 41 additions and 0 deletions
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    modelValue: boolean;
+};
+
+type Emit = {
+    "update:modelValue": [value: boolean];
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { modelValue } = toRefs(props);
+
+// emit
+
+const emit = defineEmits<Emit>();
+
+// computed
+
+const value = computed({
+    get: () => modelValue.value ?? false,
+    set: (value) => emit("update:modelValue", value),
+});
+</script>
+
+<template>
+    <SwitchRoot
+        v-model="value"
+        class="w-[3rem] h-[1.8rem] flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-stone-800 border border-slate-300 data-[state=checked]:border-stone-700 rounded-full relative transition-all focus-within:outline-none"
+    >
+        <SwitchThumb
+            class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
+        />
+    </SwitchRoot>
+</template>
+
+<style scoped></style>