docs: replace import of custom 'ListItem' component with inline html in Navigation Menu (#642)
This commit is contained in:
Yakir Reznik
GitHub
parent
0f1befad1f
commit
f03778304d
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
import ListItem from './NavigationMenuDemoItem.vue'
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
|
|
@ -73,15 +72,46 @@ 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>
|
||||
|
|
@ -89,14 +119,19 @@ const components: { title: string, href: string, description: string }[] = [
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
import {
|
||||
NavigationMenuLink,
|
||||
} from '@/lib/registry/default/ui/navigation-menu'
|
||||
|
||||
defineProps<{ title?: string, href?: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li>
|
||||
<NavigationMenuLink as-child>
|
||||
<a
|
||||
:href="href"
|
||||
:class="cn(
|
||||
'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',
|
||||
$attrs.class ?? '',
|
||||
)"
|
||||
>
|
||||
<div class="text-sm font-medium leading-none">{{ title }}</div>
|
||||
<p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||
<slot />
|
||||
</p>
|
||||
</a>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
</template>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
import ListItem from './NavigationMenuDemoItem.vue'
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
|
|
@ -73,15 +72,45 @@ 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>
|
||||
|
|
@ -89,14 +118,19 @@ const components: { title: string, href: string, description: string }[] = [
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
import {
|
||||
NavigationMenuLink,
|
||||
} from '@/lib/registry/new-york/ui/navigation-menu'
|
||||
|
||||
defineProps<{ title?: string, href?: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li>
|
||||
<NavigationMenuLink as-child>
|
||||
<a
|
||||
:href="href"
|
||||
:class="cn(
|
||||
'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',
|
||||
$attrs.class ?? '',
|
||||
)"
|
||||
>
|
||||
<div class="text-sm font-medium leading-none">{{ title }}</div>
|
||||
<p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||
<slot />
|
||||
</p>
|
||||
</a>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user