@vue-interface/dropdown-menu 0.9.8 → 1.0.0

package/babel.config.js

@@ -1,7 +1,5 @@
 module.exports = {
     presets: [
-        ['@vue/cli-plugin-babel/preset', {
-            "modules": false
-        }]
+        'vue'
     ]
 };

package/dist/dropdown-menu.es.js

@@ -0,0 +1,144 @@
+function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render2) {
+    options.render = render2;
+    options.staticRenderFns = staticRenderFns2;
+    options._compiled = true;
+  }
+  if (functionalTemplate) {
+    options.functional = true;
+  }
+  if (scopeId) {
+    options._scopeId = "data-v-" + scopeId;
+  }
+  var hook;
+  if (moduleIdentifier) {
+    hook = function(context) {
+      context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
+        context = __VUE_SSR_CONTEXT__;
+      }
+      if (injectStyles) {
+        injectStyles.call(this, context);
+      }
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier);
+      }
+    };
+    options._ssrRegister = hook;
+  } else if (injectStyles) {
+    hook = shadowMode ? function() {
+      injectStyles.call(this, (options.functional ? this.parent : this).$root.$options.shadowRoot);
+    } : injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+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];
+}
+const __vue2_script$1 = {
+  functional: true,
+  render(h, context) {
+    context.children.filter((vnode) => !!vnode.tag).forEach((vnode, i) => {
+      vnode.data = Object.assign({ staticClass: void 0 }, 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) {
+        appendClass(vnode, "dropdown-item");
+      }
+    });
+    return context.children;
+  }
+};
+let __vue2_render, __vue2_staticRenderFns;
+const __cssModules$1 = {};
+var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, __vue2_render, __vue2_staticRenderFns, false, __vue2_injectStyles$1, null, null, null);
+function __vue2_injectStyles$1(context) {
+  for (let o in __cssModules$1) {
+    this[o] = __cssModules$1[o];
+  }
+}
+var DropdownMenuItems = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}();
+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: {
+    "dropdown-menu-left": _vm.align === "left",
+    "dropdown-menu-right": _vm.align === "right",
+    "show": _vm.show
+  }, attrs: { "aria-labelledby": _vm.$attrs.id } }, [_c("dropdown-menu-items", [_vm._t("default")], 2)], 1);
+};
+var staticRenderFns = [];
+const __vue2_script = {
+  name: "DropdownMenu",
+  components: {
+    DropdownMenuItems
+  },
+  props: {
+    align: {
+      type: String,
+      default: "left",
+      validate(value) {
+        return ["left", "right"].indexOf(value.toLowerCase()) !== -1;
+      }
+    },
+    show: Boolean
+  }
+};
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var DropdownMenu = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+export { DropdownMenu };

package/dist/dropdown-menu.umd.js

@@ -0,0 +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"});

package/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

package/index.html

@@ -4,15 +4,12 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <title>DropdownMenu</title>
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap-reboot.min.css">
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap-grid.min.css">
-        <link rel="stylesheet" href="./dist/DropdownMenu.css">
     </head>
     <body>
-        <div id="app" class="container">
-            <h1>dropdown-menu</h1>
+        <div id="app" class="container mx-auto">
+            <h1 class="text-4xl mb-6">dropdown-menu</h1>
 
-            <h3>Basic Usage</h3>
+            <h3 class="text-2xl">Basic Usage</h3>
 
             <span v-if="hasClicked">Item #4 was clicked!</span>
 
@@ -30,10 +27,14 @@
             </div>
         </div>
 
-        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
-        <script type="text/javascript" src="./dist/DropdownMenu.umd.js"></script>
-        <script type="text/javascript">
+        <script type="module">
+            import './index.css';
+            import Vue from 'vue/dist/vue';
+            import VueRouter from 'vue-router';
+            import { DropdownMenu } from './index';
+            
+            Vue.config.devtools = false;
+            Vue.config.productionTip = false;
             Vue.use(VueRouter);
 
             const router = new VueRouter({
@@ -42,7 +43,7 @@
                     name: 'Home'
                 }]
             });
