wave-ui 1.42.1 → 1.44.0

package/dist/wave-ui.es.js

@@ -533,7 +533,7 @@ _notificationManager = new WeakMap();
 __publicField(WaveUI, "instance", null);
 __publicField(WaveUI, "vueInstance", null);
 WaveUI.version = "__VERSION__";
-var render$N = function() {
+var render$O = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -564,7 +564,7 @@ var render$N = function() {
     }, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 })], 2) : _vm._e()])], 1);
   }), 0);
 };
-var staticRenderFns$N = [];
+var staticRenderFns$O = [];
 var wAccordion_vue_vue_type_style_index_0_lang = "";
 function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
   var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
@@ -617,7 +617,7 @@ function normalizeComponent(scriptExports, render2, staticRenderFns2, functional
     options
   };
 }
-const __vue2_script$N = {
+const __vue2_script$O = {
   name: "w-accordion",
   props: {
     value: { type: Array },
@@ -689,17 +689,17 @@ const __vue2_script$N = {
     }
   }
 };
-const __cssModules$N = {};
-var __component__$N = /* @__PURE__ */ normalizeComponent(__vue2_script$N, render$N, staticRenderFns$N, false, __vue2_injectStyles$N, null, null, null);
-function __vue2_injectStyles$N(context) {
-  for (let o in __cssModules$N) {
-    this[o] = __cssModules$N[o];
+const __cssModules$O = {};
+var __component__$O = /* @__PURE__ */ normalizeComponent(__vue2_script$O, render$O, staticRenderFns$O, false, __vue2_injectStyles$O, null, null, null);
+function __vue2_injectStyles$O(context) {
+  for (let o in __cssModules$O) {
+    this[o] = __cssModules$O[o];
   }
 }
 var wAccordion = /* @__PURE__ */ function() {
-  return __component__$N.exports;
+  return __component__$O.exports;
 }();
-var render$M = function() {
+var render$N = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -709,9 +709,9 @@ var render$M = function() {
     _vm.$emit("close", false);
   } } }) : _vm._e()] : _vm._t("default")], 2) : _vm._e();
 };
-var staticRenderFns$M = [];
+var staticRenderFns$N = [];
 var wAlert_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$M = {
+const __vue2_script$N = {
   name: "w-alert",
   props: {
     value: { default: true },
@@ -787,17 +787,17 @@ const __vue2_script$M = {
     }
   }
 };
-const __cssModules$M = {};
-var __component__$M = /* @__PURE__ */ normalizeComponent(__vue2_script$M, render$M, staticRenderFns$M, false, __vue2_injectStyles$M, null, null, null);
-function __vue2_injectStyles$M(context) {
-  for (let o in __cssModules$M) {
-    this[o] = __cssModules$M[o];
+const __cssModules$N = {};
+var __component__$N = /* @__PURE__ */ normalizeComponent(__vue2_script$N, render$N, staticRenderFns$N, false, __vue2_injectStyles$N, null, null, null);
+function __vue2_injectStyles$N(context) {
+  for (let o in __cssModules$N) {
+    this[o] = __cssModules$N[o];
   }
 }
 var wAlert = /* @__PURE__ */ function() {
-  return __component__$M.exports;
+  return __component__$N.exports;
 }();
-var render$L = function() {
+var render$M = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -809,9 +809,9 @@ var render$L = function() {
     }, expression: "notif._value" } }, "w-alert", notif, false), [_vm._v(_vm._s(notif.message))]) : _vm._e()];
   })], 2);
 };
