@vue-interface/dropdown-menu 2.0.0-beta.8 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/demo.css +10 -0
- package/docs/dropdown-menu.md +65 -0
- package/index.css +220 -0
- package/index.html +63 -0
- package/index.ts +11 -0
- package/package.json +16 -49
- package/src/DropdownDivider.vue +7 -0
- package/src/DropdownHeader.vue +9 -0
- package/src/DropdownItem.vue +9 -0
- package/src/DropdownItemText.vue +9 -0
- package/src/DropdownMenu.vue +23 -0
- package/src/DropdownMenuItems.vue +43 -0
- package/tsconfig.json +27 -0
- package/vite.config.js +52 -0
- package/dist/dropdown-menu.js +0 -65
- package/dist/dropdown-menu.umd.cjs +0 -1
- package/dist/index.d.ts +0 -2
- package/dist/src/DropdownMenu.vue.d.ts +0 -39
- package/dist/src/DropdownMenuItems.vue.d.ts +0 -4
- package/tailwindcss/index.cjs +0 -302
- package/tailwindcss/safelist.cjs +0 -15
package/CHANGELOG.md
ADDED
package/demo.css
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Dropdown Menu
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import '../demo.css'
|
|
7
|
+
import { ref, onMounted } from 'vue'
|
|
8
|
+
|
|
9
|
+
const item = ref('Nothing')
|
|
10
|
+
|
|
11
|
+
onMounted(() => {
|
|
12
|
+
document.querySelectorAll('.dropdown-item').forEach(link => {
|
|
13
|
+
link.addEventListener('click', e => {
|
|
14
|
+
e.preventDefault()
|
|
15
|
+
const text = link.textContent.trim()
|
|
16
|
+
if (['Item #2', 'Item #3', 'Item #4'].includes(text)) {
|
|
17
|
+
item.value = text
|
|
18
|
+
}
|
|
19
|
+
})
|
|
20
|
+
})
|
|
21
|
+
})
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
# Dropdown Menu
|
|
25
|
+
|
|
26
|
+
The `dropdown-menu` component displays a list of actionable or informational items, similar to traditional dropdown lists. It supports headers, dividers, links, and plain text items.
|
|
27
|
+
|
|
28
|
+
## Basic Usage
|
|
29
|
+
|
|
30
|
+
<span>{{ item }} was clicked!</span>
|
|
31
|
+
|
|
32
|
+
::: raw
|
|
33
|
+
<div>
|
|
34
|
+
<!-- #region basicUsage -->
|
|
35
|
+
<div class="dropdown-menu show relative">
|
|
36
|
+
<h3 class="dropdown-header">Vue Router</h3>
|
|
37
|
+
<h3 class="dropdown-header">Links</h3>
|
|
38
|
+
<a href="#" class="dropdown-item active">Item #2</a>
|
|
39
|
+
<a href="#" class="dropdown-item">Item #3</a>
|
|
40
|
+
<div class="dropdown-item-text">Plain Text</div>
|
|
41
|
+
<hr class="dropdown-divider" />
|
|
42
|
+
<a href="#" class="dropdown-item">Item #4</a>
|
|
43
|
+
<h3 class="dropdown-header">Heading Element</h3>
|
|
44
|
+
<div class="dropdown-item"><i>italic text</i></div>
|
|
45
|
+
<div class="dropdown-item"><b>bold text</b></div>
|
|
46
|
+
<div class="dropdown-item"><em>strong text</em></div>
|
|
47
|
+
<div class="dropdown-item"><sub>subscripted text</sub></div><br>
|
|
48
|
+
<div class="dropdown-item"><sup>superscripted text</sup></div>
|
|
49
|
+
<div class="dropdown-item"><small>small text</small></div>
|
|
50
|
+
<div class="dropdown-item"><del>deleted text</del></div>
|
|
51
|
+
<div class="dropdown-item"><ins>inserted text</ins></div>
|
|
52
|
+
<div class="dropdown-item"><blockquote>quoted text</blockquote></div>
|
|
53
|
+
<div class="dropdown-item"><q>short quoted text</q></div>
|
|
54
|
+
<div class="dropdown-item"><cite>cited text</cite></div>
|
|
55
|
+
<div class="dropdown-item"><address>address</address></div>
|
|
56
|
+
<div class="dropdown-item"><abbr title="inserted text">inserted text</abbr></div>
|
|
57
|
+
<div class="dropdown-item"><code>code snippet</code></div>
|
|
58
|
+
<div class="dropdown-item"><mark>marked text</mark></div>
|
|
59
|
+
<div class="dropdown-item-plain">Unstyled text</div>
|
|
60
|
+
</div>
|
|
61
|
+
<!-- #endregion basicUsage -->
|
|
62
|
+
</div>
|
|
63
|
+
:::
|
|
64
|
+
|
|
65
|
+
<<< @/packages/dropdown-menu/docs/dropdown-menu.md#basicUsage{html}
|
package/index.css
ADDED
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
|
|
3
|
+
@theme {
|
|
4
|
+
--dropdown-menu-position: absolute;
|
|
5
|
+
--dropdown-menu-top: 100%;
|
|
6
|
+
--dropdown-menu-left: 0;
|
|
7
|
+
--dropdown-menu-z-index: 1000;
|
|
8
|
+
--dropdown-menu-display: none;
|
|
9
|
+
--dropdown-menu-min-width: 10rem;
|
|
10
|
+
--dropdown-menu-padding: 0.5rem 0;
|
|
11
|
+
--dropdown-menu-font-size: 1rem;
|
|
12
|
+
--dropdown-menu-text-align: left;
|
|
13
|
+
--dropdown-menu-list-style: none;
|
|
14
|
+
--dropdown-menu-bg: var(--color-white, #fff);
|
|
15
|
+
--dropdown-menu-bg-dark: var(--color-neutral-800, oklch(26.9% 0 0));
|
|
16
|
+
--dropdown-menu-bg-clip: padding-box;
|
|
17
|
+
--dropdown-menu-border: 1px solid var(--color-neutral-400, oklch(70.8% 0 0));
|
|
18
|
+
--dropdown-menu-border-dark: 1px solid var(--color-neutral-600, oklch(43.9% 0 0));
|
|
19
|
+
--dropdown-menu-border-radius: 0.25rem;
|
|
20
|
+
--dropdown-menu-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
|
|
21
|
+
--dropdown-menu-text-decoration: none;
|
|
22
|
+
--dropdown-menu-white-space: nowrap;
|
|
23
|
+
|
|
24
|
+
--dropdown-menu-item-display: flex;
|
|
25
|
+
--dropdown-menu-item-width: 100%;
|
|
26
|
+
--dropdown-menu-item-padding: 0.25rem 1rem;
|
|
27
|
+
--dropdown-menu-item-font-weight: normal;
|
|
28
|
+
--dropdown-menu-item-color: var(--color-neutral-800, oklch(26.9% 0 0));
|
|
29
|
+
--dropdown-menu-item-color-dark: var(--color-neutral-200, oklch(92.2% 0 0));
|
|
30
|
+
--dropdown-menu-item-text-align: inherit;
|
|
31
|
+
--dropdown-menu-item-bg: transparent;
|
|
32
|
+
--dropdown-menu-item-border: 0;
|
|
33
|
+
--dropdown-menu-item-hover-color: var(--color-neutral-900, oklch(20.5% 0 0));
|
|
34
|
+
--dropdown-menu-item-hover-color-dark: var(--color-neutral-100, oklch(97% 0 0));
|
|
35
|
+
--dropdown-menu-item-hover-bg: var(--color-neutral-100, oklch(97% 0 0));
|
|
36
|
+
--dropdown-menu-item-hover-bg-dark: var(--color-neutral-700, oklch(37.1% 0 0));
|
|
37
|
+
--dropdown-menu-item-active-color: var(--color-white, #fff);
|
|
38
|
+
--dropdown-menu-item-active-color-dark: var(--dropdown-menu-item-active-color);
|
|
39
|
+
--dropdown-menu-item-active-bg: var(--color-blue-500, oklch(62.3% 0.214 259.815));
|
|
40
|
+
--dropdown-menu-item-active-bg-dark: var(--dropdown-menu-item-active-bg);
|
|
41
|
+
--dropdown-menu-item-disabled-color: var(--color-neutral-500, oklch(55.6% 0 0));
|
|
42
|
+
--dropdown-menu-item-disabled-pointer-events: none;
|
|
43
|
+
--dropdown-menu-item-disabled-bg: transparent;
|
|
44
|
+
|
|
45
|
+
--dropdown-menu-header-display: block;
|
|
46
|
+
--dropdown-menu-header-padding: 0.5rem;
|
|
47
|
+
--dropdown-menu-header-font-size: 0.875rem;
|
|
48
|
+
--dropdown-menu-header-font-weight: bold;
|
|
49
|
+
--dropdown-menu-header-color: var(--color-neutral-500, oklch(55.6% 0 0));
|
|
50
|
+
--dropdown-menu-header-color-dark: var(--color-neutral-400, oklch(70.8% 0 0));
|
|
51
|
+
|
|
52
|
+
--dropdown-menu-divider-height: 0;
|
|
53
|
+
--dropdown-menu-divider-margin: 0.25rem 0;
|
|
54
|
+
--dropdown-menu-divider-overflow: hidden;
|
|
55
|
+
--dropdown-menu-divider-border-top: 1px solid var(--color-neutral-200, oklch(92.2% 0 0));
|
|
56
|
+
--dropdown-menu-divider-border-top-dark: 1px solid var(--color-neutral-700, oklch(37.1% 0 0));
|
|
57
|
+
|
|
58
|
+
--dropdown-menu-text-padding: 0.25rem 1rem;
|
|
59
|
+
--dropdown-menu-text-color: var(--color-neutral-800, oklch(26.9% 0 0));
|
|
60
|
+
--dropdown-menu-text-color-dark: var(--color-neutral-200, oklch(92.2% 0 0));
|
|
61
|
+
|
|
62
|
+
--dropdown-menu-show-display: inline-block;
|
|
63
|
+
|
|
64
|
+
--dropdown-menu-left-right: auto;
|
|
65
|
+
--dropdown-menu-left-left: 0;
|
|
66
|
+
--dropdown-menu-right-right: 0;
|
|
67
|
+
--dropdown-menu-right-left: auto;
|
|
68
|
+
--dropdown-menu-reset-right: auto;
|
|
69
|
+
--dropdown-menu-reset-bottom: auto;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
@utility dropdown-menu {
|
|
74
|
+
position: var(--dropdown-menu-position);
|
|
75
|
+
top: var(--dropdown-menu-top);
|
|
76
|
+
left: var(--dropdown-menu-left);
|
|
77
|
+
z-index: var(--dropdown-menu-z-index);
|
|
78
|
+
display: var(--dropdown-menu-display);
|
|
79
|
+
min-width: var(--dropdown-menu-min-width);
|
|
80
|
+
padding: var(--dropdown-menu-padding);
|
|
81
|
+
font-size: var(--dropdown-menu-font-size);
|
|
82
|
+
text-align: var(--dropdown-menu-text-align);
|
|
83
|
+
list-style: var(--dropdown-menu-list-style);
|
|
84
|
+
background-color: var(--dropdown-menu-bg);
|
|
85
|
+
background-clip: var(--dropdown-menu-bg-clip);
|
|
86
|
+
border: var(--dropdown-menu-border);
|
|
87
|
+
border-radius: var(--dropdown-menu-border-radius);
|
|
88
|
+
box-shadow: var(--dropdown-menu-box-shadow);
|
|
89
|
+
|
|
90
|
+
@variant dark {
|
|
91
|
+
background-color: var(--dropdown-menu-bg-dark) !important;
|
|
92
|
+
border: var(--dropdown-menu-border-dark);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.dropup:has(&),
|
|
96
|
+
.dropright:has(&),
|
|
97
|
+
.dropdown:has(&),
|
|
98
|
+
.dropleft:has(&) {
|
|
99
|
+
position: relative;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&[x-placement^="top"],
|
|
103
|
+
&[x-placement^="right"],
|
|
104
|
+
&[x-placement^="bottom"],
|
|
105
|
+
&[x-placement^="left"] {
|
|
106
|
+
right: auto;
|
|
107
|
+
bottom: auto;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.dropdown-item,
|
|
111
|
+
& > :not(hr, .dropdown-header, .dropdown-item-text, .dropdown-item-plain, .dropdown-divider) {
|
|
112
|
+
display: var(--dropdown-menu-item-display);
|
|
113
|
+
width: var(--dropdown-menu-item-width);
|
|
114
|
+
padding: var(--dropdown-menu-item-padding);
|
|
115
|
+
clear: both;
|
|
116
|
+
font-weight: var(--dropdown-menu-item-font-weight);
|
|
117
|
+
color: var(--dropdown-menu-item-color);
|
|
118
|
+
text-align: var(--dropdown-menu-item-text-align);
|
|
119
|
+
text-decoration: var(--dropdown-menu-text-decoration);
|
|
120
|
+
white-space: var(--dropdown-menu-white-space);
|
|
121
|
+
background-color: var(--dropdown-menu-item-bg);
|
|
122
|
+
border: var(--dropdown-menu-item-border);
|
|
123
|
+
|
|
124
|
+
@variant dark {
|
|
125
|
+
color: var(--dropdown-menu-item-color-dark);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
&:hover,
|
|
129
|
+
&:focus {
|
|
130
|
+
color: var(--dropdown-menu-item-hover-color);
|
|
131
|
+
background-color: var(--dropdown-menu-item-hover-bg);
|
|
132
|
+
text-decoration: var(--dropdown-menu-text-decoration);
|
|
133
|
+
|
|
134
|
+
@variant dark {
|
|
135
|
+
color: var(--dropdown-menu-item-hover-color-dark);
|
|
136
|
+
background-color: var(--dropdown-menu-item-hover-bg-dark);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&.active,
|
|
141
|
+
&:active {
|
|
142
|
+
color: var(--dropdown-menu-item-active-color);
|
|
143
|
+
background-color: var(--dropdown-menu-item-active-bg);
|
|
144
|
+
text-decoration: var(--dropdown-menu-text-decoration);
|
|
145
|
+
|
|
146
|
+
@variant dark {
|
|
147
|
+
color: var(--dropdown-menu-item-active-color-dark);
|
|
148
|
+
background-color: var(--dropdown-menu-item-active-bg-dark);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
&.disabled,
|
|
153
|
+
&:disabled {
|
|
154
|
+
color: var(--dropdown-menu-item-disabled-color);
|
|
155
|
+
pointer-events: var(--dropdown-menu-item-disabled-pointer-events);
|
|
156
|
+
background-color: var(--dropdown-menu-item-disabled-bg);
|
|
157
|
+
background-image: none;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.dropdown-item sub, .dropdown-item sup {
|
|
162
|
+
line-height: inherit;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.dropdown-header,
|
|
166
|
+
& > h1,
|
|
167
|
+
& > h2,
|
|
168
|
+
& > h3,
|
|
169
|
+
& > h4,
|
|
170
|
+
& > h5,
|
|
171
|
+
& > h6 {
|
|
172
|
+
display: block;
|
|
173
|
+
padding: var(--dropdown-menu-header-padding);
|
|
174
|
+
margin-bottom: 0;
|
|
175
|
+
font-size: var(--dropdown-menu-header-font-size);
|
|
176
|
+
font-weight: var(--dropdown-menu-header-font-weight);
|
|
177
|
+
color: var(--dropdown-menu-header-color);
|
|
178
|
+
white-space: var(--dropdown-menu-white-space);
|
|
179
|
+
|
|
180
|
+
@variant dark {
|
|
181
|
+
color: var(--dropdown-menu-header-color-dark);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.dropdown-divider,
|
|
186
|
+
& > hr {
|
|
187
|
+
height: 0;
|
|
188
|
+
margin: var(--dropdown-menu-divider-margin);
|
|
189
|
+
overflow: var(--dropdown-menu-divider-overflow);
|
|
190
|
+
border-top: var(--dropdown-menu-divider-border-top);
|
|
191
|
+
|
|
192
|
+
@variant dark {
|
|
193
|
+
border-top: var(--dropdown-menu-divider-border-top-dark);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.dropdown-item-text {
|
|
198
|
+
display: block;
|
|
199
|
+
padding: var(--dropdown-menu-text-padding);
|
|
200
|
+
color: var(--dropdown-menu-text-color);
|
|
201
|
+
|
|
202
|
+
@variant dark {
|
|
203
|
+
color: var(--dropdown-menu-text-color-dark);
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
&.show {
|
|
208
|
+
display: var(--dropdown-menu-show-display);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
&.dropdown-menu-left {
|
|
212
|
+
right: var(--dropdown-menu-left-right);
|
|
213
|
+
left: var(--dropdown-menu-left-left);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
&.dropdown-menu-right {
|
|
217
|
+
right: var(--dropdown-menu-right-right);
|
|
218
|
+
left: var(--dropdown-menu-right-left);
|
|
219
|
+
}
|
|
220
|
+
}
|
package/index.html
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
6
|
+
<title>Dropdown-menu</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body class="dark:bg-neutral-900 dark:text-white">
|
|
9
|
+
<div id="app" class="relative">
|
|
10
|
+
<br><h1 class="text-4xl mb-6">dropdown-menu</h1>
|
|
11
|
+
|
|
12
|
+
<h3 class="text-2xl mb-3">Basic Usage</h3>
|
|
13
|
+
|
|
14
|
+
<span>{{ item }} was clicked!</span>
|
|
15
|
+
|
|
16
|
+
<div class="dropdown-menu show">
|
|
17
|
+
<h3 class="dropdown-header">Vue Router</h3>
|
|
18
|
+
<h3 class="dropdown-header">Links</h3>
|
|
19
|
+
<a href="#" class="dropdown-item active">Item #2</a>
|
|
20
|
+
<a href="#" class="dropdown-item">Item #3</a>
|
|
21
|
+
<div class="dropdown-item-text">Plain Text</div>
|
|
22
|
+
<hr class="dropdown-divider" />
|
|
23
|
+
<a href="#" class="dropdown-item">Item #4</a>
|
|
24
|
+
<h3 class="dropdown-header">Heading Element</h3>
|
|
25
|
+
<div class="dropdown-item"><i>italic text</i></div>
|
|
26
|
+
<div class="dropdown-item"><b>bold text</b></div>
|
|
27
|
+
<div class="dropdown-item"><em>strong text</em></div>
|
|
28
|
+
<div class="dropdown-item"><sub>subscripted text</sub></div><br>
|
|
29
|
+
<div class="dropdown-item"><sup>superscripted text</sup></div>
|
|
30
|
+
<div class="dropdown-item"><small>small text</small></div>
|
|
31
|
+
<div class="dropdown-item"><del>deleted text</del></div>
|
|
32
|
+
<div class="dropdown-item"><ins>inserted text</ins></div>
|
|
33
|
+
<div class="dropdown-item"><blockquote>quoted text</blockquote></div>
|
|
34
|
+
<div class="dropdown-item"><q>short quoted text</q></div>
|
|
35
|
+
<div class="dropdown-item"><cite>cited text</cite></div>
|
|
36
|
+
<div class="dropdown-item"><address>address</address></div>
|
|
37
|
+
<div class="dropdown-item"><abbr title="inserted text">inserted text</abbr></div>
|
|
38
|
+
<div class="dropdown-item"><code>code snippet</code></div>
|
|
39
|
+
<div class="dropdown-item"><mark>marked text</mark></div>
|
|
40
|
+
<div class="dropdown-item-plain">Unstyled text</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<script type="module">
|
|
45
|
+
import './demo.css';
|
|
46
|
+
|
|
47
|
+
//JS testing dropdown menu links
|
|
48
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
49
|
+
const span = document.querySelector("span");
|
|
50
|
+
document.querySelectorAll(".dropdown-item").forEach(item => {
|
|
51
|
+
item.addEventListener("click", e => {
|
|
52
|
+
e.preventDefault(); // stop page from jumping to top
|
|
53
|
+
const text = item.textContent.trim();
|
|
54
|
+
if (["Item #2", "Item #3", "Item #4"].includes(text)) {
|
|
55
|
+
span.textContent = `${text} was clicked!`;
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
</script>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
package/index.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import DropdownHeader from './src/DropdownHeader.vue';
|
|
2
|
+
import DropdownItem from './src/DropdownItem.vue';
|
|
3
|
+
import DropdownItemText from './src/DropdownItemText.vue';
|
|
4
|
+
import DropdownMenu from './src/DropdownMenu.vue';
|
|
5
|
+
|
|
6
|
+
export {
|
|
7
|
+
DropdownHeader,
|
|
8
|
+
DropdownItem,
|
|
9
|
+
DropdownItemText,
|
|
10
|
+
DropdownMenu
|
|
11
|
+
};
|
package/package.json
CHANGED
|
@@ -1,77 +1,44 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/dropdown-menu",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "A Vue dropdown menu component.",
|
|
5
|
-
"files": [
|
|
6
|
-
"dist",
|
|
7
|
-
"tailwindcss"
|
|
8
|
-
],
|
|
9
5
|
"type": "module",
|
|
10
6
|
"main": "./dist/dropdown-menu.umd.cjs",
|
|
11
7
|
"module": "./dist/dropdown-menu.js",
|
|
12
8
|
"types": "./dist/index.d.ts",
|
|
13
9
|
"exports": {
|
|
14
10
|
".": {
|
|
11
|
+
"source": "./index.ts",
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
15
13
|
"import": "./dist/dropdown-menu.js",
|
|
16
|
-
"require": "./dist/dropdown-menu.umd.
|
|
17
|
-
"types": "./dist/index.d.ts"
|
|
14
|
+
"require": "./dist/dropdown-menu.umd.js"
|
|
18
15
|
},
|
|
19
|
-
"./
|
|
20
|
-
"./tailwindcss/safelist": "./tailwindcss/safelist.cjs"
|
|
16
|
+
"./css": "./demo.css"
|
|
21
17
|
},
|
|
22
18
|
"browserslist": "last 2 versions, > 0.5%, ie >= 11",
|
|
23
|
-
"scripts": {
|
|
24
|
-
"dev": "vite",
|
|
25
|
-
"build": "vite build",
|
|
26
|
-
"preview": "vite preview",
|
|
27
|
-
"pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
|
|
28
|
-
"release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
|
|
29
|
-
"release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
|
|
30
|
-
"release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
|
|
31
|
-
"release": "git add . -A; git commit; git push --tags origin; npm publish;"
|
|
32
|
-
},
|
|
33
19
|
"repository": {
|
|
34
20
|
"type": "git",
|
|
35
|
-
"url": "git+https://github.com/vue-interface/dropdown-menu
|
|
21
|
+
"url": "git+https://github.com/vue-interface/dropdown-menu"
|
|
36
22
|
},
|
|
37
23
|
"keywords": [
|
|
38
|
-
"
|
|
39
|
-
"
|
|
24
|
+
"Button",
|
|
25
|
+
"Control",
|
|
40
26
|
"Vue",
|
|
41
|
-
"Component",
|
|
42
27
|
"Tailwind",
|
|
43
28
|
"Bootstrap"
|
|
44
29
|
],
|
|
45
30
|
"author": "Justin Kimbrell",
|
|
46
31
|
"license": "ISC",
|
|
47
32
|
"bugs": {
|
|
48
|
-
"url": "https://github.com/vue-interface/dropdown-menu
|
|
49
|
-
},
|
|
50
|
-
"homepage": "https://github.com/vue-interface/dropdown-menu",
|
|
51
|
-
"dependencies": {
|
|
52
|
-
"@vue-interface/variant": "^2.0.0-beta.0",
|
|
53
|
-
"color": "^4.2.0"
|
|
33
|
+
"url": "https://github.com/vue-interface/dropdown-menu"
|
|
54
34
|
},
|
|
35
|
+
"homepage": "https://github.com/vue-interface/vue-interface",
|
|
55
36
|
"peerDependencies": {
|
|
56
|
-
"vue": "^3.
|
|
37
|
+
"vue": "^3.3.4"
|
|
57
38
|
},
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"autoprefixer": "^10.4.2",
|
|
63
|
-
"babel-eslint": "^10.1.0",
|
|
64
|
-
"babel-preset-vue": "^2.0.2",
|
|
65
|
-
"change-case": "^4.1.2",
|
|
66
|
-
"eslint": "^8.25.0",
|
|
67
|
-
"eslint-plugin-vue": "^9.6.0",
|
|
68
|
-
"pascalcase": "^2.0.0",
|
|
69
|
-
"postcss": "^8.4.6",
|
|
70
|
-
"tailwindcss": "^3.1.0",
|
|
71
|
-
"ts-vue": "^0.1.0",
|
|
72
|
-
"typescript": "^4.9.4",
|
|
73
|
-
"vite": "^4.0.0",
|
|
74
|
-
"vite-plugin-dts": "^1.7.1",
|
|
75
|
-
"vue": "^3.2.41"
|
|
39
|
+
"scripts": {
|
|
40
|
+
"dev": "vite",
|
|
41
|
+
"build": "vue-tsc && vite build",
|
|
42
|
+
"preview": "vite preview"
|
|
76
43
|
}
|
|
77
|
-
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
export type DropdownMenuProps = {
|
|
3
|
+
align?: 'left' | 'right',
|
|
4
|
+
show?: boolean
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
withDefaults(defineProps<DropdownMenuProps>(), {
|
|
8
|
+
align: 'left'
|
|
9
|
+
});
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<template>
|
|
13
|
+
<div
|
|
14
|
+
class="dropdown-menu"
|
|
15
|
+
:aria-labelledby="($attrs.id as string|undefined)"
|
|
16
|
+
:class="{
|
|
17
|
+
'dropdown-menu-left': align === 'left',
|
|
18
|
+
'dropdown-menu-right': align === 'right',
|
|
19
|
+
'show': show
|
|
20
|
+
}">
|
|
21
|
+
<slot />
|
|
22
|
+
</div>
|
|
23
|
+
</template>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Fragment, h } from 'vue';
|
|
3
|
+
|
|
4
|
+
function appendClass(vnode: any, str: any) {
|
|
5
|
+
vnode.props.class = `${vnode.props.class || ''} ${str}`.trim();
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
function changeMenuItems(items: any) {
|
|
9
|
+
for(const vnode of items) {
|
|
10
|
+
if(vnode.type === Fragment) {
|
|
11
|
+
changeMenuItems(vnode.children);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
vnode.props = Object.assign({ class: undefined }, vnode.props);
|
|
15
|
+
vnode.attrs = Object.assign({}, vnode.attrs);
|
|
16
|
+
|
|
17
|
+
if(!vnode.attrs.on) {
|
|
18
|
+
vnode.attrs.on = {};
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const isDropdownItem = vnode.props.class && vnode.props.class.match(/dropdown-item/);
|
|
22
|
+
const isDropdownDivider = vnode.props.class && vnode.props.class.match(/dropdown-divider/);
|
|
23
|
+
|
|
24
|
+
if(typeof vnode.type === 'string' && vnode.type.match(/^h\d$/)) {
|
|
25
|
+
appendClass(vnode, 'dropdown-header');
|
|
26
|
+
}
|
|
27
|
+
else if(vnode.type === 'hr' && !isDropdownDivider) {
|
|
28
|
+
vnode.type = 'div';
|
|
29
|
+
|
|
30
|
+
appendClass(vnode, 'dropdown-divider');
|
|
31
|
+
}
|
|
32
|
+
else if(!isDropdownItem && !isDropdownDivider) {
|
|
33
|
+
appendClass(vnode, 'dropdown-item');
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return items;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const DropdownMenuItems = (_: any, context: any) => h('div', {}, changeMenuItems(context.slots.default()));
|
|
41
|
+
|
|
42
|
+
export default DropdownMenuItems;
|
|
43
|
+
</script>
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"moduleResolution": "bundler",
|
|
9
|
+
"customConditions": ["source"],
|
|
10
|
+
"allowImportingTsExtensions": true,
|
|
11
|
+
"resolveJsonModule": true,
|
|
12
|
+
"isolatedModules": true,
|
|
13
|
+
"noEmit": true,
|
|
14
|
+
"strict": true,
|
|
15
|
+
"noUnusedLocals": true,
|
|
16
|
+
"noUnusedParameters": true,
|
|
17
|
+
"noFallthroughCasesInSwitch": true,
|
|
18
|
+
"jsx": "preserve",
|
|
19
|
+
"jsxImportSource": "vue"
|
|
20
|
+
},
|
|
21
|
+
"include": [
|
|
22
|
+
"**/*.ts",
|
|
23
|
+
"**/*.tsx",
|
|
24
|
+
"**/*.vue",
|
|
25
|
+
],
|
|
26
|
+
"exclude": ["node_modules", "dist"]
|
|
27
|
+
}
|
package/vite.config.js
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
2
|
+
import vue from '@vitejs/plugin-vue';
|
|
3
|
+
import { pascalCase } from 'change-case';
|
|
4
|
+
import path from 'path';
|
|
5
|
+
import { defineConfig } from 'vite';
|
|
6
|
+
import dts from 'vite-plugin-dts';
|
|
7
|
+
import pkg from './package.json';
|
|
8
|
+
|
|
9
|
+
const fileName = pkg.name.split('/')[1];
|
|
10
|
+
|
|
11
|
+
const external = [
|
|
12
|
+
...(pkg.dependencies ? Object.keys(pkg.dependencies) : []),
|
|
13
|
+
...(pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [])
|
|
14
|
+
];
|
|
15
|
+
|
|
16
|
+
export default ({ command }) => defineConfig({
|
|
17
|
+
build: {
|
|
18
|
+
sourcemap: command === 'build',
|
|
19
|
+
lib: {
|
|
20
|
+
entry: path.resolve(__dirname, 'index.ts'),
|
|
21
|
+
name: pascalCase(fileName),
|
|
22
|
+
fileName,
|
|
23
|
+
},
|
|
24
|
+
rollupOptions: {
|
|
25
|
+
external,
|
|
26
|
+
output: {
|
|
27
|
+
globals: external.reduce((carry, dep) => {
|
|
28
|
+
return Object.assign(carry, {
|
|
29
|
+
[dep]: pascalCase(dep)
|
|
30
|
+
});
|
|
31
|
+
}, {}),
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
watch: !process.env.NODE_ENV && {
|
|
35
|
+
include: [
|
|
36
|
+
'./tailwindcss/**/*.js'
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
resolve: {
|
|
41
|
+
conditions: process.env.NODE_ENV === 'development'
|
|
42
|
+
? ['source', 'import', 'module', 'browser', 'default']
|
|
43
|
+
: ['import', 'module', 'browser', 'default'],
|
|
44
|
+
},
|
|
45
|
+
plugins: [
|
|
46
|
+
vue(),
|
|
47
|
+
dts({
|
|
48
|
+
entryRoot: path.resolve(__dirname, './'),
|
|
49
|
+
}),
|
|
50
|
+
tailwindcss()
|
|
51
|
+
]
|
|
52
|
+
});
|
package/dist/dropdown-menu.js
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { h as a, Fragment as i, defineComponent as l, resolveComponent as c, openBlock as f, createElementBlock as m, normalizeClass as u, createVNode as w, withCtx as h, renderSlot as g } from "vue";
|
|
2
|
-
function s(e, o) {
|
|
3
|
-
e.props.class = `${e.props.class || ""} ${o}`.trim();
|
|
4
|
-
}
|
|
5
|
-
function p(e) {
|
|
6
|
-
for (const o of e) {
|
|
7
|
-
o.type === i && p(o.children), o.props = Object.assign({ class: void 0 }, o.props), o.attrs = Object.assign({}, o.attrs), o.attrs.on || (o.attrs.on = {});
|
|
8
|
-
const t = o.props.class && o.props.class.match(/dropdown-item/), n = o.props.class && o.props.class.match(/dropdown-divider/);
|
|
9
|
-
typeof o.type == "string" && o.type.match(/^h\d$/) ? s(o, "dropdown-header") : o.type === "hr" && !n ? (o.type = "div", s(o, "dropdown-divider")) : !t && !n && s(o, "dropdown-item");
|
|
10
|
-
}
|
|
11
|
-
return e;
|
|
12
|
-
}
|
|
13
|
-
const _ = (e, o) => a("div", {}, p(o.slots.default())), v = l({
|
|
14
|
-
name: "DropdownMenu",
|
|
15
|
-
components: {
|
|
16
|
-
DropdownMenuItems: _
|
|
17
|
-
},
|
|
18
|
-
props: {
|
|
19
|
-
/**
|
|
20
|
-
* Display the dropdown menu aligned left or right
|
|
21
|
-
*
|
|
22
|
-
* @property String
|
|
23
|
-
*/
|
|
24
|
-
align: {
|
|
25
|
-
type: String,
|
|
26
|
-
default: "left",
|
|
27
|
-
validate(e) {
|
|
28
|
-
return ["left", "right"].indexOf(e.toLowerCase()) !== -1;
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
/**
|
|
32
|
-
* The default visibility of the dropdown menu.
|
|
33
|
-
*
|
|
34
|
-
* @property Object
|
|
35
|
-
*/
|
|
36
|
-
show: Boolean
|
|
37
|
-
}
|
|
38
|
-
}), y = (e, o) => {
|
|
39
|
-
const t = e.__vccOpts || e;
|
|
40
|
-
for (const [n, r] of o)
|
|
41
|
-
t[n] = r;
|
|
42
|
-
return t;
|
|
43
|
-
}, $ = ["aria-labelledby"];
|
|
44
|
-
function b(e, o, t, n, r, C) {
|
|
45
|
-
const d = c("dropdown-menu-items");
|
|
46
|
-
return f(), m("div", {
|
|
47
|
-
class: u(["dropdown-menu", {
|
|
48
|
-
"dropdown-menu-left": e.align === "left",
|
|
49
|
-
"dropdown-menu-right": e.align === "right",
|
|
50
|
-
show: e.show
|
|
51
|
-
}]),
|
|
52
|
-
"aria-labelledby": e.$attrs.id
|
|
53
|
-
}, [
|
|
54
|
-
w(d, null, {
|
|
55
|
-
default: h(() => [
|
|
56
|
-
g(e.$slots, "default")
|
|
57
|
-
]),
|
|
58
|
-
_: 3
|
|
59
|
-
})
|
|
60
|
-
], 10, $);
|
|
61
|
-
}
|
|
62
|
-
const M = /* @__PURE__ */ y(v, [["render", b]]);
|
|
63
|
-
export {
|
|
64
|
-
M as DropdownMenu
|
|
65
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(t,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis<"u"?globalThis:t||self,n(t.DropdownMenu={},t.Vue))})(this,function(t,n){"use strict";function d(o,e){o.props.class=`${o.props.class||""} ${e}`.trim()}function p(o){for(const e of o){e.type===n.Fragment&&p(e.children),e.props=Object.assign({class:void 0},e.props),e.attrs=Object.assign({},e.attrs),e.attrs.on||(e.attrs.on={});const s=e.props.class&&e.props.class.match(/dropdown-item/),r=e.props.class&&e.props.class.match(/dropdown-divider/);typeof e.type=="string"&&e.type.match(/^h\d$/)?d(e,"dropdown-header"):e.type==="hr"&&!r?(e.type="div",d(e,"dropdown-divider")):!s&&!r&&d(e,"dropdown-item")}return o}const a=(o,e)=>n.h("div",{},p(e.slots.default())),l=n.defineComponent({name:"DropdownMenu",components:{DropdownMenuItems:a},props:{align:{type:String,default:"left",validate(o){return["left","right"].indexOf(o.toLowerCase())!==-1}},show:Boolean}}),c=(o,e)=>{const s=o.__vccOpts||o;for(const[r,i]of e)s[r]=i;return s},f=["aria-labelledby"];function u(o,e,s,r,i,h){const w=n.resolveComponent("dropdown-menu-items");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["dropdown-menu",{"dropdown-menu-left":o.align==="left","dropdown-menu-right":o.align==="right",show:o.show}]),"aria-labelledby":o.$attrs.id},[n.createVNode(w,null,{default:n.withCtx(()=>[n.renderSlot(o.$slots,"default")]),_:3})],10,f)}const m=c(l,[["render",u]]);t.DropdownMenu=m,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
|
package/dist/index.d.ts
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
declare const _sfc_main: import("vue").DefineComponent<{
|
|
2
|
-
/**
|
|
3
|
-
* Display the dropdown menu aligned left or right
|
|
4
|
-
*
|
|
5
|
-
* @property String
|
|
6
|
-
*/
|
|
7
|
-
align: {
|
|
8
|
-
type: StringConstructor;
|
|
9
|
-
default: string;
|
|
10
|
-
validate(value: any): boolean;
|
|
11
|
-
};
|
|
12
|
-
/**
|
|
13
|
-
* The default visibility of the dropdown menu.
|
|
14
|
-
*
|
|
15
|
-
* @property Object
|
|
16
|
-
*/
|
|
17
|
-
show: BooleanConstructor;
|
|
18
|
-
}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
19
|
-
/**
|
|
20
|
-
* Display the dropdown menu aligned left or right
|
|
21
|
-
*
|
|
22
|
-
* @property String
|
|
23
|
-
*/
|
|
24
|
-
align: {
|
|
25
|
-
type: StringConstructor;
|
|
26
|
-
default: string;
|
|
27
|
-
validate(value: any): boolean;
|
|
28
|
-
};
|
|
29
|
-
/**
|
|
30
|
-
* The default visibility of the dropdown menu.
|
|
31
|
-
*
|
|
32
|
-
* @property Object
|
|
33
|
-
*/
|
|
34
|
-
show: BooleanConstructor;
|
|
35
|
-
}>>, {
|
|
36
|
-
align: string;
|
|
37
|
-
show: boolean;
|
|
38
|
-
}>;
|
|
39
|
-
export default _sfc_main;
|
package/tailwindcss/index.cjs
DELETED
|
@@ -1,302 +0,0 @@
|
|
|
1
|
-
const Color = require('color');
|
|
2
|
-
const plugin = require('tailwindcss/plugin');
|
|
3
|
-
const colors = require('tailwindcss/colors');
|
|
4
|
-
const variations = require('@vue-interface/variant/tailwindcss/variations');
|
|
5
|
-
|
|
6
|
-
module.exports = plugin(function({ addComponents, theme }) {
|
|
7
|
-
const component = {
|
|
8
|
-
// ':root': {
|
|
9
|
-
// '--dropdown-menu-z-index': theme('dropdownMenu.zIndex'),
|
|
10
|
-
// '--dropdown-menu-min-width': theme('dropdownMenu.minWidth'),
|
|
11
|
-
// '--dropdown-menu-padding-y': theme('dropdownMenu.paddingY'),
|
|
12
|
-
// '--dropdown-menu-spacer': theme('dropdownMenu.spacer'),
|
|
13
|
-
// '--dropdown-menu-font-size': theme('dropdownMenu.fontSize'),
|
|
14
|
-
// '--dropdown-menu-color': theme('dropdownMenu.color'),
|
|
15
|
-
// '--dropdown-menu-background-color': theme('dropdownMenu.backgroundColor'),
|
|
16
|
-
// '--dropdown-menu-border-color': theme('dropdownMenu.borderColor'),
|
|
17
|
-
// '--dropdown-menu-border-radius': theme('dropdownMenu.borderRadius'),
|
|
18
|
-
// '--dropdown-menu-border-width': theme('dropdownMenu.borderWidth'),
|
|
19
|
-
// '--dropdown-menu-box-shadow': theme('dropdownMenu.boxShadow'),
|
|
20
|
-
|
|
21
|
-
// '--dropdown-menu-inner-border-radius': theme('dropdownMenu.inner.borderRadius'),
|
|
22
|
-
|
|
23
|
-
// '--dropdown-menu-divider-background-color': theme('dropdownMenu.divider.backgroundColor'),
|
|
24
|
-
|
|
25
|
-
// '--dropdown-menu-link-color': theme('dropdownMenu.link.color'),
|
|
26
|
-
|
|
27
|
-
// '--dropdown-menu-link-hover-color': theme('dropdownMenu.link.hover.color'),
|
|
28
|
-
// '--dropdown-menu-link-hover-background-color': theme('dropdownMenu.link.hover.backgroundColor'),
|
|
29
|
-
|
|
30
|
-
// '--dropdown-menu-link-active-color': theme('dropdownMenu.link.active.color'),
|
|
31
|
-
// '--dropdown-menu-link-active-background-color': theme('dropdownMenu.link.active.backgroundColor'),
|
|
32
|
-
|
|
33
|
-
// '--dropdown-menu-link-disabled-color': theme('dropdownMenu.link.disabled.color'),
|
|
34
|
-
|
|
35
|
-
// '--dropdown-menu-item-padding-x': theme('dropdownMenu.item.paddingX'),
|
|
36
|
-
|
|
37
|
-
// '--dropdown-menu-header-color': theme('dropdownMenu.header.color'),
|
|
38
|
-
// '--dropdown-menu-header-padding-y': theme('dropdownMenu.header.paddingY')
|
|
39
|
-
// },
|
|
40
|
-
|
|
41
|
-
// The dropdown wrapper (`<div>`)
|
|
42
|
-
'.dropup, .dropright, .dropdown, .dropleft': {
|
|
43
|
-
position: 'relative'
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
'.dropdown-toggle': {
|
|
47
|
-
whiteSpace: 'nowrap',
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
'.dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
|
|
51
|
-
display: 'inline-block',
|
|
52
|
-
marginLeft: '.3em',
|
|
53
|
-
verticalAlign: 'calc(.3em * .85)',
|
|
54
|
-
content: '""',
|
|
55
|
-
borderTop: '.3em solid',
|
|
56
|
-
borderRight: '.3em solid transparent',
|
|
57
|
-
borderBottom: 0,
|
|
58
|
-
borderLeft: '.3em solid transparent'
|
|
59
|
-
} : undefined,
|
|
60
|
-
|
|
61
|
-
// The dropdown menu
|
|
62
|
-
'.dropdown-menu': {
|
|
63
|
-
position: 'absolute',
|
|
64
|
-
top: '100%',
|
|
65
|
-
left: 0,
|
|
66
|
-
zIndex: theme('dropdownMenu.zIndex'),
|
|
67
|
-
display: 'none', // none by default, but block on "open" of the menu
|
|
68
|
-
minWidth: theme('dropdownMenu.minWidth'),
|
|
69
|
-
padding: `${theme('dropdownMenu.paddingY')} 0`,
|
|
70
|
-
// margin: `${theme('dropdownMenu.spacer')} 0 0`, // override default ul
|
|
71
|
-
fontSize: theme('dropdownMenu.fontSize'),
|
|
72
|
-
color: theme('dropdownMenu.color'),
|
|
73
|
-
textAlign: 'left', // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
|
74
|
-
listStyle: 'none',
|
|
75
|
-
backgroundColor: theme('dropdownMenu.backgroundColor'),
|
|
76
|
-
backgroundClip: 'padding-box',
|
|
77
|
-
border: `${theme('dropdownMenu.borderWidth')} solid ${theme('dropdownMenu.borderColor')}`,
|
|
78
|
-
borderRadius: `${theme('dropdownMenu.borderRadius')}`,
|
|
79
|
-
boxShadow: theme('dropdownMenu.enableShadows') ? theme('dropdownMenu.boxShadow') : undefined,
|
|
80
|
-
|
|
81
|
-
// When enabled Popper.js, reset basic dropdown position
|
|
82
|
-
// stylelint-disable-next-line no-duplicate-selectors
|
|
83
|
-
'&[x-placement^="top"], &[x-placement^="right"], &[x-placement^="bottom"], &[x-placement^="left"]': {
|
|
84
|
-
right: 'auto',
|
|
85
|
-
bottom: 'auto'
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
-
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
|
90
|
-
// Just add .dropup after the standard .dropdown class and you're set.
|
|
91
|
-
'.dropup .dropdown-menu': {
|
|
92
|
-
top: 'auto',
|
|
93
|
-
bottom: '100%',
|
|
94
|
-
marginTop: 0,
|
|
95
|
-
// marginBottom: theme('dropdownMenu.spacer')
|
|
96
|
-
},
|
|
97
|
-
|
|
98
|
-
'.dropup .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
|
|
99
|
-
display: 'inline-block',
|
|
100
|
-
marginLeft: '.3em',
|
|
101
|
-
verticalAlign: 'calc(.3em * .85)',
|
|
102
|
-
content: '""',
|
|
103
|
-
borderTop: 0,
|
|
104
|
-
borderRight: '.3em solid transparent',
|
|
105
|
-
borderBottom: '.3em solid',
|
|
106
|
-
borderLeft: '.3em solid transparent'
|
|
107
|
-
} : undefined,
|
|
108
|
-
|
|
109
|
-
'.dropright .dropdown-menu': {
|
|
110
|
-
top: 0,
|
|
111
|
-
right: 'auto',
|
|
112
|
-
left: '100%',
|
|
113
|
-
marginTop: 0,
|
|
114
|
-
// marginLeft: theme('dropdownMenu.spacer')
|
|
115
|
-
},
|
|
116
|
-
|
|
117
|
-
'.dropright .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
|
|
118
|
-
display: 'inline-block',
|
|
119
|
-
marginLeft: '.3em',
|
|
120
|
-
verticalAlign: 'calc(.3em * .85)',
|
|
121
|
-
content: '""',
|
|
122
|
-
borderTop: '.3em solid transparent',
|
|
123
|
-
borderRight: 0,
|
|
124
|
-
borderBottom: '.3em solid transparent',
|
|
125
|
-
borderLeft: '.3em solid',
|
|
126
|
-
verticalAlign: 0
|
|
127
|
-
} : undefined,
|
|
128
|
-
|
|
129
|
-
'.dropleft .dropdown-menu': {
|
|
130
|
-
top: 0,
|
|
131
|
-
right: '100%',
|
|
132
|
-
left: 'auto',
|
|
133
|
-
marginTop: 0,
|
|
134
|
-
// marginRight: theme('dropdownMenu.spacer')
|
|
135
|
-
},
|
|
136
|
-
|
|
137
|
-
'.dropleft .dropdown-toggle::after': {
|
|
138
|
-
display: 'none'
|
|
139
|
-
},
|
|
140
|
-
|
|
141
|
-
'.dropleft .dropdown-toggle::before': {
|
|
142
|
-
display: 'inline-block',
|
|
143
|
-
marginRight: '.3em',
|
|
144
|
-
verticalAlign: 'calc(.3em * .85)',
|
|
145
|
-
content: '""',
|
|
146
|
-
borderTop: '.3em solid transparent',
|
|
147
|
-
borderLeft: 0,
|
|
148
|
-
borderBottom: '.3em solid transparent',
|
|
149
|
-
borderRight: '.3em solid',
|
|
150
|
-
verticalAlign: 0
|
|
151
|
-
},
|
|
152
|
-
|
|
153
|
-
// Dividers (basically an `<hr>`) within the dropdown
|
|
154
|
-
'.dropdown-divider': {
|
|
155
|
-
height: 0,
|
|
156
|
-
margin: `calc(${theme('dropdownMenu.spacer')} / 2) 0`,
|
|
157
|
-
overflow: 'hidden',
|
|
158
|
-
borderTop: `1px solid ${theme('dropdownMenu.divider.backgroundColor')}`,
|
|
159
|
-
},
|
|
160
|
-
|
|
161
|
-
// Links, buttons, and more within the dropdown menu
|
|
162
|
-
//
|
|
163
|
-
// `<button>`-specific styles are denoted with `// For <button>s`
|
|
164
|
-
'.dropdown-item': {
|
|
165
|
-
display: 'block',
|
|
166
|
-
width: '100%', // For `<button>`s
|
|
167
|
-
padding: `${theme('dropdownMenu.item.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
|
|
168
|
-
clear: 'both',
|
|
169
|
-
fontWeight: 'normal',
|
|
170
|
-
color: theme('dropdownMenu.link.color'),
|
|
171
|
-
textAlign: 'inherit', // For `<button>`s
|
|
172
|
-
textDecoration: 'none',
|
|
173
|
-
whiteSpace: 'nowrap', // prevent links from randomly breaking onto new lines
|
|
174
|
-
backgroundColor: 'transparent', // For `<button>`s
|
|
175
|
-
border: 0, // For `<button>`s
|
|
176
|
-
},
|
|
177
|
-
|
|
178
|
-
'.dropdown-item:hover, .dropdown-item:focus': {
|
|
179
|
-
color: theme('dropdownMenu.link.hover.color'),
|
|
180
|
-
textDecoration: 'none',
|
|
181
|
-
backgroundColor: theme('dropdownMenu.link.hover.backgroundColor')
|
|
182
|
-
},
|
|
183
|
-
|
|
184
|
-
'.dropdown-item.active, .dropdown-item:active': {
|
|
185
|
-
color: theme('dropdownMenu.link.active.color'),
|
|
186
|
-
textDecoration: 'none',
|
|
187
|
-
backgroundColor: theme('dropdownMenu.link.active.backgroundColor')
|
|
188
|
-
},
|
|
189
|
-
|
|
190
|
-
'.dropdown-item.disabled, .dropdown-item:disabled': {
|
|
191
|
-
color: theme('dropdownMenu.link.disabled.color'),
|
|
192
|
-
pointerEvents: 'none',
|
|
193
|
-
backgroundColor: 'transparent',
|
|
194
|
-
backgroundImage: 'none'
|
|
195
|
-
},
|
|
196
|
-
|
|
197
|
-
'.dropdown-menu.show': {
|
|
198
|
-
display: 'block'
|
|
199
|
-
},
|
|
200
|
-
|
|
201
|
-
// Dropdown section headers
|
|
202
|
-
'.dropdown-header': {
|
|
203
|
-
display: theme('dropdownMenu.header.display'),
|
|
204
|
-
padding: `${theme('dropdownMenu.header.paddingY')} ${theme('dropdownMenu.header.paddingX')}`,
|
|
205
|
-
marginBottom: 0, // for use with heading elements
|
|
206
|
-
fontSize: theme('dropdownMenu.header.fontSize'),
|
|
207
|
-
fontWeight: theme('dropdownMenu.header.fontWeight'),
|
|
208
|
-
color: theme('dropdownMenu.header.color'),
|
|
209
|
-
whiteSpace: 'nowrap' // as with > li > a
|
|
210
|
-
},
|
|
211
|
-
|
|
212
|
-
// Dropdown text
|
|
213
|
-
'.dropdown-item-text': {
|
|
214
|
-
display: theme('dropdownMenu.item.display'),
|
|
215
|
-
padding: `${theme('dropdownMenu.item.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
|
|
216
|
-
color: theme('dropdownMenu.link.color'),
|
|
217
|
-
},
|
|
218
|
-
|
|
219
|
-
'.dropdown-menu-left': {
|
|
220
|
-
right: 'auto',
|
|
221
|
-
left: 0
|
|
222
|
-
},
|
|
223
|
-
|
|
224
|
-
'.dropdown-menu-right': {
|
|
225
|
-
// right: 0,
|
|
226
|
-
left: 'auto'
|
|
227
|
-
}
|
|
228
|
-
};
|
|
229
|
-
|
|
230
|
-
if(theme('dropdownMenu.paddingY') === 0) {
|
|
231
|
-
component['.dropdown-item']['&:first-child'] = {
|
|
232
|
-
borderTopLeftRadius: theme('dropdownMenu.inner.borderRadius'),
|
|
233
|
-
borderTopRightRadius: theme('dropdownMenu.inner.borderRadius'),
|
|
234
|
-
};
|
|
235
|
-
|
|
236
|
-
component['.dropdown-item']['&:last-child'] = {
|
|
237
|
-
borderBottomLeftRadius: theme('dropdownMenu.inner.borderRadius'),
|
|
238
|
-
borderBottomRightRadius: theme('dropdownMenu.inner.borderRadius'),
|
|
239
|
-
};
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
addComponents(component);
|
|
243
|
-
}, {
|
|
244
|
-
theme: {
|
|
245
|
-
dropdownMenu: theme => ({
|
|
246
|
-
enableShadows: true,
|
|
247
|
-
enableCarets: true,
|
|
248
|
-
zIndex: 1000,
|
|
249
|
-
minWidth: '10rem',
|
|
250
|
-
paddingY: '.5rem',
|
|
251
|
-
spacer: '.125rem',
|
|
252
|
-
fontSize: '1rem',
|
|
253
|
-
color: 'inherit',
|
|
254
|
-
backgroundColor: theme('colors.white', colors.white),
|
|
255
|
-
borderColor: Color(theme('colors.black', colors.black)).fade(.85),
|
|
256
|
-
borderRadius: '.25rem',
|
|
257
|
-
borderWidth: '1px',
|
|
258
|
-
boxShadow: `0 .5rem 1rem ${Color(theme('colors.black', colors.black)).fade(.85)}`,
|
|
259
|
-
|
|
260
|
-
inner: {
|
|
261
|
-
borderRadius: 'calc(.25rem - 1px)'
|
|
262
|
-
},
|
|
263
|
-
|
|
264
|
-
divider: {
|
|
265
|
-
backgroundColor: theme('colors.gray.100', colors.gray[100]),
|
|
266
|
-
},
|
|
267
|
-
|
|
268
|
-
link: {
|
|
269
|
-
color: theme('colors.gray.800', colors.gray[800]),
|
|
270
|
-
|
|
271
|
-
hover: {
|
|
272
|
-
color: Color(theme('colors.gray.800', colors.gray[800])).darken(.5).hex(),
|
|
273
|
-
backgroundColor: theme('colors.gray.100', colors.gray[100])
|
|
274
|
-
},
|
|
275
|
-
|
|
276
|
-
active: {
|
|
277
|
-
color: theme('colors.white', colors.white),
|
|
278
|
-
backgroundColor: theme('variations.primary', variations.primary),
|
|
279
|
-
},
|
|
280
|
-
|
|
281
|
-
disabled: {
|
|
282
|
-
color: theme('colors.gray.500', colors.gray[500])
|
|
283
|
-
}
|
|
284
|
-
},
|
|
285
|
-
|
|
286
|
-
item: {
|
|
287
|
-
display: 'block',
|
|
288
|
-
paddingY: '.25rem',
|
|
289
|
-
paddingX: '1rem',
|
|
290
|
-
},
|
|
291
|
-
|
|
292
|
-
header: {
|
|
293
|
-
color: theme('colors.gray.500', colors.gray[500]),
|
|
294
|
-
display: 'block',
|
|
295
|
-
fontSize: '.875rem',
|
|
296
|
-
fontWeight: 'bold',
|
|
297
|
-
paddingX: '.5rem',
|
|
298
|
-
paddingY: '.5rem'
|
|
299
|
-
}
|
|
300
|
-
})
|
|
301
|
-
}
|
|
302
|
-
});
|
package/tailwindcss/safelist.cjs
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
module.exports = () => ([
|
|
2
|
-
'dropdown-divider',
|
|
3
|
-
'dropdown-header',
|
|
4
|
-
'dropdown-item',
|
|
5
|
-
'dropdown-item-text',
|
|
6
|
-
'dropdown-menu',
|
|
7
|
-
'dropdown-menu-left',
|
|
8
|
-
'dropdown-menu-right',
|
|
9
|
-
'dropdown-toggle',
|
|
10
|
-
'dropdown-toggle-split',
|
|
11
|
-
'dropup',
|
|
12
|
-
'dropdown',
|
|
13
|
-
'dropright',
|
|
14
|
-
'dropleft',
|
|
15
|
-
]);
|