@bobbykim/mcl-cards 0.8.4 → 0.9.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { BodyText } from '@bobbykim/manguito-theme';
 import { ColorPalette } from '@bobbykim/manguito-theme';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
@@ -14,6 +15,10 @@ titleSize?: HeadingSize;
 titleColor?: ColorPalette;
 borderColor?: ColorPalette;
 bgColor?: ColorPalette;
+fullWidth?: boolean;
+glass?: boolean;
+glassBlur?: BodyText;
+glassOpacity?: OpacityRange;
 displayImage?: boolean;
 imageSource?: string;
 imageAlt?: string;
@@ -41,6 +46,10 @@ titleSize?: HeadingSize;
 titleColor?: ColorPalette;
 borderColor?: ColorPalette;
 bgColor?: ColorPalette;
+fullWidth?: boolean;
+glass?: boolean;
+glassBlur?: BodyText;
+glassOpacity?: OpacityRange;
 displayImage?: boolean;
 imageSource?: string;
 imageAlt?: string;
@@ -67,6 +76,10 @@ titleSize: HeadingSize;
 titleColor: ColorPalette;
 borderColor: ColorPalette;
 bgColor: ColorPalette;
+fullWidth: boolean;
+glass: boolean;
+glassBlur: BodyText;
+glassOpacity: OpacityRange;
 displayImage: boolean;
 displayCta: boolean;
 ctaAsLink: boolean;

package/dist/mcl-cards.js

