@bobbykim/mcl-collapse 0.9.0 → 0.9.2
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/README.md +3 -3
- package/dist/mcl-collapse.js +11 -6
- package/dist/mcl-collapse.umd.cjs +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
## Demo
|
|
4
4
|
|
|
5
|
-
[MCL Storybook Page](https://manguito-component-library.
|
|
5
|
+
[MCL Storybook Page](https://manguito-component-library.bobbykim.dev/)
|
|
6
6
|
|
|
7
|
-
- [MCL Collapse A](https://manguito-component-library.
|
|
8
|
-
- [MCL Collapse B](https://manguito-component-library.
|
|
7
|
+
- [MCL Collapse A](https://manguito-component-library.bobbykim.dev/?path=/docs/components-collapse-mclcollapsea--mclcollapsea)
|
|
8
|
+
- [MCL Collapse B](https://manguito-component-library.bobbykim.dev/?path=/docs/components-collapse-mclcollapseb--mclcollapseb)
|
|
9
9
|
|
|
10
10
|
## Install
|
|
11
11
|
|
package/dist/mcl-collapse.js
CHANGED
|
@@ -23,8 +23,13 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
23
23
|
}, x = () => {
|
|
24
24
|
c.value = !1, g("collapse-close", !1, d.title);
|
|
25
25
|
}, p = (t, l, f) => {
|
|
26
|
-
const n = [
|
|
27
|
-
|
|
26
|
+
const n = [
|
|
27
|
+
"border",
|
|
28
|
+
o.borderColorVariant({ color: t })
|
|
29
|
+
];
|
|
30
|
+
return l && [
|
|
31
|
+
o.borderLeftColorVariant({ color: f })
|
|
32
|
+
].forEach((S) => {
|
|
28
33
|
n.push(S), n.push("border-l-8");
|
|
29
34
|
}), n.join(" ");
|
|
30
35
|
}, u = (t, l) => [
|
|
@@ -50,7 +55,7 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
50
55
|
"aria-expanded": c.value,
|
|
51
56
|
"aria-controls": e.collapseId,
|
|
52
57
|
onClick: l[0] || (l[0] = (f) => i.value?.toggle()),
|
|
53
|
-
class: "flex flex-1 cursor-pointer items-center bg-transparent text-left
|
|
58
|
+
class: "flex flex-1 cursor-pointer items-center bg-transparent py-xs text-left"
|
|
54
59
|
}, [
|
|
55
60
|
r("h3", {
|
|
56
61
|
class: s(u(e.titleSize, e.titleColor))
|
|
@@ -88,7 +93,7 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
88
93
|
], 2),
|
|
89
94
|
r("div", {
|
|
90
95
|
"aria-hidden": "true",
|
|
91
|
-
class: s(["
|
|
96
|
+
class: s(["flex cursor-pointer items-center justify-center border-t px-sm py-1.5 transition-all duration-500", [
|
|
92
97
|
a(o).bgColorVariant({ color: e.bgColor }),
|
|
93
98
|
a(o).borderTopColorVariant({ color: e.borderColor })
|
|
94
99
|
]]),
|
|
@@ -110,7 +115,7 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
110
115
|
}
|
|
111
116
|
}), R = ["id", "aria-expanded", "aria-controls"], E = {
|
|
112
117
|
"aria-hidden": "true",
|
|
113
|
-
class: "ml-xs md:ml-sm lg:ml-md
|
|
118
|
+
class: "ml-xs flex items-center justify-center md:ml-sm lg:ml-md"
|
|
114
119
|
}, L = { class: "overflow-hidden" }, D = /* @__PURE__ */ B({
|
|
115
120
|
__name: "MclCollapseB",
|
|
116
121
|
props: {
|
|
@@ -146,7 +151,7 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
146
151
|
o.textColorVariant({ color: t })
|
|
147
152
|
].join(" ");
|
|
148
153
|
return (u, t) => (C(), b("div", {
|
|
149
|
-
class: s(["
|
|
154
|
+
class: s(["w-full overflow-hidden p-2xs", x(e.borderColor, e.bgColor, e.rounded, e.showShadow)])
|
|
150
155
|
}, [
|
|
151
156
|
r("button", {
|
|
152
157
|
type: "button",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.MclCollapse={},a.Vue,a.ManguitoTheme))})(this,(function(a,e,o){"use strict";const p={class:"flex items-center justify-between"},h=["id","aria-expanded","aria-controls"],x=e.defineComponent({__name:"MclCollapseA",props:{collapseId:{},borderColor:{default:"light-4"},rounded:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"secondary"},title:{},titleSize:{default:"sm"},titleColor:{default:"dark-3"},visible:{type:Boolean,default:!1},iconColor:{default:"dark-3"},bgColor:{default:"white"},contentBgColor:{default:"light-2"}},emits:["collapse-open","collapse-close"],setup(l,{emit:b}){const i=l,g=e.useSlots(),C=b,s=e.ref(),d=e.ref(i.visible),u=()=>{d.value=!0,C("collapse-open",!0,i.title)},m=()=>{d.value=!1,C("collapse-close",!1,i.title)},y=(r,t,f)=>{const n=["border",o.generateClass.borderColorVariant({color:r})];return t&&[o.generateClass.borderLeftColorVariant({color:f})].forEach(E=>{n.push(E),n.push("border-l-8")}),n.join(" ")},c=(r,t)=>[o.generateClass.h3Variant({size:r}),o.generateClass.textColorVariant({color:t})].join(" ");return(r,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full overflow-hidden",[l.rounded?"rounded-lg":"rounded-sm",y(l.borderColor,l.showHighlight,l.highlightColor)]])},[e.createElementVNode("div",{class:e.normalizeClass(["px-sm transition-[border] duration-500",[d.value?`border-b ${e.unref(o.generateClass).borderBottomColorVariant({color:l.borderColor})} ease-in`:"ease-out",e.unref(o.generateClass).bgColorVariant({color:l.bgColor})]])},[e.createElementVNode("div",p,[e.createElementVNode("button",{type:"button",id:`${l.collapseId}-trigger`,"aria-expanded":d.value,"aria-controls":l.collapseId,onClick:t[0]||(t[0]=f=>s.value?.toggle()),class:"flex flex-1 cursor-pointer items-center bg-transparent text-left
|
|
1
|
+
(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.MclCollapse={},a.Vue,a.ManguitoTheme))})(this,(function(a,e,o){"use strict";const p={class:"flex items-center justify-between"},h=["id","aria-expanded","aria-controls"],x=e.defineComponent({__name:"MclCollapseA",props:{collapseId:{},borderColor:{default:"light-4"},rounded:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"secondary"},title:{},titleSize:{default:"sm"},titleColor:{default:"dark-3"},visible:{type:Boolean,default:!1},iconColor:{default:"dark-3"},bgColor:{default:"white"},contentBgColor:{default:"light-2"}},emits:["collapse-open","collapse-close"],setup(l,{emit:b}){const i=l,g=e.useSlots(),C=b,s=e.ref(),d=e.ref(i.visible),u=()=>{d.value=!0,C("collapse-open",!0,i.title)},m=()=>{d.value=!1,C("collapse-close",!1,i.title)},y=(r,t,f)=>{const n=["border",o.generateClass.borderColorVariant({color:r})];return t&&[o.generateClass.borderLeftColorVariant({color:f})].forEach(E=>{n.push(E),n.push("border-l-8")}),n.join(" ")},c=(r,t)=>[o.generateClass.h3Variant({size:r}),o.generateClass.textColorVariant({color:t})].join(" ");return(r,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full overflow-hidden",[l.rounded?"rounded-lg":"rounded-sm",y(l.borderColor,l.showHighlight,l.highlightColor)]])},[e.createElementVNode("div",{class:e.normalizeClass(["px-sm transition-[border] duration-500",[d.value?`border-b ${e.unref(o.generateClass).borderBottomColorVariant({color:l.borderColor})} ease-in`:"ease-out",e.unref(o.generateClass).bgColorVariant({color:l.bgColor})]])},[e.createElementVNode("div",p,[e.createElementVNode("button",{type:"button",id:`${l.collapseId}-trigger`,"aria-expanded":d.value,"aria-controls":l.collapseId,onClick:t[0]||(t[0]=f=>s.value?.toggle()),class:"flex flex-1 cursor-pointer items-center bg-transparent py-xs text-left"},[e.createElementVNode("h3",{class:e.normalizeClass(c(l.titleSize,l.titleColor))},e.toDisplayString(l.title),3)],8,h),g.tab?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:t[1]||(t[1]=e.withModifiers(()=>{},["stop"])),class:"cursor-default"},[e.renderSlot(r.$slots,"tab")])):e.createCommentVNode("",!0)])],2),e.createElementVNode("div",{class:e.normalizeClass(["overflow-hidden",e.unref(o.generateClass).bgColorVariant({color:l.contentBgColor})])},[e.createVNode(e.unref(o.Collapse),{ref_key:"collapseRef",ref:s,id:l.collapseId,visible:l.visible,"custom-class":"py-sm px-xs",role:"region","aria-labelledby":`${l.collapseId}-trigger`,onOpen:u,onClose:m},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"content")]),_:3},8,["id","visible","aria-labelledby"])],2),e.createElementVNode("div",{"aria-hidden":"true",class:e.normalizeClass(["flex cursor-pointer items-center justify-center border-t px-sm py-1.5 transition-all duration-500",[e.unref(o.generateClass).bgColorVariant({color:l.bgColor}),e.unref(o.generateClass).borderTopColorVariant({color:l.borderColor})]]),onClick:t[2]||(t[2]=f=>s.value?.toggle())},[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-xs",[d.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in",e.unref(o.generateClass).svgFillColorVariant({color:l.iconColor})]])},[...t[3]||(t[3]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))],2)],2))}}),V=["id","aria-expanded","aria-controls"],w={"aria-hidden":"true",class:"ml-xs flex items-center justify-center md:ml-sm lg:ml-md"},B={class:"overflow-hidden"},k=e.defineComponent({__name:"MclCollapseB",props:{collapseId:{},title:{},titleColor:{default:"light-1"},titleSize:{default:"md"},borderColor:{default:"light-3"},bgColor:{default:"light-1"},triggerBgColor:{default:"primary"},iconColor:{default:"light-1"},rounded:{type:Boolean,default:!0},showShadow:{type:Boolean,default:!0},visible:{type:Boolean,default:!1}},emits:["collapse-open","collapse-close"],setup(l,{emit:b}){const i=l;e.useSlots();const g=b,C=e.ref(),s=e.ref(i.visible),d=()=>{s.value=!0,g("collapse-open",!0,i.title)},u=()=>{s.value=!1,g("collapse-close",!1,i.title)},m=(c,r,t,f)=>{let n=["border",o.generateClass.borderColorVariant({color:c}),o.generateClass.bgColorVariant({color:r})];return f&&n.push("shadow-md"),t?n.push("rounded-2xl"):n.push("rounded-sm"),n.join(" ")},y=(c,r)=>[o.generateClass.h3Variant({size:c}),o.generateClass.textColorVariant({color:r})].join(" ");return(c,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full overflow-hidden p-2xs",m(l.borderColor,l.bgColor,l.rounded,l.showShadow)])},[e.createElementVNode("button",{type:"button",id:`${l.collapseId}-trigger`,"aria-expanded":s.value,"aria-controls":l.collapseId,onClick:r[0]||(r[0]=t=>C.value?.toggle()),class:e.normalizeClass(["flex w-full cursor-pointer items-center justify-between px-4 py-2 transition duration-200 ease-in hover:bg-opacity-70",[l.rounded?"rounded-lg":"rounded-sm",e.unref(o.generateClass).bgColorVariant({color:l.triggerBgColor})]])},[e.createElementVNode("span",{class:e.normalizeClass(y(l.titleSize,l.titleColor))},e.toDisplayString(l.title),3),e.createElementVNode("div",w,[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-xs transition-transform duration-300 ease-in",[s.value?"rotate-180":"rotate-0",e.unref(o.generateClass).svgFillColorVariant({color:l.iconColor})]])},[...r[1]||(r[1]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))])],10,V),e.createElementVNode("div",B,[e.createVNode(e.unref(o.Collapse),{ref_key:"collapseRef",ref:C,id:l.collapseId,visible:l.visible,"custom-class":"px-xs pt-xs pb-2xs",role:"region","aria-labelledby":`${l.collapseId}-trigger`,onOpen:d,onClose:u},{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3},8,["id","visible","aria-labelledby"])])],2))}});a.MclCollapseA=x,a.MclCollapseB=k,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-collapse",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.2",
|
|
4
4
|
"description": "collapse component built on top of @bobbykim/manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"name": "Bobby Kim",
|
|
21
21
|
"url": "https://www.devbobbykim.com/"
|
|
22
22
|
},
|
|
23
|
-
"homepage": "https://manguito-component-library.
|
|
23
|
+
"homepage": "https://manguito-component-library.bobbykim.dev/",
|
|
24
24
|
"repository": {
|
|
25
25
|
"type": "git",
|
|
26
26
|
"url": "https://github.com/bobbykim89/manguito-component-library.git"
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"license": "MIT",
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"vue": "^3.5.13",
|
|
34
|
-
"@bobbykim/manguito-theme": "1.0.
|
|
34
|
+
"@bobbykim/manguito-theme": "1.0.2"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@vitejs/plugin-vue": "^5.2.1",
|