@bobbykim/mcl-carousel 0.9.3 → 0.9.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/index.d.ts CHANGED
@@ -8,42 +8,10 @@ import { HeadingSize } from '@bobbykim/manguito-theme';
8
8
  import { PublicProps } from 'vue';
9
9
  import { SpacingLevel } from '@bobbykim/manguito-theme';
10
10
 
11
- declare const __VLS_component: DefineComponent< {
12
- title: string;
13
- titleSize?: HeadingSize;
14
- titleColor?: ColorPalette;
15
- bgColor?: ColorPalette;
16
- displayTagLine?: boolean;
17
- tagLineUpperCase?: boolean;
18
- tagLine?: string;
19
- tagLineSize?: BodyText;
20
- tagLineColor?: ColorPalette;
21
- displayHighlight?: boolean;
22
- highlightColor?: ColorPalette;
23
- btnColor?: ColorPalette;
24
- btnBgColor?: ColorPalette;
25
- content: any[];
26
- cardsGap?: SpacingLevel;
27
- }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
11
+ declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
28
12
  "btn-prev": (event: Event) => any;
29
13
  "btn-next": (event: Event) => any;
30
- }, string, PublicProps, Readonly<{
31
- title: string;
32
- titleSize?: HeadingSize;
33
- titleColor?: ColorPalette;
34
- bgColor?: ColorPalette;
35
- displayTagLine?: boolean;
36
- tagLineUpperCase?: boolean;
37
- tagLine?: string;
38
- tagLineSize?: BodyText;
39
- tagLineColor?: ColorPalette;
40
- displayHighlight?: boolean;
41
- highlightColor?: ColorPalette;
42
- btnColor?: ColorPalette;
43
- btnBgColor?: ColorPalette;
44
- content: any[];
45
- cardsGap?: SpacingLevel;
46
- }> & Readonly<{
14
+ }, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
47
15
  "onBtn-prev"?: ((event: Event) => any) | undefined;
48
16
  "onBtn-next"?: ((event: Event) => any) | undefined;
