@cyberpunk-vue/components 1.10.0 → 1.10.1

package/dist/index.mjs

@@ -1842,39 +1842,45 @@ var ae = {
 		});
 		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() {
+		}, M = T(), P = T(null), I = null, z = null;
+		function H() {
 			let e = i.peekHeight;
 			return typeof e == "number" ? e : parseFloat(e) || 80;
 		}
-		function H() {
+		function U() {
 			if (!i.halfCollapse || !M.value) return;
-			let e = M.value.scrollHeight > z();
+			let e = M.value.scrollHeight > H();
 			w.value !== e && (w.value = e, c("collapse-change", { needed: e }));
 		}
-		function U() {
-			M.value && (P.value = M.value.scrollHeight);
-		}
 		function W() {
-			K(), !(!i.halfCollapse || !M.value) && (I = new ResizeObserver(() => {
-				H(), U();
-			}), I.observe(M.value));
+			M.value && (P.value = M.value.scrollHeight);
 		}
 		function K() {
-			I &&= (I.disconnect(), null);
+			q(), !(!i.halfCollapse || !M.value) && (I = new ResizeObserver(() => {
+				U(), W();
+			}), I.observe(M.value), z = new MutationObserver(() => {
+				U(), W();
+			}), z.observe(M.value, {
+				childList: !0,
+				subtree: !0,
+				characterData: !0
+			}));
+		}
+		function q() {
+			I &&= (I.disconnect(), null), z &&= (z.disconnect(), null);
 		}
 		R(() => i.halfCollapse, (e) => {
 			e ? _(() => {
-				W(), H();
-			}) : (K(), w.value = !0);
-		}), R(() => i.peekHeight, () => H()), x(() => {
+				K(), U();
+			}) : (q(), w.value = !0);
+		}), R(() => i.peekHeight, () => U()), x(() => {
 			i.halfCollapse && _(() => {
-				W(), H(), U();
+				K(), U(), W();
 			});
 		}), b(() => {
-			h(), K();
+			h(), q();
 		});
