From a5a9086eb7f61c31807bca984ab6c3dde409efeb Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Wed, 30 Oct 2024 13:24:21 +0100
Subject: [PATCH] Add PinPicker and NumberPicker

---
 components/NumberPicker.vue      | 23 +++++++++++++++++++++++
 components/PinPicker.vue         | 20 ++++++++++++++++++++
 components/TextInput.vue         |  2 +-
 components/todo/NumberPicker.vue |  0
 components/todo/Pagination.vue   |  0
 components/todo/PinPicker.vue    |  0
 pages/index.vue                  | 10 +++++-----
 7 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 components/NumberPicker.vue
 create mode 100644 components/PinPicker.vue
 delete mode 100644 components/todo/NumberPicker.vue
 delete mode 100644 components/todo/Pagination.vue
 delete mode 100644 components/todo/PinPicker.vue

diff --git a/components/NumberPicker.vue b/components/NumberPicker.vue
new file mode 100644
index 0000000..1044459
--- /dev/null
+++ b/components/NumberPicker.vue
@@ -0,0 +1,23 @@
+<template>
+    <Label class="my-2 flex">{{ label }}
+        <NumberFieldRoot :min="min" :max="max" v-model="model" :disabled="disabled" :step="step" class="ms-4 flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+            data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
+            <NumberFieldDecrement class="data-[disabled]:opacity-50 px-1"><Icon icon="radix-icons:minus" :inline="true" class="w-6 text-light-100 dark:text-dark-100 opacity-100" /></NumberFieldDecrement>
+            <NumberFieldInput class="text-sm tabular-nums w-20 appearance-none bg-transparent px-2 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+            <NumberFieldIncrement class="data-[disabled]:opacity-50 px-1"><Icon icon="radix-icons:plus" :inline="true" class="w-6 text-light-100 dark:text-dark-100 opacity-100" /></NumberFieldIncrement>
+        </NumberFieldRoot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
+const { min = 0, max = 100, disabled = false, step = 1, label } = defineProps<{
+    min?: number
+    max?: number
+    disabled?: boolean
+    step?: number
+    label?: string
+}>();
+const model = defineModel<number>();
+</script>
\ No newline at end of file
diff --git a/components/PinPicker.vue b/components/PinPicker.vue
new file mode 100644
index 0000000..becccf7
--- /dev/null
+++ b/components/PinPicker.vue
@@ -0,0 +1,20 @@
+<template>
+    <Label class="my-2">{{ label }}
+        <PinInputRoot :disabled="disabled" :default-value="model?.split('')" @update:model-value="(v) => model = v.join('')" @complete="() => emit('complete')" class="flex gap-2 items-center mt-1">
+            <PinInputInput :type="hidden ? 'password' : undefined" v-for="(id, index) in amount" :key="id" :index="index" class="border border-light-35 dark:border-dark-35 w-10 h-10 outline-none 
+            bg-light-20 dark:bg-dark-20 text-center text-light-100 dark:text-dark-100 placeholder:text-light-60 dark:placeholder:text-dark-60 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+            data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 caret-light-50 dark:caret-dark-50" />
+        </PinInputRoot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+const { hidden = false, amount, label, disabled = false } = defineProps<{
+    hidden?: boolean
+    label?: string
+    amount: number
+    disabled?: boolean
+}>();
+const model = defineModel<string>();
+const emit = defineEmits(['complete']);
+</script>
\ No newline at end of file
diff --git a/components/TextInput.vue b/components/TextInput.vue
index 9f2874d..66da66c 100644
--- a/components/TextInput.vue
+++ b/components/TextInput.vue
@@ -1,5 +1,5 @@
 <template>
-    <Label class="px-4">{{ label }}
+    <Label class="px-4 my-2">{{ label }}
         <input :placeholder="placeholder" :disabled="disabled"
             class="mx-4 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
         bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
diff --git a/components/todo/NumberPicker.vue b/components/todo/NumberPicker.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/todo/Pagination.vue b/components/todo/Pagination.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/todo/PinPicker.vue b/components/todo/PinPicker.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/pages/index.vue b/pages/index.vue
index eb7b9d9..f873b37 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -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>