Skip to content

Commit 9dd7be3

Browse files
cab-mikeecab-mikee
committed
chore: add more demo documentations
1 parent 09689e0 commit 9dd7be3

File tree

10 files changed

+252
-21
lines changed

10 files changed

+252
-21
lines changed

‎docs/guide/components/combobox.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,4 @@ You are completely in charge of how you filter the results, whether it be with a
6868

6969
<ComboboxDemo />
7070

71-
Still have questions relating this component's usage? Contact us and we will help you out. In the meantime, if you are curious about the [`<CommandPalette />`](./command-palette.md) component read more on the next page.
71+
Still have questions relating this component’s usage? Contact us and we will help you out. In the meantime, if you are curious about the [`<CommandPalette />`](./command-palette.md) component read more on the next page.

‎docs/guide/components/dialog.md

Lines changed: 81 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,84 @@
1-
# Dialog Demo
1+
<Hero
2+
title="stacks/dialog"
3+
description="An simple, minimal, yet powerful, dialog component."
4+
link="https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/dialog"
5+
/>
6+
<br>
7+
8+
# Install
9+
10+
::: code-group
11+
12+
```sh [npm]
13+
npm install @stacksjs/dialog
14+
```
15+
16+
```sh [bun]
17+
bun install @stacksjs/dialog
18+
# bun add @stacksjs/dialog
19+
# bun i @stacksjs/dialog
20+
```
21+
22+
```sh [pnpm]
23+
pnpm add @stacksjs/dialog
24+
# pnpm i @stacksjs/dialog
25+
```
26+
27+
```sh [yarn]
28+
yarn add @stacksjs/dialog
29+
# yarn i -d @stacksjs/dialog
30+
```
31+
32+
:::
33+
<br>
34+
35+
# Usage
36+
37+
```vue
38+
<!-- App.vue -->
39+
<script lang="ts" setup>
40+
import { Dialog, DialogPanel } from '@stacksjs/dialog'
41+
42+
const visible = ref(false)
43+
44+
const handleClose = () => {
45+
visible.value = false
46+
}
47+
</script>
48+
49+
<template>
50+
<Transition name="fade" appear>
51+
<Dialog v-if="visible" @close="handleClose">
52+
<DialogPanel as="div">
53+
<h2>Greetings! This is a dialog.</h2>
54+
</DialogPanel>
55+
</Dialog>
56+
</Transition>
57+
58+
<button @click="visible = true">
59+
Open Dialog
60+
</button>
61+
</template>
62+
63+
<style scoped>
64+
.fade-enter-active,
65+
.fade-leave-active {
66+
transition: opacity .4s linear;
67+
}
68+
69+
.fade-enter-from,
70+
.fade-leave-to {
71+
opacity: 0;
72+
}
73+
</style>
74+
```
75+
76+
<br>
77+
78+
# Demo
279

380
<DialogDemo />
481

5-
Still have questions relating this component's usage? Contact us and we will help you out. In the meantime, if you are curious about the `Dialog Component` read more on the next page.
82+
<br>
83+
84+
Still have questions relating this component’s usage? Contact us and we will help you out. In the meantime, if you are curious about the [`<Dropdown />`](./dropdown.md) component read more on the next page.

