@bobbykim/mcl-collapse 0.9.4 → 0.9.5
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 +6 -6
- package/dist/index.d.ts +13 -4
- package/dist/mcl-collapse.js +54 -56
- package/dist/mcl-collapse.umd.cjs +1 -1
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -37,7 +37,7 @@ import { MclCollapseA, MclCollapseB } from '@bobbykim/mcl-collapse'
|
|
|
37
37
|
|
|
38
38
|
### Accordion group
|
|
39
39
|
|
|
40
|
-
Wrap components in `AccordionGroup` to ensure only one item is open at a time. `AccordionGroup` is exported from `@bobbykim/manguito-theme`.
|
|
40
|
+
Wrap components in `AccordionGroup` to ensure only one item is open at a time. `AccordionGroup` is exported from `@bobbykim/manguito-theme`. To start with an item open, set `visible` on it; if several are `visible`, the first one opens.
|
|
41
41
|
|
|
42
42
|
```vue
|
|
43
43
|
<script setup lang="ts">
|
|
@@ -47,7 +47,7 @@ import { MclCollapseA } from '@bobbykim/mcl-collapse'
|
|
|
47
47
|
|
|
48
48
|
<template>
|
|
49
49
|
<AccordionGroup>
|
|
50
|
-
<MclCollapseA collapse-id="item-1" title="Item 1">
|
|
50
|
+
<MclCollapseA collapse-id="item-1" title="Item 1" visible>
|
|
51
51
|
<template #content>Content 1</template>
|
|
52
52
|
</MclCollapseA>
|
|
53
53
|
<MclCollapseA collapse-id="item-2" title="Item 2">
|
|
@@ -62,12 +62,12 @@ import { MclCollapseA } from '@bobbykim/mcl-collapse'
|
|
|
62
62
|
|
|
63
63
|
## Migration from v-collapse
|
|
64
64
|
|
|
65
|
-
|
|
65
|
+
`v-collapse` is **sunsetted**: it no longer works with any collapse component, including `MclCollapseA`, `MclCollapseB`, and the base `Collapse` from `@bobbykim/manguito-theme`. State is managed internally. The directive is still exported so existing imports don't break, logs a warning once per page when mounted, and will be removed in the next major release. The `accordion` attribute is also ignored.
|
|
66
66
|
|
|
67
|
-
| Old
|
|
68
|
-
|
|
67
|
+
| Old | New |
|
|
68
|
+
| ------------------------------ | ------------------------------------- |
|
|
69
69
|
| `v-collapse:itemId` on trigger | handled internally — no change needed |
|
|
70
|
-
| `:accordion="groupName"` prop
|
|
70
|
+
| `:accordion="groupName"` prop | wrap components in `<AccordionGroup>` |
|
|
71
71
|
|
|
72
72
|
## Dependencies
|
|
73
73
|
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import { ComponentOptionsBase } from 'vue';
|
|
|
7
7
|
import { ComponentOptionsMixin } from 'vue';
|
|
8
8
|
import { ComponentProvideOptions } from 'vue';
|
|
9
9
|
import { ComponentPublicInstance } from 'vue';
|
|
10
|
+
import { ComputedRef } from 'vue';
|
|
10
11
|
import { DebuggerEvent } from 'vue';
|
|
11
12
|
import { DefineComponent } from 'vue';
|
|
12
13
|
import { GlobalComponents } from 'vue';
|
|
@@ -71,6 +72,7 @@ visible?: boolean;
|
|
|
71
72
|
onClose?: ((visible: boolean) => any) | undefined;
|
|
72
73
|
onOpen?: ((visible: boolean) => any) | undefined;
|
|
73
74
|
}>, {
|
|
75
|
+
isOpen: ComputedRef<boolean>;
|
|
74
76
|
toggle: () => void;
|
|
75
77
|
open: () => void;
|
|
76
78
|
close: () => void;
|
|
@@ -110,7 +112,8 @@ visible?: boolean;
|
|
|
110
112
|
}> & Readonly<{
|
|
111
113
|
onClose?: ((visible: boolean) => any) | undefined;
|
|
112
114
|
onOpen?: ((visible: boolean) => any) | undefined;
|
|
113
|
-
}>, "visible" | "customClass" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
|
|
115
|
+
}>, "visible" | "customClass" | "isOpen" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
|
|
116
|
+
isOpen: ComputedRef<boolean>;
|
|
114
117
|
toggle: () => void;
|
|
115
118
|
open: () => void;
|
|
116
119
|
close: () => void;
|
|
@@ -172,6 +175,7 @@ visible?: boolean;
|
|
|
172
175
|
onClose?: ((visible: boolean) => any) | undefined;
|
|
173
176
|
onOpen?: ((visible: boolean) => any) | undefined;
|
|
174
177
|
}>, {
|
|
178
|
+
isOpen: ComputedRef<boolean>;
|
|
175
179
|
toggle: () => void;
|
|
176
180
|
open: () => void;
|
|
177
181
|
close: () => void;
|
|
@@ -211,7 +215,8 @@ visible?: boolean;
|
|
|
211
215
|
}> & Readonly<{
|
|
212
216
|
onClose?: ((visible: boolean) => any) | undefined;
|
|
213
217
|
onOpen?: ((visible: boolean) => any) | undefined;
|
|
214
|
-
}>, "visible" | "customClass" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
|
|
218
|
+
}>, "visible" | "customClass" | "isOpen" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
|
|
219
|
+
isOpen: ComputedRef<boolean>;
|
|
215
220
|
toggle: () => void;
|
|
216
221
|
open: () => void;
|
|
217
222
|
close: () => void;
|
|
@@ -295,6 +300,7 @@ declare function __VLS_template(): {
|
|
|
295
300
|
onClose?: ((visible: boolean) => any) | undefined;
|
|
296
301
|
onOpen?: ((visible: boolean) => any) | undefined;
|
|
297
302
|
}>, {
|
|
303
|
+
isOpen: ComputedRef<boolean>;
|
|
298
304
|
toggle: () => void;
|
|
299
305
|
open: () => void;
|
|
300
306
|
close: () => void;
|
|
@@ -334,7 +340,8 @@ declare function __VLS_template(): {
|
|
|
334
340
|
}> & Readonly<{
|
|
335
341
|
onClose?: ((visible: boolean) => any) | undefined;
|
|
336
342
|
onOpen?: ((visible: boolean) => any) | undefined;
|
|
337
|
-
}>, "visible" | "customClass" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
|
|
343
|
+
}>, "visible" | "customClass" | "isOpen" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
|
|
344
|
+
isOpen: ComputedRef<boolean>;
|
|
338
345
|
toggle: () => void;
|
|
339
346
|
open: () => void;
|
|
340
347
|
close: () => void;
|
|
@@ -389,6 +396,7 @@ declare function __VLS_template_2(): {
|
|
|
389
396
|
onClose?: ((visible: boolean) => any) | undefined;
|
|
390
397
|
onOpen?: ((visible: boolean) => any) | undefined;
|
|
391
398
|
}>, {
|
|
399
|
+
isOpen: ComputedRef<boolean>;
|
|
392
400
|
toggle: () => void;
|
|
393
401
|
open: () => void;
|
|
394
402
|
close: () => void;
|
|
@@ -428,7 +436,8 @@ declare function __VLS_template_2(): {
|
|
|
428
436
|
}> & Readonly<{
|
|
429
437
|
onClose?: ((visible: boolean) => any) | undefined;
|
|
430
438
|
onOpen?: ((visible: boolean) => any) | undefined;
|
|
431
|
-
}>, "visible" | "customClass" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
|
|
439
|
+
}>, "visible" | "customClass" | "isOpen" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
|
|
440
|
+
isOpen: ComputedRef<boolean>;
|
|
432
441
|
toggle: () => void;
|
|
433
442
|
open: () => void;
|
|
434
443
|
close: () => void;
|
package/dist/mcl-collapse.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as w, useSlots as j, ref as B, computed as V, openBlock as C, createElementBlock as b, normalizeClass as s, createElementVNode as r, unref as a, toDisplayString as $, withModifiers as O, renderSlot as p, createCommentVNode as z, createVNode as k, withCtx as I } from "vue";
|
|
2
2
|
import { generateClass as o, Collapse as A } from "@bobbykim/manguito-theme";
|
|
3
|
-
const M = { class: "flex items-center justify-between" },
|
|
3
|
+
const M = { class: "flex items-center justify-between" }, R = ["id", "aria-expanded", "aria-controls"], D = /* @__PURE__ */ w({
|
|
4
4
|
__name: "MclCollapseA",
|
|
5
5
|
props: {
|
|
6
6
|
collapseId: {},
|
|
@@ -17,34 +17,34 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
17
17
|
contentBgColor: { default: "light-2" }
|
|
18
18
|
},
|
|
19
19
|
emits: ["collapse-open", "collapse-close"],
|
|
20
|
-
setup(e, { emit:
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
|
|
25
|
-
},
|
|
26
|
-
const
|
|
20
|
+
setup(e, { emit: h }) {
|
|
21
|
+
const n = e, m = j(), u = h, d = B(), g = V(() => d.value?.isOpen ?? n.visible), v = () => {
|
|
22
|
+
u("collapse-open", !0, n.title);
|
|
23
|
+
}, y = () => {
|
|
24
|
+
u("collapse-close", !1, n.title);
|
|
25
|
+
}, x = (t, l, f) => {
|
|
26
|
+
const i = [
|
|
27
27
|
"border",
|
|
28
28
|
o.borderColorVariant({ color: t })
|
|
29
29
|
];
|
|
30
30
|
return l && [
|
|
31
31
|
o.borderLeftColorVariant({ color: f })
|
|
32
32
|
].forEach((S) => {
|
|
33
|
-
|
|
34
|
-
}),
|
|
35
|
-
},
|
|
33
|
+
i.push(S), i.push("border-l-8");
|
|
34
|
+
}), i.join(" ");
|
|
35
|
+
}, c = (t, l) => [
|
|
36
36
|
o.h3Variant({ size: t }),
|
|
37
37
|
o.textColorVariant({ color: l })
|
|
38
38
|
].join(" ");
|
|
39
39
|
return (t, l) => (C(), b("div", {
|
|
40
40
|
class: s(["w-full overflow-hidden", [
|
|
41
41
|
e.rounded ? "rounded-lg" : "rounded-sm",
|
|
42
|
-
|
|
42
|
+
x(e.borderColor, e.showHighlight, e.highlightColor)
|
|
43
43
|
]])
|
|
44
44
|
}, [
|
|
45
45
|
r("div", {
|
|
46
46
|
class: s(["px-sm transition-[border] duration-500", [
|
|
47
|
-
|
|
47
|
+
g.value ? `border-b ${a(o).borderBottomColorVariant({ color: e.borderColor })} ease-in` : "ease-out",
|
|
48
48
|
a(o).bgColorVariant({ color: e.bgColor })
|
|
49
49
|
]])
|
|
50
50
|
}, [
|
|
@@ -52,22 +52,22 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
52
52
|
r("button", {
|
|
53
53
|
type: "button",
|
|
54
54
|
id: `${e.collapseId}-trigger`,
|
|
55
|
-
"aria-expanded":
|
|
55
|
+
"aria-expanded": g.value,
|
|
56
56
|
"aria-controls": e.collapseId,
|
|
57
|
-
onClick: l[0] || (l[0] = (f) =>
|
|
57
|
+
onClick: l[0] || (l[0] = (f) => d.value?.toggle()),
|
|
58
58
|
class: "flex flex-1 cursor-pointer items-center bg-transparent py-xs text-left"
|
|
59
59
|
}, [
|
|
60
60
|
r("h3", {
|
|
61
|
-
class: s(
|
|
61
|
+
class: s(c(e.titleSize, e.titleColor))
|
|
62
62
|
}, $(e.title), 3)
|
|
63
|
-
], 8,
|
|
63
|
+
], 8, R),
|
|
64
64
|
m.tab ? (C(), b("div", {
|
|
65
65
|
key: 0,
|
|
66
|
-
onClick: l[1] || (l[1] =
|
|
66
|
+
onClick: l[1] || (l[1] = O(() => {
|
|
67
67
|
}, ["stop"])),
|
|
68
68
|
class: "cursor-default"
|
|
69
69
|
}, [
|
|
70
|
-
|
|
70
|
+
p(t.$slots, "tab")
|
|
71
71
|
])) : z("", !0)
|
|
72
72
|
])
|
|
73
73
|
], 2),
|
|
@@ -76,17 +76,17 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
76
76
|
}, [
|
|
77
77
|
k(a(A), {
|
|
78
78
|
ref_key: "collapseRef",
|
|
79
|
-
ref:
|
|
79
|
+
ref: d,
|
|
80
80
|
id: e.collapseId,
|
|
81
81
|
visible: e.visible,
|
|
82
82
|
"custom-class": "py-sm px-xs",
|
|
83
83
|
role: "region",
|
|
84
84
|
"aria-labelledby": `${e.collapseId}-trigger`,
|
|
85
|
-
onOpen:
|
|
86
|
-
onClose:
|
|
85
|
+
onOpen: v,
|
|
86
|
+
onClose: y
|
|
87
87
|
}, {
|
|
88
88
|
default: I(() => [
|
|
89
|
-
|
|
89
|
+
p(t.$slots, "content")
|
|
90
90
|
]),
|
|
91
91
|
_: 3
|
|
92
92
|
}, 8, ["id", "visible", "aria-labelledby"])
|
|
@@ -97,13 +97,13 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
97
97
|
a(o).bgColorVariant({ color: e.bgColor }),
|
|
98
98
|
a(o).borderTopColorVariant({ color: e.borderColor })
|
|
99
99
|
]]),
|
|
100
|
-
onClick: l[2] || (l[2] = (f) =>
|
|
100
|
+
onClick: l[2] || (l[2] = (f) => d.value?.toggle())
|
|
101
101
|
}, [
|
|
102
102
|
(C(), b("svg", {
|
|
103
103
|
xmlns: "http://www.w3.org/2000/svg",
|
|
104
104
|
viewBox: "0 0 448 512",
|
|
105
105
|
class: s(["h-xs", [
|
|
106
|
-
|
|
106
|
+
g.value ? "rotate-180" : "rotate-0",
|
|
107
107
|
"transition-transform duration-300 ease-in",
|
|
108
108
|
a(o).svgFillColorVariant({ color: e.iconColor })
|
|
109
109
|
]])
|
|
@@ -113,10 +113,10 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
113
113
|
], 2)
|
|
114
114
|
], 2));
|
|
115
115
|
}
|
|
116
|
-
}),
|
|
116
|
+
}), E = ["id", "aria-expanded", "aria-controls"], L = {
|
|
117
117
|
"aria-hidden": "true",
|
|
118
118
|
class: "ml-xs flex items-center justify-center md:ml-sm lg:ml-md"
|
|
119
|
-
},
|
|
119
|
+
}, N = { class: "overflow-hidden" }, q = /* @__PURE__ */ w({
|
|
120
120
|
__name: "MclCollapseB",
|
|
121
121
|
props: {
|
|
122
122
|
collapseId: {},
|
|
@@ -132,68 +132,66 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
132
132
|
visible: { type: Boolean, default: !1 }
|
|
133
133
|
},
|
|
134
134
|
emits: ["collapse-open", "collapse-close"],
|
|
135
|
-
setup(e, { emit:
|
|
136
|
-
const d =
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}, y = () => {
|
|
141
|
-
i
|
|
142
|
-
}, x = (u, t, l, f) => {
|
|
143
|
-
let n = [
|
|
135
|
+
setup(e, { emit: h }) {
|
|
136
|
+
const n = e, m = h, u = B(), d = V(() => u.value?.isOpen ?? n.visible), g = () => {
|
|
137
|
+
m("collapse-open", !0, n.title);
|
|
138
|
+
}, v = () => {
|
|
139
|
+
m("collapse-close", !1, n.title);
|
|
140
|
+
}, y = (c, t, l, f) => {
|
|
141
|
+
const i = [
|
|
144
142
|
"border",
|
|
145
|
-
o.borderColorVariant({ color:
|
|
143
|
+
o.borderColorVariant({ color: c }),
|
|
146
144
|
o.bgColorVariant({ color: t })
|
|
147
145
|
];
|
|
148
|
-
return f &&
|
|
149
|
-
},
|
|
150
|
-
o.h3Variant({ size:
|
|
146
|
+
return f && i.push("shadow-md"), l ? i.push("rounded-2xl") : i.push("rounded-sm"), i.join(" ");
|
|
147
|
+
}, x = (c, t) => [
|
|
148
|
+
o.h3Variant({ size: c }),
|
|
151
149
|
o.textColorVariant({ color: t })
|
|
152
150
|
].join(" ");
|
|
153
|
-
return (
|
|
154
|
-
class: s(["w-full overflow-hidden p-2xs",
|
|
151
|
+
return (c, t) => (C(), b("div", {
|
|
152
|
+
class: s(["w-full overflow-hidden p-2xs", y(e.borderColor, e.bgColor, e.rounded, e.showShadow)])
|
|
155
153
|
}, [
|
|
156
154
|
r("button", {
|
|
157
155
|
type: "button",
|
|
158
156
|
id: `${e.collapseId}-trigger`,
|
|
159
|
-
"aria-expanded":
|
|
157
|
+
"aria-expanded": d.value,
|
|
160
158
|
"aria-controls": e.collapseId,
|
|
161
|
-
onClick: t[0] || (t[0] = (l) =>
|
|
159
|
+
onClick: t[0] || (t[0] = (l) => u.value?.toggle()),
|
|
162
160
|
class: s(["flex w-full cursor-pointer items-center justify-between px-4 py-2 transition duration-200 ease-in hover:bg-opacity-70", [
|
|
163
161
|
e.rounded ? "rounded-lg" : "rounded-sm",
|
|
164
162
|
a(o).bgColorVariant({ color: e.triggerBgColor })
|
|
165
163
|
]])
|
|
166
164
|
}, [
|
|
167
165
|
r("span", {
|
|
168
|
-
class: s(
|
|
166
|
+
class: s(x(e.titleSize, e.titleColor))
|
|
169
167
|
}, $(e.title), 3),
|
|
170
|
-
r("div",
|
|
168
|
+
r("div", L, [
|
|
171
169
|
(C(), b("svg", {
|
|
172
170
|
xmlns: "http://www.w3.org/2000/svg",
|
|
173
171
|
viewBox: "0 0 448 512",
|
|
174
172
|
class: s(["h-xs transition-transform duration-300 ease-in", [
|
|
175
|
-
|
|
173
|
+
d.value ? "rotate-180" : "rotate-0",
|
|
176
174
|
a(o).svgFillColorVariant({ color: e.iconColor })
|
|
177
175
|
]])
|
|
178
176
|
}, [...t[1] || (t[1] = [
|
|
179
177
|
r("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)
|
|
180
178
|
])], 2))
|
|
181
179
|
])
|
|
182
|
-
], 10,
|
|
183
|
-
r("div",
|
|
180
|
+
], 10, E),
|
|
181
|
+
r("div", N, [
|
|
184
182
|
k(a(A), {
|
|
185
183
|
ref_key: "collapseRef",
|
|
186
|
-
ref:
|
|
184
|
+
ref: u,
|
|
187
185
|
id: e.collapseId,
|
|
188
186
|
visible: e.visible,
|
|
189
187
|
"custom-class": "px-xs pt-xs pb-2xs",
|
|
190
188
|
role: "region",
|
|
191
189
|
"aria-labelledby": `${e.collapseId}-trigger`,
|
|
192
|
-
onOpen:
|
|
193
|
-
onClose:
|
|
190
|
+
onOpen: g,
|
|
191
|
+
onClose: v
|
|
194
192
|
}, {
|
|
195
193
|
default: I(() => [
|
|
196
|
-
|
|
194
|
+
p(c.$slots, "default")
|
|
197
195
|
]),
|
|
198
196
|
_: 3
|
|
199
197
|
}, 8, ["id", "visible", "aria-labelledby"])
|
|
@@ -202,6 +200,6 @@ const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expan
|
|
|
202
200
|
}
|
|
203
201
|
});
|
|
204
202
|
export {
|
|
205
|
-
|
|
206
|
-
|
|
203
|
+
D as MclCollapseA,
|
|
204
|
+
q as MclCollapseB
|
|
207
205
|
};
|
|
@@ -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
|
|
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:b}){const n=l,g=e.useSlots(),c=b,i=e.ref(),C=e.computed(()=>i.value?.isOpen??n.visible),m=()=>{c("collapse-open",!0,n.title)},u=()=>{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),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:i,id:l.collapseId,visible:l.visible,"custom-class":"py-sm px-xs",role:"region","aria-labelledby":`${l.collapseId}-trigger`,onOpen:m,onClose:u},{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",{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:b}){const n=l,g=b,c=e.ref(),i=e.computed(()=>c.value?.isOpen??n.visible),C=()=>{g("collapse-open",!0,n.title)},m=()=>{g("collapse-close",!1,n.title)},u=(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",u(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",{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:m},{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.5",
|
|
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.3.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "vite build",
|
|
46
46
|
"test": "vitest run",
|
|
47
|
-
"test:watch": "vitest"
|
|
47
|
+
"test:watch": "vitest",
|
|
48
|
+
"typecheck": "vue-tsc --noEmit -p tsconfig.json"
|
|
48
49
|
}
|
|
49
50
|
}
|