@@ -1,10 +1,10 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.content-height[data-v-9021bcb6]{height:calc(100% - 200px)}.perspective[data-v-0d2f293c]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-0d2f293c]{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(0deg);transform:rotateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-card[data-v-0d2f293c]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-390b5ad7]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);background:conic-gradient(from var(--border-angle, 0deg),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via),var(--tw-gradient-to));animation:bg-spin-390b5ad7 4s linear infinite}@keyframes bg-spin-390b5ad7{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-390b5ad7]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { defineComponent as B, useSlots as L, computed as p, createElementBlock as g, openBlock as m, normalizeClass as n, createCommentVNode as b, createElementVNode as s, unref as A, withModifiers as S, renderSlot as T, toDisplayString as w, ref as R, normalizeStyle as H } from "vue";
-import r from "@bobbykim/manguito-theme";
-const M = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.perspective[data-v-0d2f293c]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-0d2f293c]{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(0deg);transform:rotateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-card[data-v-0d2f293c]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-390b5ad7]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);background:conic-gradient(from var(--border-angle, 0deg),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via),var(--tw-gradient-to));animation:bg-spin-390b5ad7 4s linear infinite}@keyframes bg-spin-390b5ad7{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-390b5ad7]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { defineComponent as L, useSlots as T, computed as p, createElementBlock as g, openBlock as h, normalizeClass as n, createCommentVNode as b, createElementVNode as s, unref as _, withModifiers as S, renderSlot as O, toDisplayString as w, ref as H, normalizeStyle as M } from "vue";
+import r, { getGlassmorphismClass as E } from "@bobbykim/manguito-theme";
+const $ = {
   key: 0,
   class: "relative"
-}, E = ["src", "alt"], $ = ["innerHTML"], z = { class: "content-height flex flex-col justify-between" }, G = { class: "min-h-[100px] p-0" }, D = { class: "px-xs pt-sm" }, I = ["innerHTML"], X = ["innerHTML"], N = { class: "w-full px-xs" }, V = ["href", "target"], q = /* @__PURE__ */ B({
+}, z = ["src", "alt"], G = ["innerHTML"], D = { class: "flex h-full flex-col justify-between" }, I = { class: "px-xs pt-sm flex-1" }, X = ["innerHTML"], N = ["innerHTML"], W = { class: "px-xs w-full" }, V = ["href", "target"], at = /* @__PURE__ */ L({
   __name: "MclCardA",
   props: {
     title: {},
@@ -12,6 +12,10 @@ const M = {
     titleColor: { default: "dark-3" },
     borderColor: { default: "light-3" },
     bgColor: { default: "light-1" },
+    fullWidth: { type: Boolean, default: !1 },
+    glass: { type: Boolean, default: !1 },
+    glassBlur: { default: "sm" },
+    glassOpacity: { default: 20 },
     displayImage: { type: Boolean, default: !0 },
     imageSource: {},
     imageAlt: {},
@@ -34,109 +38,121 @@ const M = {
   emits: ["card-click", "card-btn-click"],
   setup(y, { emit: C }) {
     const i = y;
-    L();
-    const u = C, k = p(() => {
-      const { borderColor: t, bgColor: o, rounded: e, enlargeOnHover: l, displayShadow: h } = i, d = [
+    T();
+    const c = C, k = p(() => {
+      const {
+        borderColor: t,
+        bgColor: a,
+        rounded: e,
+        enlargeOnHover: o,
+        displayShadow: m,
+        glass: f,
+        glassBlur: x,
+        glassOpacity: A,
+        fullWidth: R
+      } = i;
+      return [
         r("BORDER", t),
-        r("BGCOLOR", o)
-      ];
-      return d.push(e ? "rounded-md" : "rounded-sm"), l && d.push("hover:scale-105 transition ease-in duration-300"), h && d.push("drop-shadow-md"), d.join(" ");
-    }), f = p(() => {
-      const { titleSize: t, titleColor: o, displayHighlight: e } = i, l = [
+        r("BGCOLOR", a),
+        !R && "max-w-[450px] sm:max-w-[350px]",
+        e ? "rounded-lg" : "rounded-sm",
+        o && "hover:scale-105 transition ease-in duration-300",
+        m && "drop-shadow-md",
+        f && E(a, x, A)
+      ].filter(Boolean).join(" ");
+    }), u = p(() => {
+      const { titleSize: t, titleColor: a, displayHighlight: e } = i;
+      return [
         r("H3", t),
-        r("TEXTCOLOR", o)
-      ];
-      return l.push(e ? "mb-2xs" : "mb-xs"), l.join(" ");
+        r("TEXTCOLOR", a),
+        e ? "mb-2xs" : "mb-xs"
+      ].filter(Boolean).join(" ");
     }), v = p(() => {
-      const { labelTextColor: t, labelColor: o } = i;
+      const { labelTextColor: t, labelColor: a } = i;
       return [
         r("TEXTCOLOR", t),
-        r("BGCOLOR", o)
-      ].join(" ");
-    }), x = p(() => {
-      const { ctaColor: t, rounded: o } = i, e = [r("BTNCOLOR", t)];
-      let h = ["light-1", "light-2", "light-3", "light-4"].includes(t) ? "text-black" : "text-white";
-      return e.push(h), o && e.push("btn-round"), e.join(" ");
-    }), a = (t) => {
-      const { title: o, ctaLink: e, ctaTarget: l, ctaAsLink: h } = i, d = {
-        title: o,
+        r("BGCOLOR", a)
+      ].filter(Boolean).join(" ");
+    }), B = p(() => {
+      const { ctaColor: t, rounded: a } = i, e = ["light-1", "light-2", "light-3", "light-4"];
+      return [
+        r("BTNCOLOR", t),
+        e.includes(t) ? "text-black" : "text-white",
+        a && "btn-round"
+      ].filter(Boolean).join(" ");
+    }), l = (t) => {
+      const { title: a, ctaLink: e, ctaTarget: o, ctaAsLink: m } = i, f = {
+        title: a,
         url: e,
-        target: l || "_self"
+        target: o || "_self"
       };
-      !h && t.preventDefault(), u("card-btn-click", t, d);
-    }, c = (t) => {
-      const { title: o, ctaLink: e, ctaTarget: l } = i;
-      u("card-click", t, {
-        title: o,
+      !m && t.preventDefault(), c("card-btn-click", t, f);
+    }, d = (t) => {
+      const { title: a, ctaLink: e, ctaTarget: o } = i;
+      c("card-click", t, {
+        title: a,
         url: e,
-        target: l || "_self"
+        target: o || "_self"
       });
     };
-    return (t, o) => (m(), g("div", {
-      class: n(["overflow-hidden border max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer", k.value]),
-      onClick: c
+    return (t, a) => (h(), g("div", {
+      class: n(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border", k.value]),
+      onClick: d
     }, [
-      t.displayImage ? (m(), g("div", M, [
+      t.displayImage ? (h(), g("div", $, [
         s("img", {
           src: t.imageSource,
           alt: t.imageAlt,
-          class: "object-cover object-top h-[220px] min-w-full"
-        }, null, 8, E),
-        t.displayLabel ? (m(), g("span", {
+          class: "aspect-video min-w-full object-cover object-top"
+        }, null, 8, z),
+        t.displayLabel ? (h(), g("span", {
           key: 0,
-          class: n(["py-3xs px-2xs ml-xs inline-block font-bold text-xs absolute bottom-0 translate-y-[50%]", v.value]),
+          class: n(["py-3xs px-2xs ml-xs absolute bottom-0 inline-block translate-y-[50%] text-xs font-bold", v.value]),
           innerHTML: t.labelText
-        }, null, 10, $)) : b("", !0)
+        }, null, 10, G)) : b("", !0)
       ])) : b("", !0),
-      s("div", z, [
-        s("div", G, [
-          s("div", D, [
-            !t.displayImage && t.displayLabel ? (m(), g("span", {
-              key: 0,
-              class: n(["py-3xs px-2xs mb-2xs inline-block font-bold text-xs", v.value]),
-              innerHTML: t.labelText
-            }, null, 10, I)) : b("", !0),
-            s("h3", {
-              class: n(f.value),
-              innerHTML: t.title
-            }, null, 10, X),
-            t.displayHighlight ? (m(), g("div", {
-              key: 1,
-              class: n(["mb-xs h-3xs w-md", A(r)("BGCOLOR", t.highlightColor)])
-            }, null, 2)) : b("", !0),
-            s("div", {
-              class: "mb-sm cursor-default",
-              onClick: o[0] || (o[0] = S(() => {
-              }, ["stop"]))
-            }, [
-              T(t.$slots, "default", {}, void 0, !0)
-            ])
+      s("div", D, [
+        s("div", I, [
+          !t.displayImage && t.displayLabel ? (h(), g("span", {
+            key: 0,
+            class: n(["py-3xs px-2xs mb-2xs inline-block text-xs font-bold", v.value]),
+            innerHTML: t.labelText
+          }, null, 10, X)) : b("", !0),
+          s("h3", {
+            class: n(u.value),
+            innerHTML: t.title
+          }, null, 10, N),
+          t.displayHighlight ? (h(), g("div", {
+            key: 1,
+            class: n(["mb-xs h-3xs w-md", _(r)("BGCOLOR", t.highlightColor)])
+          }, null, 2)) : b("", !0),
+          s("div", {
+            class: "mb-sm cursor-default",
+            onClick: a[0] || (a[0] = S(() => {
+            }, ["stop"]))
+          }, [
+            O(t.$slots, "default")
           ])
         ]),
-        t.displayCta ? (m(), g("div", {
+        t.displayCta ? (h(), g("div", {
           key: 0,
-          class: "pb-sm border-0 cursor-default",
-          onClick: o[2] || (o[2] = S(() => {
+          class: "pb-sm cursor-default border-0",
+          onClick: a[2] || (a[2] = S(() => {
           }, ["stop"]))
         }, [
-          s("div", N, [
+          s("div", W, [
             s("a", {
               href: t.ctaLink,
               target: t.ctaTarget,
-              class: n(["btn btn-full", x.value]),
-              onClick: o[1] || (o[1] = (e) => a(e))
+              class: n(["btn btn-full", B.value]),
+              onClick: a[1] || (a[1] = (e) => l(e))
             }, w(t.ctaText), 11, V)
           ])
         ])) : b("", !0)
       ])
     ], 2));
   }
-}), _ = (y, C) => {
-  const i = y.__vccOpts || y;
-  for (const [u, k] of C)
-    i[u] = k;
-  return i;
-}, lt = /* @__PURE__ */ _(q, [["__scopeId", "data-v-9021bcb6"]]), W = ["href", "target"], F = { class: "absolute z-[15] flex flex-col justify-end items-start inset-0 p-xs [@media(hover:hover)]:opacity-0 hover:opacity-100 peer transition-opacity duration-200" }, P = ["innerHTML"], Y = ["src", "alt"], ot = /* @__PURE__ */ B({
+}), q = ["href", "target"], F = { class: "absolute z-[15] flex flex-col justify-end items-start inset-0 p-xs [@media(hover:hover)]:opacity-0 hover:opacity-100 peer transition-opacity duration-200" }, P = ["innerHTML"], Y = ["src", "alt"], ot = /* @__PURE__ */ L({
   __name: "MclCardB",
   props: {
     title: {},
@@ -155,54 +171,54 @@ const M = {
   emits: ["card-click"],
   setup(y, { emit: C }) {
     const i = y;
-    L();
-    const u = C, k = p(() => {
-      const { borderColor: a, rounded: c } = i, t = [r("BORDER", a)];
-      return t.push(c ? "rounded-md" : "rounded-sm"), t.join(" ");
-    }), f = p(() => {
-      const { displayGrayScale: a } = i;
-      return a ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
+    T();
+    const c = C, k = p(() => {
+      const { borderColor: l, rounded: d } = i, t = [r("BORDER", l)];
+      return t.push(d ? "rounded-md" : "rounded-sm"), t.join(" ");
+    }), u = p(() => {
+      const { displayGrayScale: l } = i;
+      return l ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
     }), v = p(() => {
-      const { titleSize: a, titleColor: c, titleBlockColor: t } = i;
+      const { titleSize: l, titleColor: d, titleBlockColor: t } = i;
       return [
-        r("H3", a),
-        r("TEXTCOLOR", c),
+        r("H3", l),
+        r("TEXTCOLOR", d),
         r("BGCOLOR", t)
       ].join(" ");
-    }), x = (a) => {
-      const { title: c, ctaLink: t, ctaTarget: o, ctaAsLink: e } = i;
-      !e && a.preventDefault();
-      const l = {
-        title: c,
+    }), B = (l) => {
+      const { title: d, ctaLink: t, ctaTarget: a, ctaAsLink: e } = i;
+      !e && l.preventDefault();
+      const o = {
+        title: d,
         url: t,
-        target: o || "_self"
+        target: a || "_self"
       };
-      console.log(l), u("card-click", a, l);
+      console.log(o), c("card-click", l, o);
     };
-    return (a, c) => (m(), g("div", {
+    return (l, d) => (h(), g("div", {
       class: n(["relative max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer overflow-hidden border", k.value])
     }, [
       s("a", {
-        href: a.ctaLink,
-        target: a.ctaTarget,
-        onClick: c[0] || (c[0] = (t) => x(t))
+        href: l.ctaLink,
+        target: l.ctaTarget,
+        onClick: d[0] || (d[0] = (t) => B(t))
       }, [
         s("div", F, [
           s("h3", {
-            innerHTML: a.title,
+            innerHTML: l.title,
             class: n(["inline-block px-xs py-2xs mb-2xs pointer-events-none tracking-wide", v.value])
           }, null, 10, P),
-          T(a.$slots, "default")
+          O(l.$slots, "default")
         ]),
         s("img", {
-          src: a.imageSource,
-          alt: a.imageAlt,
-          class: n(["relative h-full w-full z-10 object-cover object-center aspect-[3/4] transition-all duration-200", f.value])
+          src: l.imageSource,
+          alt: l.imageAlt,
+          class: n(["relative h-full w-full z-10 object-cover object-center aspect-[3/4] transition-all duration-200", u.value])
         }, null, 10, Y)
-      ], 8, W)
+      ], 8, q)
     ], 2));
   }
-}), J = ["src", "alt"], K = /* @__PURE__ */ B({
+}), J = ["src", "alt"], K = /* @__PURE__ */ L({
   __name: "MclCardC",
   props: {
     imageSource: {},
@@ -219,54 +235,59 @@ const M = {
   emits: ["card-click"],
   setup(y, { emit: C }) {
     const i = y;
-    L();
-    const u = R(!1), k = C, f = p(() => {
-      const a = [r("BGCOLOR", i.cardColor)];
-      return u.value && a.push("flip-card"), a.join(" ");
+    T();
+    const c = H(!1), k = C, u = p(() => {
+      const l = [r("BGCOLOR", i.cardColor)];
+      return c.value && l.push("flip-card"), l.join(" ");
     }), v = p(() => {
       const {
-        titleSize: a,
-        titleColor: c,
+        titleSize: l,
+        titleColor: d,
         displayHighlight: t,
-        highlightColor: o,
+        highlightColor: a,
         highlightOpacity: e
-      } = i, l = [
-        r("H3", a),
-        r("TEXTCOLOR", c)
+      } = i, o = [
+        r("H3", l),
+        r("TEXTCOLOR", d)
       ];
-      return t && (l.push("px-xs py-2xs mb-2xs rounded"), l.push(r("BGCOLOR", o)), l.push(r("BGOPACITY", e))), l.join(" ");
-    }), x = (a) => {
-      a.preventDefault(), u.value && k("card-click", a), u.value = !0;
+      return t && (o.push("px-xs py-2xs mb-2xs rounded"), o.push(r("BGCOLOR", a)), o.push(r("BGOPACITY", e))), o.join(" ");
+    }), B = (l) => {
+      l.preventDefault(), c.value && k("card-click", l), c.value = !0;
     };
-    return (a, c) => (m(), g("div", {
-      class: n(["relative aspect-square card transition duration-[1600ms] max-h-[400px] overflow-hidden", f.value]),
-      onClick: x
+    return (l, d) => (h(), g("div", {
+      class: n(["relative aspect-square card transition duration-[1600ms] max-h-[400px] overflow-hidden", u.value]),
+      onClick: B
     }, [
       s("img", {
-        src: a.imageSource,
-        alt: a.imageAlt,
+        src: l.imageSource,
+        alt: l.imageAlt,
         class: n([
-          u.value ? "opacity-100" : "opacity-0",
+          c.value ? "opacity-100" : "opacity-0",
           "absolute w-full h-full object-cover object-center aspect-square transition-opacity delay-500 duration-[800ms]"
         ])
       }, null, 10, J),
       s("div", {
         class: n([
-          u.value ? "cursor-pointer opacity-100" : "opacity-0",
+          c.value ? "cursor-pointer opacity-100" : "opacity-0",
           "relative flex flex-col justify-end p-sm h-full transition delay-500 duration-[800ms]"
         ])
       }, [
-        a.displayTitle ? (m(), g("h3", {
+        l.displayTitle ? (h(), g("h3", {
           key: 0,
           class: n(["relative self-start", v.value])
         }, [
-          s("span", null, w(a.title), 1)
+          s("span", null, w(l.title), 1)
         ], 2)) : b("", !0),
-        T(a.$slots, "card-body", {}, void 0, !0)
+        O(l.$slots, "card-body", {}, void 0, !0)
       ], 2)
     ], 2));
   }
-}), rt = /* @__PURE__ */ _(K, [["__scopeId", "data-v-0d2f293c"]]), Q = { class: "flex flex-col overflow-hidden rounded-md" }, U = ["src", "alt"], Z = ["href", "target"], tt = /* @__PURE__ */ B({
+}), j = (y, C) => {
+  const i = y.__vccOpts || y;
+  for (const [c, k] of C)
+    i[c] = k;
+  return i;
+}, rt = /* @__PURE__ */ j(K, [["__scopeId", "data-v-0d2f293c"]]), Q = { class: "flex flex-col overflow-hidden rounded-md" }, U = ["src", "alt"], Z = ["href", "target"], tt = /* @__PURE__ */ L({
   __name: "MclCardD",
   props: {
     displayImage: { type: Boolean, default: !0 },
@@ -311,7 +332,7 @@ const M = {
       black: "from-black",
       white: "from-white",
       transparent: "from-transparent"
-    }, u = {
+    }, c = {
       primary: "via-primary",
       secondary: "via-secondary",
       success: "via-success",
@@ -347,58 +368,58 @@ const M = {
       black: "to-black",
       white: "to-white",
       transparent: "to-transparent"
-    }, f = y;
-    L();
-    const v = C, x = p(() => {
-      const { titleSize: e, titleColor: l } = f;
+    }, u = y;
+    T();
+    const v = C, B = p(() => {
+      const { titleSize: e, titleColor: o } = u;
       return [
         r("H2", e),
-        r("TEXTCOLOR", l)
+        r("TEXTCOLOR", o)
       ].join(" ");
-    }), a = p(() => {
-      const { ctaButton: e, ctaButtonColor: l, ctaButtonBlock: h } = f, d = [], O = ["light-1", "light-2", "light-3", "light-4"];
-      return e ? d.push("btn", r("BTNCOLOR", l)) : d.push("mcl-link"), e && h && d.push("btn-full"), e && !O.includes(l) && d.push("text-white"), d.join(" ");
-    }), c = p(() => ({
-      "--border-width": `${f.borderWidth}px`
+    }), l = p(() => {
+      const { ctaButton: e, ctaButtonColor: o, ctaButtonBlock: m } = u, f = [], x = ["light-1", "light-2", "light-3", "light-4"];
+      return e ? f.push("btn", r("BTNCOLOR", o)) : f.push("mcl-link"), e && m && f.push("btn-full"), e && !x.includes(o) && f.push("text-white"), f.join(" ");
+    }), d = p(() => ({
+      "--border-width": `${u.borderWidth}px`
     })), t = p(() => {
-      const e = i[f.borderColor], l = u[f.gradient1], h = k[f.gradient2];
+      const e = i[u.borderColor], o = c[u.gradient1], m = k[u.gradient2];
       return [
-        r("BORDER", f.borderColor),
+        r("BORDER", u.borderColor),
         e,
-        l,
-        h
+        o,
+        m
       ].join(" ");
-    }), o = (e) => {
-      const { title: l, ctaLink: h, ctaLinkTarget: d, ctaAsLink: O } = f, j = {
-        title: l,
-        url: h,
-        target: d || "_self"
+    }), a = (e) => {
+      const { title: o, ctaLink: m, ctaLinkTarget: f, ctaAsLink: x } = u, A = {
+        title: o,
+        url: m,
+        target: f || "_self"
       };
-      !O && e.preventDefault(), v("card-click", e, j);
+      !x && e.preventDefault(), v("card-click", e, A);
     };
-    return (e, l) => (m(), g("div", {
+    return (e, o) => (h(), g("div", {
       class: n(["card xs:w-auto w-full max-w-[450px] flex-shrink-0 flex-grow overflow-hidden rounded-md border from-20% sm:max-w-[350px]", t.value]),
-      style: H(c.value)
+      style: M(d.value)
     }, [
       s("div", Q, [
-        e.displayImage ? (m(), g("img", {
+        e.displayImage ? (h(), g("img", {
           key: 0,
           src: e.imageSource,
           class: "max-h-[200px] min-w-full object-cover object-top",
           alt: e.imageAlt
         }, null, 8, U)) : b("", !0),
         s("div", {
-          class: n(["p-xs", A(r)("BGCOLOR", e.bgColor)])
+          class: n(["p-xs", _(r)("BGCOLOR", e.bgColor)])
         }, [
           s("h3", {
-            class: n(["mb-xs", x.value])
+            class: n(["mb-xs", B.value])
           }, w(e.title), 3),
-          e.displayHighlight ? (m(), g("div", {
+          e.displayHighlight ? (h(), g("div", {
             key: 0,
-            class: n(["mb-xs h-3xs w-md", A(r)("BGCOLOR", e.highlightColor)])
+            class: n(["mb-xs h-3xs w-md", _(r)("BGCOLOR", e.highlightColor)])
           }, null, 2)) : b("", !0),
           s("div", null, [
-            T(e.$slots, "default", {}, void 0, !0)
+            O(e.$slots, "default", {}, void 0, !0)
           ]),
           s("div", {
             class: n(["mt-xs", { "mb-2xs": !e.ctaButton }])
@@ -406,17 +427,17 @@ const M = {
             s("a", {
               href: e.ctaLink,
               target: e.ctaLinkTarget,
-              class: n(a.value),
-              onClick: o
+              class: n(l.value),
+              onClick: a
             }, w(e.ctaText), 11, Z)
           ], 2)
         ], 2)
       ])
     ], 6));
   }
-}), st = /* @__PURE__ */ _(tt, [["__scopeId", "data-v-390b5ad7"]]);
+}), st = /* @__PURE__ */ j(tt, [["__scopeId", "data-v-390b5ad7"]]);
 export {
-  lt as MclCardA,
+  at as MclCardA,
   ot as MclCardB,
   rt as MclCardC,
   st as MclCardD

package/dist/mcl-cards.umd.cjs

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.content-height[data-v-9021bcb6]{height:calc(100% - 200px)}.perspective[data-v-0d2f293c]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-0d2f293c]{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(0deg);transform:rotateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-card[data-v-0d2f293c]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-390b5ad7]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);background:conic-gradient(from var(--border-angle, 0deg),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via),var(--tw-gradient-to));animation:bg-spin-390b5ad7 4s linear infinite}@keyframes bg-spin-390b5ad7{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-390b5ad7]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f.MclCards={},f.Vue,f.ManguitoTheme))})(this,function(f,t,i){"use strict";const B={key:0,class:"relative"},w=["src","alt"],x=["innerHTML"],E={class:"content-height flex flex-col justify-between"},L={class:"min-h-[100px] p-0"},T={class:"px-xs pt-sm"},O=["innerHTML"],S=["innerHTML"],_={class:"w-full px-xs"},A=["href","target"],N=t.defineComponent({__name:"MclCardA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},borderColor:{default:"light-3"},bgColor:{default:"light-1"},displayImage:{type:Boolean,default:!0},imageSource:{},imageAlt:{},displayCta:{type:Boolean,default:!0},ctaAsLink:{type:Boolean,default:!1},ctaText:{default:"cta text"},ctaColor:{default:"primary"},ctaLink:{default:"#"},ctaTarget:{default:"_self"},displayLabel:{type:Boolean,default:!0},labelText:{default:"Lorem ipsum"},labelTextColor:{default:"light-1"},labelColor:{default:"dark-4"},enlargeOnHover:{type:Boolean,default:!1},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},rounded:{type:Boolean,default:!0},displayShadow:{type:Boolean,default:!0}},emits:["card-click","card-btn-click"],setup(h,{emit:u}){const s=h;t.useSlots();const d=u,g=t.computed(()=>{const{borderColor:e,bgColor:r,rounded:l,enlargeOnHover:a,displayShadow:p}=s,n=[i("BORDER",e),i("BGCOLOR",r)];return n.push(l?"rounded-md":"rounded-sm"),a&&n.push("hover:scale-105 transition ease-in duration-300"),p&&n.push("drop-shadow-md"),n.join(" ")}),m=t.computed(()=>{const{titleSize:e,titleColor:r,displayHighlight:l}=s,a=[i("H3",e),i("TEXTCOLOR",r)];return a.push(l?"mb-2xs":"mb-xs"),a.join(" ")}),k=t.computed(()=>{const{labelTextColor:e,labelColor:r}=s;return[i("TEXTCOLOR",e),i("BGCOLOR",r)].join(" ")}),y=t.computed(()=>{const{ctaColor:e,rounded:r}=s,l=[i("BTNCOLOR",e)];let p=["light-1","light-2","light-3","light-4"].includes(e)?"text-black":"text-white";return l.push(p),r&&l.push("btn-round"),l.join(" ")}),o=e=>{const{title:r,ctaLink:l,ctaTarget:a,ctaAsLink:p}=s,n={title:r,url:l,target:a||"_self"};!p&&e.preventDefault(),d("card-btn-click",e,n)},c=e=>{const{title:r,ctaLink:l,ctaTarget:a}=s;d("card-click",e,{title:r,url:l,target:a||"_self"})};return(e,r)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["overflow-hidden border max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer",g.value]),onClick:c},[e.displayImage?(t.openBlock(),t.createElementBlock("div",B,[t.createElementVNode("img",{src:e.imageSource,alt:e.imageAlt,class:"object-cover object-top h-[220px] min-w-full"},null,8,w),e.displayLabel?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["py-3xs px-2xs ml-xs inline-block font-bold text-xs absolute bottom-0 translate-y-[50%]",k.value]),innerHTML:e.labelText},null,10,x)):t.createCommentVNode("",!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",E,[t.createElementVNode("div",L,[t.createElementVNode("div",T,[!e.displayImage&&e.displayLabel?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["py-3xs px-2xs mb-2xs inline-block font-bold text-xs",k.value]),innerHTML:e.labelText},null,10,O)):t.createCommentVNode("",!0),t.createElementVNode("h3",{class:t.normalizeClass(m.value),innerHTML:e.title},null,10,S),e.displayHighlight?(t.openBlock(),t.createElementBlock("div",{key:1,class:t.normalizeClass(["mb-xs h-3xs w-md",t.unref(i)("BGCOLOR",e.highlightColor)])},null,2)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:"mb-sm cursor-default",onClick:r[0]||(r[0]=t.withModifiers(()=>{},["stop"]))},[t.renderSlot(e.$slots,"default",{},void 0,!0)])])]),e.displayCta?(t.openBlock(),t.createElementBlock("div",{key:0,class:"pb-sm border-0 cursor-default",onClick:r[2]||(r[2]=t.withModifiers(()=>{},["stop"]))},[t.createElementVNode("div",_,[t.createElementVNode("a",{href:e.ctaLink,target:e.ctaTarget,class:t.normalizeClass(["btn btn-full",y.value]),onClick:r[1]||(r[1]=l=>o(l))},t.toDisplayString(e.ctaText),11,A)])])):t.createCommentVNode("",!0)])],2))}}),C=(h,u)=>{const s=h.__vccOpts||h;for(const[d,g]of u)s[d]=g;return s},V=C(N,[["__scopeId","data-v-9021bcb6"]]),z=["href","target"],j={class:"absolute z-[15] flex flex-col justify-end items-start inset-0 p-xs [@media(hover:hover)]:opacity-0 hover:opacity-100 peer transition-opacity duration-200"},M=["innerHTML"],R=["src","alt"],H=t.defineComponent({__name:"MclCardB",props:{title:{},titleSize:{default:"md"},titleColor:{default:"light-1"},titleBlockColor:{default:"dark-4"},borderColor:{default:"light-3"},imageSource:{},imageAlt:{},displayGrayScale:{type:Boolean,default:!0},ctaAsLink:{type:Boolean,default:!1},ctaLink:{default:"#"},ctaTarget:{default:"_self"},rounded:{type:Boolean,default:!1}},emits:["card-click"],setup(h,{emit:u}){const s=h;t.useSlots();const d=u,g=t.computed(()=>{const{borderColor:o,rounded:c}=s,e=[i("BORDER",o)];return e.push(c?"rounded-md":"rounded-sm"),e.join(" ")}),m=t.computed(()=>{const{displayGrayScale:o}=s;return o?"[@media(hover:hover)]:grayscale peer-hover:grayscale-0":""}),k=t.computed(()=>{const{titleSize:o,titleColor:c,titleBlockColor:e}=s;return[i("H3",o),i("TEXTCOLOR",c),i("BGCOLOR",e)].join(" ")}),y=o=>{const{title:c,ctaLink:e,ctaTarget:r,ctaAsLink:l}=s;!l&&o.preventDefault();const a={title:c,url:e,target:r||"_self"};console.log(a),d("card-click",o,a)};return(o,c)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["relative max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer overflow-hidden border",g.value])},[t.createElementVNode("a",{href:o.ctaLink,target:o.ctaTarget,onClick:c[0]||(c[0]=e=>y(e))},[t.createElementVNode("div",j,[t.createElementVNode("h3",{innerHTML:o.title,class:t.normalizeClass(["inline-block px-xs py-2xs mb-2xs pointer-events-none tracking-wide",k.value])},null,10,M),t.renderSlot(o.$slots,"default")]),t.createElementVNode("img",{src:o.imageSource,alt:o.imageAlt,class:t.normalizeClass(["relative h-full w-full z-10 object-cover object-center aspect-[3/4] transition-all duration-200",m.value])},null,10,R)],8,z)],2))}}),$=["src","alt"],D=C(t.defineComponent({__name:"MclCardC",props:{imageSource:{},imageAlt:{},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},displayHighlight:{type:Boolean,default:!1},highlightColor:{default:"light-3"},highlightOpacity:{default:80},displayTitle:{type:Boolean,default:!1},cardColor:{default:"primary"}},emits:["card-click"],setup(h,{emit:u}){const s=h;t.useSlots();const d=t.ref(!1),g=u,m=t.computed(()=>{const o=[i("BGCOLOR",s.cardColor)];return d.value&&o.push("flip-card"),o.join(" ")}),k=t.computed(()=>{const{titleSize:o,titleColor:c,displayHighlight:e,highlightColor:r,highlightOpacity:l}=s,a=[i("H3",o),i("TEXTCOLOR",c)];return e&&(a.push("px-xs py-2xs mb-2xs rounded"),a.push(i("BGCOLOR",r)),a.push(i("BGOPACITY",l))),a.join(" ")}),y=o=>{o.preventDefault(),d.value&&g("card-click",o),d.value=!0};return(o,c)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["relative aspect-square card transition duration-[1600ms] max-h-[400px] overflow-hidden",m.value]),onClick:y},[t.createElementVNode("img",{src:o.imageSource,alt:o.imageAlt,class:t.normalizeClass([d.value?"opacity-100":"opacity-0","absolute w-full h-full object-cover object-center aspect-square transition-opacity delay-500 duration-[800ms]"])},null,10,$),t.createElementVNode("div",{class:t.normalizeClass([d.value?"cursor-pointer opacity-100":"opacity-0","relative flex flex-col justify-end p-sm h-full transition delay-500 duration-[800ms]"])},[o.displayTitle?(t.openBlock(),t.createElementBlock("h3",{key:0,class:t.normalizeClass(["relative self-start",k.value])},[t.createElementVNode("span",null,t.toDisplayString(o.title),1)],2)):t.createCommentVNode("",!0),t.renderSlot(o.$slots,"card-body",{},void 0,!0)],2)],2))}}),[["__scopeId","data-v-0d2f293c"]]),G={class:"flex flex-col overflow-hidden rounded-md"},I=["src","alt"],X=["href","target"],q=C(t.defineComponent({__name:"MclCardD",props:{displayImage:{type:Boolean,default:!0},imageSource:{},imageAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-4"},bgColor:{default:"light-1"},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},ctaText:{default:"Read more"},ctaLink:{},ctaLinkTarget:{default:"_self"},ctaAsLink:{type:Boolean,default:!1},ctaButton:{type:Boolean,default:!1},ctaButtonColor:{default:"warning"},ctaButtonBlock:{type:Boolean,default:!1},borderWidth:{default:3},borderColor:{default:"light-3"},gradient1:{default:"primary"},gradient2:{default:"secondary"},customColor:{}},emits:["card-click"],setup(h,{emit:u}){const s={primary:"from-primary",secondary:"from-secondary",success:"from-success",info:"from-info",warning:"from-warning",danger:"from-danger","light-1":"from-light-1","light-2":"from-light-2","light-3":"from-light-3","light-4":"from-light-4","dark-1":"from-dark-1","dark-2":"from-dark-2","dark-3":"from-dark-3","dark-4":"from-dark-4",black:"from-black",white:"from-white",transparent:"from-transparent"},d={primary:"via-primary",secondary:"via-secondary",success:"via-success",info:"via-info",warning:"via-warning",danger:"via-danger","light-1":"via-light-1","light-2":"via-light-2","light-3":"via-light-3","light-4":"via-light-4","dark-1":"via-dark-1","dark-2":"via-dark-2","dark-3":"via-dark-3","dark-4":"via-dark-4",black:"via-black",white:"via-white",transparent:"via-transparent"},g={primary:"to-primary",secondary:"to-secondary",success:"to-success",info:"to-info",warning:"to-warning",danger:"to-danger","light-1":"to-light-1","light-2":"to-light-2","light-3":"to-light-3","light-4":"to-light-4","dark-1":"to-dark-1","dark-2":"to-dark-2","dark-3":"to-dark-3","dark-4":"to-dark-4",black:"to-black",white:"to-white",transparent:"to-transparent"},m=h;t.useSlots();const k=u,y=t.computed(()=>{const{titleSize:l,titleColor:a}=m;return[i("H2",l),i("TEXTCOLOR",a)].join(" ")}),o=t.computed(()=>{const{ctaButton:l,ctaButtonColor:a,ctaButtonBlock:p}=m,n=[],b=["light-1","light-2","light-3","light-4"];return l?n.push("btn",i("BTNCOLOR",a)):n.push("mcl-link"),l&&p&&n.push("btn-full"),l&&!b.includes(a)&&n.push("text-white"),n.join(" ")}),c=t.computed(()=>({"--border-width":`${m.borderWidth}px`})),e=t.computed(()=>{const l=s[m.borderColor],a=d[m.gradient1],p=g[m.gradient2];return[i("BORDER",m.borderColor),l,a,p].join(" ")}),r=l=>{const{title:a,ctaLink:p,ctaLinkTarget:n,ctaAsLink:b}=m,P={title:a,url:p,target:n||"_self"};!b&&l.preventDefault(),k("card-click",l,P)};return(l,a)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["card xs:w-auto w-full max-w-[450px] flex-shrink-0 flex-grow overflow-hidden rounded-md border from-20% sm:max-w-[350px]",e.value]),style:t.normalizeStyle(c.value)},[t.createElementVNode("div",G,[l.displayImage?(t.openBlock(),t.createElementBlock("img",{key:0,src:l.imageSource,class:"max-h-[200px] min-w-full object-cover object-top",alt:l.imageAlt},null,8,I)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(["p-xs",t.unref(i)("BGCOLOR",l.bgColor)])},[t.createElementVNode("h3",{class:t.normalizeClass(["mb-xs",y.value])},t.toDisplayString(l.title),3),l.displayHighlight?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["mb-xs h-3xs w-md",t.unref(i)("BGCOLOR",l.highlightColor)])},null,2)):t.createCommentVNode("",!0),t.createElementVNode("div",null,[t.renderSlot(l.$slots,"default",{},void 0,!0)]),t.createElementVNode("div",{class:t.normalizeClass(["mt-xs",{"mb-2xs":!l.ctaButton}])},[t.createElementVNode("a",{href:l.ctaLink,target:l.ctaLinkTarget,class:t.normalizeClass(o.value),onClick:r},t.toDisplayString(l.ctaText),11,X)],2)],2)])],6))}}),[["__scopeId","data-v-390b5ad7"]]);f.MclCardA=V,f.MclCardB=H,f.MclCardC=D,f.MclCardD=q,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.perspective[data-v-0d2f293c]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-0d2f293c]{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(0deg);transform:rotateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-card[data-v-0d2f293c]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-390b5ad7]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);background:conic-gradient(from var(--border-angle, 0deg),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via),var(--tw-gradient-to));animation:bg-spin-390b5ad7 4s linear infinite}@keyframes bg-spin-390b5ad7{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-390b5ad7]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f.MclCards={},f.Vue,f.ManguitoTheme))})(this,function(f,t,i){"use strict";const w={key:0,class:"relative"},x=["src","alt"],E=["innerHTML"],L={class:"flex h-full flex-col justify-between"},T={class:"px-xs pt-sm flex-1"},O=["innerHTML"],S=["innerHTML"],z={class:"px-xs w-full"},N=["href","target"],V=t.defineComponent({__name:"MclCardA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},borderColor:{default:"light-3"},bgColor:{default:"light-1"},fullWidth:{type:Boolean,default:!1},glass:{type:Boolean,default:!1},glassBlur:{default:"sm"},glassOpacity:{default:20},displayImage:{type:Boolean,default:!0},imageSource:{},imageAlt:{},displayCta:{type:Boolean,default:!0},ctaAsLink:{type:Boolean,default:!1},ctaText:{default:"cta text"},ctaColor:{default:"primary"},ctaLink:{default:"#"},ctaTarget:{default:"_self"},displayLabel:{type:Boolean,default:!0},labelText:{default:"Lorem ipsum"},labelTextColor:{default:"light-1"},labelColor:{default:"dark-4"},enlargeOnHover:{type:Boolean,default:!1},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},rounded:{type:Boolean,default:!0},displayShadow:{type:Boolean,default:!0}},emits:["card-click","card-btn-click"],setup(h,{emit:u}){const s=h;t.useSlots();const c=u,g=t.computed(()=>{const{borderColor:e,bgColor:a,rounded:l,enlargeOnHover:r,displayShadow:p,glass:m,glassBlur:C,glassOpacity:b,fullWidth:W}=s;return[i("BORDER",e),i("BGCOLOR",a),!W&&"max-w-[450px] sm:max-w-[350px]",l?"rounded-lg":"rounded-sm",r&&"hover:scale-105 transition ease-in duration-300",p&&"drop-shadow-md",m&&i.getGlassmorphismClass(a,C,b)].filter(Boolean).join(" ")}),d=t.computed(()=>{const{titleSize:e,titleColor:a,displayHighlight:l}=s;return[i("H3",e),i("TEXTCOLOR",a),l?"mb-2xs":"mb-xs"].filter(Boolean).join(" ")}),k=t.computed(()=>{const{labelTextColor:e,labelColor:a}=s;return[i("TEXTCOLOR",e),i("BGCOLOR",a)].filter(Boolean).join(" ")}),y=t.computed(()=>{const{ctaColor:e,rounded:a}=s,l=["light-1","light-2","light-3","light-4"];return[i("BTNCOLOR",e),l.includes(e)?"text-black":"text-white",a&&"btn-round"].filter(Boolean).join(" ")}),o=e=>{const{title:a,ctaLink:l,ctaTarget:r,ctaAsLink:p}=s,m={title:a,url:l,target:r||"_self"};!p&&e.preventDefault(),c("card-btn-click",e,m)},n=e=>{const{title:a,ctaLink:l,ctaTarget:r}=s;c("card-click",e,{title:a,url:l,target:r||"_self"})};return(e,a)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border",g.value]),onClick:n},[e.displayImage?(t.openBlock(),t.createElementBlock("div",w,[t.createElementVNode("img",{src:e.imageSource,alt:e.imageAlt,class:"aspect-video min-w-full object-cover object-top"},null,8,x),e.displayLabel?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["py-3xs px-2xs ml-xs absolute bottom-0 inline-block translate-y-[50%] text-xs font-bold",k.value]),innerHTML:e.labelText},null,10,E)):t.createCommentVNode("",!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",L,[t.createElementVNode("div",T,[!e.displayImage&&e.displayLabel?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["py-3xs px-2xs mb-2xs inline-block text-xs font-bold",k.value]),innerHTML:e.labelText},null,10,O)):t.createCommentVNode("",!0),t.createElementVNode("h3",{class:t.normalizeClass(d.value),innerHTML:e.title},null,10,S),e.displayHighlight?(t.openBlock(),t.createElementBlock("div",{key:1,class:t.normalizeClass(["mb-xs h-3xs w-md",t.unref(i)("BGCOLOR",e.highlightColor)])},null,2)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:"mb-sm cursor-default",onClick:a[0]||(a[0]=t.withModifiers(()=>{},["stop"]))},[t.renderSlot(e.$slots,"default")])]),e.displayCta?(t.openBlock(),t.createElementBlock("div",{key:0,class:"pb-sm cursor-default border-0",onClick:a[2]||(a[2]=t.withModifiers(()=>{},["stop"]))},[t.createElementVNode("div",z,[t.createElementVNode("a",{href:e.ctaLink,target:e.ctaTarget,class:t.normalizeClass(["btn btn-full",y.value]),onClick:a[1]||(a[1]=l=>o(l))},t.toDisplayString(e.ctaText),11,N)])])):t.createCommentVNode("",!0)])],2))}}),_=["href","target"],A={class:"absolute z-[15] flex flex-col justify-end items-start inset-0 p-xs [@media(hover:hover)]:opacity-0 hover:opacity-100 peer transition-opacity duration-200"},j=["innerHTML"],M=["src","alt"],R=t.defineComponent({__name:"MclCardB",props:{title:{},titleSize:{default:"md"},titleColor:{default:"light-1"},titleBlockColor:{default:"dark-4"},borderColor:{default:"light-3"},imageSource:{},imageAlt:{},displayGrayScale:{type:Boolean,default:!0},ctaAsLink:{type:Boolean,default:!1},ctaLink:{default:"#"},ctaTarget:{default:"_self"},rounded:{type:Boolean,default:!1}},emits:["card-click"],setup(h,{emit:u}){const s=h;t.useSlots();const c=u,g=t.computed(()=>{const{borderColor:o,rounded:n}=s,e=[i("BORDER",o)];return e.push(n?"rounded-md":"rounded-sm"),e.join(" ")}),d=t.computed(()=>{const{displayGrayScale:o}=s;return o?"[@media(hover:hover)]:grayscale peer-hover:grayscale-0":""}),k=t.computed(()=>{const{titleSize:o,titleColor:n,titleBlockColor:e}=s;return[i("H3",o),i("TEXTCOLOR",n),i("BGCOLOR",e)].join(" ")}),y=o=>{const{title:n,ctaLink:e,ctaTarget:a,ctaAsLink:l}=s;!l&&o.preventDefault();const r={title:n,url:e,target:a||"_self"};console.log(r),c("card-click",o,r)};return(o,n)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["relative max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer overflow-hidden border",g.value])},[t.createElementVNode("a",{href:o.ctaLink,target:o.ctaTarget,onClick:n[0]||(n[0]=e=>y(e))},[t.createElementVNode("div",A,[t.createElementVNode("h3",{innerHTML:o.title,class:t.normalizeClass(["inline-block px-xs py-2xs mb-2xs pointer-events-none tracking-wide",k.value])},null,10,j),t.renderSlot(o.$slots,"default")]),t.createElementVNode("img",{src:o.imageSource,alt:o.imageAlt,class:t.normalizeClass(["relative h-full w-full z-10 object-cover object-center aspect-[3/4] transition-all duration-200",d.value])},null,10,M)],8,_)],2))}}),H=["src","alt"],$=t.defineComponent({__name:"MclCardC",props:{imageSource:{},imageAlt:{},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},displayHighlight:{type:Boolean,default:!1},highlightColor:{default:"light-3"},highlightOpacity:{default:80},displayTitle:{type:Boolean,default:!1},cardColor:{default:"primary"}},emits:["card-click"],setup(h,{emit:u}){const s=h;t.useSlots();const c=t.ref(!1),g=u,d=t.computed(()=>{const o=[i("BGCOLOR",s.cardColor)];return c.value&&o.push("flip-card"),o.join(" ")}),k=t.computed(()=>{const{titleSize:o,titleColor:n,displayHighlight:e,highlightColor:a,highlightOpacity:l}=s,r=[i("H3",o),i("TEXTCOLOR",n)];return e&&(r.push("px-xs py-2xs mb-2xs rounded"),r.push(i("BGCOLOR",a)),r.push(i("BGOPACITY",l))),r.join(" ")}),y=o=>{o.preventDefault(),c.value&&g("card-click",o),c.value=!0};return(o,n)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["relative aspect-square card transition duration-[1600ms] max-h-[400px] overflow-hidden",d.value]),onClick:y},[t.createElementVNode("img",{src:o.imageSource,alt:o.imageAlt,class:t.normalizeClass([c.value?"opacity-100":"opacity-0","absolute w-full h-full object-cover object-center aspect-square transition-opacity delay-500 duration-[800ms]"])},null,10,H),t.createElementVNode("div",{class:t.normalizeClass([c.value?"cursor-pointer opacity-100":"opacity-0","relative flex flex-col justify-end p-sm h-full transition delay-500 duration-[800ms]"])},[o.displayTitle?(t.openBlock(),t.createElementBlock("h3",{key:0,class:t.normalizeClass(["relative self-start",k.value])},[t.createElementVNode("span",null,t.toDisplayString(o.title),1)],2)):t.createCommentVNode("",!0),t.renderSlot(o.$slots,"card-body",{},void 0,!0)],2)],2))}}),B=(h,u)=>{const s=h.__vccOpts||h;for(const[c,g]of u)s[c]=g;return s},D=B($,[["__scopeId","data-v-0d2f293c"]]),G={class:"flex flex-col overflow-hidden rounded-md"},I=["src","alt"],X=["href","target"],q=B(t.defineComponent({__name:"MclCardD",props:{displayImage:{type:Boolean,default:!0},imageSource:{},imageAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-4"},bgColor:{default:"light-1"},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},ctaText:{default:"Read more"},ctaLink:{},ctaLinkTarget:{default:"_self"},ctaAsLink:{type:Boolean,default:!1},ctaButton:{type:Boolean,default:!1},ctaButtonColor:{default:"warning"},ctaButtonBlock:{type:Boolean,default:!1},borderWidth:{default:3},borderColor:{default:"light-3"},gradient1:{default:"primary"},gradient2:{default:"secondary"},customColor:{}},emits:["card-click"],setup(h,{emit:u}){const s={primary:"from-primary",secondary:"from-secondary",success:"from-success",info:"from-info",warning:"from-warning",danger:"from-danger","light-1":"from-light-1","light-2":"from-light-2","light-3":"from-light-3","light-4":"from-light-4","dark-1":"from-dark-1","dark-2":"from-dark-2","dark-3":"from-dark-3","dark-4":"from-dark-4",black:"from-black",white:"from-white",transparent:"from-transparent"},c={primary:"via-primary",secondary:"via-secondary",success:"via-success",info:"via-info",warning:"via-warning",danger:"via-danger","light-1":"via-light-1","light-2":"via-light-2","light-3":"via-light-3","light-4":"via-light-4","dark-1":"via-dark-1","dark-2":"via-dark-2","dark-3":"via-dark-3","dark-4":"via-dark-4",black:"via-black",white:"via-white",transparent:"via-transparent"},g={primary:"to-primary",secondary:"to-secondary",success:"to-success",info:"to-info",warning:"to-warning",danger:"to-danger","light-1":"to-light-1","light-2":"to-light-2","light-3":"to-light-3","light-4":"to-light-4","dark-1":"to-dark-1","dark-2":"to-dark-2","dark-3":"to-dark-3","dark-4":"to-dark-4",black:"to-black",white:"to-white",transparent:"to-transparent"},d=h;t.useSlots();const k=u,y=t.computed(()=>{const{titleSize:l,titleColor:r}=d;return[i("H2",l),i("TEXTCOLOR",r)].join(" ")}),o=t.computed(()=>{const{ctaButton:l,ctaButtonColor:r,ctaButtonBlock:p}=d,m=[],C=["light-1","light-2","light-3","light-4"];return l?m.push("btn",i("BTNCOLOR",r)):m.push("mcl-link"),l&&p&&m.push("btn-full"),l&&!C.includes(r)&&m.push("text-white"),m.join(" ")}),n=t.computed(()=>({"--border-width":`${d.borderWidth}px`})),e=t.computed(()=>{const l=s[d.borderColor],r=c[d.gradient1],p=g[d.gradient2];return[i("BORDER",d.borderColor),l,r,p].join(" ")}),a=l=>{const{title:r,ctaLink:p,ctaLinkTarget:m,ctaAsLink:C}=d,b={title:r,url:p,target:m||"_self"};!C&&l.preventDefault(),k("card-click",l,b)};return(l,r)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["card xs:w-auto w-full max-w-[450px] flex-shrink-0 flex-grow overflow-hidden rounded-md border from-20% sm:max-w-[350px]",e.value]),style:t.normalizeStyle(n.value)},[t.createElementVNode("div",G,[l.displayImage?(t.openBlock(),t.createElementBlock("img",{key:0,src:l.imageSource,class:"max-h-[200px] min-w-full object-cover object-top",alt:l.imageAlt},null,8,I)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(["p-xs",t.unref(i)("BGCOLOR",l.bgColor)])},[t.createElementVNode("h3",{class:t.normalizeClass(["mb-xs",y.value])},t.toDisplayString(l.title),3),l.displayHighlight?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["mb-xs h-3xs w-md",t.unref(i)("BGCOLOR",l.highlightColor)])},null,2)):t.createCommentVNode("",!0),t.createElementVNode("div",null,[t.renderSlot(l.$slots,"default",{},void 0,!0)]),t.createElementVNode("div",{class:t.normalizeClass(["mt-xs",{"mb-2xs":!l.ctaButton}])},[t.createElementVNode("a",{href:l.ctaLink,target:l.ctaLinkTarget,class:t.normalizeClass(o.value),onClick:a},t.toDisplayString(l.ctaText),11,X)],2)],2)])],6))}}),[["__scopeId","data-v-390b5ad7"]]);f.MclCardA=V,f.MclCardB=R,f.MclCardC=D,f.MclCardD=q,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/mcl-cards",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "card components based on @bobbykim/manguito-theme",
   "type": "module",
   "files": [
@@ -33,7 +33,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "0.26.0",
+    "@bobbykim/manguito-theme": "0.28.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {
@@ -45,5 +45,5 @@
     "vite-plugin-dts": "^4.3.0",
     "vue-tsc": "^2.1.10"
   },
-  "gitHead": "6cc7d9ea39279a8c924a0d4ef29a021f9e6463a6"
+  "gitHead": "c2d96267d7ae249fba7d58cdf8a69cbba218567e"
 }