@bobbykim/mcl-carousel 0.10.1 → 0.11.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.
package/README.md CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  ## Demo
4
4
 
5
- [MCL Storybook Page](https://manguito-component-library.vercel.app/)
5
+ [MCL Storybook Page](https://manguito-component-library.bobbykim.dev/)
6
6
 
7
- - [MCL Carousel A](https://manguito-component-library.vercel.app/?path=/docs/sections-carousel-mclcarousela--mclcarousela)
7
+ - [MCL Carousel A](https://manguito-component-library.bobbykim.dev/?path=/docs/sections-carousel-mclcarousela--mclcarousela)
8
8
 
9
9
  ## Install
10
10
 
package/dist/index.d.ts CHANGED
@@ -45,18 +45,19 @@ declare type __VLS_Props = {
45
45
  highlightColor?: ColorPalette;
46
46
  btnColor?: ColorPalette;
47
47
  btnBgColor?: ColorPalette;
48
+ /** Passed straight through to the `carousel` slot; shape is the consumer's. */
48
49
  content: any[];
49
50
  cardsGap?: SpacingLevel;
50
51
  };
51
52
 
52
53
  declare function __VLS_template(): {
53
54
  attrs: Partial<{}>;
54
- slots: {
55
- description?(_: {}): any;
56
- carousel?(_: {
57
- cards: any[];
58
- setRef: (el: ComponentPublicInstance | Element | null) => void;
59
- }): any;
55
+ slots: Readonly<{
56
+ description?: any;
57
+ carousel?: (props: MclCarouselASlotProps) => any;
58
+ }> & {
59
+ description?: any;
60
+ carousel?: (props: MclCarouselASlotProps) => any;
60
61
  };
61
62
  refs: {
62
63
  slideContainer: HTMLDivElement;
@@ -72,6 +73,25 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
72
73
  };
73
74
  };
74
75
 
76
+ /**
77
+ * Direction of a single carousel navigation step.
78
+ */
79
+ export declare type BtnNav = 'prev' | 'next';
80
+
75
81
  export declare const MclCarouselA: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
76
82
 
83
+ /**
84
+ * Slot props handed to the `carousel` slot of `MclCarouselA`.
85
+ */
86
+ export declare interface MclCarouselASlotProps {
87
+ /** The `content` prop, passed straight through for the consumer to iterate. */
88
+ cards: any[];
89
+ /**
90
+ * @deprecated No longer required. The carousel now discovers its cards from
91
+ * the DOM, so this is a no-op kept for backwards compatibility. Existing
92
+ * `:ref="(el) => setRef(el)"` bindings are harmless and can be removed.
93
+ */
94
+ setRef: (el: ComponentPublicInstance | Element | null) => void;
95
+ }
96
+
77
97
  export { }
@@ -1,7 +1,29 @@
1
- import { defineComponent as E, ref as i, onMounted as H, openBlock as f, createElementBlock as v, normalizeClass as r, unref as x, createElementVNode as n, createCommentVNode as w, renderSlot as y } from "vue";
2
- import { generateClass as l } from "@bobbykim/manguito-theme";
3
- import { useEventListener as L, useIntersectionObserver as j } from "@vueuse/core";
4
- const $ = { class: "container px-xs text-center sm:px-md sm:text-left" }, G = { class: "relative" }, I = { class: "relative" }, N = ["innerHTML"], R = ["innerHTML"], U = { class: "relative flex flex-wrap items-center justify-center space-y-4 space-x-4 sm:flex-nowrap sm:justify-start" }, D = { class: "max-w-144" }, O = { class: "flex space-x-4" }, W = ["disabled"], X = ["disabled"], q = { class: "container mt-md sm:mt-lg lg:mt-xl" }, P = /* @__PURE__ */ E({
1
+ import { ref as y, computed as d, shallowRef as M, onMounted as S, defineComponent as z, openBlock as w, createElementBlock as L, normalizeClass as c, createElementVNode as t, createCommentVNode as k, renderSlot as T, unref as V } from "vue";
2
+ import { generateClass as n } from "@bobbykim/manguito-theme";
3
+ import { useEventListener as H, useIntersectionObserver as I } from "@vueuse/core";
4
+ const D = 0.75, j = (s) => {
5
+ const a = y(0), e = y(!1), p = d(() => a.value === 0);
6
+ let u = !1;
7
+ const v = M(null), f = (l) => s.value?.children.item(l) ?? null, C = () => s.value?.children.length ?? 0, g = () => {
8
+ v.value = f(C() - 1);
9
+ }, m = () => {
10
+ const l = s.value, i = f(a.value), h = f(0);
11
+ !l || !i || !h || (l.style.transform = `translateX(-${i.offsetLeft - h.offsetLeft}px)`, e.value = !1);
12
+ }, x = (l) => {
13
+ if (u) return !1;
14
+ const i = l === "prev" ? a.value - 1 : a.value + 1;
15
+ return i < 0 || i >= C() ? !1 : (u = !0, a.value = i, g(), m(), !0);
16
+ };
17
+ return H(s, "transitionend", (l) => {
18
+ l.target === s.value && (u = !1);
19
+ }), I(
20
+ v,
21
+ ([l]) => {
22
+ l.isIntersecting && (e.value = !0);
23
+ },
24
+ { threshold: D }
25
+ ), S(g), { currentIndex: a, isPrevDisabled: p, isNextDisabled: e, goTo: x };
26
+ }, A = { class: "container px-xs text-center sm:px-md sm:text-left" }, R = { class: "relative" }, E = { class: "relative" }, N = ["innerHTML"], G = ["innerHTML"], $ = { class: "relative flex flex-wrap items-center justify-center space-y-4 space-x-4 sm:flex-nowrap sm:justify-start" }, O = { class: "max-w-144" }, P = { class: "flex space-x-4" }, U = ["disabled"], X = ["disabled"], Y = { class: "container mt-md sm:mt-lg lg:mt-xl" }, K = /* @__PURE__ */ z({
5
27
  __name: "MclCarouselA",
6
28
  props: {
7
29
  title: {},
@@ -21,133 +43,102 @@ const $ = { class: "container px-xs text-center sm:px-md sm:text-left" }, G = {
21
43
  cardsGap: { default: "xs" }
22
44
  },
23
45
  emits: ["btn-prev", "btn-next"],
24
- setup(e, { emit: k }) {
25
- const B = e, o = i(null), c = i([]), h = i(), m = k, d = i(0), u = i(!1);
26
- let g = !1;
27
- const M = (s) => {
28
- switch (s) {
29
- case "0":
30
- return 0;
31
- case "3xs":
32
- return 4;
33
- case "2xs":
34
- return 8;
35
- case "xs":
36
- return 16;
37
- case "sm":
38
- return 24;
39
- case "md":
40
- return 32;
41
- case "lg":
42
- return 48;
43
- case "xl":
44
- return 64;
45
- case "2xl":
46
- return 96;
47
- case "3xl":
48
- return 128;
49
- }
50
- }, V = (s) => {
51
- c.value.push(s);
52
- }, C = (s, t) => {
53
- g || (g = !0, t === "prev" && (d.value--, m("btn-prev", s)), t === "next" && (d.value++, m("btn-next", s)), o.value?.dispatchEvent(new Event("sliderMove")));
54
- }, T = (s, t) => [
55
- l.h2Variant({ size: s }),
56
- l.textColorVariant({ color: t })
57
- ].join(" "), S = (s, t, a) => {
58
- const p = [
59
- l.bodyTextVariant({ size: s }),
60
- l.textColorVariant({ color: t })
46
+ setup(s, { emit: a }) {
47
+ const e = s, p = a, u = y(null), { isPrevDisabled: v, isNextDisabled: f, goTo: C } = j(u), g = (r, o) => {
48
+ C(o) && p(o === "prev" ? "btn-prev" : "btn-next", r);
49
+ }, m = () => {
50
+ }, x = d(
51
+ () => n.bgColorVariant({ color: e.bgColor })
52
+ ), l = d(
53
+ () => n.bgColorVariant({ color: e.highlightColor })
54
+ ), i = d(
55
+ () => [
56
+ n.h2Variant({ size: e.titleSize }),
57
+ n.textColorVariant({ color: e.titleColor })
58
+ ].join(" ")
59
+ ), h = d(() => {
60
+ const r = [
61
+ n.bodyTextVariant({ size: e.tagLineSize }),
62
+ n.textColorVariant({ color: e.tagLineColor })
61
63
  ];
62
- return a && p.push("uppercase"), p.join(" ");
63
- }, b = (s, t) => [
64
- l.textColorVariant({ color: s }),
65
- l.bgColorVariant({ color: t }),
66
- l.ringColorVariant({ color: t })
67
- ].join(" "), z = () => {
68
- o.value.style.transform = `translateX(-${d.value * (c.value[0].$el.clientWidth + M(B.cardsGap) + 2)}px)`, u.value = !1;
69
- }, A = () => {
70
- g = !1;
71
- };
72
- return L(o, "sliderMove", z), L(o, "transitionend", A), j(
73
- h,
74
- (s) => {
75
- s[0].isIntersecting && (u.value = !0);
76
- },
77
- { threshold: 0.75 }
78
- ), H(() => {
79
- h.value = c.value[c.value.length - 1].$el;
80
- }), (s, t) => (f(), v("section", {
81
- class: r(["overflow-hidden py-lg lg:py-xl", x(l).bgColorVariant({ color: e.bgColor })])
64
+ return e.tagLineUpperCase && r.push("uppercase"), r.join(" ");
65
+ }), B = d(
66
+ () => [
67
+ n.textColorVariant({ color: e.btnColor }),
68
+ n.bgColorVariant({ color: e.btnBgColor }),
69
+ n.ringColorVariant({ color: e.btnBgColor })
70
+ ].join(" ")
71
+ ), _ = d(
72
+ () => n.gapVariant({ spacing: e.cardsGap })
73
+ );
74
+ return (r, o) => (w(), L("section", {
75
+ class: c(["overflow-hidden py-lg lg:py-xl", x.value])
82
76
  }, [
83
- n("div", $, [
84
- n("div", G, [
85
- e.showHighlight ? (f(), v("div", {
77
+ t("div", A, [
78
+ t("div", R, [
79
+ s.showHighlight ? (w(), L("div", {
86
80
  key: 0,
87
- class: r(["absolute -left-4 hidden h-full w-md bg-opacity-25 sm:block", x(l).bgColorVariant({ color: e.highlightColor })])
88
- }, null, 2)) : w("", !0),
89
- n("div", I, [
90
- e.showTagLine ? (f(), v("span", {
81
+ class: c(["absolute -left-4 hidden h-full w-md bg-opacity-25 sm:block", l.value])
82
+ }, null, 2)) : k("", !0),
83
+ t("div", E, [
84
+ s.showTagLine ? (w(), L("span", {
91
85
  key: 0,
92
- class: r([
93
- "tracking-widest",
94
- S(e.tagLineSize, e.tagLineColor, e.tagLineUpperCase)
95
- ]),
96
- innerHTML: e.tagLine
97
- }, null, 10, N)) : w("", !0),
98
- n("h2", {
99
- class: r(["tracking-wide", T(e.titleSize, e.titleColor)]),
100
- innerHTML: e.title
101
- }, null, 10, R)
86
+ class: c(["tracking-widest", h.value]),
87
+ innerHTML: s.tagLine
88
+ }, null, 10, N)) : k("", !0),
89
+ t("h2", {
90
+ class: c(["tracking-wide", i.value]),
91
+ innerHTML: s.title
92
+ }, null, 10, G)
102
93
  ]),
103
- n("div", U, [
104
- n("div", D, [
105
- y(s.$slots, "description")
94
+ t("div", $, [
95
+ t("div", O, [
96
+ T(r.$slots, "description")
106
97
  ]),
107
- n("div", O, [
108
- n("button", {
109
- class: r(["grid place-items-center rounded-full p-xs ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:ring-4 focus:outline-none disabled:opacity-50", b(e.btnColor, e.btnBgColor)]),
110
- disabled: d.value === 0,
111
- onClick: t[0] || (t[0] = (a) => C(a, "prev")),
98
+ t("div", P, [
99
+ t("button", {
100
+ class: c(["grid place-items-center rounded-full p-xs ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:ring-4 focus:outline-none disabled:opacity-50", B.value]),
101
+ disabled: V(v),
102
+ onClick: o[0] || (o[0] = (b) => g(b, "prev")),
112
103
  "aria-label": "previous"
113
- }, [...t[2] || (t[2] = [
114
- n("svg", {
104
+ }, [...o[2] || (o[2] = [
105
+ t("svg", {
115
106
  class: "h-xs w-xs",
116
107
  xmlns: "http://www.w3.org/2000/svg",
117
108
  viewBox: "0 0 384 512",
118
109
  fill: "currentColor"
119
110
  }, [
120
- n("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" })
111
+ 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" })
121
112
  ], -1)
122
- ])], 10, W),
123
- n("button", {
124
- class: r(["grid place-items-center rounded-full p-xs ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:ring-4 focus:outline-none disabled:opacity-50", b(e.btnColor, e.btnBgColor)]),
125
- disabled: u.value,
126
- onClick: t[1] || (t[1] = (a) => C(a, "next")),
113
+ ])], 10, U),
114
+ t("button", {
115
+ class: c(["grid place-items-center rounded-full p-xs ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:ring-4 focus:outline-none disabled:opacity-50", B.value]),
116
+ disabled: V(f),
117
+ onClick: o[1] || (o[1] = (b) => g(b, "next")),
127
118
  "aria-label": "next"
128
- }, [...t[3] || (t[3] = [
129
- n("svg", {
119
+ }, [...o[3] || (o[3] = [
120
+ t("svg", {
130
121
  class: "h-xs w-xs",
131
122
  xmlns: "http://www.w3.org/2000/svg",
132
123
  viewBox: "0 0 384 512",
133
124
  fill: "currentColor"
134
125
  }, [
135
- n("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" })
126
+ 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" })
136
127
  ], -1)
137
128
  ])], 10, X)
138
129
  ])
139
130
  ])
140
131
  ])
141
132
  ]),
142
- n("div", q, [
143
- n("div", {
144
- class: r(["flex gap-xs px-xs transition-transform duration-500", x(l).gapVariant({ spacing: e.cardsGap })]),
133
+ t("div", Y, [
134
+ t("div", {
135
+ class: c(["flex gap-xs px-xs transition-transform duration-500", _.value]),
145
136
  ref_key: "slideContainer",
146
- ref: o
137
+ ref: u
147
138
  }, [
148
- y(s.$slots, "carousel", {
149
- cards: e.content,
150
- setRef: V
139
+ T(r.$slots, "carousel", {
140
+ cards: s.content,
141
+ setRef: m
151
142
  })
152
143
  ], 2)
153
144
  ])
@@ -155,5 +146,5 @@ const $ = { class: "container px-xs text-center sm:px-md sm:text-left" }, G = {
155
146
  }
156
147
  });
157
148
  export {
158
- P as MclCarouselA
149
+ K as MclCarouselA
159
150
  };
@@ -1 +1 @@
1
- (function(a,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):(a=typeof globalThis<"u"?globalThis:a||self,e(a.MclCarousel={},a.Vue,a.ManguitoTheme,a.core))})(this,(function(a,e,l,d){"use strict";const b={class:"container px-xs text-center sm:px-md sm:text-left"},p={class:"relative"},y={class:"relative"},V=["innerHTML"],w=["innerHTML"],E={class:"relative flex flex-wrap items-center justify-center space-y-4 space-x-4 sm:flex-nowrap sm:justify-start"},k={class:"max-w-144"},L={class:"flex space-x-4"},N=["disabled"],B=["disabled"],M={class:"container mt-md sm:mt-lg lg:mt-xl"},z=e.defineComponent({__name:"MclCarouselA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},bgColor:{default:"light-1"},showTagLine:{type:Boolean,default:!0},tagLineUpperCase:{type:Boolean,default:!0},tagLine:{},tagLineSize:{default:"md"},tagLineColor:{default:"dark-1"},showHighlight:{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:v}){const S=t,o=e.ref(null),i=e.ref([]),g=e.ref(),C=v,c=e.ref(0),f=e.ref(!1);let u=!1;const j=s=>{switch(s){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}},A=s=>{i.value.push(s)},m=(s,n)=>{u||(u=!0,n==="prev"&&(c.value--,C("btn-prev",s)),n==="next"&&(c.value++,C("btn-next",s)),o.value?.dispatchEvent(new Event("sliderMove")))},H=(s,n)=>[l.generateClass.h2Variant({size:s}),l.generateClass.textColorVariant({color:n})].join(" "),T=(s,n,r)=>{const h=[l.generateClass.bodyTextVariant({size:s}),l.generateClass.textColorVariant({color:n})];return r&&h.push("uppercase"),h.join(" ")},x=(s,n)=>[l.generateClass.textColorVariant({color:s}),l.generateClass.bgColorVariant({color:n}),l.generateClass.ringColorVariant({color:n})].join(" "),$=()=>{o.value.style.transform=`translateX(-${c.value*(i.value[0].$el.clientWidth+j(S.cardsGap)+2)}px)`,f.value=!1},q=()=>{u=!1};return d.useEventListener(o,"sliderMove",$),d.useEventListener(o,"transitionend",q),d.useIntersectionObserver(g,s=>{s[0].isIntersecting&&(f.value=!0)},{threshold:.75}),e.onMounted(()=>{g.value=i.value[i.value.length-1].$el}),(s,n)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["overflow-hidden py-lg lg:py-xl",e.unref(l.generateClass).bgColorVariant({color:t.bgColor})])},[e.createElementVNode("div",b,[e.createElementVNode("div",p,[t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute -left-4 hidden h-full w-md bg-opacity-25 sm:block",e.unref(l.generateClass).bgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",y,[t.showTagLine?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["tracking-widest",T(t.tagLineSize,t.tagLineColor,t.tagLineUpperCase)]),innerHTML:t.tagLine},null,10,V)):e.createCommentVNode("",!0),e.createElementVNode("h2",{class:e.normalizeClass(["tracking-wide",H(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,w)]),e.createElementVNode("div",E,[e.createElementVNode("div",k,[e.renderSlot(s.$slots,"description")]),e.createElementVNode("div",L,[e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center rounded-full p-xs ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:ring-4 focus:outline-none disabled:opacity-50",x(t.btnColor,t.btnBgColor)]),disabled:c.value===0,onClick:n[0]||(n[0]=r=>m(r,"prev")),"aria-label":"previous"},[...n[2]||(n[2]=[e.createElementVNode("svg",{class:"h-xs w-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,N),e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center rounded-full p-xs ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:ring-4 focus:outline-none disabled:opacity-50",x(t.btnColor,t.btnBgColor)]),disabled:f.value,onClick:n[1]||(n[1]=r=>m(r,"next")),"aria-label":"next"},[...n[3]||(n[3]=[e.createElementVNode("svg",{class:"h-xs w-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,B)])])])]),e.createElementVNode("div",M,[e.createElementVNode("div",{class:e.normalizeClass(["flex gap-xs px-xs transition-transform duration-500",e.unref(l.generateClass).gapVariant({spacing:t.cardsGap})]),ref_key:"slideContainer",ref:o},[e.renderSlot(s.$slots,"carousel",{cards:t.content,setRef:A})],2)])],2))}});a.MclCarouselA=z,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
1
+ (function(a,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):(a=typeof globalThis<"u"?globalThis:a||self,e(a.MclCarousel={},a.Vue,a.ManguitoTheme,a.core))})(this,(function(a,e,n,V){"use strict";const L=s=>{const r=e.ref(0),t=e.ref(!1),u=e.computed(()=>r.value===0);let d=!1;const C=e.shallowRef(null),f=l=>s.value?.children.item(l)??null,p=()=>s.value?.children.length??0,g=()=>{C.value=f(p()-1)},x=()=>{const l=s.value,i=f(r.value),m=f(0);!l||!i||!m||(l.style.transform=`translateX(-${i.offsetLeft-m.offsetLeft}px)`,t.value=!1)},h=l=>{if(d)return!1;const i=l==="prev"?r.value-1:r.value+1;return i<0||i>=p()?!1:(d=!0,r.value=i,g(),x(),!0)};return V.useEventListener(s,"transitionend",l=>{l.target===s.value&&(d=!1)}),V.useIntersectionObserver(C,([l])=>{l.isIntersecting&&(t.value=!0)},{threshold:.75}),e.onMounted(g),{currentIndex:r,isPrevDisabled:u,isNextDisabled:t,goTo:h}},w={class:"container px-xs text-center sm:px-md sm:text-left"},E={class:"relative"},k={class:"relative"},B=["innerHTML"],N=["innerHTML"],S={class:"relative flex flex-wrap items-center justify-center space-y-4 space-x-4 sm:flex-nowrap sm:justify-start"},z={class:"max-w-144"},_={class:"flex space-x-4"},M=["disabled"],I=["disabled"],v={class:"container mt-md sm:mt-lg lg:mt-xl"},T=e.defineComponent({__name:"MclCarouselA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},bgColor:{default:"light-1"},showTagLine:{type:Boolean,default:!0},tagLineUpperCase:{type:Boolean,default:!0},tagLine:{},tagLineSize:{default:"md"},tagLineColor:{default:"dark-1"},showHighlight:{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(s,{emit:r}){const t=s,u=r,d=e.ref(null),{isPrevDisabled:C,isNextDisabled:f,goTo:p}=L(d),g=(c,o)=>{p(o)&&u(o==="prev"?"btn-prev":"btn-next",c)},x=()=>{},h=e.computed(()=>n.generateClass.bgColorVariant({color:t.bgColor})),l=e.computed(()=>n.generateClass.bgColorVariant({color:t.highlightColor})),i=e.computed(()=>[n.generateClass.h2Variant({size:t.titleSize}),n.generateClass.textColorVariant({color:t.titleColor})].join(" ")),m=e.computed(()=>{const c=[n.generateClass.bodyTextVariant({size:t.tagLineSize}),n.generateClass.textColorVariant({color:t.tagLineColor})];return t.tagLineUpperCase&&c.push("uppercase"),c.join(" ")}),y=e.computed(()=>[n.generateClass.textColorVariant({color:t.btnColor}),n.generateClass.bgColorVariant({color:t.btnBgColor}),n.generateClass.ringColorVariant({color:t.btnBgColor})].join(" ")),H=e.computed(()=>n.generateClass.gapVariant({spacing:t.cardsGap}));return(c,o)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["overflow-hidden py-lg lg:py-xl",h.value])},[e.createElementVNode("div",w,[e.createElementVNode("div",E,[s.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute -left-4 hidden h-full w-md bg-opacity-25 sm:block",l.value])},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",k,[s.showTagLine?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["tracking-widest",m.value]),innerHTML:s.tagLine},null,10,B)):e.createCommentVNode("",!0),e.createElementVNode("h2",{class:e.normalizeClass(["tracking-wide",i.value]),innerHTML:s.title},null,10,N)]),e.createElementVNode("div",S,[e.createElementVNode("div",z,[e.renderSlot(c.$slots,"description")]),e.createElementVNode("div",_,[e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center rounded-full p-xs ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:ring-4 focus:outline-none disabled:opacity-50",y.value]),disabled:e.unref(C),onClick:o[0]||(o[0]=b=>g(b,"prev")),"aria-label":"previous"},[...o[2]||(o[2]=[e.createElementVNode("svg",{class:"h-xs w-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,M),e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center rounded-full p-xs ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:ring-4 focus:outline-none disabled:opacity-50",y.value]),disabled:e.unref(f),onClick:o[1]||(o[1]=b=>g(b,"next")),"aria-label":"next"},[...o[3]||(o[3]=[e.createElementVNode("svg",{class:"h-xs w-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,I)])])])]),e.createElementVNode("div",v,[e.createElementVNode("div",{class:e.normalizeClass(["flex gap-xs px-xs transition-transform duration-500",H.value]),ref_key:"slideContainer",ref:d},[e.renderSlot(c.$slots,"carousel",{cards:s.content,setRef:x})],2)])],2))}});a.MclCarouselA=T,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bobbykim/mcl-carousel",
3
- "version": "0.10.1",
3
+ "version": "0.11.0",
4
4
  "description": "carousel component based on @bobbykim/manguito-theme",
5
5
  "type": "module",
6
6
  "files": [
@@ -20,7 +20,7 @@
20
20
  "name": "Bobby Kim",
21
21
  "url": "https://www.devbobbykim.com/"
22
22
  },
23
- "homepage": "https://manguito-component-library.vercel.app/",
23
+ "homepage": "https://manguito-component-library.bobbykim.dev/",
24
24
  "repository": {
25
25
  "type": "git",
26
26
  "url": "https://github.com/bobbykim89/manguito-component-library.git"
@@ -32,7 +32,7 @@
32
32
  "dependencies": {
33
33
  "@vueuse/core": "^12.0.0",
34
34
  "vue": "^3.5.13",
35
- "@bobbykim/manguito-theme": "1.0.1"
35
+ "@bobbykim/manguito-theme": "1.0.2"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@vitejs/plugin-vue": "^5.2.1",