@bobbykim/mcl-carousel 0.11.4 → 0.12.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/mcl-carousel.js +55 -52
- package/dist/mcl-carousel.umd.cjs +1 -1
- package/package.json +4 -2
package/dist/mcl-carousel.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
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
|
|
2
|
-
import { generateClass as
|
|
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 e, createCommentVNode as B, renderSlot as T, unref as V } from "vue";
|
|
2
|
+
import { generateClass as a } from "@bobbykim/manguito-theme";
|
|
3
3
|
import { useEventListener as H, useIntersectionObserver as I } from "@vueuse/core";
|
|
4
4
|
const D = 0.75, j = (s) => {
|
|
5
|
-
const
|
|
5
|
+
const n = y(0), t = y(!1), v = d(() => n.value === 0);
|
|
6
6
|
let u = !1;
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
},
|
|
10
|
-
const l = s.value, i = f(
|
|
11
|
-
!l || !i || !
|
|
7
|
+
const p = M(null), f = (l) => s.value?.children.item(l) ?? null, h = () => s.value?.children.length ?? 0, g = () => {
|
|
8
|
+
p.value = f(h() - 1);
|
|
9
|
+
}, C = () => {
|
|
10
|
+
const l = s.value, i = f(n.value), m = f(0);
|
|
11
|
+
!l || !i || !m || (l.style.transform = `translateX(-${i.offsetLeft - m.offsetLeft}px)`, t.value = !1);
|
|
12
12
|
}, x = (l) => {
|
|
13
13
|
if (u) return !1;
|
|
14
|
-
const i = l === "prev" ?
|
|
15
|
-
return i < 0 || i >=
|
|
14
|
+
const i = l === "prev" ? n.value - 1 : n.value + 1;
|
|
15
|
+
return i < 0 || i >= h() ? !1 : (u = !0, n.value = i, g(), C(), !0);
|
|
16
16
|
};
|
|
17
17
|
return H(s, "transitionend", (l) => {
|
|
18
18
|
l.target === s.value && (u = !1);
|
|
19
19
|
}), I(
|
|
20
|
-
|
|
20
|
+
p,
|
|
21
21
|
([l]) => {
|
|
22
|
-
l.isIntersecting && (
|
|
22
|
+
l.isIntersecting && (t.value = !0);
|
|
23
23
|
},
|
|
24
24
|
{ threshold: D }
|
|
25
|
-
), S(g), { currentIndex:
|
|
25
|
+
), S(g), { currentIndex: n, isPrevDisabled: v, isNextDisabled: t, goTo: x };
|
|
26
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({
|
|
27
27
|
__name: "MclCarouselA",
|
|
28
28
|
props: {
|
|
@@ -43,102 +43,105 @@ const D = 0.75, j = (s) => {
|
|
|
43
43
|
cardsGap: { default: "xs" }
|
|
44
44
|
},
|
|
45
45
|
emits: ["btn-prev", "btn-next"],
|
|
46
|
-
setup(s, { emit:
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
},
|
|
46
|
+
setup(s, { emit: n }) {
|
|
47
|
+
const t = s, v = n, u = y(null), { isPrevDisabled: p, isNextDisabled: f, goTo: h } = j(u), g = (r, o) => {
|
|
48
|
+
h(o) && v(o === "prev" ? "btn-prev" : "btn-next", r);
|
|
49
|
+
}, C = () => {
|
|
50
50
|
}, x = d(
|
|
51
|
-
() =>
|
|
51
|
+
() => a.bgColorVariant({ color: t.bgColor })
|
|
52
52
|
), l = d(
|
|
53
|
-
() =>
|
|
53
|
+
() => a.bgColorVariant({ color: t.highlightColor })
|
|
54
54
|
), i = d(
|
|
55
55
|
() => [
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
a.h2Variant({ size: t.titleSize }),
|
|
57
|
+
a.textColorVariant({ color: t.titleColor })
|
|
58
58
|
].join(" ")
|
|
59
|
-
),
|
|
59
|
+
), m = d(() => {
|
|
60
60
|
const r = [
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
a.bodyTextVariant({ size: t.tagLineSize }),
|
|
62
|
+
a.textColorVariant({ color: t.tagLineColor })
|
|
63
63
|
];
|
|
64
|
-
return
|
|
65
|
-
}),
|
|
64
|
+
return t.tagLineUpperCase && r.push("uppercase"), r.join(" ");
|
|
65
|
+
}), k = d(
|
|
66
66
|
() => [
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
n.ringColorVariant({ color: e.btnBgColor })
|
|
67
|
+
a.textColorVariant({ color: t.btnColor }),
|
|
68
|
+
a.bgColorVariant({ color: t.btnBgColor })
|
|
70
69
|
].join(" ")
|
|
71
70
|
), _ = d(
|
|
72
|
-
() =>
|
|
71
|
+
() => a.gapVariant({ spacing: t.cardsGap })
|
|
73
72
|
);
|
|
74
73
|
return (r, o) => (w(), L("section", {
|
|
75
74
|
class: c(["overflow-hidden py-lg lg:py-xl", x.value])
|
|
76
75
|
}, [
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
e("div", A, [
|
|
77
|
+
e("div", R, [
|
|
79
78
|
s.showHighlight ? (w(), L("div", {
|
|
80
79
|
key: 0,
|
|
81
80
|
class: c(["absolute -left-4 hidden h-full w-md bg-opacity-25 sm:block", l.value])
|
|
82
|
-
}, null, 2)) :
|
|
83
|
-
|
|
81
|
+
}, null, 2)) : B("", !0),
|
|
82
|
+
e("div", E, [
|
|
84
83
|
s.showTagLine ? (w(), L("span", {
|
|
85
84
|
key: 0,
|
|
86
|
-
class: c(["tracking-widest",
|
|
85
|
+
class: c(["tracking-widest", m.value]),
|
|
87
86
|
innerHTML: s.tagLine
|
|
88
|
-
}, null, 10, N)) :
|
|
89
|
-
|
|
87
|
+
}, null, 10, N)) : B("", !0),
|
|
88
|
+
e("h2", {
|
|
90
89
|
class: c(["tracking-wide", i.value]),
|
|
91
90
|
innerHTML: s.title
|
|
92
91
|
}, null, 10, G)
|
|
93
92
|
]),
|
|
94
|
-
|
|
95
|
-
|
|
93
|
+
e("div", $, [
|
|
94
|
+
e("div", O, [
|
|
96
95
|
T(r.$slots, "description")
|
|
97
96
|
]),
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
class: c(["grid place-items-center rounded-full p-xs
|
|
101
|
-
disabled: V(
|
|
97
|
+
e("div", P, [
|
|
98
|
+
e("button", {
|
|
99
|
+
class: c(["grid place-items-center rounded-full p-xs transition-all duration-200 hover:bg-opacity-80 focus-visible:mcl-focus-ring disabled:opacity-50", k.value]),
|
|
100
|
+
disabled: V(p),
|
|
102
101
|
onClick: o[0] || (o[0] = (b) => g(b, "prev")),
|
|
103
102
|
"aria-label": "previous"
|
|
104
103
|
}, [...o[2] || (o[2] = [
|
|
105
|
-
|
|
104
|
+
e("svg", {
|
|
105
|
+
"aria-hidden": "true",
|
|
106
|
+
focusable: "false",
|
|
106
107
|
class: "h-xs w-xs",
|
|
107
108
|
xmlns: "http://www.w3.org/2000/svg",
|
|
108
109
|
viewBox: "0 0 384 512",
|
|
109
110
|
fill: "currentColor"
|
|
110
111
|
}, [
|
|
111
|
-
|
|
112
|
+
e("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" })
|
|
112
113
|
], -1)
|
|
113
114
|
])], 10, U),
|
|
114
|
-
|
|
115
|
-
class: c(["grid place-items-center rounded-full p-xs
|
|
115
|
+
e("button", {
|
|
116
|
+
class: c(["grid place-items-center rounded-full p-xs transition-all duration-200 hover:bg-opacity-80 focus-visible:mcl-focus-ring disabled:opacity-50", k.value]),
|
|
116
117
|
disabled: V(f),
|
|
117
118
|
onClick: o[1] || (o[1] = (b) => g(b, "next")),
|
|
118
119
|
"aria-label": "next"
|
|
119
120
|
}, [...o[3] || (o[3] = [
|
|
120
|
-
|
|
121
|
+
e("svg", {
|
|
122
|
+
"aria-hidden": "true",
|
|
123
|
+
focusable: "false",
|
|
121
124
|
class: "h-xs w-xs",
|
|
122
125
|
xmlns: "http://www.w3.org/2000/svg",
|
|
123
126
|
viewBox: "0 0 384 512",
|
|
124
127
|
fill: "currentColor"
|
|
125
128
|
}, [
|
|
126
|
-
|
|
129
|
+
e("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" })
|
|
127
130
|
], -1)
|
|
128
131
|
])], 10, X)
|
|
129
132
|
])
|
|
130
133
|
])
|
|
131
134
|
])
|
|
132
135
|
]),
|
|
133
|
-
|
|
134
|
-
|
|
136
|
+
e("div", Y, [
|
|
137
|
+
e("div", {
|
|
135
138
|
class: c(["flex gap-xs px-xs transition-transform duration-500", _.value]),
|
|
136
139
|
ref_key: "slideContainer",
|
|
137
140
|
ref: u
|
|
138
141
|
}, [
|
|
139
142
|
T(r.$slots, "carousel", {
|
|
140
143
|
cards: s.content,
|
|
141
|
-
setRef:
|
|
144
|
+
setRef: C
|
|
142
145
|
})
|
|
143
146
|
], 2)
|
|
144
147
|
])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(n,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):(n=typeof globalThis<"u"?globalThis:n||self,e(n.MclCarousel={},n.Vue,n.ManguitoTheme,n.core))})(this,(function(n,e,a,V){"use strict";const L=s=>{const r=e.ref(0),t=e.ref(!1),g=e.computed(()=>r.value===0);let d=!1;const p=e.shallowRef(null),f=l=>s.value?.children.item(l)??null,m=()=>s.value?.children.length??0,u=()=>{p.value=f(m()-1)},h=()=>{const l=s.value,i=f(r.value),C=f(0);!l||!i||!C||(l.style.transform=`translateX(-${i.offsetLeft-C.offsetLeft}px)`,t.value=!1)},x=l=>{if(d)return!1;const i=l==="prev"?r.value-1:r.value+1;return i<0||i>=m()?!1:(d=!0,r.value=i,u(),h(),!0)};return V.useEventListener(s,"transitionend",l=>{l.target===s.value&&(d=!1)}),V.useIntersectionObserver(p,([l])=>{l.isIntersecting&&(t.value=!0)},{threshold:.75}),e.onMounted(u),{currentIndex:r,isPrevDisabled:g,isNextDisabled:t,goTo:x}},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"},v=["disabled"],M=["disabled"],I={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,g=r,d=e.ref(null),{isPrevDisabled:p,isNextDisabled:f,goTo:m}=L(d),u=(c,o)=>{m(o)&&g(o==="prev"?"btn-prev":"btn-next",c)},h=()=>{},x=e.computed(()=>a.generateClass.bgColorVariant({color:t.bgColor})),l=e.computed(()=>a.generateClass.bgColorVariant({color:t.highlightColor})),i=e.computed(()=>[a.generateClass.h2Variant({size:t.titleSize}),a.generateClass.textColorVariant({color:t.titleColor})].join(" ")),C=e.computed(()=>{const c=[a.generateClass.bodyTextVariant({size:t.tagLineSize}),a.generateClass.textColorVariant({color:t.tagLineColor})];return t.tagLineUpperCase&&c.push("uppercase"),c.join(" ")}),y=e.computed(()=>[a.generateClass.textColorVariant({color:t.btnColor}),a.generateClass.bgColorVariant({color:t.btnBgColor})].join(" ")),H=e.computed(()=>a.generateClass.gapVariant({spacing:t.cardsGap}));return(c,o)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["overflow-hidden py-lg lg:py-xl",x.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",C.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 transition-all duration-200 hover:bg-opacity-80 focus-visible:mcl-focus-ring disabled:opacity-50",y.value]),disabled:e.unref(p),onClick:o[0]||(o[0]=b=>u(b,"prev")),"aria-label":"previous"},[...o[2]||(o[2]=[e.createElementVNode("svg",{"aria-hidden":"true",focusable:"false",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,v),e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center rounded-full p-xs transition-all duration-200 hover:bg-opacity-80 focus-visible:mcl-focus-ring disabled:opacity-50",y.value]),disabled:e.unref(f),onClick:o[1]||(o[1]=b=>u(b,"next")),"aria-label":"next"},[...o[3]||(o[3]=[e.createElementVNode("svg",{"aria-hidden":"true",focusable:"false",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,M)])])])]),e.createElementVNode("div",I,[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:h})],2)])],2))}});n.MclCarouselA=T,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-carousel",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"description": "carousel component based on @bobbykim/manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -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.
|
|
35
|
+
"@bobbykim/manguito-theme": "1.6.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
@@ -44,6 +44,8 @@
|
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"build": "vite build",
|
|
47
|
+
"test": "vitest run",
|
|
48
|
+
"test:watch": "vitest",
|
|
47
49
|
"typecheck": "vue-tsc --noEmit -p tsconfig.json"
|
|
48
50
|
}
|
|
49
51
|
}
|