@vue-interface/dropdown-menu 1.0.5 → 1.0.9

package/dist/dropdown-menu.es.js

@@ -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||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

@@ -1,9 +1,10 @@
 {
   "name": "@vue-interface/dropdown-menu",
-  "version": "1.0.5",
+  "version": "1.0.9",
   "description": "A Vue dropdown menu component.",
   "files": [
-    "dist"
+    "dist",
+    "tailwindcss"
   ],
   "main": "./dist/dropdown-menu.umd.js",
   "module": "./dist/dropdown-menu.es.js",
@@ -12,10 +13,6 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "watch": "npm run serve",
-    "serve": "vue-cli-service build --target lib --name=DropdownMenu ./main.vue --watch",
-    "lint": "vue-cli-service lint",
-    "fix": "vue-cli-service lint --fix",
     "pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
     "release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
     "release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
@@ -41,7 +38,9 @@
   },
   "homepage": "https://github.com/vue-interface/dropdown-menu/docs#readme",
   "dependencies": {
-    "vue": "^2.6.12"
+    "@vue-interface/variant": "^1.1.7",
+    "color": "^4.2.0",
+    "vue": "^2.6.14"
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^5.3.0",
@@ -49,7 +48,6 @@
     "babel-eslint": "^10.1.0",
     "babel-preset-vue": "^2.0.2",
     "change-case": "^4.1.2",
-    "color": "^4.2.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "pascalcase": "^2.0.0",

package/tailwindcss/index.js

@@ -0,0 +1,302 @@
+const Color = require('color');
+const plugin = require('tailwindcss/plugin');
+const colors = require('tailwindcss/colors');
+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'),
+            
+        //     '--dropdown-menu-inner-border-radius': theme('dropdownMenu.inner.borderRadius'),
+
+        //     '--dropdown-menu-divider-background-color': theme('dropdownMenu.divider.backgroundColor'),
+            
+        //     '--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-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-item-padding-x': theme('dropdownMenu.item.paddingX'),
+
+        //     '--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': {
+            position: 'relative'
+        },
+
+        '.dropdown-toggle': {
+            whiteSpace: 'nowrap',
+        },
+            
+        '.dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
+            display: 'inline-block',
+            marginLeft: '.3em',
+            verticalAlign: 'calc(.3em * .85)',
+            content: '""',
+            borderTop: '.3em solid',
+            borderRight: '.3em solid transparent',
+            borderBottom: 0,
+            borderLeft: '.3em solid transparent'
+        } : undefined,
+
+        // The dropdown menu
+        '.dropdown-menu': {
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            zIndex: theme('dropdownMenu.zIndex'),
+            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
+            fontSize: theme('dropdownMenu.fontSize'),
+            color: theme('dropdownMenu.color'),
+            textAlign: 'left', // Ensures proper alignment if parent has it changed (e.g., modal footer)
+            listStyle: 'none',
+            backgroundColor: theme('dropdownMenu.backgroundColor'),
+            backgroundClip: 'padding-box',
+            border: `${theme('dropdownMenu.borderWidth')} solid ${theme('dropdownMenu.borderColor')}`,
+            borderRadius: `${theme('dropdownMenu.borderRadius')}`,
+            boxShadow: theme('dropdownMenu.enableShadows') ? theme('dropdownMenu.boxShadow') : undefined,
+
+            // When enabled Popper.js, reset basic dropdown position
+            // stylelint-disable-next-line no-duplicate-selectors
+            '&[x-placement^="top"], &[x-placement^="right"], &[x-placement^="bottom"], &[x-placement^="left"]': {
+                right: 'auto',
+                bottom: 'auto'
+            }
+        },
+
+        // Allow for dropdowns to go bottom up (aka, dropup-menu)
+        // Just add .dropup after the standard .dropdown class and you're set.
+        '.dropup .dropdown-menu': {
+            top: 'auto',
+            bottom: '100%',
+            marginTop: 0,
+            // marginBottom: theme('dropdownMenu.spacer')
+        },
+    
+        '.dropup .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
+            display: 'inline-block',
+            marginLeft: '.3em',
+            verticalAlign: 'calc(.3em * .85)',
+            content: '""',
+            borderTop: 0,
+            borderRight: '.3em solid transparent',
+            borderBottom: '.3em solid',
+            borderLeft: '.3em solid transparent'
+        } : undefined,
+        
+        '.dropright .dropdown-menu': {
+            top: 0,
+            right: 'auto',
+            left: '100%',
+            marginTop: 0,
+            // marginLeft: theme('dropdownMenu.spacer')
+        },
+    
+        '.dropright .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
+            display: 'inline-block',
+            marginLeft: '.3em',
+            verticalAlign: 'calc(.3em * .85)',
+            content: '""',
+            borderTop: '.3em solid transparent',
+            borderRight: 0,
+            borderBottom: '.3em solid transparent',
+            borderLeft: '.3em solid',
+            verticalAlign: 0
+        } : undefined,
+        
+        '.dropleft .dropdown-menu': {
+            top: 0,
+            right: '100%',
+            left: 'auto',
+            marginTop: 0,
+            // marginRight: theme('dropdownMenu.spacer')
+        },
+          
+        '.dropleft .dropdown-toggle::after': {
+            display: 'none'
+        }, 
+
+        '.dropleft .dropdown-toggle::before': {
+            display: 'inline-block',
+            marginRight: '.3em',
+            verticalAlign: 'calc(.3em * .85)',
+            content: '""',
+            borderTop: '.3em solid transparent',
+            borderLeft: 0,
+            borderBottom: '.3em solid transparent',
+            borderRight: '.3em solid',
+            verticalAlign: 0
+        },
+
+        // Dividers (basically an `<hr>`) within the dropdown
+        '.dropdown-divider': {
+            height: 0,
+            margin: `calc(${theme('dropdownMenu.spacer')} / 2) 0`,
+            overflow: 'hidden',
+            borderTop: `1px solid ${theme('dropdownMenu.divider.backgroundColor')}`,
+        },
+
+        // Links, buttons, and more within the dropdown menu
+        //
+        // `<button>`-specific styles are denoted with `// For <button>s`
+        '.dropdown-item': {
+            display: 'block',
+            width: '100%', // For `<button>`s
+            padding: `${theme('dropdownMenu.item.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
+            clear: 'both',
+            fontWeight: 'normal',
+            color: theme('dropdownMenu.link.color'),
+            textAlign: 'inherit', // For `<button>`s
+            textDecoration: 'none',
+            whiteSpace: 'nowrap', // prevent links from randomly breaking onto new lines
+            backgroundColor: 'transparent', // For `<button>`s
+            border: 0, // For `<button>`s
+        },
+    
+        '.dropdown-item:hover, .dropdown-item:focus': {
+            color: theme('dropdownMenu.link.hover.color'),
+            textDecoration: 'none',
+            backgroundColor: theme('dropdownMenu.link.hover.backgroundColor')
+        },
+        
+        '.dropdown-item.active, .dropdown-item:active': {
+            color: theme('dropdownMenu.link.active.color'),
+            textDecoration: 'none',
+            backgroundColor: theme('dropdownMenu.link.active.backgroundColor')
+        },
+        
+        '.dropdown-item.disabled, .dropdown-item:disabled': {
+            color: theme('dropdownMenu.link.disabled.color'),
+            pointerEvents: 'none',
+            backgroundColor: 'transparent',
+            backgroundImage: 'none'
+        },
+        
+        '.dropdown-menu.show': {
+            display: 'block'
+        },
+        
+        // Dropdown section headers
+        '.dropdown-header': {
+            display: theme('dropdownMenu.header.display'),
+            padding: `${theme('dropdownMenu.header.paddingY')} ${theme('dropdownMenu.header.paddingX')}`,
+            marginBottom: 0, // for use with heading elements
+            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: theme('dropdownMenu.item.display'),
+            padding: `${theme('dropdownMenu.item.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
+            color: theme('dropdownMenu.link.color'),
+        },
+
+        '.dropdown-menu-left': {
+            right: 'auto',
+            left: 0
+        },
+
+        '.dropdown-menu-right': {
+            right: 0,
+            left: 'auto'
+        }
+    };
+
+    if(theme('dropdownMenu.paddingY') === 0) {
+        component['.dropdown-item']['&:first-child'] = {
+            borderTopLeftRadius: theme('dropdownMenu.inner.borderRadius'),
+            borderTopRightRadius: theme('dropdownMenu.inner.borderRadius'),
+        };
+
+        component['.dropdown-item']['&:last-child'] = {
+            borderBottomLeftRadius: theme('dropdownMenu.inner.borderRadius'),
+            borderBottomRightRadius: theme('dropdownMenu.inner.borderRadius'),
+        };
+    }
+
+    addComponents(component);
+}, {
+    theme: {
+        dropdownMenu: theme => ({
+            enableShadows: true,
+            enableCarets: true,
+            zIndex: 1000,
+            minWidth: '10rem',
+            paddingY: '.5rem',
+            spacer: '.125rem',
+            fontSize: '1rem',
+            color: 'inherit',
+            backgroundColor: theme('colors.white', colors.white),
+            borderColor: Color(theme('colors.black', colors.black)).fade(.85),
+            borderRadius: '.25rem',
+            borderWidth: '1px',
+            boxShadow: `0 .5rem 1rem ${Color(theme('colors.black', colors.black)).fade(.85)}`,
+            
+            inner: {
+                borderRadius: 'calc(.25rem - 1px)'
+            },
+            
+            divider: {
+                backgroundColor: theme('colors.gray.100', colors.gray[100]),
+            },
+
+            link: {
+                color: theme('colors.gray.800', colors.gray[800]),
+                
+                hover: {
+                    color: Color(theme('colors.gray.800', colors.gray[800])).darken(.5).hex(),
+                    backgroundColor: theme('colors.gray.100', colors.gray[100])
+                },
+
+                active: {
+                    color: theme('colors.white', colors.white),
+                    backgroundColor: theme('interface.variations.primary', variations.primary),
+                },
+
+                disabled: {
+                    color: theme('colors.gray.500', colors.gray[500])
+                }
+            },
+
+            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',
+]);