@vue-interface/dropdown-menu 1.0.6 → 1.0.10

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.
@@ -108,7 +108,7 @@ var render = function() {
108
108
  var _vm = this;
109
109
  var _h = _vm.$createElement;
110
110
  var _c = _vm._self._c || _h;
111
- return _c("div", { staticClass: "dropdown-menu mb-3", class: {
111
+ return _c("div", { staticClass: "dropdown-menu", class: {
112
112
  "dropdown-menu-left": _vm.align === "left",
113
113
  "dropdown-menu-right": _vm.align === "right",
114
114
  "show": _vm.show
@@ -1 +1 @@
1
- (function(s,l){typeof exports=="object"&&typeof module!="undefined"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(s=typeof globalThis!="undefined"?globalThis:s||self,l(s.DropdownMenu={}))})(this,function(s){"use strict";function l(e,n,t,m,o,d,u,k){var i=typeof e=="function"?e.options:e;n&&(i.render=n,i.staticRenderFns=t,i._compiled=!0),m&&(i.functional=!0),d&&(i._scopeId="data-v-"+d);var a;if(u?(a=function(r){r=r||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!r&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(r=__VUE_SSR_CONTEXT__),o&&o.call(this,r),r&&r._registeredComponents&&r._registeredComponents.add(u)},i._ssrRegister=a):o&&(a=k?function(){o.call(this,(i.functional?this.parent:this).$root.$options.shadowRoot)}:o),a)if(i.functional){i._injectStyles=a;var E=i.render;i.render=function(F,C){return a.call(C),E(F,C)}}else{var w=i.beforeCreate;i.beforeCreate=w?[].concat(w,a):[a]}return{exports:e,options:i}}function f(e,n){e.data.staticClass=`${e.data.staticClass||""} ${n}`.trim()}function c(e,n){return t=>{typeof n=="function"&&n(t),t.cancelBubble||e(t)}}function _(e,n){return e.data.on[n]||e.componentOptions&&e.componentOptions.listeners&&e.componentOptions.listeners[n]}const $={functional:!0,render(e,n){return n.children.filter(t=>!!t.tag).forEach((t,m)=>{t.data=Object.assign({staticClass:void 0},t.data),t.data.on||(t.data.on={});const o=t.data.staticClass&&t.data.staticClass.match(/dropdown-item/),d=t.data.staticClass&&t.data.staticClass.match(/dropdown-divider/);t.data.on.click=c(u=>{n.parent.$emit("click-item",u,t)},_(t,"click")),t.data.on.blur=c(u=>{n.parent.$emit("blur-item",u,t)},_(t,"blur")),t.tag.match(/^h\d$/)?f(t,"dropdown-header"):t.tag==="hr"&&!d?(t.tag="div",f(t,"dropdown-divider")):o||f(t,"dropdown-item")}),n.children}};let g,b;const p={};var v=l($,g,b,!1,M,null,null,null);function M(e){for(let n in p)this[n]=p[n]}var y=function(){return v.exports}(),D=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"dropdown-menu mb-3",class:{"dropdown-menu-left":e.align==="left","dropdown-menu-right":e.align==="right",show:e.show},attrs:{"aria-labelledby":e.$attrs.id}},[t("dropdown-menu-items",[e._t("default")],2)],1)},O=[];const R={name:"DropdownMenu",components:{DropdownMenuItems:y},props:{align:{type:String,default:"left",validate(e){return["left","right"].indexOf(e.toLowerCase())!==-1}},show:Boolean}},h={};var S=l(R,D,O,!1,T,null,null,null);function T(e){for(let n in h)this[n]=h[n]}var j=function(){return S.exports}();s.DropdownMenu=j,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
1
+ (function(s,l){typeof exports=="object"&&typeof module!="undefined"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(s=typeof globalThis!="undefined"?globalThis:s||self,l(s.DropdownMenu={}))})(this,function(s){"use strict";function l(e,n,t,m,o,d,u,k){var i=typeof e=="function"?e.options:e;n&&(i.render=n,i.staticRenderFns=t,i._compiled=!0),m&&(i.functional=!0),d&&(i._scopeId="data-v-"+d);var a;if(u?(a=function(r){r=r||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!r&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(r=__VUE_SSR_CONTEXT__),o&&o.call(this,r),r&&r._registeredComponents&&r._registeredComponents.add(u)},i._ssrRegister=a):o&&(a=k?function(){o.call(this,(i.functional?this.parent:this).$root.$options.shadowRoot)}:o),a)if(i.functional){i._injectStyles=a;var E=i.render;i.render=function(F,C){return a.call(C),E(F,C)}}else{var w=i.beforeCreate;i.beforeCreate=w?[].concat(w,a):[a]}return{exports:e,options:i}}function f(e,n){e.data.staticClass=`${e.data.staticClass||""} ${n}`.trim()}function c(e,n){return t=>{typeof n=="function"&&n(t),t.cancelBubble||e(t)}}function _(e,n){return e.data.on[n]||e.componentOptions&&e.componentOptions.listeners&&e.componentOptions.listeners[n]}const $={functional:!0,render(e,n){return n.children.filter(t=>!!t.tag).forEach((t,m)=>{t.data=Object.assign({staticClass:void 0},t.data),t.data.on||(t.data.on={});const o=t.data.staticClass&&t.data.staticClass.match(/dropdown-item/),d=t.data.staticClass&&t.data.staticClass.match(/dropdown-divider/);t.data.on.click=c(u=>{n.parent.$emit("click-item",u,t)},_(t,"click")),t.data.on.blur=c(u=>{n.parent.$emit("blur-item",u,t)},_(t,"blur")),t.tag.match(/^h\d$/)?f(t,"dropdown-header"):t.tag==="hr"&&!d?(t.tag="div",f(t,"dropdown-divider")):o||f(t,"dropdown-item")}),n.children}};let g,b;const p={};var v=l($,g,b,!1,M,null,null,null);function M(e){for(let n in p)this[n]=p[n]}var y=function(){return v.exports}(),D=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"dropdown-menu",class:{"dropdown-menu-left":e.align==="left","dropdown-menu-right":e.align==="right",show:e.show},attrs:{"aria-labelledby":e.$attrs.id}},[t("dropdown-menu-items",[e._t("default")],2)],1)},O=[];const R={name:"DropdownMenu",components:{DropdownMenuItems:y},props:{align:{type:String,default:"left",validate(e){return["left","right"].indexOf(e.toLowerCase())!==-1}},show:Boolean}},h={};var S=l(R,D,O,!1,T,null,null,null);function T(e){for(let n in h)this[n]=h[n]}var j=function(){return S.exports}();s.DropdownMenu=j,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
package/package.json CHANGED
@@ -1,21 +1,19 @@
1
1
  {
2
2
  "name": "@vue-interface/dropdown-menu",
3
- "version": "1.0.6",
3
+ "version": "1.0.10",
4
4
  "description": "A Vue dropdown menu component.",
5
5
  "files": [
6
- "dist"
6
+ "dist",
7
+ "src",
8
+ "tailwindcss"
7
9
  ],
8
10
  "main": "./dist/dropdown-menu.umd.js",
9
- "module": "./dist/dropdown-menu.es.js",
11
+ "module": "./index.js",
10
12
  "browserslist": "last 2 versions, > 0.5%, ie >= 11",
11
13
  "scripts": {
12
14
  "dev": "vite",
13
15
  "build": "vite build",
14
16
  "preview": "vite preview",
15
- "watch": "npm run serve",
16
- "serve": "vue-cli-service build --target lib --name=DropdownMenu ./main.vue --watch",
17
- "lint": "vue-cli-service lint",
18
- "fix": "vue-cli-service lint --fix",
19
17
  "pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
20
18
  "release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
21
19
  "release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
@@ -42,7 +40,8 @@
42
40
  "homepage": "https://github.com/vue-interface/dropdown-menu/docs#readme",
43
41
  "dependencies": {
44
42
  "@vue-interface/variant": "^1.1.7",
45
- "vue": "^2.6.12"
43
+ "color": "^4.2.0",
44
+ "vue": "^2.6.14"
46
45
  },
47
46
  "devDependencies": {
48
47
  "@rollup/plugin-babel": "^5.3.0",
@@ -50,7 +49,6 @@
50
49
  "babel-eslint": "^10.1.0",
51
50
  "babel-preset-vue": "^2.0.2",
52
51
  "change-case": "^4.1.2",
53
- "color": "^4.2.0",
54
52
  "eslint": "^6.7.2",
55
53
  "eslint-plugin-vue": "^6.2.2",
56
54
  "pascalcase": "^2.0.0",
@@ -0,0 +1,3 @@
1
+ <template>
2
+ <hr class="dropdown-divider">
3
+ </template>
@@ -0,0 +1,5 @@
1
+ <template>
2
+ <h3 class="dropdown-header">
3
+ <slot />
4
+ </h3>
5
+ </template>
@@ -0,0 +1,5 @@
1
+ <template>
2
+ <div class="dropdown-item">
3
+ <slot />
4
+ </div>
5
+ </template>
@@ -0,0 +1,52 @@
1
+ <template>
2
+ <div
3
+ class="dropdown-menu"
4
+ :aria-labelledby="$attrs.id"
5
+ :class="{
6
+ 'dropdown-menu-left': align === 'left',
7
+ 'dropdown-menu-right': align === 'right',
8
+ 'show': show
9
+ }">
10
+ <dropdown-menu-items>
11
+ <slot @click="onItemClick" />
12
+ </dropdown-menu-items>
13
+ </div>
14
+ </template>
15
+
16
+ <script>
17
+ import DropdownMenuItems from './DropdownMenuItems.vue';
18
+
19
+ export default {
20
+
21
+ name: 'DropdownMenu',
22
+
23
+ components: {
24
+ DropdownMenuItems
25
+ },
26
+
27
+ props: {
28
+
29
+ /**
30
+ * Display the dropdown menu aligned left or right
31
+ *
32
+ * @property String
33
+ */
34
+ align: {
35
+ type: String,
36
+ default: 'left',
37
+ validate(value) {
38
+ return ['left', 'right'].indexOf(value.toLowerCase()) !== -1;
39
+ }
40
+ },
41
+
42
+ /**
43
+ * The default visibility of the dropdown menu.
44
+ *
45
+ * @property Object
46
+ */
47
+ show: Boolean
48
+
49
+ }
50
+
51
+ };
52
+ </script>
@@ -0,0 +1,66 @@
1
+ <script>
2
+ function appendClass(vnode, str) {
3
+ vnode.data.staticClass = `${vnode.data.staticClass || ''} ${str}`.trim();
4
+ }
5
+
6
+ function wrap(wrapper, fn) {
7
+ return (e) => {
8
+ if(typeof fn === 'function') {
9
+ fn(e);
10
+ }
11
+
12
+ if(!e.cancelBubble) {
13
+ wrapper(e);
14
+ }
15
+ };
16
+ }
17
+
18
+ function listener(vnode, key) {
19
+ return vnode.data.on[key] || (
20
+ vnode.componentOptions &&
21
+ vnode.componentOptions.listeners &&
22
+ vnode.componentOptions.listeners[key]
23
+ );
24
+ }
25
+
26
+ export default {
27
+ functional: true,
28
+
29
+ render(h, context) {
30
+ context.children.filter(vnode => !!vnode.tag)
31
+ .forEach((vnode, i) => {
32
+ vnode.data = Object.assign({staticClass: undefined}, vnode.data);
33
+
34
+ if(!vnode.data.on) {
35
+ vnode.data.on = {};
36
+ }
37
+
38
+ const isDropdownItem = vnode.data.staticClass && vnode.data.staticClass.match(/dropdown-item/);
39
+ const isDropdownDivider = vnode.data.staticClass && vnode.data.staticClass.match(/dropdown-divider/);
40
+
41
+ vnode.data.on.click = wrap(e => {
42
+ context.parent.$emit('click-item', e, vnode);
43
+ }, listener(vnode, 'click'));
44
+
45
+ vnode.data.on.blur = wrap(e => {
46
+ context.parent.$emit('blur-item', e, vnode);
47
+ }, listener(vnode, 'blur'));
48
+
49
+ if(vnode.tag.match(/^h\d$/)) {
50
+ appendClass(vnode, 'dropdown-header');
51
+ }
52
+ else if(vnode.tag === 'hr' && !isDropdownDivider) {
53
+ vnode.tag = 'div';
54
+
55
+ appendClass(vnode, 'dropdown-divider');
56
+ }
57
+ else if(!isDropdownItem) {
58
+ appendClass(vnode, 'dropdown-item');
59
+ }
60
+ });
61
+
62
+ return context.children;
63
+ }
64
+
65
+ };
66
+ </script>
@@ -0,0 +1,302 @@
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('interface.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
+ });
@@ -0,0 +1,15 @@
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
+ ]);