wave-ui 1.68.0 → 1.69.0

package/dist/wave-ui.es.js

@@ -34,6 +34,8 @@ var __privateWrapper = (obj, member, setter, getter) => {
 };
 var _instance, _uid, _notificationDefaults;
 import Vue from "vue";
+const consoleWarn = (message) => console.warn(`Wave UI: ${message}`);
+const consoleError = (message) => console.error(`Wave UI: ${message}`);
 const config = Vue.observable({
   breakpoints: {
     xs: 600,
@@ -506,8 +508,24 @@ const colorPalette = [
   { label: "inherit", color: "inherit" }
 ];
 const injectPresets = (component, presets) => {
+  var _a, _b;
   for (const preset in presets) {
-    component.props[preset].default = presets[preset];
+    if (!((_a = component.props) == null ? void 0 : _a[preset])) {
+      let foundProp = false;
+      if (Array.isArray(component.mixins) && component.mixins.length) {
+        for (const mixin of component.mixins) {
+          if ((_b = mixin == null ? void 0 : mixin.props) == null ? void 0 : _b[preset]) {
+            mixin.props[preset].default = presets[preset];
+            foundProp = true;
+            break;
+          }
+        }
+        if (!foundProp)
+          consoleWarn(`Attempting to set a preset on a prop that doesn't exist: \`${component.name}.${preset}\`.`);
+        continue;
+      }
+    } else
+      component.props[preset].default = presets[preset];
   }
 };
 const _WaveUI = class {
@@ -931,10 +949,11 @@ const cssVars = {
 };
 const generateColors = (config2) => {
   let styles = "";
+  const cssVariables = {};
   const { cssScope } = cssVars;
   const { info, warning, success, error, ...colors } = config2.colors;
-  for (const color in colors) {
-    styles += `${cssScope} .${color}--bg{background-color:${config2.colors[color]}}${cssScope} .${color}{color:${config2.colors[color]}}`;
+  for (const colorName in colors) {
+    styles += `${cssScope} .${colorName}--bg{background-color:${config2.colors[colorName]}}${cssScope} .${colorName}{color:${config2.colors[colorName]}}`;
   }
   if (config2.css.colorShades && config2.shades) {
     Object.entries(config2.shades).forEach(([label, color]) => {
@@ -945,10 +964,14 @@ const generateColors = (config2) => {
   for (const color in statusColors) {
     styles += `${cssScope} .${color}--bg{background-color:${config2.colors[color]}}${cssScope} .${color}{color:${config2.colors[color]}}`;
   }
-  const cssVariables = [];
-  cssVariables.push(`--primary: ${config2.colors.primary}`);
-  styles += `:root {${cssVariables.join(";")}}`;
-  return styles;
+  const allColors = { ...colors, info, warning, success, error };
+  for (const colorName in allColors)
+    cssVariables[colorName] = allColors[colorName];
+  let cssVariablesString = "";
+  Object.entries(cssVariables).forEach(([colorName, colorHex]) => {
+    cssVariablesString += `--w-${colorName}-color: ${colorHex};`;
+  });
+  return `:root{${cssVariablesString}}${styles}`;
 };
 const generateBreakpoints = (breakpoints, grid) => {
   let styles = "";
@@ -984,6 +1007,7 @@ const genBreakpointLayoutClasses = (breakpoints) => {
     "text-nowrap{white-space:nowrap}",
     "row{flex-direction:row}",
     "column{flex-direction:column}",
+    "column-reverse{flex-direction:column-reverse}",
     "grow{flex-grow:1;flex-basis:auto}",
     "no-grow{flex-grow:0}",
     "shrink{flex-shrink:1;margin-left:auto;margin-right:auto}",
@@ -1426,7 +1450,9 @@ var render$L = function() {
   return _vm.tooltip ? _c("w-tooltip", _vm._b({ tag: "component", scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
     var on = ref.on;
     return [_c("button-partial", _vm._g(_vm._b({}, "button-partial", _vm.buttonProps, false), Object.assign({}, _vm.$listeners, on)), [_vm._t("default")], 2)];
-  } }], null, true) }, "component", _vm.tooltipProps || {}, false), [_c("div", { domProps: { "innerHTML": _vm._s(_vm.tooltip) } })]) : _c("button-partial", _vm._g(_vm._b({}, "button-partial", _vm.buttonProps, false), _vm.$listeners), [_vm._t("default")], 2);
+  } }], null, true) }, "component", _vm.tooltipProps || {}, false), [_c("div", { domProps: { "innerHTML": _vm._s(_vm.tooltip) } })]) : _c("button-partial", _vm._g(_vm._b({ scopedSlots: _vm._u([{ key: "loading", fn: function() {
+    return [_vm._t("loading")];
+  }, proxy: true }], null, true) }, "button-partial", _vm.buttonProps, false), _vm.$listeners), [_vm._t("default")], 2);
 };
 var staticRenderFns$L = [];
 const __vue2_script$L = {
@@ -1697,8 +1723,9 @@ const __vue2_script$J = {
   methods: {
     onInput() {
       this.isChecked = !this.isChecked;
-      this.$emit("update:modelValue", this.isChecked);
-      this.$emit("input", this.isChecked);
+      const returnValue = this.isChecked && this.returnValue !== void 0 ? this.returnValue : this.isChecked;
+      this.$emit("update:modelValue", returnValue);
+      this.$emit("input", returnValue);
       if (!this.noRipple) {
         if (this.isChecked) {
           this.ripple.start = true;
@@ -1763,6 +1790,7 @@ const __vue2_script$I = {
   props: {
     items: { type: Array, required: true },
     value: { type: Array },
+    returnValues: { type: Boolean },
     labelOnLeft: { type: Boolean },
     itemLabelKey: { type: String, default: "label" },
     itemValueKey: { type: String, default: "value" },
@@ -1805,7 +1833,7 @@ const __vue2_script$I = {
     },
     toggleCheck(checkbox, isChecked) {
       checkbox._isChecked = isChecked;
-      const selection = this.checkboxItems.filter((item) => item._isChecked).map((item) => item.value);
+      const selection = this.checkboxItems.filter((item) => item._isChecked).map((item) => this.returnValues ? item.returnValue : item.value);
       this.$emit("update:modelValue", selection);
       this.$emit("input", selection);
     },
@@ -2837,8 +2865,6 @@ function __vue2_injectStyles$y(context) {
 var wIcon = /* @__PURE__ */ function() {
   return __component__$y.exports;
 }();
-const consoleWarn = (message) => console.warn(`Wave UI: ${message}`);
-const consoleError = (message) => console.error(`Wave UI: ${message}`);
 var render$x = function() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -3027,7 +3053,7 @@ var render$w = function() {
       return;
     }
     _vm.inputValue = $event.target.value;
-  }, _vm.onInput], "focus": _vm.onFocus, "blur": _vm.onBlur } }, "input", _vm.attrs, false), _vm.listeners)) : [_c("input", _vm._b({ ref: "input", attrs: { "id": "w-input--" + _vm._uid, "type": "file", "name": _vm.name || null, "multiple": _vm.multiple || null, "data-progress": _vm.overallFilesProgress }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "change": _vm.onFileChange } }, "input", _vm.attrs, false)), _c("transition-group", { staticClass: "w-input__input w-input__input--file", attrs: { "tag": "label", "name": "fade", "for": "w-input--" + _vm._uid } }, [!_vm.inputFiles.length && _vm.isFocused ? _c("span", { key: "no-file", staticClass: "w-input__no-file" }, [_vm._t("no-file", function() {
+  }, _vm.onInput], "focus": _vm.onFocus, "blur": _vm.onBlur } }, "input", _vm.attrs, false), _vm.listeners)) : [_c("input", _vm._b({ ref: "input", attrs: { "id": "w-input--" + _vm._uid, "type": "file", "name": _vm.name || null, "multiple": _vm.multiple || null, "disabled": _vm.isDisabled || null, "data-progress": _vm.overallFilesProgress }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "change": _vm.onFileChange } }, "input", _vm.attrs, false)), _c("transition-group", { staticClass: "w-input__input w-input__input--file", attrs: { "tag": "label", "name": "fade", "for": "w-input--" + _vm._uid } }, [!_vm.inputFiles.length && _vm.isFocused ? _c("span", { key: "no-file", staticClass: "w-input__no-file" }, [_vm._t("no-file", function() {
     return [_vm.$slots["no-file"] === void 0 ? [_vm._v("No file")] : _vm._e()];
   })], 2) : _vm._e(), _vm._l(_vm.inputFiles, function(file, i) {
     return _c("span", { key: file.lastModified }, [_vm._v(_vm._s(i ? ", " : "")), _c("span", { key: i + "b", staticClass: "filename" }, [_vm._v(_vm._s(file.base))]), _vm._v(_vm._s(file.extension ? "." + file.extension : ""))]);
@@ -3392,8 +3418,8 @@ const __vue2_script$v = {
         "w-list__item-label--focused": item._focused,
         "w-list__item-label--hoverable": this.hover,
         "w-list__item-label--selectable": this.isSelectable,
-        [item.color]: !!item.color,
-        [this.SelectionColor]: item._selected && !item.color && this.SelectionColor,
+        [item[this.itemColorKey]]: !!item[this.itemColorKey],
+        [this.SelectionColor]: item._selected && !item[this.itemColorKey] && this.SelectionColor,
         [item[this.itemClassKey] || this.itemClass]: item[this.itemClassKey] || this.itemClass
       };
     },
@@ -3517,10 +3543,9 @@ const __vue2_script$v = {
     applySelectionOnItems(selection) {
       if (!this.isMultipleSelect)
         this.listItems.forEach((item) => item._selected = false);
-      this.checkSelection(selection).forEach((val) => {
-        const foundItem = this.listItems.find((item) => item._value === val);
-        if (foundItem)
-          foundItem._selected = true;
+      const selectedItems = this.checkSelection(selection);
+      this.listItems.forEach((item) => {
+        item._selected = selectedItems.find((val) => item._value === val) !== void 0;
       });
     }
   },
@@ -3589,7 +3614,8 @@ var DetachableMixin = {
     detachableDefaultRoot: { default: null }
   },
   data: () => ({
-    docEventListenersHandlers: []
+    docEventListenersHandlers: [],
+    openTimeout: null
   }),
   computed: {
     appendToTarget() {
@@ -3646,12 +3672,17 @@ var DetachableMixin = {
     },
     alignment() {
       return ["top", "bottom"].includes(this.position) && this.alignLeft && "left" || ["top", "bottom"].includes(this.position) && this.alignRight && "right" || ["left", "right"].includes(this.position) && this.alignTop && "top" || ["left", "right"].includes(this.position) && this.alignBottom && "bottom" || "";
+    },
+    shouldShowOnClick() {
+      return this.$options.props.showOnHover && !this.showOnHover || this.$options.props.showOnClick && this.showOnClick;
     }
   },
   methods: {
     async open(e) {
       if (this.delay)
-        await new Promise((resolve) => setTimeout(resolve, this.delay));
+        await new Promise((resolve) => this.openTimeout = setTimeout(resolve, this.delay));
+      if (this.delay && !this.openTimeout)
+        return;
       this.detachableVisible = true;
       if (this.activator)
         this.activatorEl = e.target;
@@ -3793,15 +3824,17 @@ var DetachableMixin = {
         if (this.activator)
           this.bindActivatorEvents();
         if (this.value)
-          this.toggle({ type: "click", target: this.activatorEl });
+          this.open({ target: this.activatorEl });
       });
     }
     if (this.overlay) {
       this.overlayEl = (_a = this.$refs.overlay) == null ? void 0 : _a.$el;
       wrapper.parentNode.insertBefore(this.overlayEl, wrapper);
     }
-    if (this.value && this.activator)
-      this.toggle({ type: "click", target: this.activatorEl });
+    if (this.value && this.activator) {
+      this.toggle({ type: this.shouldShowOnClick ? "click" : "mouseenter", target: this.activatorEl });
+    } else if (this.value)
+      this.open({ target: this.activatorEl });
   },
   beforeDestroy() {
     var _a;
@@ -3819,8 +3852,12 @@ var DetachableMixin = {
   },
   watch: {
     value(bool) {
-      if (!!bool !== this.detachableVisible)
-        this.toggle({ type: "click", target: this.activatorEl });
+      if (!!bool !== this.detachableVisible) {
+        if (bool)
+          this.open({ target: this.activatorEl });
+        else
+          this.close();
+      }
     },
     appendTo() {
       this.removeFromDOM();
@@ -3875,6 +3912,7 @@ const __vue2_script$u = {
     contentClass: { type: [String, Object, Array] },
     arrow: { type: Boolean },
     minWidth: { type: [Number, String] },
+    maxWidth: { type: [Number, String] },
     overlay: { type: Boolean },
     overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object },
@@ -3912,6 +3950,12 @@ const __vue2_script$u = {
       else
         return isNaN(this.minWidth) ? this.minWidth : this.minWidth ? `${this.minWidth}px` : 0;
     },
+    menuMaxWidth() {
+      if (this.maxWidth === "activator")
+        return this.activatorWidth ? `${this.activatorWidth}px` : 0;
+      else
+        return isNaN(this.maxWidth) ? this.maxWidth : this.maxWidth ? `${this.maxWidth}px` : 0;
+    },
     menuClasses() {
       return objectifyClasses(this.menuClass);
     },
@@ -3948,7 +3992,8 @@ const __vue2_script$u = {
         top: this.detachableCoords.top && `${~~this.detachableCoords.top}px` || null,
         left: this.detachableCoords.left && `${~~this.detachableCoords.left}px` || null,
         minWidth: this.minWidth && this.menuMinWidth || null,
-        "--w-menu-bg-color": this.arrow && this.$waveui.colors[this.bgColor || "white"]
+        maxWidth: this.maxWidth && this.menuMaxWidth || null,
+        "--w-menu-bg-color": this.arrow && (this.$waveui.colors[this.bgColor] || "rgb(var(--w-base-bg-color-rgb))")
       };
     },
     activatorEventHandlers() {
@@ -3998,6 +4043,7 @@ const __vue2_script$u = {
         this.close();
     },
     async close(force = false) {
+      this.openTimeout = clearTimeout(this.openTimeout);
       if (!this.detachableVisible)
         return;
       if (this.showOnHover && !force) {
@@ -4965,23 +5011,23 @@ var render$l = function() {
   var _c = _vm._self._c || _h;
   return _c(_vm.formRegister ? "w-form-element" : "div", _vm._b({ ref: "formEl", tag: "component", class: _vm.classes, attrs: { "valid": _vm.valid, "wrap": _vm.hasLabel && _vm.labelPosition !== "inside" }, on: { "update:valid": function($event) {
     _vm.valid = $event;
-  }, "reset": _vm.onReset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.selectionString, disabled: _vm.isDisabled, readonly: _vm.isReadonly, isFocused: _vm.isFocused }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
+  }, "reset": _vm.onReset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.selectionString, disabled: _vm.isDisabled, readonly: _vm.isReadonly, isFocused: _vm.isFocused }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", class: _vm.labelClasses, on: { "click": function($event) {
+    return _vm.$refs["selection-input"].click();
+  } } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
-  })], 2) : _vm._e()] : _vm._e(), _c("w-menu", _vm._b({ attrs: { "menu-class": "w-select__menu " + (_vm.menuClass || ""), "transition": "slide-fade-down", "append-to": (_vm.menuProps || {}).appendTo !== void 0 ? (_vm.menuProps || {}).appendTo : void 0, "align-left": "", "custom": "", "min-width": "activator" }, on: { "close": function($event) {
-    !$event && _vm.closeMenu();
-  } }, scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
+  })], 2) : _vm._e()] : _vm._e(), _c("w-menu", _vm._b({ attrs: { "menu-class": "w-select__menu " + (_vm.menuClass || ""), "transition": "slide-fade-down", "append-to": (_vm.menuProps || {}).appendTo !== void 0 ? (_vm.menuProps || {}).appendTo : void 0, "align-left": "", "custom": "", "min-width": "activator" }, on: { "close": _vm.closeMenu }, scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
     ref.on;
     return [_c("div", { staticClass: "w-select__selection-wrap", class: _vm.inputWrapClasses, attrs: { "role": "button", "aria-haspopup": "listbox", "aria-expanded": _vm.showMenu ? "true" : "false", "aria-owns": "w-select-menu--" + _vm._uid, "aria-activedescendant": "w-select-menu--" + _vm._uid + "_item-1" }, on: { "click": function($event) {
       !_vm.isDisabled && !_vm.isReadonly && _vm.onInputFieldClick();
     } } }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-select__icon w-select__icon--inner-left", attrs: { "tag": "label" }, on: { "click": function($event) {
       return _vm.$emit("click:inner-icon-left", $event);
-    } } }, [_vm._v(_vm._s(_vm.innerIconLeft))]) : _vm._e(), _vm.$scopedSlots.selection ? _c("div", { staticClass: "w-select__selection-slot" }, [_vm._t("selection", null, { "item": _vm.multiple ? _vm.inputValue : _vm.inputValue[0] })], 2) : _vm._e(), _c("div", { ref: "selection-input", staticClass: "w-select__selection", class: { "w-select__selection--placeholder": !_vm.$scopedSlots.selection && !_vm.selectionString && _vm.placeholder }, attrs: { "contenteditable": _vm.isDisabled || _vm.isReadonly ? "false" : "true", "id": "w-select--" + _vm._uid, "disabled": _vm.isDisabled || null, "readonly": "", "aria-readonly": "true", "tabindex": _vm.tabindex || null }, domProps: { "innerHTML": _vm._s((_vm.$scopedSlots.selection ? "" : _vm.selectionString) || _vm.placeholder) }, on: { "focus": function($event) {
+    } } }, [_vm._v(_vm._s(_vm.innerIconLeft))]) : _vm._e(), _vm.$scopedSlots.selection ? _c("div", { staticClass: "w-select__selection-slot" }, [_vm._t("selection", null, { "item": _vm.multiple ? _vm.inputValue : _vm.inputValue[0] })], 2) : _vm._e(), _c("div", { ref: "selection-input", staticClass: "w-select__selection", class: { "w-select__selection--placeholder": !_vm.$scopedSlots.selection && !_vm.selectionString && _vm.placeholder }, attrs: { "contenteditable": _vm.isDisabled || _vm.isReadonly ? "false" : "true", "disabled": _vm.isDisabled || null, "readonly": "", "aria-readonly": "true", "tabindex": _vm.tabindex || null }, domProps: { "innerHTML": _vm._s((_vm.$scopedSlots.selection ? "" : _vm.selectionString) || _vm.placeholder) }, on: { "focus": function($event) {
       !_vm.isDisabled && !_vm.isReadonly && _vm.onFocus($event);
     }, "blur": _vm.onBlur, "keydown": function($event) {
       !_vm.isDisabled && !_vm.isReadonly && _vm.onKeydown($event);
     } } }), _vm._l(_vm.inputValue.length ? _vm.inputValue : [{}], function(val, i) {
       return _c("input", { key: i, attrs: { "type": "hidden", "name": _vm.inputName + (_vm.multiple ? "[]" : "") }, domProps: { "value": val.value === void 0 ? "" : val.value.toString() } });
-    }), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--inside w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
+    }), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--inside w-form-el-shakable", class: _vm.labelClasses }, [_vm._t("default", function() {
       return [_vm._v(_vm._s(_vm.label))];
     })], 2) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-select__icon w-select__icon--inner-right", attrs: { "tag": "label" }, on: { "click": function($event) {
       return _vm.$emit("click:inner-icon-right", $event);
