Rework character editor with new Figma design

This commit is contained in:
Clément Pons
2025-07-07 17:55:20 +02:00
parent c33bd95b81
commit da5c1202ed
11 changed files with 5237 additions and 102 deletions

View File

@@ -1,7 +1,7 @@
<template>
<Label class="flex justify-center items-center my-2">
<span class="md:text-base text-sm">{{ label }}</span>
<SwitchRoot v-model:checked="model" :disabled="disabled"
<SwitchRoot v-model:checked="model" :disabled="disabled" :default-checked="defaultValue"
class="group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35 hover:border-light-50 dark:hover:border-dark-50 focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40
data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative">
@@ -21,6 +21,7 @@ const { label, disabled, onIcon, offIcon } = defineProps<{
disabled?: boolean
onIcon?: string
offIcon?: string
defaultValue?: boolean
}>();
const model = defineModel<boolean>();
</script>