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

feat: b,c components

Browse Source
This commit is contained in:
zernonia 2023-08-30 22:47:55 +08:00
parent 00cb94fe0d
commit b34e1dbc62
21 changed files with 482 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import { useData, useRoute } from 'vitepress'
import { docsConfig } from '../config/docs'
import TableOfContentVue from '../components/TableOfContent.vue'
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
import { Badge } from '@/lib/registry/default/ui/badge'
import RadixIconsCode from '~icons/radix-icons/code'
import ChevronRightIcon from '~icons/lucide/chevron-right'
@ -39,6 +40,10 @@ const { frontmatter } = useData()
}"
>
{{ doc.title }}
<Badge v-if="doc.label" class="ml-2" :variant="'secondary'">
{{ doc.label }}
</Badge>
</a>
</div>
</div>

10
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

@ -57,7 +57,7 @@ const links = [
<template>
<div class="flex min-h-screen flex-col bg-background">
<header class="sticky z-40 top-0 border-b border-border">
<header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
<div
class="max-w-8xl flex h-[58px] items-center justify-between p-4 mx-auto"
>
@ -88,8 +88,8 @@ const links = [
class="w-72 h-8 px-3 hidden lg:flex lg:justify-between lg:items-center"
>
<div class="flex items-center">
<LucideSearch class="w-4 h-4 mr-2 text-muted" />
<span class="text-muted"> Search for anything... </span>
<LucideSearch class="w-4 h-4 mr-2 text-muted-foreground" />
<span class="text-muted-foreground"> Search for anything... </span>
</div>
<div class="flex items-center gap-x-1">
<Kbd>⌘</Kbd>
@ -128,7 +128,7 @@ const links = [
</div>
</header>
<div class="flex-1">
<div class="flex-1 bg-background">
<component :is="'docs'" v-if="$route.path.includes('docs')">
<Content />
</component>
@ -140,7 +140,7 @@ const links = [
</main>
</div>
<footer class="z-40 border-t border-border text-foreground">
<footer class="bg-background z-40 border-t border-border text-foreground">
<div class="max-w-8xl h-20 flex items-center justify-between p-4 mx-auto">
<div class="flex justify-center items-center">
<span class="text-sm">

2
apps/www/package.json
View File

@ -17,7 +17,6 @@
"class-variance-authority": "^0.6.1",
"clsx": "^2.0.0",
"lucide-vue-next": "^0.268.0",
"radix-vue": "^0.1.24",
"tailwindcss-animate": "^1.0.6",
"vitepress": "^1.0.0-rc.10",
"vue": "^3.3.4"
@ -30,6 +29,7 @@
"@vitejs/plugin-vue": "^4.1.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.24",
"radix-vue": "^0.1.29",
"tailwind-merge": "^1.14.0",
"tailwindcss": "^3.3.2",
"typescript": "^5.0.2",

42
apps/www/src/content/docs/components/badge.md Normal file
View File

@ -0,0 +1,42 @@
---
title: Badge
description: Displays a badge or a component that looks like a badge.
---
<ComponentPreview name="BadgeDemo" >
<<< ../../../lib/registry/default/examples/BadgeDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add badge
```
<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 { Badge } from '@/lib/registry/default/ui/badge'
</script>
<template>
<Badge>Badge</Badge>
</template>
```

42
apps/www/src/content/docs/components/button.md Normal file
View File

@ -0,0 +1,42 @@
---
title: Button
description: Displays a button or a component that looks like a button.
---
<ComponentPreview name="ButtonDemo" >
<<< ../../../lib/registry/default/examples/ButtonDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add button
```
<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 { Button } from '@/lib/registry/default/ui/button'
</script>
<template>
<Button>Button</Button>
</template>
```

60
apps/www/src/content/docs/components/card.md Normal file
View File

@ -0,0 +1,60 @@
---
title: Card
description: Displays a card with header, content, and footer.
---
<ComponentPreview name="CardDemo" >
<<< ../../../lib/registry/default/examples/CardDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add card
```
<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 {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/lib/registry/default/ui/card'
</script>
<template>
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
Card Content
</CardContent>
<CardFooter>
Card Footer
</CardFooter>
</Card>
</template>
```

44
apps/www/src/content/docs/components/checkbox.md Normal file
View File

@ -0,0 +1,44 @@
---
title: Checkbox
description: A control that allows the user to toggle between checked and not checked.
source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/checkbox
primitive: https://www.radix-vue.com/components/checkbox.html
---
<ComponentPreview name="CheckboxDemo" >
<<< ../../../lib/registry/default/examples/CheckboxDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add checkbox
```
<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 { Checkbox } from '@/lib/registry/default/ui/checkbox'
</script>
<template>
<Checkbox id="terms" />
</template>
```

59
apps/www/src/content/docs/components/collapsible.md Normal file
View File

@ -0,0 +1,59 @@
---
title: Collapsible
description: An interactive component which expands/collapses a panel.
source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/collapsible
primitive: https://www.radix-vue.com/components/collapsible.html
---
<ComponentPreview name="CollapsibleDemo" >
<<< ../../../lib/registry/default/examples/CollapsibleDemo.vue
</ComponentPreview>
## Installation
```bash
npx shadcn-vue@latest add collapsible
```
<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 {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/lib/registry/default/ui/collapsible'
const isOpen = ref(false)
</script>
<template>
<Collapsible
v-model:open="isOpen"
>
<CollapsibleTrigger>
Trigger
</CollapsibleTrigger>
<CollapsibleContent>
Content
</CollapsibleContent>
</Collapsible>
</template>
```

7
apps/www/src/lib/registry/default/examples/BadgeDemo.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup lang="ts">
import { Badge } from '@/lib/registry/default/ui/badge'
</script>
<template>
<Badge>Badge</Badge>
</template>

7
apps/www/src/lib/registry/default/examples/ButtonDemo.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup lang="ts">
import { Button } from '@/lib/registry/default/ui/button'
</script>
<template>
<Button>Button</Button>
</template>

74
apps/www/src/lib/registry/default/examples/CardDemo.vue Normal file
View File

@ -0,0 +1,74 @@
<script setup lang="ts">
import { BellRing, Check } from 'lucide-vue-next'
import { Button } from '@/lib/registry/default/ui/button'
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/lib/registry/default/ui/card'
import { Switch } from '@/lib/registry/default/ui/switch'
import { cn } from '@/lib/utils'
const notifications = [
{
title: 'Your call has been confirmed.',
description: '1 hour ago',
},
{
title: 'You have a new message!',
description: '1 hour ago',
},
{
title: 'Your subscription is expiring soon!',
description: '2 hours ago',
},
]
</script>
<template>
<Card :class="cn('w-[380px]', $attrs.class ?? '')">
<CardHeader>
<CardTitle>Notifications</CardTitle>
<CardDescription>You have 3 unread messages.</CardDescription>
</CardHeader>
<CardContent class="grid gap-4">
<div class=" flex items-center space-x-4 rounded-md border p-4">
<BellRing />
<div class="flex-1 space-y-1">
<p class="text-sm font-medium leading-none">
Push Notifications
</p>
<p class="text-sm text-muted-foreground">
Send notifications to device.
</p>
</div>
<Switch />
</div>
<div>
<div
v-for="(notification, index) in notifications" :key="index"
class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
>
<span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
<div class="space-y-1">
<p class="text-sm font-medium leading-none">
{{ notification.title }}
</p>
<p class="text-sm text-muted-foreground">
{{ notification.description }}
</p>
</div>
</div>
</div>
</CardContent>
<CardFooter>
<Button class="w-full">
<Check class="mr-2 h-4 w-4" /> Mark all as read
</Button>
</CardFooter>
</Card>
</template>

15
apps/www/src/lib/registry/default/examples/CheckboxDemo.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import { Checkbox } from '@/lib/registry/default/ui/checkbox'
</script>
<template>
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<label
htmlFor="terms"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Accept terms and conditions
</label>
</div>
</template>

43
apps/www/src/lib/registry/default/examples/CollapsibleDemo.vue Normal file
View File

@ -0,0 +1,43 @@
<script setup lang="ts">
import { ChevronsUpDown } from 'lucide-vue-next'
import { ref } from 'vue'
import { Button } from '@/lib/registry/default/ui/button'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/lib/registry/default/ui/collapsible'
const isOpen = ref(false)
</script>
<template>
<Collapsible
v-model:open="isOpen"
class="w-[350px] space-y-2"
>
<div class="flex items-center justify-between space-x-4 px-4">
<h4 class="text-sm font-semibold">
@peduarte starred 3 repositories
</h4>
<CollapsibleTrigger as-child>
<Button variant="ghost" size="sm" class="w-9 p-0">
<ChevronsUpDown class="h-4 w-4" />
<span class="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@radix-ui/primitives
</div>
<CollapsibleContent class="space-y-2">
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@radix-ui/colors
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@stitches/react
</div>
</CollapsibleContent>
</Collapsible>
</template>

42
apps/www/src/lib/registry/default/ui/badge/Badge.vue
View File

@ -1,42 +1,18 @@
<script setup lang="ts">
import { computed } from 'vue'
import { cva } from 'class-variance-authority'
import type { VariantProps } from 'class-variance-authority'
import { badgeVariants } from '.'
import { cn } from '@/lib/utils'
interface BadgeProps {
variant?: 'primary' | 'secondary' | 'outline' | 'destructive'
as?: string
class?: string
interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
interface Props {
variant?: BadgeVariantProps['variant']
}
const props = withDefaults(defineProps<BadgeProps>(), {
variant: 'primary',
as: 'span',
})
const badgeClass = computed(() => {
return cva(
'inline-flex items-center cursor-default text-xs font-semibold px-2.5 py-0.5 rounded-md transition-colors ease-in-out duration-300',
{
variants: {
variant: {
primary: 'bg-primary text-primary-foreground hover:bg-primary-hover',
secondary: 'bg-secondary text-foreground hover:bg-secondary-hover',
outline:
'border border-border text-foreground shadow-sm hover:bg-outline-hover',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive-hover',
},
},
},
)({
variant: props.variant,
})
})
defineProps<Props>()
</script>
<template>
<component :is="props.as" :class="cn(badgeClass, props.class)">
<div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
<slot />
</component>
</div>
</template>

22
apps/www/src/lib/registry/default/ui/badge/index.ts
View File

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

2
apps/www/src/lib/registry/default/ui/card/Card.vue
View File

@ -13,7 +13,7 @@ const props = defineProps({
<div
:class="
cn(
'bg-background text-foreground border border-border rounded-xl shadow-md',
'rounded-lg border bg-card text-card-foreground shadow-sm',
props.class,
)
"

2
apps/www/src/lib/registry/default/ui/card/CardDescription.vue
View File

@ -10,7 +10,7 @@ const props = defineProps({
</script>
<template>
<p :class="cn('text-muted text-sm', props.class)">
<p :class="cn('text-sm text-muted-foreground', props.class)">
<slot />
</p>
</template>

50
apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
View File

@ -1,42 +1,24 @@
<script setup lang="ts">
import RadixIconsCheck from '~icons/radix-icons/check'
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
import { Check } from 'lucide-vue-next'
import { cn, useEmitAsProps } from '@/lib/utils'
interface CheckBoxProps {
id?: string
modelValue?: boolean
required?: boolean
disabled?: boolean
invalid?: boolean
checked?: boolean
}
const props = defineProps<CheckboxRootProps>()
const emits = defineEmits<CheckboxRootEmits>()
const props = defineProps<CheckBoxProps>()
const emit = defineEmits(['update:modelValue'])
const emitsAsProps = useEmitAsProps(emits)
</script>
<template>
<div class="flex items-center">
<input
:id="props.id"
type="checkbox"
:value="props.modelValue"
:required="props.required"
:disabled="props.disabled"
:class="{
'ring-destructive-light dark:ring-destructive': props.invalid,
'!cursor-not-allowed opacity-50': props.disabled,
}"
:checked="props.checked"
class="w-4 h-4 peer cursor-pointer shrink-0 relative checked:bg-primary appearance-none text-foreground border border-primary rounded"
@input="
($event) =>
emit('update:modelValue', ($event.target as HTMLInputElement).checked)
"
<CheckboxRoot
v-bind="{ ...props, ...emitsAsProps }"
:class="
cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
$attrs.class ?? '')"
>
<RadixIconsCheck
class="absolute pointer-events-none hidden peer-checked:block w-4 h-3 text-background"
/>
</div>
<CheckboxIndicator class="flex items-center justify-center text-current">
<Check class="h-4 w-4" />
</CheckboxIndicator>
</CheckboxRoot>
</template>

11
apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
View File

@ -1,11 +1,16 @@
<script setup lang="ts">
import { CollapsibleRoot, type CollapsibleRootProps } from 'radix-vue'
import { CollapsibleRoot } from 'radix-vue'
import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
import { useEmitAsProps } from '@/lib/utils'
const props = defineProps<CollapsibleRootProps>()
const emits = defineEmits<CollapsibleRootEmits>()
const emitsAsProps = useEmitAsProps(emits)
</script>
<template>
<CollapsibleRoot v-bind="props">
<slot />
<CollapsibleRoot v-slot="{ open }" v-bind="{ ...props, ...emitsAsProps }">
<slot :open="open" />
</CollapsibleRoot>
</template>

10
apps/www/tailwind.config.js
View File

@ -66,10 +66,20 @@ export default {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: 0 },
},
'collapsible-down': {
from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' },
},
'collapsible-up': {
from: { height: 'var(--radix-collapsible-content-height)' },
to: { height: 0 },
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-in-out',
'accordion-up': 'accordion-up 0.2s ease-in-out',
'collapsible-down': 'collapsible-down 0.2s ease-in-out',
'collapsible-up': 'collapsible-up 0.2s ease-in-out',
},
},
},

21
pnpm-lock.yaml
View File

@ -59,9 +59,6 @@ importers:
lucide-vue-next:
specifier: ^0.268.0
version: 0.268.0(vue@3.3.4)
radix-vue:
specifier: ^0.1.24
version: 0.1.24(vue@3.3.4)
tailwindcss-animate:
specifier: ^1.0.6
version: 1.0.6(tailwindcss@3.3.2)
@ -93,6 +90,9 @@ importers:
postcss:
specifier: ^8.4.24
version: 8.4.24
radix-vue:
specifier: ^0.1.29
version: 0.1.29(vue@3.3.4)
tailwind-merge:
specifier: ^1.14.0
version: 1.14.0
@ -1491,18 +1491,18 @@ packages:
resolution: {integrity: sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==}
dependencies:
'@floating-ui/utils': 0.1.1
dev: false
dev: true
/@floating-ui/dom@1.5.1:
resolution: {integrity: sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==}
dependencies:
'@floating-ui/core': 1.4.1
'@floating-ui/utils': 0.1.1
dev: false
dev: true
/@floating-ui/utils@0.1.1:
resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==}
dev: false
dev: true
/@floating-ui/vue@1.0.2(vue@3.3.4):
resolution: {integrity: sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==}
@ -1512,7 +1512,7 @@ packages:
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
dev: true
/@humanwhocodes/config-array@0.11.10:
resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
@ -5438,15 +5438,15 @@ packages:
engines: {node: '>=8'}
dev: true
/radix-vue@0.1.24(vue@3.3.4):
resolution: {integrity: sha512-XKEPi4K/DfTRHMZ6Y9PEP87Xn+zwFahhJFp/8vhc0DQEx/flev8izVYll6EwH931Tt7dwm+Vy1/edkxBnjJXkA==}
/radix-vue@0.1.29(vue@3.3.4):
resolution: {integrity: sha512-CMxjLRWykFgHIUm9y2nyWtDfcAfgaDeS2A8KabjBzNlW1csl9nmuByGjMD5VBsbA0YBKk+bgtVLychr/oPcAjQ==}
dependencies:
'@floating-ui/dom': 1.5.1
'@floating-ui/vue': 1.0.2(vue@3.3.4)
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
dev: true
/rc9@2.1.1:
resolution: {integrity: sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==}
@ -6719,7 +6719,6 @@ packages:
optional: true
dependencies:
vue: 3.3.4
dev: false
/vue-eslint-parser@9.3.1(eslint@8.43.0):
resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}