From 5ce2d3e23613b07bd35aeb97e7a765180b877f36 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Mon, 4 Nov 2024 13:34:23 +0100
Subject: [PATCH] Move all base components to an isolated folder

---
 components/{ => base}/Avatar.vue          |  0
 components/{ => base}/Button.vue          |  0
 components/{ => base}/Collapsible.vue     |  0
 components/{ => base}/Dialog.vue          |  0
 components/{ => base}/HoverCard.vue       |  0
 components/{ => base}/Loading.vue         |  0
 components/{ => base}/NumberPicker.vue    |  0
 components/{ => base}/PinPicker.vue       |  0
 components/{ => base}/Progress.vue        |  0
 components/{ => base}/RadioInput.vue      |  0
 components/{ => base}/Select.vue          |  2 +-
 components/{ => base}/SelectGroup.vue     |  2 +-
 components/{ => base}/SelectItem.vue      |  0
 components/{ => base}/SelectSeparator.vue |  0
 components/{ => base}/SliderInput.vue     |  0
 components/{ => base}/Switch.vue          |  8 +++++---
 components/{ => base}/TextInput.vue       |  2 +-
 components/{ => base}/TimerProgress.vue   |  0
 components/{ => base}/Toast.vue           | 17 ++++++++++++++++-
 components/{ => base}/Tooltip.vue         |  0
 components/todo/Accordeon.vue             |  0
 components/todo/Checkbox.vue              |  0
 components/todo/Combobox.vue              |  0
 components/todo/ContextMenu.vue           |  0
 components/todo/Menu.vue                  |  0
 nuxt.config.ts                            |  4 ++--
 pages/index.vue                           |  4 ++--
 27 files changed, 28 insertions(+), 11 deletions(-)
 rename components/{ => base}/Avatar.vue (100%)
 rename components/{ => base}/Button.vue (100%)
 rename components/{ => base}/Collapsible.vue (100%)
 rename components/{ => base}/Dialog.vue (100%)
 rename components/{ => base}/HoverCard.vue (100%)
 rename components/{ => base}/Loading.vue (100%)
 rename components/{ => base}/NumberPicker.vue (100%)
 rename components/{ => base}/PinPicker.vue (100%)
 rename components/{ => base}/Progress.vue (100%)
 rename components/{ => base}/RadioInput.vue (100%)
 rename components/{ => base}/Select.vue (97%)
 rename components/{ => base}/SelectGroup.vue (90%)
 rename components/{ => base}/SelectItem.vue (100%)
 rename components/{ => base}/SelectSeparator.vue (100%)
 rename components/{ => base}/SliderInput.vue (100%)
 rename components/{ => base}/Switch.vue (74%)
 rename components/{ => base}/TextInput.vue (95%)
 rename components/{ => base}/TimerProgress.vue (100%)
 rename components/{ => base}/Toast.vue (87%)
 rename components/{ => base}/Tooltip.vue (100%)
 delete mode 100644 components/todo/Accordeon.vue
 delete mode 100644 components/todo/Checkbox.vue
 delete mode 100644 components/todo/Combobox.vue
 delete mode 100644 components/todo/ContextMenu.vue
 delete mode 100644 components/todo/Menu.vue

diff --git a/components/Avatar.vue b/components/base/Avatar.vue
similarity index 100%
rename from components/Avatar.vue
rename to components/base/Avatar.vue
diff --git a/components/Button.vue b/components/base/Button.vue
similarity index 100%
rename from components/Button.vue
rename to components/base/Button.vue
diff --git a/components/Collapsible.vue b/components/base/Collapsible.vue
similarity index 100%
rename from components/Collapsible.vue
rename to components/base/Collapsible.vue
diff --git a/components/Dialog.vue b/components/base/Dialog.vue
similarity index 100%
rename from components/Dialog.vue
rename to components/base/Dialog.vue
diff --git a/components/HoverCard.vue b/components/base/HoverCard.vue
similarity index 100%
rename from components/HoverCard.vue
rename to components/base/HoverCard.vue
diff --git a/components/Loading.vue b/components/base/Loading.vue
similarity index 100%
rename from components/Loading.vue
rename to components/base/Loading.vue
diff --git a/components/NumberPicker.vue b/components/base/NumberPicker.vue
similarity index 100%
rename from components/NumberPicker.vue
rename to components/base/NumberPicker.vue
diff --git a/components/PinPicker.vue b/components/base/PinPicker.vue
similarity index 100%
rename from components/PinPicker.vue
rename to components/base/PinPicker.vue
diff --git a/components/Progress.vue b/components/base/Progress.vue
similarity index 100%
rename from components/Progress.vue
rename to components/base/Progress.vue
diff --git a/components/RadioInput.vue b/components/base/RadioInput.vue
similarity index 100%
rename from components/RadioInput.vue
rename to components/base/RadioInput.vue
diff --git a/components/Select.vue b/components/base/Select.vue
similarity index 97%
rename from components/Select.vue
rename to components/base/Select.vue
index 457f895..6590a9a 100644
--- a/components/Select.vue
+++ b/components/base/Select.vue
@@ -16,7 +16,7 @@
                         <Icon icon="radix-icons:chevron-up" />
                     </SelectScrollUpButton>
                     <SelectViewport class="p-1">
-                        <slot></slot>
+                        <slot />
                     </SelectViewport>
                     <SelectScrollDownButton>
                         <Icon icon="radix-icons:chevron-down" />
