npm - @bobbykim/mcl-carousel - Versions diffs - 0.7.2 → 0.8.0 - Mend

@bobbykim/mcl-carousel 0.7.2 → 0.8.0

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.

Files changed (4) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -1,106 +1,52 @@
 import { BodyText } from '@bobbykim/manguito-theme';
 import { ColorPalette } from '@bobbykim/manguito-theme';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { ComponentPublicInstance } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
 import { HeadingSize } from '@bobbykim/manguito-theme';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 import { SpacingLevel } from '@bobbykim/manguito-theme';
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-declare type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-export declare const MclCarouselA: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const __VLS_component: DefineComponent<    {
 title: string;
-titleSize?: HeadingSize | undefined;
-titleColor?: ColorPalette | undefined;
-bgColor?: ColorPalette | undefined;
-displayTagLine?: boolean | undefined;
-tagLineUpperCase?: boolean | undefined;
-tagLine?: string | undefined;
-tagLineSize?: BodyText | undefined;
-tagLineColor?: ColorPalette | undefined;
-displayHighlight?: boolean | undefined;
-highlightColor?: ColorPalette | undefined;
-btnColor?: ColorPalette | undefined;
-btnBgColor?: ColorPalette | undefined;
+titleSize?: HeadingSize;
+titleColor?: ColorPalette;
+bgColor?: ColorPalette;
+displayTagLine?: boolean;
+tagLineUpperCase?: boolean;
+tagLine?: string;
+tagLineSize?: BodyText;
+tagLineColor?: ColorPalette;
+displayHighlight?: boolean;
+highlightColor?: ColorPalette;
+btnColor?: ColorPalette;
+btnBgColor?: ColorPalette;
 content: any[];
-cardsGap?: SpacingLevel | undefined;
-}>, {
-titleSize: string;
-titleColor: string;
-bgColor: string;
-displayTagLine: boolean;
-tagLineUpperCase: boolean;
-tagLineSize: string;
-tagLineColor: string;
-displayHighlight: boolean;
-highlightColor: string;
-btnColor: string;
-btnBgColor: string;
-cardsGap: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"btn-prev": (event: Event) => void;
-"btn-next": (event: Event) => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+cardsGap?: SpacingLevel;
+}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"btn-prev": (event: Event) => any;
+"btn-next": (event: Event) => any;
+}, string, PublicProps, Readonly<{
 title: string;
-titleSize?: HeadingSize | undefined;
-titleColor?: ColorPalette | undefined;
-bgColor?: ColorPalette | undefined;
-displayTagLine?: boolean | undefined;
-tagLineUpperCase?: boolean | undefined;
-tagLine?: string | undefined;
-tagLineSize?: BodyText | undefined;
-tagLineColor?: ColorPalette | undefined;
-displayHighlight?: boolean | undefined;
-highlightColor?: ColorPalette | undefined;
-btnColor?: ColorPalette | undefined;
-btnBgColor?: ColorPalette | undefined;
+titleSize?: HeadingSize;
+titleColor?: ColorPalette;
+bgColor?: ColorPalette;
+displayTagLine?: boolean;
+tagLineUpperCase?: boolean;
+tagLine?: string;
+tagLineSize?: BodyText;
+tagLineColor?: ColorPalette;
+displayHighlight?: boolean;
+highlightColor?: ColorPalette;
+btnColor?: ColorPalette;
+btnBgColor?: ColorPalette;
 content: any[];
-cardsGap?: SpacingLevel | undefined;
-}>, {
-titleSize: string;
-titleColor: string;
-bgColor: string;
-displayTagLine: boolean;
-tagLineUpperCase: boolean;
-tagLineSize: string;
-tagLineColor: string;
-displayHighlight: boolean;
-highlightColor: string;
-btnColor: string;
-btnBgColor: string;
-cardsGap: string;
-}>>> & {
+cardsGap?: SpacingLevel;
+}> & Readonly<{
 "onBtn-prev"?: ((event: Event) => any) | undefined;
 "onBtn-next"?: ((event: Event) => any) | undefined;
-}, {
+}>, {
 titleSize: HeadingSize;
 titleColor: ColorPalette;
 bgColor: ColorPalette;
@@ -113,12 +59,30 @@ highlightColor: ColorPalette;
 btnColor: ColorPalette;
 btnBgColor: ColorPalette;
 cardsGap: SpacingLevel;
-}, {}>, {
-    description?(_: {}): any;
-    carousel?(_: {
-        cards: any[];
-        setRef: (el: Element | ComponentPublicInstance | null) => void;
-    }): any;
-}>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare function __VLS_template(): {
+    slots: {
+        description?(_: {}): any;
+        carousel?(_: {
+            cards: any[];
+            setRef: (el: ComponentPublicInstance | Element | null) => void;
+        }): any;
+    };
+    refs: {
+        slideContainer: HTMLDivElement;
+    };
+    attrs: Partial<{}>;
+};
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+export declare const MclCarouselA: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export { }