@@ -4993,7 +5039,7 @@ var render$l = function() {
   }, "item-select": _vm.onListItemSelect, "keydown:enter": function($event) {
     _vm.noUnselect && !_vm.multiple && _vm.closeMenu();
   }, "keydown:escape": function($event) {
-    _vm.showMenu && (this.showMenu = false);
+    _vm.showMenu && (_vm.showMenu = false);
   } }, scopedSlots: _vm._u([_vm._l(_vm.items.length, function(i) {
     return { key: "item." + i, fn: function(ref) {
       var item = ref.item;
@@ -5010,7 +5056,9 @@ var render$l = function() {
     return [_vm._t("item", function() {
       return [_vm._v(_vm._s(item[_vm.itemLabelKey]))];
     }, { "item": item, "selected": selected, "index": index2 })];
-  } }], null, true) })], 1), _vm.labelPosition === "right" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
+  } }], null, true) })], 1), _vm.labelPosition === "right" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--right w-form-el-shakable", class: _vm.labelClasses, on: { "click": function($event) {
+    return _vm.$refs["selection-input"].click();
+  } } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
   })], 2) : _vm._e()] : _vm._e()], 2);
 };
@@ -5131,7 +5179,7 @@ const __vue2_script$l = {
         e.preventDefault();
       if (e.keyCode === 27 && this.showMenu)
         this.closeMenu();
-      else if (e.keyCode === 13)
+      else if ([13, 32].includes(e.keyCode))
         this.openMenu();
       else if ([38, 40].includes(e.keyCode)) {
         if (this.multiple)
@@ -5145,7 +5193,22 @@ const __vue2_script$l = {
             const direction = e.keyCode === 38 ? -1 : 1;
             index2 = (index2 + items.length + direction) % items.length;
           }
-          this.onInput(items[index2]);
+          let allItemsAreDisabled = false;
+          if (items[index2].disabled) {
+            const direction = e.keyCode === 38 ? -1 : 1;
+            let newIndex = (index2 + direction + items.length) % items.length;
+            const itemsCount = items.length;
+            let loop = 0;
+            while (loop < itemsCount && items[newIndex].disabled) {
+              newIndex = (newIndex + items.length + direction) % items.length;
+              loop++;
+            }
+            if (loop >= itemsCount)
+              allItemsAreDisabled = true;
+            index2 = newIndex;
+          }
+          if (!allItemsAreDisabled)
+            this.onInput(items[index2]);
         }
       }
     },