-var staticRenderFns$L = [];
+var staticRenderFns$M = [];
 var wNotificationManager_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$L = {
+const __vue2_script$M = {
   name: "w-notification-manager",
   data: () => ({
     notifManager: null
@@ -836,15 +836,15 @@ const __vue2_script$L = {
     delete this.notifManager;
   }
 };
-const __cssModules$L = {};
-var __component__$L = /* @__PURE__ */ normalizeComponent(__vue2_script$L, render$L, staticRenderFns$L, false, __vue2_injectStyles$L, null, null, null);
-function __vue2_injectStyles$L(context) {
-  for (let o in __cssModules$L) {
-    this[o] = __cssModules$L[o];
+const __cssModules$M = {};
+var __component__$M = /* @__PURE__ */ normalizeComponent(__vue2_script$M, render$M, staticRenderFns$M, false, __vue2_injectStyles$M, null, null, null);
+function __vue2_injectStyles$M(context) {
+  for (let o in __cssModules$M) {
+    this[o] = __cssModules$M[o];
   }
 }
 var NotificationManager = /* @__PURE__ */ function() {
-  return __component__$L.exports;
+  return __component__$M.exports;
 }();
 const { css: cssConfig } = config;
 const entries = Object.entries(config.breakpoints);
@@ -959,27 +959,55 @@ var DynamicCSS = () => {
     styles += genBreakpointLayoutClasses();
   return styles;
 };
-var render$K = function() {
+var render$L = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-app", class: { "theme--dark": _vm.dark, "d-block": _vm.block } }, [_vm._t("default"), _c("notification-manager")], 2);
+  return _c("div", { staticClass: "w-app", class: _vm.classes }, [_vm._t("default"), _c("notification-manager")], 2);
 };
-var staticRenderFns$K = [];
+var staticRenderFns$L = [];
 var wApp_vue_vue_type_style_index_0_lang = "";
 const breakpointsNames = Object.keys(config.breakpoints);
 const breakpointsValues = Object.values(config.breakpoints);
-const __vue2_script$K = {
+const __vue2_script$L = {
   name: "w-app",
   props: {
     dark: { type: Boolean },
-    block: { type: Boolean }
+    block: { type: Boolean },
+    row: { type: Boolean },
+    alignCenter: { type: Boolean },
+    alignEnd: { type: Boolean },
+    justifyCenter: { type: Boolean },
+    justifyEnd: { type: Boolean },
+    justifySpaceBetween: { type: Boolean },
+    justifySpaceAround: { type: Boolean },
+    justifySpaceEvenly: { type: Boolean },
+    textCenter: { type: Boolean },
+    textRight: { type: Boolean }
   },
   components: { NotificationManager },
   data: () => ({
     currentBreakpoint: null,
     notifManager: null
   }),
+  computed: {
+    classes() {
+      return {
+        "d-block": this.block,
+        "row": this.row,
+        "align-center": this.alignCenter,
+        "align-end": this.alignEnd,
+        "justify-center": this.justifyCenter,
+        "justify-end": this.justifyEnd,
+        "justify-space-between": this.justifySpaceBetween,
+        "justify-space-around": this.justifySpaceAround,
+        "justify-space-evenly": this.justifySpaceEvenly,
+        "text-center": this.textCenter,
+        "text-right": this.textRight,
+        "theme--dark": this.dark
+      };
+    }
+  },
   methods: {
     getBreakpoint() {
       const width = window.innerWidth;
@@ -1019,17 +1047,17 @@ const __vue2_script$K = {
     window.removeEventListener("resize", this.getBreakpoint);
   }
 };
-const __cssModules$K = {};
-var __component__$K = /* @__PURE__ */ normalizeComponent(__vue2_script$K, render$K, staticRenderFns$K, false, __vue2_injectStyles$K, null, null, null);
-function __vue2_injectStyles$K(context) {
-  for (let o in __cssModules$K) {
-    this[o] = __cssModules$K[o];
+const __cssModules$L = {};
+var __component__$L = /* @__PURE__ */ normalizeComponent(__vue2_script$L, render$L, staticRenderFns$L, false, __vue2_injectStyles$L, null, null, null);
+function __vue2_injectStyles$L(context) {
+  for (let o in __cssModules$L) {
+    this[o] = __cssModules$L[o];
   }
 }
 var wApp = /* @__PURE__ */ function() {
-  return __component__$K.exports;
+  return __component__$L.exports;
 }();
-var render$J = function() {
+var render$K = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1037,9 +1065,9 @@ var render$J = function() {
     return [_vm._v(_vm._s(_vm.value === true ? "" : _vm.value || ""))];
   }) : _vm._e()], 2) : _vm._e()])], 2);
 };
-var staticRenderFns$J = [];
+var staticRenderFns$K = [];
 var wBadge_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$J = {
+const __vue2_script$K = {
   name: "w-badge",
   props: {
     value: { default: true },
@@ -1101,17 +1129,17 @@ const __vue2_script$J = {
     }
   }
 };
-const __cssModules$J = {};
-var __component__$J = /* @__PURE__ */ normalizeComponent(__vue2_script$J, render$J, staticRenderFns$J, false, __vue2_injectStyles$J, null, null, null);
-function __vue2_injectStyles$J(context) {
-  for (let o in __cssModules$J) {
-    this[o] = __cssModules$J[o];
+const __cssModules$K = {};
+var __component__$K = /* @__PURE__ */ normalizeComponent(__vue2_script$K, render$K, staticRenderFns$K, false, __vue2_injectStyles$K, null, null, null);
+function __vue2_injectStyles$K(context) {
+  for (let o in __cssModules$K) {
+    this[o] = __cssModules$K[o];
   }
 }
 var wBadge = /* @__PURE__ */ function() {
-  return __component__$J.exports;
+  return __component__$K.exports;
 }();
-var render$I = function() {
+var render$J = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1119,9 +1147,9 @@ var render$I = function() {
     return [i && _vm.$scopedSlots.separator ? _c("span", { key: i + "a", staticClass: "w-breadcrumbs__separator", class: _vm.separatorColor }, [_vm._t("separator", null, { "index": i })], 2) : i ? _c("w-icon", { key: i + "b", staticClass: "w-breadcrumbs__separator", class: _vm.separatorColor }, [_vm._v(_vm._s(_vm.icon))]) : _vm._e(), item[_vm.itemRouteKey] && (i < _vm.items.length - 1 || _vm.linkLastItem) ? [_vm.$scopedSlots.item ? _c(_vm.hasRouter ? "router-link" : "a", { key: i + "c", tag: "component", staticClass: "w-breadcrumbs__item", class: _vm.color || null, attrs: { "to": _vm.hasRouter && item[_vm.itemRouteKey], "href": item[_vm.itemRouteKey] } }, [_vm._t("item", null, { "item": item, "index": i + 1, "isLast": i === _vm.items.length - 1 })], 2) : _c(_vm.hasRouter ? "router-link" : "a", { key: i + "d", tag: "component", staticClass: "w-breadcrumbs__item", class: _vm.color || null, attrs: { "to": _vm.hasRouter && item[_vm.itemRouteKey], "href": item[_vm.itemRouteKey] }, domProps: { "innerHTML": _vm._s(item[_vm.itemLabelKey]) } })] : _vm.$scopedSlots.item ? _vm._t("item", null, { "item": item, "index": i + 1, "isLast": i === _vm.items.length - 1 }) : _c("span", { key: i + "f", domProps: { "innerHTML": _vm._s(item[_vm.itemLabelKey]) } })];
   })], 2);
 };
-var staticRenderFns$I = [];
+var staticRenderFns$J = [];
 var wBreadcrumbs_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$I = {
+const __vue2_script$J = {
   name: "w-breadcrumbs",
   props: {
     items: { type: Array, required: true },
@@ -1152,17 +1180,17 @@ const __vue2_script$I = {
     }
   }
 };
-const __cssModules$I = {};
-var __component__$I = /* @__PURE__ */ normalizeComponent(__vue2_script$I, render$I, staticRenderFns$I, false, __vue2_injectStyles$I, null, null, null);
-function __vue2_injectStyles$I(context) {
-  for (let o in __cssModules$I) {
-    this[o] = __cssModules$I[o];
+const __cssModules$J = {};
+var __component__$J = /* @__PURE__ */ normalizeComponent(__vue2_script$J, render$J, staticRenderFns$J, false, __vue2_injectStyles$J, null, null, null);
+function __vue2_injectStyles$J(context) {
+  for (let o in __cssModules$J) {
+    this[o] = __cssModules$J[o];
   }
 }
 var wBreadcrumbs = /* @__PURE__ */ function() {
-  return __component__$I.exports;
+  return __component__$J.exports;
 }();
-var render$H = function() {
+var render$I = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1170,9 +1198,9 @@ var render$H = function() {
     return [_c("svg", { attrs: { "viewBox": "0 0 40 40" } }, [_c("circle", { attrs: { "cx": "20", "cy": "20", "r": "18", "fill": "transparent", "stroke": "currentColor", "stroke-width": "4", "stroke-linecap": "round" } })])];
   })], 2) : _vm._e()])], 2);
 };
