.claude/settings.local.json

@@ -2,7 +2,17 @@
   "permissions": {
     "allow": [
       "Bash(npm run:*)",
-      "Bash(npx vitest:*)"
+      "Bash(npx vitest:*)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/Checkbox.vue''|from ''../../../app/components/malio/checkbox/Checkbox.vue''|\" .playground/pages/composant/checkbox.vue)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/RadioButton.vue''|from ''../../../app/components/malio/radio/RadioButton.vue''|\" .playground/pages/composant/radioButton.vue)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/Time.vue''|from ''../../../app/components/malio/time/Time.vue''|\" .playground/pages/composant/time.vue)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/InputTextArea.vue''|from ''../../../app/components/malio/input/InputTextArea.vue''|\" .playground/pages/composant/inputTextArea.vue)",
+      "Bash(npx nuxi:*)",
+      "Bash(mkdir -p button input select checkbox radio time)",
+      "Bash(mv buttonIcon.story.vue button/)",
+      "Bash(mv inputText.story.vue inputAmount.story.vue inputNumber.story.vue inputPassword.story.vue inputTextArea.story.vue inputUpload.story.vue input/)",
+      "Bash(mv InputSelect.story.vue selectCheckbox.story.vue select/)",
+      "Bash(mv inputCheckbox.story.vue checkbox/)"
     ]
   }
 }

.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
 }
 

app/components/malio/select/SelectCheckbox.vue

@@ -204,7 +204,7 @@
 <script setup lang="ts">
 import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
-import Checkbox from './Checkbox.vue'
+import Checkbox from '../checkbox/Checkbox.vue'
 
 defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
 

app/story/button/buttonIcon.story.vue

@@ -238,5 +238,5 @@ rapides et compactes (retour, modifier, supprimer, etc.).
 </docs>
 
 <script setup lang="ts">
-import MalioButtonIcon from '../components/malio/ButtonIcon.vue'
+import MalioButtonIcon from '../../components/malio/button/ButtonIcon.vue'
 </script>

app/story/checkbox/inputCheckbox.story.vue

@@ -166,7 +166,7 @@ Composant checkbox custom avec `v-model`, message d'aide, et états visuels
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioCheckbox from '../components/malio/Checkbox.vue'
+import MalioCheckbox from '../../components/malio/checkbox/Checkbox.vue'
 
 const simpleValue = ref(false)
 const checkedValue = ref(true)

app/story/input/inputAmount.story.vue

@@ -248,7 +248,7 @@ Composant input dédié à la saisie d’un montant décimal avec label flottant
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputAmount from '../components/malio/InputAmount.vue'
+import MalioInputAmount from '../../components/malio/input/InputAmount.vue'
 
 const simpleValue = ref('')
 const hintValue = ref('')

app/story/input/inputNumber.story.vue

@@ -71,7 +71,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputNumber from '../components/malio/InputNumber.vue'
+import MalioInputNumber from '../../components/malio/input/InputNumber.vue'
 
 const simpleValue = ref('')
 const initialValue = ref('3')

app/story/input/inputPassword.story.vue

@@ -240,7 +240,7 @@ automatiquement.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputPassword from '../components/malio/InputPassword.vue'
+import MalioInputPassword from '../../components/malio/input/InputPassword.vue'
 
 const simpleValue = ref('')
 const noIconValue = ref('')

app/story/input/inputText.story.vue

@@ -266,7 +266,7 @@ largeur.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputText from '../components/malio/InputText.vue'
+import MalioInputText from '../../components/malio/input/InputText.vue'
 
 const simpleValue = ref('')
 const hintValue = ref('')

app/story/input/inputTextArea.story.vue

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

app/story/input/inputUpload.story.vue

@@ -223,7 +223,7 @@ et accessibilité.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputUpload from '../components/malio/InputUpload.vue'
+import MalioInputUpload from '../../components/malio/input/InputUpload.vue'
 
 const simpleValue = ref('')
 const noIconValue = ref('')

app/story/radio/RadioButton.story.vue

@@ -169,7 +169,7 @@ et les états visuels de validation.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioRadioButton from '../components/malio/RadioButton.vue'
+import MalioRadioButton from '../../components/malio/radio/RadioButton.vue'
 
 const options = [
   {label: 'Option 1', value: 'option1'},

app/story/select/InputSelect.story.vue

@@ -1,5 +1,5 @@
 <template>
-  <Story title="Select">
+  <Story title="Select/Select">
     <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
       <div class="rounded-lg border p-4">
         <h2 class="mb-4 text-xl font-bold">Simple</h2>
@@ -178,7 +178,7 @@ largeur.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioSelect from '../components/malio/Select.vue'
+import MalioSelect from '../../components/malio/select/Select.vue'
 
 const simpleValue = ref<string | number | null>(null)
 const preselectedValue = ref<string | number | null>('fr')

app/story/select/selectCheckbox.story.vue

@@ -192,7 +192,7 @@ Composant select avec checkboxes multiples, label flottant, tags optionnels,
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioSelectCheckbox from '../components/malio/SelectCheckbox.vue'
+import MalioSelectCheckbox from '../../components/malio/select/SelectCheckbox.vue'
 
 const options = [
   {label: 'France', value: 'fr'},

app/story/time/inputTime.story.vue

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

nuxt.config.ts

@@ -7,6 +7,14 @@ export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss','@nuxt/icon'],
   css: [join(dir, 'app/assets/css/malio.css')],
 
+  components: [
+    {
+      path: join(dir, 'app/components/malio'),
+      prefix: 'Malio',
+      pathPrefix: false,
+    },
+  ],
+
   tailwindcss: {
     config: {
       theme: {