@bobbykim/mcl-carousel 0.11.4 → 0.11.5
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 +13 -9
- package/dist/mcl-carousel.umd.cjs +1 -1
- package/package.json +2 -2
package/dist/mcl-carousel.js
CHANGED
|
@@ -4,15 +4,15 @@ import { useEventListener as H, useIntersectionObserver as I } from "@vueuse/cor
|
|
|
4
4
|
const D = 0.75, j = (s) => {
|
|
5
5
|
const a = y(0), e = y(!1), p = d(() => a.value === 0);
|
|
6
6
|
let u = !1;
|
|
7
|
-
const v = M(null), f = (l) => s.value?.children.item(l) ?? null,
|
|
8
|
-
v.value = f(
|
|
7
|
+
const v = M(null), f = (l) => s.value?.children.item(l) ?? null, h = () => s.value?.children.length ?? 0, g = () => {
|
|
8
|
+
v.value = f(h() - 1);
|
|
9
9
|
}, m = () => {
|
|
10
|
-
const l = s.value, i = f(a.value),
|
|
11
|
-
!l || !i || !
|
|
10
|
+
const l = s.value, i = f(a.value), C = f(0);
|
|
11
|
+
!l || !i || !C || (l.style.transform = `translateX(-${i.offsetLeft - C.offsetLeft}px)`, e.value = !1);
|
|
12
12
|
}, x = (l) => {
|
|
13
13
|
if (u) return !1;
|
|
14
14
|
const i = l === "prev" ? a.value - 1 : a.value + 1;
|
|
15
|
-
return i < 0 || i >=
|
|
15
|
+
return i < 0 || i >= h() ? !1 : (u = !0, a.value = i, g(), m(), !0);
|
|
16
16
|
};
|
|
17
17
|
return H(s, "transitionend", (l) => {
|
|
18
18
|
l.target === s.value && (u = !1);
|
|
@@ -44,8 +44,8 @@ const D = 0.75, j = (s) => {
|
|
|
44
44
|
},
|
|
45
45
|
emits: ["btn-prev", "btn-next"],
|
|
46
46
|
setup(s, { emit: a }) {
|
|
47
|
-
const e = s, p = a, u = y(null), { isPrevDisabled: v, isNextDisabled: f, goTo:
|
|
48
|
-
|
|
47
|
+
const e = s, p = a, u = y(null), { isPrevDisabled: v, isNextDisabled: f, goTo: h } = j(u), g = (r, o) => {
|
|
48
|
+
h(o) && p(o === "prev" ? "btn-prev" : "btn-next", r);
|
|
49
49
|
}, m = () => {
|
|
50
50
|
}, x = d(
|
|
51
51
|
() => n.bgColorVariant({ color: e.bgColor })
|
|
@@ -56,7 +56,7 @@ const D = 0.75, j = (s) => {
|
|
|
56
56
|
n.h2Variant({ size: e.titleSize }),
|
|
57
57
|
n.textColorVariant({ color: e.titleColor })
|
|
58
58
|
].join(" ")
|
|
59
|
-
),
|
|
59
|
+
), C = d(() => {
|
|
60
60
|
const r = [
|
|
61
61
|
n.bodyTextVariant({ size: e.tagLineSize }),
|
|
62
62
|
n.textColorVariant({ color: e.tagLineColor })
|
|
@@ -83,7 +83,7 @@ const D = 0.75, j = (s) => {
|
|
|
83
83
|
t("div", E, [
|
|
84
84
|
s.showTagLine ? (w(), L("span", {
|
|
85
85
|
key: 0,
|
|
86
|
-
class: c(["tracking-widest",
|
|
86
|
+
class: c(["tracking-widest", C.value]),
|
|
87
87
|
innerHTML: s.tagLine
|
|
88
88
|
}, null, 10, N)) : k("", !0),
|
|
89
89
|
t("h2", {
|
|
@@ -103,6 +103,8 @@ const D = 0.75, j = (s) => {
|
|
|
103
103
|
"aria-label": "previous"
|
|
104
104
|
}, [...o[2] || (o[2] = [
|
|
105
105
|
t("svg", {
|
|
106
|
+
"aria-hidden": "true",
|
|
107
|
+
focusable: "false",
|
|
106
108
|
class: "h-xs w-xs",
|
|
107
109
|
xmlns: "http://www.w3.org/2000/svg",
|
|
108
110
|
viewBox: "0 0 384 512",
|
|
@@ -118,6 +120,8 @@ const D = 0.75, j = (s) => {
|
|
|
118
120
|
"aria-label": "next"
|
|
119
121
|
}, [...o[3] || (o[3] = [
|
|
120
122
|
t("svg", {
|
|
123
|
+
"aria-hidden": "true",
|
|
124
|
+
focusable: "false",
|
|
121
125
|
class: "h-xs w-xs",
|
|
122
126
|
xmlns: "http://www.w3.org/2000/svg",
|
|
123
127
|
viewBox: "0 0 384 512",
|
|
@@ -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,n,V){"use strict";const L=s=>{const r=e.ref(0),t=e.ref(!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,n,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 C=e.shallowRef(null),f=l=>s.value?.children.item(l)??null,p=()=>s.value?.children.length??0,u=()=>{C.value=f(p()-1)},h=()=>{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)},x=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,u(),h(),!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(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"},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,g=r,d=e.ref(null),{isPrevDisabled:C,isNextDisabled:f,goTo:p}=L(d),u=(c,o)=>{p(o)&&g(o==="prev"?"btn-prev":"btn-next",c)},h=()=>{},x=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",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",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=>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,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=>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,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:h})],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.11.
|
|
3
|
+
"version": "0.11.5",
|
|
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.5.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@vitejs/plugin-vue": "^5.2.1",
|