wave-ui 2.28.1 → 2.29.0

package/dist/wave-ui.es.js

@@ -525,7 +525,7 @@ function render$O(_ctx, _cache, $props, $setup, $data, $options) {
         }, [
           $props.expandIcon && !$props.expandIconRight ? (openBlock(), createBlock(_component_w_button, {
             key: 0,
-            class: "w-accordion__expand-icon",
+            class: normalizeClass(["w-accordion__expand-icon", { "w-accordion__expand-icon--expanded": item._expanded }]),
             icon: item._expanded && $props.collapseIcon || $props.expandIcon,
             disabled: item._disabled || null,
             tabindex: -1,
@@ -533,7 +533,7 @@ function render$O(_ctx, _cache, $props, $setup, $data, $options) {
             onKeypress: _cache[0] || (_cache[0] = withModifiers(() => {
             }, ["stop"])),
             onClick: withModifiers(($event) => !item._disabled && $options.toggleItem(item, $event), ["stop"])
-          }, null, 8, ["icon", "disabled", "onClick"])) : createCommentVNode("", true),
+          }, null, 8, ["icon", "disabled", "onClick", "class"])) : createCommentVNode("", true),
           _ctx.$slots[`item-title.${item.id || i + 1}`] ? renderSlot(_ctx.$slots, `item-title.${item.id || i + 1}`, {
             key: 1,
             item: $options.getOriginalItem(item),
@@ -552,13 +552,13 @@ function render$O(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           $props.expandIcon && $props.expandIconRight ? (openBlock(), createBlock(_component_w_button, {
             key: 3,
-            class: "w-accordion__expand-icon",
+            class: normalizeClass(["w-accordion__expand-icon", { "w-accordion__expand-icon--expanded": item._expanded }]),
             icon: item._expanded && $props.collapseIcon || $props.expandIcon,
             text: "",
             onKeypress: _cache[1] || (_cache[1] = withModifiers(() => {
             }, ["stop"])),
             onClick: withModifiers(($event) => !item._disabled && $options.toggleItem(item, $event), ["stop"])
-          }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
+          }, null, 8, ["icon", "onClick", "class"])) : createCommentVNode("", true)
         ], 42, _hoisted_2$f),
         createVNode(_component_w_transition_expand, { y: "" }, {
           default: withCtx(() => [
@@ -591,10 +591,11 @@ function render$O(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var wAccordion_vue_vue_type_style_index_0_lang = "";
 var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
-    sfc[key] = val;
+    target[key] = val;
   }
-  return sfc;
+  return target;
 };
 const _sfc_main$O = {
   name: "w-accordion",
@@ -991,7 +992,7 @@ const _sfc_main$L = {
     classes() {
       return {
         "d-block": this.block,
-        "row": this.row,
+        row: this.row,
         "align-center": this.alignCenter,
         "align-end": this.alignEnd,
         "justify-center": this.justifyCenter,
@@ -1365,7 +1366,7 @@ var wButton = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", render$I]]);
 const objectifyClasses = (classes = {}) => {
   if (typeof classes === "string")
     classes = { [classes]: true };
-  else if (typeof classes === "array")
+  else if (Array.isArray(classes))
     classes = { [classes.join(" ")]: true };
   return classes;
 };
@@ -2283,6 +2284,7 @@ const _sfc_main$z = {
     justifyEnd: { type: Boolean },
     justifySpaceBetween: { type: Boolean },
     justifySpaceAround: { type: Boolean },
+    justifySpaceEvenly: { type: Boolean },
     basisZero: { type: Boolean },
     gap: { type: Number, default: 0 }
   },
@@ -2304,6 +2306,7 @@ const _sfc_main$z = {
         "justify-end": this.justifyEnd,
         "justify-space-between": this.justifySpaceBetween,
         "justify-space-around": this.justifySpaceAround,
+        "justify-space-evenly": this.justifySpaceEvenly,
         "basis-zero": this.basisZero,
         [`w-flex--gap${this.gap}`]: this.gap
       };
@@ -2889,6 +2892,7 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
           $props.type !== "file" ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
             key: 1,
             class: "w-input__input",
+            ref: "input",
             "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.inputValue = $event)
           }, toHandlers($options.listeners), {
             onInput: _cache[3] || (_cache[3] = (...args) => $options.onInput && $options.onInput(...args)),
@@ -2910,9 +2914,9 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
             tabindex: _ctx.tabindex || null
           }, $options.attrs), null, 16, _hoisted_4$8)), [
             [vModelDynamic, $data.inputValue]
-          ]) : createCommentVNode("", true),
-          $props.type === "file" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          ]) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
             createElementVNode("input", mergeProps({
+              ref: "input",
               id: `w-input--${_ctx._.uid}`,
               type: "file",
               name: _ctx.name || null,
@@ -2950,7 +2954,7 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 3
             }, 8, ["for"])
-          ], 64)) : createCommentVNode("", true),
+          ], 64)),
           $props.labelPosition === "inside" && $options.showLabelInside ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
             _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
               key: 0,
