@bobbykim/mcl-cards 0.8.2 → 0.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/mcl-cards.js CHANGED
@@ -1,6 +1,6 @@
1
- (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]{perspective:1800px}.card[data-v-0d2f293c]{transform-style:preserve-3d;transform:rotateY(0);backface-visibility:hidden}.flip-card[data-v-0d2f293c]{transform:rotateY(360deg)}.card[data-v-237930d5]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);animation:bg-spin-237930d5 4s linear infinite}@keyframes bg-spin-237930d5{to{--border-angle: 360deg}}.card[data-v-237930d5]: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)}})();
2
- import { defineComponent as B, useSlots as L, computed as h, openBlock as g, createElementBlock as m, normalizeClass as n, createElementVNode as s, createCommentVNode as b, unref as A, withModifiers as S, renderSlot as T, toDisplayString as w, ref as R, normalizeStyle as H } from "vue";
3
- import o from "@bobbykim/manguito-theme";
1
+ (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)}})();
2
+ 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";
3
+ import r from "@bobbykim/manguito-theme";
4
4
  const M = {
5
5
  key: 0,
6
6
  class: "relative"
@@ -35,88 +35,88 @@ const M = {
35
35
  setup(y, { emit: C }) {
36
36
  const i = y;
37
37
  L();
38
- const u = C, v = h(() => {
39
- const { borderColor: t, bgColor: r, rounded: e, enlargeOnHover: l, displayShadow: p } = i, d = [
40
- o("BORDER", t),
41
- o("BGCOLOR", r)
38
+ const u = C, k = p(() => {
39
+ const { borderColor: t, bgColor: o, rounded: e, enlargeOnHover: l, displayShadow: h } = i, d = [
40
+ r("BORDER", t),
41
+ r("BGCOLOR", o)
42
42
  ];
43
- return d.push(e ? "rounded-md" : "rounded-sm"), l && d.push("hover:scale-105 transition ease-in duration-300"), p && d.push("drop-shadow-md"), d.join(" ");
44
- }), f = h(() => {
45
- const { titleSize: t, titleColor: r, displayHighlight: e } = i, l = [
46
- o("H3", t),
47
- o("TEXTCOLOR", r)
43
+ 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(" ");
44
+ }), f = p(() => {
45
+ const { titleSize: t, titleColor: o, displayHighlight: e } = i, l = [
46
+ r("H3", t),
47
+ r("TEXTCOLOR", o)
48
48
  ];
49
49
  return l.push(e ? "mb-2xs" : "mb-xs"), l.join(" ");
50
- }), k = h(() => {
51
- const { labelTextColor: t, labelColor: r } = i;
50
+ }), v = p(() => {
51
+ const { labelTextColor: t, labelColor: o } = i;
52
52
  return [
53
- o("TEXTCOLOR", t),
54
- o("BGCOLOR", r)
53
+ r("TEXTCOLOR", t),
54
+ r("BGCOLOR", o)
55
55
  ].join(" ");
56
- }), x = h(() => {
57
- const { ctaColor: t, rounded: r } = i, e = [o("BTNCOLOR", t)];
58
- let p = ["light-1", "light-2", "light-3", "light-4"].includes(t) ? "text-black" : "text-white";
59
- return e.push(p), r && e.push("btn-round"), e.join(" ");
56
+ }), x = p(() => {
57
+ const { ctaColor: t, rounded: o } = i, e = [r("BTNCOLOR", t)];
58
+ let h = ["light-1", "light-2", "light-3", "light-4"].includes(t) ? "text-black" : "text-white";
59
+ return e.push(h), o && e.push("btn-round"), e.join(" ");
60
60
  }), a = (t) => {
61
- const { title: r, ctaLink: e, ctaTarget: l, ctaAsLink: p } = i, d = {
62
- title: r,
61
+ const { title: o, ctaLink: e, ctaTarget: l, ctaAsLink: h } = i, d = {
62
+ title: o,
63
63
  url: e,
64
64
  target: l || "_self"
65
65
  };
66
- !p && t.preventDefault(), u("card-btn-click", t, d);
66
+ !h && t.preventDefault(), u("card-btn-click", t, d);
67
67
  }, c = (t) => {
68
- const { title: r, ctaLink: e, ctaTarget: l } = i;
68
+ const { title: o, ctaLink: e, ctaTarget: l } = i;
69
69
  u("card-click", t, {
70
- title: r,
70
+ title: o,
71
71
  url: e,
72
72
  target: l || "_self"
73
73
  });
74
74
  };
75
- return (t, r) => (g(), m("div", {
76
- class: n(["overflow-hidden border max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer", v.value]),
75
+ return (t, o) => (m(), g("div", {
76
+ 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]),
77
77
  onClick: c
78
78
  }, [
79
- t.displayImage ? (g(), m("div", M, [
79
+ t.displayImage ? (m(), g("div", M, [
80
80
  s("img", {
81
81
  src: t.imageSource,
82
82
  alt: t.imageAlt,
83
83
  class: "object-cover object-top h-[220px] min-w-full"
84
84
  }, null, 8, E),
85
- t.displayLabel ? (g(), m("span", {
85
+ t.displayLabel ? (m(), g("span", {
86
86
  key: 0,
87
- class: n(["py-3xs px-2xs ml-xs inline-block font-bold text-xs absolute bottom-0 translate-y-[50%]", k.value]),
87
+ class: n(["py-3xs px-2xs ml-xs inline-block font-bold text-xs absolute bottom-0 translate-y-[50%]", v.value]),
88
88
  innerHTML: t.labelText
89
89
  }, null, 10, $)) : b("", !0)
90
90
  ])) : b("", !0),
91
91
  s("div", z, [
92
92
  s("div", G, [
93
93
  s("div", D, [
94
- !t.displayImage && t.displayLabel ? (g(), m("span", {
94
+ !t.displayImage && t.displayLabel ? (m(), g("span", {
95
95
  key: 0,
96
- class: n(["py-3xs px-2xs mb-2xs inline-block font-bold text-xs", k.value]),
96
+ class: n(["py-3xs px-2xs mb-2xs inline-block font-bold text-xs", v.value]),
97
97
  innerHTML: t.labelText
98
98
  }, null, 10, I)) : b("", !0),
99
99
  s("h3", {
100
100
  class: n(f.value),
101
101
  innerHTML: t.title
102
102
  }, null, 10, X),
103
- t.displayHighlight ? (g(), m("div", {
103
+ t.displayHighlight ? (m(), g("div", {
104
104
  key: 1,
105
- class: n(["mb-xs h-3xs w-md", A(o)("BGCOLOR", t.highlightColor)])
105
+ class: n(["mb-xs h-3xs w-md", A(r)("BGCOLOR", t.highlightColor)])
106
106
  }, null, 2)) : b("", !0),
107
107
  s("div", {
108
108
  class: "mb-sm cursor-default",
109
- onClick: r[0] || (r[0] = S(() => {
109
+ onClick: o[0] || (o[0] = S(() => {
110
110
  }, ["stop"]))
111
111
  }, [
112
112
  T(t.$slots, "default", {}, void 0, !0)
113
113
  ])
114
114
  ])
115
115
  ]),
116
- t.displayCta ? (g(), m("div", {
116
+ t.displayCta ? (m(), g("div", {
117
117
  key: 0,
118
118
  class: "pb-sm border-0 cursor-default",
119
- onClick: r[2] || (r[2] = S(() => {
119
+ onClick: o[2] || (o[2] = S(() => {
120
120
  }, ["stop"]))
121
121
  }, [
122
122
  s("div", N, [
@@ -124,7 +124,7 @@ const M = {
124
124
  href: t.ctaLink,
125
125
  target: t.ctaTarget,
126
126
  class: n(["btn btn-full", x.value]),
127
- onClick: r[1] || (r[1] = (e) => a(e))
127
+ onClick: o[1] || (o[1] = (e) => a(e))
128
128
  }, w(t.ctaText), 11, V)
129
129
  ])
130
130
  ])) : b("", !0)
@@ -133,10 +133,10 @@ const M = {
133
133
  }
134
134
  }), _ = (y, C) => {
135
135
  const i = y.__vccOpts || y;
136
- for (const [u, v] of C)
137
- i[u] = v;
136
+ for (const [u, k] of C)
137
+ i[u] = k;
138
138
  return i;
139
- }, 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"], rt = /* @__PURE__ */ B({
139
+ }, 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({
140
140
  __name: "MclCardB",
141
141
  props: {
142
142
  title: {},
@@ -156,31 +156,31 @@ const M = {
156
156
  setup(y, { emit: C }) {
157
157
  const i = y;
158
158
  L();
159
- const u = C, v = h(() => {
160
- const { borderColor: a, rounded: c } = i, t = [o("BORDER", a)];
159
+ const u = C, k = p(() => {
160
+ const { borderColor: a, rounded: c } = i, t = [r("BORDER", a)];
161
161
  return t.push(c ? "rounded-md" : "rounded-sm"), t.join(" ");
162
- }), f = h(() => {
162
+ }), f = p(() => {
163
163
  const { displayGrayScale: a } = i;
164
164
  return a ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
165
- }), k = h(() => {
165
+ }), v = p(() => {
166
166
  const { titleSize: a, titleColor: c, titleBlockColor: t } = i;
167
167
  return [
168
- o("H3", a),
169
- o("TEXTCOLOR", c),
170
- o("BGCOLOR", t)
168
+ r("H3", a),
169
+ r("TEXTCOLOR", c),
170
+ r("BGCOLOR", t)
171
171
  ].join(" ");
172
172
  }), x = (a) => {
173
- const { title: c, ctaLink: t, ctaTarget: r, ctaAsLink: e } = i;
173
+ const { title: c, ctaLink: t, ctaTarget: o, ctaAsLink: e } = i;
174
174
  !e && a.preventDefault();
175
175
  const l = {
176
176
  title: c,
177
177
  url: t,
178
- target: r || "_self"
178
+ target: o || "_self"
179
179
  };
180
180
  console.log(l), u("card-click", a, l);
181
181
  };
182
- return (a, c) => (g(), m("div", {
183
- 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", v.value])
182
+ return (a, c) => (m(), g("div", {
183
+ 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])
184
184
  }, [
185
185
  s("a", {
186
186
  href: a.ctaLink,
@@ -190,7 +190,7 @@ const M = {
190
190
  s("div", F, [
191
191
  s("h3", {
192
192
  innerHTML: a.title,
193
- class: n(["inline-block px-xs py-2xs mb-2xs pointer-events-none tracking-wide", k.value])
193
+ class: n(["inline-block px-xs py-2xs mb-2xs pointer-events-none tracking-wide", v.value])
194
194
  }, null, 10, P),
195
195
  T(a.$slots, "default")
196
196
  ]),
@@ -220,25 +220,25 @@ const M = {
220
220
  setup(y, { emit: C }) {
221
221
  const i = y;
222
222
  L();
223
- const u = R(!1), v = C, f = h(() => {
224
- const a = [o("BGCOLOR", i.cardColor)];
223
+ const u = R(!1), k = C, f = p(() => {
224
+ const a = [r("BGCOLOR", i.cardColor)];
225
225
  return u.value && a.push("flip-card"), a.join(" ");
226
- }), k = h(() => {
226
+ }), v = p(() => {
227
227
  const {
228
228
  titleSize: a,
229
229
  titleColor: c,
230
230
  displayHighlight: t,
231
- highlightColor: r,
231
+ highlightColor: o,
232
232
  highlightOpacity: e
233
233
  } = i, l = [
234
- o("H3", a),
235
- o("TEXTCOLOR", c)
234
+ r("H3", a),
235
+ r("TEXTCOLOR", c)
236
236
  ];
237
- return t && (l.push("px-xs py-2xs mb-2xs rounded"), l.push(o("BGCOLOR", r)), l.push(o("BGOPACITY", e))), l.join(" ");
237
+ return t && (l.push("px-xs py-2xs mb-2xs rounded"), l.push(r("BGCOLOR", o)), l.push(r("BGOPACITY", e))), l.join(" ");
238
238
  }), x = (a) => {
239
- a.preventDefault(), u.value && v("card-click", a), u.value = !0;
239
+ a.preventDefault(), u.value && k("card-click", a), u.value = !0;
240
240
  };
241
- return (a, c) => (g(), m("div", {
241
+ return (a, c) => (m(), g("div", {
242
242
  class: n(["relative aspect-square card transition duration-[1600ms] max-h-[400px] overflow-hidden", f.value]),
243
243
  onClick: x
244
244
  }, [
@@ -256,9 +256,9 @@ const M = {
256
256
  "relative flex flex-col justify-end p-sm h-full transition delay-500 duration-[800ms]"
257
257
  ])
258
258
  }, [
259
- a.displayTitle ? (g(), m("h3", {
259
+ a.displayTitle ? (m(), g("h3", {
260
260
  key: 0,
261
- class: n(["relative self-start", k.value])
261
+ class: n(["relative self-start", v.value])
262
262
  }, [
263
263
  s("span", null, w(a.title), 1)
264
264
  ], 2)) : b("", !0),
@@ -266,7 +266,7 @@ const M = {
266
266
  ], 2)
267
267
  ], 2));
268
268
  }
269
- }), ot = /* @__PURE__ */ _(K, [["__scopeId", "data-v-0d2f293c"]]), Q = { class: "flex flex-col rounded-md overflow-hidden" }, U = ["src", "alt"], Z = ["href", "target"], tt = /* @__PURE__ */ B({
269
+ }), 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({
270
270
  __name: "MclCardD",
271
271
  props: {
272
272
  displayImage: { type: Boolean, default: !0 },
@@ -329,7 +329,7 @@ const M = {
329
329
  black: "via-black",
330
330
  white: "via-white",
331
331
  transparent: "via-transparent"
332
- }, v = {
332
+ }, k = {
333
333
  primary: "to-primary",
334
334
  secondary: "to-secondary",
335
335
  success: "to-success",
@@ -349,53 +349,53 @@ const M = {
349
349
  transparent: "to-transparent"
350
350
  }, f = y;
351
351
  L();
352
- const k = C, x = h(() => {
352
+ const v = C, x = p(() => {
353
353
  const { titleSize: e, titleColor: l } = f;
354
354
  return [
355
- o("H2", e),
356
- o("TEXTCOLOR", l)
355
+ r("H2", e),
356
+ r("TEXTCOLOR", l)
357
357
  ].join(" ");
358
- }), a = h(() => {
359
- const { ctaButton: e, ctaButtonColor: l, ctaButtonBlock: p } = f, d = [], O = ["light-1", "light-2", "light-3", "light-4"];
360
- return e ? d.push("btn", o("BTNCOLOR", l)) : d.push("mcl-link"), e && p && d.push("btn-full"), e && !O.includes(l) && d.push("text-white"), d.join(" ");
361
- }), c = h(() => ({
358
+ }), a = p(() => {
359
+ const { ctaButton: e, ctaButtonColor: l, ctaButtonBlock: h } = f, d = [], O = ["light-1", "light-2", "light-3", "light-4"];
360
+ 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(" ");
361
+ }), c = p(() => ({
362
362
  "--border-width": `${f.borderWidth}px`
363
- })), t = h(() => {
364
- const e = i[f.borderColor], l = u[f.gradient1], p = v[f.gradient2];
363
+ })), t = p(() => {
364
+ const e = i[f.borderColor], l = u[f.gradient1], h = k[f.gradient2];
365
365
  return [
366
- o("BORDER", f.borderColor),
366
+ r("BORDER", f.borderColor),
367
367
  e,
368
368
  l,
369
- p
369
+ h
370
370
  ].join(" ");
371
- }), r = (e) => {
372
- const { title: l, ctaLink: p, ctaLinkTarget: d, ctaAsLink: O } = f, j = {
371
+ }), o = (e) => {
372
+ const { title: l, ctaLink: h, ctaLinkTarget: d, ctaAsLink: O } = f, j = {
373
373
  title: l,
374
- url: p,
374
+ url: h,
375
375
  target: d || "_self"
376
376
  };
377
- !O && e.preventDefault(), k("card-click", e, j);
377
+ !O && e.preventDefault(), v("card-click", e, j);
378
378
  };
379
- return (e, l) => (g(), m("div", {
380
- class: n(["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]),
379
+ return (e, l) => (m(), g("div", {
380
+ 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]),
381
381
  style: H(c.value)
382
382
  }, [
383
383
  s("div", Q, [
384
- e.displayImage ? (g(), m("img", {
384
+ e.displayImage ? (m(), g("img", {
385
385
  key: 0,
386
386
  src: e.imageSource,
387
- class: "object-cover object-top max-h-[200px] min-w-full",
387
+ class: "max-h-[200px] min-w-full object-cover object-top",
388
388
  alt: e.imageAlt
389
389
  }, null, 8, U)) : b("", !0),
390
390
  s("div", {
391
- class: n(["p-xs", A(o)("BGCOLOR", e.bgColor)])
391
+ class: n(["p-xs", A(r)("BGCOLOR", e.bgColor)])
392
392
  }, [
393
393
  s("h3", {
394
394
  class: n(["mb-xs", x.value])
395
395
  }, w(e.title), 3),
396
- e.displayHighlight ? (g(), m("div", {
396
+ e.displayHighlight ? (m(), g("div", {
397
397
  key: 0,
398
- class: n(["mb-xs h-3xs w-md", A(o)("BGCOLOR", e.highlightColor)])
398
+ class: n(["mb-xs h-3xs w-md", A(r)("BGCOLOR", e.highlightColor)])
399
399
  }, null, 2)) : b("", !0),
400
400
  s("div", null, [
401
401
  T(e.$slots, "default", {}, void 0, !0)
@@ -407,17 +407,17 @@ const M = {
407
407
  href: e.ctaLink,
408
408
  target: e.ctaLinkTarget,
409
409
  class: n(a.value),
410
- onClick: r
410
+ onClick: o
411
411
  }, w(e.ctaText), 11, Z)
412
412
  ], 2)
413
413
  ], 2)
414
414
  ])
415
415
  ], 6));
416
416
  }
417
- }), st = /* @__PURE__ */ _(tt, [["__scopeId", "data-v-237930d5"]]);
417
+ }), st = /* @__PURE__ */ _(tt, [["__scopeId", "data-v-390b5ad7"]]);
418
418
  export {
419
419
  lt as MclCardA,
420
- rt as MclCardB,
421
- ot as MclCardC,
420
+ ot as MclCardB,
421
+ rt as MclCardC,
422
422
  st as MclCardD
423
423
  };
@@ -1,2 +1,2 @@
1
- (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]{perspective:1800px}.card[data-v-0d2f293c]{transform-style:preserve-3d;transform:rotateY(0);backface-visibility:hidden}.flip-card[data-v-0d2f293c]{transform:rotateY(360deg)}.card[data-v-237930d5]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);animation:bg-spin-237930d5 4s linear infinite}@keyframes bg-spin-237930d5{to{--border-angle: 360deg}}.card[data-v-237930d5]: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)}})();
2
- (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 rounded-md overflow-hidden"},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 [--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:t.normalizeStyle(c.value)},[t.createElementVNode("div",G,[l.displayImage?(t.openBlock(),t.createElementBlock("img",{key:0,src:l.imageSource,class:"object-cover object-top max-h-[200px] min-w-full",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-237930d5"]]);f.MclCardA=V,f.MclCardB=H,f.MclCardC=D,f.MclCardD=q,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
1
+ (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)}})();
2
+ (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"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bobbykim/mcl-cards",
3
- "version": "0.8.2",
3
+ "version": "0.8.4",
4
4
  "description": "card components based on @bobbykim/manguito-theme",
5
5
  "type": "module",
6
6
  "files": [
@@ -11,9 +11,9 @@
11
11
  "types": "./dist/index.d.ts",
12
12
  "exports": {
13
13
  ".": {
14
+ "types": "./dist/index.d.ts",
14
15
  "import": "./dist/mcl-cards.js",
15
- "require": "./dist/mcl-cards.umd.cjs",
16
- "types": "./dist/index.d.ts"
16
+ "require": "./dist/mcl-cards.umd.cjs"
17
17
  }
18
18
  },
19
19
  "scripts": {
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "license": "MIT",
35
35
  "dependencies": {
36
- "@bobbykim/manguito-theme": "0.24.0",
36
+ "@bobbykim/manguito-theme": "0.26.0",
37
37
  "vue": "^3.5.13"
38
38
  },
39
39
  "devDependencies": {
@@ -45,5 +45,5 @@
45
45
  "vite-plugin-dts": "^4.3.0",
46
46
  "vue-tsc": "^2.1.10"
47
47
  },
48
- "gitHead": "92ed1f261177034bd95ac0e3d60ba672e3473555"
48
+ "gitHead": "6cc7d9ea39279a8c924a0d4ef29a021f9e6463a6"
49
49
  }