@bobbykim/mcl-collapse 0.7.4 → 0.8.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 +101 -166
- package/dist/mcl-collapse.js +49 -49
- package/dist/mcl-collapse.umd.cjs +1 -1
- package/package.json +10 -10
package/dist/index.d.ts
CHANGED
|
@@ -1,122 +1,45 @@
|
|
|
1
1
|
import { ColorPalette } from '@bobbykim/manguito-theme';
|
|
2
2
|
import { ComponentOptionsMixin } from 'vue';
|
|
3
|
+
import { ComponentProvideOptions } from 'vue';
|
|
3
4
|
import { DefineComponent } from 'vue';
|
|
4
|
-
import { ExtractPropTypes } from 'vue';
|
|
5
5
|
import { HeadingSize } from '@bobbykim/manguito-theme';
|
|
6
|
-
import { PropType } from 'vue';
|
|
7
6
|
import { PublicProps } from 'vue';
|
|
8
7
|
|
|
9
|
-
declare
|
|
10
|
-
|
|
11
|
-
declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
|
|
12
|
-
|
|
13
|
-
declare type __VLS_Prettify<T> = {
|
|
14
|
-
[K in keyof T]: T[K];
|
|
15
|
-
} & {};
|
|
16
|
-
|
|
17
|
-
declare type __VLS_Prettify_2<T> = {
|
|
18
|
-
[K in keyof T]: T[K];
|
|
19
|
-
} & {};
|
|
20
|
-
|
|
21
|
-
declare type __VLS_TypePropsToRuntimeProps<T> = {
|
|
22
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
23
|
-
type: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
24
|
-
} : {
|
|
25
|
-
type: PropType<T[K]>;
|
|
26
|
-
required: true;
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
declare type __VLS_TypePropsToRuntimeProps_2<T> = {
|
|
31
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
32
|
-
type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
|
|
33
|
-
} : {
|
|
34
|
-
type: PropType<T[K]>;
|
|
35
|
-
required: true;
|
|
36
|
-
};
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
declare type __VLS_WithDefaults<P, D> = {
|
|
40
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
41
|
-
default: D[K];
|
|
42
|
-
}> : P[K];
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
declare type __VLS_WithDefaults_2<P, D> = {
|
|
46
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify_2<P[K] & {
|
|
47
|
-
default: D[K];
|
|
48
|
-
}> : P[K];
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
52
|
-
new (): {
|
|
53
|
-
$slots: S;
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
declare type __VLS_WithTemplateSlots_2<T, S> = T & {
|
|
58
|
-
new (): {
|
|
59
|
-
$slots: S;
|
|
60
|
-
};
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
export declare const MclCollapseA: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
8
|
+
declare const __VLS_component: DefineComponent< {
|
|
64
9
|
collapseId: string;
|
|
65
|
-
borderColor?: ColorPalette
|
|
66
|
-
rounded?: boolean
|
|
67
|
-
displayHighlight?: boolean
|
|
68
|
-
highlightColor?: ColorPalette
|
|
10
|
+
borderColor?: ColorPalette;
|
|
11
|
+
rounded?: boolean;
|
|
12
|
+
displayHighlight?: boolean;
|
|
13
|
+
highlightColor?: ColorPalette;
|
|
69
14
|
title: string;
|
|
70
|
-
titleSize?: HeadingSize
|
|
71
|
-
titleColor?: ColorPalette
|
|
72
|
-
visible?: boolean
|
|
73
|
-
iconColor?: ColorPalette
|
|
74
|
-
bgColor?: ColorPalette
|
|
75
|
-
slotBgColor?: ColorPalette
|
|
76
|
-
accordion?: string
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
highlightColor: string;
|
|
82
|
-
titleSize: string;
|
|
83
|
-
titleColor: string;
|
|
84
|
-
visible: boolean;
|
|
85
|
-
iconColor: string;
|
|
86
|
-
bgColor: string;
|
|
87
|
-
slotBgColor: string;
|
|
88
|
-
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
89
|
-
"collapse-open": (visible: boolean, title: string) => void;
|
|
90
|
-
"collapse-close": (visible: boolean, title: string) => void;
|
|
91
|
-
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
15
|
+
titleSize?: HeadingSize;
|
|
16
|
+
titleColor?: ColorPalette;
|
|
17
|
+
visible?: boolean;
|
|
18
|
+
iconColor?: ColorPalette;
|
|
19
|
+
bgColor?: ColorPalette;
|
|
20
|
+
slotBgColor?: ColorPalette;
|
|
21
|
+
accordion?: string;
|
|
22
|
+
}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
23
|
+
"collapse-open": (visible: boolean, title: string) => any;
|
|
24
|
+
"collapse-close": (visible: boolean, title: string) => any;
|
|
25
|
+
}, string, PublicProps, Readonly<{
|
|
92
26
|
collapseId: string;
|
|
93
|
-
borderColor?: ColorPalette
|
|
94
|
-
rounded?: boolean
|
|
95
|
-
displayHighlight?: boolean
|
|
96
|
-
highlightColor?: ColorPalette
|
|
27
|
+
borderColor?: ColorPalette;
|
|
28
|
+
rounded?: boolean;
|
|
29
|
+
displayHighlight?: boolean;
|
|
30
|
+
highlightColor?: ColorPalette;
|
|
97
31
|
title: string;
|
|
98
|
-
titleSize?: HeadingSize
|
|
99
|
-
titleColor?: ColorPalette
|
|
100
|
-
visible?: boolean
|
|
101
|
-
iconColor?: ColorPalette
|
|
102
|
-
bgColor?: ColorPalette
|
|
103
|
-
slotBgColor?: ColorPalette
|
|
104
|
-
accordion?: string
|
|
105
|
-
}
|
|
106
|
-
borderColor: string;
|
|
107
|
-
rounded: boolean;
|
|
108
|
-
displayHighlight: boolean;
|
|
109
|
-
highlightColor: string;
|
|
110
|
-
titleSize: string;
|
|
111
|
-
titleColor: string;
|
|
112
|
-
visible: boolean;
|
|
113
|
-
iconColor: string;
|
|
114
|
-
bgColor: string;
|
|
115
|
-
slotBgColor: string;
|
|
116
|
-
}>>> & {
|
|
32
|
+
titleSize?: HeadingSize;
|
|
33
|
+
titleColor?: ColorPalette;
|
|
34
|
+
visible?: boolean;
|
|
35
|
+
iconColor?: ColorPalette;
|
|
36
|
+
bgColor?: ColorPalette;
|
|
37
|
+
slotBgColor?: ColorPalette;
|
|
38
|
+
accordion?: string;
|
|
39
|
+
}> & Readonly<{
|
|
117
40
|
"onCollapse-open"?: ((visible: boolean, title: string) => any) | undefined;
|
|
118
41
|
"onCollapse-close"?: ((visible: boolean, title: string) => any) | undefined;
|
|
119
|
-
}
|
|
42
|
+
}>, {
|
|
120
43
|
borderColor: ColorPalette;
|
|
121
44
|
rounded: boolean;
|
|
122
45
|
displayHighlight: boolean;
|
|
@@ -127,67 +50,41 @@ visible: boolean;
|
|
|
127
50
|
iconColor: ColorPalette;
|
|
128
51
|
bgColor: ColorPalette;
|
|
129
52
|
slotBgColor: ColorPalette;
|
|
130
|
-
}, {}
|
|
131
|
-
content: any;
|
|
132
|
-
tab: any;
|
|
133
|
-
}> & {
|
|
134
|
-
content: any;
|
|
135
|
-
tab: any;
|
|
136
|
-
}>;
|
|
53
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
137
54
|
|
|
138
|
-
|
|
55
|
+
declare const __VLS_component_2: DefineComponent< {
|
|
139
56
|
collapseId: string;
|
|
140
57
|
title: string;
|
|
141
|
-
titleColor?: ColorPalette
|
|
142
|
-
titleSize?: HeadingSize
|
|
143
|
-
borderColor?: ColorPalette
|
|
144
|
-
bgColor?: ColorPalette
|
|
145
|
-
btnColor?: ColorPalette
|
|
146
|
-
iconColor?: ColorPalette
|
|
147
|
-
rounded?: boolean
|
|
148
|
-
displayShadow?: boolean
|
|
149
|
-
visible?: boolean
|
|
150
|
-
accordion?: string
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
bgColor: string;
|
|
156
|
-
btnColor: string;
|
|
157
|
-
iconColor: string;
|
|
158
|
-
rounded: boolean;
|
|
159
|
-
displayShadow: boolean;
|
|
160
|
-
visible: boolean;
|
|
161
|
-
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
162
|
-
"collapse-open": (visible: boolean, title: string) => void;
|
|
163
|
-
"collapse-close": (visible: boolean, title: string) => void;
|
|
164
|
-
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_2<__VLS_TypePropsToRuntimeProps_2<{
|
|
58
|
+
titleColor?: ColorPalette;
|
|
59
|
+
titleSize?: HeadingSize;
|
|
60
|
+
borderColor?: ColorPalette;
|
|
61
|
+
bgColor?: ColorPalette;
|
|
62
|
+
btnColor?: ColorPalette;
|
|
63
|
+
iconColor?: ColorPalette;
|
|
64
|
+
rounded?: boolean;
|
|
65
|
+
displayShadow?: boolean;
|
|
66
|
+
visible?: boolean;
|
|
67
|
+
accordion?: string;
|
|
68
|
+
}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
69
|
+
"collapse-open": (visible: boolean, title: string) => any;
|
|
70
|
+
"collapse-close": (visible: boolean, title: string) => any;
|
|
71
|
+
}, string, PublicProps, Readonly<{
|
|
165
72
|
collapseId: string;
|
|
166
73
|
title: string;
|
|
167
|
-
titleColor?: ColorPalette
|
|
168
|
-
titleSize?: HeadingSize
|
|
169
|
-
borderColor?: ColorPalette
|
|
170
|
-
bgColor?: ColorPalette
|
|
171
|
-
btnColor?: ColorPalette
|
|
172
|
-
iconColor?: ColorPalette
|
|
173
|
-
rounded?: boolean
|
|
174
|
-
displayShadow?: boolean
|
|
175
|
-
visible?: boolean
|
|
176
|
-
accordion?: string
|
|
177
|
-
}
|
|
178
|
-
titleColor: string;
|
|
179
|
-
titleSize: string;
|
|
180
|
-
borderColor: string;
|
|
181
|
-
bgColor: string;
|
|
182
|
-
btnColor: string;
|
|
183
|
-
iconColor: string;
|
|
184
|
-
rounded: boolean;
|
|
185
|
-
displayShadow: boolean;
|
|
186
|
-
visible: boolean;
|
|
187
|
-
}>>> & {
|
|
74
|
+
titleColor?: ColorPalette;
|
|
75
|
+
titleSize?: HeadingSize;
|
|
76
|
+
borderColor?: ColorPalette;
|
|
77
|
+
bgColor?: ColorPalette;
|
|
78
|
+
btnColor?: ColorPalette;
|
|
79
|
+
iconColor?: ColorPalette;
|
|
80
|
+
rounded?: boolean;
|
|
81
|
+
displayShadow?: boolean;
|
|
82
|
+
visible?: boolean;
|
|
83
|
+
accordion?: string;
|
|
84
|
+
}> & Readonly<{
|
|
188
85
|
"onCollapse-open"?: ((visible: boolean, title: string) => any) | undefined;
|
|
189
86
|
"onCollapse-close"?: ((visible: boolean, title: string) => any) | undefined;
|
|
190
|
-
}
|
|
87
|
+
}>, {
|
|
191
88
|
borderColor: ColorPalette;
|
|
192
89
|
rounded: boolean;
|
|
193
90
|
titleSize: HeadingSize;
|
|
@@ -197,10 +94,48 @@ iconColor: ColorPalette;
|
|
|
197
94
|
bgColor: ColorPalette;
|
|
198
95
|
btnColor: ColorPalette;
|
|
199
96
|
displayShadow: boolean;
|
|
200
|
-
}, {}
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
97
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
98
|
+
|
|
99
|
+
declare function __VLS_template(): {
|
|
100
|
+
slots: Readonly<{
|
|
101
|
+
content: any;
|
|
102
|
+
tab: any;
|
|
103
|
+
}> & {
|
|
104
|
+
content: any;
|
|
105
|
+
tab: any;
|
|
106
|
+
};
|
|
107
|
+
refs: {};
|
|
108
|
+
attrs: Partial<{}>;
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
declare function __VLS_template_2(): {
|
|
112
|
+
slots: Readonly<{
|
|
113
|
+
default: any;
|
|
114
|
+
}> & {
|
|
115
|
+
default: any;
|
|
116
|
+
};
|
|
117
|
+
refs: {};
|
|
118
|
+
attrs: Partial<{}>;
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
122
|
+
|
|
123
|
+
declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
|
|
124
|
+
|
|
125
|
+
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
126
|
+
new (): {
|
|
127
|
+
$slots: S;
|
|
128
|
+
};
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
declare type __VLS_WithTemplateSlots_2<T, S> = T & {
|
|
132
|
+
new (): {
|
|
133
|
+
$slots: S;
|
|
134
|
+
};
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
export declare const MclCollapseA: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
138
|
+
|
|
139
|
+
export declare const MclCollapseB: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
|
|
205
140
|
|
|
206
141
|
export { }
|
package/dist/mcl-collapse.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import { defineComponent as B, ref as O, useSlots as R, watch as L, openBlock as n, createElementBlock as d, normalizeClass as r, withDirectives as b, unref as
|
|
1
|
+
import { defineComponent as B, ref as O, useSlots as R, watch as L, openBlock as n, createElementBlock as d, normalizeClass as r, withDirectives as b, unref as t, createElementVNode as u, toDisplayString as A, withModifiers as z, renderSlot as y, createCommentVNode as D, createVNode as S, withCtx as E } from "vue";
|
|
2
2
|
import l, { vCollapse as w, Collapse as I } from "@bobbykim/manguito-theme";
|
|
3
|
-
const
|
|
4
|
-
G
|
|
5
|
-
], q = /* @__PURE__ */ B({
|
|
3
|
+
const G = { class: "flex justify-between items-center" }, H = /* @__PURE__ */ B({
|
|
6
4
|
__name: "MclCollapseA",
|
|
7
5
|
props: {
|
|
8
6
|
collapseId: {},
|
|
@@ -20,25 +18,25 @@ const D = { class: "flex justify-between items-center" }, G = /* @__PURE__ */ c(
|
|
|
20
18
|
accordion: {}
|
|
21
19
|
},
|
|
22
20
|
emits: ["collapse-open", "collapse-close"],
|
|
23
|
-
setup(
|
|
24
|
-
const
|
|
25
|
-
const { title:
|
|
26
|
-
i.value = e, p(e === !0 ? "collapse-open" : "collapse-close", e,
|
|
27
|
-
}, v = (e,
|
|
21
|
+
setup(g, { emit: h }) {
|
|
22
|
+
const c = g, i = O(c.visible), f = R(), p = h, C = (e) => {
|
|
23
|
+
const { title: s } = c;
|
|
24
|
+
i.value = e, p(e === !0 ? "collapse-open" : "collapse-close", e, s);
|
|
25
|
+
}, v = (e, s, m) => {
|
|
28
26
|
const a = ["border", l("BORDER", e)];
|
|
29
|
-
return
|
|
27
|
+
return s && [l("BORDERL", m)].forEach((j) => {
|
|
30
28
|
a.push(j), a.push("border-l-8");
|
|
31
29
|
}), a.join(" ");
|
|
32
|
-
}, o = (e,
|
|
30
|
+
}, o = (e, s) => [
|
|
33
31
|
l("H3", e),
|
|
34
|
-
l("TEXTCOLOR",
|
|
32
|
+
l("TEXTCOLOR", s)
|
|
35
33
|
].join(" ");
|
|
36
34
|
return L(
|
|
37
|
-
() =>
|
|
35
|
+
() => c.visible,
|
|
38
36
|
(e) => {
|
|
39
37
|
i.value = e;
|
|
40
38
|
}
|
|
41
|
-
), (e,
|
|
39
|
+
), (e, s) => (n(), d("div", {
|
|
42
40
|
class: r(["overflow-hidden w-full", [
|
|
43
41
|
e.rounded ? "rounded-lg" : "rounded-sm",
|
|
44
42
|
v(e.borderColor, e.displayHighlight, e.highlightColor)
|
|
@@ -46,30 +44,30 @@ const D = { class: "flex justify-between items-center" }, G = /* @__PURE__ */ c(
|
|
|
46
44
|
}, [
|
|
47
45
|
b((n(), d("div", {
|
|
48
46
|
class: r(["py-xs px-sm cursor-pointer transition-[border] duration-500", [
|
|
49
|
-
i.value ? `border-b ${
|
|
50
|
-
|
|
47
|
+
i.value ? `border-b ${t(l)("BORDERB", e.borderColor)} ease-in` : "ease-out",
|
|
48
|
+
t(l)("BGCOLOR", e.bgColor)
|
|
51
49
|
]])
|
|
52
50
|
}, [
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
u("div", G, [
|
|
52
|
+
u("h3", {
|
|
55
53
|
class: r(o(e.titleSize, e.titleColor))
|
|
56
54
|
}, A(e.title), 3),
|
|
57
55
|
f.tab ? (n(), d("div", {
|
|
58
56
|
key: 0,
|
|
59
|
-
onClick:
|
|
57
|
+
onClick: s[0] || (s[0] = z(() => {
|
|
60
58
|
}, ["stop"])),
|
|
61
59
|
class: "cursor-default"
|
|
62
60
|
}, [
|
|
63
61
|
y(e.$slots, "tab")
|
|
64
|
-
])) :
|
|
62
|
+
])) : D("", !0)
|
|
65
63
|
])
|
|
66
64
|
], 2)), [
|
|
67
|
-
[
|
|
65
|
+
[t(w), void 0, e.collapseId]
|
|
68
66
|
]),
|
|
69
|
-
|
|
70
|
-
class: r(["overflow-hidden",
|
|
67
|
+
u("div", {
|
|
68
|
+
class: r(["overflow-hidden", t(l)("BGCOLOR", e.slotBgColor)])
|
|
71
69
|
}, [
|
|
72
|
-
S(
|
|
70
|
+
S(t(I), {
|
|
73
71
|
id: e.collapseId,
|
|
74
72
|
visible: e.visible,
|
|
75
73
|
"class-name": "py-sm px-xs",
|
|
@@ -85,8 +83,8 @@ const D = { class: "flex justify-between items-center" }, G = /* @__PURE__ */ c(
|
|
|
85
83
|
], 2),
|
|
86
84
|
b((n(), d("div", {
|
|
87
85
|
class: r(["py-1.5 px-sm cursor-pointer transition-all duration-500 flex justify-center items-center border-t", [
|
|
88
|
-
|
|
89
|
-
|
|
86
|
+
t(l)("BGCOLOR", e.bgColor),
|
|
87
|
+
t(l)("BORDERT", e.borderColor)
|
|
90
88
|
]])
|
|
91
89
|
}, [
|
|
92
90
|
(n(), d("svg", {
|
|
@@ -95,17 +93,17 @@ const D = { class: "flex justify-between items-center" }, G = /* @__PURE__ */ c(
|
|
|
95
93
|
class: r(["h-xs", [
|
|
96
94
|
i.value ? "rotate-180" : "rotate-0",
|
|
97
95
|
"transition-transform duration-300 ease-in",
|
|
98
|
-
|
|
96
|
+
t(l)("SVGFILL", e.iconColor)
|
|
99
97
|
]])
|
|
100
|
-
},
|
|
98
|
+
}, s[1] || (s[1] = [
|
|
99
|
+
u("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)
|
|
100
|
+
]), 2))
|
|
101
101
|
], 2)), [
|
|
102
|
-
[
|
|
102
|
+
[t(w), void 0, e.collapseId]
|
|
103
103
|
])
|
|
104
104
|
], 2));
|
|
105
105
|
}
|
|
106
|
-
}),
|
|
107
|
-
k
|
|
108
|
-
], H = { class: "overflow-hidden" }, J = /* @__PURE__ */ B({
|
|
106
|
+
}), M = { class: "flex justify-center items-center ml-xs md:ml-sm lg:ml-md" }, T = { class: "overflow-hidden" }, N = /* @__PURE__ */ B({
|
|
109
107
|
__name: "MclCollapseB",
|
|
110
108
|
props: {
|
|
111
109
|
collapseId: {},
|
|
@@ -122,25 +120,25 @@ const D = { class: "flex justify-between items-center" }, G = /* @__PURE__ */ c(
|
|
|
122
120
|
accordion: {}
|
|
123
121
|
},
|
|
124
122
|
emits: ["collapse-open", "collapse-close"],
|
|
125
|
-
setup(
|
|
126
|
-
const
|
|
123
|
+
setup(g, { emit: h }) {
|
|
124
|
+
const c = g;
|
|
127
125
|
R();
|
|
128
|
-
const i = O(
|
|
129
|
-
const { title: e } =
|
|
126
|
+
const i = O(c.visible), f = h, p = (o) => {
|
|
127
|
+
const { title: e } = c;
|
|
130
128
|
i.value = o, f(o === !0 ? "collapse-open" : "collapse-close", o, e);
|
|
131
|
-
}, C = (o, e,
|
|
129
|
+
}, C = (o, e, s, m) => {
|
|
132
130
|
let a = [
|
|
133
131
|
"border",
|
|
134
132
|
l("BORDER", o),
|
|
135
133
|
l("BGCOLOR", e)
|
|
136
134
|
];
|
|
137
|
-
return
|
|
135
|
+
return m && a.push("shadow-md"), s ? a.push("rounded-2xl") : a.push("rounded-sm"), a.join(" ");
|
|
138
136
|
}, v = (o, e) => [
|
|
139
137
|
l("H3", o),
|
|
140
138
|
l("TEXTCOLOR", e)
|
|
141
139
|
].join(" ");
|
|
142
140
|
return L(
|
|
143
|
-
() =>
|
|
141
|
+
() => c.visible,
|
|
144
142
|
(o) => {
|
|
145
143
|
i.value = o;
|
|
146
144
|
}
|
|
@@ -150,27 +148,29 @@ const D = { class: "flex justify-between items-center" }, G = /* @__PURE__ */ c(
|
|
|
150
148
|
b((n(), d("div", {
|
|
151
149
|
class: r(["flex justify-between items-center w-full px-4 py-2 cursor-pointer hover:bg-opacity-70 transition duration-200 ease-in", [
|
|
152
150
|
o.rounded ? "rounded-lg" : "rounded-sm",
|
|
153
|
-
|
|
151
|
+
t(l)("BGCOLOR", o.btnColor)
|
|
154
152
|
]])
|
|
155
153
|
}, [
|
|
156
|
-
|
|
154
|
+
u("h3", {
|
|
157
155
|
class: r(v(o.titleSize, o.titleColor))
|
|
158
156
|
}, A(o.title), 3),
|
|
159
|
-
|
|
157
|
+
u("div", M, [
|
|
160
158
|
(n(), d("svg", {
|
|
161
159
|
xmlns: "http://www.w3.org/2000/svg",
|
|
162
160
|
viewBox: "0 0 448 512",
|
|
163
161
|
class: r(["h-xs transition-transform duration-300 ease-in", [
|
|
164
162
|
i.value ? "rotate-180" : "rotate-0",
|
|
165
|
-
|
|
163
|
+
t(l)("SVGFILL", o.iconColor)
|
|
166
164
|
]])
|
|
167
|
-
},
|
|
165
|
+
}, e[0] || (e[0] = [
|
|
166
|
+
u("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)
|
|
167
|
+
]), 2))
|
|
168
168
|
])
|
|
169
169
|
], 2)), [
|
|
170
|
-
[
|
|
170
|
+
[t(w), void 0, o.collapseId]
|
|
171
171
|
]),
|
|
172
|
-
|
|
173
|
-
S(
|
|
172
|
+
u("div", T, [
|
|
173
|
+
S(t(I), {
|
|
174
174
|
id: o.collapseId,
|
|
175
175
|
visible: o.visible,
|
|
176
176
|
"class-name": "px-xs pt-xs pb-2xs",
|
|
@@ -188,6 +188,6 @@ const D = { class: "flex justify-between items-center" }, G = /* @__PURE__ */ c(
|
|
|
188
188
|
}
|
|
189
189
|
});
|
|
190
190
|
export {
|
|
191
|
-
|
|
192
|
-
|
|
191
|
+
H as MclCollapseA,
|
|
192
|
+
N as MclCollapseB
|
|
193
193
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(s,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],o):(s=typeof globalThis<"u"?globalThis:s||self,o(s.MclCollapse={},s.Vue,s.ManguitoTheme))})(this,function(s,o,t){"use strict";const u={class:"flex justify-between items-center"},b=o.defineComponent({__name:"MclCollapseA",props:{collapseId:{},borderColor:{default:"light-4"},rounded:{type:Boolean,default:!1},displayHighlight:{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"},slotBgColor:{default:"light-2"},accordion:{}},emits:["collapse-open","collapse-close"],setup(m,{emit:h}){const d=m,i=o.ref(d.visible),c=o.useSlots(),a=h,p=e=>{const{title:r}=d;i.value=e,a(e===!0?"collapse-open":"collapse-close",e,r)},C=(e,r,f)=>{const n=["border",t("BORDER",e)];return r&&[t("BORDERL",f)].forEach(g=>{n.push(g),n.push("border-l-8")}),n.join(" ")},l=(e,r)=>[t("H3",e),t("TEXTCOLOR",r)].join(" ");return o.watch(()=>d.visible,e=>{i.value=e}),(e,r)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["overflow-hidden w-full",[e.rounded?"rounded-lg":"rounded-sm",C(e.borderColor,e.displayHighlight,e.highlightColor)]])},[o.withDirectives((o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["py-xs px-sm cursor-pointer transition-[border] duration-500",[i.value?`border-b ${o.unref(t)("BORDERB",e.borderColor)} ease-in`:"ease-out",o.unref(t)("BGCOLOR",e.bgColor)]])},[o.createElementVNode("div",u,[o.createElementVNode("h3",{class:o.normalizeClass(l(e.titleSize,e.titleColor))},o.toDisplayString(e.title),3),c.tab?(o.openBlock(),o.createElementBlock("div",{key:0,onClick:r[0]||(r[0]=o.withModifiers(()=>{},["stop"])),class:"cursor-default"},[o.renderSlot(e.$slots,"tab")])):o.createCommentVNode("",!0)])],2)),[[o.unref(t.vCollapse),void 0,e.collapseId]]),o.createElementVNode("div",{class:o.normalizeClass(["overflow-hidden",o.unref(t)("BGCOLOR",e.slotBgColor)])},[o.createVNode(o.unref(t.Collapse),{id:e.collapseId,visible:e.visible,"class-name":"py-sm px-xs",onOpen:p,onClose:p,accordion:e.accordion},{default:o.withCtx(()=>[o.renderSlot(e.$slots,"content")]),_:3},8,["id","visible","accordion"])],2),o.withDirectives((o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["py-1.5 px-sm cursor-pointer transition-all duration-500 flex justify-center items-center border-t",[o.unref(t)("BGCOLOR",e.bgColor),o.unref(t)("BORDERT",e.borderColor)]])},[(o.openBlock(),o.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:o.normalizeClass(["h-xs",[i.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in",o.unref(t)("SVGFILL",e.iconColor)]])},r[1]||(r[1]=[o.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)),[[o.unref(t.vCollapse),void 0,e.collapseId]])],2))}}),B={class:"flex justify-center items-center ml-xs md:ml-sm lg:ml-md"},y={class:"overflow-hidden"},w=o.defineComponent({__name:"MclCollapseB",props:{collapseId:{},title:{},titleColor:{default:"light-1"},titleSize:{default:"md"},borderColor:{default:"light-3"},bgColor:{default:"light-1"},btnColor:{default:"primary"},iconColor:{default:"light-1"},rounded:{type:Boolean,default:!0},displayShadow:{type:Boolean,default:!0},visible:{type:Boolean,default:!1},accordion:{}},emits:["collapse-open","collapse-close"],setup(m,{emit:h}){const d=m;o.useSlots();const i=o.ref(d.visible),c=h,a=l=>{const{title:e}=d;i.value=l,c(l===!0?"collapse-open":"collapse-close",l,e)},p=(l,e,r,f)=>{let n=["border",t("BORDER",l),t("BGCOLOR",e)];return f&&n.push("shadow-md"),r?n.push("rounded-2xl"):n.push("rounded-sm"),n.join(" ")},C=(l,e)=>[t("H3",l),t("TEXTCOLOR",e)].join(" ");return o.watch(()=>d.visible,l=>{i.value=l}),(l,e)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["w-full overflow-hidden p-2xs",p(l.borderColor,l.bgColor,l.rounded,l.displayShadow)])},[o.withDirectives((o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["flex justify-between items-center w-full px-4 py-2 cursor-pointer hover:bg-opacity-70 transition duration-200 ease-in",[l.rounded?"rounded-lg":"rounded-sm",o.unref(t)("BGCOLOR",l.btnColor)]])},[o.createElementVNode("h3",{class:o.normalizeClass(C(l.titleSize,l.titleColor))},o.toDisplayString(l.title),3),o.createElementVNode("div",B,[(o.openBlock(),o.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:o.normalizeClass(["h-xs transition-transform duration-300 ease-in",[i.value?"rotate-180":"rotate-0",o.unref(t)("SVGFILL",l.iconColor)]])},e[0]||(e[0]=[o.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)),[[o.unref(t.vCollapse),void 0,l.collapseId]]),o.createElementVNode("div",y,[o.createVNode(o.unref(t.Collapse),{id:l.collapseId,visible:l.visible,"class-name":"px-xs pt-xs pb-2xs",accordion:l.accordion,onOpen:a,onClose:a},{default:o.withCtx(()=>[o.renderSlot(l.$slots,"default")]),_:3},8,["id","visible","accordion"])])],2))}});s.MclCollapseA=b,s.MclCollapseB=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-collapse",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "collapse component built on top of @bobbykim/manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -33,16 +33,16 @@
|
|
|
33
33
|
},
|
|
34
34
|
"license": "MIT",
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@bobbykim/manguito-theme": "0.
|
|
37
|
-
"vue": "^3.
|
|
36
|
+
"@bobbykim/manguito-theme": "0.23.0",
|
|
37
|
+
"vue": "^3.5.13"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@vitejs/plugin-vue": "^
|
|
41
|
-
"typescript": "^5.
|
|
42
|
-
"vite": "^
|
|
43
|
-
"vite-plugin-css-injected-by-js": "^3.5.
|
|
44
|
-
"vite-plugin-dts": "^3.
|
|
45
|
-
"vue-tsc": "^1.
|
|
40
|
+
"@vitejs/plugin-vue": "^5.2.1",
|
|
41
|
+
"typescript": "^5.7.2",
|
|
42
|
+
"vite": "^6.0.3",
|
|
43
|
+
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
44
|
+
"vite-plugin-dts": "^4.3.0",
|
|
45
|
+
"vue-tsc": "^2.1.10"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "0c86a1a70a33446112dafbaf5fce5fdcb5fdf755"
|
|
48
48
|
}
|