@bobbykim/mcl-carousel 0.11.5 → 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 +51 -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 >= h() ? !1 : (u = !0,
|
|
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,66 +43,65 @@ 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
|
-
h(o) &&
|
|
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", {
|
|
106
105
|
"aria-hidden": "true",
|
|
107
106
|
focusable: "false",
|
|
108
107
|
class: "h-xs w-xs",
|
|
@@ -110,16 +109,16 @@ const D = 0.75, j = (s) => {
|
|
|
110
109
|
viewBox: "0 0 384 512",
|
|
111
110
|
fill: "currentColor"
|
|
112
111
|
}, [
|
|
113
|
-
|
|
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" })
|
|
114
113
|
], -1)
|
|
115
114
|
])], 10, U),
|
|
116
|
-
|
|
117
|
-
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]),
|
|
118
117
|
disabled: V(f),
|
|
119
118
|
onClick: o[1] || (o[1] = (b) => g(b, "next")),
|
|
120
119
|
"aria-label": "next"
|
|
121
120
|
}, [...o[3] || (o[3] = [
|
|
122
|
-
|
|
121
|
+
e("svg", {
|
|
123
122
|
"aria-hidden": "true",
|
|
124
123
|
focusable: "false",
|
|
125
124
|
class: "h-xs w-xs",
|
|
@@ -127,22 +126,22 @@ const D = 0.75, j = (s) => {
|
|
|
127
126
|
viewBox: "0 0 384 512",
|
|
128
127
|
fill: "currentColor"
|
|
129
128
|
}, [
|
|
130
|
-
|
|
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" })
|
|
131
130
|
], -1)
|
|
132
131
|
])], 10, X)
|
|
133
132
|
])
|
|
134
133
|
])
|
|
135
134
|
])
|
|
136
135
|
]),
|
|
137
|
-
|
|
138
|
-
|
|
136
|
+
e("div", Y, [
|
|
137
|
+
e("div", {
|
|
139
138
|
class: c(["flex gap-xs px-xs transition-transform duration-500", _.value]),
|
|
140
139
|
ref_key: "slideContainer",
|
|
141
140
|
ref: u
|
|
142
141
|
}, [
|
|
143
142
|
T(r.$slots, "carousel", {
|
|
144
143
|
cards: s.content,
|
|
145
|
-
setRef:
|
|
144
|
+
setRef: C
|
|
146
145
|
})
|
|
147
146
|
], 2)
|
|
148
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
|
}
|