-                
+                            
             const vue = new Vue({
                 el: '#app',
                 router,
@@ -53,7 +54,7 @@
                     return {
                         hasClicked: false,
                         hasClicked2: false
-                    }
+                    };
                 }
             });
         </script>

package/index.js

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

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@vue-interface/dropdown-menu",
-  "version": "0.9.8",
+  "version": "1.0.0",
   "description": "A Vue dropdown menu component.",
   "main": "index.js",
+  "module": "index.js",
+  "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "watch": "npm run serve",
     "serve": "vue-cli-service build --target lib --name=DropdownMenu ./main.vue --watch",
-    "build": "vue-cli-service build --target lib --name=DropdownMenu ./main.vue",
     "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'",
@@ -37,28 +41,23 @@
   },
   "homepage": "https://github.com/vue-interface/dropdown-menu/docs#readme",
   "dependencies": {
-    "@vue-interface/tailwindcss": "^0.2.5",
-    "@vue-interface/utils": "^0.9.13",
-    "@vue-interface/variant": "^1.0.12",
-    "color": "^3.1.2",
-    "core-js": "^3.6.4",
-    "hex-to-rgba": "^2.0.1",
-    "tailwindcss": "^1.7.3",
     "vue": "^2.6.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.4",
-    "@vue/cli-plugin-eslint": "^4.5.4",
-    "@vue/cli-service": "^4.5.4",
-    "@vuepress/plugin-register-components": "^1.5.4",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@vue-interface/tailwindcss": "^0.2.10",
+    "autoprefixer": "^10.4.2",
     "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",
-    "markdown-it-meta": "0.0.1",
-    "postcss-cli": "^7.1.1",
-    "vue-template-compiler": "^2.6.12",
-    "vuepress": "^1.5.4",
-    "vuepress-plugin-template-constants": "^0.2.1",
-    "webpack-manifest-plugin": "^2.2.0"
+    "pascalcase": "^2.0.0",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.18",
+    "vite": "^2.7.2",
+    "vite-plugin-vue2": "^1.9.3",
+    "vue-router": "^3.5.3"
   }
 }

package/postcss.config.js

@@ -1 +1,6 @@
-module.exports = {};
+module.exports = {
+    plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+    ]
+};

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

@@ -1,8 +1,12 @@
 <template>
     <div
-        class="dropdown-menu"
-        :class="{'dropdown-menu-left': align === 'left', 'dropdown-menu-right': align === 'right', 'show': show}"
-        :aria-labelledby="$attrs.id">
+        class="dropdown-menu mb-3"
+        :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>
@@ -10,7 +14,7 @@
 </template>
 
 <script>
-import DropdownMenuItems from './DropdownMenuItems';
+import DropdownMenuItems from './DropdownMenuItems.vue';
 
 export default {
 
@@ -45,10 +49,4 @@ export default {
     }
 
 };
-</script>
-
-<style>
-.dropdown-menu a.dropdown-item {
-    cursor: pointer;
-}
-</style>
+</script>

package/src/DropdownMenuItems.vue

@@ -1,6 +1,4 @@
 <script>
-import { isUndefined } from '@vue-interface/utils';
-
 function appendClass(vnode, str) {
     vnode.data.staticClass = `${vnode.data.staticClass || ''} ${str}`.trim();  
 }
@@ -37,8 +35,8 @@ export default {
                     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/);
