@vue-interface/dropdown-menu 1.0.14 → 2.0.0-beta.1

package/dist/dropdown-menu.es.js

@@ -1,144 +1,74 @@
-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();
+import { h as d, resolveComponent as m, openBlock as u, createElementBlock as f, normalizeClass as w, createVNode as h, withCtx as y, renderSlot as g } from "vue";
+function s(e, t) {
+  e.props.class = `${e.props.class || ""} ${t}`.trim();
 }
-function wrap(wrapper, fn) {
-  return (e) => {
-    if (typeof fn === "function") {
-      fn(e);
-    }
-    if (!e.cancelBubble) {
-      wrapper(e);
-    }
+function i(e, t) {
+  return (n) => {
+    typeof t == "function" && t(n), n.cancelBubble || e(n);
   };
 }
-function listener(vnode, key) {
-  return vnode.data.on[key] || vnode.componentOptions && vnode.componentOptions.listeners && vnode.componentOptions.listeners[key];
+function p(e, t) {
+  return e.attrs.on[t] || e.type && e.type.listeners && e.componentOptions.listeners[t];
 }
-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 && !isDropdownDivider) {
-        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];
+function _(e) {
+  return e && e.type && (e.type === "fragment" || typeof e.type == "symbol");
+}
+function a(e) {
+  for (const t of e) {
+    if (_(t))
+      return a(t.children);
+    t.props = Object.assign({ class: void 0 }, t.props), t.attrs = Object.assign({}, t.attrs), t.attrs.on || (t.attrs.on = {});
+    const n = t.props.class && t.props.class.match(/dropdown-item/), r = t.props.class && t.props.class.match(/dropdown-divider/);
+    t.attrs.on.click = i((o) => {
+      context.parent.$emit("click-item", o, t);
+    }, p(t, "click")), t.attrs.on.blur = i((o) => {
+      context.parent.$emit("blur-item", o, t);
+    }, p(t, "blur")), typeof t.type == "string" && t.type.match(/^h\d$/) ? s(t, "dropdown-header") : t.type === "hr" && !r ? (t.type = "div", s(t, "dropdown-divider")) : !n && !r && s(t, "dropdown-item");
   }
+  return e;
 }
-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", 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 = {
+const b = (e, t) => d("div", {}, a(t.slots.default())), $ = b, k = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [r, o] of t)
+    n[r] = o;
+  return n;
+}, C = {
   name: "DropdownMenu",
   components: {
-    DropdownMenuItems
+    DropdownMenuItems: $
   },
   props: {
     align: {
       type: String,
       default: "left",
-      validate(value) {
-        return ["left", "right"].indexOf(value.toLowerCase()) !== -1;
+      validate(e) {
+        return ["left", "right"].indexOf(e.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];
-  }
+}, D = ["aria-labelledby"];
+function I(e, t, n, r, o, M) {
+  const l = m("dropdown-menu-items");
+  return u(), f("div", {
+    class: w(["dropdown-menu", {
+      "dropdown-menu-left": n.align === "left",
+      "dropdown-menu-right": n.align === "right",
+      show: n.show
+    }]),
+    "aria-labelledby": e.$attrs.id
+  }, [
+    h(l, null, {
+      default: y(() => [
+        g(e.$slots, "default", {
+          onClick: t[0] || (t[0] = (...c) => e.onItemClick && e.onItemClick(...c))
+        })
+      ]),
+      _: 3
+    })
+  ], 10, D);
 }
-var DropdownMenu = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export { DropdownMenu };
+const v = /* @__PURE__ */ k(C, [["render", I]]);
+export {
+  v as DropdownMenu
+};

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&&!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"});
+(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.DropdownMenu={},r.Vue))})(this,function(r,n){"use strict";function p(t,e){t.props.class=`${t.props.class||""} ${e}`.trim()}function d(t,e){return o=>{typeof e=="function"&&e(o),o.cancelBubble||t(o)}}function l(t,e){return t.attrs.on[e]||t.type&&t.type.listeners&&t.componentOptions.listeners[e]}function c(t){return t&&t.type&&(t.type==="fragment"||typeof t.type=="symbol")}function a(t){for(const e of t){if(c(e))return a(e.children);e.props=Object.assign({class:void 0},e.props),e.attrs=Object.assign({},e.attrs),e.attrs.on||(e.attrs.on={});const o=e.props.class&&e.props.class.match(/dropdown-item/),i=e.props.class&&e.props.class.match(/dropdown-divider/);e.attrs.on.click=d(s=>{context.parent.$emit("click-item",s,e)},l(e,"click")),e.attrs.on.blur=d(s=>{context.parent.$emit("blur-item",s,e)},l(e,"blur")),typeof e.type=="string"&&e.type.match(/^h\d$/)?p(e,"dropdown-header"):e.type==="hr"&&!i?(e.type="div",p(e,"dropdown-divider")):!o&&!i&&p(e,"dropdown-item")}return t}const u=(t,e)=>n.h("div",{},a(e.slots.default())),f=(t,e)=>{const o=t.__vccOpts||t;for(const[i,s]of e)o[i]=s;return o},m={name:"DropdownMenu",components:{DropdownMenuItems:u},props:{align:{type:String,default:"left",validate(t){return["left","right"].indexOf(t.toLowerCase())!==-1}},show:Boolean}},w=["aria-labelledby"];function h(t,e,o,i,s,D){const g=n.resolveComponent("dropdown-menu-items");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["dropdown-menu",{"dropdown-menu-left":o.align==="left","dropdown-menu-right":o.align==="right",show:o.show}]),"aria-labelledby":t.$attrs.id},[n.createVNode(g,null,{default:n.withCtx(()=>[n.renderSlot(t.$slots,"default",{onClick:e[0]||(e[0]=(..._)=>t.onItemClick&&t.onItemClick(..._))})]),_:3})],10,w)}const y=f(m,[["render",h]]);r.DropdownMenu=y,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/dropdown-menu",
-  "version": "1.0.14",
+  "version": "2.0.0-beta.1",
   "description": "A Vue dropdown menu component.",
   "files": [
     "index.js",
@@ -38,25 +38,28 @@
   "bugs": {
     "url": "https://github.com/vue-interface/dropdown-menu/issues"
   },
-  "homepage": "https://github.com/vue-interface/dropdown-menu/docs#readme",
+  "homepage": "https://github.com/vue-interface/dropdown-menu",
   "dependencies": {
-    "@vue-interface/variant": "^1.1.7",
-    "color": "^4.2.0",
-    "vue": "^2.6.14"
+    "@vue-interface/variant": "^2.0.0-beta.0",
+    "color": "^4.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-babel": "^5.3.0",
-    "autoprefixer": "^10.4.2",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "autoprefixer": "^10.4.8",
     "babel-eslint": "^10.1.0",
     "babel-preset-vue": "^2.0.2",
     "change-case": "^4.1.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.4.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"
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
+    "vite": "^3.0.9",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.4"
   }
 }

