wave-ui 3.17.2 → 3.17.4

package/dist/wave-ui.es.js

@@ -3,7 +3,7 @@ var de = (e) => {
   throw TypeError(e);
 };
 var Ie = (e, t, i) => t in e ? $e(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
-var H = (e, t, i) => Ie(e, typeof t != "symbol" ? t + "" : t, i), ue = (e, t, i) => t.has(e) || de("Cannot " + i);
+var F = (e, t, i) => Ie(e, typeof t != "symbol" ? t + "" : t, i), ue = (e, t, i) => t.has(e) || de("Cannot " + i);
 var Y = (e, t, i) => (ue(e, t, "read from private field"), i ? i.call(e) : t.get(e)), te = (e, t, i) => t.has(e) ? de("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), ie = (e, t, i, s) => (ue(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i);
 import { reactive as Z, resolveComponent as $, openBlock as o, createBlock as b, Teleport as Ve, createVNode as T, TransitionGroup as ae, normalizeClass as m, withCtx as f, createElementBlock as u, Fragment as v, renderList as x, mergeProps as _, createElementVNode as w, createCommentVNode as p, createApp as Te, defineComponent as Le, inject as Re, withKeys as A, withModifiers as M, renderSlot as c, createTextVNode as B, toDisplayString as S, normalizeStyle as R, toHandlers as ne, Transition as O, resolveDynamicComponent as L, normalizeProps as le, resolveDirective as ke, withDirectives as W, createSlots as ee, vShow as re, vModelText as ve, vModelDynamic as xe, KeepAlive as Oe } from "vue";
 const Pe = Z({
@@ -74,7 +74,7 @@ const Pe = Z({
       typeof s == "object" && typeof t[i] == "object" ? Ce(e[i], t[i]) : t[i] = s;
     }
   return t;
-}, j = (e) => console.warn(`Wave UI: ${e}`), F = (e) => console.error(`Wave UI: ${e}`), ze = (e) => {
+}, j = (e) => console.warn(`Wave UI: ${e}`), D = (e) => console.error(`Wave UI: ${e}`), ze = (e) => {
   ["light", "dark"].forEach((t) => {
     var s, a, l;
     const i = e.colors[t];
@@ -106,7 +106,7 @@ function G(e, t, i) {
 }
 function J(e) {
   const t = e.toString(16);
-  return t.length === 1 && `0${t}` || t.length === 2 && t || F(`expected value from 0~255, got: ${e}`) || "";
+  return t.length === 1 && `0${t}` || t.length === 2 && t || D(`expected value from 0~255, got: ${e}`) || "";
 }
 function Me(e) {
   return /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(e);
@@ -118,7 +118,7 @@ function Ae(e) {
   return `#${e.substring(1).split("").map((t) => `${t}${t}`).join("")}`;
 }
 function We(e) {
-  return Me(e) && e || Ee(e) && Ae(e) || F(`expected color hex string, got '${e}'`) || "";
+  return Me(e) && e || Ee(e) && Ae(e) || D(`expected color hex string, got '${e}'`) || "";
 }
 function ce(e) {
   const t = We(e), i = parseInt(t.substring(1, 3), 16), s = parseInt(t.substring(3, 5), 16), a = parseInt(t.substring(5, 7), 16), l = t.length === 9 ? parseInt(t.substring(7, 9), 16) / 255 : 1;
@@ -672,22 +672,22 @@ const C = (e, t) => {
     }
   }
 }, Je = /* @__PURE__ */ C(Ge, [["render", Ye]]);
-var D;
+var H;
 const N = class N {
   constructor() {
-    H(this, "notifications");
+    F(this, "notifications");
     // Private fields.
-    H(this, "_uid");
+    F(this, "_uid");
     // A unique ID for each notification.
-    H(this, "_notificationDefaults");
-    if (Y(N, D)) return Y(N, D);
+    F(this, "_notificationDefaults");
+    if (Y(N, H)) return Y(N, H);
     this.notifications = [], this._uid = 0, this._notificationDefaults = {
       _uid: 0,
       _value: !0,
       message: "",
       timeout: 4e3,
       dismiss: !0
-    }, ie(N, D, this);
+    }, ie(N, H, this);
   }
   notify(...t) {
     let i = {
@@ -710,7 +710,7 @@ const N = class N {
     this.notifications = this.notifications.filter((i) => i._uid !== t);
   }
 };
-D = new WeakMap(), te(N, D);
+H = new WeakMap(), te(N, H);
 let oe = N;
 const Qe = (e, t, i) => {
   const s = document.createElement("div");
@@ -754,7 +754,7 @@ const K = class K {
   constructor(t, i = {}) {
     // Exposed as a global object and also `app.provide`d.
     // Accessible from this.$waveui, or inject('$waveui').
-    H(this, "$waveui", {
+    F(this, "$waveui", {
       breakpoint: {
         name: "",
         xs: !1,
@@ -853,7 +853,7 @@ function ot(e, t, i, s, a, l) {
         onClick: t[1] || (t[1] = M((d) => !l.accordionItem._disabled && l.toggleItem(l.accordionItem, d), ["stop"]))
       }, null, 8, ["icon", "icon-props", "disabled", "class"])) : p("", !0),
       c(e.$slots, "title", {
-        item: l.accordionItem,
+        item: l.getOriginalItem(l.accordionItem),
         expanded: l.accordionItem._expanded,
         index: l.accordionItem._index + 1
       }, () => [
@@ -883,7 +883,7 @@ function ot(e, t, i, s, a, l) {
           class: m(["w-accordion__item-content", l.contentClasses])
         }, [
           c(e.$slots, "content", {
-            item: l.accordionItem,
+            item: l.getOriginalItem(l.accordionItem),
             expanded: l.accordionItem._expanded,
             index: l.accordionItem._index + 1
           }, () => [
@@ -900,40 +900,36 @@ function ot(e, t, i, s, a, l) {
 const at = {
   name: "w-accordion-item",
   props: {
-    item: { type: Object }
+    title: { type: String },
+    content: { type: String },
+    expanded: { type: Boolean },
+    disabled: { type: Boolean }
   },
   inject: [
     "options",
-    "itemClasses",
     "titleClasses",
     "contentClasses",
     "onItemToggle",
     "onEndOfCollapse",
     "getOriginalItem",
+    "getAccordionItem",
     "registerItem",
-    "state"
+    "unregisterItem"
   ],
   emits: ["focus"],
-  data() {
-    var e;
-    return {
-      accordionItemIndex: (e = this.item) == null ? void 0 : e._index
-    };
-  },
   computed: {
     accordionItem: {
       get() {
-        return this.state.accordionItems[this.accordionItemIndex] || {};
+        return this.getAccordionItem(this._.uid);
       },
       set() {
       }
     },
-    itemClass() {
+    itemClasses() {
       return {
         "w-accordion__item--expanded": this.accordionItem._expanded,
         "w-accordion__item--disabled": this.accordionItem._disabled,
-        [this.accordionItem[this.options.itemColorKey]]: this.accordionItem[this.options.itemColorKey],
-        ...this.accordionItemClasses
+        [this.accordionItem[this.options.itemColorKey]]: this.accordionItem[this.options.itemColorKey]
       };
     }
   },
@@ -943,12 +939,17 @@ const at = {
     }
   },
   created() {
-    this.accordionItemIndex = this.registerItem({
+    this.registerItem({
+      _cuid: this._.uid,
       _index: 0,
-      _expanded: !1,
-      _disabled: !1,
-      ...this.item || {}
+      _expanded: this.expanded,
+      _disabled: this.disabled,
+      title: this.title,
+      content: this.content
     });
+  },
+  beforeUnmount() {
+    this.unregisterItem(this._.uid);
   }
 }, Be = /* @__PURE__ */ C(at, [["render", ot]]);
 function nt(e, t, i, s, a, l) {
@@ -956,14 +957,17 @@ function nt(e, t, i, s, a, l) {
   return o(), u("div", {
     class: m(["w-accordion", l.accordionClasses])
   }, [
-    l.accordionItemsProvided ? c(e.$slots, "default", { key: 0 }) : !isNaN(i.items) || (i.items || []).length ? (o(!0), u(v, { key: 1 }, x(e.state.accordionItems, (r, d) => (o(), b(n, {
+    l.accordionItemsProvided ? c(e.$slots, "default", { key: 0 }) : (i.items || []).length ? (o(!0), u(v, { key: 1 }, x(i.items.length ? i.items : e.accordionItems, (r, d) => (o(), b(n, {
       key: d,
-      class: m(i.itemClass),
-      item: r,
+      class: m(l.itemClasses),
+      title: r.title,
+      content: r.content,
+      expanded: r.expanded || r._expanded,
+      disabled: r.disabled || r._disabled,
       onFocus: t[0] || (t[0] = (h) => e.$emit("focus", h))
     }, {
       title: f(({ item: h, expanded: y, index: k }) => [
-        e.$slots[`item-title.${r.id || r._index + 1}`] ? c(e.$slots, `item-title.${r.id || r._index + 1}`, {
+        e.$slots[`item-title.${h.id || k}`] ? c(e.$slots, `item-title.${h.id || k}`, {
           key: 0,
           item: h,
           expanded: y,
@@ -976,7 +980,7 @@ function nt(e, t, i, s, a, l) {
         })
       ]),
       content: f(({ item: h, expanded: y, index: k }) => [
-        e.$slots[`item-content.${r.id || r._index + 1}`] ? c(e.$slots, `item-content.${r.id || r._index + 1}`, {
+        e.$slots[`item-content.${h.id || k}`] ? c(e.$slots, `item-content.${h.id || k}`, {
           key: 0,
           item: h,
           expanded: y,
@@ -989,7 +993,7 @@ function nt(e, t, i, s, a, l) {
         })
       ]),
       _: 2
-    }, 1032, ["class", "item"]))), 128)) : p("", !0)
+    }, 1032, ["class", "title", "content", "expanded", "disabled"]))), 128)) : p("", !0)
   ], 2);
 }
 const rt = {
@@ -998,8 +1002,9 @@ const rt = {
     modelValue: { type: Array },
     color: { type: String },
     bgColor: { type: String },
-    items: { type: [Array, Number] },
     // Required unless externally using WAccordionItem.
+    // Number deprecated: use WAccordionItem.
+    items: { type: [Array, Number] },
     itemColorKey: { type: String, default: "color" },
     // Support a different color per item.
     itemTitleKey: { type: String, default: "title" },
@@ -1023,7 +1028,6 @@ const rt = {
   // All provided to the WAccordionItem, not passed as prop since it could be used externally.
   provide() {
     return {
-      itemClasses: P(this.itemClasses),
       titleClasses: this.titleClasses,
       contentClasses: this.contentClasses,
       onItemToggle: this.onItemToggle,
@@ -1031,15 +1035,17 @@ const rt = {
       getOriginalItem: this.getOriginalItem,
       options: this.$props,
       registerItem: this.registerItem,
-      state: this.state
+      unregisterItem: this.unregisterItem,
+      getAccordionItem: this.getAccordionItem
     };
   },
   data: () => ({
-    state: {
-      accordionItems: []
-    }
+    accordionItems: []
   }),
   computed: {
+    accordionItemsById() {
+      return this.accordionItems.reduce((e, t) => (e[t._cuid] = t, e), {});
+    },
     // Detect if the accordion items are directly provided through slot using WAccordionItem.
     accordionItemsProvided() {
       var e, t, i;
@@ -1071,9 +1077,12 @@ const rt = {
     }
   },
   methods: {
+    getAccordionItem(e) {
+      return this.accordionItemsById[e];
+    },
     onItemToggle(e) {
-      this.expandSingle && this.state.accordionItems.forEach((i) => i._index !== e._index && (i._expanded = !1));
-      const t = this.state.accordionItems.map((i) => i._expanded || !1);
+      this.expandSingle && this.accordionItems.forEach((i) => i._index !== e._index && (i._expanded = !1));
+      const t = this.accordionItems.map((i) => i._expanded || !1);
       this.$emit("update:modelValue", t), this.$emit("input", t), this.$emit("item-expand", { item: e, expanded: e._expanded });
     },
     onEndOfCollapse(e) {
@@ -1081,35 +1090,37 @@ const rt = {
     },
     // Return the original accordion item (so there is no `_index`, etc.).
     getOriginalItem(e) {
-      return this.items[e._index];
-    },
-    updateItems() {
-      let e = this.state.accordionItems;
-      !this.accordionItemsProvided && this.items && (e = (typeof this.items == "number" ? Array(this.items).fill({}) : this.items) || []), this.state.accordionItems = e.map((t, i) => {
-        var s;
-        return {
-          ...t,
-          _index: i,
-          _expanded: ((s = this.modelValue) == null ? void 0 : s[i]) ?? !1,
-          _disabled: !!t.disabled
-        };
-      });
+      var t;
+      return ((t = this.items) == null ? void 0 : t[e._index]) || e;
     },
-    // Provide-injected in and used from w-accordion-item.
+    // Provide-injected and used from w-accordion-item.
     // Only when w-accordion-item is directly used outside of Wave UI.
     registerItem(e) {
-      var t;
-      return this.accordionItemsProvided && (e._index = this.state.accordionItems.length, e._expanded = ((t = this.modelValue) == null ? void 0 : t[e._index]) ?? !1, e._disabled = !!e.disabled, this.state.accordionItems.push(e)), e._index;
+      var t, i;
+      e._index = this.accordionItems.length, e = Object.assign(e, (t = this.items) == null ? void 0 : t[e._index]), e._expanded = ((i = this.modelValue) == null ? void 0 : i[e._index]) ?? !1, e._disabled = !!e._disabled, this.accordionItems.push(e);
+    },
+    // Provide-injected and used from w-accordion-item.
+    unregisterItem(e) {
+      var i;
+      const t = (i = this.getAccordionItem(e)) == null ? void 0 : i._index;
+      t !== void 0 && this.accordionItems.splice(t, 1);
     }
   },
   created() {
-    !this.accordionItemsProvided && this.items && this.updateItems();
+    isNaN(this.items) || D(
+      "Since version 3.17.3, the w-accordion `items` prop can no longer be a Number.\n        Please use the w-accordion-item component instead for advanced custom rendering.\n        https://antoniandre.github.io/wave-ui/w-accordion#w-accordion-item"
+    );
+  },
+  unmounted() {
+    this.accordionItems = [];
   },
   watch: {
-    modelValue() {
-      this.updateItems();
-    },
-    items() {
+    modelValue(e) {
+      if (this.expandSingle) {
+        const t = e.findIndex((i) => !!i);
+        t > -1 && (e = e.fill(!1, t + 1));
+      }
+      e.forEach((t, i) => (this.accordionItems[i] || {})._expanded = t);
     }
   }
 }, dt = /* @__PURE__ */ C(rt, [["render", nt]]), ut = { class: "w-alert__content" };
@@ -1791,7 +1802,7 @@ const At = {
       };
       return {
         ...this.$attrs,
-        onClick: !this.disabled && (e ? t : this.$attrs.onClick)
+        onClick: !this.disabled && !this.loading && (e ? t : this.$attrs.onClick)
       };
     },
     size() {
@@ -6908,14 +6919,14 @@ const we = 15, bo = {
     filter: { type: Function },
     fetch: { type: Function },
     expandableRows: {
-      validator: (e) => ([void 0, !0, !1, 1, "1", ""].includes(e) || F(
+      validator: (e) => ([void 0, !0, !1, 1, "1", ""].includes(e) || D(
         `Wrong value for the w-table's \`expandableRows\` prop. Given: "${e}", expected one of: [undefined, true, false, 1, '1', ''].`
       ), !0)
     },
     // Allow providing the expanded rows and keeping it in sync via .sync in Vue 2 or v-model:expandedRows in Vue 3.
     expandedRows: { type: Array },
     selectableRows: {
-      validator: (e) => ([void 0, !0, !1, 1, "1", ""].includes(e) || F(
+      validator: (e) => ([void 0, !0, !1, 1, "1", ""].includes(e) || D(
         `Wrong value for the w-table's \`selectableRows\` prop. Given: "${e}", expected one of: [undefined, true, false, 1, '1', ''].`
       ), !0)
     },
@@ -6938,7 +6949,7 @@ const we = 15, bo = {
       validator: (e) => {
         if (e) {
           if (typeof e == "object" && (!e.itemsPerPage || e.page && isNaN(e.page)))
-            return F(
+            return D(
               "Wrong pagination config received in the w-table's `pagination` prop (received: `" + JSON.stringify(e) + "`). \nExpected object: { itemsPerPage: Integer, page: Integer } or { itemsPerPage: Integer, start: Integer }."
             ), !1;
         } else return !0;