-var staticRenderFns$H = [];
+var staticRenderFns$I = [];
 var wButton_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$H = {
+const __vue2_script$I = {
   name: "w-button",
   props: {
     color: { type: String },
@@ -1264,6 +1292,81 @@ const __vue2_script$H = {
     }
   }
 };
+const __cssModules$I = {};
+var __component__$I = /* @__PURE__ */ normalizeComponent(__vue2_script$I, render$I, staticRenderFns$I, false, __vue2_injectStyles$I, null, null, null);
+function __vue2_injectStyles$I(context) {
+  for (let o in __cssModules$I) {
+    this[o] = __cssModules$I[o];
+  }
+}
+var wButton = /* @__PURE__ */ function() {
+  return __component__$I.exports;
+}();
+const objectifyClasses = (classes = {}) => {
+  if (typeof classes === "string")
+    classes = { [classes]: true };
+  else if (typeof classes === "array")
+    classes = { [classes.join(" ")]: true };
+  return classes;
+};
+var render$H = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", { staticClass: "w-card", class: _vm.classes, style: _vm.styles }, [_vm.$slots.title ? _c("div", { staticClass: "w-card__title", class: Object.assign({}, { "w-card__title--has-toolbar": _vm.titleHasToolbar }, _vm.titleClasses) }, [_vm._t("title")], 2) : _vm.title ? _c("div", { staticClass: "w-card__title", class: _vm.titleClasses, domProps: { "innerHTML": _vm._s(_vm.title) } }) : _vm._e(), _vm.image ? _c("w-image", _vm._b({ staticClass: "w-card__image", attrs: { "src": _vm.image } }, "w-image", _vm.imgProps, false), [_vm._t("image-content")], 2) : _vm._e(), _c("div", { staticClass: "w-card__content", class: _vm.contentClasses }, [_vm._t("default")], 2), _vm.$slots.actions ? _c("div", { staticClass: "w-card__actions", class: { "w-card__actions--has-toolbar": _vm.actionsHasToolbar } }, [_vm._t("actions")], 2) : _vm._e()], 1);
+};
+var staticRenderFns$H = [];
+var wCard_vue_vue_type_style_index_0_lang = "";
+const __vue2_script$H = {
+  name: "w-card",
+  props: {
+    color: { type: String },
+    bgColor: { type: String },
+    shadow: { type: Boolean },
+    noBorder: { type: Boolean },
+    tile: { type: Boolean },
+    title: { type: String },
+    image: { type: String },
+    imageProps: { type: Object },
+    titleClass: { type: [String, Object, Array] },
+    contentClass: { type: [String, Object, Array] }
+  },
+  emits: [],
+  computed: {
+    titleClasses() {
+      return objectifyClasses(this.titleClass);
+    },
+    contentClasses() {
+      return objectifyClasses(this.contentClass);
+    },
+    titleHasToolbar() {
+      const { title } = this.$slots;
+      return title && title.map((vnode) => vnode.tag).join("").includes("w-toolbar");
+    },
+    actionsHasToolbar() {
+      const { actions } = this.$slots;
+      return actions && actions.map((vnode) => vnode.tag).join("").includes("w-toolbar");
+    },
+    imgProps() {
+      return __spreadValues({
+        tag: "div",
+        ratio: 1 / 2
+      }, this.imageProps);
+    },
+    classes() {
+      return {
+        [this.color]: this.color,
+        [`${this.bgColor}--bg`]: this.bgColor,
+        "w-card--no-border": this.noBorder,
+        "w-card--tile": this.tile,
+        "w-card--shadow": this.shadow
+      };
+    },
+    styles() {
+      return false;
+    }
+  }
+};
 const __cssModules$H = {};
 var __component__$H = /* @__PURE__ */ normalizeComponent(__vue2_script$H, render$H, staticRenderFns$H, false, __vue2_injectStyles$H, null, null, null);
 function __vue2_injectStyles$H(context) {
@@ -1271,7 +1374,7 @@ function __vue2_injectStyles$H(context) {
     this[o] = __cssModules$H[o];
   }
 }
