@bobbykim/mcl-cards 0.10.6 → 0.10.8
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 +2 -2
- package/dist/mcl-cards.umd.cjs +2 -2
- package/package.json +2 -2
package/dist/mcl-cards.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.perspective[data-v-2c67f772]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-2c67f772]{-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-2c67f772]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.perspective[data-v-2c67f772]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-2c67f772]{-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-2c67f772]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-4d1a4e7d]{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-4d1a4e7d 4s linear infinite}@keyframes bg-spin-4d1a4e7d{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-4d1a4e7d]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@media(prefers-reduced-motion:reduce){.card[data-v-4d1a4e7d]{animation:none}}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
2
|
import { defineComponent as L, computed as g, openBlock as m, createElementBlock as C, normalizeClass as c, createElementVNode as s, createCommentVNode as x, unref as V, withModifiers as S, renderSlot as T, toDisplayString as B, ref as M, normalizeStyle as z } from "vue";
|
|
3
3
|
import { generateClass as i } from "@bobbykim/manguito-theme";
|
|
4
4
|
import { getGlassmorphismClass as $ } from "@bobbykim/manguito-theme/util";
|
|
@@ -435,7 +435,7 @@ const E = {
|
|
|
435
435
|
])
|
|
436
436
|
], 6));
|
|
437
437
|
}
|
|
438
|
-
}), it = /* @__PURE__ */ j(_, [["__scopeId", "data-v-
|
|
438
|
+
}), it = /* @__PURE__ */ j(_, [["__scopeId", "data-v-4d1a4e7d"]]);
|
|
439
439
|
export {
|
|
440
440
|
lt as MclCardA,
|
|
441
441
|
ot as MclCardB,
|
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('.perspective[data-v-2c67f772]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-2c67f772]{-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-2c67f772]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-
|
|
2
|
-
(function(g,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@bobbykim/manguito-theme"),require("@bobbykim/manguito-theme/util")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme","@bobbykim/manguito-theme/util"],t):(g=typeof globalThis<"u"?globalThis:g||self,t(g.MclCards={},g.Vue,g.ManguitoTheme,g.ManguitoThemeUtil))})(this,(function(g,t,s,w){"use strict";const B={key:0,class:"relative"},V=["src","alt"],E=["innerHTML"],z={class:"flex h-full flex-col justify-between"},L={class:"flex-1 px-xs pt-sm"},S=["innerHTML"],N=["innerHTML"],A={class:"w-full px-xs"},j=["href","target"],M=t.defineComponent({__name:"MclCardA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},borderColor:{default:"light-3"},bgColor:{default:"light-1"},fullWidth:{type:Boolean,default:!1},glass:{type:Boolean,default:!1},glassBlur:{default:"sm"},glassOpacity:{default:20},showImage:{type:Boolean,default:!0},imageSource:{},imageAlt:{},showCta:{type:Boolean,default:!0},ctaAsLink:{type:Boolean,default:!1},ctaText:{default:"cta text"},ctaColor:{default:"primary"},ctaLink:{default:"#"},ctaTarget:{default:"_self"},showLabel:{type:Boolean,default:!0},labelText:{default:"Lorem ipsum"},labelTextColor:{default:"light-1"},labelColor:{default:"dark-4"},enlargeOnHover:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},rounded:{type:Boolean,default:!0},showShadow:{type:Boolean,default:!0}},emits:["card-click","card-btn-click"],setup(e,{emit:C}){const i=e,d=C,u=t.computed(()=>{const{borderColor:l,bgColor:o,rounded:a,enlargeOnHover:n,showShadow:h,glass:m,glassBlur:y,glassOpacity:p,fullWidth:U}=i;return[s.generateClass.borderColorVariant({color:l}),s.generateClass.bgColorVariant({color:o}),!U&&"max-w-[450px] sm:max-w-[350px]",a?"rounded-lg":"rounded-sm",n&&"hover:scale-105 transition ease-in duration-300",h&&"drop-shadow-md",m&&w.getGlassmorphismClass(o,y,p)].filter(Boolean).join(" ")}),f=t.computed(()=>{const{titleSize:l,titleColor:o,showHighlight:a}=i;return[s.generateClass.h3Variant({size:l}),s.generateClass.textColorVariant({color:o}),a?"mb-2xs":"mb-xs"].filter(Boolean).join(" ")}),k=t.computed(()=>{const{labelTextColor:l,labelColor:o}=i;return[s.generateClass.textColorVariant({color:l}),s.generateClass.bgColorVariant({color:o})].filter(Boolean).join(" ")}),b=t.computed(()=>{const{ctaColor:l,rounded:o}=i,a=["light-1","light-2","light-3","light-4"];return[s.generateClass.btnColorVariant({color:l}),a.includes(l)?"text-black":"text-white",o&&"btn-round"].filter(Boolean).join(" ")}),r=l=>{const{title:o,ctaLink:a,ctaTarget:n,ctaAsLink:h}=i,m={title:o,url:a,target:n||"_self"};h||l.preventDefault(),d("card-btn-click",l,m)},c=l=>{const{title:o,ctaLink:a,ctaTarget:n}=i;d("card-click",l,{title:o,url:a,target:n||"_self"})};return(l,o)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border",u.value]),onClick:c},[e.showImage?(t.openBlock(),t.createElementBlock("div",B,[t.createElementVNode("img",{src:e.imageSource,alt:e.imageAlt,class:"aspect-video min-w-full object-cover object-top"},null,8,V),e.showLabel?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["absolute bottom-0 ml-xs inline-block translate-y-[50%] px-2xs py-3xs text-xs font-bold",k.value]),innerHTML:e.labelText},null,10,E)):t.createCommentVNode("",!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",z,[t.createElementVNode("div",L,[!e.showImage&&e.showLabel?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["mb-2xs inline-block px-2xs py-3xs text-xs font-bold",k.value]),innerHTML:e.labelText},null,10,S)):t.createCommentVNode("",!0),t.createElementVNode("h3",{class:t.normalizeClass(f.value),innerHTML:e.title},null,10,N),e.showHighlight?(t.openBlock(),t.createElementBlock("div",{key:1,class:t.normalizeClass(["mb-xs h-3xs w-md",t.unref(s.generateClass).bgColorVariant({color:e.highlightColor})])},null,2)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:"mb-sm cursor-default",onClick:o[0]||(o[0]=t.withModifiers(()=>{},["stop"]))},[t.renderSlot(l.$slots,"default")])]),e.showCta?(t.openBlock(),t.createElementBlock("div",{key:0,class:"cursor-default border-0 pb-sm",onClick:o[2]||(o[2]=t.withModifiers(()=>{},["stop"]))},[t.createElementVNode("div",A,[t.createElementVNode("a",{href:e.ctaLink,target:e.ctaTarget,class:t.normalizeClass(["btn btn-full",b.value]),onClick:o[1]||(o[1]=a=>r(a))},t.toDisplayString(e.ctaText),11,j)])])):t.createCommentVNode("",!0)])],2))}}),H=["href","target"],$={class:"peer absolute inset-0 z-15 flex flex-col items-start justify-end p-xs transition-opacity duration-200 hover:opacity-100 [@media(hover:hover)]:opacity-0"},T=["innerHTML"],D=["src","alt"],O=t.defineComponent({__name:"MclCardB",props:{title:{},titleSize:{default:"md"},titleColor:{default:"light-1"},titleBlockColor:{default:"dark-4"},borderColor:{default:"light-3"},imageSource:{},imageAlt:{},showGrayScale:{type:Boolean,default:!0},ctaAsLink:{type:Boolean,default:!1},ctaLink:{default:"#"},ctaTarget:{default:"_self"},rounded:{type:Boolean,default:!1}},emits:["card-click"],setup(e,{emit:C}){const i=e,d=C,u=t.computed(()=>{const{borderColor:r,rounded:c}=i,l=[s.generateClass.borderColorVariant({color:r})];return l.push(c?"rounded-md":"rounded-sm"),l.join(" ")}),f=t.computed(()=>{const{showGrayScale:r}=i;return r?"[@media(hover:hover)]:grayscale peer-hover:grayscale-0":""}),k=t.computed(()=>{const{titleSize:r,titleColor:c,titleBlockColor:l}=i;return[s.generateClass.h3Variant({size:r}),s.generateClass.textColorVariant({color:c}),s.generateClass.bgColorVariant({color:l})].join(" ")}),b=r=>{const{title:c,ctaLink:l,ctaTarget:o,ctaAsLink:a}=i;a||r.preventDefault(),d("card-click",r,{title:c,url:l,target:o||"_self"})};return(r,c)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["xs:w-auto relative w-full max-w-112.5 shrink-0 grow cursor-pointer overflow-hidden border sm:max-w-87.5",u.value])},[t.createElementVNode("a",{href:e.ctaLink,target:e.ctaTarget,onClick:c[0]||(c[0]=l=>b(l))},[t.createElementVNode("div",$,[t.createElementVNode("h3",{innerHTML:e.title,class:t.normalizeClass(["pointer-events-none mb-2xs inline-block px-xs py-2xs tracking-wide",k.value])},null,10,T),t.renderSlot(r.$slots,"default")]),t.createElementVNode("img",{src:e.imageSource,alt:e.imageAlt,class:t.normalizeClass(["relative z-10 aspect-3/4 h-full w-full object-cover object-center transition-all duration-200",f.value])},null,10,D)],8,H)],2))}}),I=["src","alt"],q=t.defineComponent({__name:"MclCardC",props:{imageSource:{},imageAlt:{},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},showHighlight:{type:Boolean,default:!1},highlightColor:{default:"light-3"},highlightOpacity:{default:80},showTitle:{type:Boolean,default:!1},cardColor:{default:"primary"}},emits:["card-click"],setup(e,{emit:C}){const i=e,d=t.ref(!1),u=C,f=t.computed(()=>{const r=[s.generateClass.bgColorVariant({color:i.cardColor})];return d.value&&r.push("flip-card"),r.join(" ")}),k=t.computed(()=>{const{titleSize:r,titleColor:c,showHighlight:l,highlightColor:o,highlightOpacity:a}=i,n=[s.generateClass.h3Variant({size:r}),s.generateClass.textColorVariant({color:c})];return l&&(n.push("px-xs py-2xs mb-2xs rounded"),n.push(s.generateClass.bgColorVariant({color:o})),n.push(s.generateClass.bgOpacityVariant({opacity:a}))),n.join(" ")}),b=r=>{r.preventDefault(),d.value&&u("card-click",r),d.value=!0};return(r,c)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["card relative aspect-square max-h-100 overflow-hidden transition duration-1600",f.value]),onClick:b},[t.createElementVNode("img",{src:e.imageSource,alt:e.imageAlt,class:t.normalizeClass([d.value?"opacity-100":"opacity-0","absolute aspect-square h-full w-full object-cover object-center transition-opacity delay-500 duration-800"])},null,10,I),t.createElementVNode("div",{class:t.normalizeClass([d.value?"cursor-pointer opacity-100":"opacity-0","relative flex h-full flex-col justify-end p-sm transition delay-500 duration-800"])},[e.showTitle?(t.openBlock(),t.createElementBlock("h3",{key:0,class:t.normalizeClass(["relative self-start",k.value])},[t.createElementVNode("span",null,t.toDisplayString(e.title),1)],2)):t.createCommentVNode("",!0),t.renderSlot(r.$slots,"card-body",{},void 0,!0)],2)],2))}}),x=(e,C)=>{const i=e.__vccOpts||e;for(const[d,u]of C)i[d]=u;return i},W=x(q,[["__scopeId","data-v-2c67f772"]]),G={class:"flex flex-col overflow-hidden rounded-md"},F=["src","alt"],P=["href","target"],R=x(t.defineComponent({__name:"MclCardD",props:{showImage:{type:Boolean,default:!0},imageSource:{},imageAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-4"},bgColor:{default:"light-1"},showHighlight:{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(e,{emit:C}){const i={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"},f=e,k=C,b=t.computed(()=>{const{titleSize:a,titleColor:n}=f;return[s.generateClass.h2Variant({size:a}),s.generateClass.textColorVariant({color:n})].join(" ")}),r=t.computed(()=>{const{ctaButton:a,ctaButtonColor:n,ctaButtonBlock:h}=f,m=[],y=["light-1","light-2","light-3","light-4"];return a?m.push("btn",s.generateClass.btnColorVariant({color:n})):m.push("mcl-link"),a&&h&&m.push("btn-full"),a&&!y.includes(n)&&m.push("text-white"),m.join(" ")}),c=t.computed(()=>({"--border-width":`${f.borderWidth}px`})),l=t.computed(()=>{const a=i[f.borderColor],n=d[f.gradient1],h=u[f.gradient2];return[s.generateClass.borderColorVariant({color:f.borderColor}),a,n,h].join(" ")}),o=a=>{const{title:n,ctaLink:h,ctaLinkTarget:m,ctaAsLink:y}=f,p={title:n,url:h,target:m||"_self"};y||a.preventDefault(),k("card-click",a,p)};return(a,n)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["card xs:w-auto w-full max-w-112.5 shrink-0 grow overflow-hidden rounded-md border from-20% sm:max-w-87.5",l.value]),style:t.normalizeStyle(c.value)},[t.createElementVNode("div",G,[e.showImage?(t.openBlock(),t.createElementBlock("img",{key:0,src:e.imageSource,class:"max-h-50 min-w-full object-cover object-top",alt:e.imageAlt},null,8,F)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(["p-xs",t.unref(s.generateClass).bgColorVariant({color:e.bgColor})])},[t.createElementVNode("h3",{class:t.normalizeClass(["mb-xs",b.value])},t.toDisplayString(e.title),3),e.showHighlight?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["mb-xs h-3xs w-md",t.unref(s.generateClass).bgColorVariant({color:e.highlightColor})])},null,2)):t.createCommentVNode("",!0),t.createElementVNode("div",null,[t.renderSlot(a.$slots,"default",{},void 0,!0)]),t.createElementVNode("div",{class:t.normalizeClass(["mt-xs",{"mb-2xs":!e.ctaButton}])},[t.createElementVNode("a",{href:e.ctaLink,target:e.ctaLinkTarget,class:t.normalizeClass(r.value),onClick:o},t.toDisplayString(e.ctaText),11,P)],2)],2)])],6))}}),[["__scopeId","data-v-b6e2475b"]]);g.MclCardA=M,g.MclCardB=O,g.MclCardC=W,g.MclCardD=R,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.perspective[data-v-2c67f772]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-2c67f772]{-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-2c67f772]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-4d1a4e7d]{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-4d1a4e7d 4s linear infinite}@keyframes bg-spin-4d1a4e7d{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-4d1a4e7d]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@media(prefers-reduced-motion:reduce){.card[data-v-4d1a4e7d]{animation:none}}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
(function(g,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@bobbykim/manguito-theme"),require("@bobbykim/manguito-theme/util")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme","@bobbykim/manguito-theme/util"],t):(g=typeof globalThis<"u"?globalThis:g||self,t(g.MclCards={},g.Vue,g.ManguitoTheme,g.ManguitoThemeUtil))})(this,(function(g,t,s,w){"use strict";const B={key:0,class:"relative"},V=["src","alt"],E=["innerHTML"],z={class:"flex h-full flex-col justify-between"},L={class:"flex-1 px-xs pt-sm"},S=["innerHTML"],N=["innerHTML"],A={class:"w-full px-xs"},j=["href","target"],M=t.defineComponent({__name:"MclCardA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},borderColor:{default:"light-3"},bgColor:{default:"light-1"},fullWidth:{type:Boolean,default:!1},glass:{type:Boolean,default:!1},glassBlur:{default:"sm"},glassOpacity:{default:20},showImage:{type:Boolean,default:!0},imageSource:{},imageAlt:{},showCta:{type:Boolean,default:!0},ctaAsLink:{type:Boolean,default:!1},ctaText:{default:"cta text"},ctaColor:{default:"primary"},ctaLink:{default:"#"},ctaTarget:{default:"_self"},showLabel:{type:Boolean,default:!0},labelText:{default:"Lorem ipsum"},labelTextColor:{default:"light-1"},labelColor:{default:"dark-4"},enlargeOnHover:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},rounded:{type:Boolean,default:!0},showShadow:{type:Boolean,default:!0}},emits:["card-click","card-btn-click"],setup(e,{emit:C}){const i=e,d=C,u=t.computed(()=>{const{borderColor:l,bgColor:o,rounded:a,enlargeOnHover:n,showShadow:h,glass:m,glassBlur:y,glassOpacity:p,fullWidth:U}=i;return[s.generateClass.borderColorVariant({color:l}),s.generateClass.bgColorVariant({color:o}),!U&&"max-w-[450px] sm:max-w-[350px]",a?"rounded-lg":"rounded-sm",n&&"hover:scale-105 transition ease-in duration-300",h&&"drop-shadow-md",m&&w.getGlassmorphismClass(o,y,p)].filter(Boolean).join(" ")}),f=t.computed(()=>{const{titleSize:l,titleColor:o,showHighlight:a}=i;return[s.generateClass.h3Variant({size:l}),s.generateClass.textColorVariant({color:o}),a?"mb-2xs":"mb-xs"].filter(Boolean).join(" ")}),k=t.computed(()=>{const{labelTextColor:l,labelColor:o}=i;return[s.generateClass.textColorVariant({color:l}),s.generateClass.bgColorVariant({color:o})].filter(Boolean).join(" ")}),b=t.computed(()=>{const{ctaColor:l,rounded:o}=i,a=["light-1","light-2","light-3","light-4"];return[s.generateClass.btnColorVariant({color:l}),a.includes(l)?"text-black":"text-white",o&&"btn-round"].filter(Boolean).join(" ")}),r=l=>{const{title:o,ctaLink:a,ctaTarget:n,ctaAsLink:h}=i,m={title:o,url:a,target:n||"_self"};h||l.preventDefault(),d("card-btn-click",l,m)},c=l=>{const{title:o,ctaLink:a,ctaTarget:n}=i;d("card-click",l,{title:o,url:a,target:n||"_self"})};return(l,o)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border",u.value]),onClick:c},[e.showImage?(t.openBlock(),t.createElementBlock("div",B,[t.createElementVNode("img",{src:e.imageSource,alt:e.imageAlt,class:"aspect-video min-w-full object-cover object-top"},null,8,V),e.showLabel?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["absolute bottom-0 ml-xs inline-block translate-y-[50%] px-2xs py-3xs text-xs font-bold",k.value]),innerHTML:e.labelText},null,10,E)):t.createCommentVNode("",!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",z,[t.createElementVNode("div",L,[!e.showImage&&e.showLabel?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["mb-2xs inline-block px-2xs py-3xs text-xs font-bold",k.value]),innerHTML:e.labelText},null,10,S)):t.createCommentVNode("",!0),t.createElementVNode("h3",{class:t.normalizeClass(f.value),innerHTML:e.title},null,10,N),e.showHighlight?(t.openBlock(),t.createElementBlock("div",{key:1,class:t.normalizeClass(["mb-xs h-3xs w-md",t.unref(s.generateClass).bgColorVariant({color:e.highlightColor})])},null,2)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:"mb-sm cursor-default",onClick:o[0]||(o[0]=t.withModifiers(()=>{},["stop"]))},[t.renderSlot(l.$slots,"default")])]),e.showCta?(t.openBlock(),t.createElementBlock("div",{key:0,class:"cursor-default border-0 pb-sm",onClick:o[2]||(o[2]=t.withModifiers(()=>{},["stop"]))},[t.createElementVNode("div",A,[t.createElementVNode("a",{href:e.ctaLink,target:e.ctaTarget,class:t.normalizeClass(["btn btn-full",b.value]),onClick:o[1]||(o[1]=a=>r(a))},t.toDisplayString(e.ctaText),11,j)])])):t.createCommentVNode("",!0)])],2))}}),H=["href","target"],$={class:"peer absolute inset-0 z-15 flex flex-col items-start justify-end p-xs transition-opacity duration-200 hover:opacity-100 [@media(hover:hover)]:opacity-0"},T=["innerHTML"],D=["src","alt"],O=t.defineComponent({__name:"MclCardB",props:{title:{},titleSize:{default:"md"},titleColor:{default:"light-1"},titleBlockColor:{default:"dark-4"},borderColor:{default:"light-3"},imageSource:{},imageAlt:{},showGrayScale:{type:Boolean,default:!0},ctaAsLink:{type:Boolean,default:!1},ctaLink:{default:"#"},ctaTarget:{default:"_self"},rounded:{type:Boolean,default:!1}},emits:["card-click"],setup(e,{emit:C}){const i=e,d=C,u=t.computed(()=>{const{borderColor:r,rounded:c}=i,l=[s.generateClass.borderColorVariant({color:r})];return l.push(c?"rounded-md":"rounded-sm"),l.join(" ")}),f=t.computed(()=>{const{showGrayScale:r}=i;return r?"[@media(hover:hover)]:grayscale peer-hover:grayscale-0":""}),k=t.computed(()=>{const{titleSize:r,titleColor:c,titleBlockColor:l}=i;return[s.generateClass.h3Variant({size:r}),s.generateClass.textColorVariant({color:c}),s.generateClass.bgColorVariant({color:l})].join(" ")}),b=r=>{const{title:c,ctaLink:l,ctaTarget:o,ctaAsLink:a}=i;a||r.preventDefault(),d("card-click",r,{title:c,url:l,target:o||"_self"})};return(r,c)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["xs:w-auto relative w-full max-w-112.5 shrink-0 grow cursor-pointer overflow-hidden border sm:max-w-87.5",u.value])},[t.createElementVNode("a",{href:e.ctaLink,target:e.ctaTarget,onClick:c[0]||(c[0]=l=>b(l))},[t.createElementVNode("div",$,[t.createElementVNode("h3",{innerHTML:e.title,class:t.normalizeClass(["pointer-events-none mb-2xs inline-block px-xs py-2xs tracking-wide",k.value])},null,10,T),t.renderSlot(r.$slots,"default")]),t.createElementVNode("img",{src:e.imageSource,alt:e.imageAlt,class:t.normalizeClass(["relative z-10 aspect-3/4 h-full w-full object-cover object-center transition-all duration-200",f.value])},null,10,D)],8,H)],2))}}),I=["src","alt"],q=t.defineComponent({__name:"MclCardC",props:{imageSource:{},imageAlt:{},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},showHighlight:{type:Boolean,default:!1},highlightColor:{default:"light-3"},highlightOpacity:{default:80},showTitle:{type:Boolean,default:!1},cardColor:{default:"primary"}},emits:["card-click"],setup(e,{emit:C}){const i=e,d=t.ref(!1),u=C,f=t.computed(()=>{const r=[s.generateClass.bgColorVariant({color:i.cardColor})];return d.value&&r.push("flip-card"),r.join(" ")}),k=t.computed(()=>{const{titleSize:r,titleColor:c,showHighlight:l,highlightColor:o,highlightOpacity:a}=i,n=[s.generateClass.h3Variant({size:r}),s.generateClass.textColorVariant({color:c})];return l&&(n.push("px-xs py-2xs mb-2xs rounded"),n.push(s.generateClass.bgColorVariant({color:o})),n.push(s.generateClass.bgOpacityVariant({opacity:a}))),n.join(" ")}),b=r=>{r.preventDefault(),d.value&&u("card-click",r),d.value=!0};return(r,c)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["card relative aspect-square max-h-100 overflow-hidden transition duration-1600",f.value]),onClick:b},[t.createElementVNode("img",{src:e.imageSource,alt:e.imageAlt,class:t.normalizeClass([d.value?"opacity-100":"opacity-0","absolute aspect-square h-full w-full object-cover object-center transition-opacity delay-500 duration-800"])},null,10,I),t.createElementVNode("div",{class:t.normalizeClass([d.value?"cursor-pointer opacity-100":"opacity-0","relative flex h-full flex-col justify-end p-sm transition delay-500 duration-800"])},[e.showTitle?(t.openBlock(),t.createElementBlock("h3",{key:0,class:t.normalizeClass(["relative self-start",k.value])},[t.createElementVNode("span",null,t.toDisplayString(e.title),1)],2)):t.createCommentVNode("",!0),t.renderSlot(r.$slots,"card-body",{},void 0,!0)],2)],2))}}),x=(e,C)=>{const i=e.__vccOpts||e;for(const[d,u]of C)i[d]=u;return i},W=x(q,[["__scopeId","data-v-2c67f772"]]),G={class:"flex flex-col overflow-hidden rounded-md"},F=["src","alt"],P=["href","target"],R=x(t.defineComponent({__name:"MclCardD",props:{showImage:{type:Boolean,default:!0},imageSource:{},imageAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-4"},bgColor:{default:"light-1"},showHighlight:{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(e,{emit:C}){const i={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"},f=e,k=C,b=t.computed(()=>{const{titleSize:a,titleColor:n}=f;return[s.generateClass.h2Variant({size:a}),s.generateClass.textColorVariant({color:n})].join(" ")}),r=t.computed(()=>{const{ctaButton:a,ctaButtonColor:n,ctaButtonBlock:h}=f,m=[],y=["light-1","light-2","light-3","light-4"];return a?m.push("btn",s.generateClass.btnColorVariant({color:n})):m.push("mcl-link"),a&&h&&m.push("btn-full"),a&&!y.includes(n)&&m.push("text-white"),m.join(" ")}),c=t.computed(()=>({"--border-width":`${f.borderWidth}px`})),l=t.computed(()=>{const a=i[f.borderColor],n=d[f.gradient1],h=u[f.gradient2];return[s.generateClass.borderColorVariant({color:f.borderColor}),a,n,h].join(" ")}),o=a=>{const{title:n,ctaLink:h,ctaLinkTarget:m,ctaAsLink:y}=f,p={title:n,url:h,target:m||"_self"};y||a.preventDefault(),k("card-click",a,p)};return(a,n)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["card xs:w-auto w-full max-w-112.5 shrink-0 grow overflow-hidden rounded-md border from-20% sm:max-w-87.5",l.value]),style:t.normalizeStyle(c.value)},[t.createElementVNode("div",G,[e.showImage?(t.openBlock(),t.createElementBlock("img",{key:0,src:e.imageSource,class:"max-h-50 min-w-full object-cover object-top",alt:e.imageAlt},null,8,F)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(["p-xs",t.unref(s.generateClass).bgColorVariant({color:e.bgColor})])},[t.createElementVNode("h3",{class:t.normalizeClass(["mb-xs",b.value])},t.toDisplayString(e.title),3),e.showHighlight?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["mb-xs h-3xs w-md",t.unref(s.generateClass).bgColorVariant({color:e.highlightColor})])},null,2)):t.createCommentVNode("",!0),t.createElementVNode("div",null,[t.renderSlot(a.$slots,"default",{},void 0,!0)]),t.createElementVNode("div",{class:t.normalizeClass(["mt-xs",{"mb-2xs":!e.ctaButton}])},[t.createElementVNode("a",{href:e.ctaLink,target:e.ctaLinkTarget,class:t.normalizeClass(r.value),onClick:o},t.toDisplayString(e.ctaText),11,P)],2)],2)])],6))}}),[["__scopeId","data-v-4d1a4e7d"]]);g.MclCardA=M,g.MclCardB=O,g.MclCardC=W,g.MclCardD=R,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-cards",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.8",
|
|
4
4
|
"description": "card components based on @bobbykim/manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"license": "MIT",
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"vue": "^3.5.13",
|
|
34
|
-
"@bobbykim/manguito-theme": "1.
|
|
34
|
+
"@bobbykim/manguito-theme": "1.5.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@vitejs/plugin-vue": "^5.2.1",
|