@vue-interface/dropdown-menu 1.0.8 → 1.0.12

package/dist/dropdown-menu.es.js

@@ -86,7 +86,7 @@ const __vue2_script$1 = {
       } else if (vnode.tag === "hr" && !isDropdownDivider) {
         vnode.tag = "div";
         appendClass(vnode, "dropdown-divider");
-      } else if (!isDropdownItem) {
+      } else if (!isDropdownItem && !isDropdownDivider) {
         appendClass(vnode, "dropdown-item");
       }
     });
@@ -108,7 +108,7 @@ var render = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "dropdown-menu mb-3", class: {
+  return _c("div", { staticClass: "dropdown-menu", class: {
     "dropdown-menu-left": _vm.align === "left",
     "dropdown-menu-right": _vm.align === "right",
     "show": _vm.show

package/dist/dropdown-menu.umd.js

@@ -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"});
+(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&&!d&&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/index.js

@@ -0,0 +1,5 @@
+import DropdownMenu from './src/DropdownMenu.vue';
+
+export {
+    DropdownMenu
+};

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@vue-interface/dropdown-menu",
-  "version": "1.0.8",
+  "version": "1.0.12",
   "description": "A Vue dropdown menu component.",
   "files": [
+    "index.js",
     "dist",
+    "src",
     "tailwindcss"
   ],
   "main": "./dist/dropdown-menu.umd.js",
-  "module": "./dist/dropdown-menu.es.js",
+  "module": "./index.js",
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
     "dev": "vite",

package/src/DropdownDivider.vue

@@ -0,0 +1,3 @@
+<template>
+    <hr class="dropdown-divider">
+</template>

package/src/DropdownHeader.vue

@@ -0,0 +1,5 @@
+<template>
+    <h3 class="dropdown-header">
+        <slot />
+    </h3>
+</template>

package/src/DropdownItem.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="dropdown-item">
+        <slot />
+    </div>
+</template>

package/src/DropdownMenu.vue

@@ -0,0 +1,52 @@
+<template>
+    <div
+        class="dropdown-menu"
+        :aria-labelledby="$attrs.id"
+        :class="{
+            'dropdown-menu-left': align === 'left',
+            'dropdown-menu-right': align === 'right',
+            'show': show
+        }">
+        <dropdown-menu-items>
+            <slot @click="onItemClick" />
+        </dropdown-menu-items>
+    </div>
+</template>
+
+<script>
+import DropdownMenuItems from './DropdownMenuItems.vue';
+
+export default {
+
+    name: 'DropdownMenu',
+
+    components: {
+        DropdownMenuItems
+    },
+
+    props: {
+
+        /**
+         * Display the dropdown menu aligned left or right
+         *
+         * @property String
+         */
+        align: {
+            type: String,
+            default: 'left',
+            validate(value) {
+                return ['left', 'right'].indexOf(value.toLowerCase()) !== -1;
+            }
+        },
+
+        /**
+         * The default visibility of the dropdown menu.
+         *
+         * @property Object
+         */
+        show: Boolean
+
+    }
+
+};
+</script>

package/src/DropdownMenuItems.vue

@@ -0,0 +1,66 @@
+<script>
+function appendClass(vnode, str) {
+    vnode.data.staticClass = `${vnode.data.staticClass || ''} ${str}`.trim();  
+}
+
+function wrap(wrapper, fn) {
+    return (e) => {
+        if(typeof fn === 'function') {
+            fn(e);
+        }
+
+        if(!e.cancelBubble) {
+            wrapper(e);
+        }
+    };
+}
+
+function listener(vnode, key) {
+    return vnode.data.on[key] || (
+        vnode.componentOptions &&
+        vnode.componentOptions.listeners &&
+        vnode.componentOptions.listeners[key]
+    );
+}
+
+export default {
+    functional: true,
+
+    render(h, context) {
+        context.children.filter(vnode => !!vnode.tag)
+            .forEach((vnode, i) => {
+                vnode.data = Object.assign({staticClass: undefined}, vnode.data);
+                
+                if(!vnode.data.on) {
+                    vnode.data.on = {};
+                }
+
+                const isDropdownItem = vnode.data.staticClass && vnode.data.staticClass.match(/dropdown-item/);
+                const isDropdownDivider = vnode.data.staticClass && vnode.data.staticClass.match(/dropdown-divider/);
+                
+                vnode.data.on.click = wrap(e => {
+                    context.parent.$emit('click-item', e, vnode);
+                }, listener(vnode, 'click'));
+
+                vnode.data.on.blur = wrap(e => {
+                    context.parent.$emit('blur-item', e, vnode);
+                }, listener(vnode, 'blur'));
+
+                if(vnode.tag.match(/^h\d$/)) {
+                    appendClass(vnode, 'dropdown-header');
+                }
+                else if(vnode.tag === 'hr' && !isDropdownDivider) {
+                    vnode.tag = 'div';
+
+                    appendClass(vnode, 'dropdown-divider');
+                }
+                else if(!isDropdownItem && !isDropdownDivider) {
+                    appendClass(vnode, 'dropdown-item');
+                }
+            });
+
+        return context.children;
+    }
+
+};
+</script>

package/tailwindcss/index.js

@@ -5,38 +5,38 @@ const variations = require('@vue-interface/variant/tailwindcss/variations');
 
 module.exports = plugin(function({ addComponents, theme }) {
     const component = {
-        ':root': {
-            '--dropdown-menu-z-index': theme('dropdownMenu.zIndex'),
-            '--dropdown-menu-min-width': theme('dropdownMenu.minWidth'),
-            '--dropdown-menu-padding-y': theme('dropdownMenu.paddingY'),
-            '--dropdown-menu-spacer': theme('dropdownMenu.spacer'),
-            '--dropdown-menu-font-size': theme('dropdownMenu.fontSize'),
-            '--dropdown-menu-color': theme('dropdownMenu.color'),
-            '--dropdown-menu-background-color': theme('dropdownMenu.backgroundColor'),
-            '--dropdown-menu-border-color': theme('dropdownMenu.borderColor'),
-            '--dropdown-menu-border-radius': theme('dropdownMenu.borderRadius'),
-            '--dropdown-menu-border-width': theme('dropdownMenu.borderWidth'),
-            '--dropdown-menu-box-shadow': theme('dropdownMenu.boxShadow'),
+        // ':root': {
+        //     '--dropdown-menu-z-index': theme('dropdownMenu.zIndex'),
+        //     '--dropdown-menu-min-width': theme('dropdownMenu.minWidth'),
+        //     '--dropdown-menu-padding-y': theme('dropdownMenu.paddingY'),
+        //     '--dropdown-menu-spacer': theme('dropdownMenu.spacer'),
+        //     '--dropdown-menu-font-size': theme('dropdownMenu.fontSize'),
+        //     '--dropdown-menu-color': theme('dropdownMenu.color'),
+        //     '--dropdown-menu-background-color': theme('dropdownMenu.backgroundColor'),
+        //     '--dropdown-menu-border-color': theme('dropdownMenu.borderColor'),
+        //     '--dropdown-menu-border-radius': theme('dropdownMenu.borderRadius'),
+        //     '--dropdown-menu-border-width': theme('dropdownMenu.borderWidth'),
+        //     '--dropdown-menu-box-shadow': theme('dropdownMenu.boxShadow'),
             
-            '--dropdown-menu-inner-border-radius': theme('dropdownMenu.inner.borderRadius'),
+        //     '--dropdown-menu-inner-border-radius': theme('dropdownMenu.inner.borderRadius'),
 
-            '--dropdown-menu-divider-background-color': theme('dropdownMenu.divider.backgroundColor'),
+        //     '--dropdown-menu-divider-background-color': theme('dropdownMenu.divider.backgroundColor'),
             
-            '--dropdown-menu-link-color': theme('dropdownMenu.link.color'),
+        //     '--dropdown-menu-link-color': theme('dropdownMenu.link.color'),
 
-            '--dropdown-menu-link-hover-color': theme('dropdownMenu.link.hover.color'),
-            '--dropdown-menu-link-hover-background-color': theme('dropdownMenu.link.hover.backgroundColor'),
+        //     '--dropdown-menu-link-hover-color': theme('dropdownMenu.link.hover.color'),
+        //     '--dropdown-menu-link-hover-background-color': theme('dropdownMenu.link.hover.backgroundColor'),
                 
-            '--dropdown-menu-link-active-color': theme('dropdownMenu.link.active.color'),
-            '--dropdown-menu-link-active-background-color': theme('dropdownMenu.link.active.backgroundColor'),
+        //     '--dropdown-menu-link-active-color': theme('dropdownMenu.link.active.color'),
+        //     '--dropdown-menu-link-active-background-color': theme('dropdownMenu.link.active.backgroundColor'),
 
-            '--dropdown-menu-link-disabled-color': theme('dropdownMenu.link.disabled.color'),
+        //     '--dropdown-menu-link-disabled-color': theme('dropdownMenu.link.disabled.color'),
             
-            '--dropdown-menu-item-padding-x': theme('dropdownMenu.item.paddingX'),
+        //     '--dropdown-menu-item-padding-x': theme('dropdownMenu.item.paddingX'),
 
-            '--dropdown-menu-header-color': theme('dropdownMenu.header.color'),
-            '--dropdown-menu-header-padding-y': theme('dropdownMenu.header.paddingY')
-        },
+        //     '--dropdown-menu-header-color': theme('dropdownMenu.header.color'),
+        //     '--dropdown-menu-header-padding-y': theme('dropdownMenu.header.paddingY')
+        // },
 
         // The dropdown wrapper (`<div>`)
         '.dropup, .dropright, .dropdown, .dropleft': {
@@ -67,7 +67,7 @@ module.exports = plugin(function({ addComponents, theme }) {
             display: 'none', // none by default, but block on "open" of the menu
             minWidth: theme('dropdownMenu.minWidth'),
             padding: `${theme('dropdownMenu.paddingY')} 0`,
-            margin: `${theme('dropdownMenu.spacer')} 0 0`, // override default ul
+            // margin: `${theme('dropdownMenu.spacer')} 0 0`, // override default ul
             fontSize: theme('dropdownMenu.fontSize'),
             color: theme('dropdownMenu.color'),
             textAlign: 'left', // Ensures proper alignment if parent has it changed (e.g., modal footer)
@@ -92,7 +92,7 @@ module.exports = plugin(function({ addComponents, theme }) {
             top: 'auto',
             bottom: '100%',
             marginTop: 0,
-            marginBottom: theme('dropdownMenu.spacer')
+            // marginBottom: theme('dropdownMenu.spacer')
         },
     
         '.dropup .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
@@ -111,7 +111,7 @@ module.exports = plugin(function({ addComponents, theme }) {
             right: 'auto',
             left: '100%',
             marginTop: 0,
-            marginLeft: theme('dropdownMenu.spacer')
+            // marginLeft: theme('dropdownMenu.spacer')
         },
     
         '.dropright .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
@@ -131,7 +131,7 @@ module.exports = plugin(function({ addComponents, theme }) {
             right: '100%',
             left: 'auto',
             marginTop: 0,
-            marginRight: theme('dropdownMenu.spacer')
+            // marginRight: theme('dropdownMenu.spacer')
         },
           
         '.dropleft .dropdown-toggle::after': {
@@ -200,17 +200,18 @@ module.exports = plugin(function({ addComponents, theme }) {
         
         // Dropdown section headers
         '.dropdown-header': {
-            display: 'block',
-            padding: `${theme('dropdownMenu.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
+            display: theme('dropdownMenu.header.display'),
+            padding: `${theme('dropdownMenu.header.paddingY')} ${theme('dropdownMenu.header.paddingX')}`,
             marginBottom: 0, // for use with heading elements
-            fontSize: '.875rem',
+            fontSize: theme('dropdownMenu.header.fontSize'),
+            fontWeight: theme('dropdownMenu.header.fontWeight'),
             color: theme('dropdownMenu.header.color'),
             whiteSpace: 'nowrap' // as with > li > a
         },
         
         // Dropdown text
         '.dropdown-item-text': {
-            display: 'block',
+            display: theme('dropdownMenu.item.display'),
             padding: `${theme('dropdownMenu.item.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
             color: theme('dropdownMenu.link.color'),
         },
@@ -221,7 +222,7 @@ module.exports = plugin(function({ addComponents, theme }) {
         },
 
         '.dropdown-menu-right': {
-            right: 0,
+            // right: 0,
             left: 'auto'
         }
     };
@@ -283,12 +284,17 @@ module.exports = plugin(function({ addComponents, theme }) {
             },
 
             item: {
+                display: 'block',
                 paddingY: '.25rem',
                 paddingX: '1rem',
             },
 
             header: {
                 color: theme('colors.gray.500', colors.gray[500]),
+                display: 'block',
+                fontSize: '.875rem',
+                fontWeight: 'bold',
+                paddingX: '.5rem',
                 paddingY: '.5rem'
             }
         })

package/tailwindcss/safelist.js

@@ -0,0 +1,15 @@
+module.exports = () => ([
+    'dropdown-divider',
+    'dropdown-header',
+    'dropdown-item',
+    'dropdown-item-text',
+    'dropdown-menu',
+    'dropdown-menu-left',
+    'dropdown-menu-right',
+    'dropdown-toggle',
+    'dropdown-toggle-split',
+    'dropup',
+    'dropdown',
+    'dropright',
+    'dropleft',
+]);