diff --git a/components/SelectGroup.vue b/components/base/SelectGroup.vue
similarity index 90%
rename from components/SelectGroup.vue
rename to components/base/SelectGroup.vue
index 2f7d77a..a37720b 100644
--- a/components/SelectGroup.vue
+++ b/components/base/SelectGroup.vue
@@ -1,7 +1,7 @@
 <template>
     <SelectGroup :disabled="disabled" class="">
         <SelectLabel class="">{{ label }}</SelectLabel>
-        <slot></slot>
+        <slot />
     </SelectGroup>
 </template>
 
diff --git a/components/SelectItem.vue b/components/base/SelectItem.vue
similarity index 100%
rename from components/SelectItem.vue
rename to components/base/SelectItem.vue
diff --git a/components/SelectSeparator.vue b/components/base/SelectSeparator.vue
similarity index 100%
rename from components/SelectSeparator.vue
rename to components/base/SelectSeparator.vue
diff --git a/components/SliderInput.vue b/components/base/SliderInput.vue
similarity index 100%
rename from components/SliderInput.vue
rename to components/base/SliderInput.vue
diff --git a/components/Switch.vue b/components/base/Switch.vue
similarity index 74%
rename from components/Switch.vue
rename to components/base/Switch.vue
index bfc6e4b..b9b4457 100644
--- a/components/Switch.vue
+++ b/components/base/Switch.vue
@@ -1,8 +1,8 @@
 <template>
     <Label class="flex justify-center items-center my-2">{{ label }}
         <SwitchRoot v-model:checked="model" :disabled="disabled"
-            class="mx-3 w-12 h-6 select-none transition-colors 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 transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+            class="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">
             <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]
@@ -12,9 +12,11 @@
 </template>
 
 <script setup lang="ts">
-const { label, disabled } = defineProps<{
+const { label, disabled, onIcon, offIcon } = defineProps<{
     label?: string
     disabled?: boolean
+    onIcon?: string
+    offIcon?: string
 }>();
 const model = defineModel<boolean>();
 </script>
\ No newline at end of file
diff --git a/components/TextInput.vue b/components/base/TextInput.vue
similarity index 95%
rename from components/TextInput.vue
rename to components/base/TextInput.vue
index 66da66c..0efc357 100644
--- a/components/TextInput.vue
+++ b/components/base/TextInput.vue
@@ -1,5 +1,5 @@
 <template>
-    <Label class="px-4 my-2">{{ label }}
+    <Label class="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/TimerProgress.vue b/components/base/TimerProgress.vue
similarity index 100%
rename from components/TimerProgress.vue
rename to components/base/TimerProgress.vue
diff --git a/components/Toast.vue b/components/base/Toast.vue
similarity index 87%
rename from components/Toast.vue
rename to components/base/Toast.vue
index a0b5cec..b782e21 100644
--- a/components/Toast.vue
+++ b/components/base/Toast.vue
@@ -5,7 +5,7 @@
           <ToastClose v-if="closeable" aria-label="Close" class="text-2xl -translate-y-1/2 translate-x-1/2 cursor-pointer"><span aria-hidden>×</span></ToastClose>
           <ToastDescription v-if="content" class="text-md col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ content }}</span></ToastDescription>
         </div>
-        <TimerProgress v-if="timer" shape="thin" :delay="duration" class="mb-0 mt-0 w-full" />
+        <TimerProgress v-if="timer" shape="thin" :delay="duration" class="mb-0 mt-0 w-full"  />
     </ToastRoot>
 
     <ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-[512px] z-50 outline-none min-w-72" />
@@ -21,6 +21,21 @@ const { closeable = true, duration, title, content, timer = true } = defineProps
     content?: string
     timer?: boolean
 }>();
+const timeout = ref<NodeJS.Timeout>();
+
+watch(model, (value) => {
+    if(duration)
+    {
+		if(value === true)
+		{
+			timeout.value = setTimeout(() => model.value = false, duration);
+		}
+		else
+		{
+			clearTimeout(timeout.value);
+		}
+    }
+})
 </script>
 
 <style>
diff --git a/components/Tooltip.vue b/components/base/Tooltip.vue
similarity index 100%
rename from components/Tooltip.vue
rename to components/base/Tooltip.vue
diff --git a/components/todo/Accordeon.vue b/components/todo/Accordeon.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/todo/Checkbox.vue b/components/todo/Checkbox.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/todo/Combobox.vue b/components/todo/Combobox.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/todo/ContextMenu.vue b/components/todo/ContextMenu.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/todo/Menu.vue b/components/todo/Menu.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c282fd6..49f4b89 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -104,13 +104,13 @@ export default defineNuxtConfig({
   app: {
     pageTransition: false,
     layoutTransition: false
-  }/*,
+  },
   components: [
     {
       path: '~/components',
       pathPrefix: false,
     },
-  ]*/,
+  ],
   security: {
     rateLimiter: false,
     headers: {
diff --git a/pages/index.vue b/pages/index.vue
index 0b3e6eb..1bd2dc8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -16,8 +16,8 @@ watch(loading, (value) => {
     <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">
-                    <Switch label="Test" v-model="disabled" />
+                <div class="flex flex-col justify-start items-start">
+                    <Switch label="Verrouiler" 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" :disabled="disabled" v-model="username" />