-var wButton = /* @__PURE__ */ function() {
+var wCard = /* @__PURE__ */ function() {
   return __component__$H.exports;
 }();
 var FormElementMixin = {
@@ -1494,55 +1597,84 @@ var wCheckboxes = /* @__PURE__ */ function() {
   return __component__$F.exports;
 }();
 var render$E = function() {
-  var _obj;
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-card", class: _vm.classes, style: _vm.styles }, [_vm.$slots.title ? _c("div", { staticClass: "w-card__title", class: (_obj = { "w-card__title--has-toolbar": _vm.titleHasToolbar }, _obj[_vm.titleClass] = _vm.titleClass || false, _obj) }, [_vm._t("title")], 2) : _vm.title ? _c("div", { staticClass: "w-card__title", class: _vm.titleClass || false, domProps: { "innerHTML": _vm._s(_vm.title) } }) : _vm._e(), _vm.image ? _c("w-image", _vm._b({ staticClass: "w-card__image", attrs: { "src": _vm.image } }, "w-image", _vm.imgProps, false), [_vm._t("image-content")], 2) : _vm._e(), _c("div", { staticClass: "w-card__content", class: _vm.contentClass || false }, [_vm._t("default")], 2), _vm.$slots.actions ? _c("div", { staticClass: "w-card__actions", class: { "w-card__actions--has-toolbar": _vm.actionsHasToolbar } }, [_vm._t("actions")], 2) : _vm._e()], 1);
+  return _c("div", { staticClass: "w-confirm" }, [_c("w-menu", _vm._b({ scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
+    var on = ref.on;
+    return [_c("w-button", _vm._g(_vm._b({ staticClass: "w-confirm__button" }, "w-button", _vm.buttonProps, false), on), [_vm._t("default")], 2)];
+  } }], null, true), model: { value: _vm.showPopup, callback: function($$v) {
+    _vm.showPopup = $$v;
+  }, expression: "showPopup" } }, "w-menu", _vm.wMenuProps, false), [_c("w-flex", { attrs: { "column": !_vm.inline, "align-center": "" } }, [_c("div", [_vm._t("question", function() {
+    return [_vm._v("Are you sure?")];
+  })], 2), _c("div", { staticClass: "w-flex justify-end", class: _vm.inline ? "ml2" : "mt2" }, [!_vm.noCancel ? _c("w-button", _vm._b({ staticClass: "mr2", attrs: { "bg-color": (_vm.cancelButton || {}).bgColor || "error" }, on: { "click": _vm.onCancel } }, "w-button", _vm.cancelButton, false), [_vm._t("cancel", function() {
+    return [_vm._v("Cancel")];
+  })], 2) : _vm._e(), _c("w-button", _vm._b({ attrs: { "bg-color": (_vm.confirmButton || {}).bgColor || "success" }, on: { "click": _vm.onConfirm } }, "w-button", _vm.confirmButton, false), [_vm._t("confirm", function() {
+    return [_vm._v("Confirm")];
+  })], 2)], 1)])], 1)], 1);
 };
 var staticRenderFns$E = [];
