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

docs: adding more examples for DropdownMenu and Select components

Browse Source
This commit is contained in:
Saeid Zareie 2024-03-05 16:52:07 +03:30 committed by GitHub
parent 75cf9c40c4
commit c487137ac5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 477 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/www/__registry__/index.ts
View File

@ -423,6 +423,13 @@ export const Index = {
component: () => import("../src/lib/registry/default/example/DrawerDialog.vue").then((m) => m.default), component: () => import("../src/lib/registry/default/example/DrawerDialog.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/DrawerDialog.vue"], files: ["../src/lib/registry/default/example/DrawerDialog.vue"],
}, },
"DropdownMenuCheckboxes": {
name: "DropdownMenuCheckboxes",
type: "components:example",
registryDependencies: ["button","dropdown-menu"],
component: () => import("../src/lib/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/DropdownMenuCheckboxes.vue"],
},
"DropdownMenuDemo": { "DropdownMenuDemo": {
name: "DropdownMenuDemo", name: "DropdownMenuDemo",
type: "components:example", type: "components:example",
@ -430,6 +437,13 @@ export const Index = {
component: () => import("../src/lib/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default), component: () => import("../src/lib/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/DropdownMenuDemo.vue"], files: ["../src/lib/registry/default/example/DropdownMenuDemo.vue"],
}, },
"DropdownMenuRadioGroup": {
name: "DropdownMenuRadioGroup",
type: "components:example",
registryDependencies: ["button","dropdown-menu"],
component: () => import("../src/lib/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/DropdownMenuRadioGroup.vue"],
},
"HoverCardDemo": { "HoverCardDemo": {
name: "HoverCardDemo", name: "HoverCardDemo",
type: "components:example", type: "components:example",
@ -605,6 +619,13 @@ export const Index = {
component: () => import("../src/lib/registry/default/example/SelectForm.vue").then((m) => m.default), component: () => import("../src/lib/registry/default/example/SelectForm.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/SelectForm.vue"], files: ["../src/lib/registry/default/example/SelectForm.vue"],
}, },
"SelectScrollable": {
name: "SelectScrollable",
type: "components:example",
registryDependencies: ["select"],
component: () => import("../src/lib/registry/default/example/SelectScrollable.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/SelectScrollable.vue"],
},
"SeparatorDemo": { "SeparatorDemo": {
name: "SeparatorDemo", name: "SeparatorDemo",
type: "components:example", type: "components:example",
@ -1411,6 +1432,13 @@ export const Index = {
component: () => import("../src/lib/registry/new-york/example/DrawerDialog.vue").then((m) => m.default), component: () => import("../src/lib/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/DrawerDialog.vue"], files: ["../src/lib/registry/new-york/example/DrawerDialog.vue"],
}, },
"DropdownMenuCheckboxes": {
name: "DropdownMenuCheckboxes",
type: "components:example",
registryDependencies: ["button","dropdown-menu"],
component: () => import("../src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue"],
},
"DropdownMenuDemo": { "DropdownMenuDemo": {
name: "DropdownMenuDemo", name: "DropdownMenuDemo",
type: "components:example", type: "components:example",
@ -1418,6 +1446,13 @@ export const Index = {
component: () => import("../src/lib/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default), component: () => import("../src/lib/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/DropdownMenuDemo.vue"], files: ["../src/lib/registry/new-york/example/DropdownMenuDemo.vue"],
}, },
"DropdownMenuRadioGroup": {
name: "DropdownMenuRadioGroup",
type: "components:example",
registryDependencies: ["button","dropdown-menu"],
component: () => import("../src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue"],
},
"HoverCardDemo": { "HoverCardDemo": {
name: "HoverCardDemo", name: "HoverCardDemo",
type: "components:example", type: "components:example",
@ -1593,6 +1628,13 @@ export const Index = {
component: () => import("../src/lib/registry/new-york/example/SelectForm.vue").then((m) => m.default), component: () => import("../src/lib/registry/new-york/example/SelectForm.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/SelectForm.vue"], files: ["../src/lib/registry/new-york/example/SelectForm.vue"],
}, },
"SelectScrollable": {
name: "SelectScrollable",
type: "components:example",
registryDependencies: ["select"],
component: () => import("../src/lib/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/SelectScrollable.vue"],
},
"SeparatorDemo": { "SeparatorDemo": {
name: "SeparatorDemo", name: "SeparatorDemo",
type: "components:example", type: "components:example",

19
apps/www/src/content/docs/components/dropdown-menu.md
View File

@ -1,18 +1,17 @@
--- ---
title: Dropdown Menu title: Dropdown Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
source: apps/www/src/lib/registry/default/ui/dropdown-menu source: apps/www/src/lib/registry/default/ui/dropdown-menu
primitive: https://www.radix-vue.com/components/dropdown-menu.html primitive: https://www.radix-vue.com/components/dropdown-menu.html
--- ---
<ComponentPreview name="DropdownMenuDemo" />
<ComponentPreview name="DropdownMenuDemo" />
## Installation ## Installation
```bash ```bash
npx shadcn-vue@latest add dropdown-menu npx shadcn-vue@latest add dropdown-menu
``` ```
## Usage ## Usage
```vue ```vue
@ -40,4 +39,14 @@ import {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</template> </template>
``` ```
## Examples
### Checkboxes
<ComponentPreview name="DropdownMenuCheckboxes" />
### Radio Group
<ComponentPreview name="DropdownMenuRadioGroup" />

7
apps/www/src/content/docs/components/input.md
View File

@ -3,8 +3,7 @@ title: Input
description: Displays a form input field or a component that looks like an input field. description: Displays a form input field or a component that looks like an input field.
--- ---
<ComponentPreview name="InputDemo" class="max-w-xs" />
<ComponentPreview name="InputDemo" class="max-w-xs" />
## Installation ## Installation
@ -26,8 +25,6 @@ npx shadcn-vue@latest add input
</Steps> </Steps>
</template> </template>
</TabPreview> </TabPreview>
@ -43,6 +40,8 @@ import { Input } from '@/components/ui/input'
</template> </template>
``` ```
## Examples
### Default ### Default
<ComponentPreview name="InputDemo" class="max-w-xs" /> <ComponentPreview name="InputDemo" class="max-w-xs" />

10
apps/www/src/content/docs/components/select.md
View File

@ -1,16 +1,14 @@
--- ---
title: Select title: Select
description: Displays a list of options for the user to pick from—triggered by a button. description: Displays a list of options for the user to pick from—triggered by a button.
source: apps/www/src/lib/registry/default/ui/select source: apps/www/src/lib/registry/default/ui/select
primitive: https://www.radix-vue.com/components/select.html primitive: https://www.radix-vue.com/components/select.html
--- ---
<ComponentPreview name="SelectDemo" />
<ComponentPreview name="SelectDemo" />
## Installation ## Installation
```bash ```bash
npx shadcn-vue@latest add select npx shadcn-vue@latest add select
``` ```
@ -49,6 +47,10 @@ import {
## Examples ## Examples
### Scrollable
<ComponentPreview name="SelectScrollable" />
### Form ### Form
<ComponentPreview name="SelectForm" /> <ComponentPreview name="SelectForm" />

49
apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue Normal file
View File

@ -0,0 +1,49 @@
<script lang="ts" setup>
import type { DropdownMenuCheckboxItemProps } from 'radix-vue'
import { ref } from 'vue'
import { Button } from '@/lib/registry/default/ui/button'
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/lib/registry/default/ui/dropdown-menu'
type Checked = DropdownMenuCheckboxItemProps['checked']
const showStatusBar = ref<Checked>(true)
const showActivityBar = ref<Checked>(false)
const showPanel = ref<Checked>(false)
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline">
Open
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-56">
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
v-model:checked="showStatusBar"
>
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
v-model:checked="showActivityBar"
disabled
>
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
v-model:checked="showPanel"
>
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
</template>

40
apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue Normal file
View File

@ -0,0 +1,40 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { Button } from '@/lib/registry/default/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/lib/registry/default/ui/dropdown-menu'
const position = ref('bottom')
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline">
Open
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-56">
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup v-model="position">
<DropdownMenuRadioItem value="top">
Top
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right">
Right
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</template>

117
apps/www/src/lib/registry/default/example/SelectScrollable.vue Normal file
View File

@ -0,0 +1,117 @@
<script lang="ts" setup>
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from '@/lib/registry/default/ui/select'
</script>
<template>
<Select>
<SelectTrigger class="w-[280px]">
<SelectValue placeholder="Select a timezone" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>North America</SelectLabel>
<SelectItem value="est">
Eastern Standard Time (EST)
</SelectItem>
<SelectItem value="cst">
Central Standard Time (CST)
</SelectItem>
<SelectItem value="mst">
Mountain Standard Time (MST)
</SelectItem>
<SelectItem value="pst">
Pacific Standard Time (PST)
</SelectItem>
<SelectItem value="akst">
Alaska Standard Time (AKST)
</SelectItem>
<SelectItem value="hst">
Hawaii Standard Time (HST)
</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>Europe & Africa</SelectLabel>
<SelectItem value="gmt">
Greenwich Mean Time (GMT)
</SelectItem>
<SelectItem value="cet">
Central European Time (CET)
</SelectItem>
<SelectItem value="eet">
Eastern European Time (EET)
</SelectItem>
<SelectItem value="west">
Western European Summer Time (WEST)
</SelectItem>
<SelectItem value="cat">
Central Africa Time (CAT)
</SelectItem>
<SelectItem value="eat">
East Africa Time (EAT)
</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>Asia</SelectLabel>
<SelectItem value="msk">
Moscow Time (MSK)
</SelectItem>
<SelectItem value="ist">
India Standard Time (IST)
</SelectItem>
<SelectItem value="cst_china">
China Standard Time (CST)
</SelectItem>
<SelectItem value="jst">
Japan Standard Time (JST)
</SelectItem>
<SelectItem value="kst">
Korea Standard Time (KST)
</SelectItem>
<SelectItem value="ist_indonesia">
Indonesia Central Standard Time (WITA)
</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>Australia & Pacific</SelectLabel>
<SelectItem value="awst">
Australian Western Standard Time (AWST)
</SelectItem>
<SelectItem value="acst">
Australian Central Standard Time (ACST)
</SelectItem>
<SelectItem value="aest">
Australian Eastern Standard Time (AEST)
</SelectItem>
<SelectItem value="nzst">
New Zealand Standard Time (NZST)
</SelectItem>
<SelectItem value="fjt">
Fiji Time (FJT)
</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>South America</SelectLabel>
<SelectItem value="art">
Argentina Time (ART)
</SelectItem>
<SelectItem value="bot">
Bolivia Time (BOT)
</SelectItem>
<SelectItem value="brt">
Brasilia Time (BRT)
</SelectItem>
<SelectItem value="clt">
Chile Standard Time (CLT)
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</template>

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

@ -0,0 +1,49 @@
<script lang="ts" setup>
import type { DropdownMenuCheckboxItemProps } from 'radix-vue'
import { ref } from 'vue'
import { Button } from '@/lib/registry/new-york/ui/button'
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/lib/registry/new-york/ui/dropdown-menu'
type Checked = DropdownMenuCheckboxItemProps['checked']
const showStatusBar = ref<Checked>(true)
const showActivityBar = ref<Checked>(false)
const showPanel = ref<Checked>(false)
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline">
Open
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-56">
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
v-model:checked="showStatusBar"
>
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
v-model:checked="showActivityBar"
disabled
>
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
v-model:checked="showPanel"
>
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
</template>

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

@ -0,0 +1,40 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { Button } from '@/lib/registry/new-york/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/lib/registry/new-york/ui/dropdown-menu'
const position = ref('bottom')
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline">
Open
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-56">
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup v-model="position">
<DropdownMenuRadioItem value="top">
Top
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right">
Right
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</template>

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

@ -0,0 +1,117 @@
<script lang="ts" setup>
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from '@/lib/registry/new-york/ui/select'
</script>
<template>
<Select>
<SelectTrigger class="w-[280px]">
<SelectValue placeholder="Select a timezone" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>North America</SelectLabel>
<SelectItem value="est">
Eastern Standard Time (EST)
</SelectItem>
<SelectItem value="cst">
Central Standard Time (CST)
</SelectItem>
<SelectItem value="mst">
Mountain Standard Time (MST)
</SelectItem>
<SelectItem value="pst">
Pacific Standard Time (PST)
</SelectItem>
<SelectItem value="akst">
Alaska Standard Time (AKST)
</SelectItem>
<SelectItem value="hst">
Hawaii Standard Time (HST)
</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>Europe & Africa</SelectLabel>
<SelectItem value="gmt">
Greenwich Mean Time (GMT)
</SelectItem>
<SelectItem value="cet">
Central European Time (CET)
</SelectItem>
<SelectItem value="eet">
Eastern European Time (EET)
</SelectItem>
<SelectItem value="west">
Western European Summer Time (WEST)
</SelectItem>
<SelectItem value="cat">
Central Africa Time (CAT)
</SelectItem>
<SelectItem value="eat">
East Africa Time (EAT)
</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>Asia</SelectLabel>
<SelectItem value="msk">
Moscow Time (MSK)
</SelectItem>
<SelectItem value="ist">
India Standard Time (IST)
</SelectItem>
<SelectItem value="cst_china">
China Standard Time (CST)
</SelectItem>
<SelectItem value="jst">
Japan Standard Time (JST)
</SelectItem>
<SelectItem value="kst">
Korea Standard Time (KST)
</SelectItem>
<SelectItem value="ist_indonesia">
Indonesia Central Standard Time (WITA)
</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>Australia & Pacific</SelectLabel>
<SelectItem value="awst">
Australian Western Standard Time (AWST)
</SelectItem>
<SelectItem value="acst">
Australian Central Standard Time (ACST)
</SelectItem>
<SelectItem value="aest">
Australian Eastern Standard Time (AEST)
</SelectItem>
<SelectItem value="nzst">
New Zealand Standard Time (NZST)
</SelectItem>
<SelectItem value="fjt">
Fiji Time (FJT)
</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>South America</SelectLabel>
<SelectItem value="art">
Argentina Time (ART)
</SelectItem>
<SelectItem value="bot">
Bolivia Time (BOT)
</SelectItem>
<SelectItem value="brt">
Brasilia Time (BRT)
</SelectItem>
<SelectItem value="clt">
Chile Standard Time (CLT)
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</template>