@ac-design/design-system 2.2.0 → 2.3.0

package/dist/lib/components/AcCard.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,19 @@
-import { Comment as e, Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, useSlots as p, withCtx as m } from "vue";
+import { Comment as e, Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, useSlots as m, withCtx as h } from "vue";
 //#region src/lib/components/AcCard.vue?vue&type=script&setup=true&lang.ts
-var h = {
+var g = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]",
 	"aria-hidden": "true"
-}, g = { class: "flex min-w-0 flex-1 items-center gap-3" }, _ = { class: "min-w-0 flex-1" }, v = { class: "flex flex-wrap items-center gap-2" }, y = {
+}, _ = { class: "min-w-0 flex-1" }, v = {
 	key: 0,
 	class: "mt-0.5 text-xs leading-4 text-muted"
-}, b = {
+}, y = {
 	key: 1,
 	class: "mt-0.5 text-xs leading-4 text-muted"
-}, x = {
+}, b = {
 	key: 1,
 	class: "flex shrink-0 flex-wrap items-center gap-2"
-}, S = /*@__PURE__*/ s({
+}, x = /*@__PURE__*/ c({
 	__name: "AcCard",
 	props: {
 		title: { default: "" },
@@ -28,6 +28,11 @@ var h = {
 		variant: { default: "default" },
 		color: { default: "primary" },
 		headerSize: { default: "normal" },
+		titleTag: { default: "h3" },
+		bare: {
+			type: Boolean,
+			default: !1
+		},
 		hoverable: {
 			type: Boolean,
 			default: !1
@@ -42,12 +47,17 @@ var h = {
 		},
 		as: { default: "section" }
 	},
-	setup(s) {
-		let S = s, C = p(), w = {
+	setup(c) {
+		let x = c, S = m(), C = {
 			default: "border-border bg-surface",
 			muted: "border-border bg-surface-sunken/40",
 			dashed: "border-dashed border-border bg-transparent",
 			danger: "border-danger/30 bg-danger/5"
+		}, w = {
+			default: "border-border [:where(&)]:bg-surface",
+			muted: "border-border [:where(&)]:bg-surface-sunken/40",
+			dashed: "border-dashed border-border [:where(&)]:bg-transparent",
+			danger: "border-danger/30 [:where(&)]:bg-danger/5"
 		}, T = {
 			none: "",
 			xs: "p-3",
@@ -113,77 +123,115 @@ var h = {
 				washSm: "from-warning/[0.07]",
 				watermark: "text-warning/5"
 			}
-		}, A = n(() => S.headerSize === "small"), j = n(() => k[S.color]), M = n(() => S.description || S.subtitle), N = n(() => [
-			w[S.variant],
-			S.as !== "section" && "w-full text-left no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-			S.hoverable && "cursor-pointer hover:border-primary/30 hover:bg-accent-hover/60",
-			S.shadow && "shadow-xs hover:shadow-card",
-			S.hoverable && S.shadow && "hover:-translate-y-0.5 motion-reduce:hover:translate-y-0"
+		}, A = n(() => x.headerSize === "bar"), j = n(() => x.headerSize === "small" || A.value), M = n(() => k[x.color]), N = n(() => x.description || x.subtitle), P = n(() => [
+			C[x.variant],
+			x.as !== "section" && "w-full text-left no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+			x.hoverable && "cursor-pointer hover:border-primary/30 hover:bg-accent-hover/60",
+			x.shadow && "shadow-xs hover:shadow-card",
+			x.hoverable && x.shadow && "hover:-translate-y-0.5 motion-reduce:hover:translate-y-0"
 		]);
-		function P() {
-			return !!(S.title || S.icon || C.icon || C.actions || C.badges);
-		}
-		function F(n) {
-			return n.some((n) => n.type === e ? !1 : n.type !== t || F(n.children));
+		function F() {
+			return !!(x.title || N.value || x.icon || S.icon || S.actions || S.badges || S.description);
 		}
 		function I() {
-			return F(C.default?.() ?? []);
-		}
-		function L() {
-			let e = I(), t = S.padding;
+			let e = x.padding ?? (x.padded ? "md" : "none"), t = x.as !== "section" && x.as !== "div";
 			return [
+				w[x.variant],
+				T[e],
+				t && "block no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+				x.hoverable && "cursor-pointer hover:border-primary/30 hover:bg-accent-hover/60",
+				x.shadow && "shadow-xs hover:shadow-card",
+				x.hoverable && x.shadow && "hover:-translate-y-0.5 motion-reduce:hover:translate-y-0"
+			];
+		}
+		function L(n) {
+			return n.some((n) => n.type === e ? !1 : n.type !== t || L(n.children));
+		}
+		function R() {
+			return L(S.default?.() ?? []);
+		}
+		function z() {
+			let e = R(), t = x.padding;
+			return A.value ? [
+				"items-center gap-2.5 px-4 py-2.5",
+				e && "border-b border-border",
+				!e && !S.footer && "rounded-b-[calc(var(--radius-14)-1px)]",
+				x.accent && ["bg-linear-to-r to-transparent", M.value.washSm]
+			] : [
 				t ? [
 					"items-start gap-3",
 					E[t],
 					D[t],
-					!A.value && "border-border/60"
-				] : A.value ? "items-start gap-3 px-5 pt-5" : "items-start gap-3 border-border/60 px-6 pt-5",
+					!j.value && "border-border/60"
+				] : j.value ? "items-start gap-3 px-5 pt-5" : "items-start gap-3 border-border/60 px-6 pt-5",
 				!e && (t ? O[t] : "pb-5"),
-				e && !A.value && "border-b pb-3",
-				!e && !C.footer && "rounded-b-[calc(var(--radius-14)-1px)]",
-				S.accent && (A.value ? ["bg-linear-to-r to-transparent", j.value.washSm] : ["bg-linear-to-br to-transparent", j.value.wash])
+				e && !j.value && "border-b pb-3",
+				!e && !S.footer && "rounded-b-[calc(var(--radius-14)-1px)]",
+				x.accent && (j.value ? ["bg-linear-to-r to-transparent", M.value.washSm] : ["bg-linear-to-br to-transparent", M.value.wash])
 			];
 		}
-		function R() {
-			return S.padding && S.padding !== "none" ? T[S.padding] : S.padded && S.padding !== "none" ? A.value ? "p-5" : "p-6" : [
+		function B() {
+			return x.padding && x.padding !== "none" ? T[x.padding] : x.padded && x.padding !== "none" ? j.value ? "p-5" : "p-6" : [
 				"overflow-hidden",
-				!C.footer && "rounded-b-14",
-				!P() && "rounded-t-14"
+				!S.footer && "rounded-b-14",
+				!F() && "rounded-t-14"
 			];
 		}
-		return (e, t) => (l(), r(d(s.as), {
-			class: c(["flex flex-col rounded-14 border text-body transition-[background-color,border-color,box-shadow,translate] duration-200 ease-out motion-reduce:transition-none", N.value]),
+		return (e, t) => c.bare ? (u(), r(f(c.as), {
+			key: 0,
+			class: l(["rounded-14 border text-body transition-[background-color,border-color,box-shadow,translate] duration-200 ease-out motion-reduce:transition-none", I()]),
 			"data-ac-ds": "",
 			"data-testid": "ac-card"
 		}, {
-			default: m(() => [
-				P() ? (l(), a("header", {
+			default: h(() => [d(e.$slots, "default")]),
+			_: 3
+		}, 8, ["class"])) : (u(), r(f(c.as), {
+			key: 1,
+			class: l(["flex flex-col rounded-14 border text-body transition-[background-color,border-color,box-shadow,translate] duration-200 ease-out motion-reduce:transition-none", P.value]),
+			"data-ac-ds": "",
+			"data-testid": "ac-card"
+		}, {
+			default: h(() => [
+				F() ? (u(), a("header", {
 					key: 0,
-					class: c(["relative isolate flex flex-wrap justify-between rounded-t-[calc(var(--radius-14)-1px)]", L()])
+					class: l(["relative isolate flex flex-wrap justify-between rounded-t-[calc(var(--radius-14)-1px)]", z()])
 				}, [
-					s.accent && s.icon && !A.value ? (l(), a("div", h, [(l(), r(d(s.icon), { class: c(["absolute -top-4 -right-4 size-24", j.value.watermark]) }, null, 8, ["class"]))])) : i("", !0),
-					o("div", g, [s.icon || e.$slots.icon ? (l(), a("span", {
+					c.accent && (c.icon || e.$slots.icon) && !j.value ? (u(), a("div", g, [c.icon ? (u(), r(f(c.icon), {
+						key: 0,
+						class: l(["absolute -top-4 -right-4 size-24", M.value.watermark])
+					}, null, 8, ["class"])) : (u(), a("span", {
+						key: 1,
+						class: l(["absolute -top-4 -right-4 [&_svg]:size-24!", M.value.watermark])
+					}, [d(e.$slots, "icon")], 2))])) : i("", !0),
+					o("div", { class: l(["flex min-w-0 flex-1 items-center", A.value ? "gap-2.5" : "gap-3"]) }, [c.icon || e.$slots.icon ? (u(), a("span", {
 						key: 0,
-						class: c(["flex shrink-0 items-center justify-center", [j.value.tile, A.value ? ["size-7 rounded-8 ring-1 ring-inset", j.value.ring] : ["size-8 rounded-10 border", j.value.border]]]),
+						class: l(["flex shrink-0 items-center justify-center", [
+							M.value.tile,
+							j.value ? ["size-7 rounded-8 ring-1 ring-inset", M.value.ring] : ["size-8 rounded-10 border", M.value.border],
+							c.headerSize === "small" ? "[:where(&)_svg]:size-3.5" : "[:where(&)_svg]:size-4"
+						]]),
 						"aria-hidden": "true"
-					}, [u(e.$slots, "icon", {}, () => [(l(), r(d(s.icon), { class: c(A.value ? "size-3.5" : "size-4") }, null, 8, ["class"]))])], 2)) : i("", !0), o("div", _, [o("div", v, [s.title ? (l(), a("h3", {
+					}, [d(e.$slots, "icon", {}, () => [(u(), r(f(c.icon), { class: l(c.headerSize === "small" ? "size-3.5" : "size-4") }, null, 8, ["class"]))])], 2)) : i("", !0), o("div", _, [o("div", { class: l(["flex flex-wrap items-center", A.value ? "gap-2.5" : "gap-2"]) }, [c.title ? (u(), r(f(c.titleTag), {
 						key: 0,
-						class: c(["truncate font-heading font-semibold tracking-tight text-heading", A.value ? "text-base" : "text-lg leading-tight"])
-					}, f(s.title), 3)) : i("", !0), u(e.$slots, "badges")]), e.$slots.description ? (l(), a("div", y, [u(e.$slots, "description")])) : M.value ? (l(), a("p", b, f(M.value), 1)) : i("", !0)])]),
-					e.$slots.actions ? (l(), a("div", x, [u(e.$slots, "actions")])) : i("", !0)
+						class: l(["truncate font-heading font-semibold tracking-tight text-heading", j.value ? "text-base" : "text-lg leading-tight"])
+					}, {
+						default: h(() => [s(p(c.title), 1)]),
+						_: 1
+					}, 8, ["class"])) : i("", !0), d(e.$slots, "badges")], 2), e.$slots.description ? (u(), a("div", v, [d(e.$slots, "description")])) : N.value ? (u(), a("p", y, p(N.value), 1)) : i("", !0)])], 2),
+					e.$slots.actions ? (u(), a("div", b, [d(e.$slots, "actions")])) : i("", !0)
 				], 2)) : i("", !0),
-				I() ? (l(), a("div", {
+				R() ? (u(), a("div", {
 					key: 1,
-					class: c(["flex-1", R()])
-				}, [u(e.$slots, "default")], 2)) : i("", !0),
-				e.$slots.footer ? (l(), a("footer", {
+					class: l(["flex-1", B()])
+				}, [d(e.$slots, "default")], 2)) : i("", !0),
+				e.$slots.footer ? (u(), a("footer", {
 					key: 2,
-					class: c(["flex flex-wrap items-center gap-3 border-t border-border py-3 text-base text-muted", s.padding ? E[s.padding] : A.value ? "px-5" : "px-6"])
-				}, [u(e.$slots, "footer")], 2)) : i("", !0)
+					class: l(["flex flex-wrap items-center gap-3 border-t border-border py-3 text-base text-muted", c.padding ? E[c.padding] : j.value ? "px-5" : "px-6"])
+				}, [d(e.$slots, "footer")], 2)) : i("", !0)
 			]),
 			_: 3
 		}, 8, ["class"]));
 	}
 });
 //#endregion
-export { S as default };
+export { x as default };