-var wCard_vue_vue_type_style_index_0_lang = "";
 const __vue2_script$E = {
-  name: "w-card",
+  name: "w-confirm",
   props: {
-    color: { type: String },
     bgColor: { type: String },
-    shadow: { type: Boolean },
-    noBorder: { type: Boolean },
-    tile: { type: Boolean },
-    title: { type: String },
-    image: { type: String },
-    imageProps: { type: Object },
-    titleClass: { type: String },
-    contentClass: { type: String }
+    color: { type: String },
+    icon: { type: String },
+    mainButton: { type: Object },
+    noCancel: { type: Boolean },
+    cancelButton: { type: [Boolean, Object] },
+    confirmButton: { type: Object },
+    inline: { type: Boolean },
+    menu: { type: Object },
+    noArrow: { type: Boolean },
+    top: { type: Boolean },
+    bottom: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    alignTop: { type: Boolean },
+    alignBottom: { type: Boolean },
+    alignLeft: { type: Boolean },
+    alignRight: { type: Boolean },
+    persistent: { type: Boolean },
+    transition: { type: String }
   },
-  emits: [],
+  emits: ["cancel", "confirm"],
+  data: () => ({
+    showPopup: false,
+    props: []
+  }),
   computed: {
-    titleHasToolbar() {
-      const { title } = this.$slots;
-      return title && title.map((vnode) => vnode.tag).join("").includes("w-toolbar");
-    },
-    actionsHasToolbar() {
-      const { actions } = this.$slots;
-      return actions && actions.map((vnode) => vnode.tag).join("").includes("w-toolbar");
-    },
-    imgProps() {
+    wMenuProps() {
       return __spreadValues({
-        tag: "div",
-        ratio: 1 / 2
-      }, this.imageProps);
-    },
-    classes() {
-      return {
-        [this.color]: this.color,
-        [`${this.bgColor}--bg`]: this.bgColor,
-        "w-card--no-border": this.noBorder,
-        "w-card--tile": this.tile,
-        "w-card--shadow": this.shadow
-      };
+        top: this.top,
+        bottom: this.bottom,
+        left: this.left,
+        right: this.right,
+        arrow: !this.noArrow,
+        alignTop: this.alignTop,
+        alignBottom: this.alignBottom,
+        alignLeft: this.alignLeft,
+        alignRight: this.alignRight,
+        persistent: this.persistent,
+        transition: this.transition
+      }, this.menu);
+    },
+    buttonProps() {
+      return __spreadValues({
+        bgColor: this.bgColor,
+        color: this.color,
+        icon: this.icon
+      }, this.mainButton);
+    }
+  },
+  methods: {
+    onCancel() {
+      this.$emit("cancel");
+      this.showPopup = false;
     },
-    styles() {
-      return false;
+    onConfirm() {
+      this.$emit("confirm");
+      this.showPopup = false;
     }
   }
 };
@@ -1553,7 +1685,7 @@ function __vue2_injectStyles$E(context) {
     this[o] = __cssModules$E[o];
   }
 }
