wave-ui 4.0.0 → 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];
 		},
@@ -5198,6 +5202,7 @@ var kn = {
 	},
 	inject: { detachableDefaultRoot: { default: null } },
 	data: () => ({
+		detachableDomReady: !1,
 		docEventListenersHandlers: [],
 		openTimeout: null,
 		viewportPlacementOverride: null,
@@ -5362,12 +5367,14 @@ var kn = {
 		}
 	},
 	mounted() {
-		this.activator ? this.bindActivatorEvents() : this.$nextTick(() => {
-			this.activator ? this.bindActivatorEvents() : this._attachActivatorListeners(), this.modelValue && !this.disable && this.open({ target: this.activatorEl });
-		}), this.overlay && (this.overlayEl = this.$refs.overlay?.$el), this.modelValue && this.activator && !this.disable ? this.toggle({
-			type: this.shouldShowOnClick ? "click" : "mouseenter",
-			target: this.activatorEl
-		}) : this.modelValue && !this.disable && this.open({ target: this.activatorEl });
+		this.detachableDomReady = !0, this.$nextTick(() => {
+			this.activator ? this.bindActivatorEvents() : this.$nextTick(() => {
+				this.activator ? this.bindActivatorEvents() : this._attachActivatorListeners(), this.modelValue && !this.disable && this.open({ target: this.activatorEl });
+			}), this.overlay && (this.overlayEl = this.$refs.overlay?.$el), this.modelValue && this.activator && !this.disable ? this.toggle({
+				type: this.shouldShowOnClick ? "click" : "mouseenter",
+				target: this.activatorEl
+			}) : this.modelValue && !this.disable && this.open({ target: this.activatorEl });
+		});
 	},
 	unmounted() {
 		this.close(), this._detachActivatorListeners(), this.unbindActivatorDocEvents();
@@ -5391,7 +5398,8 @@ function An(t, i, a, l, d, p) {
 	return x(), c(e, null, [
 		T(t.$slots, "activator"),
 		t.$slots.activator ? s("", !0) : T(t.$slots, "default", { key: 0 }),
-		(x(), o(n, {
+		t.detachableDomReady ? (x(), o(n, {
+			key: 1,
 			to: t.teleportTarget,
 			disabled: !t.teleportTarget
 		}, [f(r, {
@@ -5459,7 +5467,7 @@ function An(t, i, a, l, d, p) {
 			"persistent",
 			"class",
 			"z-index"
-		])) : s("", !0)], 8, ["to", "disabled"]))
+		])) : s("", !0)], 8, ["to", "disabled"])) : s("", !0)
 	], 64);
 }
 var jn = /* @__PURE__ */ J({
@@ -8026,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,
@@ -8036,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,
@@ -8069,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"
@@ -8095,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);
 	},
@@ -8105,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
 		},
@@ -9124,7 +9157,8 @@ function Ki(t, i, a, l, u, p) {
 	return x(), c(e, null, [
 		T(t.$slots, "activator"),
 		t.$slots.activator ? s("", !0) : T(t.$slots, "default", { key: 0 }),
-		(x(), o(n, {
+		t.detachableDomReady ? (x(), o(n, {
+			key: 1,
 			to: t.teleportTarget,
 			disabled: !t.teleportTarget
 		}, [f(r, {
@@ -9139,7 +9173,7 @@ function Ki(t, i, a, l, u, p) {
 				style: b(p.styles)
 			}, [a.tooltip ? (x(), c(e, { key: 0 }, [d(k(a.tooltip), 1)], 64)) : t.$slots.tooltip ? T(t.$slots, "tooltip", { key: 1 }) : t.$slots.activator ? T(t.$slots, "default", { key: 2 }) : s("", !0)], 6)) : s("", !0)]),
 			_: 3
-		}, 8, ["name", "onAfterLeave"])], 8, ["to", "disabled"]))
+		}, 8, ["name", "onAfterLeave"])], 8, ["to", "disabled"])) : s("", !0)
 	], 64);
 }
 var qi = /* @__PURE__ */ J({