@vue-interface/dropdown-menu 2.0.0-beta.12 → 2.0.0-beta.14
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/package.json +2 -4
- package/tailwindcss/index.cjs +29 -104
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/dropdown-menu",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.14",
|
|
4
4
|
"description": "A Vue dropdown menu component.",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -44,8 +44,7 @@
|
|
|
44
44
|
},
|
|
45
45
|
"homepage": "https://github.com/vue-interface/dropdown-menu",
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@vue-interface/variant": "^2.0.0-beta.0"
|
|
48
|
-
"color": "^4.2.0"
|
|
47
|
+
"@vue-interface/variant": "^2.0.0-beta.0"
|
|
49
48
|
},
|
|
50
49
|
"peerDependencies": {
|
|
51
50
|
"vue": "^3.3.4"
|
|
@@ -55,7 +54,6 @@
|
|
|
55
54
|
"@semantic-release/changelog": "^6.0.3",
|
|
56
55
|
"@semantic-release/git": "^10.0.1",
|
|
57
56
|
"@semantic-release/npm": "^10.0.5",
|
|
58
|
-
"@types/color": "^3.0.3",
|
|
59
57
|
"@vitejs/plugin-vue": "^4.3.2",
|
|
60
58
|
"@vue-interface/eslint-config": "^1.0.0-beta.0",
|
|
61
59
|
"autoprefixer": "^10.4.15",
|
package/tailwindcss/index.cjs
CHANGED
|
@@ -1,25 +1,11 @@
|
|
|
1
|
-
const Color = require('color');
|
|
2
1
|
const plugin = require('tailwindcss/plugin');
|
|
3
2
|
const colors = require('tailwindcss/colors');
|
|
4
|
-
// const variations = require('@vue-interface/variant/tailwindcss/variations');
|
|
5
3
|
|
|
6
4
|
module.exports = plugin(function({ addComponents, theme }) {
|
|
7
|
-
// if(theme('dropdownMenu.paddingY') === 0) {
|
|
8
|
-
// component['.dropdown-item']['&:first-child'] = {
|
|
9
|
-
// borderTopLeftRadius: theme('dropdownMenu.inner.borderRadius'),
|
|
10
|
-
// borderTopRightRadius: theme('dropdownMenu.inner.borderRadius'),
|
|
11
|
-
// };
|
|
12
|
-
|
|
13
|
-
// component['.dropdown-item']['&:last-child'] = {
|
|
14
|
-
// borderBottomLeftRadius: theme('dropdownMenu.inner.borderRadius'),
|
|
15
|
-
// borderBottomRightRadius: theme('dropdownMenu.inner.borderRadius'),
|
|
16
|
-
// };
|
|
17
|
-
// }
|
|
18
|
-
|
|
19
5
|
addComponents(theme('dropdownMenu.css'));
|
|
20
6
|
addComponents({
|
|
21
|
-
'.btn-dropdown': theme('dropdownMenu.css')
|
|
22
|
-
})
|
|
7
|
+
'.btn-dropdown, .BtnDropdown': theme('dropdownMenu.css')
|
|
8
|
+
});
|
|
23
9
|
}, {
|
|
24
10
|
theme: {
|
|
25
11
|
dropdownMenu: theme => ({
|
|
@@ -35,7 +21,7 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
35
21
|
padding: '.5rem 0',
|
|
36
22
|
// margin: `${theme('dropdownMenu.spacer')} 0 0`, // override default ul
|
|
37
23
|
fontSize: '1rem',
|
|
38
|
-
color: 'inherit',
|
|
24
|
+
// color: 'inherit',
|
|
39
25
|
textAlign: 'left', // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
|
40
26
|
listStyle: 'none',
|
|
41
27
|
backgroundColor: colors.white,
|
|
@@ -44,6 +30,9 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
44
30
|
borderRadius: '.25rem',
|
|
45
31
|
boxShadow: `0 .25rem 1rem rgba(0, 0, 0, .5)`,
|
|
46
32
|
|
|
33
|
+
'@apply dark:bg-neutral-800': {},
|
|
34
|
+
'@apply dark:border-neutral-700': {},
|
|
35
|
+
|
|
47
36
|
// The dropdown wrapper (`<div>`)
|
|
48
37
|
'.dropup:has(&), .dropright:has(&), .dropdown:has(&), .dropleft:has(&)': {
|
|
49
38
|
position: 'relative'
|
|
@@ -59,33 +48,39 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
59
48
|
// Links, buttons, and more within the dropdown menu
|
|
60
49
|
//
|
|
61
50
|
// `<button>`-specific styles are denoted with `// For <button>s`
|
|
62
|
-
'.dropdown-item, & > :not(.dropdown-header, .dropdown-item-text, .dropdown-item-plain)': {
|
|
51
|
+
'.dropdown-item, & > :not(.dropdown-header, .dropdown-item-text, .dropdown-item-plain, .dropdown-divider)': {
|
|
63
52
|
display: 'block',
|
|
64
53
|
width: '100%', // For `<button>`s
|
|
65
54
|
padding: '.25rem 1rem',
|
|
66
55
|
clear: 'both',
|
|
67
56
|
fontWeight: 'normal',
|
|
68
|
-
color: theme('colors.
|
|
57
|
+
color: theme('colors.neutral.800', colors.neutral[800]),
|
|
69
58
|
textAlign: 'inherit', // For `<button>`s
|
|
70
59
|
textDecoration: 'none',
|
|
71
60
|
whiteSpace: 'nowrap', // prevent links from randomly breaking onto new lines
|
|
72
61
|
backgroundColor: 'transparent', // For `<button>`s
|
|
73
62
|
border: 0, // For `<button>`s
|
|
74
63
|
|
|
64
|
+
'@apply dark:text-neutral-300': {},
|
|
65
|
+
|
|
75
66
|
'&:hover, &:focus': {
|
|
76
|
-
color: theme('colors.
|
|
67
|
+
color: theme('colors.neutral.800', colors.neutral[900]),
|
|
77
68
|
textDecoration: 'none',
|
|
78
|
-
backgroundColor: theme('colors.
|
|
69
|
+
backgroundColor: theme('colors.neutral.100', colors.neutral[100]),
|
|
70
|
+
|
|
71
|
+
'@apply dark:bg-neutral-600 dark:text-neutral-200': {}
|
|
79
72
|
},
|
|
80
73
|
|
|
81
74
|
'&.active, &:active': {
|
|
82
75
|
color: theme('colors.white', colors.white),
|
|
83
76
|
textDecoration: 'none',
|
|
84
|
-
backgroundColor: theme('variations.primary', colors.blue[500])
|
|
77
|
+
backgroundColor: theme('variations.primary', colors.blue[500]),
|
|
78
|
+
|
|
79
|
+
'@apply dark:bg-blue-500 dark:text-neutral-200': {}
|
|
85
80
|
},
|
|
86
81
|
|
|
87
82
|
'&.disabled, &:disabled': {
|
|
88
|
-
color: theme('colors.
|
|
83
|
+
color: theme('colors.neutral.500', colors.neutral[500]),
|
|
89
84
|
pointerEvents: 'none',
|
|
90
85
|
backgroundColor: 'transparent',
|
|
91
86
|
backgroundImage: 'none'
|
|
@@ -99,8 +94,10 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
99
94
|
marginBottom: 0, // for use with heading elements
|
|
100
95
|
fontSize: '.875rem',
|
|
101
96
|
fontWeight: 'bold',
|
|
102
|
-
color: theme('colors.
|
|
103
|
-
whiteSpace: 'nowrap' // as with > li > a
|
|
97
|
+
color: theme('colors.neutral.500', colors.neutral[500]),
|
|
98
|
+
whiteSpace: 'nowrap', // as with > li > a
|
|
99
|
+
|
|
100
|
+
'@apply dark:text-neutral-400': {},
|
|
104
101
|
},
|
|
105
102
|
|
|
106
103
|
// Dividers (basically an `<hr>`) within the dropdown
|
|
@@ -108,14 +105,18 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
108
105
|
height: 0,
|
|
109
106
|
margin: 'calc(.125rem / 2) 0',
|
|
110
107
|
overflow: 'hidden',
|
|
111
|
-
borderTop: `1px solid ${theme('colors.
|
|
108
|
+
borderTop: `1px solid ${theme('colors.neutral.200', colors.neutral[200])}`,
|
|
109
|
+
|
|
110
|
+
'@apply dark:border-neutral-700': {},
|
|
112
111
|
},
|
|
113
112
|
|
|
114
113
|
// Dropdown text
|
|
115
114
|
'.dropdown-item-text': {
|
|
116
115
|
display: 'block',
|
|
117
116
|
padding: '.25rem 1rem',
|
|
118
|
-
color: theme('colors.
|
|
117
|
+
color: theme('colors.neutral.800', colors.neutral[800]),
|
|
118
|
+
|
|
119
|
+
'@apply dark:text-neutral-200': {},
|
|
119
120
|
},
|
|
120
121
|
|
|
121
122
|
'&.show': {
|
|
@@ -130,83 +131,7 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
130
131
|
'&.dropdown-menu-right': {
|
|
131
132
|
right: 0,
|
|
132
133
|
left: 'auto'
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
// '.dropdown-toggle': {
|
|
136
|
-
// whiteSpace: 'nowrap',
|
|
137
|
-
// },
|
|
138
|
-
|
|
139
|
-
// '.dropdown-toggle::after': {
|
|
140
|
-
// display: 'inline-block',
|
|
141
|
-
// marginLeft: '.3em',
|
|
142
|
-
// verticalAlign: 'calc(.3em * .85)',
|
|
143
|
-
// content: '""',
|
|
144
|
-
// borderTop: '.3em solid',
|
|
145
|
-
// borderRight: '.3em solid transparent',
|
|
146
|
-
// borderBottom: 0,
|
|
147
|
-
// borderLeft: '.3em solid transparent'
|
|
148
|
-
// },
|
|
149
|
-
|
|
150
|
-
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
|
151
|
-
// Just add .dropup after the standard .dropdown class and you're set.
|
|
152
|
-
'.dropup &': {
|
|
153
|
-
top: 'auto',
|
|
154
|
-
bottom: '100%',
|
|
155
|
-
marginTop: 0,
|
|
156
|
-
},
|
|
157
|
-
|
|
158
|
-
// '.dropup .dropdown-toggle::after': {
|
|
159
|
-
// display: 'inline-block',
|
|
160
|
-
// marginLeft: '.3em',
|
|
161
|
-
// verticalAlign: 'calc(.3em * .85)',
|
|
162
|
-
// content: '""',
|
|
163
|
-
// borderTop: 0,
|
|
164
|
-
// borderRight: '.3em solid transparent',
|
|
165
|
-
// borderBottom: '.3em solid',
|
|
166
|
-
// borderLeft: '.3em solid transparent'
|
|
167
|
-
// },
|
|
168
|
-
|
|
169
|
-
'.dropright &': {
|
|
170
|
-
top: 0,
|
|
171
|
-
right: 'auto',
|
|
172
|
-
left: '100%',
|
|
173
|
-
marginTop: 0,
|
|
174
|
-
},
|
|
175
|
-
|
|
176
|
-
// '.dropright .dropdown-toggle::after': {
|
|
177
|
-
// display: 'inline-block',
|
|
178
|
-
// marginLeft: '.3em',
|
|
179
|
-
// verticalAlign: 'calc(.3em * .85)',
|
|
180
|
-
// content: '""',
|
|
181
|
-
// borderTop: '.3em solid transparent',
|
|
182
|
-
// borderRight: 0,
|
|
183
|
-
// borderBottom: '.3em solid transparent',
|
|
184
|
-
// borderLeft: '.3em solid',
|
|
185
|
-
// verticalAlign: 0
|
|
186
|
-
// },
|
|
187
|
-
|
|
188
|
-
'.dropleft &': {
|
|
189
|
-
top: 0,
|
|
190
|
-
right: '100%',
|
|
191
|
-
left: 'auto',
|
|
192
|
-
marginTop: 0,
|
|
193
|
-
},
|
|
194
|
-
|
|
195
|
-
// '.dropleft .dropdown-toggle::after': {
|
|
196
|
-
// display: 'none'
|
|
197
|
-
// },
|
|
198
|
-
|
|
199
|
-
// '.dropleft .dropdown-toggle::before': {
|
|
200
|
-
// display: 'inline-block',
|
|
201
|
-
// marginRight: '.3em',
|
|
202
|
-
// verticalAlign: 'calc(.3em * .85)',
|
|
203
|
-
// content: '""',
|
|
204
|
-
// borderTop: '.3em solid transparent',
|
|
205
|
-
// borderLeft: 0,
|
|
206
|
-
// borderBottom: '.3em solid transparent',
|
|
207
|
-
// borderRight: '.3em solid',
|
|
208
|
-
// verticalAlign: 0
|
|
209
|
-
// },
|
|
134
|
+
}
|
|
210
135
|
}
|
|
211
136
|
}
|
|
212
137
|
})
|