@bobbykim/mcl-carousel 0.10.2 → 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/dist/index.d.ts +26 -6
- package/dist/mcl-carousel.js +96 -105
- package/dist/mcl-carousel.umd.cjs +1 -1
- package/package.json +1 -1
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
|
|
56
|
-
carousel
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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 { }
|
package/dist/mcl-carousel.js
CHANGED
|
@@ -1,7 +1,29 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { generateClass as
|
|
3
|
-
import { useEventListener as
|
|
4
|
-
const
|
|
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(
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
return
|
|
73
|
-
|
|
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
|
-
|
|
84
|
-
|
|
85
|
-
|
|
77
|
+
t("div", A, [
|
|
78
|
+
t("div", R, [
|
|
79
|
+
s.showHighlight ? (w(), L("div", {
|
|
86
80
|
key: 0,
|
|
87
|
-
class:
|
|
88
|
-
}, null, 2)) :
|
|
89
|
-
|
|
90
|
-
|
|
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:
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
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
|
-
|
|
104
|
-
|
|
105
|
-
|
|
94
|
+
t("div", $, [
|
|
95
|
+
t("div", O, [
|
|
96
|
+
T(r.$slots, "description")
|
|
106
97
|
]),
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
class:
|
|
110
|
-
disabled:
|
|
111
|
-
onClick:
|
|
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
|
-
}, [...
|
|
114
|
-
|
|
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
|
-
|
|
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,
|
|
123
|
-
|
|
124
|
-
class:
|
|
125
|
-
disabled:
|
|
126
|
-
onClick:
|
|
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
|
-
}, [...
|
|
129
|
-
|
|
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
|
-
|
|
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
|
-
|
|
143
|
-
|
|
144
|
-
class:
|
|
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:
|
|
137
|
+
ref: u
|
|
147
138
|
}, [
|
|
148
|
-
|
|
149
|
-
cards:
|
|
150
|
-
setRef:
|
|
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
|
-
|
|
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,
|
|
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"})}));
|