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

docs: add previous components back

Browse Source
This commit is contained in:
zernonia 2023-08-30 17:43:30 +08:00
parent 0db284d190
commit eb324d8e97
15 changed files with 280 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
apps/www/.vitepress/theme/style.css
View File

@ -7,68 +7,49 @@
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5% 64.9%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
}
--ring: 240 3.7% 15.9%;
}
}
@layer base {
* {
@apply border-border;
}
@ -132,11 +113,8 @@
pre code {
@apply relative rounded font-mono text-sm ;
}
pre code .line {
@apply px-4 min-h-[1.5rem] py-0.5 w-full inline-block;
}
}
@layer utilities {
.step {
@ -148,6 +126,11 @@
@apply ml-[-50px] mt-[-4px];
content: counter(step);
}
pre code .line {
@apply px-4 min-h-[1.5rem] !py-0.5 w-full inline-block;
}
}
@media (max-width: 640px) {

71
apps/www/src/content/docs/components/alert-dialog.md Normal file
View File

@ -0,0 +1,71 @@
---
title: Alert Dialog
description: A modal dialog that interrupts the user with important content and expects a response.
source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/alert-dialog
primitive: https://www.radix-vue.com/components/alert-dialog.html
---
<ComponentPreview name="AlertDialogDemo" >
<<< ../../../lib/registry/default/examples/AlertDialogDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add alert-dialog
```
<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 {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/lib/registry/default/ui/alert-dialog'
</script>
<template>
<AlertDialog>
<AlertDialogTrigger>
Open
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</template>
```

68
apps/www/src/content/docs/components/dialog.md Normal file
View File

@ -0,0 +1,68 @@
---
title: Dialog
description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/dialog
primitive: https://www.radix-vue.com/components/dialog.html
---
<ComponentPreview name="DialogDemo" >
<<< ../../../lib/registry/default/examples/DialogDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add dialog
```
<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 {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/lib/registry/default/ui/dialog'
</script>
<template>
<Dialog>
<DialogTrigger>
Edit Profile
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here. Click save when you're done.
</DialogDescription>
</DialogHeader>
<DialogFooter>
Save changes
</DialogFooter>
</DialogContent>
</Dialog>
</template>
```

53
apps/www/src/content/docs/components/popover.md Normal file
View File

@ -0,0 +1,53 @@
---
title: Popover
description: Displays rich content in a portal, triggered by a button.
source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/popover
primitive: https://www.radix-vue.com/components/popover.html
---
<ComponentPreview name="PopoverDemo" >
<<< ../../../lib/registry/default/examples/PopoverDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add popover
```
<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 {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/lib/registry/default/ui/popover'
</script>
<template>
<Popover>
<PopoverTrigger>
Open popover
</PopoverTrigger>
<PopoverContent />
</Popover>
</template>
```

2
apps/www/src/lib/registry/default/examples/PopoverDemo.vue
View File

@ -16,7 +16,7 @@ import { Input } from '@/lib/registry/default/ui/input'
Open popover
</Button>
</PopoverTrigger>
<PopoverContent class="w-80" @open-auto-focus.prevent>
<PopoverContent class="w-80">
<div class="grid gap-4">
<div class="space-y-2">
<h4 class="font-medium leading-none">

4
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
View File

@ -1,11 +1,13 @@
<script setup lang="ts">
import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/lib/registry/default/ui/button'
const props = defineProps<AlertDialogActionProps>()
</script>
<template>
<AlertDialogAction v-bind="props">
<AlertDialogAction v-bind="props" :class="cn(buttonVariants(), $attrs.class ?? '')">
<slot />
</AlertDialogAction>
</template>

4
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
View File

@ -1,11 +1,13 @@
<script setup lang="ts">
import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/lib/registry/default/ui/button'
const props = defineProps<AlertDialogCancelProps>()
</script>
<template>
<AlertDialogCancel v-bind="props">
<AlertDialogCancel v-bind="props" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')">
<slot />
</AlertDialogCancel>
</template>

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
View File

@ -13,7 +13,7 @@ const props = defineProps<AlertDialogContentProps & { class?: string }>()
<template>
<AlertDialogPortal>
<AlertDialogOverlay
class="fixed inset-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
class="fixed inset-0 z-50 bg-white/80 dark:bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
/>
<AlertDialogContent
v-bind="props"

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
View File

@ -10,7 +10,7 @@ const props = defineProps<AlertDialogDescriptionProps & { class?: string }>()
<template>
<AlertDialogDescription
:class="cn('text-muted text-sm', props.class)"
:class="cn('text-muted-foreground text-sm', props.class)"
:as-child="props.asChild"
>
<slot />

55
apps/www/src/lib/registry/default/ui/button/Button.vue
View File

@ -1,63 +1,22 @@
<script setup lang="ts">
import { computed } from 'vue'
import { cva } from 'class-variance-authority'
import { buttonVariants } from '.'
import { cn } from '@/lib/utils'
interface ButtonProps {
class?: string
variant?:
| 'primary'
| 'secondary'
| 'destructive'
| 'outline'
| 'ghost'
| 'link'
| 'neutral'
disabled?: boolean | undefined
interface Props {
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
as?: string
}
const props = withDefaults(defineProps<ButtonProps>(), {
variant: 'primary',
disabled: false,
withDefaults(defineProps<Props>(), {
as: 'button',
})
const buttonClass = computed(() => {
return cva(
'inline-flex items-center justify-center text-sm px-4 py-2.5 rounded-md font-medium transition-colors ease-in-out duration-300',
{
variants: {
variant: {
primary:
'bg-primary text-primary-foreground enabled:hover:bg-primary-hover',
secondary:
'bg-secondary text-secondary-foreground enabled:hover:bg-secondary-hover',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive-hover',
outline:
'border border-border text-foreground shadow-sm hover:bg-outline-hover',
ghost: 'text-foreground hover:bg-outline-hover',
link: 'text-foreground hover:underline hover:underline-offset-4',
neutral: '',
},
disabled: {
true: '!opacity-50 !cursor-not-allowed',
},
},
},
)({
variant: props.variant,
disabled: props.disabled,
})
})
</script>
<template>
<component
:is="props.as"
:class="cn(buttonClass, props.class)"
:disabled="props.disabled"
:is="as"
:class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
>
<slot />
</component>

31
apps/www/src/lib/registry/default/ui/button/index.ts
View File

@ -1 +1,32 @@
import { cva } from 'class-variance-authority'
export { default as Button } from './Button.vue'
export 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',
},
},
)

13
apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
View File

@ -2,36 +2,41 @@
import {
DialogClose,
DialogContent,
type DialogContentEmits,
type DialogContentProps,
DialogOverlay,
DialogPortal,
} from 'radix-vue'
import { X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { cn, useEmitAsProps } from '@/lib/utils'
const props = defineProps<DialogContentProps & { class?: string }>()
const emits = defineEmits<DialogContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
</script>
<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
class="fixed inset-0 z-50 bg-white/80 dark:bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
/>
<DialogContent
:as-child="props.asChild"
:class="
cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
props.class,
)
"
v-bind="{ ...props, ...emitsAsProps }"
>
<slot />
<DialogClose
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
>
<X class="w-4 h-4 text-muted" />
<X class="w-4 h-4" />
<span className="sr-only">Close</span>
</DialogClose>
</DialogContent>
</DialogPortal>

2
apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
View File

@ -8,7 +8,7 @@ const props = defineProps<DialogDescriptionProps & { class?: string }>()
<template>
<DialogDescription
v-bind="props"
:class="cn('text-muted text-sm', props.class)"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot />
</DialogDescription>

65
apps/www/src/lib/registry/default/ui/input/Input.vue
View File

@ -1,68 +1,11 @@
<script setup lang="ts">
import { AlertTriangle } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
interface InputProps {
id?: string
value?: string
type?: string
placeholder?: string
required?: boolean
disabled?: boolean
invalid?: boolean
helperText?: string
class?: string
}
const props = withDefaults(defineProps<InputProps>(), {
id: '',
value: '',
type: 'text',
placeholder: '',
required: false,
disabled: false,
invalid: false,
helperText: '',
})
const emit = defineEmits(['update:value'])
function handleInput(event: Event) {
emit('update:value', (event.target as HTMLInputElement).value)
}
defineProps<{
defaultValue: string | number
}>()
</script>
<template>
<div :class="cn('relative', props.class)">
<input
:id="props.id"
:value="props.value"
:type="props.type"
:required="props.required"
:placeholder="props.placeholder"
:disabled="props.disabled"
:class="[
props.invalid
? '!ring-destructive ring-2 placeholder:!text-destructive'
: '',
props.disabled ? 'cursor-not-allowed opacity-50' : '',
cn(
'px-3 h-9 bg-transparent block w-full outline-none focus:ring-2 focus:ring-accent ring-secondary placeholder:text-muted rounded-md text-sm ring-1 text-foreground',
props.class,
),
]"
@input="handleInput"
>
<div
class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
>
<AlertTriangle v-if="props.invalid" class="w-4 h-4 text-destructive" />
</div>
</div>
<p
v-if="props.helperText && !props.invalid"
class="gap-1 leading-5 text-[13px] text-muted"
>
{{ props.helperText }}
</p>
<input type="text" :value="defaultValue" :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>

9
apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
View File

@ -1,10 +1,11 @@
<script setup lang="ts">
import {
PopoverContent,
type PopoverContentEmits,
type PopoverContentProps,
PopoverPortal,
} from 'radix-vue'
import { cn } from '@/lib/utils'
import { cn, useEmitAsProps } from '@/lib/utils'
const props = withDefaults(
defineProps<PopoverContentProps & { class?: string }>(),
@ -12,15 +13,17 @@ const props = withDefaults(
sideOffset: 4,
},
)
const emits = defineEmits<PopoverContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
</script>
<template>
<PopoverPortal>
<PopoverContent
v-bind="props"
v-bind="{ ...props, ...emitsAsProps, $attrs }"
:class="
cn(
'z-50 w-[var(--radix-popover-trigger-width)] rounded-md border border-border bg-background shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class,
)
"