@@ -5178,7 +5241,7 @@ const __vue2_script$l = {
       const allValues = this.selectItems.map((item) => item.value);
       return items.map((item) => {
         let value = item;
-        if (typeof item === "object") {
+        if (item && typeof item === "object") {
           value = item[this.itemValueKey] !== void 0 ? item[this.itemValueKey] : item[this.itemLabelKey] !== void 0 ? item[this.itemLabelKey] : item;
         }
         return this.selectItems[allValues.indexOf(value)];
@@ -6860,7 +6923,14 @@ const __vue2_script$9 = {
     transition: { type: String },
     tooltipClass: { type: [String, Object, Array] },
     persistent: { type: Boolean },
-    delay: { type: Number }
+    delay: { type: Number },
+    caption: { type: Boolean },
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean },
+    enableTouch: { type: Boolean }
   },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
@@ -6881,6 +6951,9 @@ const __vue2_script$9 = {
       const direction = this.position.replace(/top|bottom/, (m) => ({ top: "up", bottom: "down" })[m]);
       return this.transition || `w-tooltip-slide-fade-${direction}`;
     },
+    size() {
+      return this.xs && "xs" || this.sm && "sm" || this.sm && "md" || this.lg && "lg" || this.xl && "xl" || (this.caption ? "sm" : "md");
+    },
     classes() {
       return {
         [this.color]: this.color,
@@ -6890,6 +6963,8 @@ const __vue2_script$9 = {
         [`w-tooltip--align-${this.alignment}`]: !this.noPosition && this.alignment,
         "w-tooltip--tile": this.tile,
         "w-tooltip--round": this.round,
+        caption: this.caption,
+        [`size--${this.size}`]: true,
         "w-tooltip--shadow": this.shadow,
         "w-tooltip--fixed": this.fixed,
         "w-tooltip--no-border": this.noBorder || this.bgColor,
@@ -6901,17 +6976,16 @@ const __vue2_script$9 = {
         zIndex: this.zIndex || this.zIndex === 0 || null,
         top: this.detachableCoords.top && `${~~this.detachableCoords.top}px` || null,
         left: this.detachableCoords.left && `${~~this.detachableCoords.left}px` || null,
-        "--w-tooltip-bg-color": this.$waveui.colors[this.bgColor || "white"]
+        "--w-tooltip-bg-color": this.$waveui.colors[this.bgColor] || "rgb(var(--w-base-bg-color-rgb))"
       };
     },
     activatorEventHandlers() {
       let handlers = {};
-      if (this.showOnClick)
-        handlers = { click: this.toggle };
-      else {
+      const isTouchDevice = typeof window !== "undefined" && "ontouchstart" in window;
+      if (!this.showOnClick && !isTouchDevice) {
         handlers = {
-          focus: this.toggle,
-          blur: this.toggle,
+          focus: this.open,
+          blur: this.close,
           mouseenter: (e) => {
             this.hoveringActivator = true;
             this.open(e);
@@ -6921,9 +6995,8 @@ const __vue2_script$9 = {
             this.close();
           }
         };
-        if (typeof window !== "undefined" && "ontouchstart" in window)
-          handlers.click = this.toggle;
-      }
+      } else if (this.enableTouch || this.showOnClick)
+        handlers = { click: this.toggle };
       return handlers;
     }
   },
@@ -6931,7 +7004,9 @@ const __vue2_script$9 = {
     toggle(e) {
       let shouldShowTooltip = this.detachableVisible;
       if (typeof window !== "undefined" && "ontouchstart" in window) {
-        if (e.type === "click")
+        if (!this.enableTouch && !this.showOnClick)
+          shouldShowTooltip = false;
+        else
           shouldShowTooltip = !shouldShowTooltip;
       } else if (e.type === "click" && this.showOnClick)
         shouldShowTooltip = !shouldShowTooltip;