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

package/dist/dropdown-menu.es.js

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