@cyberpunk-vue/components 1.9.12 → 1.9.13

package/dist/index.mjs

@@ -1830,46 +1830,51 @@ var ae = {
 			h(), m = setTimeout(() => {
 				p.value = !1, m = null;
 			}, pt);
-		}, C = T(!0), w = r(() => i.collapse !== void 0), E = r(() => w.value ? i.collapse : i.showCollapseAction && i.halfCollapse ? C.value : !1), D = () => {
-			w.value || (C.value = !C.value);
+		}, C = T(!0), w = T(!0), E = r(() => i.collapse !== void 0), D = r(() => E.value ? i.collapse : i.showCollapseAction && i.halfCollapse ? C.value && w.value : !1), k = () => {
+			E.value || (C.value = !C.value);
 		};
-		R(E, (e, t) => {
+		R(D, (e, t) => {
 			if (e) {
 				p.value = !1, h();
 				return;
 			}
 			t && (p.value = !0, g());
 		});
-		let k = (e) => {
-			E.value || !p.value || e.target === e.currentTarget && e.propertyName === "grid-template-rows" && (p.value = !1, h());
-		}, A = T(), M = T(!0), P = null;
-		function I() {
+		let A = (e) => {
+			D.value || !p.value || e.target === e.currentTarget && e.propertyName === "grid-template-rows" && (p.value = !1, h());
+		}, M = T(), P = T(null), I = null;
+		function z() {
 			let e = i.peekHeight;
 			return typeof e == "number" ? e : parseFloat(e) || 80;
 		}
-		function z() {
-			if (!i.halfCollapse || !A.value) return;
-			let e = A.value.scrollHeight > I();
-			M.value !== e && (M.value = e, c("collapse-change", { needed: e }));
-		}
 		function H() {
-			U(), !(!i.halfCollapse || !A.value) && (P = new ResizeObserver(() => z()), P.observe(A.value));
+			if (!i.halfCollapse || !M.value) return;
+			let e = M.value.scrollHeight > z();
+			w.value !== e && (w.value = e, c("collapse-change", { needed: e }));
 		}
 		function U() {
-			P &&= (P.disconnect(), null);
+			M.value && (P.value = M.value.scrollHeight);
+		}
+		function W() {
+			K(), !(!i.halfCollapse || !M.value) && (I = new ResizeObserver(() => {
+				H(), U();
+			}), I.observe(M.value));
+		}
+		function K() {
+			I &&= (I.disconnect(), null);
 		}
 		R(() => i.halfCollapse, (e) => {
 			e ? _(() => {
-				H(), z();
-			}) : (U(), M.value = !0);
-		}), R(() => i.peekHeight, () => z()), x(() => {
+				W(), H();
+			}) : (K(), w.value = !0);
+		}), R(() => i.peekHeight, () => H()), x(() => {
 			i.halfCollapse && _(() => {
-				H(), z();
+				W(), H(), U();
 			});
 		}), b(() => {
-			h(), U();
+			h(), K();
 		});
-		let W = r(() => i.showCollapseAction && i.halfCollapse && M.value), K = r(() => [
+		let q = r(() => i.showCollapseAction && i.halfCollapse && w.value), J = r(() => [
 			f.b(),
 			f.m(i.variant),
 			f.m(`shape-${i.shape}`),
@@ -1879,54 +1884,54 @@ var ae = {
 			f.is("dimmed", i.dimmed),
 			f.is("trigger-image-hover", i.triggerImageHover),
 			f.is("hover-scale", i.hoverScale),
-			f.is("collapse-size-locked", E.value || p.value),
-			f.is("collapsed", E.value),
-			f.is("half-collapsed", E.value && i.halfCollapse),
+			f.is("collapse-size-locked", D.value || p.value),
+			f.is("collapsed", D.value),
+			f.is("half-collapsed", D.value && i.halfCollapse),
 			f.is("loading", i.loading),
 			f.is("disabled", i.disabled)
-		]), q = r(() => [f.e("container"), i.backgroundClass]), J = r(() => i.color ? i.color : i.type && i.type !== "default" ? `var(--cp-color-${i.type})` : null), X = r(() => i.color ? `color-mix(in srgb, ${i.color} 30%, transparent)` : i.type && i.type !== "default" ? `var(--cp-color-${i.type}-light)` : null), Z = r(() => {
+		]), X = r(() => [f.e("container"), i.backgroundClass]), Z = r(() => i.color ? i.color : i.type && i.type !== "default" ? `var(--cp-color-${i.type})` : null), ee = r(() => i.color ? `color-mix(in srgb, ${i.color} 30%, transparent)` : i.type && i.type !== "default" ? `var(--cp-color-${i.type}-light)` : null), te = r(() => {
 			let e = {};
-			J.value && (e["--cp-card-color"] = J.value), X.value && (e["--cp-card-color-light"] = X.value), i.bgColor && (e["--cp-card-bg"] = i.bgColor), i.borderColor && (e["--cp-card-border-color"] = i.borderColor), i.dividerColor && (e["--cp-card-divider-color"] = i.dividerColor), i.headerDividerColor && (e["--cp-card-header-divider-color"] = i.headerDividerColor), i.footerDividerColor && (e["--cp-card-footer-divider-color"] = i.footerDividerColor), i.shadowColor ? e["--cp-card-shadow-color"] = i.shadowColor : J.value && (e["--cp-card-shadow-color"] = `color-mix(in srgb, ${J.value} 40%, black)`);
+			Z.value && (e["--cp-card-color"] = Z.value), ee.value && (e["--cp-card-color-light"] = ee.value), i.bgColor && (e["--cp-card-bg"] = i.bgColor), i.borderColor && (e["--cp-card-border-color"] = i.borderColor), i.dividerColor && (e["--cp-card-divider-color"] = i.dividerColor), i.headerDividerColor && (e["--cp-card-header-divider-color"] = i.headerDividerColor), i.footerDividerColor && (e["--cp-card-footer-divider-color"] = i.footerDividerColor), i.shadowColor ? e["--cp-card-shadow-color"] = i.shadowColor : Z.value && (e["--cp-card-shadow-color"] = `color-mix(in srgb, ${Z.value} 40%, black)`);
 			let t = G(i.dimmedDuration);
 			if (t && (e["--cp-card-dimmed-duration"] = t), i.halfCollapse) {
 				let t = i.peekHeight;
-				e["--cp-card-peek-height"] = typeof t == "number" ? `${t}px` : t;
+				e["--cp-card-peek-height"] = typeof t == "number" ? `${t}px` : t, P.value !== null && (e["--cp-card-expanded-height"] = `${P.value}px`);
 			}
 			return e;
-		}), ee = r(() => {
+		}), ne = r(() => {
 			let e = typeof i.bodyStyle == "string" ? {} : { ...i.bodyStyle };
 			return i.bodyPadding && (e.padding = i.bodyPadding), e;
-		}), te = r(() => !!(i.title || d.header || d.title || d.extra)), ne = r(() => !E.value || te.value), Q = r(() => !!d.footer), re = r(() => !!d.overlay), $ = r(() => [
+		}), Q = r(() => !!(i.title || d.header || d.title || d.extra)), re = r(() => !D.value || Q.value), $ = r(() => !!d.footer), ie = r(() => !!d.overlay), ae = r(() => [
 			f.e("header"),
 			f.is("bordered", i.headerBorder),
 			i.headerClass
-		]), ie = r(() => [f.e("footer"), f.is("bordered", i.footerBorder)]), ae = r(() => i.actionEffect ?? i.overlayEffect), oe = r(() => i.actionColor ?? i.overlayColor), se = r(() => i.actionBlur ?? i.overlayBlur), ce = r(() => [
+		]), oe = r(() => [f.e("footer"), f.is("bordered", i.footerBorder)]), se = r(() => i.actionEffect ?? i.overlayEffect), ce = r(() => i.actionColor ?? i.overlayColor), le = r(() => i.actionBlur ?? i.overlayBlur), ue = r(() => [
 			f.e("overlay"),
 			f.bem("", "overlay", i.overlayAnimation),
 			f.bem("", "overlay", i.overlayPosition),
-			f.bem("", "overlay", `effect-${ae.value}`)
-		]), le = r(() => [f.e("overlay-backdrop"), f.bem("", "overlay-backdrop", `effect-${i.overlayEffect}`)]), ue = (e) => e === void 0 ? "10px" : typeof e == "number" ? `${e}px` : e, de = r(() => ({
+			f.bem("", "overlay", `effect-${se.value}`)
+		]), de = r(() => [f.e("overlay-backdrop"), f.bem("", "overlay-backdrop", `effect-${i.overlayEffect}`)]), fe = (e) => e === void 0 ? "10px" : typeof e == "number" ? `${e}px` : e, pe = r(() => ({
 			"--cp-card-overlay-duration": G(i.overlayDuration),
 			"--cp-card-overlay-color": i.overlayColor,
-			"--cp-card-overlay-blur": ue(i.overlayBlur),
-			"--cp-card-action-color": oe.value,
-			"--cp-card-action-blur": ue(se.value)
-		})), fe = r(() => [f.e("loading-overlay"), i.loadingClass]);
+			"--cp-card-overlay-blur": fe(i.overlayBlur),
+			"--cp-card-action-color": ce.value,
+			"--cp-card-action-blur": fe(le.value)
+		})), me = r(() => [f.e("loading-overlay"), i.loadingClass]);
 		return (e, t) => V((S(), o("div", {
-			class: v(K.value),
-			style: y(Z.value)
+			class: v(J.value),
+			style: y(te.value)
 		}, [s("div", {
-			class: v(q.value),
+			class: v(X.value),
 			style: y(e.backgroundStyle)
 		}, [
 			e.$slots.cover ? (S(), o("div", {
 				key: 0,
 				class: v(N(f).e("collapse-transition")),
-				onTransitionend: k
+				onTransitionend: A
 			}, [s("div", { class: v(N(f).e("collapse-inner")) }, [s("div", { class: v(N(f).e("cover")) }, [O(e.$slots, "cover")], 2)], 2)], 34)) : a("", !0),
-			te.value ? (S(), o("div", {
+			Q.value ? (S(), o("div", {
 				key: 1,
-				class: v($.value),
+				class: v(ae.value),
 				style: y(e.headerStyle)
 			}, [O(e.$slots, "header", {}, () => [s("div", { class: v(N(f).e("title")) }, [O(e.$slots, "title", {}, () => [l(j(e.title), 1)])], 2), N(d).extra ? (S(), o("div", {
 				key: 0,
@@ -1934,51 +1939,51 @@ var ae = {
 			}, [O(e.$slots, "extra")], 2)) : a("", !0)])], 6)) : a("", !0),
 			s("div", {
 				class: v(N(f).e("collapse-transition")),
-				onTransitionend: k
+				onTransitionend: A
 			}, [s("div", {
 				ref_key: "collapseInnerRef",
-				ref: A,
+				ref: M,
 				class: v(N(f).e("collapse-inner"))
 			}, [s("div", {
 				class: v([N(f).e("body"), e.bodyClass]),
-				style: y(ee.value)
-			}, [O(e.$slots, "default")], 6), Q.value ? (S(), o("div", {
+				style: y(ne.value)
+			}, [O(e.$slots, "default")], 6), $.value ? (S(), o("div", {
 				key: 0,
-				class: v(ie.value)
+				class: v(oe.value)
 			}, [O(e.$slots, "footer")], 2)) : a("", !0)], 2)], 34),
-			W.value ? (S(), o("div", {
+			q.value ? (S(), o("div", {
 				key: 2,
 				class: v(N(f).e("collapse-action"))
 			}, [O(e.$slots, "collapse-action", {
-				collapsed: E.value,
-				needed: M.value,
-				toggle: D
+				collapsed: D.value,
+				needed: w.value,
+				toggle: k
 			}, () => [s("div", {
 				class: v(N(f).e("collapse-action-default")),
-				onClick: D
-			}, [s("span", { class: v(N(f).e("collapse-action-text")) }, j(E.value ? e.collapseActionExpandText : e.collapseActionCollapseText), 3), s("span", { class: v([N(f).e("collapse-action-icon"), { "is-expanded": !E.value }]) }, "▼", 2)], 2)])], 2)) : a("", !0),
-			re.value ? (S(), o("div", {
+				onClick: k
+			}, [s("span", { class: v(N(f).e("collapse-action-text")) }, j(D.value ? e.collapseActionExpandText : e.collapseActionCollapseText), 3), s("span", { class: v([N(f).e("collapse-action-icon"), { "is-expanded": !D.value }]) }, "▼", 2)], 2)])], 2)) : a("", !0),
+			ie.value ? (S(), o("div", {
 				key: 3,
-				class: v(le.value),
-				style: y(de.value)
+				class: v(de.value),
+				style: y(pe.value)
 			}, null, 6)) : a("", !0),
-			re.value ? (S(), o("div", {
+			ie.value ? (S(), o("div", {
 				key: 4,
-				class: v(ce.value),
-				style: y(de.value)
+				class: v(ue.value),
+				style: y(pe.value)
 			}, [O(e.$slots, "overlay")], 6)) : a("", !0),
 			u(n, { name: "cp-card-loading" }, {
 				default: B(() => [e.loading ? (S(), o("div", {
 					key: 0,
-					class: v(fe.value),
+					class: v(me.value),
 					style: y(e.loadingStyle)
-				}, [O(e.$slots, "loading", {}, () => [u(N(he), { color: J.value || void 0 }, null, 8, ["color"]), e.loadingText ? (S(), o("span", {
+				}, [O(e.$slots, "loading", {}, () => [u(N(he), { color: Z.value || void 0 }, null, 8, ["color"]), e.loadingText ? (S(), o("span", {
 					key: 0,
 					class: v(N(f).e("loading-text"))
 				}, j(e.loadingText), 3)) : a("", !0)])], 6)) : a("", !0)]),
 				_: 3
 			})
-		], 6)], 6)), [[L, ne.value]]);
+		], 6)], 6)), [[L, re.value]]);
 	}
 })), ht = {
 	type: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberpunk-vue/components",
-  "version": "1.9.12",
+  "version": "1.9.13",
   "description": "Cyberpunk Vue components - A futuristic Vue 3 component library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -23,9 +23,9 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@cyberpunk-vue/hooks": "1.9.12",
-    "@cyberpunk-vue/theme-chalk": "1.9.12",
-    "@cyberpunk-vue/constants": "1.9.12"
+    "@cyberpunk-vue/hooks": "1.9.13",
+    "@cyberpunk-vue/theme-chalk": "1.9.13",
+    "@cyberpunk-vue/constants": "1.9.13"
   },
   "author": "Juxest",
   "license": "MIT",