-var wCard = /* @__PURE__ */ function() {
+var wConfirm = /* @__PURE__ */ function() {
   return __component__$E.exports;
 }();
 var render$D = function() {
@@ -2876,13 +3008,13 @@ var render$s = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { ref: "wrapper", staticClass: "w-menu-wrap" }, [_vm._t("activator", null, { "on": _vm.activatorEventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName } }, [_vm.custom ? _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.showMenu, expression: "showMenu" }], ref: "menu", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, on: { "click": function($event) {
+  return _c("div", { staticClass: "w-menu-wrap" }, [_vm._t("activator", null, { "on": _vm.activatorEventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_vm.custom && _vm.menuVisible ? _c("div", { ref: "menu", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, on: { "click": function($event) {
     _vm.hideOnMenuClick && _vm.closeMenu(true);
   }, "mouseenter": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = true);
   }, "mouseleave": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = false, _vm.closeMenu());
-  } } }, [_vm._t("default")], 2) : _c("w-card", { directives: [{ name: "show", rawName: "v-show", value: _vm.showMenu, expression: "showMenu" }], ref: "menu", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, attrs: { "tile": _vm.tile, "title-class": _vm.titleClass, "content-class": _vm.contentClass, "shadow": _vm.shadow, "no-border": _vm.noBorder }, nativeOn: { "click": function($event) {
+  } } }, [_vm._t("default")], 2) : _vm.menuVisible ? _c("w-card", { ref: "menu", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, attrs: { "tile": _vm.tile, "title-class": _vm.titleClasses, "content-class": _vm.contentClasses, "shadow": _vm.shadow, "no-border": _vm.noBorder }, nativeOn: { "click": function($event) {
     _vm.hideOnMenuClick && _vm.closeMenu(true);
   }, "mouseenter": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = true);
@@ -2892,8 +3024,8 @@ var render$s = function() {
     return [_vm._t("title")];
   }, proxy: true } : null, _vm.$slots.actions ? { key: "actions", fn: function() {
     return [_vm._t("actions")];
-  }, proxy: true } : null], null, true) }, [_vm._t("default")], 2)], 1), _vm.overlay ? _c("w-overlay", _vm._b({ ref: "overlay", class: _vm.overlayClass || null, attrs: { "value": _vm.showMenu, "persistent": _vm.persistent, "z-index": (_vm.zIndex || 200) - 1 }, on: { "input": function($event) {
-    _vm.showMenu = false;
+  }, proxy: true } : null], null, true) }, [_vm._t("default")], 2) : _vm._e()], 1), _vm.overlay ? _c("w-overlay", _vm._b({ ref: "overlay", class: _vm.overlayClasses, attrs: { "value": _vm.menuVisible, "persistent": _vm.persistent, "z-index": (_vm.zIndex || 200) - 1 }, on: { "input": function($event) {
+    _vm.menuVisible = false;
   } } }, "w-overlay", _vm.overlayProps, false)) : _vm._e()], 2);
 };
 var staticRenderFns$s = [];
@@ -2912,9 +3044,10 @@ const __vue2_script$s = {
     round: { type: Boolean },
     noBorder: { type: Boolean },
     transition: { type: String },
-    menuClass: { type: String },
-    titleClass: { type: String },
-    contentClass: { type: String },
+    menuClass: { type: [String, Object, Array] },
+    titleClass: { type: [String, Object, Array] },
+    contentClass: { type: [String, Object, Array] },
+    arrow: { type: Boolean },
     detachTo: { type: [String, Boolean, Object] },
     fixed: { type: Boolean },
     top: { type: Boolean },
@@ -2928,14 +3061,14 @@ const __vue2_script$s = {
     zIndex: { type: [Number, String, Boolean] },
     minWidth: { type: [Number, String] },
     overlay: { type: Boolean },
-    overlayClass: { type: String },
+    overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object },
     persistent: { type: Boolean },
     noPosition: { type: Boolean }
   },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
