38 lines
1.6 KiB
Vue
38 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
const open = ref(false), username = ref(""), price = ref(750), disabled = ref(false), loading = ref(false);
|
|
|
|
watch(loading, (value) => {
|
|
if(value)
|
|
{
|
|
setTimeout(() => { open.value = true; loading.value = false }, 1500);
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<Title>Accueil</Title>
|
|
</Head>
|
|
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
|
|
<div class="w-1/2 flex flex-1 flex-col justify-center items-center gap-2">
|
|
<Collapsible label="Options">
|
|
<div class="flex flex-col justify-start items-start">
|
|
<div class="flex flex-row">
|
|
<Switch v-model="disabled" onIcon="radix-icons:lock-closed" offIcon="radix-icons:lock-open-2" />
|
|
<ThemeSwitch />
|
|
</div>
|
|
<SliderInput :disabled="disabled" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
|
|
v-model="price" />
|
|
<TextInput label="Saisir un pseudonyme" :disabled="disabled" v-model="username" />
|
|
<NumberPicker label="Age" :disabled="disabled" />
|
|
</div>
|
|
</Collapsible>
|
|
|
|
<Button @click="() => loading = true">
|
|
<span v-if="!loading">Load data</span>
|
|
<Loading v-else size="small" />
|
|
</Button>
|
|
<Toast v-model="open" :duration="7500" content="Je suis un long texte pour tester comment ça se comporte aaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaa" :closeable="false" />
|
|
</div>
|
|
</div>
|
|
</template> |