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

feat(docs): add vertical Tabs example and components for account/password management

Browse Source
This commit is contained in:
romanhrynevych 2024-08-30 17:21:37 +03:00
parent 85b10641c2
commit 3bf4e4e561
5 changed files with 164 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/www/src/content/docs/components/tabs.md
View File

@ -39,3 +39,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
</Tabs> </Tabs>
</template> </template>
``` ```
## Examples
### Vertical
<ComponentPreview name="TabsVerticalDemo" />

78
apps/www/src/lib/registry/default/example/TabsVerticalDemo.vue Normal file
View File

@ -0,0 +1,78 @@
<script setup lang="ts">
import { Button } from '@/lib/registry/default/ui/button'
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/lib/registry/default/ui/card'
import { Input } from '@/lib/registry/default/ui/input'
import { Label } from '@/lib/registry/default/ui/label'
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from '@/lib/registry/default/ui/tabs'
</script>
<template>
<Tabs default-value="account" class="w-[400px]" orientation="vertical">
<TabsList class="grid w-full grid-cols-1">
<TabsTrigger value="account">
Accounts
</TabsTrigger>
<TabsTrigger value="password">
Password
</TabsTrigger>
</TabsList>
<TabsContent value="account">
<Card>
<CardHeader>
<CardTitle>Account</CardTitle>
<CardDescription>
Make changes to your account here. Click save when you're done.
</CardDescription>
</CardHeader>
<CardContent class="space-y-2">
<div class="space-y-1">
<Label for="name">Name</Label>
<Input id="name" default-value="Pedro Duarte" />
</div>
<div class="space-y-1">
<Label for="username">Username</Label>
<Input id="username" default-value="@peduarte" />
</div>
</CardContent>
<CardFooter>
<Button>Save changes</Button>
</CardFooter>
</Card>
</TabsContent>
<TabsContent value="password">
<Card>
<CardHeader>
<CardTitle>Password</CardTitle>
<CardDescription>
Change your password here. After saving, you'll be logged out.
</CardDescription>
</CardHeader>
<CardContent class="space-y-2">
<div class="space-y-1">
<Label for="current">Current password</Label>
<Input id="current" type="password" />
</div>
<div class="space-y-1">
<Label for="new">New password</Label>
<Input id="new" type="password" />
</div>
</CardContent>
<CardFooter>
<Button>Save password</Button>
</CardFooter>
</Card>
</TabsContent>
</Tabs>
</template>

2
apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
View File

@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
<TabsList <TabsList
v-bind="delegatedProps" v-bind="delegatedProps"
:class="cn( :class="cn(
'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground', 'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
props.class, props.class,
)" )"
> >

78
apps/www/src/lib/registry/new-york/example/TabsVerticalDemo.vue Normal file
View File

@ -0,0 +1,78 @@
<script setup lang="ts">
import { Button } from '@/lib/registry/new-york/ui/button'
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/lib/registry/new-york/ui/card'
import { Input } from '@/lib/registry/new-york/ui/input'
import { Label } from '@/lib/registry/new-york/ui/label'
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from '@/lib/registry/new-york/ui/tabs'
</script>
<template>
<Tabs default-value="account" class="w-[400px]" orientation="vertical">
<TabsList class="grid w-full grid-cols-1">
<TabsTrigger value="account">
Account
</TabsTrigger>
<TabsTrigger value="password">
Password
</TabsTrigger>
</TabsList>
<TabsContent value="account">
<Card>
<CardHeader>
<CardTitle>Account</CardTitle>
<CardDescription>
Make changes to your account here. Click save when you're done.
</CardDescription>
</CardHeader>
<CardContent class="space-y-2">
<div class="space-y-1">
<Label for="name">Name</Label>
<Input id="name" default-value="Pedro Duarte" />
</div>
<div class="space-y-1">
<Label for="username">Username</Label>
<Input id="username" default-value="@peduarte" />
</div>
</CardContent>
<CardFooter>
<Button>Save changes</Button>
</CardFooter>
</Card>
</TabsContent>
<TabsContent value="password">
<Card>
<CardHeader>
<CardTitle>Password</CardTitle>
<CardDescription>
Change your password here. After saving, you'll be logged out.
</CardDescription>
</CardHeader>
<CardContent class="space-y-2">
<div class="space-y-1">
<Label for="current">Current password</Label>
<Input id="current" type="password" />
</div>
<div class="space-y-1">
<Label for="new">New password</Label>
<Input id="new" type="password" />
</div>
</CardContent>
<CardFooter>
<Button>Save password</Button>
</CardFooter>
</Card>
</TabsContent>
</Tabs>
</template>

2
apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
View File

@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
<TabsList <TabsList
v-bind="delegatedProps" v-bind="delegatedProps"
:class="cn( :class="cn(
'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground', 'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
props.class, props.class,
)" )"
> >