From 015c673e09608c33ead2196c290be2057175c3f4 Mon Sep 17 00:00:00 2001
From: Corentin THOMASSET <corentin.thomasset74@gmail.com>
Date: Tue, 31 Oct 2023 18:49:36 +0100
Subject: [PATCH] refactor(ui): better ui demo preview menu (#664)

---
 components.d.ts                |  5 -----
 src/ui/demo/demo-home.page.vue |  8 +++-----
 src/ui/demo/demo-wrapper.vue   |  3 ++-
 src/ui/demo/demo.routes.ts     | 14 +++++++-------
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 91f8fe08..669e1339 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -92,7 +92,6 @@ declare module '@vue/runtime-core' {
     IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
-    IconMdiFavoriteFilled: typeof import('~icons/mdi/favorite-filled')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
     IconMdiPause: typeof import('~icons/mdi/pause')['default']
     IconMdiPlay: typeof import('~icons/mdi/play')['default']
@@ -151,8 +150,6 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NP: typeof import('naive-ui')['NP']
-    NPageHeader: typeof import('naive-ui')['NPageHeader']
     NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSlider: typeof import('naive-ui')['NSlider']
@@ -160,7 +157,6 @@ declare module '@vue/runtime-core' {
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
     NTag: typeof import('naive-ui')['NTag']
-    NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import('naive-ui')['NUpload']
     NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
@@ -192,7 +188,6 @@ declare module '@vue/runtime-core' {
     'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
     ToolCard: typeof import('./src/components/ToolCard.vue')['default']
     UlidGenerator: typeof import('./src/tools/ulid-generator/ulid-generator.vue')['default']
-    Unnamed: typeof import('./src/ui/unnamed/unnamed.vue')['default']
     UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
     UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
     UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
diff --git a/src/ui/demo/demo-home.page.vue b/src/ui/demo/demo-home.page.vue
index b7c04e9d..29dd2ddf 100644
--- a/src/ui/demo/demo-home.page.vue
+++ b/src/ui/demo/demo-home.page.vue
@@ -4,10 +4,8 @@ import { demoRoutes } from './demo.routes';
 
 <template>
   <div grid grid-cols-5 gap-2>
-    <c-card v-for="{ name } of demoRoutes" :key="name" :title="String(name)">
-      <c-button :to="{ name }">
-        {{ name }}
-      </c-button>
-    </c-card>
+    <c-button v-for="{ name } of demoRoutes" :key="name" :to="{ name }">
+      {{ name }}
+    </c-button>
   </div>
 </template>
diff --git a/src/ui/demo/demo-wrapper.vue b/src/ui/demo/demo-wrapper.vue
index c4d36049..838fffd0 100644
--- a/src/ui/demo/demo-wrapper.vue
+++ b/src/ui/demo/demo-wrapper.vue
@@ -12,7 +12,7 @@ const componentName = computed(() => _.startCase(String(route.name).replace(/^c-
     <h1>c-lib components</h1>
 
     <div flex>
-      <div w-30 b-r b-gray b-op-10 b-r-solid pr-4>
+      <div w-200px b-r b-gray b-op-10 b-r-solid pr-4>
         <c-button
           v-for="{ name } of demoRoutes"
           :key="name"
@@ -20,6 +20,7 @@ const componentName = computed(() => _.startCase(String(route.name).replace(/^c-
           :to="{ name }"
           w-full
           important:justify-start
+          important:text-left
           :type="route.name === name ? 'primary' : 'default'"
         >
           {{ name }}
diff --git a/src/ui/demo/demo.routes.ts b/src/ui/demo/demo.routes.ts
index ff514fcb..125ed24d 100644
--- a/src/ui/demo/demo.routes.ts
+++ b/src/ui/demo/demo.routes.ts
@@ -1,16 +1,16 @@
 import type { RouteRecordRaw } from 'vue-router';
 import DemoHome from './demo-home.page.vue';
 
-const demoPages = import.meta.glob('../*/*.demo.vue');
+const demoPages = import.meta.glob('../*/*.demo.vue', { eager: true });
 
-export const demoRoutes = Object.keys(demoPages).map((path) => {
-  const [, , fileName] = path.split('/');
-  const name = fileName.split('.').shift();
+export const demoRoutes = Object.keys(demoPages).map((demoComponentPath) => {
+  const [, , fileName] = demoComponentPath.split('/');
+  const demoComponentName = fileName.split('.').shift();
 
   return {
-    path: name,
-    name,
-    component: () => import(/* @vite-ignore */ path),
+    path: demoComponentName,
+    name: demoComponentName,
+    component: () => import(/* @vite-ignore */ demoComponentPath),
   } as RouteRecordRaw;
 });