-    showMenu: false,
+    menuVisible: false,
     hoveringActivator: false,
     hoveringMenu: false,
     menuCoordinates: {
@@ -2984,26 +3117,40 @@ const __vue2_script$s = {
     alignment() {
       return (this.top || this.bottom) && this.alignLeft && "left" || (this.top || this.bottom) && this.alignRight && "right" || (this.left || this.right) && this.alignTop && "top" || (this.left || this.right) && this.alignBottom && "bottom" || "";
     },
+    menuClasses() {
+      return objectifyClasses(this.menuClass);
+    },
+    titleClasses() {
+      return objectifyClasses(this.titleClass);
+    },
+    contentClasses() {
+      return objectifyClasses(this.contentClass);
+    },
+    overlayClasses() {
+      return objectifyClasses(this.overlayClass);
+    },
     classes() {
-      return {
+      return __spreadProps(__spreadValues({
         [this.color]: this.color,
-        [`${this.bgColor}--bg`]: this.bgColor,
-        [this.menuClass]: this.menuClass,
-        [`w-menu--${this.position}`]: true,
-        [`w-menu--align-${this.alignment}`]: this.alignment,
+        [`${this.bgColor}--bg`]: this.bgColor
+      }, this.menuClasses), {
+        [`w-menu--${this.position}`]: !this.noPosition,
+        [`w-menu--align-${this.alignment}`]: !this.noPosition && this.alignment,
         "w-menu--tile": this.tile,
         "w-menu--card": !this.custom,
         "w-menu--round": this.round,
+        "w-menu--arrow": this.arrow,
         "w-menu--shadow": this.shadow,
         "w-menu--fixed": this.fixed
-      };
+      });
     },
     styles() {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || this.overlay && !this.zIndex && 200 || null,
         top: this.menuCoordinates.top && `${~~this.menuCoordinates.top}px` || null,
         left: this.menuCoordinates.left && `${~~this.menuCoordinates.left}px` || null,
-        minWidth: this.minWidth && this.menuMinWidth || null
+        minWidth: this.minWidth && this.menuMinWidth || null,
+        "--w-menu-bg-color": this.arrow && this.$waveui.colors[this.bgColor || "white"]
       };
     },
     activatorEventHandlers() {
@@ -3033,7 +3180,7 @@ const __vue2_script$s = {
   },
   methods: {
     toggleMenu(e) {
-      let shouldShowMenu = this.showMenu;
+      let shouldShowMenu = this.menuVisible;
       if ("ontouchstart" in window && this.showOnHover && e.type === "click") {
         shouldShowMenu = !shouldShowMenu;
       } else if (e.type === "click" && !this.showOnHover)
@@ -3046,35 +3193,40 @@ const __vue2_script$s = {
         shouldShowMenu = false;
       }
       this.timeoutId = clearTimeout(this.timeoutId);
-      if (shouldShowMenu)
+      if (shouldShowMenu) {
+        this.$emit("update:modelValue", this.menuVisible = true);
+        this.$emit("input", true);
+        this.$emit("open");
         this.openMenu(e);
-      else
+      } else
         this.closeMenu();
     },
-    openMenu(e) {
+    async openMenu(e) {
+      this.menuVisible = true;
+      await this.insertMenu();
       if (this.minWidth === "activator")
         this.activatorWidth = this.activatorEl.offsetWidth;
       if (!this.noPosition)
         this.computeMenuPosition(e);
       this.timeoutId = setTimeout(() => {
-        this.$emit("update:modelValue", this.showMenu = true);
+        this.$emit("update:modelValue", true);
         this.$emit("input", true);
         this.$emit("open");
-      }, 10);
+      }, 0);
       if (!this.persistent)
         document.addEventListener("mousedown", this.onOutsideMousedown);
       if (!this.noPosition)
         window.addEventListener("resize", this.onResize);
     },
     async closeMenu(force = false) {
-      if (!this.showMenu)
+      if (!this.menuVisible)
         return;
       if (this.showOnHover && !force) {
         await new Promise((resolve) => setTimeout(resolve, 10));
         if (this.showOnHover && (this.hoveringMenu || this.hoveringActivator))
           return;
       }
-      this.$emit("update:modelValue", this.showMenu = false);
+      this.$emit("update:modelValue", this.menuVisible = false);
       this.$emit("input", false);
       this.$emit("close");
       document.removeEventListener("mousedown", this.onOutsideMousedown);
@@ -3082,7 +3234,7 @@ const __vue2_script$s = {
     },
     onOutsideMousedown(e) {
       if (!this.menuEl.contains(e.target) && !this.activatorEl.contains(e.target)) {
-        this.$emit("update:modelValue", this.showMenu = false);
+        this.$emit("update:modelValue", this.menuVisible = false);
         this.$emit("input", false);
         this.$emit("close");
         document.removeEventListener("mousedown", this.onOutsideMousedown);
@@ -3148,40 +3300,47 @@ const __vue2_script$s = {
         }
       }
       this.menuEl.style.visibility = null;
-      if (!this.showMenu)
+      if (!this.menuVisible)
         this.menuEl.style.display = "none";
       this.menuCoordinates = { top, left };
     },
     insertMenu() {
-      const wrapper = this.$refs.wrapper;
-      this.menuEl = this.$refs.menu.$el || this.$refs.menu;
-      wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
-      if (this.overlay)
-        wrapper.parentNode.insertBefore(this.overlayEl, wrapper);
-      this.detachToTarget.appendChild(this.menuEl);
+      return new Promise((resolve) => {
+        this.$nextTick(() => {
+          var _a;
+          this.menuEl = ((_a = this.$refs.menu) == null ? void 0 : _a.$el) || this.$refs.menu;
+          this.detachToTarget.appendChild(this.menuEl);
+          resolve();
+        });
+      });
     },
     removeMenu() {
       if (this.menuEl && this.menuEl.parentNode)
-        this.menuEl.parentNode.removeChild(this.menuEl);
+        this.menuEl.remove();
     }
   },
   mounted() {
-    this.activatorEl = this.$refs.wrapper.firstElementChild;
-    this.overlayEl = this.overlay ? this.$refs.overlay.$el : null;
-    this.insertMenu();
+    var _a;
+    const wrapper = this.$el;
+    this.activatorEl = wrapper.firstElementChild;
+    wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
+    if (this.overlay) {
+      this.overlayEl = (_a = this.$refs.overlay) == null ? void 0 : _a.$el;
+      wrapper.parentNode.insertBefore(this.overlayEl, wrapper);
+    }
     if (this.value)
       this.toggleMenu({ type: "click", target: this.activatorEl });
   },
   beforeDestroy() {
     this.removeMenu();
     if (this.overlay && this.overlayEl.parentNode)
-      this.overlayEl.parentNode.removeChild(this.overlayEl);
+      this.overlayEl.remove();
     if (this.activatorEl && this.activatorEl.parentNode)
-      this.activatorEl.parentNode.removeChild(this.activatorEl);
+      this.activatorEl.remove();
   },
   watch: {
     value(bool) {
-      if (!!bool !== this.showMenu)
+      if (!!bool !== this.menuVisible)
         this.toggleMenu({ type: "click", target: this.activatorEl });
     },
     detachTo() {
@@ -5321,7 +5480,7 @@ var render$8 = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { ref: "wrapper", staticClass: "w-tooltip-wrap", class: { "w-tooltip-wrap--attached": !_vm.detachTo } }, [_vm._t("activator", null, { "on": _vm.eventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.showTooltip, expression: "showTooltip" }], ref: "tooltip", staticClass: "w-tooltip", class: _vm.classes, style: _vm.styles }, [_vm.bgColor ? _c("div", { class: _vm.color }, [_vm._t("default")], 2) : _vm._t("default")], 2)])], 2);
+  return _c("div", { ref: "wrapper", staticClass: "w-tooltip-wrap", class: { "w-tooltip-wrap--attached": !_vm.detachTo } }, [_vm._t("activator", null, { "on": _vm.eventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.showTooltip, expression: "showTooltip" }], ref: "tooltip", staticClass: "w-tooltip", class: _vm.classes, style: _vm.styles }, [_vm.bgColor ? _c("div", { class: _vm.color }, [_vm._t("default")], 2) : _vm._t("default")], 2)])], 2);
 };
 var staticRenderFns$8 = [];
 var wTooltip_vue_vue_type_style_index_0_lang = "";
