@bobbykim/mcl-carousel 0.6.0 → 0.7.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 +6 -5
- package/dist/mcl-carousel.js +45 -50
- package/dist/mcl-carousel.umd.cjs +1 -1
- package/package.json +3 -4
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { BodyText } from '@bobbykim/manguito-theme';
|
|
2
2
|
import { ColorPalette } from '@bobbykim/manguito-theme';
|
|
3
3
|
import { ComponentOptionsMixin } from 'vue';
|
|
4
|
+
import { ComponentPublicInstance } from 'vue';
|
|
4
5
|
import { DefineComponent } from 'vue';
|
|
5
6
|
import { ExtractPropTypes } from 'vue';
|
|
6
7
|
import { HeadingSize } from '@bobbykim/manguito-theme';
|
|
@@ -65,8 +66,8 @@ btnColor: string;
|
|
|
65
66
|
btnBgColor: string;
|
|
66
67
|
cardsGap: string;
|
|
67
68
|
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
68
|
-
"btn-prev": (
|
|
69
|
-
"btn-next": (
|
|
69
|
+
"btn-prev": (event: Event) => void;
|
|
70
|
+
"btn-next": (event: Event) => void;
|
|
70
71
|
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
71
72
|
title: string;
|
|
72
73
|
titleSize?: HeadingSize | undefined;
|
|
@@ -97,8 +98,8 @@ btnColor: string;
|
|
|
97
98
|
btnBgColor: string;
|
|
98
99
|
cardsGap: string;
|
|
99
100
|
}>>> & {
|
|
100
|
-
"onBtn-prev"?: ((
|
|
101
|
-
"onBtn-next"?: ((
|
|
101
|
+
"onBtn-prev"?: ((event: Event) => any) | undefined;
|
|
102
|
+
"onBtn-next"?: ((event: Event) => any) | undefined;
|
|
102
103
|
}, {
|
|
103
104
|
titleSize: HeadingSize;
|
|
104
105
|
titleColor: ColorPalette;
|
|
@@ -116,7 +117,7 @@ cardsGap: SpacingLevel;
|
|
|
116
117
|
description?(_: {}): any;
|
|
117
118
|
carousel?(_: {
|
|
118
119
|
cards: any[];
|
|
119
|
-
setRef: (el:
|
|
120
|
+
setRef: (el: Element | ComponentPublicInstance | null) => void;
|
|
120
121
|
}): any;
|
|
121
122
|
}>;
|
|
122
123
|
|
package/dist/mcl-carousel.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as A, ref as
|
|
2
|
-
import
|
|
3
|
-
import { useEventListener as L } from "@vueuse/core";
|
|
4
|
-
const z = { class: "container px-xs sm:px-md text-center sm:text-left" }, H = { class: "relative" },
|
|
1
|
+
import { defineComponent as A, ref as o, onMounted as G, openBlock as p, createElementBlock as f, normalizeClass as a, unref as g, createElementVNode as t, createCommentVNode as x, renderSlot as y } from "vue";
|
|
2
|
+
import n from "@bobbykim/manguito-theme";
|
|
3
|
+
import { useEventListener as L, useIntersectionObserver as S } from "@vueuse/core";
|
|
4
|
+
const z = { class: "container px-xs sm:px-md text-center sm:text-left" }, H = { class: "relative" }, j = { class: "relative" }, X = ["innerHTML"], $ = ["innerHTML"], I = { class: "relative flex flex-wrap sm:flex-nowrap justify-center sm:justify-start items-center space-x-4 space-y-4" }, N = { class: "max-w-xl" }, D = { class: "flex space-x-4" }, U = ["disabled"], V = /* @__PURE__ */ t("svg", {
|
|
5
5
|
class: "w-xs h-xs",
|
|
6
6
|
xmlns: "http://www.w3.org/2000/svg",
|
|
7
7
|
viewBox: "0 0 384 512",
|
|
@@ -40,9 +40,9 @@ const z = { class: "container px-xs sm:px-md text-center sm:text-left" }, H = {
|
|
|
40
40
|
},
|
|
41
41
|
emits: ["btn-prev", "btn-next"],
|
|
42
42
|
setup(w, { emit: B }) {
|
|
43
|
-
const
|
|
43
|
+
const T = w, r = o(null), i = o([]), h = o(), v = B, d = o(0), c = o(!1);
|
|
44
44
|
let u = !1;
|
|
45
|
-
const
|
|
45
|
+
const O = (e) => {
|
|
46
46
|
switch (e) {
|
|
47
47
|
case "0":
|
|
48
48
|
return 0;
|
|
@@ -66,79 +66,74 @@ const z = { class: "container px-xs sm:px-md text-center sm:text-left" }, H = {
|
|
|
66
66
|
return 128;
|
|
67
67
|
}
|
|
68
68
|
}, k = (e) => {
|
|
69
|
-
|
|
70
|
-
},
|
|
71
|
-
var
|
|
72
|
-
u || (u = !0, s === "prev" && (
|
|
73
|
-
},
|
|
74
|
-
(e)
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
{ threshold: 0.75 }
|
|
78
|
-
), _ = (e, s) => [
|
|
79
|
-
l("H2", e),
|
|
80
|
-
l("TEXTCOLOR", s)
|
|
81
|
-
].join(" "), M = (e, s, n) => {
|
|
69
|
+
i.value.push(e);
|
|
70
|
+
}, m = (e, s) => {
|
|
71
|
+
var l;
|
|
72
|
+
u || (u = !0, s === "prev" && (d.value--, v("btn-prev", e)), s === "next" && (d.value++, v("btn-next", e)), (l = r.value) == null || l.dispatchEvent(new Event("sliderMove")));
|
|
73
|
+
}, _ = (e, s) => [
|
|
74
|
+
n("H2", e),
|
|
75
|
+
n("TEXTCOLOR", s)
|
|
76
|
+
].join(" "), M = (e, s, l) => {
|
|
82
77
|
const b = [
|
|
83
|
-
|
|
84
|
-
|
|
78
|
+
n("BODYTEXT", e),
|
|
79
|
+
n("TEXTCOLOR", s)
|
|
85
80
|
];
|
|
86
|
-
return
|
|
81
|
+
return l && b.push("uppercase"), b.join(" ");
|
|
87
82
|
}, C = (e, s) => [
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
83
|
+
n("TEXTCOLOR", e),
|
|
84
|
+
n("BGCOLOR", s),
|
|
85
|
+
n("RINGCOLOR", s)
|
|
91
86
|
].join(" "), E = () => {
|
|
92
|
-
|
|
87
|
+
r.value.style.transform = `translateX(-${d.value * (i.value[0].$el.clientWidth + O(T.cardsGap) + 2)}px)`, c.value = !1;
|
|
93
88
|
}, R = () => {
|
|
94
89
|
u = !1;
|
|
95
90
|
};
|
|
96
|
-
return L(
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
91
|
+
return L(r, "sliderMove", E), L(r, "transitionend", R), S(
|
|
92
|
+
h,
|
|
93
|
+
(e) => {
|
|
94
|
+
e[0].isIntersecting && (c.value = !0);
|
|
95
|
+
},
|
|
96
|
+
{ threshold: 0.75 }
|
|
97
|
+
), G(() => {
|
|
98
|
+
h.value = i.value[i.value.length - 1].$el;
|
|
104
99
|
}), (e, s) => (p(), f("section", {
|
|
105
|
-
class:
|
|
100
|
+
class: a(["py-lg lg:py-xl overflow-hidden", g(n)("BGCOLOR", e.bgColor)])
|
|
106
101
|
}, [
|
|
107
102
|
t("div", z, [
|
|
108
103
|
t("div", H, [
|
|
109
104
|
e.displayHighlight ? (p(), f("div", {
|
|
110
105
|
key: 0,
|
|
111
|
-
class:
|
|
106
|
+
class: a(["hidden sm:block absolute w-md bg-opacity-25 -left-4 h-full", g(n)("BGCOLOR", e.highlightColor)])
|
|
112
107
|
}, null, 2)) : x("", !0),
|
|
113
|
-
t("div",
|
|
108
|
+
t("div", j, [
|
|
114
109
|
e.displayTagLine ? (p(), f("span", {
|
|
115
110
|
key: 0,
|
|
116
|
-
class:
|
|
111
|
+
class: a([
|
|
117
112
|
"tracking-widest",
|
|
118
113
|
M(e.tagLineSize, e.tagLineColor, e.tagLineUpperCase)
|
|
119
114
|
]),
|
|
120
115
|
innerHTML: e.tagLine
|
|
121
|
-
}, null, 10,
|
|
116
|
+
}, null, 10, X)) : x("", !0),
|
|
122
117
|
t("h2", {
|
|
123
|
-
class:
|
|
118
|
+
class: a(["tracking-wide", _(e.titleSize, e.titleColor)]),
|
|
124
119
|
innerHTML: e.title
|
|
125
|
-
}, null, 10,
|
|
120
|
+
}, null, 10, $)
|
|
126
121
|
]),
|
|
127
122
|
t("div", I, [
|
|
128
123
|
t("div", N, [
|
|
129
124
|
y(e.$slots, "description")
|
|
130
125
|
]),
|
|
131
|
-
t("div",
|
|
126
|
+
t("div", D, [
|
|
132
127
|
t("button", {
|
|
133
|
-
class:
|
|
134
|
-
disabled:
|
|
135
|
-
onClick: s[0] || (s[0] = (
|
|
128
|
+
class: a(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200", C(e.btnColor, e.btnBgColor)]),
|
|
129
|
+
disabled: d.value === 0,
|
|
130
|
+
onClick: s[0] || (s[0] = (l) => m(l, "prev")),
|
|
136
131
|
"aria-label": "previous"
|
|
137
|
-
}, P, 10,
|
|
132
|
+
}, P, 10, U),
|
|
138
133
|
t("button", {
|
|
139
|
-
class:
|
|
134
|
+
class: a(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200", C(e.btnColor, e.btnBgColor)]),
|
|
140
135
|
disabled: c.value,
|
|
141
|
-
onClick: s[1] || (s[1] = (
|
|
136
|
+
onClick: s[1] || (s[1] = (l) => m(l, "next")),
|
|
142
137
|
"aria-label": "next"
|
|
143
138
|
}, q, 10, W)
|
|
144
139
|
])
|
|
@@ -147,9 +142,9 @@ const z = { class: "container px-xs sm:px-md text-center sm:text-left" }, H = {
|
|
|
147
142
|
]),
|
|
148
143
|
t("div", F, [
|
|
149
144
|
t("div", {
|
|
150
|
-
class:
|
|
145
|
+
class: a(["flex transition-transform duration-500 px-xs gap-xs", g(n)("GAP", e.cardsGap)]),
|
|
151
146
|
ref_key: "slideContainer",
|
|
152
|
-
ref:
|
|
147
|
+
ref: r
|
|
153
148
|
}, [
|
|
154
149
|
y(e.$slots, "carousel", {
|
|
155
150
|
cards: e.content,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(o,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):(o=typeof globalThis<"u"?globalThis:o||self,e(o.MclCarousel={},o.Vue,o.ManguitoTheme,o.core))})(this,function(o,e,n,
|
|
1
|
+
(function(o,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):(o=typeof globalThis<"u"?globalThis:o||self,e(o.MclCarousel={},o.Vue,o.ManguitoTheme,o.core))})(this,function(o,e,n,d){"use strict";const C={class:"container px-xs sm:px-md text-center sm:text-left"},b={class:"relative"},y={class:"relative"},x=["innerHTML"],E=["innerHTML"],L={class:"relative flex flex-wrap sm:flex-nowrap justify-center sm:justify-start items-center space-x-4 space-y-4"},w={class:"max-w-xl"},B={class:"flex space-x-4"},T=["disabled"],k=[e.createElementVNode("svg",{class:"w-xs h-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)],N=["disabled"],V=[e.createElementVNode("svg",{class:"w-xs h-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)],_={class:"container mt-md sm:mt-lg lg:mt-xl"},O=e.defineComponent({__name:"MclCarouselA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},bgColor:{default:"light-1"},displayTagLine:{type:Boolean,default:!0},tagLineUpperCase:{type:Boolean,default:!0},tagLine:{},tagLineSize:{default:"md"},tagLineColor:{default:"dark-1"},displayHighlight:{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(M,{emit:z}){const v=M,r=e.ref(null),i=e.ref([]),u=e.ref(),m=z,a=e.ref(0),c=e.ref(!1);let f=!1;const S=t=>{switch(t){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}},R=t=>{i.value.push(t)},p=(t,s)=>{var l;f||(f=!0,s==="prev"&&(a.value--,m("btn-prev",t)),s==="next"&&(a.value++,m("btn-next",t)),(l=r.value)==null||l.dispatchEvent(new Event("sliderMove")))},A=(t,s)=>[n("H2",t),n("TEXTCOLOR",s)].join(" "),G=(t,s,l)=>{const g=[n("BODYTEXT",t),n("TEXTCOLOR",s)];return l&&g.push("uppercase"),g.join(" ")},h=(t,s)=>[n("TEXTCOLOR",t),n("BGCOLOR",s),n("RINGCOLOR",s)].join(" "),j=()=>{r.value.style.transform=`translateX(-${a.value*(i.value[0].$el.clientWidth+S(v.cardsGap)+2)}px)`,c.value=!1},H=()=>{f=!1};return d.useEventListener(r,"sliderMove",j),d.useEventListener(r,"transitionend",H),d.useIntersectionObserver(u,t=>{t[0].isIntersecting&&(c.value=!0)},{threshold:.75}),e.onMounted(()=>{u.value=i.value[i.value.length-1].$el}),(t,s)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["py-lg lg:py-xl overflow-hidden",e.unref(n)("BGCOLOR",t.bgColor)])},[e.createElementVNode("div",C,[e.createElementVNode("div",b,[t.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["hidden sm:block absolute w-md bg-opacity-25 -left-4 h-full",e.unref(n)("BGCOLOR",t.highlightColor)])},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",y,[t.displayTagLine?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["tracking-widest",G(t.tagLineSize,t.tagLineColor,t.tagLineUpperCase)]),innerHTML:t.tagLine},null,10,x)):e.createCommentVNode("",!0),e.createElementVNode("h2",{class:e.normalizeClass(["tracking-wide",A(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,E)]),e.createElementVNode("div",L,[e.createElementVNode("div",w,[e.renderSlot(t.$slots,"description")]),e.createElementVNode("div",B,[e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200",h(t.btnColor,t.btnBgColor)]),disabled:a.value===0,onClick:s[0]||(s[0]=l=>p(l,"prev")),"aria-label":"previous"},k,10,T),e.createElementVNode("button",{class:e.normalizeClass(["grid place-items-center hover:bg-opacity-80 rounded-full p-xs focus:outline-none focus:ring-4 ring-offset-2 ring-offset-inherit disabled:opacity-50 transition-all duration-200",h(t.btnColor,t.btnBgColor)]),disabled:c.value,onClick:s[1]||(s[1]=l=>p(l,"next")),"aria-label":"next"},V,10,N)])])])]),e.createElementVNode("div",_,[e.createElementVNode("div",{class:e.normalizeClass(["flex transition-transform duration-500 px-xs gap-xs",e.unref(n)("GAP",t.cardsGap)]),ref_key:"slideContainer",ref:r},[e.renderSlot(t.$slots,"carousel",{cards:t.content,setRef:R})],2)])],2))}});o.MclCarouselA=O,Object.defineProperty(o,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.7.0",
|
|
4
4
|
"description": "carousel component based on @bobbykim/manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -33,8 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"license": "MIT",
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@bobbykim/manguito-theme": "0.
|
|
37
|
-
"@bobbykim/mcl-cards": "0.7.0",
|
|
36
|
+
"@bobbykim/manguito-theme": "0.20.0",
|
|
38
37
|
"@vueuse/core": "^10.8.0",
|
|
39
38
|
"vue": "^3.3.10"
|
|
40
39
|
},
|
|
@@ -46,5 +45,5 @@
|
|
|
46
45
|
"vite-plugin-dts": "^3.8.3",
|
|
47
46
|
"vue-tsc": "^1.8.25"
|
|
48
47
|
},
|
|
49
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "2e677770b8628a9616237cd3812af2dcb20ee5bb"
|
|
50
49
|
}
|