docs: replace import of custom 'ListItem' component with inline html …

…in Navigation Menu (#642)
unovue · Jul 2, 2024 · f037783 · f037783
1 parent 0f1befa
commit f037783
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 104 deletions.
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
@@ -752,13 +752,6 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/NavigationMenuDemo.vue"],
     },
-    "NavigationMenuDemoItem": {
-      name: "NavigationMenuDemoItem",
-      type: "components:example",
-      registryDependencies: ["utils","navigation-menu"],
-      component: () => import("../src/lib/registry/default/example/NavigationMenuDemoItem.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NavigationMenuDemoItem.vue"],
-    },
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
       type: "components:example",
@@ -2202,13 +2195,6 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/NavigationMenuDemo.vue"],
     },
-    "NavigationMenuDemoItem": {
-      name: "NavigationMenuDemoItem",
-      type: "components:example",
-      registryDependencies: ["utils","navigation-menu"],
-      component: () => import("../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue"],
-    },
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
       type: "components:example",

diff --git a/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue b/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ListItem from './NavigationMenuDemoItem.vue'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -73,30 +72,66 @@ const components: { title: string, href: string, description: string }[] = [
                 </a>
               </NavigationMenuLink>
             </li>
-            <ListItem href="/docs" title="Introduction">
-              Re-usable components built using Radix UI and Tailwind CSS.
-            </ListItem>
-            <ListItem href="/docs/installation" title="Installation">
-              How to install dependencies and structure your app.
-            </ListItem>
-            <ListItem href="/docs/primitives/typography" title="Typography">
-              Styles for headings, paragraphs, lists...etc
-            </ListItem>
+
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Introduction</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Re-usable components built using Radix UI and Tailwind CSS.
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/installation"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Installation</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    How to install dependencies and structure your app.
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/primitives/typography"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Typography</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Styles for headings, paragraphs, lists...etc
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>
       <NavigationMenuItem>
         <NavigationMenuTrigger>Components</NavigationMenuTrigger>
         <NavigationMenuContent>
           <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-            <ListItem
-              v-for="component in components"
-              :key="component.title"
-              :title="component.title"
-              :href="component.href"
-            >
-              {{ component.description }}
-            </ListItem>
+            <li v-for="component in components" :key="component.title">
+              <NavigationMenuLink as-child>
+                <a
+                  :href="component.href"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">{{ component.title }}</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    {{ component.description }}
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>

diff --git a/apps/www/src/lib/registry/default/example/NavigationMenuDemoItem.vue b/apps/www/src/lib/registry/default/example/NavigationMenuDemoItem.vue
diff --git a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ListItem from './NavigationMenuDemoItem.vue'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -73,30 +72,65 @@ const components: { title: string, href: string, description: string }[] = [
                 </a>
               </NavigationMenuLink>
             </li>
-            <ListItem href="/docs" title="Introduction">
-              Re-usable components built using Radix UI and Tailwind CSS.
-            </ListItem>
-            <ListItem href="/docs/installation" title="Installation">
-              How to install dependencies and structure your app.
-            </ListItem>
-            <ListItem href="/docs/primitives/typography" title="Typography">
-              Styles for headings, paragraphs, lists...etc
-            </ListItem>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Introduction</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Re-usable components built using Radix UI and Tailwind CSS.
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/installation"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Installation</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    How to install dependencies and structure your app.
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/primitives/typography"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Typography</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Styles for headings, paragraphs, lists...etc
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>
       <NavigationMenuItem>
         <NavigationMenuTrigger>Components</NavigationMenuTrigger>
         <NavigationMenuContent>
           <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-            <ListItem
-              v-for="component in components"
-              :key="component.title"
-              :title="component.title"
-              :href="component.href"
-            >
-              {{ component.description }}
-            </ListItem>
+            <li v-for="component in components" :key="component.title">
+              <NavigationMenuLink as-child>
+                <a
+                  :href="component.href"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">{{ component.title }}</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    {{ component.description }}
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>

diff --git a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemoItem.vue b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemoItem.vue