49
17
  }>, {
@@ -59,9 +27,30 @@ highlightColor: ColorPalette;
59
27
  btnColor: ColorPalette;
60
28
  btnBgColor: ColorPalette;
61
29
  cardsGap: SpacingLevel;
62
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
30
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {
31
+ slideContainer: HTMLDivElement;
32
+ }, HTMLElement>;
33
+
34
+ declare type __VLS_Props = {
35
+ title: string;
36
+ titleSize?: HeadingSize;
37
+ titleColor?: ColorPalette;
38
+ bgColor?: ColorPalette;
39
+ displayTagLine?: boolean;
40
+ tagLineUpperCase?: boolean;
41
+ tagLine?: string;
42
+ tagLineSize?: BodyText;
43
+ tagLineColor?: ColorPalette;
44
+ displayHighlight?: boolean;
45
+ highlightColor?: ColorPalette;
46
+ btnColor?: ColorPalette;
47
+ btnBgColor?: ColorPalette;
48
+ content: any[];
49
+ cardsGap?: SpacingLevel;
50
+ };
63
51
 
64
52
  declare function __VLS_template(): {
53
+ attrs: Partial<{}>;
65
54
  slots: {
66
55
  description?(_: {}): any;
67
56
  carousel?(_: {
@@ -72,7 +61,7 @@ declare function __VLS_template(): {
72
61
  refs: {
73
62
  slideContainer: HTMLDivElement;
74
63
  };
75
- attrs: Partial<{}>;
64
+ rootEl: HTMLElement;
76
65
  };
77
66
 
78
67
  declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -1,7 +1,7 @@
1
- import { defineComponent as G, ref as o, onMounted as S, createElementBlock as p, openBlock as f, normalizeClass as r, unref as g, createElementVNode as s, createCommentVNode as y, renderSlot as x } from "vue";
1
+ import { defineComponent as G, ref as o, onMounted as S, openBlock as g, createElementBlock as v, normalizeClass as i, unref as m, createElementVNode as l, createCommentVNode as y, renderSlot as L } from "vue";
2
2
  import n from "@bobbykim/manguito-theme";
3
- import { useEventListener as L, useIntersectionObserver as z } from "@vueuse/core";
4
- const H = { class: "px-xs sm:px-md container text-center sm:text-left" }, j = { class: "relative" }, X = { class: "relative" }, $ = ["innerHTML"], I = ["innerHTML"], N = { class: "relative flex flex-wrap items-center justify-center space-x-4 space-y-4 sm:flex-nowrap sm:justify-start" }, D = { class: "max-w-[36rem]" }, U = { class: "flex space-x-4" }, V = ["disabled"], _ = ["disabled"], P = { class: "mt-md sm:mt-lg lg:mt-xl container" }, F = /* @__PURE__ */ G({
3
+ import { useEventListener as w, useIntersectionObserver as z } from "@vueuse/core";
4
+ const H = { class: "px-xs sm:px-md container text-center sm:text-left" }, j = { class: "relative" }, X = { class: "relative" }, $ = ["innerHTML"], I = ["innerHTML"], N = { class: "relative flex flex-wrap items-center justify-center space-x-4 space-y-4 sm:flex-nowrap sm:justify-start" }, D = { class: "max-w-144" }, U = { class: "flex space-x-4" }, V = ["disabled"], P = ["disabled"], W = { class: "mt-md sm:mt-lg lg:mt-xl container" }, J = /* @__PURE__ */ G({
5
5
  __name: "MclCarouselA",
6
6
  props: {
7
7
  title: {},
@@ -21,11 +21,11 @@ const H = { class: "px-xs sm:px-md container text-center sm:text-left" }, j = {
21
21
  cardsGap: { default: "xs" }
22
22
  },
23
23
  emits: ["btn-prev", "btn-next"],
24
- setup(w, { emit: B }) {
25
- const T = w, a = o(null), i = o([]), v = o(), m = B, d = o(0), c = o(!1);
26
- let u = !1;
27
- const O = (e) => {
28
- switch (e) {
24
+ setup(e, { emit: B }) {
25
+ const T = e, r = o(null), c = o([]), x = o(), h = B, d = o(0), u = o(!1);
26
+ let f = !1;
27
+ const O = (s) => {
28
+ switch (s) {
29
29
  case "0":
30
30
  return 0;
31
31
  case "3xs":
@@ -47,106 +47,105 @@ const H = { class: "px-xs sm:px-md container text-center sm:text-left" }, j = {
47
47
  case "3xl":
48
48
  return 128;
49
49
  }
50
- }, k = (e) => {
51
- i.value.push(e);
52
- }, h = (e, t) => {
53
- var l;
54
- 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")));
55
- }, M = (e, t) => [
56
- n("H2", e),
50
+ }, k = (s) => {
51
+ c.value.push(s);
52
+ }, C = (s, t) => {
53
+ f || (f = !0, t === "prev" && (d.value--, h("btn-prev", s)), t === "next" && (d.value++, h("btn-next", s)), r.value?.dispatchEvent(new Event("sliderMove")));
54
+ }, M = (s, t) => [
55
+ n("H2", s),
57
56
  n("TEXTCOLOR", t)
58
- ].join(" "), E = (e, t, l) => {
57
+ ].join(" "), E = (s, t, a) => {
59
58
  const b = [
60
- n("BODYTEXT", e),
59
+ n("BODYTEXT", s),
61
60
  n("TEXTCOLOR", t)
62
61
  ];
63
- return l && b.push("uppercase"), b.join(" ");
64
- }, C = (e, t) => [
65
- n("TEXTCOLOR", e),
62
+ return a && b.push("uppercase"), b.join(" ");
63
+ }, p = (s, t) => [
64
+ n("TEXTCOLOR", s),
66
65
  n("BGCOLOR", t),
67
66
  n("RINGCOLOR", t)
68
67
  ].join(" "), R = () => {
69
- a.value.style.transform = `translateX(-${d.value * (i.value[0].$el.clientWidth + O(T.cardsGap) + 2)}px)`, c.value = !1;
68
+ r.value.style.transform = `translateX(-${d.value * (c.value[0].$el.clientWidth + O(T.cardsGap) + 2)}px)`, u.value = !1;
70
69
  }, A = () => {
71
- u = !1;
70
+ f = !1;
72
71
  };
73
- return L(a, "sliderMove", R), L(a, "transitionend", A), z(
74
- v,
75
- (e) => {
76
- e[0].isIntersecting && (c.value = !0);
72
+ return w(r, "sliderMove", R), w(r, "transitionend", A), z(
73
+ x,
74
+ (s) => {
75
+ s[0].isIntersecting && (u.value = !0);
77
76
  },
78
77
  { threshold: 0.75 }
79
78
  ), S(() => {
80
- v.value = i.value[i.value.length - 1].$el;
81
- }), (e, t) => (f(), p("section", {
82
- class: r(["py-lg lg:py-xl overflow-hidden", g(n)("BGCOLOR", e.bgColor)])
79
+ x.value = c.value[c.value.length - 1].$el;
80
+ }), (s, t) => (g(), v("section", {
81
+ class: i(["py-lg lg:py-xl overflow-hidden", m(n)("BGCOLOR", e.bgColor)])
83
82
  }, [
84
- s("div", H, [
85
- s("div", j, [
86
- e.displayHighlight ? (f(), p("div", {
83
+ l("div", H, [
84
+ l("div", j, [
85
+ e.displayHighlight ? (g(), v("div", {
87
86
  key: 0,
88
- class: r(["w-md absolute -left-4 hidden h-full bg-opacity-25 sm:block", g(n)("BGCOLOR", e.highlightColor)])
87
+ class: i(["w-md absolute -left-4 hidden h-full bg-opacity-25 sm:block", m(n)("BGCOLOR", e.highlightColor)])
89
88
  }, null, 2)) : y("", !0),
90
- s("div", X, [
91
- e.displayTagLine ? (f(), p("span", {
89
+ l("div", X, [
90
+ e.displayTagLine ? (g(), v("span", {
92
91
  key: 0,
93
- class: r([
92
+ class: i([
94
93
  "tracking-widest",
95
94
  E(e.tagLineSize, e.tagLineColor, e.tagLineUpperCase)
96
95
  ]),
97
96
  innerHTML: e.tagLine
98
97
  }, null, 10, $)) : y("", !0),
99
- s("h2", {
100
- class: r(["tracking-wide", M(e.titleSize, e.titleColor)]),
98
+ l("h2", {
99
+ class: i(["tracking-wide", M(e.titleSize, e.titleColor)]),
101
100
  innerHTML: e.title
102
101
  }, null, 10, I)
103
102
  ]),
104
- s("div", N, [
105
- s("div", D, [
106
- x(e.$slots, "description")
103
+ l("div", N, [
104
+ l("div", D, [
105
+ L(s.$slots, "description")
107
106
  ]),
108
- s("div", U, [
109
- s("button", {
110
- class: r(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50", C(e.btnColor, e.btnBgColor)]),
107
+ l("div", U, [
108
+ l("button", {
109
+ class: i(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50", p(e.btnColor, e.btnBgColor)]),
111
110
  disabled: d.value === 0,
112
- onClick: t[0] || (t[0] = (l) => h(l, "prev")),
111
+ onClick: t[0] || (t[0] = (a) => C(a, "prev")),
113
112
  "aria-label": "previous"
114
- }, t[2] || (t[2] = [
115
- s("svg", {
113
+ }, [...t[2] || (t[2] = [
114
+ l("svg", {
116
115
  class: "w-xs h-xs",
117
116
  xmlns: "http://www.w3.org/2000/svg",
118
117
  viewBox: "0 0 384 512",
119
118
  fill: "currentColor"
120
119
  }, [
121
- 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" })
120
+ l("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" })
122
121
  ], -1)
123
- ]), 10, V),
124
- s("button", {
125
- class: r(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50", C(e.btnColor, e.btnBgColor)]),
126
- disabled: c.value,
127
- onClick: t[1] || (t[1] = (l) => h(l, "next")),
122
+ ])], 10, V),
123
+ l("button", {
124
+ class: i(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50", p(e.btnColor, e.btnBgColor)]),
125
+ disabled: u.value,
126
+ onClick: t[1] || (t[1] = (a) => C(a, "next")),
128
127
  "aria-label": "next"
129
- }, t[3] || (t[3] = [
130
- s("svg", {
128
+ }, [...t[3] || (t[3] = [
129
+ l("svg", {
131
130
  class: "w-xs h-xs",
132
131
  xmlns: "http://www.w3.org/2000/svg",
133
132
  viewBox: "0 0 384 512",
134
133
  fill: "currentColor"
135
134
  }, [
136
- 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" })
135
+ l("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" })
137
136
  ], -1)
138
- ]), 10, _)
137
+ ])], 10, P)
139
138
  ])
140
139
  ])
141
140
  ])
142
141
  ]),
143
- s("div", P, [
144
- s("div", {
145
- class: r(["px-xs gap-xs flex transition-transform duration-500", g(n)("GAP", e.cardsGap)]),
142
+ l("div", W, [
143
+ l("div", {
144
+ class: i(["px-xs gap-xs flex transition-transform duration-500", m(n)("GAP", e.cardsGap)]),
146
145
  ref_key: "slideContainer",
147
- ref: a
146
+ ref: r
148
147
  }, [
149
- x(e.$slots, "carousel", {
148
+ L(s.$slots, "carousel", {
150
149
  cards: e.content,
151
150
  setRef: k
152
151
  })
@@ -156,5 +155,5 @@ const H = { class: "px-xs sm:px-md container text-center sm:text-left" }, j = {
156
155
  }
157
156
  });
158
157
  export {
159
- F as MclCarouselA
158
+ J as MclCarouselA
160
159
  };
@@ -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,s,d){"use strict";const C={class:"px-xs sm:px-md container text-center sm:text-left"},b={class:"relative"},y={class:"relative"},E=["innerHTML"],x=["innerHTML"],L={class:"relative flex flex-wrap items-center justify-center space-x-4 space-y-4 sm:flex-nowrap sm:justify-start"},w={class:"max-w-[36rem]"},B={class:"flex space-x-4"},T=["disabled"],k=["disabled"],N={class:"mt-md sm:mt-lg lg:mt-xl container"},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(["w-md absolute -left-4 hidden h-full bg-opacity-25 sm:block",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,E)):e.createCommentVNode("",!0),e.createElementVNode("h2",{class:e.normalizeClass(["tracking-wide",R(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,x)]),e.createElementVNode("div",L,[e.createElementVNode("div",w,[e.renderSlot(t.$slots,"description")]),e.createElementVNode("div",B,[e.createElementVNode("button",{class:e.normalizeClass(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50",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(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50",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(["px-xs gap-xs flex transition-transform duration-500",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"})});
1
+ (function(i,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):(i=typeof globalThis<"u"?globalThis:i||self,e(i.MclCarousel={},i.Vue,i.ManguitoTheme,i.core))})(this,(function(i,e,s,d){"use strict";const p={class:"px-xs sm:px-md container text-center sm:text-left"},b={class:"relative"},y={class:"relative"},E=["innerHTML"],L=["innerHTML"],w={class:"relative flex flex-wrap items-center justify-center space-x-4 space-y-4 sm:flex-nowrap sm:justify-start"},B={class:"max-w-144"},T={class:"flex space-x-4"},k=["disabled"],N=["disabled"],V={class:"mt-md sm:mt-lg lg:mt-xl container"},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(t,{emit:M}){const z=t,r=e.ref(null),a=e.ref([]),m=e.ref(),g=M,c=e.ref(0),f=e.ref(!1);let u=!1;const v=l=>{switch(l){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=l=>{a.value.push(l)},h=(l,n)=>{u||(u=!0,n==="prev"&&(c.value--,g("btn-prev",l)),n==="next"&&(c.value++,g("btn-next",l)),r.value?.dispatchEvent(new Event("sliderMove")))},R=(l,n)=>[s("H2",l),s("TEXTCOLOR",n)].join(" "),A=(l,n,o)=>{const C=[s("BODYTEXT",l),s("TEXTCOLOR",n)];return o&&C.push("uppercase"),C.join(" ")},x=(l,n)=>[s("TEXTCOLOR",l),s("BGCOLOR",n),s("RINGCOLOR",n)].join(" "),G=()=>{r.value.style.transform=`translateX(-${c.value*(a.value[0].$el.clientWidth+v(z.cardsGap)+2)}px)`,f.value=!1},j=()=>{u=!1};return d.useEventListener(r,"sliderMove",G),d.useEventListener(r,"transitionend",j),d.useIntersectionObserver(m,l=>{l[0].isIntersecting&&(f.value=!0)},{threshold:.75}),e.onMounted(()=>{m.value=a.value[a.value.length-1].$el}),(l,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",p,[e.createElementVNode("div",b,[t.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["w-md absolute -left-4 hidden h-full bg-opacity-25 sm:block",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,E)):e.createCommentVNode("",!0),e.createElementVNode("h2",{class:e.normalizeClass(["tracking-wide",R(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,L)]),e.createElementVNode("div",w,[e.createElementVNode("div",B,[e.renderSlot(l.$slots,"description")]),e.createElementVNode("div",T,[e.createElementVNode("button",{class:e.normalizeClass(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50",x(t.btnColor,t.btnBgColor)]),disabled:c.value===0,onClick:n[0]||(n[0]=o=>h(o,"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,k),e.createElementVNode("button",{class:e.normalizeClass(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50",x(t.btnColor,t.btnBgColor)]),disabled:f.value,onClick:n[1]||(n[1]=o=>h(o,"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,N)])])])]),e.createElementVNode("div",V,[e.createElementVNode("div",{class:e.normalizeClass(["px-xs gap-xs flex transition-transform duration-500",e.unref(s)("GAP",t.cardsGap)]),ref_key:"slideContainer",ref:r},[e.renderSlot(l.$slots,"carousel",{cards:t.content,setRef:S})],2)])],2))}});i.MclCarouselA=O,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bobbykim/mcl-carousel",
3
- "version": "0.9.3",
3
+ "version": "0.9.4",
4
4
  "description": "carousel component based on @bobbykim/manguito-theme",
5
5
  "type": "module",
6
6
  "files": [
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "license": "MIT",
35
35
  "dependencies": {
36
- "@bobbykim/manguito-theme": "0.28.1",
36
+ "@bobbykim/manguito-theme": "0.28.2",
37
37
  "@vueuse/core": "^12.0.0",
38
38
  "vue": "^3.5.13"
39
39
  },
@@ -45,5 +45,5 @@
45
45
  "vite-plugin-dts": "^4.3.0",
46
46
  "vue-tsc": "^2.1.10"
47
47
  },
48
- "gitHead": "9ffea0493c49e2c7df51c45e3c2f72d256663048"
48
+ "gitHead": "8e1c889ef7ff6e3d81de9621db9d1605a67101f6"
49
49
  }