@bobbykim/mcl-carousel 0.5.1 → 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 +124 -0
- package/dist/mcl-carousel.js +160 -0
- package/dist/mcl-carousel.umd.cjs +1 -0
- package/package.json +28 -7
- package/CHANGELOG.md +0 -58
- package/index.d.ts +0 -2
- package/index.js +0 -2
- package/index.ts +0 -3
- package/lib/mcl-carousel-a/MclCarouselA.vue +0 -292
- package/lib/mcl-carousel-a/MclCarouselA.vue.d.ts +0 -108
- package/tsconfig.json +0 -5
- package/tsconfig.ts.json +0 -9
- package/tsconfig.vue.json +0 -9
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { BodyText } from '@bobbykim/manguito-theme';
|
|
2
|
+
import { ColorPalette } from '@bobbykim/manguito-theme';
|
|
3
|
+
import { ComponentOptionsMixin } from 'vue';
|
|
4
|
+
import { ComponentPublicInstance } from 'vue';
|
|
5
|
+
import { DefineComponent } from 'vue';
|
|
6
|
+
import { ExtractPropTypes } from 'vue';
|
|
7
|
+
import { HeadingSize } from '@bobbykim/manguito-theme';
|
|
8
|
+
import { PropType } from 'vue';
|
|
9
|
+
import { PublicProps } from 'vue';
|
|
10
|
+
import { SpacingLevel } from '@bobbykim/manguito-theme';
|
|
11
|
+
|
|
12
|
+
declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
13
|
+
|
|
14
|
+
declare type __VLS_Prettify<T> = {
|
|
15
|
+
[K in keyof T]: T[K];
|
|
16
|
+
} & {};
|
|
17
|
+
|
|
18
|
+
declare type __VLS_TypePropsToRuntimeProps<T> = {
|
|
19
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
20
|
+
type: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
21
|
+
} : {
|
|
22
|
+
type: PropType<T[K]>;
|
|
23
|
+
required: true;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
declare type __VLS_WithDefaults<P, D> = {
|
|
28
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
29
|
+
default: D[K];
|
|
30
|
+
}> : P[K];
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
34
|
+
new (): {
|
|
35
|
+
$slots: S;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export declare const MclCarouselA: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
40
|
+
title: string;
|
|
41
|
+
titleSize?: HeadingSize | undefined;
|
|
42
|
+
titleColor?: ColorPalette | undefined;
|
|
43
|
+
bgColor?: ColorPalette | undefined;
|
|
44
|
+
displayTagLine?: boolean | undefined;
|
|
45
|
+
tagLineUpperCase?: boolean | undefined;
|
|
46
|
+
tagLine?: string | undefined;
|
|
47
|
+
tagLineSize?: BodyText | undefined;
|
|
48
|
+
tagLineColor?: ColorPalette | undefined;
|
|
49
|
+
displayHighlight?: boolean | undefined;
|
|
50
|
+
highlightColor?: ColorPalette | undefined;
|
|
51
|
+
btnColor?: ColorPalette | undefined;
|
|
52
|
+
btnBgColor?: ColorPalette | undefined;
|
|
53
|
+
content: any[];
|
|
54
|
+
cardsGap?: SpacingLevel | undefined;
|
|
55
|
+
}>, {
|
|
56
|
+
titleSize: string;
|
|
57
|
+
titleColor: string;
|
|
58
|
+
bgColor: string;
|
|
59
|
+
displayTagLine: boolean;
|
|
60
|
+
tagLineUpperCase: boolean;
|
|
61
|
+
tagLineSize: string;
|
|
62
|
+
tagLineColor: string;
|
|
63
|
+
displayHighlight: boolean;
|
|
64
|
+
highlightColor: string;
|
|
65
|
+
btnColor: string;
|
|
66
|
+
btnBgColor: string;
|
|
67
|
+
cardsGap: string;
|
|
68
|
+
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
69
|
+
"btn-prev": (event: Event) => void;
|
|
70
|
+
"btn-next": (event: Event) => void;
|
|
71
|
+
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
72
|
+
title: string;
|
|
73
|
+
titleSize?: HeadingSize | undefined;
|
|
74
|
+
titleColor?: ColorPalette | undefined;
|
|
75
|
+
bgColor?: ColorPalette | undefined;
|
|
76
|
+
displayTagLine?: boolean | undefined;
|
|
77
|
+
tagLineUpperCase?: boolean | undefined;
|
|
78
|
+
tagLine?: string | undefined;
|
|
79
|
+
tagLineSize?: BodyText | undefined;
|
|
80
|
+
tagLineColor?: ColorPalette | undefined;
|
|
81
|
+
displayHighlight?: boolean | undefined;
|
|
82
|
+
highlightColor?: ColorPalette | undefined;
|
|
83
|
+
btnColor?: ColorPalette | undefined;
|
|
84
|
+
btnBgColor?: ColorPalette | undefined;
|
|
85
|
+
content: any[];
|
|
86
|
+
cardsGap?: SpacingLevel | undefined;
|
|
87
|
+
}>, {
|
|
88
|
+
titleSize: string;
|
|
89
|
+
titleColor: string;
|
|
90
|
+
bgColor: string;
|
|
91
|
+
displayTagLine: boolean;
|
|
92
|
+
tagLineUpperCase: boolean;
|
|
93
|
+
tagLineSize: string;
|
|
94
|
+
tagLineColor: string;
|
|
95
|
+
displayHighlight: boolean;
|
|
96
|
+
highlightColor: string;
|
|
97
|
+
btnColor: string;
|
|
98
|
+
btnBgColor: string;
|
|
99
|
+
cardsGap: string;
|
|
100
|
+
}>>> & {
|
|
101
|
+
"onBtn-prev"?: ((event: Event) => any) | undefined;
|
|
102
|
+
"onBtn-next"?: ((event: Event) => any) | undefined;
|
|
103
|
+
}, {
|
|
104
|
+
titleSize: HeadingSize;
|
|
105
|
+
titleColor: ColorPalette;
|
|
106
|
+
bgColor: ColorPalette;
|
|
107
|
+
displayTagLine: boolean;
|
|
108
|
+
tagLineUpperCase: boolean;
|
|
109
|
+
tagLineSize: BodyText;
|
|
110
|
+
tagLineColor: ColorPalette;
|
|
111
|
+
displayHighlight: boolean;
|
|
112
|
+
highlightColor: ColorPalette;
|
|
113
|
+
btnColor: ColorPalette;
|
|
114
|
+
btnBgColor: ColorPalette;
|
|
115
|
+
cardsGap: SpacingLevel;
|
|
116
|
+
}, {}>, {
|
|
117
|
+
description?(_: {}): any;
|
|
118
|
+
carousel?(_: {
|
|
119
|
+
cards: any[];
|
|
120
|
+
setRef: (el: Element | ComponentPublicInstance | null) => void;
|
|
121
|
+
}): any;
|
|
122
|
+
}>;
|
|
123
|
+
|
|
124
|
+
export { }
|
|
@@ -0,0 +1,160 @@
|
|
|
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
|
+
class: "w-xs h-xs",
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7
|
+
viewBox: "0 0 384 512",
|
|
8
|
+
fill: "currentColor"
|
|
9
|
+
}, [
|
|
10
|
+
/* @__PURE__ */ 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" })
|
|
11
|
+
], -1), P = [
|
|
12
|
+
V
|
|
13
|
+
], W = ["disabled"], Y = /* @__PURE__ */ t("svg", {
|
|
14
|
+
class: "w-xs h-xs",
|
|
15
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
16
|
+
viewBox: "0 0 384 512",
|
|
17
|
+
fill: "currentColor"
|
|
18
|
+
}, [
|
|
19
|
+
/* @__PURE__ */ 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" })
|
|
20
|
+
], -1), q = [
|
|
21
|
+
Y
|
|
22
|
+
], F = { class: "container mt-md sm:mt-lg lg:mt-xl" }, Z = /* @__PURE__ */ A({
|
|
23
|
+
__name: "MclCarouselA",
|
|
24
|
+
props: {
|
|
25
|
+
title: {},
|
|
26
|
+
titleSize: { default: "md" },
|
|
27
|
+
titleColor: { default: "dark-3" },
|
|
28
|
+
bgColor: { default: "light-1" },
|
|
29
|
+
displayTagLine: { type: Boolean, default: !0 },
|
|
30
|
+
tagLineUpperCase: { type: Boolean, default: !0 },
|
|
31
|
+
tagLine: {},
|
|
32
|
+
tagLineSize: { default: "md" },
|
|
33
|
+
tagLineColor: { default: "dark-1" },
|
|
34
|
+
displayHighlight: { type: Boolean, default: !0 },
|
|
35
|
+
highlightColor: { default: "primary" },
|
|
36
|
+
btnColor: { default: "dark-3" },
|
|
37
|
+
btnBgColor: { default: "light-4" },
|
|
38
|
+
content: {},
|
|
39
|
+
cardsGap: { default: "xs" }
|
|
40
|
+
},
|
|
41
|
+
emits: ["btn-prev", "btn-next"],
|
|
42
|
+
setup(w, { emit: B }) {
|
|
43
|
+
const T = w, r = o(null), i = o([]), h = o(), v = B, d = o(0), c = o(!1);
|
|
44
|
+
let u = !1;
|
|
45
|
+
const O = (e) => {
|
|
46
|
+
switch (e) {
|
|
47
|
+
case "0":
|
|
48
|
+
return 0;
|
|
49
|
+
case "3xs":
|
|
50
|
+
return 4;
|
|
51
|
+
case "2xs":
|
|
52
|
+
return 8;
|
|
53
|
+
case "xs":
|
|
54
|
+
return 16;
|
|
55
|
+
case "sm":
|
|
56
|
+
return 24;
|
|
57
|
+
case "md":
|
|
58
|
+
return 32;
|
|
59
|
+
case "lg":
|
|
60
|
+
return 48;
|
|
61
|
+
case "xl":
|
|
62
|
+
return 64;
|
|
63
|
+
case "2xl":
|
|
64
|
+
return 96;
|
|
65
|
+
case "3xl":
|
|
66
|
+
return 128;
|
|
67
|
+
}
|
|
68
|
+
}, k = (e) => {
|
|
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) => {
|
|
77
|
+
const b = [
|
|
78
|
+
n("BODYTEXT", e),
|
|
79
|
+
n("TEXTCOLOR", s)
|
|
80
|
+
];
|
|
81
|
+
return l && b.push("uppercase"), b.join(" ");
|
|
82
|
+
}, C = (e, s) => [
|
|
83
|
+
n("TEXTCOLOR", e),
|
|
84
|
+
n("BGCOLOR", s),
|
|
85
|
+
n("RINGCOLOR", s)
|
|
86
|
+
].join(" "), E = () => {
|
|
87
|
+
r.value.style.transform = `translateX(-${d.value * (i.value[0].$el.clientWidth + O(T.cardsGap) + 2)}px)`, c.value = !1;
|
|
88
|
+
}, R = () => {
|
|
89
|
+
u = !1;
|
|
90
|
+
};
|
|
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;
|
|
99
|
+
}), (e, s) => (p(), f("section", {
|
|
100
|
+
class: a(["py-lg lg:py-xl overflow-hidden", g(n)("BGCOLOR", e.bgColor)])
|
|
101
|
+
}, [
|
|
102
|
+
t("div", z, [
|
|
103
|
+
t("div", H, [
|
|
104
|
+
e.displayHighlight ? (p(), f("div", {
|
|
105
|
+
key: 0,
|
|
106
|
+
class: a(["hidden sm:block absolute w-md bg-opacity-25 -left-4 h-full", g(n)("BGCOLOR", e.highlightColor)])
|
|
107
|
+
}, null, 2)) : x("", !0),
|
|
108
|
+
t("div", j, [
|
|
109
|
+
e.displayTagLine ? (p(), f("span", {
|
|
110
|
+
key: 0,
|
|
111
|
+
class: a([
|
|
112
|
+
"tracking-widest",
|
|
113
|
+
M(e.tagLineSize, e.tagLineColor, e.tagLineUpperCase)
|
|
114
|
+
]),
|
|
115
|
+
innerHTML: e.tagLine
|
|
116
|
+
}, null, 10, X)) : x("", !0),
|
|
117
|
+
t("h2", {
|
|
118
|
+
class: a(["tracking-wide", _(e.titleSize, e.titleColor)]),
|
|
119
|
+
innerHTML: e.title
|
|
120
|
+
}, null, 10, $)
|
|
121
|
+
]),
|
|
122
|
+
t("div", I, [
|
|
123
|
+
t("div", N, [
|
|
124
|
+
y(e.$slots, "description")
|
|
125
|
+
]),
|
|
126
|
+
t("div", D, [
|
|
127
|
+
t("button", {
|
|
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")),
|
|
131
|
+
"aria-label": "previous"
|
|
132
|
+
}, P, 10, U),
|
|
133
|
+
t("button", {
|
|
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)]),
|
|
135
|
+
disabled: c.value,
|
|
136
|
+
onClick: s[1] || (s[1] = (l) => m(l, "next")),
|
|
137
|
+
"aria-label": "next"
|
|
138
|
+
}, q, 10, W)
|
|
139
|
+
])
|
|
140
|
+
])
|
|
141
|
+
])
|
|
142
|
+
]),
|
|
143
|
+
t("div", F, [
|
|
144
|
+
t("div", {
|
|
145
|
+
class: a(["flex transition-transform duration-500 px-xs gap-xs", g(n)("GAP", e.cardsGap)]),
|
|
146
|
+
ref_key: "slideContainer",
|
|
147
|
+
ref: r
|
|
148
|
+
}, [
|
|
149
|
+
y(e.$slots, "carousel", {
|
|
150
|
+
cards: e.content,
|
|
151
|
+
setRef: k
|
|
152
|
+
})
|
|
153
|
+
], 2)
|
|
154
|
+
])
|
|
155
|
+
], 2));
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
export {
|
|
159
|
+
Z as MclCarouselA
|
|
160
|
+
};
|
|
@@ -0,0 +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,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,11 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-carousel",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "",
|
|
3
|
+
"version": "0.7.0",
|
|
4
|
+
"description": "carousel component based on @bobbykim/manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
9
|
+
"main": "./dist/mcl-carousel.umd.cjs",
|
|
10
|
+
"module": "./dist/mcl-carousel.js",
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./dist/mcl-carousel.js",
|
|
15
|
+
"require": "./dist/mcl-carousel.umd.cjs",
|
|
16
|
+
"types": "./dist/index.d.ts"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
7
19
|
"scripts": {
|
|
8
|
-
"build": "
|
|
20
|
+
"build": "vite build"
|
|
9
21
|
},
|
|
10
22
|
"author": {
|
|
11
23
|
"name": "Bobby Kim",
|
|
@@ -21,8 +33,17 @@
|
|
|
21
33
|
},
|
|
22
34
|
"license": "MIT",
|
|
23
35
|
"dependencies": {
|
|
24
|
-
"@bobbykim/manguito-theme": "
|
|
25
|
-
"@
|
|
36
|
+
"@bobbykim/manguito-theme": "0.20.0",
|
|
37
|
+
"@vueuse/core": "^10.8.0",
|
|
38
|
+
"vue": "^3.3.10"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"@vitejs/plugin-vue": "^4.5.2",
|
|
42
|
+
"typescript": "^5.3.3",
|
|
43
|
+
"vite": "^4.5.1",
|
|
44
|
+
"vite-plugin-css-injected-by-js": "^3.5.0",
|
|
45
|
+
"vite-plugin-dts": "^3.8.3",
|
|
46
|
+
"vue-tsc": "^1.8.25"
|
|
26
47
|
},
|
|
27
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "2e677770b8628a9616237cd3812af2dcb20ee5bb"
|
|
28
49
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
# Change Log
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
-
|
|
6
|
-
## [0.5.1](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-carousel@0.5.0...@bobbykim/mcl-carousel@0.5.1) (2024-04-01)
|
|
7
|
-
|
|
8
|
-
**Note:** Version bump only for package @bobbykim/mcl-carousel
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
# [0.5.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-carousel@0.3.0...@bobbykim/mcl-carousel@0.5.0) (2024-03-24)
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
### Features
|
|
18
|
-
|
|
19
|
-
* build and release ([a372086](https://github.com/bobbykim89/manguito-component-library/commit/a3720861fb40dd6ec1d0e3dda1f06e2479967432))
|
|
20
|
-
* **components/*:** prepublish build ([c8eb95a](https://github.com/bobbykim89/manguito-component-library/commit/c8eb95a0ede6727bf183d2e9ad634ae64af1411d))
|
|
21
|
-
* **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
|
|
22
|
-
* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
# [0.4.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-carousel@0.3.0...@bobbykim/mcl-carousel@0.4.0) (2024-03-21)
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
### Features
|
|
32
|
-
|
|
33
|
-
* **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
|
|
34
|
-
* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
# [0.3.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-carousel@0.2.0...@bobbykim/mcl-carousel@0.3.0) (2024-02-27)
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
### Features
|
|
44
|
-
|
|
45
|
-
* **/components/**/README.md,/deprecated:** update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
# 0.2.0 (2024-02-27)
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
### Features
|
|
55
|
-
|
|
56
|
-
* **manguito-theme,mcl-cards,mcl-header,mcl-footer,mcl-carousel:** add vueuse as one of dependencies, update code to make them ssr friendly ([119a327](https://github.com/bobbykim89/manguito-component-library/commit/119a327adf1ca9866e6ac063bce5acd4790db612))
|
|
57
|
-
* **mcl-carousel:** add mcl-carousel package ([6e03649](https://github.com/bobbykim89/manguito-component-library/commit/6e03649aaf8aca8902db71dcc60e38d75a1533fd))
|
|
58
|
-
* **stories/*:** ran package:build to build type declaration, move deprecated story files into deprecated folder ([ffc487d](https://github.com/bobbykim89/manguito-component-library/commit/ffc487dbcc093be7a3ccfeae98c5e10e8372a0e3))
|
package/index.d.ts
DELETED
package/index.js
DELETED
package/index.ts
DELETED
|
@@ -1,292 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import type {
|
|
3
|
-
BodyText,
|
|
4
|
-
ColorPalette,
|
|
5
|
-
HeadingSize,
|
|
6
|
-
SpacingLevel,
|
|
7
|
-
} from '@bobbykim/manguito-theme'
|
|
8
|
-
import generateClass from '@bobbykim/manguito-theme'
|
|
9
|
-
import { MclCardA, MclCardB, MclCardC, MclCardD } from '@bobbykim/mcl-cards'
|
|
10
|
-
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
11
|
-
|
|
12
|
-
type BtnNav = 'prev' | 'next'
|
|
13
|
-
|
|
14
|
-
const props = withDefaults(
|
|
15
|
-
defineProps<{
|
|
16
|
-
title: string
|
|
17
|
-
titleSize?: HeadingSize
|
|
18
|
-
titleColor?: ColorPalette
|
|
19
|
-
bgColor?: ColorPalette
|
|
20
|
-
displayTagLine?: boolean
|
|
21
|
-
tagLineUpperCase?: boolean
|
|
22
|
-
tagLine?: string
|
|
23
|
-
tagLineSize?: BodyText
|
|
24
|
-
tagLineColor?: ColorPalette
|
|
25
|
-
displayHighlight?: boolean
|
|
26
|
-
highlightColor?: ColorPalette
|
|
27
|
-
btnColor?: ColorPalette
|
|
28
|
-
btnBgColor?: ColorPalette
|
|
29
|
-
content: any[]
|
|
30
|
-
cardsGap?: SpacingLevel
|
|
31
|
-
}>(),
|
|
32
|
-
{
|
|
33
|
-
titleSize: 'md',
|
|
34
|
-
titleColor: 'dark-3',
|
|
35
|
-
bgColor: 'light-1',
|
|
36
|
-
displayTagLine: true,
|
|
37
|
-
tagLineUpperCase: true,
|
|
38
|
-
tagLineSize: 'md',
|
|
39
|
-
tagLineColor: 'dark-1',
|
|
40
|
-
displayHighlight: true,
|
|
41
|
-
highlightColor: 'primary',
|
|
42
|
-
btnColor: 'dark-3',
|
|
43
|
-
btnBgColor: 'light-4',
|
|
44
|
-
cardsGap: 'xs',
|
|
45
|
-
}
|
|
46
|
-
)
|
|
47
|
-
const slideContainer = ref()
|
|
48
|
-
const carouselCards = ref<
|
|
49
|
-
| null
|
|
50
|
-
| InstanceType<
|
|
51
|
-
typeof MclCardA | typeof MclCardB | typeof MclCardC | typeof MclCardD
|
|
52
|
-
>[]
|
|
53
|
-
>([])
|
|
54
|
-
const emit = defineEmits(['btn-prev', 'btn-next'])
|
|
55
|
-
|
|
56
|
-
const currentIndex = ref(0)
|
|
57
|
-
const isNextBtnDisabled = ref(false)
|
|
58
|
-
let isMoving: boolean = false
|
|
59
|
-
const cardsSpace = (gap: SpacingLevel): number => {
|
|
60
|
-
switch (gap) {
|
|
61
|
-
case '0':
|
|
62
|
-
return 0
|
|
63
|
-
case '3xs':
|
|
64
|
-
return 4
|
|
65
|
-
case '2xs':
|
|
66
|
-
return 8
|
|
67
|
-
case 'xs':
|
|
68
|
-
return 16
|
|
69
|
-
case 'sm':
|
|
70
|
-
return 24
|
|
71
|
-
case 'md':
|
|
72
|
-
return 32
|
|
73
|
-
case 'lg':
|
|
74
|
-
return 48
|
|
75
|
-
case 'xl':
|
|
76
|
-
return 64
|
|
77
|
-
case '2xl':
|
|
78
|
-
return 96
|
|
79
|
-
case '3xl':
|
|
80
|
-
return 128
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// assign ref as
|
|
85
|
-
const setCarouselRef = (el: any): void => {
|
|
86
|
-
carouselCards.value!.push(el)
|
|
87
|
-
// carouselCards.value = el
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// navigation btn control function
|
|
91
|
-
const handleSlideBtnClick = (e: Event, btn: BtnNav): void => {
|
|
92
|
-
if (isMoving) {
|
|
93
|
-
return
|
|
94
|
-
}
|
|
95
|
-
isMoving = true
|
|
96
|
-
// btn === 'prev' ? currentIndex.value-- : currentIndex.value++
|
|
97
|
-
if (btn === 'prev') {
|
|
98
|
-
currentIndex.value--
|
|
99
|
-
emit('btn-prev', e)
|
|
100
|
-
}
|
|
101
|
-
if (btn === 'next') {
|
|
102
|
-
currentIndex.value++
|
|
103
|
-
emit('btn-next', e)
|
|
104
|
-
}
|
|
105
|
-
slideContainer.value.dispatchEvent(new Event('sliderMove'))
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// intersection observer
|
|
109
|
-
const slideObserver = new IntersectionObserver(
|
|
110
|
-
(slide) => {
|
|
111
|
-
if (slide[0].isIntersecting) {
|
|
112
|
-
// add disable attribute
|
|
113
|
-
isNextBtnDisabled.value = true
|
|
114
|
-
}
|
|
115
|
-
},
|
|
116
|
-
{ threshold: 0.75 }
|
|
117
|
-
)
|
|
118
|
-
|
|
119
|
-
const getTitleClass = (size: HeadingSize, color: ColorPalette): string => {
|
|
120
|
-
/**
|
|
121
|
-
* @size - titleSize
|
|
122
|
-
* @color - titleColor
|
|
123
|
-
*/
|
|
124
|
-
|
|
125
|
-
const classArray = [
|
|
126
|
-
generateClass('H2', size),
|
|
127
|
-
generateClass('TEXTCOLOR', color),
|
|
128
|
-
]
|
|
129
|
-
|
|
130
|
-
return classArray.join(' ')
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
const getTaglineClass = (
|
|
134
|
-
size: BodyText,
|
|
135
|
-
color: ColorPalette,
|
|
136
|
-
upper: boolean
|
|
137
|
-
): string => {
|
|
138
|
-
/**
|
|
139
|
-
* @size - tagLineSize
|
|
140
|
-
* @color - tagLineColor
|
|
141
|
-
* @upper - tagLineUpperCase
|
|
142
|
-
*/
|
|
143
|
-
|
|
144
|
-
const classArray = [
|
|
145
|
-
generateClass('BODYTEXT', size),
|
|
146
|
-
generateClass('TEXTCOLOR', color),
|
|
147
|
-
]
|
|
148
|
-
|
|
149
|
-
if (upper) {
|
|
150
|
-
classArray.push('uppercase')
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
return classArray.join(' ')
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
const getButtonClass = (color: ColorPalette, bgColor: ColorPalette): string => {
|
|
157
|
-
/**
|
|
158
|
-
* @color - btnColor
|
|
159
|
-
* @bgColor - btnBgColor
|
|
160
|
-
*/
|
|
161
|
-
|
|
162
|
-
const classArray = [
|
|
163
|
-
generateClass('TEXTCOLOR', color),
|
|
164
|
-
generateClass('BGCOLOR', bgColor),
|
|
165
|
-
generateClass('RINGCOLOR', bgColor),
|
|
166
|
-
]
|
|
167
|
-
|
|
168
|
-
return classArray.join(' ')
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
const handleSlide = (): void => {
|
|
172
|
-
slideContainer.value.style.transform = `translateX(-${
|
|
173
|
-
currentIndex.value *
|
|
174
|
-
(carouselCards.value![0].$el.clientWidth + cardsSpace(props.cardsGap) + 2)
|
|
175
|
-
}px)`
|
|
176
|
-
|
|
177
|
-
isNextBtnDisabled.value = false
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
const handleTransitionEnd = (): void => {
|
|
181
|
-
isMoving = false
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
onMounted(() => {
|
|
185
|
-
// handle slide movement
|
|
186
|
-
slideContainer.value.addEventListener('sliderMove', handleSlide)
|
|
187
|
-
// handle transition end event
|
|
188
|
-
slideContainer.value.addEventListener('transitionend', handleTransitionEnd)
|
|
189
|
-
// intersection observer for slider
|
|
190
|
-
slideObserver.observe(
|
|
191
|
-
carouselCards.value![carouselCards.value!.length - 1].$el
|
|
192
|
-
)
|
|
193
|
-
})
|
|
194
|
-
|
|
195
|
-
onBeforeUnmount(() => {
|
|
196
|
-
slideContainer.value.removeEventListener('sliderMove', handleSlide)
|
|
197
|
-
slideContainer.value.removeEventListener('transitionend', handleTransitionEnd)
|
|
198
|
-
slideObserver.unobserve(
|
|
199
|
-
carouselCards.value![carouselCards.value!.length - 1].$el
|
|
200
|
-
)
|
|
201
|
-
})
|
|
202
|
-
</script>
|
|
203
|
-
|
|
204
|
-
<template>
|
|
205
|
-
<section
|
|
206
|
-
class="py-lg lg:py-xl overflow-hidden"
|
|
207
|
-
:class="generateClass('BGCOLOR', bgColor)"
|
|
208
|
-
>
|
|
209
|
-
<div class="container px-xs sm:px-md text-center sm:text-left">
|
|
210
|
-
<div class="relative">
|
|
211
|
-
<div
|
|
212
|
-
v-if="displayHighlight"
|
|
213
|
-
class="hidden sm:block absolute w-md bg-opacity-25 -left-4 h-full"
|
|
214
|
-
:class="generateClass('BGCOLOR', highlightColor)"
|
|
215
|
-
></div>
|
|
216
|
-
<div class="relative">
|
|
217
|
-
<span
|
|
218
|
-
v-if="displayTagLine"
|
|
219
|
-
class="tracking-widest"
|
|
220
|
-
:class="
|
|
221
|
-
getTaglineClass(tagLineSize, tagLineColor, tagLineUpperCase)
|
|
222
|
-
"
|
|
223
|
-
v-html="tagLine"
|
|
224
|
-
></span>
|
|
225
|
-
<h2
|
|
226
|
-
class="tracking-wide"
|
|
227
|
-
:class="getTitleClass(titleSize, titleColor)"
|
|
228
|
-
v-html="title"
|
|
229
|
-
></h2>
|
|
230
|
-
</div>
|
|
231
|
-
<div
|
|
232
|
-
class="relative flex flex-wrap sm:flex-nowrap justify-center sm:justify-start items-center space-x-4 space-y-4"
|
|
233
|
-
>
|
|
234
|
-
<div class="max-w-xl">
|
|
235
|
-
<slot name="description"></slot>
|
|
236
|
-
</div>
|
|
237
|
-
<div class="flex space-x-4">
|
|
238
|
-
<button
|
|
239
|
-
class="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"
|
|
240
|
-
:class="getButtonClass(btnColor, btnBgColor)"
|
|
241
|
-
:disabled="currentIndex === 0"
|
|
242
|
-
@click="handleSlideBtnClick($event, 'prev')"
|
|
243
|
-
aria-label="previous"
|
|
244
|
-
>
|
|
245
|
-
<svg
|
|
246
|
-
class="w-xs h-xs"
|
|
247
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
248
|
-
viewBox="0 0 384 512"
|
|
249
|
-
fill="currentColor"
|
|
250
|
-
>
|
|
251
|
-
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
|
|
252
|
-
<path
|
|
253
|
-
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"
|
|
254
|
-
/>
|
|
255
|
-
</svg>
|
|
256
|
-
</button>
|
|
257
|
-
<button
|
|
258
|
-
class="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"
|
|
259
|
-
:class="getButtonClass(btnColor, btnBgColor)"
|
|
260
|
-
:disabled="isNextBtnDisabled"
|
|
261
|
-
@click="handleSlideBtnClick($event, 'next')"
|
|
262
|
-
aria-label="next"
|
|
263
|
-
>
|
|
264
|
-
<svg
|
|
265
|
-
class="w-xs h-xs"
|
|
266
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
267
|
-
viewBox="0 0 384 512"
|
|
268
|
-
fill="currentColor"
|
|
269
|
-
>
|
|
270
|
-
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
|
|
271
|
-
<path
|
|
272
|
-
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"
|
|
273
|
-
/>
|
|
274
|
-
</svg>
|
|
275
|
-
</button>
|
|
276
|
-
</div>
|
|
277
|
-
</div>
|
|
278
|
-
</div>
|
|
279
|
-
</div>
|
|
280
|
-
<div class="container mt-md sm:mt-lg lg:mt-xl">
|
|
281
|
-
<div
|
|
282
|
-
class="flex transition-transform duration-500 px-xs gap-xs"
|
|
283
|
-
:class="generateClass('GAP', cardsGap)"
|
|
284
|
-
ref="slideContainer"
|
|
285
|
-
>
|
|
286
|
-
<slot name="carousel" :cards="content" :set-ref="setCarouselRef"></slot>
|
|
287
|
-
</div>
|
|
288
|
-
</div>
|
|
289
|
-
</section>
|
|
290
|
-
</template>
|
|
291
|
-
|
|
292
|
-
<style lang="scss" scoped></style>
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import type { BodyText, ColorPalette, HeadingSize, SpacingLevel } from '@bobbykim/manguito-theme';
|
|
2
|
-
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
3
|
-
title: string;
|
|
4
|
-
titleSize?: HeadingSize | undefined;
|
|
5
|
-
titleColor?: ColorPalette | undefined;
|
|
6
|
-
bgColor?: ColorPalette | undefined;
|
|
7
|
-
displayTagLine?: boolean | undefined;
|
|
8
|
-
tagLineUpperCase?: boolean | undefined;
|
|
9
|
-
tagLine?: string | undefined;
|
|
10
|
-
tagLineSize?: BodyText | undefined;
|
|
11
|
-
tagLineColor?: ColorPalette | undefined;
|
|
12
|
-
displayHighlight?: boolean | undefined;
|
|
13
|
-
highlightColor?: ColorPalette | undefined;
|
|
14
|
-
btnColor?: ColorPalette | undefined;
|
|
15
|
-
btnBgColor?: ColorPalette | undefined;
|
|
16
|
-
content: any[];
|
|
17
|
-
cardsGap?: SpacingLevel | undefined;
|
|
18
|
-
}>, {
|
|
19
|
-
titleSize: string;
|
|
20
|
-
titleColor: string;
|
|
21
|
-
bgColor: string;
|
|
22
|
-
displayTagLine: boolean;
|
|
23
|
-
tagLineUpperCase: boolean;
|
|
24
|
-
tagLineSize: string;
|
|
25
|
-
tagLineColor: string;
|
|
26
|
-
displayHighlight: boolean;
|
|
27
|
-
highlightColor: string;
|
|
28
|
-
btnColor: string;
|
|
29
|
-
btnBgColor: string;
|
|
30
|
-
cardsGap: string;
|
|
31
|
-
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
32
|
-
"btn-prev": (...args: any[]) => void;
|
|
33
|
-
"btn-next": (...args: any[]) => void;
|
|
34
|
-
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
35
|
-
title: string;
|
|
36
|
-
titleSize?: HeadingSize | undefined;
|
|
37
|
-
titleColor?: ColorPalette | undefined;
|
|
38
|
-
bgColor?: ColorPalette | undefined;
|
|
39
|
-
displayTagLine?: boolean | undefined;
|
|
40
|
-
tagLineUpperCase?: boolean | undefined;
|
|
41
|
-
tagLine?: string | undefined;
|
|
42
|
-
tagLineSize?: BodyText | undefined;
|
|
43
|
-
tagLineColor?: ColorPalette | undefined;
|
|
44
|
-
displayHighlight?: boolean | undefined;
|
|
45
|
-
highlightColor?: ColorPalette | undefined;
|
|
46
|
-
btnColor?: ColorPalette | undefined;
|
|
47
|
-
btnBgColor?: ColorPalette | undefined;
|
|
48
|
-
content: any[];
|
|
49
|
-
cardsGap?: SpacingLevel | undefined;
|
|
50
|
-
}>, {
|
|
51
|
-
titleSize: string;
|
|
52
|
-
titleColor: string;
|
|
53
|
-
bgColor: string;
|
|
54
|
-
displayTagLine: boolean;
|
|
55
|
-
tagLineUpperCase: boolean;
|
|
56
|
-
tagLineSize: string;
|
|
57
|
-
tagLineColor: string;
|
|
58
|
-
displayHighlight: boolean;
|
|
59
|
-
highlightColor: string;
|
|
60
|
-
btnColor: string;
|
|
61
|
-
btnBgColor: string;
|
|
62
|
-
cardsGap: string;
|
|
63
|
-
}>>> & {
|
|
64
|
-
"onBtn-prev"?: ((...args: any[]) => any) | undefined;
|
|
65
|
-
"onBtn-next"?: ((...args: any[]) => any) | undefined;
|
|
66
|
-
}, {
|
|
67
|
-
bgColor: ColorPalette;
|
|
68
|
-
titleColor: ColorPalette;
|
|
69
|
-
titleSize: HeadingSize;
|
|
70
|
-
displayHighlight: boolean;
|
|
71
|
-
highlightColor: ColorPalette;
|
|
72
|
-
displayTagLine: boolean;
|
|
73
|
-
tagLineUpperCase: boolean;
|
|
74
|
-
tagLineSize: BodyText;
|
|
75
|
-
tagLineColor: ColorPalette;
|
|
76
|
-
btnColor: ColorPalette;
|
|
77
|
-
btnBgColor: ColorPalette;
|
|
78
|
-
cardsGap: SpacingLevel;
|
|
79
|
-
}, {}>, {
|
|
80
|
-
description?(_: {}): any;
|
|
81
|
-
carousel?(_: {
|
|
82
|
-
cards: any[];
|
|
83
|
-
setRef: (el: any) => void;
|
|
84
|
-
}): any;
|
|
85
|
-
}>;
|
|
86
|
-
export default _default;
|
|
87
|
-
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
88
|
-
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
89
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
90
|
-
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
91
|
-
} : {
|
|
92
|
-
type: import('vue').PropType<T[K]>;
|
|
93
|
-
required: true;
|
|
94
|
-
};
|
|
95
|
-
};
|
|
96
|
-
type __VLS_WithDefaults<P, D> = {
|
|
97
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
98
|
-
default: D[K];
|
|
99
|
-
}> : P[K];
|
|
100
|
-
};
|
|
101
|
-
type __VLS_Prettify<T> = {
|
|
102
|
-
[K in keyof T]: T[K];
|
|
103
|
-
} & {};
|
|
104
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
105
|
-
new (): {
|
|
106
|
-
$slots: S;
|
|
107
|
-
};
|
|
108
|
-
};
|
package/tsconfig.json
DELETED
package/tsconfig.ts.json
DELETED