@vue-interface/dropdown-menu 1.0.9 → 1.0.10

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@vue-interface/dropdown-menu",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A Vue dropdown menu component.",
   "files": [
     "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) {
+                    appendClass(vnode, 'dropdown-item');
+                }
+            });
+
+        return context.children;
+    }
+
+};
+</script>

package/tailwindcss/index.js

@@ -222,7 +222,7 @@ module.exports = plugin(function({ addComponents, theme }) {
         },
 
         '.dropdown-menu-right': {
-            right: 0,
+            // right: 0,
             left: 'auto'
         }
     };