package/dist/mcl-carousel.js CHANGED Viewed

@@ -1,25 +1,7 @@
-import { defineComponent as A, ref as o, onMounted as G, openBlock as p, createElementBlock as f, normalizeClass as a, unref as g, createElementVNode as t, createCommentVNode as x, renderSlot as y } from "vue";
+import { defineComponent as G, ref as o, onMounted as S, openBlock as p, createElementBlock as f, normalizeClass as r, unref as g, createElementVNode as s, createCommentVNode as x, renderSlot as y } from "vue";
 import n from "@bobbykim/manguito-theme";
-import { useEventListener as L, useIntersectionObserver as S } from "@vueuse/core";
-const z = { class: "container px-xs sm:px-md text-center sm:text-left" }, H = { class: "relative" }, j = { class: "relative" }, X = ["innerHTML"], $ = ["innerHTML"], I = { class: "relative flex flex-wrap sm:flex-nowrap justify-center sm:justify-start items-center space-x-4 space-y-4" }, N = { class: "max-w-xl" }, D = { class: "flex space-x-4" }, U = ["disabled"], V = /* @__PURE__ */ t("svg", {
-  class: "w-xs h-xs",
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 384 512",
-  fill: "currentColor"
-}, [
-  /* @__PURE__ */ t("path", { d: "M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" })
-], -1), P = [
-  V
-], W = ["disabled"], Y = /* @__PURE__ */ t("svg", {
-  class: "w-xs h-xs",
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 384 512",
-  fill: "currentColor"
-}, [
-  /* @__PURE__ */ t("path", { d: "M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" })
-], -1), q = [
-  Y
-], F = { class: "container mt-md sm:mt-lg lg:mt-xl" }, Z = /* @__PURE__ */ A({
+import { useEventListener as L, useIntersectionObserver as z } from "@vueuse/core";
+const H = { class: "container px-xs sm:px-md text-center sm:text-left" }, j = { class: "relative" }, X = { class: "relative" }, $ = ["innerHTML"], I = ["innerHTML"], N = { class: "relative flex flex-wrap sm:flex-nowrap justify-center sm:justify-start items-center space-x-4 space-y-4" }, D = { class: "max-w-xl" }, U = { class: "flex space-x-4" }, V = ["disabled"], _ = ["disabled"], P = { class: "container mt-md sm:mt-lg lg:mt-xl" }, F = /* @__PURE__ */ G({
   __name: "MclCarouselA",
   props: {
     title: {},
@@ -40,7 +22,7 @@ const z = { class: "container px-xs sm:px-md text-center sm:text-left" }, H = {
   },
   emits: ["btn-prev", "btn-next"],
   setup(w, { emit: B }) {
-    const T = w, r = o(null), i = o([]), h = o(), v = B, d = o(0), c = o(!1);
+    const T = w, a = o(null), i = o([]), v = o(), m = B, d = o(0), c = o(!1);
     let u = !1;
     const O = (e) => {
       switch (e) {
@@ -67,84 +49,102 @@ const z = { class: "container px-xs sm:px-md text-center sm:text-left" }, H = {
       }
     }, k = (e) => {
       i.value.push(e);
-    }, m = (e, s) => {
+    }, h = (e, t) => {
       var l;
-      u || (u = !0, s === "prev" && (d.value--, v("btn-prev", e)), s === "next" && (d.value++, v("btn-next", e)), (l = r.value) == null || l.dispatchEvent(new Event("sliderMove")));
-    }, _ = (e, s) => [
+      u || (u = !0, t === "prev" && (d.value--, m("btn-prev", e)), t === "next" && (d.value++, m("btn-next", e)), (l = a.value) == null || l.dispatchEvent(new Event("sliderMove")));
+    }, M = (e, t) => [
       n("H2", e),
-      n("TEXTCOLOR", s)
-    ].join(" "), M = (e, s, l) => {
+      n("TEXTCOLOR", t)
+    ].join(" "), E = (e, t, l) => {
       const b = [
         n("BODYTEXT", e),
-        n("TEXTCOLOR", s)
+        n("TEXTCOLOR", t)
       ];
       return l && b.push("uppercase"), b.join(" ");
-    }, C = (e, s) => [
+    }, C = (e, t) => [
       n("TEXTCOLOR", e),
-      n("BGCOLOR", s),
-      n("RINGCOLOR", s)
-    ].join(" "), E = () => {
-      r.value.style.transform = `translateX(-${d.value * (i.value[0].$el.clientWidth + O(T.cardsGap) + 2)}px)`, c.value = !1;
-    }, R = () => {
+      n("BGCOLOR", t),
+      n("RINGCOLOR", t)
+    ].join(" "), R = () => {
+      a.value.style.transform = `translateX(-${d.value * (i.value[0].$el.clientWidth + O(T.cardsGap) + 2)}px)`, c.value = !1;
+    }, A = () => {
       u = !1;
     };
-    return L(r, "sliderMove", E), L(r, "transitionend", R), S(
-      h,
+    return L(a, "sliderMove", R), L(a, "transitionend", A), z(
+      v,
       (e) => {
         e[0].isIntersecting && (c.value = !0);
       },
       { threshold: 0.75 }
-    ), G(() => {
-      h.value = i.value[i.value.length - 1].$el;
-    }), (e, s) => (p(), f("section", {
-      class: a(["py-lg lg:py-xl overflow-hidden", g(n)("BGCOLOR", e.bgColor)])
+    ), S(() => {
+      v.value = i.value[i.value.length - 1].$el;
+    }), (e, t) => (p(), f("section", {
+      class: r(["py-lg lg:py-xl overflow-hidden", g(n)("BGCOLOR", e.bgColor)])
     }, [
-      t("div", z, [
-        t("div", H, [
+      s("div", H, [
+        s("div", j, [
           e.displayHighlight ? (p(), f("div", {
             key: 0,
-            class: a(["hidden sm:block absolute w-md bg-opacity-25 -left-4 h-full", g(n)("BGCOLOR", e.highlightColor)])
+            class: r(["hidden sm:block absolute w-md bg-opacity-25 -left-4 h-full", g(n)("BGCOLOR", e.highlightColor)])
           }, null, 2)) : x("", !0),
-          t("div", j, [
+          s("div", X, [
             e.displayTagLine ? (p(), f("span", {
               key: 0,
-              class: a([
+              class: r([
                 "tracking-widest",
-                M(e.tagLineSize, e.tagLineColor, e.tagLineUpperCase)
+                E(e.tagLineSize, e.tagLineColor, e.tagLineUpperCase)
               ]),
               innerHTML: e.tagLine
-            }, null, 10, X)) : x("", !0),
-            t("h2", {
-              class: a(["tracking-wide", _(e.titleSize, e.titleColor)]),
+            }, null, 10, $)) : x("", !0),
+            s("h2", {
+              class: r(["tracking-wide", M(e.titleSize, e.titleColor)]),
               innerHTML: e.title
-            }, null, 10, $)
+            }, null, 10, I)
           ]),
-          t("div", I, [
-            t("div", N, [
+          s("div", N, [
+            s("div", D, [
               y(e.$slots, "description")
             ]),
-            t("div", D, [
-              t("button", {
-                class: a(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200", C(e.btnColor, e.btnBgColor)]),
+            s("div", U, [
+              s("button", {
+                class: r(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200", C(e.btnColor, e.btnBgColor)]),
                 disabled: d.value === 0,
-                onClick: s[0] || (s[0] = (l) => m(l, "prev")),
+                onClick: t[0] || (t[0] = (l) => h(l, "prev")),
                 "aria-label": "previous"
-              }, P, 10, U),
-              t("button", {
-                class: a(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200", C(e.btnColor, e.btnBgColor)]),
+              }, t[2] || (t[2] = [
+                s("svg", {
+                  class: "w-xs h-xs",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 384 512",
+                  fill: "currentColor"
+                }, [
+                  s("path", { d: "M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" })
+                ], -1)
+              ]), 10, V),
+              s("button", {
+                class: r(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200", C(e.btnColor, e.btnBgColor)]),
                 disabled: c.value,
-                onClick: s[1] || (s[1] = (l) => m(l, "next")),
+                onClick: t[1] || (t[1] = (l) => h(l, "next")),
                 "aria-label": "next"
-              }, q, 10, W)
+              }, t[3] || (t[3] = [
+                s("svg", {
+                  class: "w-xs h-xs",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 384 512",
+                  fill: "currentColor"
+                }, [
+                  s("path", { d: "M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" })
+                ], -1)
+              ]), 10, _)
             ])
           ])
         ])
       ]),
-      t("div", F, [
-        t("div", {
-          class: a(["flex transition-transform duration-500 px-xs gap-xs", g(n)("GAP", e.cardsGap)]),
+      s("div", P, [
+        s("div", {
+          class: r(["flex transition-transform duration-500 px-xs gap-xs", g(n)("GAP", e.cardsGap)]),
           ref_key: "slideContainer",
-          ref: r
+          ref: a
         }, [
           y(e.$slots, "carousel", {
             cards: e.content,
@@ -156,5 +156,5 @@ const z = { class: "container px-xs sm:px-md text-center sm:text-left" }, H = {
   }
 });
 export {
-  Z as MclCarouselA
+  F as MclCarouselA
 };

package/dist/mcl-carousel.umd.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- (function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme","@vueuse/core"],e):(o=typeof globalThis<"u"?globalThis:o\|\|self,e(o.MclCarousel={},o.Vue,o.ManguitoTheme,o.core))})(this,function(o,e,n,d){"use strict";const C={class:"container px-xs sm:px-md text-center sm:text-left"},b={class:"relative"},y={class:"relative"},x=["innerHTML"],E=["innerHTML"],L={class:"relative flex flex-wrap sm:flex-nowrap justify-center sm:justify-start items-center space-x-4 space-y-4"},w={class:"max-w-xl"},B={class:"flex space-x-4"},T=["disabled"],k=[~~e.createElementVNode(~~"~~svg~~",{class:"w-xs h-xs",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor"},[e.createElementVNode("path",{d:"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"})]~~,-1)]~~,N=~~["disabled"],V=[e.createElementVNode("svg",~~{class:"w-xs h-xs",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor"},[e.createElementVNode("path",{d:"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"})],-1)],_={class:"container mt-md sm:mt-lg lg:mt-xl"},O=e.defineComponent({__name:"MclCarouselA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},bgColor:{default:"light-1"},displayTagLine:{type:Boolean,default:!0},tagLineUpperCase:{type:Boolean,default:!0},tagLine:{},tagLineSize:{default:"md"},tagLineColor:{default:"dark-1"},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},btnColor:{default:"dark-3"},btnBgColor:{default:"light-4"},content:{},cardsGap:{default:"xs"}},emits:["btn-prev","btn-next"],setup(M,{emit:z}){const v=M,r=e.ref(null),i=e.ref([]),u=e.ref(),m=z,a=e.ref(0),c=e.ref(!1);let f=!1;const S=t=>{switch(t){case"0":return 0;case"3xs":return 4;case"2xs":return 8;case"xs":return 16;case"sm":return 24;case"md":return 32;case"lg":return 48;case"xl":return 64;case"2xl":return 96;case"3xl":return 128}},R=t=>{i.value.push(t)},p=(t,s)=>{var l;f\|\|(f=!0,s==="prev"&&(a.value--,m("btn-prev",t)),s==="next"&&(a.value++,m("btn-next",t)),(l=r.value)==null\|\|l.dispatchEvent(new Event("sliderMove")))},A=(t,s)=>[n("H2",t),n("TEXTCOLOR",s)].join(" "),G=(t,s,l)=>{const g=[n("BODYTEXT",t),n("TEXTCOLOR",s)];return l&&g.push("uppercase"),g.join(" ")},h=(t,s)=>[n("TEXTCOLOR",t),n("BGCOLOR",s),n("RINGCOLOR",s)].join(" "),j=()=>{r.value.style.transform=`translateX(-${a.value*(i.value[0].$el.clientWidth+S(v.cardsGap)+2)}px)`,c.value=!1},H=()=>{f=!1};return d.useEventListener(r,"sliderMove",j),d.useEventListener(r,"transitionend",H),d.useIntersectionObserver(u,t=>{t[0].isIntersecting&&(c.value=!0)},{threshold:.75}),e.onMounted(()=>{u.value=i.value[i.value.length-1].$el}),(t,s)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["py-lg lg:py-xl overflow-hidden",e.unref(n)("BGCOLOR",t.bgColor)])},[e.createElementVNode("div",C,[e.createElementVNode("div",b,[t.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["hidden sm:block absolute w-md bg-opacity-25 -left-4 h-full",e.unref(n)("BGCOLOR",t.highlightColor)])},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",y,[t.displayTagLine?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["tracking-widest",G(t.tagLineSize,t.tagLineColor,t.tagLineUpperCase)]),innerHTML:t.tagLine},null,10,x)):e.createCommentVNode("",!0),e.createElementVNode("h2",{class:e.normalizeClass(["tracking-wide",A(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,E)]),e.createElementVNode("div",L,[e.createElementVNode("div",w,[e.renderSlot(t.$slots,"description")]),e.createElementVNode("div",B,[e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200",h(t.btnColor,t.btnBgColor)]),disabled:a.value===0,onClick:s[0]\|\|(s[0]=l=>p(l,"prev")),"aria-label":"previous"},k,10,T),e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200",h(t.btnColor,t.btnBgColor)]),disabled:c.value,onClick:s[1]\|\|(s[1]=l=>p(l,"next")),"aria-label":"next"},V,10,N)])])])]),e.createElementVNode("div",_,[e.createElementVNode("div",{class:e.normalizeClass(["flex transition-transform duration-500 px-xs gap-xs",e.unref(n)("GAP",t.cardsGap)]),ref_key:"slideContainer",ref:r},[e.renderSlot(t.$slots,"carousel",{cards:t.content,setRef:R})],2)])],2))}});o.MclCarouselA=O,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
1	+ (function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme","@vueuse/core"],e):(o=typeof globalThis<"u"?globalThis:o\|\|self,e(o.MclCarousel={},o.Vue,o.ManguitoTheme,o.core))})(this,function(o,e,s,d){"use strict";const C={class:"container px-xs sm:px-md text-center sm:text-left"},b={class:"relative"},y={class:"relative"},x=["innerHTML"],E=["innerHTML"],L={class:"relative flex flex-wrap sm:flex-nowrap justify-center sm:justify-start items-center space-x-4 space-y-4"},w={class:"max-w-xl"},B={class:"flex space-x-4"},T=["disabled"],k=["disabled"],N={class:"container mt-md sm:mt-lg lg:mt-xl"},V=e.defineComponent({__name:"MclCarouselA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},bgColor:{default:"light-1"},displayTagLine:{type:Boolean,default:!0},tagLineUpperCase:{type:Boolean,default:!0},tagLine:{},tagLineSize:{default:"md"},tagLineColor:{default:"dark-1"},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},btnColor:{default:"dark-3"},btnBgColor:{default:"light-4"},content:{},cardsGap:{default:"xs"}},emits:["btn-prev","btn-next"],setup(O,{emit:M}){const z=O,r=e.ref(null),i=e.ref([]),u=e.ref(),m=M,a=e.ref(0),c=e.ref(!1);let f=!1;const v=t=>{switch(t){case"0":return 0;case"3xs":return 4;case"2xs":return 8;case"xs":return 16;case"sm":return 24;case"md":return 32;case"lg":return 48;case"xl":return 64;case"2xl":return 96;case"3xl":return 128}},S=t=>{i.value.push(t)},p=(t,n)=>{var l;f\|\|(f=!0,n==="prev"&&(a.value--,m("btn-prev",t)),n==="next"&&(a.value++,m("btn-next",t)),(l=r.value)==null\|\|l.dispatchEvent(new Event("sliderMove")))},R=(t,n)=>[s("H2",t),s("TEXTCOLOR",n)].join(" "),A=(t,n,l)=>{const h=[s("BODYTEXT",t),s("TEXTCOLOR",n)];return l&&h.push("uppercase"),h.join(" ")},g=(t,n)=>[s("TEXTCOLOR",t),s("BGCOLOR",n),s("RINGCOLOR",n)].join(" "),G=()=>{r.value.style.transform=`translateX(-${a.value*(i.value[0].$el.clientWidth+v(z.cardsGap)+2)}px)`,c.value=!1},j=()=>{f=!1};return d.useEventListener(r,"sliderMove",G),d.useEventListener(r,"transitionend",j),d.useIntersectionObserver(u,t=>{t[0].isIntersecting&&(c.value=!0)},{threshold:.75}),e.onMounted(()=>{u.value=i.value[i.value.length-1].$el}),(t,n)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["py-lg lg:py-xl overflow-hidden",e.unref(s)("BGCOLOR",t.bgColor)])},[e.createElementVNode("div",C,[e.createElementVNode("div",b,[t.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["hidden sm:block absolute w-md bg-opacity-25 -left-4 h-full",e.unref(s)("BGCOLOR",t.highlightColor)])},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",y,[t.displayTagLine?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["tracking-widest",A(t.tagLineSize,t.tagLineColor,t.tagLineUpperCase)]),innerHTML:t.tagLine},null,10,x)):e.createCommentVNode("",!0),e.createElementVNode("h2",{class:e.normalizeClass(["tracking-wide",R(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,E)]),e.createElementVNode("div",L,[e.createElementVNode("div",w,[e.renderSlot(t.$slots,"description")]),e.createElementVNode("div",B,[e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200",g(t.btnColor,t.btnBgColor)]),disabled:a.value===0,onClick:n[0]\|\|(n[0]=l=>p(l,"prev")),"aria-label":"previous"},n[2]\|\|(n[2]=[e.createElementVNode("svg",{class:"w-xs h-xs",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor"},[e.createElementVNode("path",{d:"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"})],-1)]),10,T),e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200",g(t.btnColor,t.btnBgColor)]),disabled:c.value,onClick:n[1]\|\|(n[1]=l=>p(l,"next")),"aria-label":"next"},n[3]\|\|(n[3]=[e.createElementVNode("svg",{class:"w-xs h-xs",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor"},[e.createElementVNode("path",{d:"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"})],-1)]),10,k)])])])]),e.createElementVNode("div",N,[e.createElementVNode("div",{class:e.normalizeClass(["flex transition-transform duration-500 px-xs gap-xs",e.unref(s)("GAP",t.cardsGap)]),ref_key:"slideContainer",ref:r},[e.renderSlot(t.$slots,"carousel",{cards:t.content,setRef:S})],2)])],2))}});o.MclCarouselA=V,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/mcl-carousel",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "carousel component based on @bobbykim/manguito-theme",
   "type": "module",
   "files": [
@@ -33,17 +33,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "0.22.0",
-    "@vueuse/core": "^10.8.0",
-    "vue": "^3.3.10"
+    "@bobbykim/manguito-theme": "0.23.0",
+    "@vueuse/core": "^12.0.0",
+    "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.2",
-    "typescript": "^5.3.3",
-    "vite": "^4.5.1",
-    "vite-plugin-css-injected-by-js": "^3.5.0",
-    "vite-plugin-dts": "^3.8.3",
-    "vue-tsc": "^1.8.25"
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.3.0",
+    "vue-tsc": "^2.1.10"
   },
-  "gitHead": "611995a0ec341a9fb5289ab695114ea7b1ac949e"
+  "gitHead": "0c86a1a70a33446112dafbaf5fce5fdcb5fdf755"
 }