@bobbykim/mcl-carousel 0.8.3 → 0.9.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 +10 -10
- package/dist/mcl-carousel.umd.cjs +1 -1
- package/package.json +5 -5
package/dist/mcl-carousel.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as G, ref as o, onMounted as S, createElementBlock as p, openBlock as f, normalizeClass as r, unref as g, createElementVNode as s, createCommentVNode as
|
|
1
|
+
import { defineComponent as G, ref as o, onMounted as S, createElementBlock as p, openBlock as f, normalizeClass as r, unref as g, createElementVNode as s, createCommentVNode as y, renderSlot as x } from "vue";
|
|
2
2
|
import n from "@bobbykim/manguito-theme";
|
|
3
3
|
import { useEventListener as L, useIntersectionObserver as z } from "@vueuse/core";
|
|
4
|
-
const H = { class: "
|
|
4
|
+
const H = { class: "px-xs sm:px-md container text-center sm:text-left" }, j = { class: "relative" }, X = { class: "relative" }, $ = ["innerHTML"], I = ["innerHTML"], N = { class: "relative flex flex-wrap items-center justify-center space-x-4 space-y-4 sm:flex-nowrap sm:justify-start" }, D = { class: "max-w-[36rem]" }, U = { class: "flex space-x-4" }, V = ["disabled"], _ = ["disabled"], P = { class: "mt-md sm:mt-lg lg:mt-xl container" }, F = /* @__PURE__ */ G({
|
|
5
5
|
__name: "MclCarouselA",
|
|
6
6
|
props: {
|
|
7
7
|
title: {},
|
|
@@ -85,8 +85,8 @@ const H = { class: "container px-xs sm:px-md text-center sm:text-left" }, j = {
|
|
|
85
85
|
s("div", j, [
|
|
86
86
|
e.displayHighlight ? (f(), p("div", {
|
|
87
87
|
key: 0,
|
|
88
|
-
class: r(["
|
|
89
|
-
}, null, 2)) :
|
|
88
|
+
class: r(["w-md absolute -left-4 hidden h-full bg-opacity-25 sm:block", g(n)("BGCOLOR", e.highlightColor)])
|
|
89
|
+
}, null, 2)) : y("", !0),
|
|
90
90
|
s("div", X, [
|
|
91
91
|
e.displayTagLine ? (f(), p("span", {
|
|
92
92
|
key: 0,
|
|
@@ -95,7 +95,7 @@ const H = { class: "container px-xs sm:px-md text-center sm:text-left" }, j = {
|
|
|
95
95
|
E(e.tagLineSize, e.tagLineColor, e.tagLineUpperCase)
|
|
96
96
|
]),
|
|
97
97
|
innerHTML: e.tagLine
|
|
98
|
-
}, null, 10, $)) :
|
|
98
|
+
}, null, 10, $)) : y("", !0),
|
|
99
99
|
s("h2", {
|
|
100
100
|
class: r(["tracking-wide", M(e.titleSize, e.titleColor)]),
|
|
101
101
|
innerHTML: e.title
|
|
@@ -103,11 +103,11 @@ const H = { class: "container px-xs sm:px-md text-center sm:text-left" }, j = {
|
|
|
103
103
|
]),
|
|
104
104
|
s("div", N, [
|
|
105
105
|
s("div", D, [
|
|
106
|
-
|
|
106
|
+
x(e.$slots, "description")
|
|
107
107
|
]),
|
|
108
108
|
s("div", U, [
|
|
109
109
|
s("button", {
|
|
110
|
-
class: r(["grid place-items-center hover:bg-opacity-80
|
|
110
|
+
class: r(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50", C(e.btnColor, e.btnBgColor)]),
|
|
111
111
|
disabled: d.value === 0,
|
|
112
112
|
onClick: t[0] || (t[0] = (l) => h(l, "prev")),
|
|
113
113
|
"aria-label": "previous"
|
|
@@ -122,7 +122,7 @@ const H = { class: "container px-xs sm:px-md text-center sm:text-left" }, j = {
|
|
|
122
122
|
], -1)
|
|
123
123
|
]), 10, V),
|
|
124
124
|
s("button", {
|
|
125
|
-
class: r(["grid place-items-center hover:bg-opacity-80
|
|
125
|
+
class: r(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50", C(e.btnColor, e.btnBgColor)]),
|
|
126
126
|
disabled: c.value,
|
|
127
127
|
onClick: t[1] || (t[1] = (l) => h(l, "next")),
|
|
128
128
|
"aria-label": "next"
|
|
@@ -142,11 +142,11 @@ const H = { class: "container px-xs sm:px-md text-center sm:text-left" }, j = {
|
|
|
142
142
|
]),
|
|
143
143
|
s("div", P, [
|
|
144
144
|
s("div", {
|
|
145
|
-
class: r(["flex transition-transform duration-500
|
|
145
|
+
class: r(["px-xs gap-xs flex transition-transform duration-500", g(n)("GAP", e.cardsGap)]),
|
|
146
146
|
ref_key: "slideContainer",
|
|
147
147
|
ref: a
|
|
148
148
|
}, [
|
|
149
|
-
|
|
149
|
+
x(e.$slots, "carousel", {
|
|
150
150
|
cards: e.content,
|
|
151
151
|
setRef: k
|
|
152
152
|
})
|
|
@@ -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,s,d){"use strict";const C={class:"
|
|
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,s,d){"use strict";const C={class:"px-xs sm:px-md container text-center sm:text-left"},b={class:"relative"},y={class:"relative"},E=["innerHTML"],x=["innerHTML"],L={class:"relative flex flex-wrap items-center justify-center space-x-4 space-y-4 sm:flex-nowrap sm:justify-start"},w={class:"max-w-[36rem]"},B={class:"flex space-x-4"},T=["disabled"],k=["disabled"],N={class:"mt-md sm:mt-lg lg:mt-xl container"},V=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(O,{emit:M}){const z=O,r=e.ref(null),i=e.ref([]),u=e.ref(),m=M,a=e.ref(0),c=e.ref(!1);let f=!1;const v=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}},S=t=>{i.value.push(t)},p=(t,n)=>{var l;f||(f=!0,n==="prev"&&(a.value--,m("btn-prev",t)),n==="next"&&(a.value++,m("btn-next",t)),(l=r.value)==null||l.dispatchEvent(new Event("sliderMove")))},R=(t,n)=>[s("H2",t),s("TEXTCOLOR",n)].join(" "),A=(t,n,l)=>{const h=[s("BODYTEXT",t),s("TEXTCOLOR",n)];return l&&h.push("uppercase"),h.join(" ")},g=(t,n)=>[s("TEXTCOLOR",t),s("BGCOLOR",n),s("RINGCOLOR",n)].join(" "),G=()=>{r.value.style.transform=`translateX(-${a.value*(i.value[0].$el.clientWidth+v(z.cardsGap)+2)}px)`,c.value=!1},j=()=>{f=!1};return d.useEventListener(r,"sliderMove",G),d.useEventListener(r,"transitionend",j),d.useIntersectionObserver(u,t=>{t[0].isIntersecting&&(c.value=!0)},{threshold:.75}),e.onMounted(()=>{u.value=i.value[i.value.length-1].$el}),(t,n)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["py-lg lg:py-xl overflow-hidden",e.unref(s)("BGCOLOR",t.bgColor)])},[e.createElementVNode("div",C,[e.createElementVNode("div",b,[t.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["w-md absolute -left-4 hidden h-full bg-opacity-25 sm:block",e.unref(s)("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",A(t.tagLineSize,t.tagLineColor,t.tagLineUpperCase)]),innerHTML:t.tagLine},null,10,E)):e.createCommentVNode("",!0),e.createElementVNode("h2",{class:e.normalizeClass(["tracking-wide",R(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,x)]),e.createElementVNode("div",L,[e.createElementVNode("div",w,[e.renderSlot(t.$slots,"description")]),e.createElementVNode("div",B,[e.createElementVNode("button",{class:e.normalizeClass(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50",g(t.btnColor,t.btnBgColor)]),disabled:a.value===0,onClick:n[0]||(n[0]=l=>p(l,"prev")),"aria-label":"previous"},n[2]||(n[2]=[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)]),10,T),e.createElementVNode("button",{class:e.normalizeClass(["p-xs grid place-items-center rounded-full ring-offset-2 ring-offset-inherit transition-all duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-4 disabled:opacity-50",g(t.btnColor,t.btnBgColor)]),disabled:c.value,onClick:n[1]||(n[1]=l=>p(l,"next")),"aria-label":"next"},n[3]||(n[3]=[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)]),10,k)])])])]),e.createElementVNode("div",N,[e.createElementVNode("div",{class:e.normalizeClass(["px-xs gap-xs flex transition-transform duration-500",e.unref(s)("GAP",t.cardsGap)]),ref_key:"slideContainer",ref:r},[e.renderSlot(t.$slots,"carousel",{cards:t.content,setRef:S})],2)])],2))}});o.MclCarouselA=V,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.9.0",
|
|
4
4
|
"description": "carousel component based on @bobbykim/manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
"types": "./dist/index.d.ts",
|
|
12
12
|
"exports": {
|
|
13
13
|
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
14
15
|
"import": "./dist/mcl-carousel.js",
|
|
15
|
-
"require": "./dist/mcl-carousel.umd.cjs"
|
|
16
|
-
"types": "./dist/index.d.ts"
|
|
16
|
+
"require": "./dist/mcl-carousel.umd.cjs"
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
"scripts": {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"license": "MIT",
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@bobbykim/manguito-theme": "0.
|
|
36
|
+
"@bobbykim/manguito-theme": "0.26.0",
|
|
37
37
|
"@vueuse/core": "^12.0.0",
|
|
38
38
|
"vue": "^3.5.13"
|
|
39
39
|
},
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"vite-plugin-dts": "^4.3.0",
|
|
46
46
|
"vue-tsc": "^2.1.10"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "6cc7d9ea39279a8c924a0d4ef29a021f9e6463a6"
|
|
49
49
|
}
|