From f4f4be6b2793a7780c903216c2abcd8f8d630fc3 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Tue, 29 Oct 2024 17:36:15 +0100
Subject: [PATCH] Progressing on the components with the Slider and the Switch

---
 components/SliderInput.vue      | 20 ++++++++++++++++++++
 components/SliderRangeInput.vue | 21 +++++++++++++++++++++
 components/Switch.vue           |  6 +++---
 components/TextInput.vue        |  2 +-
 components/todo/SliderInput.vue |  0
 pages/index.vue                 |  4 +++-
 6 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 components/SliderInput.vue
 create mode 100644 components/SliderRangeInput.vue
 delete mode 100644 components/todo/SliderInput.vue

diff --git a/components/SliderInput.vue b/components/SliderInput.vue
new file mode 100644
index 0000000..70394ea
--- /dev/null
+++ b/components/SliderInput.vue
@@ -0,0 +1,20 @@
+<template>
+    <Label class="flex justify-center items-center my-2">{{ label }}
+        <SliderRoot class="ms-4 relative flex items-center select-none touch-none w-[160px] h-5" :default-value="model ? [model] : undefined" :v-model="[model]" @update:model-value="(value) => model = value ? value[0] : min" :min="min" :max="max" :step="step">
+            <SliderTrack class="bg-light-40 dark:bg-dark-40 relative h-1 w-full">
+                <SliderRange class="absolute bg-light-30 dark:bg-dark-30 h-full" />
+            </SliderTrack>
+            <SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
+        </SliderRoot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+const { min = 0, max = 100, step = 1, label } = defineProps<{
+    min?: number
+    max?: number
+    step?: number
+    label?: string
+}>();
+const model = defineModel<number>()
+</script>
\ No newline at end of file
diff --git a/components/SliderRangeInput.vue b/components/SliderRangeInput.vue
new file mode 100644
index 0000000..4ed3ba7
--- /dev/null
+++ b/components/SliderRangeInput.vue
@@ -0,0 +1,21 @@
+<template>
+  <Label class="flex justify-center items-center my-2">{{ label }}
+      <SliderRoot class="ms-4 relative flex items-center select-none touch-none w-[160px] h-5" :default-value="model" :v-model="model":min="min" :max="max" :step="step">
+          <SliderTrack class="bg-light-40 dark:bg-dark-40 relative h-1 w-full">
+              <SliderRange class="absolute bg-light-30 dark:bg-dark-30 h-full" />
+          </SliderTrack>
+          <SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
+          <SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
+      </SliderRoot>
+  </Label>
+</template>
+
+<script setup lang="ts">
+const { min = 0, max = 100, step = 1, label } = defineProps<{
+  min?: number
+  max?: number
+  step?: number
+  label?: string
+}>();
+const model = defineModel<number[]>()
+</script>
\ No newline at end of file
diff --git a/components/Switch.vue b/components/Switch.vue
index 4302d41..c80b991 100644
--- a/components/Switch.vue
+++ b/components/Switch.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <Label class="flex justify-center items-center my-2">{{ label }}
-            <SwitchRoot v-model:checked="model" :disabled="disabled" class="ms-3 w-12 h-6 select-none border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 dark:hover:border-dark-35">
-                <SwitchThumb class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-70 dark:bg-dark-70 border border-light-50 dark:border-dark-50 data-[state=checked]:translate-x-[26px]"/>
+            <SwitchRoot v-model:checked="model" :disabled="disabled" class="ms-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 dark:hover:border-dark-35 data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35">
+                <SwitchThumb class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]"/>
             </SwitchRoot>
         </Label>
   </div>
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 const { label, disabled } = defineProps<{
-    label: string
+    label?: string
     disabled?: boolean
 }>();
 const model = defineModel<boolean>();
diff --git a/components/TextInput.vue b/components/TextInput.vue
index 5359b9c..1bbe4c1 100644
--- a/components/TextInput.vue
+++ b/components/TextInput.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 const { type = 'text', label, disabled = false, placeholder } = defineProps<{
     type?: 'text' | 'password' | 'email' | 'tel' | 'url'
-    label: string
+    label?: string
     disabled?: boolean
     placeholder?: string
 }>();
diff --git a/components/todo/SliderInput.vue b/components/todo/SliderInput.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/pages/index.vue b/pages/index.vue
index f56be8f..3300bd5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const open = ref(false), username = ref("");
+const open = ref(false), username = ref(""), price = ref(750);
 </script>
 
 <template>
@@ -8,6 +8,8 @@ const open = ref(false), username = ref("");
     </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 class="flex-col"  :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25" v-model="price" />
             <TextInput label="Saisir un pseudonyme" v-model="username" />
             <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></Tooltip>