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

package/dist/dropdown-menu.es.js

@@ -1,68 +1,74 @@
-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();
+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 p(r, s) {
-  return (e) => {
-    typeof s == "function" && s(e), e.cancelBubble || r(e);
+function i(e, t) {
+  return (n) => {
+    typeof t == "function" && t(n), n.cancelBubble || e(n);
   };
 }
-function a(r, s) {
-  return r.attrs.on[s] || r.type && r.type.listeners && r.componentOptions.listeners[s];
+function p(e, t) {
+  return e.attrs.on[t] || e.type && e.type.listeners && e.componentOptions.listeners[t];
 }
-const g = (r, s) => {
-  const e = s.slots.default()[0].children;
-  return e.forEach((t) => {
+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/), 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;
+    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;
-}, k = {
+}
+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: y
+    DropdownMenuItems: $
   },
   props: {
     align: {
       type: String,
       default: "left",
-      validate(r) {
-        return ["left", "right"].indexOf(r.toLowerCase()) !== -1;
+      validate(e) {
+        return ["left", "right"].indexOf(e.toLowerCase()) !== -1;
       }
     },
     show: Boolean
   }
-}, C = ["aria-labelledby"];
-function D(r, s, e, t, n, i) {
-  const o = u("dropdown-menu-items");
-  return d(), f("div", {
+}, 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": e.align === "left",
-      "dropdown-menu-right": e.align === "right",
-      show: e.show
+      "dropdown-menu-left": n.align === "left",
+      "dropdown-menu-right": n.align === "right",
+      show: n.show
     }]),
-    "aria-labelledby": r.$attrs.id
+    "aria-labelledby": e.$attrs.id
   }, [
-    h(o, null, {
-      default: _(() => [
-        b(r.$slots, "default", {
-          onClick: s[0] || (s[0] = (...c) => r.onItemClick && r.onItemClick(...c))
+    h(l, null, {
+      default: y(() => [
+        g(e.$slots, "default", {
+          onClick: t[0] || (t[0] = (...c) => e.onItemClick && e.onItemClick(...c))
         })
       ]),
       _: 3
     })
-  ], 10, C);
+  ], 10, D);
 }
-const O = /* @__PURE__ */ $(k, [["render", D]]);
+const v = /* @__PURE__ */ k(C, [["render", I]]);
 export {
-  O as DropdownMenu
+  v as DropdownMenu
 };

package/dist/dropdown-menu.umd.js

@@ -1 +1 @@
-(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"}})});
+(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": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "A Vue dropdown menu component.",
   "files": [
     "index.js",

package/src/DropdownMenuItems.vue

@@ -25,10 +25,18 @@ function listener(vnode, key) {
     );
 }
 
-const DropdownMenuItems = (props, context) => {
-    const children = context.slots.default()[0].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);
+        }
 
-    children.forEach(vnode => {
         vnode.props = Object.assign({ class: undefined }, vnode.props);
         vnode.attrs = Object.assign({}, vnode.attrs);
 
@@ -58,10 +66,12 @@ const DropdownMenuItems = (props, context) => {
         else if(!isDropdownItem && !isDropdownDivider) {
             appendClass(vnode, 'dropdown-item');
         }
-    });
+    }
+
+    return items;
+}
 
-    return h('div', {}, children);
-};
+const DropdownMenuItems = (props, context) => h('div', {}, changeMenuItems(context.slots.default()));
 
 export default DropdownMenuItems;
 </script>