+                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);
@@ -51,12 +49,12 @@ export default {
                 if(vnode.tag.match(/^h\d$/)) {
                     appendClass(vnode, 'dropdown-header');
                 }
-                else if(vnode.tag === 'hr') {
+                else if(vnode.tag === 'hr' && !isDropdownDivider) {
                     vnode.tag = 'div';
 
                     appendClass(vnode, 'dropdown-divider');
                 }
-                else if(!isDropdownItem && !isDropdownDivider) {
+                else if(!isDropdownItem) {
                     appendClass(vnode, 'dropdown-item');
                 }
             });

package/tailwind.config.js

@@ -1,12 +1,12 @@
-const plugin = require('tailwindcss/plugin');
-
 module.exports = {
-    purge: false,
-    corePlugins: {
-        container: false,
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
     },
     plugins: [
-        require('@vue-interface/variant/tailwindcss'),
         require('./tailwindcss')
-    ]
-};
+    ],
+};

package/tailwindcss/index.js

@@ -1,14 +1,13 @@
 const Color = require('color');
-const rgba = require('hex-to-rgba');
 const plugin = require('tailwindcss/plugin');
-const { colors } = require('tailwindcss/defaultTheme');
+const colors = require('tailwindcss/colors');
 const defaultVariations = require('@vue-interface/tailwindcss/defaultVariations');
 
 function darken(color, ...args) {
     return Color(color).darken(...args).hex();
 }
 
-module.exports = plugin(function({ addComponents, theme, postcss }) {
+module.exports = plugin(function({ addComponents, theme }) {
     const component = {
         ':root': {
             '--dropdown-menu-z-index': theme('dropdownMenu.zIndex'),
@@ -186,13 +185,13 @@ module.exports = plugin(function({ addComponents, theme, postcss }) {
             backgroundColor: theme('dropdownMenu.link.hover.backgroundColor')
         },
         
-        'dropdown-item.active, dropdown-item:active': {
+        '.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': {
+        '.dropdown-item.disabled, .dropdown-item:disabled': {
             color: theme('dropdownMenu.link.disabled.color'),
             pointerEvents: 'none',
             backgroundColor: 'transparent',
@@ -256,10 +255,10 @@ module.exports = plugin(function({ addComponents, theme, postcss }) {
             fontSize: '1rem',
             color: 'inherit',
             backgroundColor: theme('colors.white', colors.white),
-            borderColor: rgba(theme('colors.black', colors.black), .15),
+            borderColor: Color(theme('colors.black', colors.black)).fade(.85),
             borderRadius: '.25rem',
             borderWidth: '1px',
-            boxShadow: `0 .5rem 1rem ${rgba(theme('colors.black', colors.black), .15)}`,
+            boxShadow: `0 .5rem 1rem ${Color(theme('colors.black', colors.black)).fade(.85)}`,
             
             inner: {
                 borderRadius: 'calc(.25rem - 1px)'
@@ -273,7 +272,7 @@ module.exports = plugin(function({ addComponents, theme, postcss }) {
                 color: theme('colors.gray.800', colors.gray[800]),
                 
                 hover: {
-                    color: darken(theme('colors.gray.800', colors.gray[800]), .5),
+                    color: Color(theme('colors.gray.800', colors.gray[800])).darken(.5).hex(),
                     backgroundColor: theme('colors.gray.100', colors.gray[100])
                 },
 

package/vite.config.js

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite';
+import { createVuePlugin } from 'vite-plugin-vue2';
+import { name } from './package.json';
+import { pascalCase } from "change-case";
+import { babel } from '@rollup/plugin-babel';
+
+const filename = name.split('/')[1];
+
+export default defineConfig({
+    build: {
+        lib: {
+            entry: 'index.js',
+            name: pascalCase(filename),
+            fileName: (format) => `${filename}.${format}.js`,
+        },
+        rollupOptions: {
+            external: ['vue'],
+            output: {
+                globals: {
+                    vue: 'Vue'
+                },
+            },
+            plugins: [
+                babel({
+                    babelHelpers: 'bundled'
+                })
+            ]
+        },
+        watch: {
+            include: [
+                './tailwindcss/**/*.js'
+            ]
+        }
+    },
+    plugins: [
+        createVuePlugin()
+    ],
+});