@@ -3062,7 +3066,8 @@ const _sfc_main$u = {
       inputNumberError: false,
       isFocused: false,
       inputFiles: [],
-      fileReader: null
+      fileReader: null,
+      isAutofilled: false
     };
   },
   computed: {
@@ -3079,7 +3084,7 @@ const _sfc_main$u = {
       return htmlAttrs;
     },
     hasValue() {
-      return this.inputValue || ["date", "time"].includes(this.type) || this.type === "number" && this.inputNumberError || this.type === "file" && this.inputFiles.length;
+      return this.inputValue || this.inputValue === 0 || ["date", "time"].includes(this.type) || this.type === "number" && this.inputNumberError || this.type === "file" && this.inputFiles.length;
     },
     hasLabel() {
       return this.label || this.$slots.default;
@@ -3093,7 +3098,7 @@ const _sfc_main$u = {
         "w-input--file": this.type === "file",
         "w-input--disabled": this.isDisabled,
         "w-input--readonly": this.isReadonly,
-        [`w-input--${this.hasValue ? "filled" : "empty"}`]: true,
+        [`w-input--${this.hasValue || this.isAutofilled ? "filled" : "empty"}`]: true,
         "w-input--focused": this.isFocused && !this.isReadonly,
         "w-input--dark": this.dark,
         "w-input--floating-label": this.hasLabel && this.labelPosition === "inside" && !this.staticLabel,
@@ -3164,9 +3169,17 @@ const _sfc_main$u = {
       reader.readAsDataURL(original);
     }
   },
+  mounted() {
+    setTimeout(() => {
+      if (this.$refs.input.matches(":-webkit-autofill"))
+        this.isAutofilled = true;
+    }, 400);
+  },
   watch: {
     modelValue(value) {
       this.inputValue = value;
+      if (!value && value !== 0)
+        this.isAutofilled = false;
     }
   }
 };
@@ -3627,20 +3640,21 @@ const _sfc_main$s = {
       return this.transition || "scale-fade";
     },
     detachToTarget() {
-      let target = this.detachTo || ".w-app";
+      const defaultTarget = ".w-app";
+      let target = this.detachTo || defaultTarget;
       if (target === true)
-        target = ".w-app";
+        target = defaultTarget;
       else if (target && !["object", "string"].includes(typeof target))
-        target = ".w-app";
+        target = defaultTarget;
       else if (typeof target === "object" && !target.nodeType) {
-        target = ".w-app";
+        target = defaultTarget;
         consoleWarn("Invalid node provided in w-menu `detach-to`. Falling back to .w-app.");
       }
       if (typeof target === "string")
         target = document.querySelector(target);
       if (!target) {
-        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : ".w-app"}`);
-        target = document.querySelector(".w-app");
+        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : defaultTarget}`);
+        target = document.querySelector(defaultTarget);
       }
       return target;
     },
@@ -3713,8 +3727,9 @@ const _sfc_main$s = {
             }, 10);
           }
         };
-        if ("ontouchstart" in window)
+        if (typeof window !== "undefined" && "ontouchstart" in window) {
           handlers.click = this.toggleMenu;
+        }
       } else
         handlers = { click: this.toggleMenu };
       return handlers;
