@bobbykim/mcl-cards 0.8.3 → 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 +81 -81
- package/dist/mcl-cards.umd.cjs +2 -2
- package/package.json +5 -5
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-
|
|
2
|
-
import { defineComponent as B, useSlots as L, computed as
|
|
3
|
-
import
|
|
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,45 +35,45 @@ const M = {
|
|
|
35
35
|
setup(y, { emit: C }) {
|
|
36
36
|
const i = y;
|
|
37
37
|
L();
|
|
38
|
-
const u = C,
|
|
39
|
-
const { borderColor: t, bgColor:
|
|
40
|
-
|
|
41
|
-
|
|
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"),
|
|
44
|
-
}), f =
|
|
45
|
-
const { titleSize: t, titleColor:
|
|
46
|
-
|
|
47
|
-
|
|
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
|
-
}),
|
|
51
|
-
const { labelTextColor: t, labelColor:
|
|
50
|
+
}), v = p(() => {
|
|
51
|
+
const { labelTextColor: t, labelColor: o } = i;
|
|
52
52
|
return [
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
r("TEXTCOLOR", t),
|
|
54
|
+
r("BGCOLOR", o)
|
|
55
55
|
].join(" ");
|
|
56
|
-
}), x =
|
|
57
|
-
const { ctaColor: t, rounded:
|
|
58
|
-
let
|
|
59
|
-
return e.push(
|
|
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:
|
|
62
|
-
title:
|
|
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
|
-
!
|
|
66
|
+
!h && t.preventDefault(), u("card-btn-click", t, d);
|
|
67
67
|
}, c = (t) => {
|
|
68
|
-
const { title:
|
|
68
|
+
const { title: o, ctaLink: e, ctaTarget: l } = i;
|
|
69
69
|
u("card-click", t, {
|
|
70
|
-
title:
|
|
70
|
+
title: o,
|
|
71
71
|
url: e,
|
|
72
72
|
target: l || "_self"
|
|
73
73
|
});
|
|
74
74
|
};
|
|
75
|
-
return (t,
|
|
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",
|
|
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
79
|
t.displayImage ? (m(), g("div", M, [
|
|
@@ -84,7 +84,7 @@ const M = {
|
|
|
84
84
|
}, null, 8, E),
|
|
85
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%]",
|
|
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),
|
|
@@ -93,7 +93,7 @@ const M = {
|
|
|
93
93
|
s("div", D, [
|
|
94
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",
|
|
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", {
|
|
@@ -102,11 +102,11 @@ const M = {
|
|
|
102
102
|
}, null, 10, X),
|
|
103
103
|
t.displayHighlight ? (m(), g("div", {
|
|
104
104
|
key: 1,
|
|
105
|
-
class: n(["mb-xs h-3xs w-md", A(
|
|
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:
|
|
109
|
+
onClick: o[0] || (o[0] = S(() => {
|
|
110
110
|
}, ["stop"]))
|
|
111
111
|
}, [
|
|
112
112
|
T(t.$slots, "default", {}, void 0, !0)
|
|
@@ -116,7 +116,7 @@ const M = {
|
|
|
116
116
|
t.displayCta ? (m(), g("div", {
|
|
117
117
|
key: 0,
|
|
118
118
|
class: "pb-sm border-0 cursor-default",
|
|
119
|
-
onClick:
|
|
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:
|
|
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,
|
|
137
|
-
i[u] =
|
|
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"],
|
|
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,
|
|
160
|
-
const { borderColor: a, rounded: c } = i, t = [
|
|
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 =
|
|
162
|
+
}), f = p(() => {
|
|
163
163
|
const { displayGrayScale: a } = i;
|
|
164
164
|
return a ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
|
|
165
|
-
}),
|
|
165
|
+
}), v = p(() => {
|
|
166
166
|
const { titleSize: a, titleColor: c, titleBlockColor: t } = i;
|
|
167
167
|
return [
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
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:
|
|
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:
|
|
178
|
+
target: o || "_self"
|
|
179
179
|
};
|
|
180
180
|
console.log(l), u("card-click", a, l);
|
|
181
181
|
};
|
|
182
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",
|
|
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",
|
|
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,23 +220,23 @@ const M = {
|
|
|
220
220
|
setup(y, { emit: C }) {
|
|
221
221
|
const i = y;
|
|
222
222
|
L();
|
|
223
|
-
const u = R(!1),
|
|
224
|
-
const a = [
|
|
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
|
-
}),
|
|
226
|
+
}), v = p(() => {
|
|
227
227
|
const {
|
|
228
228
|
titleSize: a,
|
|
229
229
|
titleColor: c,
|
|
230
230
|
displayHighlight: t,
|
|
231
|
-
highlightColor:
|
|
231
|
+
highlightColor: o,
|
|
232
232
|
highlightOpacity: e
|
|
233
233
|
} = i, l = [
|
|
234
|
-
|
|
235
|
-
|
|
234
|
+
r("H3", a),
|
|
235
|
+
r("TEXTCOLOR", c)
|
|
236
236
|
];
|
|
237
|
-
return t && (l.push("px-xs py-2xs mb-2xs rounded"), l.push(
|
|
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 &&
|
|
239
|
+
a.preventDefault(), u.value && k("card-click", a), u.value = !0;
|
|
240
240
|
};
|
|
241
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]),
|
|
@@ -258,7 +258,7 @@ const M = {
|
|
|
258
258
|
}, [
|
|
259
259
|
a.displayTitle ? (m(), g("h3", {
|
|
260
260
|
key: 0,
|
|
261
|
-
class: n(["relative self-start",
|
|
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
|
-
}),
|
|
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
|
-
},
|
|
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
|
|
352
|
+
const v = C, x = p(() => {
|
|
353
353
|
const { titleSize: e, titleColor: l } = f;
|
|
354
354
|
return [
|
|
355
|
-
|
|
356
|
-
|
|
355
|
+
r("H2", e),
|
|
356
|
+
r("TEXTCOLOR", l)
|
|
357
357
|
].join(" ");
|
|
358
|
-
}), a =
|
|
359
|
-
const { ctaButton: e, ctaButtonColor: l, ctaButtonBlock:
|
|
360
|
-
return e ? d.push("btn",
|
|
361
|
-
}), c =
|
|
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 =
|
|
364
|
-
const e = i[f.borderColor], l = u[f.gradient1],
|
|
363
|
+
})), t = p(() => {
|
|
364
|
+
const e = i[f.borderColor], l = u[f.gradient1], h = k[f.gradient2];
|
|
365
365
|
return [
|
|
366
|
-
|
|
366
|
+
r("BORDER", f.borderColor),
|
|
367
367
|
e,
|
|
368
368
|
l,
|
|
369
|
-
|
|
369
|
+
h
|
|
370
370
|
].join(" ");
|
|
371
|
-
}),
|
|
372
|
-
const { title: l, ctaLink:
|
|
371
|
+
}), o = (e) => {
|
|
372
|
+
const { title: l, ctaLink: h, ctaLinkTarget: d, ctaAsLink: O } = f, j = {
|
|
373
373
|
title: l,
|
|
374
|
-
url:
|
|
374
|
+
url: h,
|
|
375
375
|
target: d || "_self"
|
|
376
376
|
};
|
|
377
|
-
!O && e.preventDefault(),
|
|
377
|
+
!O && e.preventDefault(), v("card-click", e, j);
|
|
378
378
|
};
|
|
379
379
|
return (e, l) => (m(), g("div", {
|
|
380
|
-
class: n(["card
|
|
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
384
|
e.displayImage ? (m(), g("img", {
|
|
385
385
|
key: 0,
|
|
386
386
|
src: e.imageSource,
|
|
387
|
-
class: "
|
|
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(
|
|
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
396
|
e.displayHighlight ? (m(), g("div", {
|
|
397
397
|
key: 0,
|
|
398
|
-
class: n(["mb-xs h-3xs w-md", A(
|
|
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:
|
|
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-
|
|
417
|
+
}), st = /* @__PURE__ */ _(tt, [["__scopeId", "data-v-390b5ad7"]]);
|
|
418
418
|
export {
|
|
419
419
|
lt as MclCardA,
|
|
420
|
-
|
|
421
|
-
|
|
420
|
+
ot as MclCardB,
|
|
421
|
+
rt as MclCardC,
|
|
422
422
|
st as MclCardD
|
|
423
423
|
};
|
package/dist/mcl-cards.umd.cjs
CHANGED
|
@@ -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-
|
|
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.
|
|
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.
|
|
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": "
|
|
48
|
+
"gitHead": "6cc7d9ea39279a8c924a0d4ef29a021f9e6463a6"
|
|
49
49
|
}
|