wave-ui 2.40.3 → 2.41.0

package/dist/wave-ui.es.js

@@ -1,34 +1,5 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -92,16 +63,17 @@ const _NotificationManager$1 = class {
     };
   }
   notify(...args) {
-    let notification = __spreadProps(__spreadValues({}, this._notificationDefaults), { _uid: this._uid++ });
+    let notification = { ...this._notificationDefaults, _uid: this._uid++ };
     if (typeof args[0] === "object")
-      notification = __spreadValues(__spreadValues({}, notification), args[0]);
+      notification = { ...notification, ...args[0] };
     else {
       const [message, type, timeout] = args;
-      notification = __spreadProps(__spreadValues({}, notification), {
+      notification = {
+        ...notification,
         message: message || "",
         [type === void 0 ? "info" : type]: true,
         timeout: timeout || timeout === 0 ? parseFloat(timeout) : 4e3
-      });
+      };
     }
     this.notifications.push(notification);
     if (~~notification.timeout !== 0)
@@ -437,7 +409,7 @@ const _WaveUI = class {
       obj[color.label] = color.color;
       color.shades.forEach((shade) => obj[shade.label] = shade.color);
       return obj;
-    }, __spreadProps(__spreadValues({}, config.colors), { black: "#000", white: "#fff", transparent: "transparent", inherit: "inherit" })));
+    }, { ...config.colors, black: "#000", white: "#fff", transparent: "transparent", inherit: "inherit" }));
     __publicField(this, "config", {});
     if (_WaveUI.instance)
       return _WaveUI.instance;
@@ -465,6 +437,7 @@ const _WaveUI = class {
         }
       }
       this.config = config;
+      this.notify = (...args) => notificationManager.notify(...args);
       _WaveUI.instance = this;
       app.config.globalProperties.$waveui = reactive(this);
     }
