docs: update docs build, some content
This commit is contained in:
zernonia
parent
cc49dd59bf
commit
0456a5ba0b
|
|
@ -1,10 +1,9 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useToggle } from '@vueuse/core'
|
import { useMagicKeys, useToggle } from '@vueuse/core'
|
||||||
import { onMounted, watch } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
import { Content, useData, useRoute, useRouter } from 'vitepress'
|
import { Content, useData, useRoute, useRouter } from 'vitepress'
|
||||||
import { onMounted, onUnmounted, ref } from 'vue'
|
|
||||||
import { SearchIcon } from 'lucide-vue-next'
|
import { SearchIcon } from 'lucide-vue-next'
|
||||||
import { docsConfig } from '../config/docs'
|
import { type NavItem, docsConfig } from '../config/docs'
|
||||||
import Logo from '../components/Logo.vue'
|
import Logo from '../components/Logo.vue'
|
||||||
import MobileNav from '../components/MobileNav.vue'
|
import MobileNav from '../components/MobileNav.vue'
|
||||||
|
|
||||||
|
|
@ -27,7 +26,6 @@ const { radius, theme } = useConfigStore()
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
document.documentElement.style.setProperty('--radius', `${radius.value}rem`)
|
document.documentElement.style.setProperty('--radius', `${radius.value}rem`)
|
||||||
document.documentElement.classList.add(`theme-${theme.value}`)
|
document.documentElement.classList.add(`theme-${theme.value}`)
|
||||||
window.addEventListener('keydown', onKeyDown)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const { frontmatter, isDark } = useData()
|
const { frontmatter, isDark } = useData()
|
||||||
|
|
@ -49,25 +47,21 @@ const links = [
|
||||||
// },
|
// },
|
||||||
]
|
]
|
||||||
|
|
||||||
const isOpen = ref<boolean>(false)
|
const isOpen = ref(false)
|
||||||
|
const { Meta_K, Ctrl_K } = useMagicKeys()
|
||||||
|
|
||||||
function onKeyDown(event: KeyboardEvent) {
|
watch([Meta_K, Ctrl_K], (v) => {
|
||||||
if (isOpen.value)
|
if (v[0] || v[1])
|
||||||
return
|
|
||||||
|
|
||||||
if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
|
|
||||||
event.preventDefault()
|
|
||||||
isOpen.value = true
|
isOpen.value = true
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
window.removeEventListener('keydown', onKeyDown)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
function openInNewTab(url: string | undefined) {
|
function handleSelectLink(item: NavItem) {
|
||||||
const win = window.open(url, '_blank')
|
if (item.external)
|
||||||
win?.focus()
|
window.open(item.href, '_blank')
|
||||||
|
else
|
||||||
|
$router.go(item.href)
|
||||||
|
|
||||||
|
isOpen.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(() => $route.path, (n) => {
|
watch(() => $route.path, (n) => {
|
||||||
|
|
@ -218,7 +212,9 @@ watch(() => $route.path, (n) => {
|
||||||
<CommandEmpty>
|
<CommandEmpty>
|
||||||
No results found.
|
No results found.
|
||||||
</CommandEmpty>
|
</CommandEmpty>
|
||||||
<CommandList>
|
<CommandList
|
||||||
|
@escape-key-down=" isOpen = false"
|
||||||
|
>
|
||||||
<CommandGroup heading="Links">
|
<CommandGroup heading="Links">
|
||||||
<CommandItem
|
<CommandItem
|
||||||
v-for="item in docsConfig.mainNav"
|
v-for="item in docsConfig.mainNav"
|
||||||
|
|
@ -226,15 +222,7 @@ watch(() => $route.path, (n) => {
|
||||||
:heading="item.title"
|
:heading="item.title"
|
||||||
:value="item.title"
|
:value="item.title"
|
||||||
class="py-3"
|
class="py-3"
|
||||||
@select="() => {
|
@select="handleSelectLink(item)"
|
||||||
if (item.external) {
|
|
||||||
openInNewTab(item.href);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$router.go(`${item.href}.html`);
|
|
||||||
}
|
|
||||||
isOpen = false;
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<File class="mr-2 h-5 w-5" />
|
<File class="mr-2 h-5 w-5" />
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
|
|
@ -243,12 +231,15 @@ watch(() => $route.path, (n) => {
|
||||||
<CommandSeparator />
|
<CommandSeparator />
|
||||||
<CommandGroup v-for="item in docsConfig.sidebarNav" :key="item.title" :heading="item.title">
|
<CommandGroup v-for="item in docsConfig.sidebarNav" :key="item.title" :heading="item.title">
|
||||||
<CommandItem
|
<CommandItem
|
||||||
v-for="subItem in item.items" :key="subItem.title" :heading="subItem.title" :value="subItem.title" class="py-3" @select="() => {
|
v-for="subItem in item.items"
|
||||||
$router.go(`${subItem.href}.html`)
|
:key="subItem.title"
|
||||||
isOpen = false
|
:heading="subItem.title"
|
||||||
}"
|
:value="subItem.title"
|
||||||
|
class="py-3"
|
||||||
|
@select="
|
||||||
|
handleSelectLink(subItem)"
|
||||||
>
|
>
|
||||||
<Circle class="mr-2 h-5 w-5" />
|
<Circle class="mr-2 h-4 w-4" />
|
||||||
<span>{{ subItem.title }}</span>
|
<span>{{ subItem.title }}</span>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,6 @@ primitive: https://www.radix-vue.com/components/accordion.html
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
<Steps>
|
<Steps>
|
||||||
|
|
||||||
|
|
@ -51,131 +49,6 @@ module.exports = {
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'radix-vue'
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
|
|
||||||
const accordionItems = [
|
|
||||||
{
|
|
||||||
value: 'item-1',
|
|
||||||
title: 'Is it accessible?',
|
|
||||||
content: 'Yes. It adheres to the WAI-ARIA design pattern.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'item-2',
|
|
||||||
title: 'Is it unstyled?',
|
|
||||||
content: 'Yes. It\'s unstyled by default, giving you freedom over the look and feel.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'item-3',
|
|
||||||
title: 'Can it be animated?',
|
|
||||||
content: 'Yes! You can use the transition prop to configure the animation.',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<AccordionRoot
|
|
||||||
class="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
|
|
||||||
default-value="'item-1'"
|
|
||||||
type="single"
|
|
||||||
:collapsible="true"
|
|
||||||
>
|
|
||||||
<template v-for="item in accordionItems" :key="item.value">
|
|
||||||
<AccordionItem class="accordion-item" :value="item.value">
|
|
||||||
<AccordionHeader class="flex">
|
|
||||||
<AccordionTrigger class="accordion-trigger group">
|
|
||||||
<span>{{ item.title }}</span>
|
|
||||||
<Icon
|
|
||||||
icon="radix-icons:chevron-down"
|
|
||||||
class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
|
|
||||||
aria-hidden
|
|
||||||
/>
|
|
||||||
</AccordionTrigger>
|
|
||||||
</AccordionHeader>
|
|
||||||
<AccordionContent class="accordion-content">
|
|
||||||
<div class="px-5 py-4">
|
|
||||||
{{ item.content }}
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
</template>
|
|
||||||
</AccordionRoot>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.accordion-item {
|
|
||||||
@apply focus-within:shadow-mauve12 mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px];
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion-trigger {
|
|
||||||
@apply text-grass11 shadow-mauve6 hover:bg-mauve2 flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none shadow-[0_1px_0] outline-none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion-content {
|
|
||||||
@apply text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px];
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following animations to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...mauve,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
slideDown: {
|
|
||||||
from: { height: 0 },
|
|
||||||
to: { height: 'var(--radix-accordion-content-height)' },
|
|
||||||
},
|
|
||||||
slideUp: {
|
|
||||||
from: { height: 'var(--radix-accordion-content-height)' },
|
|
||||||
to: { height: 0 },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
|
||||||
slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
@ -185,26 +58,13 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Accordion type="single" collapsible class="w-full">
|
<Accordion type="single" collapsible>
|
||||||
<AccordionItem value="item-1">
|
<AccordionItem value="item-1">
|
||||||
<AccordionTrigger>Is it accessible?</AccordionTrigger>
|
<AccordionTrigger>Is it accessible?</AccordionTrigger>
|
||||||
<AccordionContent>
|
<AccordionContent>
|
||||||
Yes. It adheres to the WAI-ARIA design pattern.
|
Yes. It adheres to the WAI-ARIA design pattern.
|
||||||
</AccordionContent>
|
</AccordionContent>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
<AccordionItem value="item-2">
|
|
||||||
<AccordionTrigger>Is it styled?</AccordionTrigger>
|
|
||||||
<AccordionContent>
|
|
||||||
Yes. It comes with default styles that matches the other
|
|
||||||
components' aesthetic.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
<AccordionItem value="item-3">
|
|
||||||
<AccordionTrigger>Is it animated?</AccordionTrigger>
|
|
||||||
<AccordionContent>
|
|
||||||
Yes. It's animated by default, but you can disable it if you prefer.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
</Accordion>
|
</Accordion>
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -10,134 +10,11 @@ primitive: https://www.radix-vue.com/components/alert-dialog.html
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add alert-dialog
|
npx shadcn-vue@latest add alert-dialog
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependency:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import {
|
|
||||||
AlertDialogAction,
|
|
||||||
AlertDialogCancel,
|
|
||||||
AlertDialogContent,
|
|
||||||
AlertDialogDescription,
|
|
||||||
AlertDialogOverlay,
|
|
||||||
AlertDialogPortal,
|
|
||||||
AlertDialogRoot,
|
|
||||||
AlertDialogTitle,
|
|
||||||
AlertDialogTrigger,
|
|
||||||
} from 'radix-vue'
|
|
||||||
|
|
||||||
function handleAction() {
|
|
||||||
alert('clicked action button!')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<AlertDialogRoot>
|
|
||||||
<AlertDialogTrigger
|
|
||||||
class="bg-white text-grass11 font-semibold hover:bg-white/90 shadow-sm inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] leading-none outline-none focus:shadow-[0_0_0_2px] focus:shadow-black transition-all"
|
|
||||||
>
|
|
||||||
Delete account
|
|
||||||
</AlertDialogTrigger>
|
|
||||||
<AlertDialogPortal>
|
|
||||||
<AlertDialogOverlay class="alert-dialog-overlay" />
|
|
||||||
<AlertDialogContent
|
|
||||||
class="alert-dialog-content"
|
|
||||||
>
|
|
||||||
<AlertDialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
|
|
||||||
Are you absolutely sure?
|
|
||||||
</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription class="text-mauve11 mt-4 mb-5 text-[15px] leading-normal">
|
|
||||||
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
|
|
||||||
</AlertDialogDescription>
|
|
||||||
<div class="flex justify-end gap-[25px]">
|
|
||||||
<AlertDialogCancel
|
|
||||||
class="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</AlertDialogCancel>
|
|
||||||
<AlertDialogAction
|
|
||||||
class="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
@click="handleAction"
|
|
||||||
>
|
|
||||||
Yes, delete account
|
|
||||||
</AlertDialogAction>
|
|
||||||
</div>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialogPortal>
|
|
||||||
</AlertDialogRoot>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.alert-dialog-overlay {
|
|
||||||
@apply bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0 z-20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-dialog-content {
|
|
||||||
@apply z-20 text-[15px] data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following animations to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { mauve, green, grass, blackA } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...mauve,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...blackA,
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
overlayShow: {
|
|
||||||
from: { opacity: 0 },
|
|
||||||
to: { opacity: 1 },
|
|
||||||
},
|
|
||||||
contentShow: {
|
|
||||||
from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
|
|
||||||
to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
@ -158,15 +35,13 @@ import {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AlertDialog>
|
<AlertDialog>
|
||||||
<AlertDialogTrigger>
|
<AlertDialogTrigger>Open</AlertDialogTrigger>
|
||||||
Open
|
|
||||||
</AlertDialogTrigger>
|
|
||||||
<AlertDialogContent>
|
<AlertDialogContent>
|
||||||
<AlertDialogHeader>
|
<AlertDialogHeader>
|
||||||
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||||
<AlertDialogDescription>
|
<AlertDialogDescription>
|
||||||
This action cannot be undone. This will permanently delete your
|
This action cannot be undone. This will permanently delete your account
|
||||||
account and remove your data from our servers.
|
and remove your data from our servers.
|
||||||
</AlertDialogDescription>
|
</AlertDialogDescription>
|
||||||
</AlertDialogHeader>
|
</AlertDialogHeader>
|
||||||
<AlertDialogFooter>
|
<AlertDialogFooter>
|
||||||
|
|
|
||||||
|
|
@ -8,19 +8,10 @@ description: Displays a callout for user attention.
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add alert
|
npx shadcn-vue@latest add alert
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
#### Coming soon...
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,44 +30,7 @@ npm install radix-vue
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
### Copy and paste the following code into your project:
|
||||||
|
|
||||||
```vue
|
<<< @/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
|
||||||
<script setup lang="ts">
|
|
||||||
import { AspectRatio } from 'radix-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="shadow-blackA7 w-full sm:w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
|
|
||||||
<AspectRatio :ratio="16 / 9">
|
|
||||||
<img
|
|
||||||
class="h-full w-full object-cover"
|
|
||||||
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
|
|
||||||
alt="Landscape photograph by Tobias Tullius"
|
|
||||||
>
|
|
||||||
</AspectRatio>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
||||||
|
|
@ -84,7 +47,7 @@ import { AspectRatio } from '@/components/ui/aspect-ratio'
|
||||||
<template>
|
<template>
|
||||||
<div class="w-[450px]">
|
<div class="w-[450px]">
|
||||||
<AspectRatio :ratio="16 / 9">
|
<AspectRatio :ratio="16 / 9">
|
||||||
<img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80">
|
<img src="..." alt="Image" class="rounded-md object-cover">
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -11,94 +11,10 @@ primitive: https://www.radix-vue.com/components/avatar.html
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add avatar
|
npx shadcn-vue@latest add avatar
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependency:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { AvatarFallback, AvatarImage, AvatarRoot } from 'radix-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex gap-5">
|
|
||||||
<AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
|
|
||||||
<AvatarImage
|
|
||||||
class="h-full w-full rounded-[inherit] object-cover"
|
|
||||||
src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
|
|
||||||
alt="Colm Tuite"
|
|
||||||
/>
|
|
||||||
<AvatarFallback
|
|
||||||
class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
|
|
||||||
:delay-ms="600"
|
|
||||||
>
|
|
||||||
CT
|
|
||||||
</AvatarFallback>
|
|
||||||
</AvatarRoot>
|
|
||||||
<AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
|
|
||||||
<AvatarImage
|
|
||||||
class="h-full w-full rounded-[inherit] object-cover"
|
|
||||||
src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
|
|
||||||
alt="Pedro Duarte"
|
|
||||||
/>
|
|
||||||
<AvatarFallback
|
|
||||||
class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
|
|
||||||
:delay-ms="600"
|
|
||||||
>
|
|
||||||
JD
|
|
||||||
</AvatarFallback>
|
|
||||||
</AvatarRoot>
|
|
||||||
<AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
|
|
||||||
<AvatarFallback class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium">
|
|
||||||
PD
|
|
||||||
</AvatarFallback>
|
|
||||||
</AvatarRoot>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, grass } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...grass,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
@ -109,7 +25,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Avatar>
|
<Avatar>
|
||||||
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
|
<AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
|
||||||
<AvatarFallback>CN</AvatarFallback>
|
<AvatarFallback>CN</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -24,16 +24,36 @@ npx shadcn-vue@latest add badge
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { VariantProps } from 'class-variance-authority'
|
import { type VariantProps, cva } from 'class-variance-authority'
|
||||||
import { badgeVariants } from '.'
|
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
defineProps<Props>()
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
|
||||||
|
secondary:
|
||||||
|
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
|
destructive:
|
||||||
|
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
|
||||||
|
outline: 'text-foreground',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
|
interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
variant?: BadgeVariantProps['variant']
|
variant?: BadgeVariantProps['variant']
|
||||||
}
|
}
|
||||||
defineProps<Props>()
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -24,15 +24,45 @@ npx shadcn-vue@latest add button
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { buttonVariants } from '.'
|
import { cva } from 'class-variance-authority'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||||
|
destructive:
|
||||||
|
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||||
|
outline:
|
||||||
|
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
||||||
|
secondary:
|
||||||
|
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||||
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 'h-10 px-4 py-2',
|
||||||
|
sm: 'h-9 rounded-md px-3',
|
||||||
|
lg: 'h-11 rounded-md px-8',
|
||||||
|
icon: 'h-10 w-10',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
size: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
|
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
|
||||||
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
|
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
|
||||||
as?: string
|
as?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line vue/define-macros-order
|
||||||
withDefaults(defineProps<Props>(), {
|
withDefaults(defineProps<Props>(), {
|
||||||
as: 'button',
|
as: 'button',
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -32,118 +32,8 @@ npm install v-calendar
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
### Copy and paste the following code into your project
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { useVModel } from '@vueuse/core'
|
|
||||||
import type { Calendar } from 'v-calendar'
|
|
||||||
import { DatePicker } from 'v-calendar'
|
|
||||||
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
|
||||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
|
||||||
import { buttonVariants } from '../button'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps< {
|
<<< @/lib/registry/default/ui/calendar/Calendar.vue
|
||||||
modelValue?: string | number | Date | Partial<{
|
|
||||||
start: Date
|
|
||||||
end: Date
|
|
||||||
}>
|
|
||||||
modelModifiers?: object
|
|
||||||
columns?: number
|
|
||||||
type?: 'single' | 'range'
|
|
||||||
}>(), {
|
|
||||||
type: 'single',
|
|
||||||
columns: 1,
|
|
||||||
})
|
|
||||||
const emits = defineEmits<{
|
|
||||||
(e: 'update:modelValue', payload: typeof props.modelValue): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const modelValue = useVModel(props, 'modelValue', emits, {
|
|
||||||
passive: true,
|
|
||||||
})
|
|
||||||
|
|
||||||
const datePicker = ref<InstanceType<typeof DatePicker>>()
|
|
||||||
// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
|
|
||||||
const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
|
|
||||||
|
|
||||||
function handleNav(direction: 'prev' | 'next') {
|
|
||||||
if (!calendarRef.value)
|
|
||||||
return
|
|
||||||
|
|
||||||
if (direction === 'prev')
|
|
||||||
calendarRef.value.movePrev()
|
|
||||||
else calendarRef.value.moveNext()
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await nextTick()
|
|
||||||
await nextTick()
|
|
||||||
if (modelValue.value instanceof Date && calendarRef.value)
|
|
||||||
calendarRef.value.focusDate(modelValue.value)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="relative">
|
|
||||||
<div class="absolute top-3 flex justify-between w-full px-4">
|
|
||||||
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
|
|
||||||
<ChevronLeft class="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
|
|
||||||
<ChevronRight class="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DatePicker ref="datePicker" v-model="modelValue" :model-modifiers="modelModifiers" class="calendar" trim-weeks :transition="'none'" :columns="columns" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="postcss">
|
|
||||||
.calendar {
|
|
||||||
@apply p-3 text-center;
|
|
||||||
}
|
|
||||||
.calendar .vc-pane-layout {
|
|
||||||
@apply grid gap-4;
|
|
||||||
}
|
|
||||||
.calendar .vc-title {
|
|
||||||
@apply text-sm font-medium pointer-events-none;
|
|
||||||
}
|
|
||||||
.calendar .vc-pane-header-wrapper {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
.calendar .vc-weeks {
|
|
||||||
@apply mt-4;
|
|
||||||
}
|
|
||||||
.calendar .vc-weekdays {
|
|
||||||
@apply flex;
|
|
||||||
}
|
|
||||||
.calendar .vc-weekday {
|
|
||||||
@apply text-muted-foreground rounded-md w-9 font-normal text-[0.8rem];
|
|
||||||
}
|
|
||||||
.calendar .vc-weeks {
|
|
||||||
@apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
|
|
||||||
}
|
|
||||||
.calendar .vc-day:has(.vc-highlights) {
|
|
||||||
@apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;
|
|
||||||
}
|
|
||||||
.calendar .vc-day-content {
|
|
||||||
@apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
|
|
||||||
}
|
|
||||||
.calendar .vc-day-content:not(.vc-highlight-content-light) {
|
|
||||||
@apply rounded-md;
|
|
||||||
}
|
|
||||||
.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
|
|
||||||
.calendar .vc-disabled {
|
|
||||||
@apply text-muted-foreground opacity-50;
|
|
||||||
}
|
|
||||||
.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
|
|
||||||
@apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
|
|
||||||
}
|
|
||||||
.calendar .vc-highlight-content-light {
|
|
||||||
@apply bg-accent text-accent-foreground;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
|
||||||
|
|
@ -8,19 +8,11 @@ description: Displays a card with header, content, and footer.
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add card
|
npx shadcn-vue@latest add card
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
#### Coming soon...
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,80 +11,10 @@ primitive: https://www.radix-vue.com/components/checkbox.html
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add checkbox
|
npx shadcn-vue@latest add checkbox
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
|
|
||||||
const checkboxOne = ref(true)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex flex-col gap-2.5">
|
|
||||||
<label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
|
|
||||||
<CheckboxRoot
|
|
||||||
v-model="checkboxOne"
|
|
||||||
class="shadow-blackA7 hover:bg-green3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
|
|
||||||
>
|
|
||||||
<CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:check" class="h-3.5 w-3.5 text-grass11" />
|
|
||||||
</CheckboxIndicator>
|
|
||||||
</CheckboxRoot>
|
|
||||||
<span class="select-none text-white">Accept terms and conditions.</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following to your tailwind.config.js file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,93 +10,10 @@ primitive: https://www.radix-vue.com/components/collapsible.html
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add collapsible
|
npx shadcn-vue@latest add collapsible
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
|
|
||||||
const rootOpen = ref(false)
|
|
||||||
const rootDisabled = ref(false)
|
|
||||||
const open = ref(false)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<CollapsibleRoot v-model:open="rootOpen" class="w-[300px]" :disabled="rootDisabled">
|
|
||||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
|
||||||
<span class="text-white text-[15px] leading-[25px]"> @peduarte starred 3 repos </span>
|
|
||||||
<CollapsibleTrigger
|
|
||||||
class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-green3 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
|
|
||||||
>
|
|
||||||
<Icon v-if="rootOpen" icon="radix-icons:cross-2" class="h-3.5 w-3.5" />
|
|
||||||
<Icon v-else icon="radix-icons:row-spacing" class="h-3.5 w-3.5" />
|
|
||||||
</CollapsibleTrigger>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
|
|
||||||
<span class="text-grass11 text-[15px] leading-[25px]">@radix-vue/radix-vue</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CollapsibleContent>
|
|
||||||
<div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
|
|
||||||
<span class="text-grass11 text-[15px] leading-[25px]">@vuejs/core</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
|
|
||||||
<span class="text-grass11 text-[15px] leading-[25px]">@radix-ui/primitives</span>
|
|
||||||
</div>
|
|
||||||
</CollapsibleContent>
|
|
||||||
</CollapsibleRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following animations to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,123 +12,6 @@ The Combobox is built using a composition of the `<Popover />` and the `<Command
|
||||||
|
|
||||||
See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
|
See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
|
||||||
|
|
||||||
<TabPreview name="Manual">
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from 'radix-vue'
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
|
|
||||||
const v = ref('')
|
|
||||||
const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
|
|
||||||
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<ComboboxRoot v-model="v" class="relative">
|
|
||||||
<ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
|
|
||||||
<ComboboxInput class="bg-transparent outline-none text-grass11 h-full selection:bg-grass5 placeholder-mauve8" placeholder="Placeholder..." />
|
|
||||||
<ComboboxTrigger>
|
|
||||||
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
|
|
||||||
</ComboboxTrigger>
|
|
||||||
</ComboboxHeader>
|
|
||||||
|
|
||||||
<ComboboxContent class="absolute z-10 w-full mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
|
|
||||||
<ComboboxViewport class="p-[5px]">
|
|
||||||
<ComboboxEmpty class="text-mauve8 text-xs font-medium text-center py-2" />
|
|
||||||
|
|
||||||
<ComboboxGroup>
|
|
||||||
<ComboboxLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
|
|
||||||
Fruits
|
|
||||||
</ComboboxLabel>
|
|
||||||
|
|
||||||
<ComboboxItem
|
|
||||||
v-for="(option, index) in options" :key="index"
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
|
|
||||||
:value="option"
|
|
||||||
>
|
|
||||||
<ComboboxItemIndicator
|
|
||||||
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:check" />
|
|
||||||
</ComboboxItemIndicator>
|
|
||||||
<span>
|
|
||||||
{{ option }}
|
|
||||||
</span>
|
|
||||||
</ComboboxItem>
|
|
||||||
<ComboboxSeparator class="h-[1px] bg-grass6 m-[5px]" />
|
|
||||||
</ComboboxGroup>
|
|
||||||
|
|
||||||
<ComboboxGroup>
|
|
||||||
<ComboboxLabel
|
|
||||||
class="px-[25px] text-xs leading-[25px] text-mauve11"
|
|
||||||
>
|
|
||||||
Vegetables
|
|
||||||
</ComboboxLabel>
|
|
||||||
<ComboboxItem
|
|
||||||
v-for="(option, index) in vegetables" :key="index"
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
|
|
||||||
:value="option"
|
|
||||||
>
|
|
||||||
<ComboboxItemIndicator
|
|
||||||
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:check" />
|
|
||||||
</ComboboxItemIndicator>
|
|
||||||
<span>
|
|
||||||
{{ option }}
|
|
||||||
</span>
|
|
||||||
</ComboboxItem>
|
|
||||||
</ComboboxGroup>
|
|
||||||
</ComboboxViewport>
|
|
||||||
</ComboboxContent>
|
|
||||||
</ComboboxRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following animations to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
|
|
|
||||||
|
|
@ -12,20 +12,10 @@ primitive: https://www.radix-vue.com/components/popover.html
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add command
|
npx shadcn-vue@latest add command
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
#### Coming soon...
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
|
|
|
||||||
|
|
@ -10,363 +10,9 @@ primitive: https://www.radix-vue.com/components/context-menu.html
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add context-menu
|
npx shadcn-vue@latest add context-menu
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
ContextMenuArrow,
|
|
||||||
ContextMenuCheckboxItem,
|
|
||||||
ContextMenuContent,
|
|
||||||
ContextMenuItem,
|
|
||||||
ContextMenuItemIndicator,
|
|
||||||
ContextMenuLabel,
|
|
||||||
ContextMenuPortal,
|
|
||||||
ContextMenuRadioGroup,
|
|
||||||
ContextMenuRadioItem,
|
|
||||||
ContextMenuRoot,
|
|
||||||
ContextMenuSeparator,
|
|
||||||
ContextMenuSub,
|
|
||||||
ContextMenuSubContent,
|
|
||||||
ContextMenuSubTrigger,
|
|
||||||
ContextMenuTrigger,
|
|
||||||
} from 'radix-vue'
|
|
||||||
|
|
||||||
const checkboxOne = ref(false)
|
|
||||||
const checkboxTwo = ref(false)
|
|
||||||
const person = ref('pedro')
|
|
||||||
|
|
||||||
function handleClick() {
|
|
||||||
alert('hello!')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<ContextMenuRoot>
|
|
||||||
<ContextMenuTrigger
|
|
||||||
as-child
|
|
||||||
class="block border-2 border-white border-dashed text-white rounded text-[15px] select-none py-[45px] w-[300px] text-center"
|
|
||||||
>
|
|
||||||
<span> Right click here. </span>
|
|
||||||
</ContextMenuTrigger>
|
|
||||||
<ContextMenuPortal>
|
|
||||||
<ContextMenuContent
|
|
||||||
class="min-w-[220px] bg-white outline-none rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="5"
|
|
||||||
>
|
|
||||||
<ContextMenuItem
|
|
||||||
value="New Tab"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
@click="handleClick"
|
|
||||||
>
|
|
||||||
New Tab <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+T
|
|
||||||
</div>
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuSub>
|
|
||||||
<ContextMenuSubTrigger
|
|
||||||
value="more toolsz"
|
|
||||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
|
||||||
>
|
|
||||||
More Tools <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:chevron-right" />
|
|
||||||
</div>
|
|
||||||
</ContextMenuSubTrigger>
|
|
||||||
<ContextMenuPortal>
|
|
||||||
<ContextMenuSubContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="2" :align-offset="-5"
|
|
||||||
>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Save Page As… <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+S
|
|
||||||
</div>
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Create Shortcut…
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Name Window…
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Developer Tools
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuArrow class="fill-white" />
|
|
||||||
</ContextMenuSubContent>
|
|
||||||
</ContextMenuPortal>
|
|
||||||
</ContextMenuSub>
|
|
||||||
<ContextMenuItem
|
|
||||||
value="New Window"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
New Window <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+N
|
|
||||||
</div>
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuItem
|
|
||||||
value="New Private Window"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
New Private Window <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⇧+⌘+N
|
|
||||||
</div>
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuSub>
|
|
||||||
<ContextMenuSubTrigger
|
|
||||||
value="more tools"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
|
||||||
>
|
|
||||||
More Tools <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:chevron-right" />
|
|
||||||
</div>
|
|
||||||
</ContextMenuSubTrigger>
|
|
||||||
<ContextMenuPortal>
|
|
||||||
<ContextMenuSubContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="2" :align-offset="-5"
|
|
||||||
>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Save Page As… <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+S
|
|
||||||
</div>
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Create Shortcut…
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Name Window…
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Developer Tools
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuSub>
|
|
||||||
<ContextMenuSubTrigger
|
|
||||||
value="more toolsz"
|
|
||||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
|
||||||
>
|
|
||||||
More Tools <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:chevron-right" />
|
|
||||||
</div>
|
|
||||||
</ContextMenuSubTrigger>
|
|
||||||
<ContextMenuPortal>
|
|
||||||
<ContextMenuSubContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="2" :align-offset="-5"
|
|
||||||
>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Save Page As… <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+S
|
|
||||||
</div>
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Create Shortcut…
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Name Window…
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Developer Tools
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuSub>
|
|
||||||
<ContextMenuSubTrigger
|
|
||||||
value="more toolsz"
|
|
||||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
|
||||||
>
|
|
||||||
More Tools <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:chevron-right" />
|
|
||||||
</div>
|
|
||||||
</ContextMenuSubTrigger>
|
|
||||||
<ContextMenuPortal>
|
|
||||||
<ContextMenuSubContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="2" :align-offset="-5"
|
|
||||||
>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Save Page As… <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+S
|
|
||||||
</div>
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Create Shortcut…
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Name Window…
|
|
||||||
</ContextMenuItem>
|
|
||||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Developer Tools
|
|
||||||
</ContextMenuItem>
|
|
||||||
</ContextMenuSubContent>
|
|
||||||
</ContextMenuPortal>
|
|
||||||
</ContextMenuSub>
|
|
||||||
</ContextMenuSubContent>
|
|
||||||
</ContextMenuPortal>
|
|
||||||
</ContextMenuSub>
|
|
||||||
<ContextMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Developer Tools
|
|
||||||
</ContextMenuItem>
|
|
||||||
</ContextMenuSubContent>
|
|
||||||
</ContextMenuPortal>
|
|
||||||
</ContextMenuSub>
|
|
||||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<ContextMenuCheckboxItem
|
|
||||||
v-model="checkboxOne"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
<ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:check" />
|
|
||||||
</ContextMenuItemIndicator> Show Bookmarks <div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+B
|
|
||||||
</div>
|
|
||||||
</ContextMenuCheckboxItem>
|
|
||||||
<ContextMenuCheckboxItem
|
|
||||||
v-model="checkboxTwo"
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
<ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:check" />
|
|
||||||
</ContextMenuItemIndicator> Show Full URLs
|
|
||||||
</ContextMenuCheckboxItem>
|
|
||||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<ContextMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve11">
|
|
||||||
People
|
|
||||||
</ContextMenuLabel>
|
|
||||||
<ContextMenuRadioGroup v-model="person">
|
|
||||||
<ContextMenuRadioItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
value="pedro"
|
|
||||||
>
|
|
||||||
<ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:dot-filled" />
|
|
||||||
</ContextMenuItemIndicator> Pedro Duarte
|
|
||||||
</ContextMenuRadioItem>
|
|
||||||
<ContextMenuRadioItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
value="colm"
|
|
||||||
>
|
|
||||||
<ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:dot-filled" />
|
|
||||||
</ContextMenuItemIndicator> Colm Tuite
|
|
||||||
</ContextMenuRadioItem>
|
|
||||||
</ContextMenuRadioGroup>
|
|
||||||
</ContextMenuContent>
|
|
||||||
</ContextMenuPortal>
|
|
||||||
</ContextMenuRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js` file
|
|
||||||
|
|
||||||
Add the following to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,150 +8,10 @@ primitive: https://www.radix-vue.com/components/dialog.html
|
||||||
|
|
||||||
<ComponentPreview name="DialogDemo" />
|
<ComponentPreview name="DialogDemo" />
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
## Installation
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add dialog
|
npx shadcn-vue@latest add dialog
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import {
|
|
||||||
DialogClose,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogOverlay,
|
|
||||||
DialogPortal,
|
|
||||||
DialogRoot,
|
|
||||||
DialogTitle,
|
|
||||||
DialogTrigger,
|
|
||||||
} from 'radix-vue'
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<DialogRoot>
|
|
||||||
<DialogTrigger
|
|
||||||
class="text-grass11 font-semibold shadow-blackA7 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none"
|
|
||||||
>
|
|
||||||
Edit profile
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogPortal>
|
|
||||||
<DialogOverlay class="dialog-overlay" />
|
|
||||||
<DialogContent
|
|
||||||
class="dialog-content"
|
|
||||||
>
|
|
||||||
<DialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
|
|
||||||
Edit profile
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogDescription class="text-mauve11 mt-[10px] mb-5 text-[15px] leading-normal">
|
|
||||||
Make changes to your profile here. Click save when you're done.
|
|
||||||
</DialogDescription>
|
|
||||||
<fieldset class="mb-[15px] flex items-center gap-5">
|
|
||||||
<label class="text-grass11 w-[90px] text-right text-[15px]" for="name"> Name </label>
|
|
||||||
<input
|
|
||||||
id="name"
|
|
||||||
class="text-grass11 shadow-green7 focus:shadow-green8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
defaultValue="Pedro Duarte"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="mb-[15px] flex items-center gap-5">
|
|
||||||
<label class="text-grass11 w-[90px] text-right text-[15px]" for="username"> Username </label>
|
|
||||||
<input
|
|
||||||
id="username"
|
|
||||||
class="text-grass11 shadow-green7 focus:shadow-green8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
defaultValue="@peduarte"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
<div class="mt-[25px] flex justify-end">
|
|
||||||
<DialogClose as-child>
|
|
||||||
<button
|
|
||||||
class="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
|
|
||||||
>
|
|
||||||
Save changes
|
|
||||||
</button>
|
|
||||||
</DialogClose>
|
|
||||||
</div>
|
|
||||||
<DialogClose
|
|
||||||
class="text-grass11 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
|
|
||||||
aria-label="Close"
|
|
||||||
>
|
|
||||||
<Icon icon="lucide:x" />
|
|
||||||
</DialogClose>
|
|
||||||
</DialogContent>
|
|
||||||
</DialogPortal>
|
|
||||||
</DialogRoot>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.dialog-overlay {
|
|
||||||
@apply bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0 z-20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-content {
|
|
||||||
@apply data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-20;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
overlayShow: {
|
|
||||||
from: { opacity: 0 },
|
|
||||||
to: { opacity: 1 },
|
|
||||||
},
|
|
||||||
contentShow: {
|
|
||||||
from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
|
|
||||||
to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,414 +8,11 @@ primitive: https://www.radix-vue.com/components/dropdown-menu.html
|
||||||
|
|
||||||
<ComponentPreview name="DropdownMenuDemo" />
|
<ComponentPreview name="DropdownMenuDemo" />
|
||||||
|
|
||||||
|
## Installation
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add dropdown-menu
|
npx shadcn-vue@latest add dropdown-menu
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
DropdownMenuArrow,
|
|
||||||
DropdownMenuCheckboxItem,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuItemIndicator,
|
|
||||||
DropdownMenuLabel,
|
|
||||||
DropdownMenuPortal,
|
|
||||||
DropdownMenuRadioGroup,
|
|
||||||
DropdownMenuRadioItem,
|
|
||||||
DropdownMenuRoot,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuSub,
|
|
||||||
DropdownMenuSubContent,
|
|
||||||
DropdownMenuSubTrigger,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from 'radix-vue'
|
|
||||||
|
|
||||||
const toggleState = ref(false)
|
|
||||||
const checkboxOne = ref(false)
|
|
||||||
const checkboxTwo = ref(false)
|
|
||||||
const person = ref('pedro')
|
|
||||||
|
|
||||||
function handleClick() {
|
|
||||||
alert('hello!')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<DropdownMenuRoot v-model:open="toggleState">
|
|
||||||
<DropdownMenuTrigger
|
|
||||||
class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-grass11 bg-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
|
|
||||||
aria-label="Customise options"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:hamburger-menu" />
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
|
|
||||||
<DropdownMenuPortal>
|
|
||||||
<DropdownMenuContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="5"
|
|
||||||
>
|
|
||||||
<DropdownMenuItem
|
|
||||||
value="New Tab"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
@click="handleClick"
|
|
||||||
>
|
|
||||||
New Tab
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+T
|
|
||||||
</div>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSub>
|
|
||||||
<DropdownMenuSubTrigger
|
|
||||||
value="more toolsz"
|
|
||||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
|
||||||
>
|
|
||||||
More Tools
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:chevron-right" />
|
|
||||||
</div>
|
|
||||||
</DropdownMenuSubTrigger>
|
|
||||||
<DropdownMenuPortal>
|
|
||||||
<DropdownMenuSubContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="2"
|
|
||||||
:align-offset="-5"
|
|
||||||
>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Save Page As…
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+S
|
|
||||||
</div>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Create Shortcut…
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Name Window…
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Developer Tools
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuSubContent>
|
|
||||||
</DropdownMenuPortal>
|
|
||||||
</DropdownMenuSub>
|
|
||||||
<DropdownMenuItem
|
|
||||||
value="New Window"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
New Window
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+N
|
|
||||||
</div>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
value="New Private Window"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
New Private Window
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⇧+⌘+N
|
|
||||||
</div>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSub>
|
|
||||||
<DropdownMenuSubTrigger
|
|
||||||
value="more tools"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
|
||||||
>
|
|
||||||
More Tools
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:chevron-right" />
|
|
||||||
</div>
|
|
||||||
</DropdownMenuSubTrigger>
|
|
||||||
<DropdownMenuPortal>
|
|
||||||
<DropdownMenuSubContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="2"
|
|
||||||
:align-offset="-5"
|
|
||||||
>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Save Page As…
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+S
|
|
||||||
</div>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Create Shortcut…
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Name Window…
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Developer Tools
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSub>
|
|
||||||
<DropdownMenuSubTrigger
|
|
||||||
value="more toolsz"
|
|
||||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
|
||||||
>
|
|
||||||
More Tools
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:chevron-right" />
|
|
||||||
</div>
|
|
||||||
</DropdownMenuSubTrigger>
|
|
||||||
<DropdownMenuPortal>
|
|
||||||
<DropdownMenuSubContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="2"
|
|
||||||
:align-offset="-5"
|
|
||||||
>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Save Page As…
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+S
|
|
||||||
</div>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Create Shortcut…
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Name Window…
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Developer Tools
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSub>
|
|
||||||
<DropdownMenuSubTrigger
|
|
||||||
value="more toolsz"
|
|
||||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
|
||||||
>
|
|
||||||
More Tools
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:chevron-right" />
|
|
||||||
</div>
|
|
||||||
</DropdownMenuSubTrigger>
|
|
||||||
<DropdownMenuPortal>
|
|
||||||
<DropdownMenuSubContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="2"
|
|
||||||
:align-offset="-5"
|
|
||||||
>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Save Page As…
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+S
|
|
||||||
</div>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Create Shortcut…
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Name Window…
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Developer Tools
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuSubContent>
|
|
||||||
</DropdownMenuPortal>
|
|
||||||
</DropdownMenuSub>
|
|
||||||
</DropdownMenuSubContent>
|
|
||||||
</DropdownMenuPortal>
|
|
||||||
</DropdownMenuSub>
|
|
||||||
<DropdownMenuItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
Developer Tools
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuSubContent>
|
|
||||||
</DropdownMenuPortal>
|
|
||||||
</DropdownMenuSub>
|
|
||||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<DropdownMenuCheckboxItem
|
|
||||||
v-model:checked="checkboxOne"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
<DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:check" />
|
|
||||||
</DropdownMenuItemIndicator>
|
|
||||||
Show Bookmarks
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+B
|
|
||||||
</div>
|
|
||||||
</DropdownMenuCheckboxItem>
|
|
||||||
<DropdownMenuCheckboxItem
|
|
||||||
v-model:checked="checkboxTwo"
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
<DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:check" />
|
|
||||||
</DropdownMenuItemIndicator>
|
|
||||||
Show Full URLs
|
|
||||||
</DropdownMenuCheckboxItem>
|
|
||||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
|
|
||||||
<DropdownMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve11">
|
|
||||||
People
|
|
||||||
</DropdownMenuLabel>
|
|
||||||
<DropdownMenuRadioGroup v-model="person">
|
|
||||||
<DropdownMenuRadioItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
value="pedro"
|
|
||||||
>
|
|
||||||
<DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:dot-filled" />
|
|
||||||
</DropdownMenuItemIndicator>
|
|
||||||
Pedro Duarte
|
|
||||||
</DropdownMenuRadioItem>
|
|
||||||
<DropdownMenuRadioItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
value="colm"
|
|
||||||
>
|
|
||||||
<DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:dot-filled" />
|
|
||||||
</DropdownMenuItemIndicator>
|
|
||||||
Colm Tuite
|
|
||||||
</DropdownMenuRadioItem>
|
|
||||||
</DropdownMenuRadioGroup>
|
|
||||||
<DropdownMenuArrow class="fill-white" />
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenuPortal>
|
|
||||||
</DropdownMenuRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
slideDownAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateY(-2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
slideLeftAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
slideUpAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateY(2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
slideRightAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(-2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
|
|
|
||||||
|
|
@ -8,153 +8,11 @@ primitive: https://www.radix-vue.com/components/hover-card.html
|
||||||
|
|
||||||
<ComponentPreview name="HoverCardDemo" />
|
<ComponentPreview name="HoverCardDemo" />
|
||||||
|
|
||||||
|
## Installation
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add hover-card
|
npx shadcn-vue@latest add hover-card
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependency:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'radix-vue'
|
|
||||||
|
|
||||||
const hoverState = ref(false)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<HoverCardRoot v-model:open="hoverState">
|
|
||||||
<HoverCardTrigger
|
|
||||||
class="inline-block cursor-pointer rounded-full shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] outline-none focus:shadow-[0_0_0_2px_white]"
|
|
||||||
href="https://twitter.com/radix_ui"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="block h-[45px] w-[45px] rounded-full"
|
|
||||||
src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
|
|
||||||
alt="Radix UI"
|
|
||||||
>
|
|
||||||
</HoverCardTrigger>
|
|
||||||
<HoverCardPortal>
|
|
||||||
<HoverCardContent
|
|
||||||
class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] rounded-md bg-white p-5 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] data-[state=open]:transition-all"
|
|
||||||
:side-offset="5"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col gap-[7px]">
|
|
||||||
<img
|
|
||||||
class="block h-[60px] w-[60px] rounded-full"
|
|
||||||
src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
|
|
||||||
alt="Radix UI"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col gap-[15px]">
|
|
||||||
<div>
|
|
||||||
<div class="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
|
|
||||||
Radix
|
|
||||||
</div>
|
|
||||||
<div class="text-mauve10 m-0 text-[15px] leading-[1.5]">
|
|
||||||
@radix_ui
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-mauve12 m-0 text-[15px] leading-[1.5]">
|
|
||||||
Components, icons, colors, and templates for building high-quality, accessible UI. Free and open-source.
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-[15px]">
|
|
||||||
<div class="flex gap-[5px]">
|
|
||||||
<div class="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
|
|
||||||
0
|
|
||||||
</div>
|
|
||||||
<div class="text-mauve10 m-0 text-[15px] leading-[1.5]">
|
|
||||||
Following
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-[5px]">
|
|
||||||
<div class="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
|
|
||||||
2,900
|
|
||||||
</div>
|
|
||||||
<div class="text-mauve10 m-0 text-[15px] leading-[1.5]">
|
|
||||||
Followers
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<HoverCardArrow class="fill-white" size="8" />
|
|
||||||
</HoverCardContent>
|
|
||||||
</HoverCardPortal>
|
|
||||||
</HoverCardRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
slideDownAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateY(-2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
slideLeftAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
slideUpAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateY(2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
slideRightAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(-2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ description: Displays a form input field or a component that looks like an input
|
||||||
|
|
||||||
<ComponentPreview name="InputDemo" class="[&_input]:max-w-xs" />
|
<ComponentPreview name="InputDemo" class="[&_input]:max-w-xs" />
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
<TabPreview name="CLI">
|
||||||
<template #CLI>
|
<template #CLI>
|
||||||
|
|
@ -21,30 +22,7 @@ npx shadcn-vue@latest add input
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
### Copy and paste the following code into your project:
|
||||||
|
|
||||||
```vue
|
<<< @/lib/registry/default/ui/input/Input.vue
|
||||||
<script setup lang="ts">
|
|
||||||
import { useVModel } from '@vueuse/core'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
defaultValue?: string | number
|
|
||||||
modelValue?: string | number
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emits = defineEmits<{
|
|
||||||
(e: 'update:modelValue', payload: string | number): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const modelValue = useVModel(props, 'modelValue', emits, {
|
|
||||||
passive: true,
|
|
||||||
defaultValue: props.defaultValue,
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<input v-model="modelValue" type="text" :class="cn(cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? ''))">
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,28 +30,7 @@ npm install radix-vue
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
### Copy and paste the following code into your project:
|
||||||
|
|
||||||
```vue
|
<<< @/lib/registry/default/ui/label/Label.vue
|
||||||
<script setup lang="ts">
|
|
||||||
import { Label, type LabelProps } from 'radix-vue'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
|
|
||||||
const props = defineProps<LabelProps & { class?: string }>()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Label
|
|
||||||
v-bind="props"
|
|
||||||
:class="
|
|
||||||
cn(
|
|
||||||
'block text-sm tracking-tight font-medium text-foreground text-left',
|
|
||||||
props.class,
|
|
||||||
)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</Label>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,392 +7,12 @@ primitive: https://www.radix-vue.com/components/menubar.html
|
||||||
|
|
||||||
<ComponentPreview name="MenubarDemo" />
|
<ComponentPreview name="MenubarDemo" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add menubar
|
npx shadcn-vue@latest add menubar
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
MenubarCheckboxItem,
|
|
||||||
MenubarContent,
|
|
||||||
MenubarItem,
|
|
||||||
MenubarItemIndicator,
|
|
||||||
MenubarMenu,
|
|
||||||
MenubarPortal,
|
|
||||||
MenubarRadioGroup,
|
|
||||||
MenubarRadioItem,
|
|
||||||
MenubarRoot,
|
|
||||||
MenubarSeparator,
|
|
||||||
MenubarSub,
|
|
||||||
MenubarSubContent,
|
|
||||||
MenubarSubTrigger,
|
|
||||||
MenubarTrigger,
|
|
||||||
} from 'radix-vue'
|
|
||||||
|
|
||||||
const currentMenu = ref('')
|
|
||||||
const checkboxOne = ref(false)
|
|
||||||
const checkboxTwo = ref(false)
|
|
||||||
const person = ref('pedro')
|
|
||||||
function handleClick() {
|
|
||||||
alert('hello!')
|
|
||||||
}
|
|
||||||
|
|
||||||
const RADIO_ITEMS = ['Andy', 'Benoît', 'Luis']
|
|
||||||
const CHECK_ITEMS = ['Always Show Bookmarks Bar', 'Always Show Full URLs']
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<MenubarRoot v-model="currentMenu" class="flex bg-white p-[3px] rounded-md shadow-[0_2px_10px] shadow-blackA7">
|
|
||||||
<MenubarMenu value="file">
|
|
||||||
<MenubarTrigger
|
|
||||||
class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
|
|
||||||
>
|
|
||||||
File
|
|
||||||
</MenubarTrigger>
|
|
||||||
<MenubarPortal>
|
|
||||||
<MenubarContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
|
||||||
align="start"
|
|
||||||
:side-offset="5"
|
|
||||||
:align-offset="-3"
|
|
||||||
>
|
|
||||||
<MenubarItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
New Tab
|
|
||||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
|
||||||
⌘ T
|
|
||||||
</div>
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
New Window
|
|
||||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
|
||||||
⌘ N
|
|
||||||
</div>
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
New Incognito Window
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<MenubarSub>
|
|
||||||
<MenubarSubTrigger
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Share
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:chevron-right" />
|
|
||||||
</div>
|
|
||||||
</MenubarSubTrigger>
|
|
||||||
<MenubarPortal>
|
|
||||||
<MenubarSubContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
|
||||||
:align-offset="-5"
|
|
||||||
>
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Email Link
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Messages
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Notes
|
|
||||||
</MenubarItem>
|
|
||||||
</MenubarSubContent>
|
|
||||||
</MenubarPortal>
|
|
||||||
</MenubarSub>
|
|
||||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<MenubarItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Print…
|
|
||||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
|
||||||
⌘ P
|
|
||||||
</div>
|
|
||||||
</MenubarItem>
|
|
||||||
</MenubarContent>
|
|
||||||
</MenubarPortal>
|
|
||||||
</MenubarMenu>
|
|
||||||
|
|
||||||
<MenubarMenu>
|
|
||||||
<MenubarTrigger
|
|
||||||
class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</MenubarTrigger>
|
|
||||||
<MenubarPortal>
|
|
||||||
<MenubarContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
|
||||||
align="start"
|
|
||||||
:side-offset="5"
|
|
||||||
:align-offset="-3"
|
|
||||||
>
|
|
||||||
<MenubarItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Undo
|
|
||||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
|
||||||
⌘ Z
|
|
||||||
</div>
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Redo
|
|
||||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
|
||||||
⇧ ⌘ Z
|
|
||||||
</div>
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<MenubarSub>
|
|
||||||
<MenubarSubTrigger
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Find
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:chevron-right" />
|
|
||||||
</div>
|
|
||||||
</MenubarSubTrigger>
|
|
||||||
|
|
||||||
<MenubarPortal>
|
|
||||||
<MenubarSubContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
|
||||||
:align-offset="-5"
|
|
||||||
>
|
|
||||||
<MenubarItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Search the web…
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Find…
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Find Next
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Find Previous
|
|
||||||
</MenubarItem>
|
|
||||||
</MenubarSubContent>
|
|
||||||
</MenubarPortal>
|
|
||||||
</MenubarSub>
|
|
||||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Cut
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Copy
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Paste
|
|
||||||
</MenubarItem>
|
|
||||||
</MenubarContent>
|
|
||||||
</MenubarPortal>
|
|
||||||
</MenubarMenu>
|
|
||||||
|
|
||||||
<MenubarMenu>
|
|
||||||
<MenubarTrigger
|
|
||||||
class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
|
|
||||||
>
|
|
||||||
View
|
|
||||||
</MenubarTrigger>
|
|
||||||
<MenubarPortal>
|
|
||||||
<MenubarContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
|
||||||
align="start"
|
|
||||||
:side-offset="5"
|
|
||||||
:align-offset="-14"
|
|
||||||
>
|
|
||||||
<MenubarCheckboxItem
|
|
||||||
v-model="checkboxOne"
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
<MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:check" />
|
|
||||||
</MenubarItemIndicator>
|
|
||||||
Show Bookmarks
|
|
||||||
<div
|
|
||||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
|
||||||
>
|
|
||||||
⌘+B
|
|
||||||
</div>
|
|
||||||
</MenubarCheckboxItem>
|
|
||||||
<MenubarCheckboxItem
|
|
||||||
v-model="checkboxTwo"
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
>
|
|
||||||
<MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:check" />
|
|
||||||
</MenubarItemIndicator>
|
|
||||||
Show Full URLs
|
|
||||||
</MenubarCheckboxItem>
|
|
||||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<MenubarItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Reload
|
|
||||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
|
||||||
⌘ R
|
|
||||||
</div>
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarItem
|
|
||||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
Force Reload
|
|
||||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
|
||||||
⇧ ⌘ R
|
|
||||||
</div>
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Toggle Fullscreen
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Hide Sidebar
|
|
||||||
</MenubarItem>
|
|
||||||
</MenubarContent>
|
|
||||||
</MenubarPortal>
|
|
||||||
</MenubarMenu>
|
|
||||||
|
|
||||||
<MenubarMenu>
|
|
||||||
<MenubarTrigger
|
|
||||||
class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
|
|
||||||
>
|
|
||||||
Profiles
|
|
||||||
</MenubarTrigger>
|
|
||||||
<MenubarPortal>
|
|
||||||
<MenubarContent
|
|
||||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
|
||||||
align="start"
|
|
||||||
:side-offset="5"
|
|
||||||
:align-offset="-14"
|
|
||||||
>
|
|
||||||
<MenubarRadioGroup v-model="person">
|
|
||||||
<MenubarRadioItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
value="pedro"
|
|
||||||
>
|
|
||||||
<MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:dot-filled" />
|
|
||||||
</MenubarItemIndicator>
|
|
||||||
Pedro Duarte
|
|
||||||
</MenubarRadioItem>
|
|
||||||
<MenubarRadioItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
value="colm"
|
|
||||||
>
|
|
||||||
<MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:dot-filled" />
|
|
||||||
</MenubarItemIndicator>
|
|
||||||
Colm Tuite
|
|
||||||
</MenubarRadioItem>
|
|
||||||
</MenubarRadioGroup>
|
|
||||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
@click="handleClick"
|
|
||||||
>
|
|
||||||
Edit…
|
|
||||||
</MenubarItem>
|
|
||||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<MenubarItem
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
||||||
>
|
|
||||||
Add Profile…
|
|
||||||
</MenubarItem>
|
|
||||||
</MenubarContent>
|
|
||||||
</MenubarPortal>
|
|
||||||
</MenubarMenu>
|
|
||||||
</MenubarRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following to your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,371 +7,11 @@ primitive: https://www.radix-vue.com/components/navigation-menu.html
|
||||||
|
|
||||||
<ComponentPreview name="NavigationMenuDemo" />
|
<ComponentPreview name="NavigationMenuDemo" />
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add navigation-menu
|
npx shadcn-vue@latest add navigation-menu
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
|
||||||
|
|
||||||
Add the following code into your `NavigationMenuListItem.vue` file:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
NavigationMenuContent,
|
|
||||||
NavigationMenuIndicator,
|
|
||||||
NavigationMenuItem,
|
|
||||||
NavigationMenuLink,
|
|
||||||
NavigationMenuList,
|
|
||||||
NavigationMenuRoot,
|
|
||||||
NavigationMenuTrigger,
|
|
||||||
NavigationMenuViewport,
|
|
||||||
} from 'radix-vue'
|
|
||||||
import NavigationMenuListItem from './NavigationMenuListItem.vue'
|
|
||||||
|
|
||||||
function handleClick() {
|
|
||||||
alert('hello!')
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentTrigger = ref('')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NavigationMenuRoot v-model="currentTrigger" class="relative z-[1] flex w-full justify-center">
|
|
||||||
<NavigationMenuList class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
|
|
||||||
<NavigationMenuItem>
|
|
||||||
<NavigationMenuTrigger
|
|
||||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
>
|
|
||||||
Learn
|
|
||||||
<Icon
|
|
||||||
icon="radix-icons:caret-down"
|
|
||||||
class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
|
|
||||||
aria-hidden
|
|
||||||
/>
|
|
||||||
</NavigationMenuTrigger>
|
|
||||||
<NavigationMenuContent
|
|
||||||
class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
|
|
||||||
>
|
|
||||||
<ul class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
|
|
||||||
<li class="row-span-3 grid">
|
|
||||||
<NavigationMenuLink as-child>
|
|
||||||
<a
|
|
||||||
class="focus:shadow-green7 from-green9 to-teal9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
href="/"
|
|
||||||
>
|
|
||||||
<img class="w-16" src="/logo.svg">
|
|
||||||
<div class="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white">Radix Primitives</div>
|
|
||||||
<p class="text-mauve4 text-[14px] leading-[1.3]">Unstyled, accessible components for React.</p>
|
|
||||||
</a>
|
|
||||||
</NavigationMenuLink>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<NavigationMenuListItem href="https://stitches.dev/" title="Stitches">
|
|
||||||
CSS-in-JS with best-in-class developer experience.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem href="/colors" title="Colors">
|
|
||||||
Beautiful, thought-out palettes with auto dark mode.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem href="https://icons.radix-ui.com/" title="Icons">
|
|
||||||
A crisp set of 15x15 icons, balanced and consistent.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
</ul>
|
|
||||||
</NavigationMenuContent>
|
|
||||||
</NavigationMenuItem>
|
|
||||||
|
|
||||||
<NavigationMenuItem>
|
|
||||||
<NavigationMenuTrigger
|
|
||||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
>
|
|
||||||
Overview
|
|
||||||
<Icon
|
|
||||||
icon="radix-icons:caret-down"
|
|
||||||
class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
|
|
||||||
aria-hidden
|
|
||||||
/>
|
|
||||||
</NavigationMenuTrigger>
|
|
||||||
<NavigationMenuContent class="absolute top-0 left-0 w-full sm:w-auto">
|
|
||||||
<ul class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
|
|
||||||
<NavigationMenuListItem title="Introduction" href="/docs/primitives/overview/introduction">
|
|
||||||
Build high-quality, accessible design systems and web apps.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem title="Getting started" href="/docs/primitives/overview/getting-started">
|
|
||||||
A quick tutorial to get you up and running with Radix Primitives.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem title="Styling" href="/docs/primitives/guides/styling">
|
|
||||||
Unstyled and compatible with any styling solution.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem title="Animation" href="/docs/primitives/guides/animation">
|
|
||||||
Use CSS keyframes or any animation library of your choice.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem title="Accessibility" href="/docs/primitives/overview/accessibility">
|
|
||||||
Tested in a range of browsers and assistive technologies.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem title="Releases" href="/docs/primitives/overview/releases">
|
|
||||||
Radix Primitives releases and their changelogs.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
</ul>
|
|
||||||
</NavigationMenuContent>
|
|
||||||
</NavigationMenuItem>
|
|
||||||
|
|
||||||
<NavigationMenuItem>
|
|
||||||
<NavigationMenuLink
|
|
||||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
href="https://github.com/radix-vue"
|
|
||||||
>
|
|
||||||
Github
|
|
||||||
</NavigationMenuLink>
|
|
||||||
</NavigationMenuItem>
|
|
||||||
|
|
||||||
<NavigationMenuIndicator
|
|
||||||
class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
|
|
||||||
>
|
|
||||||
<div class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
|
|
||||||
</NavigationMenuIndicator>
|
|
||||||
</NavigationMenuList>
|
|
||||||
|
|
||||||
<div class="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
|
|
||||||
<NavigationMenuViewport
|
|
||||||
class="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[10px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</NavigationMenuRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
Add the following code into your `index.vue` file:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
NavigationMenuContent,
|
|
||||||
NavigationMenuIndicator,
|
|
||||||
NavigationMenuItem,
|
|
||||||
NavigationMenuLink,
|
|
||||||
NavigationMenuList,
|
|
||||||
NavigationMenuRoot,
|
|
||||||
NavigationMenuTrigger,
|
|
||||||
NavigationMenuViewport,
|
|
||||||
} from 'radix-vue'
|
|
||||||
import NavigationMenuListItem from './NavigationMenuListItem.vue'
|
|
||||||
|
|
||||||
function handleClick() {
|
|
||||||
alert('hello!')
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentTrigger = ref('')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NavigationMenuRoot v-model="currentTrigger" class="relative z-[1] flex w-full justify-center">
|
|
||||||
<NavigationMenuList class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
|
|
||||||
<NavigationMenuItem>
|
|
||||||
<NavigationMenuTrigger
|
|
||||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
>
|
|
||||||
Learn
|
|
||||||
<Icon
|
|
||||||
icon="radix-icons:caret-down"
|
|
||||||
class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
|
|
||||||
aria-hidden
|
|
||||||
/>
|
|
||||||
</NavigationMenuTrigger>
|
|
||||||
<NavigationMenuContent
|
|
||||||
class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
|
|
||||||
>
|
|
||||||
<ul class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
|
|
||||||
<li class="row-span-3 grid">
|
|
||||||
<NavigationMenuLink as-child>
|
|
||||||
<a
|
|
||||||
class="focus:shadow-green7 from-green9 to-teal9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
href="/"
|
|
||||||
>
|
|
||||||
<img class="w-16" src="/logo.svg">
|
|
||||||
<div class="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white">Radix Primitives</div>
|
|
||||||
<p class="text-mauve4 text-[14px] leading-[1.3]">Unstyled, accessible components for React.</p>
|
|
||||||
</a>
|
|
||||||
</NavigationMenuLink>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<NavigationMenuListItem href="https://stitches.dev/" title="Stitches">
|
|
||||||
CSS-in-JS with best-in-class developer experience.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem href="/colors" title="Colors">
|
|
||||||
Beautiful, thought-out palettes with auto dark mode.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem href="https://icons.radix-ui.com/" title="Icons">
|
|
||||||
A crisp set of 15x15 icons, balanced and consistent.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
</ul>
|
|
||||||
</NavigationMenuContent>
|
|
||||||
</NavigationMenuItem>
|
|
||||||
|
|
||||||
<NavigationMenuItem>
|
|
||||||
<NavigationMenuTrigger
|
|
||||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
>
|
|
||||||
Overview
|
|
||||||
<Icon
|
|
||||||
icon="radix-icons:caret-down"
|
|
||||||
class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
|
|
||||||
aria-hidden
|
|
||||||
/>
|
|
||||||
</NavigationMenuTrigger>
|
|
||||||
<NavigationMenuContent class="absolute top-0 left-0 w-full sm:w-auto">
|
|
||||||
<ul class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
|
|
||||||
<NavigationMenuListItem title="Introduction" href="/docs/primitives/overview/introduction">
|
|
||||||
Build high-quality, accessible design systems and web apps.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem title="Getting started" href="/docs/primitives/overview/getting-started">
|
|
||||||
A quick tutorial to get you up and running with Radix Primitives.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem title="Styling" href="/docs/primitives/guides/styling">
|
|
||||||
Unstyled and compatible with any styling solution.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem title="Animation" href="/docs/primitives/guides/animation">
|
|
||||||
Use CSS keyframes or any animation library of your choice.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem title="Accessibility" href="/docs/primitives/overview/accessibility">
|
|
||||||
Tested in a range of browsers and assistive technologies.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
<NavigationMenuListItem title="Releases" href="/docs/primitives/overview/releases">
|
|
||||||
Radix Primitives releases and their changelogs.
|
|
||||||
</NavigationMenuListItem>
|
|
||||||
</ul>
|
|
||||||
</NavigationMenuContent>
|
|
||||||
</NavigationMenuItem>
|
|
||||||
|
|
||||||
<NavigationMenuItem>
|
|
||||||
<NavigationMenuLink
|
|
||||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
|
|
||||||
href="https://github.com/radix-vue"
|
|
||||||
>
|
|
||||||
Github
|
|
||||||
</NavigationMenuLink>
|
|
||||||
</NavigationMenuItem>
|
|
||||||
|
|
||||||
<NavigationMenuIndicator
|
|
||||||
class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
|
|
||||||
>
|
|
||||||
<div class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
|
|
||||||
</NavigationMenuIndicator>
|
|
||||||
</NavigationMenuList>
|
|
||||||
|
|
||||||
<div class="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
|
|
||||||
<NavigationMenuViewport
|
|
||||||
class="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[10px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</NavigationMenuRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js` file:
|
|
||||||
|
|
||||||
Add the following into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const plugin = require('tailwindcss/plugin')
|
|
||||||
const { blackA, green, grass, teal } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...teal,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
enterFromRight: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(200px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
enterFromLeft: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(-200px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
exitToRight: {
|
|
||||||
from: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
to: { opacity: 0, transform: 'translateX(200px)' },
|
|
||||||
},
|
|
||||||
exitToLeft: {
|
|
||||||
from: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
to: { opacity: 0, transform: 'translateX(-200px)' },
|
|
||||||
},
|
|
||||||
scaleIn: {
|
|
||||||
from: { opacity: 0, transform: 'rotateX(-10deg) scale(0.9)' },
|
|
||||||
to: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
|
|
||||||
},
|
|
||||||
scaleOut: {
|
|
||||||
from: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
|
|
||||||
to: { opacity: 0, transform: 'rotateX(-10deg) scale(0.95)' },
|
|
||||||
},
|
|
||||||
fadeIn: {
|
|
||||||
from: { opacity: 0 },
|
|
||||||
to: { opacity: 1 },
|
|
||||||
},
|
|
||||||
fadeOut: {
|
|
||||||
from: { opacity: 1 },
|
|
||||||
to: { opacity: 0 },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
scaleIn: 'scaleIn 200ms ease',
|
|
||||||
scaleOut: 'scaleOut 200ms ease',
|
|
||||||
fadeIn: 'fadeIn 200ms ease',
|
|
||||||
fadeOut: 'fadeOut 200ms ease',
|
|
||||||
enterFromLeft: 'enterFromLeft 250ms ease',
|
|
||||||
enterFromRight: 'enterFromRight 250ms ease',
|
|
||||||
exitToLeft: 'exitToLeft 250ms ease',
|
|
||||||
exitToRight: 'exitToRight 250ms ease',
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
plugin(({ matchUtilities }) => {
|
|
||||||
matchUtilities({
|
|
||||||
perspective: value => ({
|
|
||||||
perspective: value,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,157 +8,12 @@ primitive: https://www.radix-vue.com/components/popover.html
|
||||||
|
|
||||||
<ComponentPreview name="PopoverDemo" />
|
<ComponentPreview name="PopoverDemo" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add popover
|
npx shadcn-vue@latest add popover
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
|
||||||
|
|
||||||
Add the following code into your project:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<PopoverRoot>
|
|
||||||
<PopoverTrigger
|
|
||||||
class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-grass11 bg-white shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none"
|
|
||||||
aria-label="Update dimensions"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:mixer-horizontal" />
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverPortal>
|
|
||||||
<PopoverContent
|
|
||||||
side="bottom"
|
|
||||||
:side-offset="5"
|
|
||||||
class="rounded p-5 w-[260px] bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.green7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col gap-2.5">
|
|
||||||
<p class="text-mauve12 text-[15px] leading-[19px] font-semibold mb-2.5">
|
|
||||||
Dimensions
|
|
||||||
</p>
|
|
||||||
<fieldset class="flex gap-5 items-center">
|
|
||||||
<label class="text-[13px] text-grass11 w-[75px]" for="width"> Width </label>
|
|
||||||
<input
|
|
||||||
id="width"
|
|
||||||
class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
|
||||||
defaultValue="100%"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="flex gap-5 items-center">
|
|
||||||
<label class="text-[13px] text-grass11 w-[75px]" for="maxWidth"> Max. width </label>
|
|
||||||
<input
|
|
||||||
id="maxWidth"
|
|
||||||
class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
|
||||||
defaultValue="300px"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="flex gap-5 items-center">
|
|
||||||
<label class="text-[13px] text-grass11 w-[75px]" for="height"> Height </label>
|
|
||||||
<input
|
|
||||||
id="height"
|
|
||||||
class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
|
||||||
defaultValue="25px"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="flex gap-5 items-center">
|
|
||||||
<label class="text-[13px] text-grass11 w-[75px]" for="maxHeight"> Max. height </label>
|
|
||||||
<input
|
|
||||||
id="maxHeight"
|
|
||||||
class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
|
||||||
defaultValue="none"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
<PopoverClose
|
|
||||||
class="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 absolute top-[5px] right-[5px] hover:bg-green4 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
|
|
||||||
aria-label="Close"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:cross-2" />
|
|
||||||
</PopoverClose>
|
|
||||||
<PopoverArrow class="fill-white" />
|
|
||||||
</PopoverContent>
|
|
||||||
</PopoverPortal>
|
|
||||||
</PopoverRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
slideDownAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateY(-2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
slideLeftAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
slideUpAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateY(2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
slideRightAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(-2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,53 +31,7 @@ npm install radix-vue
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
### Copy and paste the following code into your project:
|
||||||
|
|
||||||
```vue
|
<<< @/lib/registry/default/ui/progress/Progress.vue
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, ref } from 'vue'
|
|
||||||
import { ProgressIndicator, ProgressRoot } from 'radix-vue'
|
|
||||||
|
|
||||||
const progressValue = ref(10)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const timer = setTimeout(() => (progressValue.value = 66), 500)
|
|
||||||
return () => clearTimeout(timer)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<ProgressRoot
|
|
||||||
v-model="progressValue"
|
|
||||||
class="relative overflow-hidden bg-blackA9 rounded-full w-full sm:w-[300px] h-4 sm:h-5"
|
|
||||||
style="transform: translateZ(0)"
|
|
||||||
>
|
|
||||||
<ProgressIndicator
|
|
||||||
class="bg-white rounded-full w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
|
|
||||||
:style="`transform: translateX(-${100 - progressValue}%)`"
|
|
||||||
/>
|
|
||||||
</ProgressRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,112 +7,12 @@ primitive: https://www.radix-vue.com/components/radio-group.html
|
||||||
|
|
||||||
<ComponentPreview name="RadioGroupDemo" />
|
<ComponentPreview name="RadioGroupDemo" />
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add radio-group
|
npx shadcn-vue@latest add radio-group
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependency:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'radix-vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const radioStateSingle = ref('default')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<RadioGroupRoot
|
|
||||||
v-model="radioStateSingle" class="flex flex-col gap-2.5" default-value="default"
|
|
||||||
aria-label="View density"
|
|
||||||
>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<RadioGroupItem
|
|
||||||
id="r1"
|
|
||||||
class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="default"
|
|
||||||
>
|
|
||||||
<RadioGroupIndicator
|
|
||||||
class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
|
|
||||||
/>
|
|
||||||
</RadioGroupItem>
|
|
||||||
<label class="text-white text-[15px] leading-none pl-[15px]" for="r1">
|
|
||||||
Default
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<RadioGroupItem
|
|
||||||
id="r2"
|
|
||||||
class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="comfortable"
|
|
||||||
>
|
|
||||||
<RadioGroupIndicator
|
|
||||||
class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
|
|
||||||
/>
|
|
||||||
</RadioGroupItem>
|
|
||||||
<label class="text-white text-[15px] leading-none pl-[15px]" for="r2">
|
|
||||||
Comfortable
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<RadioGroupItem
|
|
||||||
id="r3"
|
|
||||||
class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="compact"
|
|
||||||
>
|
|
||||||
<RadioGroupIndicator
|
|
||||||
class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
|
|
||||||
/>
|
|
||||||
</RadioGroupItem>
|
|
||||||
<label class="text-white text-[15px] leading-none pl-[15px]" for="r3">
|
|
||||||
Compact
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</RadioGroupRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,120 +7,12 @@ primitive: https://www.radix-vue.com/components/scroll-area.html
|
||||||
|
|
||||||
<ComponentPreview name="ScrollAreaDemo" />
|
<ComponentPreview name="ScrollAreaDemo" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add scroll-area
|
npx shadcn-vue@latest add scroll-area
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependency:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'radix-vue'
|
|
||||||
|
|
||||||
const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<ScrollAreaRoot
|
|
||||||
class="w-[200px] h-[225px] rounded overflow-hidden shadow-[0_2px_10px] shadow-blackA7 bg-white"
|
|
||||||
style="--scrollbar-size: 10px"
|
|
||||||
>
|
|
||||||
<ScrollAreaViewport class="w-full h-full rounded">
|
|
||||||
<div class="py-[15px] px-5">
|
|
||||||
<div class="text-grass11 text-[15px] leading-[18px] font-semibold">
|
|
||||||
Tags
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-for="tag in tags"
|
|
||||||
:key="tag"
|
|
||||||
class="text-mauve12 text-[13px] leading-[18px] mt-2.5 pt-2.5 border-t border-t-mauve6"
|
|
||||||
>
|
|
||||||
{{ tag }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ScrollAreaViewport>
|
|
||||||
<ScrollAreaScrollbar
|
|
||||||
class="flex select-none touch-none p-0.5 bg-blackA6 transition-colors duration-[160ms] ease-out hover:bg-blackA8 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
|
|
||||||
orientation="vertical"
|
|
||||||
>
|
|
||||||
<ScrollAreaThumb
|
|
||||||
class="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
|
|
||||||
/>
|
|
||||||
</ScrollAreaScrollbar>
|
|
||||||
<ScrollAreaScrollbar
|
|
||||||
class="flex select-none touch-none p-0.5 bg-blackA6 transition-colors duration-[160ms] ease-out hover:bg-blackA8 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
|
|
||||||
orientation="horizontal"
|
|
||||||
>
|
|
||||||
<ScrollAreaThumb
|
|
||||||
class="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
|
|
||||||
/>
|
|
||||||
</ScrollAreaScrollbar>
|
|
||||||
</ScrollAreaRoot>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
|
|
||||||
.ScrollAreaThumb::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-width: 44px;
|
|
||||||
min-height: 44px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
|
|
|
||||||
|
|
@ -8,185 +8,12 @@ primitive: https://www.radix-vue.com/components/popover.html
|
||||||
|
|
||||||
<ComponentPreview name="SelectDemo" />
|
<ComponentPreview name="SelectDemo" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add select
|
npx shadcn-vue@latest add select
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
SelectContent,
|
|
||||||
SelectGroup,
|
|
||||||
SelectItem,
|
|
||||||
SelectItemIndicator,
|
|
||||||
SelectItemText,
|
|
||||||
SelectLabel,
|
|
||||||
SelectPortal,
|
|
||||||
SelectRoot,
|
|
||||||
SelectScrollDownButton,
|
|
||||||
SelectScrollUpButton,
|
|
||||||
SelectSeparator,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
SelectViewport,
|
|
||||||
} from 'radix-vue'
|
|
||||||
|
|
||||||
const fruit = ref()
|
|
||||||
|
|
||||||
function handleClick() {
|
|
||||||
alert('hello!')
|
|
||||||
}
|
|
||||||
|
|
||||||
const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
|
|
||||||
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<SelectRoot v-model="fruit">
|
|
||||||
<SelectTrigger
|
|
||||||
class="inline-flex w-[150px] items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 outline-none"
|
|
||||||
aria-label="Customise options"
|
|
||||||
>
|
|
||||||
<SelectValue placeholder="Select a fruit..." />
|
|
||||||
<Icon icon="radix-icons:chevron-down" class="h-3.5 w-3.5" />
|
|
||||||
</SelectTrigger>
|
|
||||||
|
|
||||||
<SelectPortal>
|
|
||||||
<SelectContent
|
|
||||||
class="w-[150px] bg-white rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
|
||||||
:side-offset="5"
|
|
||||||
position="popper"
|
|
||||||
>
|
|
||||||
<SelectScrollUpButton class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
|
|
||||||
<Icon icon="radix-icons:chevron-up" />
|
|
||||||
</SelectScrollUpButton>
|
|
||||||
|
|
||||||
<SelectViewport class="p-[5px]">
|
|
||||||
<SelectLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
|
|
||||||
Fruits
|
|
||||||
</SelectLabel>
|
|
||||||
<SelectGroup>
|
|
||||||
<SelectItem
|
|
||||||
v-for="(option, index) in options"
|
|
||||||
:key="index"
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
:value="option"
|
|
||||||
>
|
|
||||||
<SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:check" />
|
|
||||||
</SelectItemIndicator>
|
|
||||||
<SelectItemText>
|
|
||||||
{{ option }}
|
|
||||||
</SelectItemText>
|
|
||||||
</SelectItem>
|
|
||||||
</SelectGroup>
|
|
||||||
<SelectSeparator class="h-[1px] bg-green6 m-[5px]" />
|
|
||||||
<SelectLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
|
|
||||||
Vegetables
|
|
||||||
</SelectLabel>
|
|
||||||
<SelectGroup>
|
|
||||||
<SelectItem
|
|
||||||
v-for="(option, index) in vegetables"
|
|
||||||
:key="index"
|
|
||||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
|
||||||
:value="option"
|
|
||||||
:disabled="option === 'Courgette'"
|
|
||||||
>
|
|
||||||
<SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
|
||||||
<Icon icon="radix-icons:check" />
|
|
||||||
</SelectItemIndicator>
|
|
||||||
<SelectItemText>
|
|
||||||
{{ option }}
|
|
||||||
</SelectItemText>
|
|
||||||
</SelectItem>
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectViewport>
|
|
||||||
|
|
||||||
<SelectScrollDownButton class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
|
|
||||||
<Icon icon="radix-icons:chevron-down" />
|
|
||||||
</SelectScrollDownButton>
|
|
||||||
</SelectContent>
|
|
||||||
</SelectPortal>
|
|
||||||
</SelectRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
slideDownAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateY(-2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
slideLeftAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
slideUpAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateY(2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
slideRightAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(-2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,63 +30,8 @@ npm install radix-vue
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
### Copy and paste the following code into your project
|
||||||
|
|
||||||
```vue
|
<<< @/lib/registry/default/ui/separator/Separator.vue
|
||||||
<script setup lang="ts">
|
|
||||||
import { Separator } from 'radix-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="w-full max-w-[300px] mx-[15px]">
|
|
||||||
<div class="text-white text-[15px] leading-5 font-semibold">
|
|
||||||
Radix Primitives
|
|
||||||
</div>
|
|
||||||
<div class="text-white text-[15px] leading-5">
|
|
||||||
An open-source UI component library.
|
|
||||||
</div>
|
|
||||||
<Separator
|
|
||||||
class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[15px]"
|
|
||||||
/>
|
|
||||||
<div class="flex h-5 items-center">
|
|
||||||
<div class="text-white text-[15px] leading-5">
|
|
||||||
Blog
|
|
||||||
</div>
|
|
||||||
<Separator
|
|
||||||
class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
|
|
||||||
decorative
|
|
||||||
orientation="vertical"
|
|
||||||
/>
|
|
||||||
<div class="text-white text-[15px] leading-5">
|
|
||||||
Docs
|
|
||||||
</div>
|
|
||||||
<Separator
|
|
||||||
class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
|
|
||||||
decorative
|
|
||||||
orientation="vertical"
|
|
||||||
/>
|
|
||||||
<div class="text-white text-[15px] leading-5">
|
|
||||||
Source
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,20 +10,9 @@ primitive: https://www.radix-vue.com/components/dialog.html
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add sheet
|
npx shadcn-vue@latest add sheet
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
#### Coming soon...
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@ description: Use to show a placeholder while content is loading.
|
||||||
|
|
||||||
<ComponentPreview name="SkeletonDemo" />
|
<ComponentPreview name="SkeletonDemo" />
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
<TabPreview name="CLI">
|
||||||
|
|
@ -22,21 +21,8 @@ npx shadcn-vue@latest add skeleton
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
### Copy and paste the following code into your project
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
|
|
||||||
interface SkeletonProps {
|
<<< @/lib/registry/default/ui/skeleton/Skeleton.vue
|
||||||
class?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<SkeletonProps>()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div :class="cn('animate-pulse rounded-md bg-secondary', props.class)" />
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,79 +7,11 @@ primitive: https://www.radix-vue.com/components/slider.html
|
||||||
|
|
||||||
<ComponentPreview name="SliderDemo" />
|
<ComponentPreview name="SliderDemo" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add slider
|
npx shadcn-vue@latest add slider
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependency:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
|
|
||||||
|
|
||||||
const sliderValue = ref([50])
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<SliderRoot
|
|
||||||
v-model="sliderValue" class="relative flex items-center select-none touch-none w-[200px] h-5" :max="100"
|
|
||||||
:step="1"
|
|
||||||
>
|
|
||||||
<SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
|
|
||||||
<SliderRange class="absolute bg-white rounded-full h-full" />
|
|
||||||
</SliderTrack>
|
|
||||||
<SliderThumb
|
|
||||||
class="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
|
|
||||||
aria-label="Volume"
|
|
||||||
/>
|
|
||||||
</SliderRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,46 +30,7 @@ npm install radix-vue
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
### Copy and paste the following code into your project
|
||||||
|
|
||||||
```vue
|
<<< @/lib/registry/default/ui/switch/Switch.vue
|
||||||
<script setup lang="ts">
|
|
||||||
import { SwitchRoot, SwitchThumb } from 'radix-vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const switchState = ref(false)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex gap-2 items-center">
|
|
||||||
<label className="text-white text-[15px] leading-none pr-[15px] select-none" for="airplane-mode">
|
|
||||||
Airplane mode
|
|
||||||
</label>
|
|
||||||
<SwitchRoot
|
|
||||||
id="airplane-mode"
|
|
||||||
v-model:checked="switchState"
|
|
||||||
class="w-[42px] h-[25px] focus-within:outline focus-within:outline-black flex bg-black/50 shadow-sm rounded-full relative data-[state=checked]:bg-black cursor-default"
|
|
||||||
>
|
|
||||||
<SwitchThumb
|
|
||||||
class="block w-[21px] h-[21px] my-auto bg-white shadow-sm rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]"
|
|
||||||
/>
|
|
||||||
</SwitchRoot>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,20 +8,9 @@ description: A responsive table component.
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add table
|
npx shadcn-vue@latest add table
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
#### Coming soon...
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,154 +10,11 @@ primitive: https://www.radix-vue.com/components/tabs.html
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add tabs
|
npx shadcn-vue@latest add tabs
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependency:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<TabsRoot class="flex flex-col w-full sm:w-[300px] shadow-[0_2px_10px] shadow-blackA4" default-value="tab1">
|
|
||||||
<TabsList class="shrink-0 flex border-b border-mauve6" aria-label="Manage your account">
|
|
||||||
<TabsTrigger
|
|
||||||
class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-grass11 data-[state=active]:text-grass11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
|
|
||||||
value="tab1"
|
|
||||||
>
|
|
||||||
Account
|
|
||||||
</TabsTrigger>
|
|
||||||
<TabsTrigger
|
|
||||||
class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-grass11 data-[state=active]:text-grass11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
|
|
||||||
value="tab2"
|
|
||||||
>
|
|
||||||
Password
|
|
||||||
</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
<TabsContent
|
|
||||||
class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
|
|
||||||
value="tab1"
|
|
||||||
>
|
|
||||||
<p class="mb-5 !mt-0 text-mauve11 text-[15px] !leading-normal">
|
|
||||||
Make changes to your account here. Click save when you're done.
|
|
||||||
</p>
|
|
||||||
<fieldset class="mb-[15px] w-full flex flex-col justify-start">
|
|
||||||
<label class="text-[13px] leading-none mb-2.5 text-green12 block" for="name"> Name </label>
|
|
||||||
<input
|
|
||||||
id="name"
|
|
||||||
class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
|
||||||
value="Pedro Duarte"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="mb-[15px] w-full flex flex-col justify-start">
|
|
||||||
<label class="text-[13px] leading-none mb-2.5 text-green12 block" for="username"> Username </label>
|
|
||||||
<input
|
|
||||||
id="username"
|
|
||||||
class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
|
||||||
value="@peduarte"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
<div class="flex justify-end mt-5">
|
|
||||||
<button
|
|
||||||
class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
|
|
||||||
>
|
|
||||||
Save changes
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
<TabsContent
|
|
||||||
class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
|
|
||||||
value="tab2"
|
|
||||||
>
|
|
||||||
<p class="mb-5 !mt-0 text-mauve11 text-[15px] !leading-normal">
|
|
||||||
Change your password here. After saving, you'll be logged out.
|
|
||||||
</p>
|
|
||||||
<fieldset class="mb-[15px] w-full flex flex-col justify-start">
|
|
||||||
<label class="text-[13px] leading-none mb-2.5 text-green12 block" for="currentPassword">
|
|
||||||
Current password
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="currentPassword"
|
|
||||||
class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
|
||||||
type="password"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="mb-[15px] w-full flex flex-col justify-start">
|
|
||||||
<label class="text-[13px] leading-none mb-2.5 text-green12 block" for="newPassword"> New password </label>
|
|
||||||
<input
|
|
||||||
id="newPassword"
|
|
||||||
class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
|
||||||
type="password"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="mb-[15px] w-full flex flex-col justify-start">
|
|
||||||
<label class="text-[13px] leading-none mb-2.5 text-green12 block" for="confirmPassword">
|
|
||||||
Confirm password
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="confirmPassword"
|
|
||||||
class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
|
||||||
type="password"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
<div class="flex justify-end mt-5">
|
|
||||||
<button
|
|
||||||
class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
|
|
||||||
>
|
|
||||||
Change password
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
</TabsRoot>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -28,15 +28,7 @@ npm install radix-vue
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
### Copy and paste the following code into your project
|
||||||
|
|
||||||
```vue
|
<<< @/lib/registry/default/ui/textarea/Textarea.vue
|
||||||
<script setup lang="ts">
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<textarea :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')" />
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,54 +27,11 @@ npx shadcn-vue@latest add toggle
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install radix-vue
|
npm install radix-vue
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
### Copy and paste the following code into your project
|
||||||
|
|
||||||
```vue
|
<<< @/lib/registry/default/ui/toggle/Toggle.vue
|
||||||
<script setup lang="ts">
|
|
||||||
import { Toggle } from 'radix-vue'
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const toggleState = ref(false)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Toggle
|
|
||||||
v-model:pressed="toggleState" aria-label="Toggle italic"
|
|
||||||
class="hover:bg-green3 text-mauve11 data-[state=on]:bg-green6 data-[state=on]:text-violet12 shadow-blackA7 flex h-[35px] w-[35px] items-center justify-center rounded bg-white text-base leading-4 shadow-[0_2px_10px] focus-within:shadow-[0_0_0_2px] focus-within:shadow-black"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:font-italic" class="w-[15px] h-[15px]" />
|
|
||||||
</Toggle>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
...mauve,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
</Steps>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,111 +10,9 @@ primitive: https://www.radix-vue.com/components/tooltip.html
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
<TabPreview name="CLI">
|
|
||||||
<template #CLI>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx shadcn-vue@latest add tooltip
|
npx shadcn-vue@latest add tooltip
|
||||||
```
|
```
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #Manual>
|
|
||||||
|
|
||||||
<Steps>
|
|
||||||
|
|
||||||
### Install the following dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install radix-vue
|
|
||||||
|
|
||||||
npm install --save-dev @iconify/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
### Copy and paste the following code into your project
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<TooltipProvider>
|
|
||||||
<TooltipRoot>
|
|
||||||
<TooltipTrigger
|
|
||||||
class="text-grass11 shadow-blackA7 hover:bg-green3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
|
|
||||||
>
|
|
||||||
<Icon icon="radix-icons:plus" />
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipPortal>
|
|
||||||
<TooltipContent
|
|
||||||
as-child
|
|
||||||
class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-grass11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
|
|
||||||
:side-offset="5"
|
|
||||||
>
|
|
||||||
<ul>
|
|
||||||
Add to library
|
|
||||||
<TooltipArrow class="fill-white" size="8" />
|
|
||||||
</ul>
|
|
||||||
</TooltipContent>
|
|
||||||
</TooltipPortal>
|
|
||||||
</TooltipRoot>
|
|
||||||
</TooltipProvider>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
### Update `tailwind.config.js`
|
|
||||||
|
|
||||||
Add the following code into your `tailwind.config.js` file:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const { blackA, green, grass } = require('@radix-ui/colors')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ['./**/*.vue'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
...blackA,
|
|
||||||
...green,
|
|
||||||
...grass,
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
slideDownAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateY(-2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
slideLeftAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
slideUpAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateY(2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateY(0)' },
|
|
||||||
},
|
|
||||||
slideRightAndFade: {
|
|
||||||
from: { opacity: 0, transform: 'translateX(-2px)' },
|
|
||||||
to: { opacity: 1, transform: 'translateX(0)' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
</Steps>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</TabPreview>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
|
|
@ -7,16 +7,16 @@ import {
|
||||||
CardFooter,
|
CardFooter,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from '@/components/ui/card'
|
} from '@/lib/registry/default/ui/card'
|
||||||
import { Input } from '@/components/ui/input'
|
import { Input } from '@/lib/registry/default/ui/input'
|
||||||
import { Label } from '@/components/ui/label'
|
import { Label } from '@/lib/registry/default/ui/label'
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
SelectItem,
|
SelectItem,
|
||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from '@/components/ui/select'
|
} from '@/lib/registry/default/ui/select'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ const props = defineProps<ComboboxGroupProps & {
|
||||||
<template>
|
<template>
|
||||||
<ComboboxGroup
|
<ComboboxGroup
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
:class="cn('p-1 text-foreground', $attrs.class ?? '')"
|
:class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
|
||||||
>
|
>
|
||||||
<ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
<ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||||||
{{ heading }}
|
{{ heading }}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
|
import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
|
||||||
import { ComboboxContent } from 'radix-vue'
|
import { ComboboxContent, ComboboxViewport } from 'radix-vue'
|
||||||
import { cn, useEmitAsProps } from '@/lib/utils'
|
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<ComboboxContentProps>()
|
const props = defineProps<ComboboxContentProps>()
|
||||||
|
|
@ -11,6 +11,8 @@ const emitsAsProps = useEmitAsProps(emits)
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ComboboxContent v-bind="{ ...props, ...emitsAsProps }" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')">
|
<ComboboxContent v-bind="{ ...props, ...emitsAsProps }" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')">
|
||||||
<slot />
|
<div role="presentation">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
</ComboboxContent>
|
</ComboboxContent>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@ const emitsAsProps = useEmitAsProps(emits)
|
||||||
<DialogClose
|
<DialogClose
|
||||||
class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
|
class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
|
||||||
>
|
>
|
||||||
<X class="w-4 h-4 text-muted-foreground" />
|
<X class="w-4 h-4" />
|
||||||
<span class="sr-only">Close</span>
|
<span class="sr-only">Close</span>
|
||||||
</DialogClose>
|
</DialogClose>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|
|
||||||
|
|
@ -18,5 +18,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<input v-model="modelValue" type="text" :class="cn(cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? ''))">
|
<input v-model="modelValue" type="text" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')">
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
|
||||||
|
|
||||||
const defaultValue = 'item-1'
|
const defaultValue = 'item-1'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,13 +4,13 @@ import { ref } from 'vue'
|
||||||
import RadixIconsCalendar from '~icons/radix-icons/calendar'
|
import RadixIconsCalendar from '~icons/radix-icons/calendar'
|
||||||
|
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
import { Calendar } from '@/components/ui/calendar'
|
import { Calendar } from '@/lib/registry/new-york/ui/calendar'
|
||||||
import {
|
import {
|
||||||
Popover,
|
Popover,
|
||||||
PopoverContent,
|
PopoverContent,
|
||||||
PopoverTrigger,
|
PopoverTrigger,
|
||||||
} from '@/components/ui/popover'
|
} from '@/lib/registry/new-york/ui/popover'
|
||||||
|
|
||||||
const date = ref<Date>()
|
const date = ref<Date>()
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -18,5 +18,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<input v-model="modelValue" type="text" :class="cn(cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? ''))">
|
<input v-model="modelValue" type="text" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')">
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user