Skip to content

Commit c43cefd

Browse files
cab-mikeecab-mikee
committed
chore: wip
1 parent 7d1234a commit c43cefd

File tree

6 files changed

+194
-49
lines changed

6 files changed

+194
-49
lines changed

‎storage/framework/core/components/dropdown/src/App.vue

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,13 @@
11
<script lang="ts" setup>
22
import { ref } from 'vue'
33
4-
// import Expand from './components/Expand.vue'
5-
// import Footer from './components/Footer.vue'
4+
import Footer from './components/Footer.vue'
65
import Hero from './components/Hero.vue'
7-
// import Installation from './components/Installation.vue'
8-
// import Others from './components/Others.vue'
9-
// import Pos from './components/Position.vue'
10-
// import Styling from './components/Styling.vue'
11-
// import Theming from './components/Theming.vue'
12-
// import Types from './components/Types.vue'
13-
// import Usage from './components/Usage.vue'
6+
import Installation from './components/Installation.vue'
7+
import Styling from './components/Styling.vue'
148
import { useSEOHeader } from './composables/useSEOHeader'
15-
// import { toggleDarkMode, isDark } from './composables/useDarkMode'
169
1710
useSEOHeader()
18-
19-
// const expand = ref(false)
20-
// const position = ref<Position>('top-right')
21-
// const richColors = ref(false)
22-
// const closeButton = ref(false)
23-
// const theme = ref<Theme>('light')
2411
</script>
2512

2613
<template>
@@ -35,10 +22,9 @@ useSEOHeader()
3522
>
3623
<Installation />
3724
<Usage />
25+
<Styling />
3826
<!-- <Types /> -->
39-
<!-- <Styling /> -->
4027
</main>
41-
4228
<Footer />
4329
</div>
4430
</div>

‎storage/framework/core/components/dropdown/src/components/Hero.vue

Lines changed: 89 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts" setup>
2+
import { Dropdown, DropdownButton, DropdownItems, DropdownItem } from '../components'
23
34
</script>
45

@@ -15,14 +16,94 @@
1516
<p class="mb-3 mt-0 text-lg">
1617
An opinionated dropdown component for Stacks.
1718
</p>
18-
<div class="flex gap-2">
19-
<button
20-
class="button btn-primary"
21-
>
22-
Render a dropdown
23-
</button>
24-
<a
25-
class="button btn-secondary"
19+
<div class="flex gap-2 ">
20+
<Dropdown as="div" class="relative inline-block text-left z-10">
21+
<div>
22+
<DropdownButton
23+
class="inline-flex w-full justify-center rounded-md btn-primary px-4 py-2.5 text-sm font-medium text-white focus:outline-none focus-visible:ring-2"
24+
>
25+
Dropdown <div class="i-heroicons-chevron-down-20-solid ml-2 h-5 w-5" />
26+
</DropdownButton>
27+
</div>
28+
29+
<transition
30+
enter-active-class="transition duration-100 ease-out"
31+
enter-from-class="transform scale-95 opacity-0"
32+
enter-to-class="transform scale-100 opacity-100"
33+
leave-active-class="transition duration-75 ease-in"
34+
leave-from-class="transform scale-100 opacity-100"
35+
leave-to-class="transform scale-95 opacity-0"
36+
>
37+
<DropdownItems
38+
class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
39+
>
40+
<div class="px-1 py-1">
41+
<DropdownItem v-slot="{ active }">
42+
<button
43+
:class="[
44+
active ? 'bg-violet-500 text-white' : 'text-gray-900',
45+
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
46+
]"
47+
>
48+
<div class="i-heroicons-pencil-20-solid mr-2 h-5 w-5" />
49+
Edit
50+
</button>
51+
</DropdownItem>
52+
<DropdownItem v-slot="{ active }">
53+
<button
54+
:class="[
55+
active ? 'bg-violet-500 text-white' : 'text-gray-900',
56+
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
57+
]"
58+
>
59+
<div class="i-heroicons-document-duplicate-20-solid" />
60+
Duplicate
61+
</button>
62+
</DropdownItem>
63+
</div>
64+
<div class="px-1 py-1">
65+
<DropdownItem v-slot="{ active }">
66+
<button
67+
:class="[
68+
active ? 'bg-violet-500 text-white' : 'text-gray-900',
69+
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
70+
]"
71+
>
72+
<div class="i-heroicons-archive-box-20-solid mr-2 h-5 w-5" />
73+
Archive
74+
</button>
75+
</DropdownItem>
76+
<DropdownItem v-slot="{ active }">
77+
<button
78+
:class="[
79+
active ? 'bg-violet-500 text-white' : 'text-gray-900',
80+
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
81+
]"
82+
>
83+
<div class="i-heroicons-arrow-path-20-solid mr-2 h-5 w-5" />
84+
Move
85+
</button>
86+
</DropdownItem>
87+
</div>
88+
89+
<div class="px-1 py-1">
90+
<DropdownItem v-slot="{ active }">
91+
<button
92+
:class="[
93+
active ? 'bg-violet-500 text-white' : 'text-gray-900',
94+
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
95+
]"
96+
>
97+
<div class="i-heroicons-trash-20-solid mr-2 h-5 w-5" />
98+
Delete
99+
</button>
100+
</DropdownItem>
101+
</div>
102+
</DropdownItems>
103+
</transition>
104+
</Dropdown>
105+
<a
106+
class="button btn-secondary"
26107
href="https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/dropdown"
27108
target="_blank"
28109
>