@@ -5337,8 +5496,8 @@ const __vue2_script$8 = {
     shadow: { type: Boolean },
     tile: { type: Boolean },
     round: { type: Boolean },
-    transition: { type: String, default: "" },
-    tooltipClass: { type: String },
+    transition: { type: String },
+    tooltipClass: { type: [String, Object, Array] },
     detachTo: {},
     fixed: { type: Boolean },
     top: { type: Boolean },
@@ -5361,6 +5520,9 @@ const __vue2_script$8 = {
     timeoutId: null
   }),
   computed: {
+    tooltipClasses() {
+      return objectifyClasses(this.tooltipClass);
+    },
     transitionName() {
       const direction = this.position.replace(/top|bottom/, (m) => ({ top: "up", bottom: "down" })[m]);
       return this.transition || `w-tooltip-slide-fade-${direction}`;
@@ -5417,10 +5579,10 @@ const __vue2_script$8 = {
       return coords;
     },
     classes() {
-      return {
+      return __spreadProps(__spreadValues({
         [this.color]: !this.bgColor,
-        [`${this.bgColor} ${this.bgColor}--bg`]: this.bgColor,
-        [this.tooltipClass]: this.tooltipClass,
+        [`${this.bgColor} ${this.bgColor}--bg`]: this.bgColor
+      }, this.tooltipClasses), {
         [`w-tooltip--${this.position}`]: true,
         "w-tooltip--tile": this.tile,
         "w-tooltip--round": this.round,
@@ -5429,7 +5591,7 @@ const __vue2_script$8 = {
         "w-tooltip--active": this.showTooltip,
         "w-tooltip--no-border": this.noBorder || this.bgColor,
         "w-tooltip--custom-transition": this.transition
-      };
+      });
     },
     styles() {
       return {
@@ -5529,7 +5691,7 @@ const __vue2_script$8 = {
     },
     removeTooltip() {
       if (this.tooltipEl && this.tooltipEl.parentNode)
-        this.tooltipEl.parentNode.removeChild(this.tooltipEl);
+        this.tooltipEl.remove();
     }
   },
   mounted() {
@@ -5542,7 +5704,7 @@ const __vue2_script$8 = {
   beforeDestroy() {
     this.removeTooltip();
     if (this.activatorEl && this.activatorEl.parentNode)
-      this.activatorEl.parentNode.removeChild(this.activatorEl);
+      this.activatorEl.remove();
   },
   watch: {
     value(bool) {
@@ -5952,9 +6114,10 @@ var components = /* @__PURE__ */ Object.freeze({
   WBadge: wBadge,
   WBreadcrumbs: wBreadcrumbs,
   WButton: wButton,
+  WCard: wCard,
   WCheckbox: wCheckbox,
   WCheckboxes: wCheckboxes,
-  WCard: wCard,
+  WConfirm: wConfirm,
   WDatePicker: wDatePicker,
   WDialog: wDialog,
   WDivider: wDivider,