@bobbykim/mcl-cards 0.6.0 → 0.7.1

package/dist/mcl-cards.js

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

package/dist/mcl-cards.umd.cjs

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

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "@bobbykim/mcl-cards",
-  "version": "0.6.0",
-  "description": "",
+  "version": "0.7.1",
+  "description": "card components based on @bobbykim/manguito-theme",
   "type": "module",
-  "main": "index.ts",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/mcl-cards.umd.cjs",
+  "module": "./dist/mcl-cards.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/mcl-cards.js",
+      "require": "./dist/mcl-cards.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
-    "build": "vue-tsc --project tsconfig.vue.json && tsc --project tsconfig.ts.json"
+    "build": "vite build"
   },
   "author": {
     "name": "Bobby Kim",
@@ -21,7 +33,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "^0.18.0"
+    "@bobbykim/manguito-theme": "0.20.0",
+    "vue": "^3.3.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.2",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.3",
+    "vite": "^4.5.1",
+    "vite-plugin-css-injected-by-js": "^3.5.0",
+    "vite-plugin-dts": "^3.8.3",
+    "vue-tsc": "^1.8.25"
   },
-  "gitHead": "969800695a9a902bc9d0c19ad6ab002caace8061"
+  "gitHead": "2e677770b8628a9616237cd3812af2dcb20ee5bb"
 }

package/CHANGELOG.md

@@ -1,67 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [0.6.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-cards@0.5.0...@bobbykim/mcl-cards@0.6.0) (2024-04-01)
-
-
-### Features
-
-* ready for production ([4e2fc04](https://github.com/bobbykim89/manguito-component-library/commit/4e2fc048edd67791b4e917e0a764f301d4c610cb))
-
-
-
-
-
-# [0.5.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-cards@0.3.0...@bobbykim/mcl-cards@0.5.0) (2024-03-24)
-
-
-### Features
-
-* build and release ([a372086](https://github.com/bobbykim89/manguito-component-library/commit/a3720861fb40dd6ec1d0e3dda1f06e2479967432))
-* code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
-* **components/*:** prepublish build ([c8eb95a](https://github.com/bobbykim89/manguito-component-library/commit/c8eb95a0ede6727bf183d2e9ad634ae64af1411d))
-* **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
-* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
-
-
-
-
-
-# [0.4.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-cards@0.3.0...@bobbykim/mcl-cards@0.4.0) (2024-03-21)
-
-
-### Features
-
-* code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
-* **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
-* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
-
-
-
-
-
-# [0.3.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-cards@0.2.0...@bobbykim/mcl-cards@0.3.0) (2024-02-27)
-
-
-### Features
-
-* **/components/**/README.md,/deprecated:** update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
-
-
-
-
-
-# 0.2.0 (2024-02-27)
-
-
-### Features
-
-* **.storybook,mcl-cards:** add opengraph configuration, add mcl-cards components ([13a255c](https://github.com/bobbykim89/manguito-component-library/commit/13a255c26048ccc56ed837ebac0281ee23aaa03e))
-* **manguito-theme,mcl-cards,mcl-header,mcl-footer,mcl-carousel:** add vueuse as one of dependencies, update code to make them ssr friendly ([119a327](https://github.com/bobbykim89/manguito-component-library/commit/119a327adf1ca9866e6ac063bce5acd4790db612))
-* **mcl-card-d:** update gradient handling method ([4adcd5d](https://github.com/bobbykim89/manguito-component-library/commit/4adcd5d8522a761485ff09e3334ed3cd2bb50ac1))
-* **mcl-card-d:** update prop name, add story file ([1c8e5a1](https://github.com/bobbykim89/manguito-component-library/commit/1c8e5a1fde09070e5366155b0d899cbc5d5348a4))
-* **mcl-cards:** update prop name, add story files ([d3b4609](https://github.com/bobbykim89/manguito-component-library/commit/d3b460968bfd4cb8213e29b16da8f615477e4487))
-* **stories/*:** ran package:build to build type declaration, move deprecated story files into deprecated folder ([ffc487d](https://github.com/bobbykim89/manguito-component-library/commit/ffc487dbcc093be7a3ccfeae98c5e10e8372a0e3))
-* **stories:** add story for mcl-card-b ([7470f0d](https://github.com/bobbykim89/manguito-component-library/commit/7470f0ddee5b3ba3c9f5c37e52bd37f6a1a75202))

package/index.d.ts

@@ -1,6 +0,0 @@
-import MclCardA from './lib/mcl-card-a/MclCardA.vue';
-import MclCardB from './lib/mcl-card-b/MclCardB.vue';
-import MclCardC from './lib/mcl-card-c/MclCardC.vue';
-import MclCardD from './lib/mcl-card-d/MclCardD.vue';
-export * from './lib/common/index.types';
-export { MclCardA, MclCardB, MclCardC, MclCardD };

package/index.js

@@ -1,6 +0,0 @@
-import MclCardA from './lib/mcl-card-a/MclCardA.vue';
-import MclCardB from './lib/mcl-card-b/MclCardB.vue';
-import MclCardC from './lib/mcl-card-c/MclCardC.vue';
-import MclCardD from './lib/mcl-card-d/MclCardD.vue';
-export * from './lib/common/index.types';
-export { MclCardA, MclCardB, MclCardC, MclCardD };

package/index.ts

@@ -1,7 +0,0 @@
-import MclCardA from './lib/mcl-card-a/MclCardA.vue'
-import MclCardB from './lib/mcl-card-b/MclCardB.vue'
-import MclCardC from './lib/mcl-card-c/MclCardC.vue'
-import MclCardD from './lib/mcl-card-d/MclCardD.vue'
-
-export * from './lib/common/index.types'
-export { MclCardA, MclCardB, MclCardC, MclCardD }

package/lib/common/index.types.d.ts

@@ -1,6 +0,0 @@
-import type { CtaTarget } from '@bobbykim/manguito-theme';
-export interface CardClickEvent {
-    title: string;
-    url: string;
-    target?: CtaTarget;
-}

package/lib/common/index.types.js

@@ -1 +0,0 @@
-export {};

package/lib/common/index.types.ts

@@ -1,7 +0,0 @@
-import type { CtaTarget } from '@bobbykim/manguito-theme'
-
-export interface CardClickEvent {
-  title: string
-  url: string
-  target?: CtaTarget
-}