‎storage/framework/core/components/dropdown/src/components/Styling.vue

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
import { useCopyCode } from '../composables/useCopyCode'
4+
5+
const showCheckIcon = ref(false)
6+
7+
const slotsRenderedCode = ref(`
8+
<template>
9+
<Menu>
10+
<MenuButton>Options</MenuButton>
11+
<MenuItems>
12+
<!-- Use the active state to conditionally style the active item. -->
13+
<MenuItem
14+
v-for="link in links"
15+
:key="link.href"
16+
as="template"
17+
v-slot="{ active }"
18+
>
19+
<a
20+
:href="link.href"
21+
:class="{ 'bg-blue-500 text-white': active, 'bg-white text-black': !active }"
22+
>
23+
{{ link.label }}
24+
</a>
25+
</MenuItem>
26+
</MenuItems>
27+
</Menu>
28+
</template>`);
29+
30+
async function handleCopyCode() {
31+
await useCopyCode({ code: slotsRenderedCode.value, checkIconRef: showCheckIcon })
32+
}
33+
</script>
34+
35+
36+
<template>
37+
<div class="styles">
38+
<h1 class="my-2 text-lg font-semibold">
39+
Styling with slots
40+
</h1>
41+
<div class="mt-5">
42+
<p class="my-3 text-base">
43+
Each component exposes information about its current state via slot props that you can use to conditionally apply different styles or render different content.
44+
For example, the MenuItem component exposes an active state, which tells you if the item is currently focused via the mouse or keyboard.
45+
</p>
46+
47+
48+
<div class="code-block relative">
49+
<Highlight :code="slotsRenderedCode" />
50+
<button
51+
aria-label="Copy code"
52+
title="Copy code"
53+
class="btn-border absolute right-2 top-2 p-1"
54+
@click="handleCopyCode"
55+
>
56+
<div v-if="showCheckIcon" class="i-heroicons-check text-gray-500" />
57+
<div v-else class="i-heroicons-document-duplicate text-gray-500" />
58+
</button>
59+
</div>
60+
</div>
61+
62+
</div>
63+
64+
</template>
65+
66+
67+
68+
69+