package/src/DropdownMenuItems.vue

@@ -1,6 +1,8 @@
 <script>
+import { h } from 'vue';
+
 function appendClass(vnode, str) {
-    vnode.data.staticClass = `${vnode.data.staticClass || ''} ${str}`.trim();  
+    vnode.props.class = `${vnode.props.class || ''} ${str}`.trim();
 }
 
 function wrap(wrapper, fn) {
@@ -16,51 +18,60 @@ function wrap(wrapper, fn) {
 }
 
 function listener(vnode, key) {
-    return vnode.data.on[key] || (
-        vnode.componentOptions &&
-        vnode.componentOptions.listeners &&
+    return vnode.attrs.on[key] || (
+        vnode.type &&
+        vnode.type.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;
+function isFragment(vnode) {
+    // We'll go ahead and assume that if the type is a symbol, then the vnode is fragment.
+    // This may be a faulty assumption; if it is, it'll need to be changed.
+    return vnode && vnode.type && (vnode.type === 'fragment' || typeof vnode.type === 'symbol');
+}
+
+function changeMenuItems(items) {
+    for(const vnode of items) {
+        if(isFragment(vnode)) {
+            return changeMenuItems(vnode.children);
+        }
+
+        vnode.props = Object.assign({ class: undefined }, vnode.props);
+        vnode.attrs = Object.assign({}, vnode.attrs);
+
+        if(!vnode.attrs.on) {
+            vnode.attrs.on = {};
+        }
+
+        const isDropdownItem = vnode.props.class && vnode.props.class.match(/dropdown-item/);
+        const isDropdownDivider = vnode.props.class && vnode.props.class.match(/dropdown-divider/);
+
+        vnode.attrs.on.click = wrap(e => {
+            context.parent.$emit('click-item', e, vnode);
+        }, listener(vnode, 'click'));
+
+        vnode.attrs.on.blur = wrap(e => {
+            context.parent.$emit('blur-item', e, vnode);
+        }, listener(vnode, 'blur'));
+
+        if(typeof vnode.type === 'string' && vnode.type.match(/^h\d$/)) {
+            appendClass(vnode, 'dropdown-header');
+        }
+        else if(vnode.type === 'hr' && !isDropdownDivider) {
+            vnode.type = 'div';
+
+            appendClass(vnode, 'dropdown-divider');
+        }
+        else if(!isDropdownItem && !isDropdownDivider) {
+            appendClass(vnode, 'dropdown-item');
+        }
     }
 
-};
+    return items;
+}
+
+const DropdownMenuItems = (props, context) => h('div', {}, changeMenuItems(context.slots.default()));
+
+export default DropdownMenuItems;
 </script>