refactor(ui): better ui demo preview menu (#664)

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']

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 v-for="{ name } of demoRoutes" :key="name" :to="{ name }">
-      <c-button :to="{ name }">
+      {{ name }}
-        {{ name }}
+    </c-button>
-      </c-button>
-    </c-card>
   </div>
 </template>

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

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) => {
+export const demoRoutes = Object.keys(demoPages).map((demoComponentPath) => {
-  const [, , fileName] = path.split('/');
+  const [, , fileName] = demoComponentPath.split('/');
-  const name = fileName.split('.').shift();
+  const demoComponentName = fileName.split('.').shift();
 
   return {
-    path: name,
+    path: demoComponentName,
-    name,
+    name: demoComponentName,
-    component: () => import(/* @vite-ignore */ path),
+    component: () => import(/* @vite-ignore */ demoComponentPath),
   } as RouteRecordRaw;
 });