@vue-interface/dropdown-menu 1.0.8 → 1.0.9

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,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue-interface/dropdown-menu",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "description": "A Vue dropdown menu component.",
5
5
  "files": [
6
6
  "dist",
@@ -5,38 +5,38 @@ const variations = require('@vue-interface/variant/tailwindcss/variations');
5
5
 
6
6
  module.exports = plugin(function({ addComponents, theme }) {
7
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'),
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
20
 
21
- '--dropdown-menu-inner-border-radius': theme('dropdownMenu.inner.borderRadius'),
21
+ // '--dropdown-menu-inner-border-radius': theme('dropdownMenu.inner.borderRadius'),
22
22
 
23
- '--dropdown-menu-divider-background-color': theme('dropdownMenu.divider.backgroundColor'),
23
+ // '--dropdown-menu-divider-background-color': theme('dropdownMenu.divider.backgroundColor'),
24
24
 
25
- '--dropdown-menu-link-color': theme('dropdownMenu.link.color'),
25
+ // '--dropdown-menu-link-color': theme('dropdownMenu.link.color'),
26
26
 
27
- '--dropdown-menu-link-hover-color': theme('dropdownMenu.link.hover.color'),
28
- '--dropdown-menu-link-hover-background-color': theme('dropdownMenu.link.hover.backgroundColor'),
27
+ // '--dropdown-menu-link-hover-color': theme('dropdownMenu.link.hover.color'),
28
+ // '--dropdown-menu-link-hover-background-color': theme('dropdownMenu.link.hover.backgroundColor'),
29
29
 
30
- '--dropdown-menu-link-active-color': theme('dropdownMenu.link.active.color'),
31
- '--dropdown-menu-link-active-background-color': theme('dropdownMenu.link.active.backgroundColor'),
30
+ // '--dropdown-menu-link-active-color': theme('dropdownMenu.link.active.color'),
31
+ // '--dropdown-menu-link-active-background-color': theme('dropdownMenu.link.active.backgroundColor'),
32
32
 
33
- '--dropdown-menu-link-disabled-color': theme('dropdownMenu.link.disabled.color'),
33
+ // '--dropdown-menu-link-disabled-color': theme('dropdownMenu.link.disabled.color'),
34
34
 
35
- '--dropdown-menu-item-padding-x': theme('dropdownMenu.item.paddingX'),
35
+ // '--dropdown-menu-item-padding-x': theme('dropdownMenu.item.paddingX'),
36
36
 
37
- '--dropdown-menu-header-color': theme('dropdownMenu.header.color'),
38
- '--dropdown-menu-header-padding-y': theme('dropdownMenu.header.paddingY')
39
- },
37
+ // '--dropdown-menu-header-color': theme('dropdownMenu.header.color'),
38
+ // '--dropdown-menu-header-padding-y': theme('dropdownMenu.header.paddingY')
39
+ // },
40
40
 
41
41
  // The dropdown wrapper (`<div>`)
42
42
  '.dropup, .dropright, .dropdown, .dropleft': {
@@ -67,7 +67,7 @@ module.exports = plugin(function({ addComponents, theme }) {
67
67
  display: 'none', // none by default, but block on "open" of the menu
68
68
  minWidth: theme('dropdownMenu.minWidth'),
69
69
  padding: `${theme('dropdownMenu.paddingY')} 0`,
70
- margin: `${theme('dropdownMenu.spacer')} 0 0`, // override default ul
70
+ // margin: `${theme('dropdownMenu.spacer')} 0 0`, // override default ul
71
71
  fontSize: theme('dropdownMenu.fontSize'),
72
72
  color: theme('dropdownMenu.color'),
73
73
  textAlign: 'left', // Ensures proper alignment if parent has it changed (e.g., modal footer)
@@ -92,7 +92,7 @@ module.exports = plugin(function({ addComponents, theme }) {
92
92
  top: 'auto',
93
93
  bottom: '100%',
94
94
  marginTop: 0,
95
- marginBottom: theme('dropdownMenu.spacer')
95
+ // marginBottom: theme('dropdownMenu.spacer')
96
96
  },
97
97
 
98
98
  '.dropup .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
@@ -111,7 +111,7 @@ module.exports = plugin(function({ addComponents, theme }) {
111
111
  right: 'auto',
112
112
  left: '100%',
113
113
  marginTop: 0,
114
- marginLeft: theme('dropdownMenu.spacer')
114
+ // marginLeft: theme('dropdownMenu.spacer')
115
115
  },
116
116
 
117
117
  '.dropright .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
@@ -131,7 +131,7 @@ module.exports = plugin(function({ addComponents, theme }) {
131
131
  right: '100%',
132
132
  left: 'auto',
133
133
  marginTop: 0,
134
- marginRight: theme('dropdownMenu.spacer')
134
+ // marginRight: theme('dropdownMenu.spacer')
135
135
  },
136
136
 
137
137
  '.dropleft .dropdown-toggle::after': {
@@ -200,17 +200,18 @@ module.exports = plugin(function({ addComponents, theme }) {
200
200
 
201
201
  // Dropdown section headers
202
202
  '.dropdown-header': {
203
- display: 'block',
204
- padding: `${theme('dropdownMenu.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
203
+ display: theme('dropdownMenu.header.display'),
204
+ padding: `${theme('dropdownMenu.header.paddingY')} ${theme('dropdownMenu.header.paddingX')}`,
205
205
  marginBottom: 0, // for use with heading elements
206
- fontSize: '.875rem',
206
+ fontSize: theme('dropdownMenu.header.fontSize'),
207
+ fontWeight: theme('dropdownMenu.header.fontWeight'),
207
208
  color: theme('dropdownMenu.header.color'),
208
209
  whiteSpace: 'nowrap' // as with > li > a
209
210
  },
210
211
 
211
212
  // Dropdown text
212
213
  '.dropdown-item-text': {
213
- display: 'block',
214
+ display: theme('dropdownMenu.item.display'),
214
215
  padding: `${theme('dropdownMenu.item.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
215
216
  color: theme('dropdownMenu.link.color'),
216
217
  },
@@ -283,12 +284,17 @@ module.exports = plugin(function({ addComponents, theme }) {
283
284
  },
284
285
 
285
286
  item: {
287
+ display: 'block',
286
288
  paddingY: '.25rem',
287
289
  paddingX: '1rem',
288
290
  },
289
291
 
290
292
  header: {
291
293
  color: theme('colors.gray.500', colors.gray[500]),
294
+ display: 'block',
295
+ fontSize: '.875rem',
296
+ fontWeight: 'bold',
297
+ paddingX: '.5rem',
292
298
  paddingY: '.5rem'
293
299
  }
294
300
  })
@@ -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
+ ]);