108 lines
2.8 KiB
Vue
108 lines
2.8 KiB
Vue
<template>
|
|
<div class="flex min-h-screen">
|
|
<aside class="w-72 bg-m-bg p-6 text-white">
|
|
<button
|
|
type="button"
|
|
class="text-xl text-black font-semibold"
|
|
@click="clearSelection"
|
|
>
|
|
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-primary-500 hover:text-white"
|
|
:class="selectedName === item.name ? 'bg-secondary-500 text-white ' : ''"
|
|
@click="selectOrToggle(item.name)"
|
|
>
|
|
{{ item.label }}
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="flex-1 p-6">
|
|
<component
|
|
:is="selectedDemoComponent"
|
|
v-if="selectedDemoComponent"
|
|
/>
|
|
<p
|
|
v-else-if="selectedName"
|
|
class="text-gray-700"
|
|
>
|
|
Page de demo introuvable: <code>.playground/pages/composant/{{ selectedDemoFileName }}.vue</code>
|
|
</p>
|
|
<div v-else>
|
|
<h1 class="text-2xl font-semibold text-gray-900">Playground composants</h1>
|
|
<p class="mt-2 text-gray-600">
|
|
Selectionne un composant dans la liste pour afficher sa page de demo.
|
|
</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type LoadedModule = {
|
|
default: unknown
|
|
}
|
|
|
|
type Item = {
|
|
name: string
|
|
label: string
|
|
demoComponent?: unknown
|
|
}
|
|
|
|
const componentModules = import.meta.glob('../../app/components/malio/*.vue', { eager: true }) as Record<string, LoadedModule>
|
|
const demoModules = import.meta.glob('./composant/*.vue', { eager: true }) as Record<string, LoadedModule>
|
|
|
|
const demoByName = Object.fromEntries(
|
|
Object.entries(demoModules).map(([file, mod]) => {
|
|
const name = file.split('/').pop()?.replace('.vue', '') ?? ''
|
|
return [name.toLowerCase(), mod.default]
|
|
}),
|
|
)
|
|
|
|
const items = computed(() =>
|
|
Object.entries(componentModules).map(([file]) => {
|
|
const name = file.split('/').pop()?.replace('.vue', '') ?? ''
|
|
|
|
return {
|
|
name,
|
|
label: name,
|
|
demoComponent: demoByName[name.toLowerCase()],
|
|
}
|
|
}) as Item[],
|
|
)
|
|
|
|
const selectedName = ref('')
|
|
const hasInitializedSelection = ref(false)
|
|
|
|
watchEffect(() => {
|
|
if (!hasInitializedSelection.value && items.value.length > 0) {
|
|
selectedName.value = items.value[0].name
|
|
hasInitializedSelection.value = true
|
|
}
|
|
})
|
|
|
|
function selectOrToggle(name: string) {
|
|
selectedName.value = selectedName.value === name ? '' : name
|
|
}
|
|
|
|
function clearSelection() {
|
|
selectedName.value = ''
|
|
}
|
|
|
|
const selectedDemoComponent = computed(() =>
|
|
items.value.find((item) => item.name === selectedName.value)?.demoComponent,
|
|
)
|
|
|
|
const selectedDemoFileName = computed(() => {
|
|
const name = selectedName.value
|
|
if (!name) return ''
|
|
return name.charAt(0).toLowerCase() + name.slice(1)
|
|
})
|
|
</script>
|