‎docs/guide/components/dropdown.md

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,75 @@
1-
# Dropdown Demo
1+
<Hero
2+
title="stacks/dropdown"
3+
description="An opinionated dropdown component for Stacks"
4+
link="https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/dropdown"
5+
/>
6+
<br>
7+
8+
# Install
9+
10+
::: code-group
11+
12+
```sh [npm]
13+
npm install @stacksjs/dropdown
14+
```
15+
16+
```sh [bun]
17+
bun install @stacksjs/dropdown
18+
# bun add @stacksjs/dropdown
19+
# bun i @stacksjs/dropdown
20+
```
21+
22+
```sh [pnpm]
23+
pnpm add @stacksjs/dropdown
24+
# pnpm i @stacksjs/dropdown
25+
```
26+
27+
```sh [yarn]
28+
yarn add @stacksjs/dropdown
29+
# yarn i -d @stacksjs/dropdown
30+
```
31+
32+
:::
33+
34+
<br>
35+
36+
# Usage
37+
38+
```vue
39+
<!-- App.vue -->
40+
<script lang="ts" setup>
41+
import { Menu, MenuButton, MenuItems, MenuItem } from '@stacksjs/dropdown'
42+
</script>
43+
44+
<template>
45+
<!-- ... -->
46+
<Dropdown>
47+
<DropdownButton>Dropdown</DropdownButton>
48+
<DropdownItems>
49+
<DropdownItem v-slot="{ active }">
50+
<a :class='{ "bg-blue-500": active }' href="/account-settings">
51+
Account settings
52+
</a>
53+
</DropdownItem>
54+
<DropdownItem v-slot="{ active }">
55+
<a :class='{ "bg-blue-500": active }' href="/account-settings">
56+
Documentation
57+
</a>
58+
</DropdownItem>
59+
<DropdownItem disabled>
60+
<span class="opacity-75">Invite a friend (coming soon!)</span>
61+
</DropdownItem>
62+
</DropdownItems>
63+
</Dropdown>
64+
</template>
65+
```
66+
67+
<br>
68+
69+
# Demo
270

371
<DropdownDemo />
472

5-
For more detailed documentation and examples, please visit our documentation site.
73+
<br>
74+
75+
Still have questions relating this component’s usage? Contact us and we will help you out. In the meantime, if you are curious about the [`<Listbox />`](./listbox.md) component read more on the next page.

‎docs/guide/components/listbox.md

Lines changed: 76 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,80 @@
1-
---
2-
editLink: false
3-
---
1+
<Hero
2+
title="stacks/listbox"
3+
description="An opinionated listbox component for Stacks."
4+
link="https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/listbox"
5+
/>
6+
<br>
47

5-
# Listbox Demo
8+
# Install
9+
10+
::: code-group
11+
12+
```sh [npm]
13+
npm install @stacksjs/listbox
14+
```
15+
16+
```sh [bun]
17+
bun install @stacksjs/listbox
18+
# bun add @stacksjs/listbox
19+
# bun i @stacksjs/listbox
20+
```
21+
22+
```sh [pnpm]
23+
pnpm add @stacksjs/listbox
24+
# pnpm i @stacksjs/listbox
25+
```
26+
27+
```sh [yarn]
28+
yarn add @stacksjs/listbox
29+
# yarn i -d @stacksjs/listbox
30+
```
31+
32+
:::
33+
<br>
34+
35+
# Usage
36+
37+
```vue
38+
<!-- App.vue -->
39+
<script lang="ts" setup>
40+
import { ref } from 'vue'
41+
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@stacksjs/listbox'
42+
43+
const people = [
44+
{ id: 1, name: 'Durward Reynolds', unavailable: false },
45+
{ id: 2, name: 'Kenton Towne', unavailable: false },
46+
{ id: 3, name: 'Therese Wunsch', unavailable: false },
47+
{ id: 4, name: 'Benedict Kessler', unavailable: true },
48+
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
49+
]
50+
51+
const selectedPerson = ref(people[0])
52+
</script>
53+
54+
<template>
55+
<Listbox v-model="selectedPerson">
56+
<ListboxButton>{{ selectedPerson.name }}</ListboxButton>
57+
<ListboxOptions>
58+
<ListboxOption
59+
v-for="person in people"
60+
:key="person.id"
61+
:value="person"
62+
:disabled="person.unavailable"
63+
>
64+
{{ person.name }}
65+
</ListboxOption>
66+
</ListboxOptions>
67+
</Listbox>
68+
</template>
69+
```
70+
71+
<br>
72+
73+
# Demo
674

775
<ListboxDemo />
876

9-
For more detailed documentation and examples, please visit our documentation site.
77+
<br>
78+
<br>
79+
80+
Still have questions relating this component’s usage? Contact us and we will help you out. In the meantime, if you are curious about the [`<Notification />`](./notification.md) component read more on the next page.

