Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: alerts, avatar, asectRatio

Browse Source
This commit is contained in:
zernonia 2023-08-30 18:24:04 +08:00
parent 4f94bf62a4
commit 00cb94fe0d
15 changed files with 258 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/www/.vitepress/theme/components/ComponentPreview.vue
View File

@ -1,8 +1,8 @@
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
import Spinner from './Spinner.vue'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
import { cn } from '@/lib/utils'
import LucideSpinner from '~icons/lucide/loader-2'
const props = withDefaults(defineProps<{
name: string
@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{
}>(), { align: 'center' })
const Component = defineAsyncComponent({
loadingComponent: LucideSpinner,
loadingComponent: Spinner,
loader: () => import(`../../../src/lib/registry/default/examples/${props.name}.vue`),
timeout: 5000,
})

7
apps/www/.vitepress/theme/components/Spinner.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup lang="ts">
import LucideSpinner from '~icons/lucide/loader-2'
</script>
<template>
<LucideSpinner class="animate-spin" />
</template>

11
apps/www/.vitepress/theme/layout/DocsLayout.vue
View File

@ -4,6 +4,7 @@ import { docsConfig } from '../config/docs'
import TableOfContentVue from '../components/TableOfContent.vue'
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
import RadixIconsCode from '~icons/radix-icons/code'
import ChevronRightIcon from '~icons/lucide/chevron-right'
const $route = useRoute()
const { frontmatter } = useData()
@ -47,6 +48,16 @@ const { frontmatter } = useData()
<main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
<div class="mx-auto w-full min-w-0">
<div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
<div class="overflow-hidden text-ellipsis whitespace-nowrap">
Docs
</div>
<ChevronRightIcon class="h-4 w-4" />
<div class="font-medium text-foreground">
{{ frontmatter.title }}
</div>
</div>
<div class="space-y-2">
<h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
{{ frontmatter.title }}

47
apps/www/src/content/docs/components/alert.md Normal file
View File

@ -0,0 +1,47 @@
---
title: Alert
description: Displays a callout for user attention.
---
<ComponentPreview name="AlertDemo" >
<<< ../../../lib/registry/default/examples/AlertDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add alert
```
<ManualInstall>
1. Install `radix-vue`:
```bash
npm install radix-vue
```
2. Copy and paste the component source files linked at the top of this page into your project.
</ManualInstall>
## Usage
```vue
<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
</script>
<template>
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
</template>
```

48
apps/www/src/content/docs/components/aspect-ratio.md Normal file
View File

@ -0,0 +1,48 @@
---
title: Aspect Ratio
description: Displays content within a desired ratio.
source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/aspect-ratio
primitive: https://www.radix-vue.com/components/aspect-ratio.html
---
<ComponentPreview name="AspectRatioDemo" >
<<< ../../../lib/registry/default/examples/AspectRatioDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add aspect-ratio
```
<ManualInstall>
1. Install `radix-vue`:
```bash
npm install radix-vue
```
2. Copy and paste the component source files linked at the top of this page into your project.
</ManualInstall>
## Usage
```vue
<script setup lang="ts">
import { AspectRatio } from '@/lib/registry/default/ui/aspect-ratio'
</script>
<template>
<AspectRatio>
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
>
</AspectRatio>
</template>
```

47
apps/www/src/content/docs/components/avatar.md Normal file
View File

@ -0,0 +1,47 @@
---
title: Avatar
description: An image element with a fallback for representing the user.
source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/avatar
primitive: https://www.radix-vue.com/components/avatar.html
---
<ComponentPreview name="AvatarDemo" >
<<< ../../../lib/registry/default/examples/AvatarDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add avatar
```
<ManualInstall>
1. Install `radix-vue`:
```bash
npm install radix-vue
```
2. Copy and paste the component source files linked at the top of this page into your project.
</ManualInstall>
## Usage
```vue
<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
</script>
<template>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</template>
```

14
apps/www/src/lib/registry/default/examples/AlertDemo.vue Normal file
View File

@ -0,0 +1,14 @@
<script setup lang="ts">
import { Terminal } from 'lucide-vue-next'
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
</script>
<template>
<Alert>
<Terminal class="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
</template>

13
apps/www/src/lib/registry/default/examples/AspectRatioDemo.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import { AspectRatio } from '@/lib/registry/default/ui/aspect-ratio'
</script>
<template>
<AspectRatio :ratio="16 / 9" class="bg-muted">
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
class="rounded-md object-cover"
>
</AspectRatio>
</template>

10
apps/www/src/lib/registry/default/examples/AvatarDemo.vue Normal file
View File

@ -0,0 +1,10 @@
<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
</script>
<template>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</template>

75
apps/www/src/lib/registry/default/ui/alert/Alert.vue
View File

@ -1,78 +1,17 @@
<script setup lang="ts">
import { computed } from 'vue'
import { cva } from 'class-variance-authority'
import { X } from 'lucide-vue-next'
import { Button } from '../button'
import { alertVariants } from '.'
import { cn } from '@/lib/utils'
interface AlertProps {
variant?: 'primary' | 'success' | 'warning' | 'destructive' | 'info'
dismissible?: boolean
show?: boolean
interface Props {
variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']
class?: string
}
const props = withDefaults(defineProps<AlertProps>(), {
variant: 'primary',
dismissible: false,
show: true,
})
const emits = defineEmits<{
(e: 'update:show', value: boolean): void
(e: 'close'): void
}>()
const alertClass = computed(() => {
return cva(
'relative w-full rounded-lg p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
{
variants: {
variant: {
primary: 'border border-border text-foreground',
success:
'border dark:border-green-600 dark:text-green-600 text-green-500 border-green-500',
warning:
'border dark:border-yellow-600 dark:text-yellow-600 text-yellow-500 border-yellow-500',
destructive: 'border border-destructive text-destructive',
info: 'border dark:border-blue-600 dark:text-blue-600 text-blue-500 border-blue-500',
},
},
},
)({
variant: props.variant,
})
})
const show = computed({
get() {
return props.show
},
set(value) {
emits('update:show', value)
},
})
const props = defineProps<Props>()
</script>
<template>
<Transition
enter-active-class="transition ease-out duration-300"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition ease-in duration-300"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="show" :class="alertClass" role="alert">
<Button
v-if="props.dismissible"
variant="neutral"
class="absolute top-1.5 -right-0.5"
@click="emits('close')"
>
<X
class="w-4 h-4 text-muted transition-colors ease-in-out duration-300"
/>
</Button>
<div :class="cn(alertVariants({ variant }), props.class ?? '')">
<slot />
</div>
</Transition>
</template>

2
apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
View File

@ -7,7 +7,7 @@ const props = defineProps({
</script>
<template>
<div :class="cn('text-sm text-left leading-relaxed', props.class)">
<div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
<slot />
</div>
</template>

6
apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
View File

@ -1,5 +1,9 @@
<script setup lang="ts">
import { cn } from '@/lib/utils'
</script>
<template>
<h5 class="mb-1 font-medium leading-none tracking-tight">
<h5 :class="cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')">
<slot />
</h5>
</template>

18
apps/www/src/lib/registry/default/ui/alert/index.ts
View File

@ -1,3 +1,21 @@
import { cva } from 'class-variance-authority'
export { default as Alert } from './Alert.vue'
export { default as AlertTitle } from './AlertTitle.vue'
export { default as AlertDescription } from './AlertDescription.vue'
export const alertVariants = cva(
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
{
variants: {
variant: {
default: 'bg-background text-foreground',
destructive:
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
},
},
defaultVariants: {
variant: 'default',
},
},
)

38
apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
View File

@ -1,46 +1,22 @@
<script setup lang="ts">
import { computed } from 'vue'
import { AvatarRoot } from 'radix-vue'
import { cva } from 'class-variance-authority'
import { avatarVariant } from '.'
import { cn } from '@/lib/utils'
interface AvatarProps {
size?: 'sm' | 'base' | 'lg'
shape?: 'circle' | 'square'
interface Props {
size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']
shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']
class?: string
}
const props = withDefaults(defineProps<AvatarProps>(), {
name: 'Anonymous',
size: 'base',
const props = withDefaults(defineProps<Props>(), {
size: 'sm',
shape: 'circle',
})
const avatarClass = computed(() => {
return cva(
'inline-flex items-center justify-center font-normal text-foregorund select-none shrink-0 bg-secondary overflow-hidden',
{
variants: {
size: {
sm: 'h-10 w-10 text-xs',
base: 'h-16 w-16 text-2xl',
lg: 'h-32 w-32 text-5xl',
},
shape: {
circle: 'rounded-full',
square: 'rounded-md',
},
},
},
)({
size: props.size,
shape: props.shape,
})
})
</script>
<template>
<AvatarRoot :class="cn(avatarClass, props.class)">
<AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
<slot />
</AvatarRoot>
</template>

19
apps/www/src/lib/registry/default/ui/avatar/index.ts
View File

@ -1,3 +1,22 @@
import { cva } from 'class-variance-authority'
export { default as Avatar } from './Avatar.vue'
export { default as AvatarImage } from './AvatarImage.vue'
export { default as AvatarFallback } from './AvatarFallback.vue'
export const avatarVariant = cva(
'inline-flex items-center justify-center font-normal text-foregorund select-none shrink-0 bg-secondary overflow-hidden',
{
variants: {
size: {
sm: 'h-10 w-10 text-xs',
base: 'h-16 w-16 text-2xl',
lg: 'h-32 w-32 text-5xl',
},
shape: {
circle: 'rounded-full',
square: 'rounded-md',
},
},
},
)