wave-ui 4.0.1 → 4.0.2

package/dist/wave-ui.esm.js

@@ -1867,7 +1867,8 @@ var tt = /* @__PURE__ */ J({
 			return this.accordionItems.reduce((e, t) => (e[t._cuid] = t, e), {});
 		},
 		accordionItemsProvided() {
-			return this.$slots.default?.()?.some((e) => e?.type?.name === "w-accordion-item");
+			let e = this.$slots.default?.() || [];
+			return this.hasAccordionItemVNodes(e);
 		},
 		accordionClasses() {
 			return {
@@ -1893,6 +1894,9 @@ var tt = /* @__PURE__ */ J({
 		}
 	},
 	methods: {
+		hasAccordionItemVNodes(t = []) {
+			return t.some((t) => t ? t.type === $e || t.type?.name === "w-accordion-item" ? !0 : t.type === e && Array.isArray(t.children) ? this.hasAccordionItemVNodes(t.children) : !1 : !1);
+		},
 		getAccordionItem(e) {
 			return this.accordionItemsById[e];
 		},
@@ -8030,6 +8034,26 @@ var ti = /* @__PURE__ */ J({
 		}
 	},
 	methods: {
+		resolveTabUid(e) {
+			if (!this.tabs.length) return null;
+			if (e == null || e === "") return this.tabs[0]._uid;
+			if (typeof e == "string") {
+				if (this.tabsByUid[e]?._uid) return e;
+				let t = Number.parseInt(e, 10);
+				return !Number.isNaN(t) && `${t}` === e.trim() && this.tabs[t]?._uid || null;
+			}
+			return typeof e == "number" && e >= 0 && this.tabs[e]?._uid || null;
+		},
+		syncActiveTabFromModelValue(e = this.modelValue) {
+			let t = this.resolveTabUid(e) || this.tabs[0]?._uid || null, n = t ? this.tabsByUid[t] : null;
+			this.activeTabUid = n?._uid || null, this.activeTabIndex = n?._index || 0;
+		},
+		shouldEmitUidModelValue() {
+			return typeof this.modelValue == "string" ? !/^\d+$/.test(this.modelValue.trim()) : !1;
+		},
+		getModelValueForTab(e) {
+			return this.shouldEmitUidModelValue() ? e[this.itemIdKey] ?? e._uid : e._index;
+		},
 		addTab(e) {
 			(e[this.itemIdKey] ?? e._uid ?? !1) || (e._uid = `${this.tabsStableId}-${this.tabs.length}`), this.tabs.push({
 				_uid: e[this.itemIdKey] ?? e._uid,
@@ -8040,7 +8064,7 @@ var ti = /* @__PURE__ */ J({
 		},
 		refreshTabs() {
 			let e = this.items;
-			typeof e == "number" && (e = Array(e).fill().map((e, t) => this.tabs[t] || {})), this.tabs = e.map((e, t) => ((e[this.itemIdKey] ?? e._uid ?? !1) || (e._uid = `${this.tabsStableId}-${t}`), {
+			typeof e == "number" ? e = Array(e).fill().map((e, t) => this.tabs[t] || {}) : e ||= [], this.tabs = e.map((e, t) => ((e[this.itemIdKey] ?? e._uid ?? !1) || (e._uid = `${this.tabsStableId}-${t}`), {
 				...e,
 				_uid: e[this.itemIdKey] ?? e._uid,
 				_index: t,
@@ -8073,22 +8097,23 @@ var ti = /* @__PURE__ */ J({
 		openTab(e) {
 			this.prevTabIndex = this.activeTabIndex;
 			let t = this.tabsByUid[e];
-			this.activeTabIndex = t._index, this.activeTabUid = t._uid, this.$emit("update:modelValue", t._index), this.$emit("input", t._index), this.noSlider || this.$nextTick(this.updateSlider);
+			if (!t) return;
+			this.activeTabIndex = t._index, this.activeTabUid = t._uid;
+			let n = this.getModelValueForTab(t);
+			this.$emit("update:modelValue", n), this.$emit("input", n), this.noSlider || this.$nextTick(this.updateSlider);
 		},
 		updateSlider(e = !0) {
-			if (e) {
-				let e = this.$refs["tabs-bar"];
-				this.activeTabEl = e?.querySelector(".w-tabs__bar-item--active");
-			}
-			if (!this.fillBar && this.activeTabEl) {
+			let t = this.$refs["tabs-bar"];
+			if ((e || !this.activeTabEl) && (this.activeTabEl = t?.querySelector(".w-tabs__bar-item--active") || t?.querySelector(`.w-tabs__bar-item:nth-child(${this.activeTabIndex + 1})`)), !this.fillBar && this.activeTabEl) {
 				let { left: e, width: t } = this.activeTabEl.getBoundingClientRect(), n = this.activeTabEl.parentNode, { left: r } = n.getBoundingClientRect(), { borderLeftWidth: i } = getComputedStyle(n);
 				this.slider.left = `${e - r - parseInt(i) + n.scrollLeft}px`, this.slider.width = `${t}px`;
-			} else this.slider.left = `${this.activeTab._index * 100 / this.tabs.length}%`, this.slider.width = `${100 / this.tabs.length}%`;
+			} else !this.fillBar && e && this.tabs.length ? this.$nextTick(() => this.updateSlider(!1)) : (this.slider.left = `${this.activeTab._index * 100 / this.tabs.length}%`, this.slider.width = `${100 / this.tabs.length}%`);
 		},
 		updateActiveTab(e) {
-			typeof e == "string" ? e = ~~e : (isNaN(e) || e < 0) && (e = 0), this.tabs[e]?._uid && (this.openTab(this.tabs[e]?._uid), this.$nextTick(() => {
-				let t = this.$refs["tabs-bar"];
-				this.activeTabEl = t?.querySelector(`.w-tabs__bar-item:nth-child(${e + 1})`), this.activeTabEl && this.activeTabEl.scrollIntoView({
+			let t = this.resolveTabUid(e), n = t ? this.tabsByUid[t] : null;
+			n?._uid && (this.openTab(n._uid), this.$nextTick(() => {
+				let e = this.$refs["tabs-bar"];
+				this.activeTabEl = e?.querySelector(`.w-tabs__bar-item:nth-child(${n._index + 1})`), this.activeTabEl && this.activeTabEl.scrollIntoView({
 					behavior: "smooth",
 					block: "nearest",
 					inline: "nearest"
@@ -8099,8 +8124,11 @@ var ti = /* @__PURE__ */ J({
 			return this.items[e._index] || {};
 		}
 	},
+	created() {
+		this.tabs = [], (typeof this.items == "number" ? Array(this.items).fill().map(Object) : this.items || []).forEach(this.addTab), this.syncActiveTabFromModelValue(this.modelValue);
+	},
 	beforeMount() {
-		this.tabs = [], (typeof this.items == "number" ? Array(this.items).fill().map(Object) : this.items).forEach(this.addTab), (this.modelValue ?? !1) && this.updateActiveTab(this.modelValue), this.$nextTick(() => {
+		this.$nextTick(() => {
 			this.updateSlider(), setTimeout(() => this.init = !1, 0);
 		}), this.noSlider || window.addEventListener("resize", this.onResize);
 	},
@@ -8109,11 +8137,12 @@ var ti = /* @__PURE__ */ J({
 	},
 	watch: {
 		modelValue(e) {
-			e !== this.activeTabIndex && this.updateActiveTab(e);
+			let t = this.resolveTabUid(e);
+			t && t !== this.activeTabUid && this.updateActiveTab(e);
 		},
 		items: {
 			handler() {
-				this.refreshTabs(), this.tabs.length && this.reopenTheActiveTab(), this.noSlider || this.$nextTick(this.updateSlider);
+				this.refreshTabs(), this.syncActiveTabFromModelValue(this.modelValue), !this.activeTabUid && this.tabs.length && this.reopenTheActiveTab(), this.noSlider || this.$nextTick(this.updateSlider);
 			},
 			deep: !0
 		},