feat : reorganisation de la structure projet

.playground/pages/composant/checkbox/checkbox.vue

@@ -87,7 +87,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioCheckbox from '../../../app/components/malio/Checkbox.vue'
+import MalioCheckbox from '../../../../app/components/malio/checkbox/Checkbox.vue'
 const simpleValue = ref(false)
 const checkedValue = ref(true)
 const hintValue = ref(false)

.playground/pages/composant/input/inputTextArea.vue

@@ -92,7 +92,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputTextArea from '../../../app/components/malio/InputTextArea.vue'
+import MalioInputTextArea from '../../../../app/components/malio/input/InputTextArea.vue'
 
 const hintValue = ref('')
 const iconValue = ref('')

.playground/pages/composant/radio/radioButton.vue

@@ -93,7 +93,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioRadioButton from '../../../app/components/malio/RadioButton.vue'
+import MalioRadioButton from '../../../../app/components/malio/radio/RadioButton.vue'
 
 const options = [
   {label: 'Option 1', value: 'option1'},

.playground/pages/composant/time/time.vue

@@ -74,7 +74,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioTime from '../../../app/components/malio/Time.vue'
+import MalioTime from '../../../../app/components/malio/time/Time.vue'
 
 const simpleValue = ref('')
 const labeledValue = ref('')

.playground/pages/index.vue

@@ -9,17 +9,41 @@
         Liste des composants
       </button>
 
-      <nav class="mt-6 flex flex-col gap-2">
-        <button
-          v-for="item in items"
-          :key="item.name"
-          type="button"
-          class="rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary hover:text-white"
-          :class="selectedName === item.name ? 'bg-m-secondary text-white' : ''"
-          @click="selectOrToggle(item.name)"
+      <nav class="mt-6 flex flex-col gap-1">
+        <div
+          v-for="group in groups"
+          :key="group.category"
         >
-          {{ item.label }}
-        </button>
+          <button
+            type="button"
+            class="flex w-full items-center justify-between rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary/10"
+            @click="toggleCategory(group.category)"
+          >
+            {{ group.category }}
+            <span
+              class="text-xs transition-transform duration-200"
+              :class="openCategories.has(group.category) ? 'rotate-90' : ''"
+            >
+              &#9654;
+            </span>
+          </button>
+
+          <div
+            v-if="openCategories.has(group.category)"
+            class="ml-3 flex flex-col gap-1 border-l border-gray-300 pl-2"
+          >
+            <button
+              v-for="item in group.items"
+              :key="item.name"
+              type="button"
+              class="rounded px-3 py-1.5 text-left text-sm text-black hover:bg-m-primary hover:text-white"
+              :class="selectedName === item.name ? 'bg-m-secondary text-white' : ''"
+              @click="selectItem(item.name)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
       </nav>
     </aside>
 
@@ -48,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, shallowRef } from 'vue'
+import {computed, reactive, ref, watch, shallowRef} from 'vue'
 
 type LoadedModule = {
   default: unknown
@@ -59,8 +83,13 @@ type Item = {
   label: string
 }
 
-const componentModules = import.meta.glob('../../app/components/malio/*.vue')
-const demoModules = import.meta.glob('./composant/*.vue')
+type Group = {
+  category: string
+  items: Item[]
+}
+
+const componentModules = import.meta.glob('../../app/components/malio/**/*.vue')
+const demoModules = import.meta.glob('./composant/**/*.vue')
 
 const demoByName: Record<string, () => Promise<LoadedModule>> =
   Object.fromEntries(
@@ -70,31 +99,55 @@ const demoByName: Record<string, () => Promise<LoadedModule>> =
     }),
   )
 
-const items = computed<Item[]>(() =>
-  Object.keys(componentModules).map((file) => {
-    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
-    return {
-      name,
-      label: name,
-    }
-  }),
-)
+const groups = computed<Group[]>(() => {
+  const categoryMap = new Map<string, Item[]>()
 
+  Object.keys(componentModules).forEach((file) => {
+    const parts = file.split('/')
+    const name = parts.pop()?.replace('.vue', '') ?? ''
+    const category = parts.pop() ?? ''
+
+    if (!categoryMap.has(category)) {
+      categoryMap.set(category, [])
+    }
+    categoryMap.get(category)!.push({name, label: name})
+  })
+
+  return Array.from(categoryMap.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([category, items]) => ({
+      category: category.charAt(0).toUpperCase() + category.slice(1),
+      items: items.sort((a, b) => a.label.localeCompare(b.label)),
+    }))
+})
+
+const openCategories = reactive(new Set<string>())
 const selectedName = ref('')
 const hasInitializedSelection = ref(false)
 
 watch(
-  items,
+  groups,
   (val) => {
     if (!hasInitializedSelection.value && val.length > 0) {
-      selectedName.value = val[0].name
+      openCategories.add(val[0].category)
+      if (val[0].items.length > 0) {
+        selectedName.value = val[0].items[0].name
+      }
       hasInitializedSelection.value = true
     }
   },
-  { immediate: true },
+  {immediate: true},
 )
 
-function selectOrToggle(name: string) {
+function toggleCategory(category: string) {
+  if (openCategories.has(category)) {
+    openCategories.delete(category)
+  } else {
+    openCategories.add(category)
+  }
+}
+
+function selectItem(name: string) {
   selectedName.value = selectedName.value === name ? '' : name
 }