‎docs/guide/components/notification.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1-
# Notification Demo
2-
3-
<NotificationDemo />
1+
<Hero
2+
title="stacks/notification"
3+
description="An opinionated notification component for Stacks."
4+
link="https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/notification"
5+
/>
6+
<br>

‎storage/framework/defaults/components/Docs/DialogDemo.vue renamed to ‎storage/framework/defaults/components/Docs/demo/DialogDemo.vue

File renamed without changes.

‎storage/framework/defaults/components/Docs/DropdownDemo.vue renamed to ‎storage/framework/defaults/components/Docs/demo/DropdownDemo.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,9 @@ function groupMenuItems(items: MenuSection): MenuItem[][] {
3838
</script>
3939

4040
<template>
41-
<div class="max-w-md my-10">
42-
<div class="space-y-4 mb-8">
41+
<div class="max-w-md mt-2">
42+
<div class="space-y-4 ">
4343
<div class="flex flex-col">
44-
4544
<p class="text-gray-600 mt-1">Click the button below to show the dropdown menu</p>
4645
</div>
4746
</div>

‎storage/framework/defaults/components/Docs/ListboxDemo.vue renamed to ‎storage/framework/defaults/components/Docs/demo/ListboxDemo.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,15 @@ const selectedPerson = ref<Person>(people[0] as Person)
2626
</script>
2727

2828
<template>
29-
<div class="flex flex-col my-10 z-50">
29+
30+
<div class="max-w-md">
31+
<div class="space-y-4">
32+
<div class="flex flex-col">
33+
<p class="text-gray-600 mt-1">Select a person from the list</p>
34+
</div>
35+
</div>
36+
37+
<div class="flex flex-col my-10 z-100">
3038
<Listbox v-model="selectedPerson">
3139
<div class="relative mt-1">
3240
<ListboxButton
@@ -79,4 +87,5 @@ const selectedPerson = ref<Person>(people[0] as Person)
7987
</div>
8088
</Listbox>
8189
</div>
90+
</div>
8291
</template>

‎storage/framework/defaults/components/Docs/NotificationDemo.vue renamed to ‎storage/framework/defaults/components/Docs/demo/NotificationDemo.vue

File renamed without changes.

‎storage/framework/docs/.vitepress/components.d.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ export {}
99
declare module 'vue' {
1010
export interface GlobalComponents {
1111
ComboboxDemo: typeof import('./../../defaults/components/Docs/demo/ComboboxDemo.vue')['default']
12-
DialogDemo: typeof import('./../../defaults/components/Docs/DialogDemo.vue')['default']
13-
DropdownDemo: typeof import('./../../defaults/components/Docs/DropdownDemo.vue')['default']
12+
DialogDemo: typeof import('./../../defaults/components/Docs/demo/DialogDemo.vue')['default']
13+
DropdownDemo: typeof import('./../../defaults/components/Docs/demo/DropdownDemo.vue')['default']
1414
Hero: typeof import('./../../defaults/components/Docs/demo/Hero.vue')['default']
1515
Home: typeof import('./../../defaults/components/Docs/Home.vue')['default']
1616
HomeContributors: typeof import('./../../defaults/components/Docs/HomeContributors.vue')['default']
1717
HomeSponsors: typeof import('./../../defaults/components/Docs/HomeSponsors.vue')['default']
1818
HomeTeam: typeof import('./../../defaults/components/Docs/HomeTeam.vue')['default']
1919
Installation: typeof import('./../../defaults/components/Docs/demo/Installation.vue')['default']
20-
ListboxDemo: typeof import('./../../defaults/components/Docs/ListboxDemo.vue')['default']
21-
NotificationDemo: typeof import('./../../defaults/components/Docs/NotificationDemo.vue')['default']
20+
ListboxDemo: typeof import('./../../defaults/components/Docs/demo/ListboxDemo.vue')['default']
21+
NotificationDemo: typeof import('./../../defaults/components/Docs/demo/NotificationDemo.vue')['default']
2222
RouterLink: typeof import('vue-router')['RouterLink']
2323
RouterView: typeof import('vue-router')['RouterView']
2424
Starport: typeof import('vue-starport')['Starport']

0 commit comments

Comments
 (0)