@@ -662,7 +635,8 @@ const _sfc_main$P = {
     },
     updateItems() {
       const items = typeof this.items === "number" ? Array(this.items).fill({}) : this.items || [];
-      this.accordionItems = items.map((item, _index) => __spreadProps(__spreadValues({}, item), {
+      this.accordionItems = items.map((item, _index) => ({
+        ...item,
         _index,
         _expanded: this.modelValue && this.modelValue[_index],
         _disabled: !!item.disabled
@@ -853,7 +827,7 @@ const _sfc_main$N = {
   },
   methods: {
     notifProps(notif) {
-      const _a = notif, { _value, _uid, message, timeout } = _a, props = __objRest(_a, ["_value", "_uid", "message", "timeout"]);
+      const { _value, _uid, message, timeout, ...props } = notif;
       return props;
     }
   },
@@ -873,7 +847,7 @@ const cssVars = {
 const generateColors = (config2) => {
   let styles = "";
   const { cssScope } = cssVars;
-  const _a = config2.colors, { info, warning, success, error } = _a, colors2 = __objRest(_a, ["info", "warning", "success", "error"]);
+  const { info, warning, success, error, ...colors2 } = config2.colors;
   for (const color in colors2) {
     styles += `${cssScope} .${color}--bg{background-color:${config2.colors[color]}}${cssScope} .${color}{color:${config2.colors[color]}}`;
   }
@@ -1336,7 +1310,8 @@ const _sfc_main$J = {
       return this.hasRouter ? this.$router.resolve(this.route).href : this.route;
     },
     listeners() {
-      return this.route && this.hasRouter && !this.forceLink && !this.externalLink ? __spreadProps(__spreadValues({}, this.$attrs), {
+      return this.route && this.hasRouter && !this.forceLink && !this.externalLink ? {
+        ...this.$attrs,
         click: (e) => {
           if (this.$attrs.click)
             this.$attrs.click(e);
@@ -1344,7 +1319,7 @@ const _sfc_main$J = {
           e.stopPropagation();
           e.preventDefault();
         }
-      }) : this.$attrs;
+      } : this.$attrs;
     },
     size() {
       return this.xs && "xs" || this.sm && "sm" || this.lg && "lg" || this.xl && "xl" || "md";
@@ -1402,7 +1377,7 @@ function render$I(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     _ctx.$slots.title || $props.title ? (openBlock(), createElementBlock("div", {
       key: 0,
-      class: normalizeClass(["w-card__title", __spreadValues({ "w-card__title--has-toolbar": _ctx.$slots.title && $options.titleHasToolbar }, $options.titleClasses)])
+      class: normalizeClass(["w-card__title", { "w-card__title--has-toolbar": _ctx.$slots.title && $options.titleHasToolbar, ...$options.titleClasses }])
     }, [
       renderSlot(_ctx.$slots, "title", {}, () => [
         createTextVNode(toDisplayString($props.title), 1)
@@ -1463,10 +1438,11 @@ const _sfc_main$I = {
       return actions && actions().map((vnode) => vnode.type.name).join("").includes("w-toolbar");
     },
     imgProps() {
-      return __spreadValues({
+      return {
         tag: "div",
-        ratio: 1 / 2
-      }, this.imageProps);
+        ratio: 1 / 2,
+        ...this.imageProps
+      };
     },
     classes() {
       return {
@@ -1733,13 +1709,14 @@ const _sfc_main$G = {
     checkboxItems() {
       return (this.items || []).map((item, i) => {
         const itemValue = item[this.itemValueKey] === void 0 ? item[this.itemLabelKey] || i : item[this.itemValueKey];
-        return reactive(__spreadProps(__spreadValues({}, item), {
+        return reactive({
+          ...item,
           label: item[this.itemLabelKey],
           _index: i,
           value: itemValue,
           color: item[this.itemColorKey] || this.color,
           _isChecked: this.modelValue && this.modelValue.includes(itemValue)
-        }));
+        });
       });
     },
     classes() {
@@ -1778,7 +1755,7 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = $event)
     }, $options.wMenuProps), {
       activator: withCtx(({ on }) => [
-        createVNode(_component_w_button, mergeProps({ class: "w-confirm__button" }, __spreadValues(__spreadValues(__spreadValues({}, _ctx.$attrs), $options.buttonProps), on)), {
+        createVNode(_component_w_button, mergeProps({ class: "w-confirm__button" }, { ..._ctx.$attrs, ...$options.buttonProps, ...on }), {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
           ]),
@@ -1870,7 +1847,7 @@ const _sfc_main$F = {
       return button;
     },
     cancelButtonProps() {
-      const _a = this.cancelButton, { label } = _a, props = __objRest(_a, ["label"]);
+      const { label, ...props } = this.cancelButton;
       return props;
     },
     confirmButton() {
@@ -1880,11 +1857,11 @@ const _sfc_main$F = {
       return button;
     },
     confirmButtonProps() {
-      const _a = this.confirmButton, { label } = _a, props = __objRest(_a, ["label"]);
+      const { label, ...props } = this.confirmButton;
       return props;
     },
     wMenuProps() {
-      return __spreadValues({
+      return {
         top: this.top,
         bottom: this.bottom,
         left: this.left,
@@ -1895,15 +1872,17 @@ const _sfc_main$F = {
         alignLeft: this.alignLeft,
         alignRight: this.alignRight,
         persistent: this.persistent,
-        transition: this.transition
-      }, this.menu);
+        transition: this.transition,
+        ...this.menu
+      };
     },
     buttonProps() {
-      return __spreadValues({
+      return {
         bgColor: this.bgColor,
         color: this.color,
-        icon: this.icon
-      }, this.mainButton);
+        icon: this.icon,
+        ...this.mainButton
+      };
     }
   },
   methods: {
@@ -2667,7 +2646,10 @@ const _sfc_main$x = {
           return obj;
         }, {});
       }
-      return __spreadValues(__spreadValues({}, breakpointsColumns || { [`columns${this.columns}`]: this.columns }), breakpointsGap || { [`gap${this.gap}`]: this.gap });
+      return {
+        ...breakpointsColumns || { [`columns${this.columns}`]: this.columns },
+        ...breakpointsGap || { [`gap${this.gap}`]: this.gap }
+      };
     }
   }
 };
@@ -3178,15 +3160,15 @@ const _sfc_main$u = {
   },
   computed: {
     attrs() {
-      const _a = this.$attrs, { class: classes } = _a, attrs = __objRest(_a, ["class"]);
+      const { class: classes, ...attrs } = this.$attrs;
       return attrs;
     },
     listeners() {
-      const _a = this.$attrs, { input, focus, blur } = _a, listeners = __objRest(_a, ["input", "focus", "blur"]);
+      const { input, focus, blur, ...listeners } = this.$attrs;
       return listeners;
     },
     attrs() {
-      const _a = this.$attrs, { class: Class } = _a, htmlAttrs = __objRest(_a, ["class"]);
+      const { class: Class, ...htmlAttrs } = this.$attrs;
       return htmlAttrs;
     },
     hasValue() {
@@ -3602,7 +3584,7 @@ const _sfc_main$t = {
       const items = this.selectedItems.map((item) => {
         if (!this.returnObject)
           return item._value;
-        const _a = item, { _value, _selected } = _a, Item = __objRest(_a, ["_value", "_selected"]);
+        const { _value, _selected, ...Item } = item;
         return Item;
       });
       const selection = this.isMultipleSelect ? items : items[0] !== void 0 ? items[0] : null;
@@ -3617,12 +3599,13 @@ const _sfc_main$t = {
       this.$el.querySelector(`#${this.listId}_item-${index2 + 1}`).focus();
     },
     cleanLi(li) {
-      const _a = li, { _index, _value, _label, _selected, _focused } = _a, cleanLi = __objRest(_a, ["_index", "_value", "_label", "_selected", "_focused"]);
+      const { _index, _value, _label, _selected, _focused, ...cleanLi } = li;
       return cleanLi;
     },
     refreshListItems() {
       const items = typeof this.items === "number" ? Array(this.items).fill({}) : this.items || [];
-      this.listItems = items.map((item, i) => __spreadProps(__spreadValues({}, item), {
+      this.listItems = items.map((item, i) => ({
+        ...item,
         _index: i,
         _value: item[this.itemValueKey] === void 0 ? item[this.itemLabelKey] || i : item[this.itemValueKey],
         _selected: item._selected || false,
@@ -3770,10 +3753,11 @@ var DetachableMixin = {
       if (!this.fixed) {
         const { top: targetTop, left: targetLeft } = this.detachableParentEl.getBoundingClientRect();
         const computedStyles = window.getComputedStyle(this.detachableParentEl, null);
-        coords = __spreadProps(__spreadValues({}, coords), {
+        coords = {
+          ...coords,
           top: top - targetTop + this.detachableParentEl.scrollTop - parseInt(computedStyles.getPropertyValue("border-top-width")),
           left: left - targetLeft + this.detachableParentEl.scrollLeft - parseInt(computedStyles.getPropertyValue("border-left-width"))
-        });
+        };
       }
       return coords;
     },
@@ -4050,15 +4034,16 @@ const _sfc_main$s = {
       return objectifyClasses(this.contentClass);
     },
     overlayClasses() {
-      return __spreadProps(__spreadValues({}, objectifyClasses(this.overlayClass)), {
+      return {
+        ...objectifyClasses(this.overlayClass),
         "w-overlay--no-pointer-event": this.showOnHover
-      });
+      };
     },
     classes() {
-      return __spreadProps(__spreadValues({
+      return {
         [this.color]: this.color,
-        [`${this.bgColor}--bg`]: this.bgColor
-      }, this.menuClasses), {
+        [`${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,
@@ -4067,7 +4052,7 @@ const _sfc_main$s = {
         "w-menu--arrow": this.arrow,
         "w-menu--shadow": this.shadow,
         "w-menu--fixed": this.fixed
-      });
+      };
     },
     styles() {
       return {
@@ -4742,7 +4727,8 @@ const _sfc_main$m = {
   }),
   computed: {
     radioItems() {
-      return (this.items || []).map((item, i) => __spreadProps(__spreadValues({}, item), {
+      return (this.items || []).map((item, i) => ({
+        ...item,
         _index: i,
         label: item[this.itemLabelKey],
         value: item[this.itemValueKey] === void 0 ? item[this.itemLabelKey] || i : item[this.itemValueKey],
@@ -5147,7 +5133,7 @@ const _sfc_main$k = {
   computed: {
     selectItems() {
       return this.items.map((item, i) => {
-        const obj = __spreadValues({}, item);
+        const obj = { ...item };
         obj.value = obj[this.itemValueKey] === void 0 ? obj[this.itemLabelKey] || i : obj[this.itemValueKey];
         obj.index = i;
         return obj;
@@ -5163,7 +5149,9 @@ const _sfc_main$k = {
       return !this.staticLabel || !this.hasValue && !this.placeholder;
     },
     selectionString() {
-      return this.inputValue && this.inputValue.map((item) => item[this.itemValueKey] !== void 0 ? item[this.itemLabelKey] : item[this.itemLabelKey] !== void 0 ? item[this.itemLabelKey] : item).join(", ");
+      return this.inputValue && this.inputValue.map(
+        (item) => item[this.itemValueKey] !== void 0 ? item[this.itemLabelKey] : item[this.itemLabelKey] !== void 0 ? item[this.itemLabelKey] : item
+      ).join(", ");
     },
     classes() {
       return {
@@ -5943,10 +5931,11 @@ const _sfc_main$e = {
     },
     tabsItems() {
       const items = typeof this.items === "number" ? Array(this.items).fill({}) : this.items;
-      return items.map((item, _index) => reactive(__spreadProps(__spreadValues({}, item), {
+      return items.map((item, _index) => reactive({
+        ...item,
         _index,
         _disabled: !!item.disabled
-      })));
+      }));
     },
     activeTab() {
       return this.tabsItems[this.activeTabIndex] || this.tabsItems[0] || {};
@@ -6215,7 +6204,7 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
               (openBlock(true), createElementBlock(Fragment, null, renderList($props.headers, (header, j) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   _ctx.$slots[`item-cell.${header.key}`] || _ctx.$slots[`item-cell.${j + 1}`] || _ctx.$slots["item-cell"] ? (openBlock(), createElementBlock("td", {
-                    class: normalizeClass(["w-table__cell", `text-${header.align || "left"}`]),
+                    class: normalizeClass(["w-table__cell", { [`text-${header.align || "left"}`]: true, "w-table__cell--sticky": header.sticky }]),
                     key: `${j}-a`,
                     "data-label": header.label
                   }, [
@@ -6243,7 +6232,7 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
                       class: normalizeClass(["w-table__col-resizer", { "w-table__col-resizer--hover": _ctx.colResizing.hover === j, "w-table__col-resizer--active": _ctx.colResizing.columnIndex === j }])
                     }, null, 2)) : createCommentVNode("", true)
                   ], 10, _hoisted_16)) : (openBlock(), createElementBlock("td", {
-                    class: normalizeClass(["w-table__cell", `text-${header.align || "left"}`]),
+                    class: normalizeClass(["w-table__cell", { [`text-${header.align || "left"}`]: true, "w-table__cell--sticky": header.sticky }]),
                     key: `${j}-b`,
                     "data-label": header.label
                   }, [
@@ -6307,6 +6296,7 @@ const _sfc_main$d = {
     items: { type: Array, required: true },
     headers: { type: Array, required: true },
     noHeaders: { type: Boolean },
+    fixedLayout: { type: Boolean },
     fixedHeaders: { type: Boolean },
     fixedFooter: { type: Boolean },
     loading: { type: Boolean },
@@ -6314,7 +6304,9 @@ const _sfc_main$d = {
     expandableRows: {
       validator: (value) => {
         if (![void 0, true, false, 1, "1", ""].includes(value)) {
-          consoleError(`Wrong value for the w-table's \`expandableRows\` prop. Given: "${value}", expected one of: [undefined, true, false, 1, '1', ''].`);
+          consoleError(
+            `Wrong value for the w-table's \`expandableRows\` prop. Given: "${value}", expected one of: [undefined, true, false, 1, '1', ''].`
+          );
         }
         return true;
       }
@@ -6323,7 +6315,9 @@ const _sfc_main$d = {
     selectableRows: {
       validator: (value) => {
         if (![void 0, true, false, 1, "1", ""].includes(value)) {
-          consoleError(`Wrong value for the w-table's \`selectableRows\` prop. Given: "${value}", expected one of: [undefined, true, false, 1, '1', ''].`);
+          consoleError(
+            `Wrong value for the w-table's \`selectableRows\` prop. Given: "${value}", expected one of: [undefined, true, false, 1, '1', ''].`
+          );
         }
         return true;
       }
@@ -6397,16 +6391,21 @@ const _sfc_main$d = {
     },
     classes() {
       return {
+        "w-table--fixed-layout": this.fixedLayout || this.resizableColumns || this.hasStickyColumn,
         "w-table--mobile": this.isMobile || null,
         "w-table--resizable-cols": this.resizableColumns || null,
         "w-table--resizing": this.colResizing.dragging,
         "w-table--fixed-header": this.fixedHeaders,
-        "w-table--fixed-footer": this.fixedFooter
+        "w-table--fixed-footer": this.fixedFooter,
+        "w-table--sticky-column": this.hasStickyColumn
       };
     },
     isMobile() {
       return ~~this.mobileBreakpoint && this.$waveui.breakpoint.width <= ~~this.mobileBreakpoint;
     },
+    hasStickyColumn() {
+      return this.headers.find((header) => header.sticky);
+    },
     selectedRowsByUid() {
       return this.selectedRowsInternal.reduce((obj, uid) => (obj[uid] = true) && obj, {});
     },
@@ -6418,6 +6417,7 @@ const _sfc_main$d = {
     headerClasses(header) {
       return {
         "w-table__header--sortable": header.sortable !== false,
+        "w-table__header--sticky": header.sticky,
         "w-table__header--resizable": !!this.resizableColumns,
         [`text-${header.align || "left"}`]: true
       };
@@ -6451,12 +6451,15 @@ const _sfc_main$d = {
             this.expandedRowsInternal.push(item._uid);
         } else
           this.expandedRowsInternal = this.expandedRowsInternal.filter((uid) => uid !== item._uid);
-        this.$emit("row-expand", {
-          item,
-          index: index2,
-          expanded: isExpanding,
-          expandedRows: this.expandedRowsInternal.map((uid) => this.filteredItems[uid])
-        });
+        this.$emit(
+          "row-expand",
+          {
+            item,
+            index: index2,
+            expanded: isExpanding,
+            expandedRows: this.expandedRowsInternal.map((uid) => this.filteredItems[uid])
+          }
+        );
         this.$emit("update:expanded-rows", this.expandedRowsInternal);
       } else if (selectable) {
         let updated = false;
@@ -6472,12 +6475,15 @@ const _sfc_main$d = {
           updated = true;
         }
         if (updated) {
-          this.$emit("row-select", {
-            item,
-            index: index2,
-            selected: isSelecting,
-            selectedRows: this.selectedRowsInternal.map((uid) => this.filteredItems[uid])
-          });
+          this.$emit(
+            "row-select",
+            {
+              item,
+              index: index2,
+              selected: isSelecting,
+              selectedRows: this.selectedRowsInternal.map((uid) => this.filteredItems[uid])
+            }
+          );
           this.$emit("update:selected-rows", this.selectedRowsInternal);
         }
       }
@@ -6800,7 +6806,7 @@ const _sfc_main$b = {
   },
   computed: {
     listeners() {
-      const _a = this.$attrs, { input, focus, blur } = _a, listeners = __objRest(_a, ["input", "focus", "blur"]);
+      const { input, focus, blur, ...listeners } = this.$attrs;
       return listeners;
     },
     hasValue() {
@@ -7071,10 +7077,10 @@ const _sfc_main$8 = {
       return this.transition || `w-tooltip-slide-fade-${direction}`;
     },
     classes() {
-      return __spreadProps(__spreadValues({
+      return {
         [this.color]: this.color,
-        [`${this.bgColor}--bg`]: this.bgColor
-      }, this.tooltipClasses), {
+        [`${this.bgColor}--bg`]: this.bgColor,
+        ...this.tooltipClasses,
         [`w-tooltip--${this.position}`]: !this.noPosition,
         [`w-tooltip--align-${this.alignment}`]: !this.noPosition && this.alignment,
         "w-tooltip--tile": this.tile,
@@ -7083,7 +7089,7 @@ const _sfc_main$8 = {
         "w-tooltip--fixed": this.fixed,
         "w-tooltip--no-border": this.noBorder || this.bgColor,
         "w-tooltip--custom-transition": this.transition
-      });
+      };
     },
     styles() {
       return {
@@ -7523,5 +7529,5 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   WTransitionTwist: wTransitionTwist
 }, Symbol.toStringTag, { value: "Module" }));
 const install = WaveUI.install;
-WaveUI.install = (app, options = {}) => install.call(WaveUI, app, __spreadValues({ components }, options));
+WaveUI.install = (app, options = {}) => install.call(WaveUI, app, { components, ...options });
 export { WaveUI as default };