-		let q = r(() => i.showCollapseAction && i.halfCollapse && w.value), J = r(() => [
+		let J = r(() => i.showCollapseAction && i.halfCollapse && w.value), X = r(() => [
 			f.b(),
 			f.m(i.variant),
 			f.m(`shape-${i.shape}`),
@@ -1889,39 +1895,39 @@ var ae = {
 			f.is("half-collapsed", D.value && i.halfCollapse),
 			f.is("loading", i.loading),
 			f.is("disabled", i.disabled)
-		]), X = r(() => [f.e("container"), i.backgroundClass]), Z = r(() => i.color ? i.color : i.type && i.type !== "default" ? `var(--cp-color-${i.type})` : null), Q = r(() => i.color ? `color-mix(in srgb, ${i.color} 30%, transparent)` : i.type && i.type !== "default" ? `var(--cp-color-${i.type}-light)` : null), ee = r(() => {
+		]), Z = r(() => [f.e("container"), i.backgroundClass]), Q = 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 = {};
-			Z.value && (e["--cp-card-color"] = Z.value), Q.value && (e["--cp-card-color-light"] = Q.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)`);
+			Q.value && (e["--cp-card-color"] = Q.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 : Q.value && (e["--cp-card-shadow-color"] = `color-mix(in srgb, ${Q.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, P.value !== null && (e["--cp-card-expanded-height"] = `${P.value}px`);
 			}
 			return e;
-		}), te = r(() => {
+		}), ne = r(() => {
 			let e = typeof i.bodyStyle == "string" ? {} : { ...i.bodyStyle };
 			return i.bodyPadding && (e.padding = i.bodyPadding), e;
-		}), ne = r(() => !!(i.title || d.header || d.title || d.extra)), re = r(() => !D.value || ne.value), $ = r(() => !!d.footer), ie = r(() => !!d.overlay), ae = r(() => [
+		}), re = r(() => !!(i.title || d.header || d.title || d.extra)), $ = r(() => !D.value || re.value), ie = r(() => !!d.footer), ae = r(() => !!d.overlay), oe = r(() => [
 			f.e("header"),
 			f.is("bordered", i.headerBorder),
 			i.headerClass
-		]), 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(() => [
+		]), se = r(() => [f.e("footer"), f.is("bordered", i.footerBorder)]), ce = r(() => i.actionEffect ?? i.overlayEffect), le = r(() => i.actionColor ?? i.overlayColor), ue = r(() => i.actionBlur ?? i.overlayBlur), de = r(() => [
 			f.e("overlay"),
 			f.bem("", "overlay", i.overlayAnimation),
 			f.bem("", "overlay", i.overlayPosition),
-			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(() => ({
+			f.bem("", "overlay", `effect-${ce.value}`)
+		]), fe = r(() => [f.e("overlay-backdrop"), f.bem("", "overlay-backdrop", `effect-${i.overlayEffect}`)]), pe = (e) => e === void 0 ? "10px" : typeof e == "number" ? `${e}px` : e, me = r(() => ({
 			"--cp-card-overlay-duration": G(i.overlayDuration),
 			"--cp-card-overlay-color": i.overlayColor,
-			"--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]);
+			"--cp-card-overlay-blur": pe(i.overlayBlur),
+			"--cp-card-action-color": le.value,
+			"--cp-card-action-blur": pe(ue.value)
+		})), ge = r(() => [f.e("loading-overlay"), i.loadingClass]);
 		return (e, t) => V((S(), o("div", {
-			class: v(J.value),
-			style: y(ee.value)
-		}, [s("div", {
 			class: v(X.value),
+			style: y(te.value)
+		}, [s("div", {
+			class: v(Z.value),
 			style: y(e.backgroundStyle)
 		}, [
 			e.$slots.cover ? (S(), o("div", {
@@ -1929,9 +1935,9 @@ var ae = {
 				class: v(N(f).e("collapse-transition")),
 				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),
-			ne.value ? (S(), o("div", {
+			re.value ? (S(), o("div", {
 				key: 1,
-				class: v(ae.value),
+				class: v(oe.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,
@@ -1946,12 +1952,12 @@ var ae = {
 				class: v(N(f).e("collapse-inner"))
 			}, [s("div", {
 				class: v([N(f).e("body"), e.bodyClass]),
-				style: y(te.value)
-			}, [O(e.$slots, "default")], 6), $.value ? (S(), o("div", {
+				style: y(ne.value)
+			}, [O(e.$slots, "default")], 6), ie.value ? (S(), o("div", {
 				key: 0,
-				class: v(oe.value)
+				class: v(se.value)
 			}, [O(e.$slots, "footer")], 2)) : a("", !0)], 2)], 34),
-			q.value ? (S(), o("div", {
+			J.value ? (S(), o("div", {
 				key: 2,
 				class: v(N(f).e("collapse-action"))
 			}, [O(e.$slots, "collapse-action", {
@@ -1962,28 +1968,28 @@ var ae = {
 				class: v(N(f).e("collapse-action-default")),
 				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", {
+			ae.value ? (S(), o("div", {
 				key: 3,
-				class: v(de.value),
-				style: y(pe.value)
+				class: v(fe.value),
+				style: y(me.value)
 			}, null, 6)) : a("", !0),
-			ie.value ? (S(), o("div", {
+			ae.value ? (S(), o("div", {
 				key: 4,
-				class: v(ue.value),
-				style: y(pe.value)
+				class: v(de.value),
+				style: y(me.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(me.value),
+					class: v(ge.value),
 					style: y(e.loadingStyle)
-				}, [O(e.$slots, "loading", {}, () => [u(N(he), { color: Z.value || void 0 }, null, 8, ["color"]), e.loadingText ? (S(), o("span", {
+				}, [O(e.$slots, "loading", {}, () => [u(N(he), { color: Q.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, re.value]]);
+		], 6)], 6)), [[L, $.value]]);
 	}
 })), ht = {
 	type: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberpunk-vue/components",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "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.10.0",
-    "@cyberpunk-vue/theme-chalk": "1.10.0",
-    "@cyberpunk-vue/constants": "1.10.0"
+    "@cyberpunk-vue/constants": "1.10.1",
+    "@cyberpunk-vue/hooks": "1.10.1",
+    "@cyberpunk-vue/theme-chalk": "1.10.1"
   },
   "author": "Juxest",
   "license": "MIT",