@@ -6500,7 +6515,7 @@ const _sfc_main$b = {
       return listeners;
     },
     hasValue() {
-      return this.inputValue;
+      return this.inputValue || this.inputValue === 0;
     },
     hasLabel() {
       return this.label || this.$slots.default;
@@ -6698,8 +6713,7 @@ const _sfc_main$9 = {
 var wToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", render$9]]);
 function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["w-tooltip-wrap", { "w-tooltip-wrap--attached": !$props.detachTo }]),
-    ref: "wrapper"
+    class: normalizeClass(["w-tooltip-wrap", { "w-tooltip-wrap--attached": !$props.detachTo }])
   }, [
     renderSlot(_ctx.$slots, "activator", { on: $options.eventHandlers }),
     createVNode(Transition, {
@@ -6713,12 +6727,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
           key: _ctx._.uid,
           style: normalizeStyle($options.styles)
         }, [
-          $props.bgColor ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass($props.color)
-          }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 2)) : renderSlot(_ctx.$slots, "default", { key: 1 })
+          renderSlot(_ctx.$slots, "default")
         ], 6)), [
           [vShow, _ctx.showTooltip]
         ])
@@ -6772,25 +6781,26 @@ const _sfc_main$8 = {
       return this.transition || `w-tooltip-slide-fade-${direction}`;
     },
     detachToTarget() {
-      let target = this.detachTo || ".w-app";
+      const defaultTarget = ".w-app";
+      let target = this.detachTo || defaultTarget;
       if (target === true)
-        target = ".w-app";
+        target = defaultTarget;
       else if (target && !["object", "string"].includes(typeof target))
-        target = ".w-app";
+        target = defaultTarget;
       else if (typeof target === "object" && !target.nodeType) {
-        target = ".w-app";
+        target = defaultTarget;
         consoleWarn("Invalid node provided in w-tooltip `attach-to`. Falling back to .w-app.");
       }
       if (typeof target === "string")
         target = document.querySelector(target);
       if (!target) {
-        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : ".w-app"}`);
-        target = document.querySelector(".w-app");
+        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : defaultTarget}`);
+        target = document.querySelector(defaultTarget);
       }
       return target;
     },
     tooltipParentEl() {
-      return this.detachTo ? this.detachToTarget : this.$refs.wrapper;
+      return this.detachTo ? this.detachToTarget : this.$el;
     },
     position() {
       return this.top && "top" || this.bottom && "bottom" || this.left && "left" || this.right && "right" || "bottom";
@@ -6824,8 +6834,8 @@ const _sfc_main$8 = {
     },
     classes() {
       return __spreadProps(__spreadValues({
-        [this.color]: !this.bgColor,
-        [`${this.bgColor} ${this.bgColor}--bg`]: this.bgColor
+        [this.color]: this.color,
+        [`${this.bgColor}--bg`]: this.bgColor
       }, this.tooltipClasses), {
         [`w-tooltip--${this.position}`]: true,
         "w-tooltip--tile": this.tile,
@@ -6840,8 +6850,9 @@ const _sfc_main$8 = {
     styles() {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || null,
-        top: `${~~this.tooltipCoordinates.top}px`,
-        left: `${~~this.tooltipCoordinates.left}px`
+        top: this.tooltipCoordinates.top && `${~~this.tooltipCoordinates.top}px` || null,
+        left: this.tooltipCoordinates.left && `${~~this.tooltipCoordinates.left}px` || null,
+        "--w-tooltip-bg-color": this.$waveui.colors[this.bgColor || "white"]
       };
     },
     eventHandlers() {
@@ -6855,7 +6866,7 @@ const _sfc_main$8 = {
           mouseenter: this.toggle,
           mouseleave: this.toggle
         };
-        if ("ontouchstart" in window)
+        if (typeof window !== "undefined" && "ontouchstart" in window)
           handlers.click = this.toggle;
       }
       return handlers;
@@ -6864,7 +6875,7 @@ const _sfc_main$8 = {
   methods: {
     toggle(e) {
       let shouldShowTooltip = this.showTooltip;
-      if ("ontouchstart" in window) {
+      if (typeof window !== "undefined" && "ontouchstart" in window) {
         if (e.type === "click")
           shouldShowTooltip = !shouldShowTooltip;
       } else if (e.type === "click" && this.showOnClick)
@@ -6928,7 +6939,7 @@ const _sfc_main$8 = {
       return coords;
     },
     insertTooltip() {
-      const wrapper = this.$refs.wrapper;
+      const wrapper = this.$el;
       wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
       this.detachToTarget.appendChild(this.tooltipEl);
     },
@@ -6938,7 +6949,7 @@ const _sfc_main$8 = {
     }
   },
   mounted() {
-    this.activatorEl = this.$refs.wrapper.firstElementChild;
+    this.activatorEl = this.$el.firstElementChild;
     if (this.detachTo)
       this.insertTooltip();
     if (this.modelValue)