Add PinPicker and NumberPicker

This commit is contained in:
2024-10-30 13:24:21 +01:00
parent f37c3e4cc9
commit a5a9086eb7
7 changed files with 49 additions and 6 deletions

View File

@@ -1,18 +1,18 @@
<script setup lang="ts">
const open = ref(false), username = ref(""), price = ref(750);
const open = ref(false), username = ref(""), price = ref(750), disabled = ref(false);
</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">
<Switch label="Test" />
<SliderInput :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
<Switch label="Test" v-model="disabled" />
<SliderInput :disabled="disabled" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
v-model="price" />
<TextInput label="Saisir un pseudonyme" v-model="username" />
<TextInput label="Saisir un pseudonyme" :disabled="disabled" v-model="username" />
<NumberPicker label="Age" :disabled="disabled" />
<Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" />
<Tooltip message="Vas y, ajoute stp" side="top"><button @click="open = !!username && !open"
class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Ajouter</button>