‎storage/framework/core/components/dropdown/src/components/Usage.vue

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,24 @@ const code = `<!-- App.vue -->
99
1010
<template>
1111
<!-- ... -->
12-
<Menu>
13-
<MenuButton>More</MenuButton>
14-
<MenuItems>
15-
<MenuItem v-slot="{ active }">
12+
<Dropdown>
13+
<DropdownButton>Dropdown</DropdownButton>
14+
<DropdownItems>
15+
<DropdownItem v-slot="{ active }">
1616
<a :class='{ "bg-blue-500": active }' href="/account-settings">
1717
Account settings
1818
</a>
19-
</MenuItem>
20-
<MenuItem v-slot="{ active }">
19+
</DropdownItem>
20+
<DropdownItem v-slot="{ active }">
2121
<a :class='{ "bg-blue-500": active }' href="/account-settings">
2222
Documentation
2323
</a>
24-
</MenuItem>
25-
<MenuItem disabled>
24+
</DropdownItem>
25+
<DropdownItem disabled>
2626
<span class="opacity-75">Invite a friend (coming soon!)</span>
27-
</MenuItem>
28-
</MenuItems>
29-
</Menu>
27+
</DropdownItem>
28+
</DropdownItems>
29+
</Dropdown>
3030
</template>
3131
`
3232
@@ -43,9 +43,9 @@ async function handleCopyCode() {
4343
Usage
4444
</h1>
4545
<p class="my-3 text-base">
46-
Menu Buttons are built using the Menu, MenuButton, MenuItems, and MenuItem components.
46+
Dropdowns are built using the <code><b>Dropdown</b></code>, <code><b>DropdownButton</b></code>, <code><b>DropdownItems</b></code>, and <code><b>DropdownItem</b></code> components.<br><br>
4747

48-
The MenuButton will automatically open/close the MenuItems when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard.
48+
The <code><b>DropdownButton</b></code> will automatically open/close the <code><b>DropdownItems</b></code> when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard.
4949
</p>
5050
<div class="code-block group relative">
5151
<Highlight

‎storage/framework/core/components/dropdown/src/components/index.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
11
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
22

3-
export { Menu, MenuButton, MenuItem, MenuItems }
3+
export {
4+
Menu as Dropdown,
5+
MenuButton as DropdownButton,
6+
MenuItem as DropdownItem,
7+
MenuItems as DropdownItems,
8+
Menu,
9+
MenuButton,
10+
MenuItem,
11+
MenuItems,
12+
}

‎storage/framework/core/components/dropdown/src/composables/useSEOHeader.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,32 @@ import { useHead, useSeoMeta } from '@vueuse/head'
22

33
function useSEOHeader() {
44
useHead({
5-
title: 'stacks/notification',
6-
titleTemplate: title => `${title} | An opinionated toast component for Vue.`,
5+
title: 'stacks/dropdown',
6+
titleTemplate: title => `${title} | An opinionated dropdown component for Vue.`,
77
meta: [
88
{
99
name: 'author',
1010
content: '@xiaoluoboding',
1111
},
1212
{
1313
name: 'description',
14-
content: 'An opinionated toast component for Vue.',
14+
content: 'An opinionated dropdown component for Vue.',
1515
},
1616
],
1717
})
1818

1919
useSeoMeta({
20-
title: 'stacks/notification',
21-
description: 'An opinionated toast component for Vue.',
22-
ogDescription: 'An opinionated toast component for Vue.',
23-
ogTitle: 'stacks/notification',
20+
title: 'stacks/dropdown',
21+
description: 'An opinionated dropdown component for Vue.',
22+
ogDescription: 'An opinionated dropdown component for Vue.',
23+
ogTitle: 'stacks/dropdown',
2424
ogImage: 'https://vue-sonner.vercel.app/og.png',
2525
ogImageHeight: '882',
2626
ogImageWidth: '1686',
2727
twitterCard: 'summary_large_image',
2828
twitterImage: 'https://vue-sonner.vercel.app/og.png',
29-
twitterTitle: 'stacks/notification',
30-
twitterDescription: 'An opinionated notification component for Stacks.',
29+
twitterTitle: 'stacks/dropdown',
30+
twitterDescription: 'An opinionated dropdown component for Stacks.',
3131
})
3232
}
3333

0 commit comments

Comments
 (0)