@bobbykim/mcl-collapse 0.9.6 → 0.9.7
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-collapse.js +11 -7
- package/dist/mcl-collapse.umd.cjs +1 -1
- package/package.json +2 -2
package/dist/mcl-collapse.js
CHANGED
|
@@ -17,8 +17,8 @@ const M = { class: "flex items-center justify-between" }, R = ["id", "aria-expan
|
|
|
17
17
|
contentBgColor: { default: "light-2" }
|
|
18
18
|
},
|
|
19
19
|
emits: ["collapse-open", "collapse-close"],
|
|
20
|
-
setup(e, { emit:
|
|
21
|
-
const n = e,
|
|
20
|
+
setup(e, { emit: m }) {
|
|
21
|
+
const n = e, h = j(), u = m, d = B(), g = V(() => d.value?.isOpen ?? n.visible), v = () => {
|
|
22
22
|
u("collapse-open", !0, n.title);
|
|
23
23
|
}, y = () => {
|
|
24
24
|
u("collapse-close", !1, n.title);
|
|
@@ -61,7 +61,7 @@ const M = { class: "flex items-center justify-between" }, R = ["id", "aria-expan
|
|
|
61
61
|
class: s(c(e.titleSize, e.titleColor))
|
|
62
62
|
}, $(e.title), 3)
|
|
63
63
|
], 8, R),
|
|
64
|
-
|
|
64
|
+
h.tab ? (C(), b("div", {
|
|
65
65
|
key: 0,
|
|
66
66
|
onClick: l[1] || (l[1] = O(() => {
|
|
67
67
|
}, ["stop"])),
|
|
@@ -100,6 +100,8 @@ const M = { class: "flex items-center justify-between" }, R = ["id", "aria-expan
|
|
|
100
100
|
onClick: l[2] || (l[2] = (f) => d.value?.toggle())
|
|
101
101
|
}, [
|
|
102
102
|
(C(), b("svg", {
|
|
103
|
+
"aria-hidden": "true",
|
|
104
|
+
focusable: "false",
|
|
103
105
|
xmlns: "http://www.w3.org/2000/svg",
|
|
104
106
|
viewBox: "0 0 448 512",
|
|
105
107
|
class: s(["h-xs", [
|
|
@@ -132,11 +134,11 @@ const M = { class: "flex items-center justify-between" }, R = ["id", "aria-expan
|
|
|
132
134
|
visible: { type: Boolean, default: !1 }
|
|
133
135
|
},
|
|
134
136
|
emits: ["collapse-open", "collapse-close"],
|
|
135
|
-
setup(e, { emit:
|
|
136
|
-
const n = e,
|
|
137
|
-
|
|
137
|
+
setup(e, { emit: m }) {
|
|
138
|
+
const n = e, h = m, u = B(), d = V(() => u.value?.isOpen ?? n.visible), g = () => {
|
|
139
|
+
h("collapse-open", !0, n.title);
|
|
138
140
|
}, v = () => {
|
|
139
|
-
|
|
141
|
+
h("collapse-close", !1, n.title);
|
|
140
142
|
}, y = (c, t, l, f) => {
|
|
141
143
|
const i = [
|
|
142
144
|
"border",
|
|
@@ -167,6 +169,8 @@ const M = { class: "flex items-center justify-between" }, R = ["id", "aria-expan
|
|
|
167
169
|
}, $(e.title), 3),
|
|
168
170
|
r("div", L, [
|
|
169
171
|
(C(), b("svg", {
|
|
172
|
+
"aria-hidden": "true",
|
|
173
|
+
focusable: "false",
|
|
170
174
|
xmlns: "http://www.w3.org/2000/svg",
|
|
171
175
|
viewBox: "0 0 448 512",
|
|
172
176
|
class: s(["h-xs transition-transform duration-300 ease-in", [
|
|
@@ -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 y={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:
|
|
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 y={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:g}){const n=l,b=e.useSlots(),c=g,i=e.ref(),C=e.computed(()=>i.value?.isOpen??n.visible),u=()=>{c("collapse-open",!0,n.title)},m=()=>{c("collapse-close",!1,n.title)},p=(r,t,f)=>{const s=["border",o.generateClass.borderColorVariant({color:r})];return t&&[o.generateClass.borderLeftColorVariant({color:f})].forEach(E=>{s.push(E),s.push("border-l-8")}),s.join(" ")},d=(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",p(l.borderColor,l.showHighlight,l.highlightColor)]])},[e.createElementVNode("div",{class:e.normalizeClass(["px-sm transition-[border] duration-500",[C.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",y,[e.createElementVNode("button",{type:"button",id:`${l.collapseId}-trigger`,"aria-expanded":C.value,"aria-controls":l.collapseId,onClick:t[0]||(t[0]=f=>i.value?.toggle()),class:"flex flex-1 cursor-pointer items-center bg-transparent py-xs text-left"},[e.createElementVNode("h3",{class:e.normalizeClass(d(l.titleSize,l.titleColor))},e.toDisplayString(l.title),3)],8,h),b.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:i,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=>i.value?.toggle())},[(e.openBlock(),e.createElementBlock("svg",{"aria-hidden":"true",focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-xs",[C.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:g}){const n=l,b=g,c=e.ref(),i=e.computed(()=>c.value?.isOpen??n.visible),C=()=>{b("collapse-open",!0,n.title)},u=()=>{b("collapse-close",!1,n.title)},m=(d,r,t,f)=>{const s=["border",o.generateClass.borderColorVariant({color:d}),o.generateClass.bgColorVariant({color:r})];return f&&s.push("shadow-md"),t?s.push("rounded-2xl"):s.push("rounded-sm"),s.join(" ")},p=(d,r)=>[o.generateClass.h3Variant({size:d}),o.generateClass.textColorVariant({color:r})].join(" ");return(d,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":i.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(p(l.titleSize,l.titleColor))},e.toDisplayString(l.title),3),e.createElementVNode("div",w,[(e.openBlock(),e.createElementBlock("svg",{"aria-hidden":"true",focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-xs transition-transform duration-300 ease-in",[i.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:C,onClose:u},{default:e.withCtx(()=>[e.renderSlot(d.$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.7",
|
|
4
4
|
"description": "collapse component built on top of @bobbykim/manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"license": "MIT",
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"vue": "^3.5.13",
|
|
34
|
-
"@bobbykim/manguito-theme": "1.
|
|
34
|
+
"@bobbykim/manguito-theme": "1.5.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@vitejs/plugin-vue": "^5.2.1",
|