@bobbykim/mcl-collapse 0.8.9 → 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/README.md CHANGED
@@ -15,21 +15,60 @@ npm i @bobbykim/mcl-collapse
15
15
 
16
16
  ## Usage
17
17
 
18
- `import { MclCollapseA, MclCollapseB } from "@bobbykim/mcl-collapse"`;
18
+ ### Standalone collapse
19
+
20
+ Each component manages its own open/close state internally. No wrapper needed.
19
21
 
20
22
  ```vue
21
23
  <script setup lang="ts">
22
- ...
23
24
  import { MclCollapseA, MclCollapseB } from '@bobbykim/mcl-collapse'
24
- ...
25
25
  </script>
26
26
 
27
27
  <template>
28
- <mcl-collapse-a></mcl-collapse-a>
29
- <mcl-collapse-b></mcl-collapse-b>
28
+ <MclCollapseA collapse-id="item-1" title="Section 1">
29
+ <template #content>Content here</template>
30
+ </MclCollapseA>
31
+
32
+ <MclCollapseB collapse-id="item-2" title="Section 2">
33
+ Content here
34
+ </MclCollapseB>
30
35
  </template>
31
36
  ```
32
37
 
38
+ ### Accordion group
39
+
40
+ Wrap components in `AccordionGroup` to ensure only one item is open at a time. `AccordionGroup` is exported from `@bobbykim/manguito-theme`.
41
+
42
+ ```vue
43
+ <script setup lang="ts">
44
+ import { AccordionGroup } from '@bobbykim/manguito-theme'
45
+ import { MclCollapseA } from '@bobbykim/mcl-collapse'
46
+ </script>
47
+
48
+ <template>
49
+ <AccordionGroup>
50
+ <MclCollapseA collapse-id="item-1" title="Item 1">
51
+ <template #content>Content 1</template>
52
+ </MclCollapseA>
53
+ <MclCollapseA collapse-id="item-2" title="Item 2">
54
+ <template #content>Content 2</template>
55
+ </MclCollapseA>
56
+ <MclCollapseA collapse-id="item-3" title="Item 3">
57
+ <template #content>Content 3</template>
58
+ </MclCollapseA>
59
+ </AccordionGroup>
60
+ </template>
61
+ ```
62
+
63
+ ## Migration from v-collapse
64
+
65
+ The `v-collapse` directive and `accordion` prop are deprecated. Components no longer respond to `v-collapse` — state is managed internally.
66
+
67
+ | Old | New |
68
+ |---|---|
69
+ | `v-collapse:itemId` on trigger | handled internally — no change needed |
70
+ | `:accordion="groupName"` prop | wrap components in `<AccordionGroup>` |
71
+
33
72
  ## Dependencies
34
73
 
35
74
  - @bobbykim/manguito-theme
package/dist/index.d.ts CHANGED
@@ -1,9 +1,25 @@
1
+ import { AllowedComponentProps } from 'vue';
1
2
  import { ColorPalette } from '@bobbykim/manguito-theme';
3
+ import { ComponentCustomProperties } from 'vue';
4
+ import { ComponentCustomProps } from 'vue';
5
+ import { ComponentInternalInstance } from 'vue';
6
+ import { ComponentOptionsBase } from 'vue';
2
7
  import { ComponentOptionsMixin } from 'vue';
3
8
  import { ComponentProvideOptions } from 'vue';
9
+ import { ComponentPublicInstance } from 'vue';
10
+ import { DebuggerEvent } from 'vue';
4
11
  import { DefineComponent } from 'vue';
12
+ import { GlobalComponents } from 'vue';
13
+ import { GlobalDirectives } from 'vue';
5
14
  import { HeadingSize } from '@bobbykim/manguito-theme';
15
+ import { nextTick } from 'vue';
16
+ import { OnCleanup } from '@vue/reactivity';
6
17
  import { PublicProps } from 'vue';
18
+ import { ShallowUnwrapRef } from 'vue';
19
+ import { Slot } from 'vue';
20
+ import { VNodeProps } from 'vue';
21
+ import { WatchOptions } from 'vue';
22
+ import { WatchStopHandle } from 'vue';
7
23
 
8
24
  declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
9
25
  "collapse-open": (visible: boolean, title: string) => any;
@@ -14,15 +30,98 @@ declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, Comp
14
30
  }>, {
15
31
  borderColor: ColorPalette;
16
32
  rounded: boolean;
17
- displayHighlight: boolean;
33
+ showHighlight: boolean;
18
34
  highlightColor: ColorPalette;
19
35
  titleSize: HeadingSize;
20
36
  titleColor: ColorPalette;
21
37
  visible: boolean;
22
38
  iconColor: ColorPalette;
23
39
  bgColor: ColorPalette;
24
- slotBgColor: ColorPalette;
25
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
40
+ contentBgColor: ColorPalette;
41
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {
42
+ collapseRef: ({
43
+ $: ComponentInternalInstance;
44
+ $data: {};
45
+ $props: {
46
+ readonly id?: string | undefined;
47
+ readonly customClass?: string | string[] | undefined;
48
+ readonly visible?: boolean | undefined;
49
+ readonly onClose?: ((visible: boolean) => any) | undefined | undefined;
50
+ readonly onOpen?: ((visible: boolean) => any) | undefined | undefined;
51
+ } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
52
+ $attrs: {
53
+ [x: string]: unknown;
54
+ };
55
+ $refs: {
56
+ [x: string]: unknown;
57
+ };
58
+ $slots: Readonly<{
59
+ [name: string]: Slot<any> | undefined;
60
+ }>;
61
+ $root: ComponentPublicInstance | null;
62
+ $parent: ComponentPublicInstance | null;
63
+ $host: Element | null;
64
+ $emit: ((event: "open", visible: boolean) => void) & ((event: "close", visible: boolean) => void);
65
+ $el: HTMLDivElement;
66
+ $options: ComponentOptionsBase<Readonly<{
67
+ id?: string;
68
+ customClass?: string | string[];
69
+ visible?: boolean;
70
+ }> & Readonly<{
71
+ onClose?: ((visible: boolean) => any) | undefined;
72
+ onOpen?: ((visible: boolean) => any) | undefined;
73
+ }>, {
74
+ toggle: () => void;
75
+ open: () => void;
76
+ close: () => void;
77
+ }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
78
+ close: (visible: boolean) => any;
79
+ open: (visible: boolean) => any;
80
+ }, string, {
81
+ visible: boolean;
82
+ customClass: string | string[];
83
+ }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
84
+ beforeCreate?: (() => void) | (() => void)[];
85
+ created?: (() => void) | (() => void)[];
86
+ beforeMount?: (() => void) | (() => void)[];
87
+ mounted?: (() => void) | (() => void)[];
88
+ beforeUpdate?: (() => void) | (() => void)[];
89
+ updated?: (() => void) | (() => void)[];
90
+ activated?: (() => void) | (() => void)[];
91
+ deactivated?: (() => void) | (() => void)[];
92
+ beforeDestroy?: (() => void) | (() => void)[];
93
+ beforeUnmount?: (() => void) | (() => void)[];
94
+ destroyed?: (() => void) | (() => void)[];
95
+ unmounted?: (() => void) | (() => void)[];
96
+ renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
97
+ renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
98
+ errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
99
+ };
100
+ $forceUpdate: () => void;
101
+ $nextTick: nextTick;
102
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
103
+ } & Readonly<{
104
+ visible: boolean;
105
+ customClass: string | string[];
106
+ }> & Omit<Readonly<{
107
+ id?: string;
108
+ customClass?: string | string[];
109
+ visible?: boolean;
110
+ }> & Readonly<{
111
+ onClose?: ((visible: boolean) => any) | undefined;
112
+ onOpen?: ((visible: boolean) => any) | undefined;
113
+ }>, "visible" | "customClass" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
114
+ toggle: () => void;
115
+ open: () => void;
116
+ close: () => void;
117
+ }> & {} & ComponentCustomProperties & {} & {
118
+ $slots: Readonly<{
119
+ default: any;
120
+ }> & {
121
+ default: any;
122
+ };
123
+ }) | null;
124
+ }, HTMLDivElement>;
26
125
 
27
126
  declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
28
127
  "collapse-open": (visible: boolean, title: string) => any;
@@ -38,15 +137,98 @@ titleColor: ColorPalette;
38
137
  visible: boolean;
39
138
  iconColor: ColorPalette;
40
139
  bgColor: ColorPalette;
41
- btnColor: ColorPalette;
42
- displayShadow: boolean;
43
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
140
+ triggerBgColor: ColorPalette;
141
+ showShadow: boolean;
142
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {
143
+ collapseRef: ({
144
+ $: ComponentInternalInstance;
145
+ $data: {};
146
+ $props: {
147
+ readonly id?: string | undefined;
148
+ readonly customClass?: string | string[] | undefined;
149
+ readonly visible?: boolean | undefined;
150
+ readonly onClose?: ((visible: boolean) => any) | undefined | undefined;
151
+ readonly onOpen?: ((visible: boolean) => any) | undefined | undefined;
152
+ } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
153
+ $attrs: {
154
+ [x: string]: unknown;
155
+ };
156
+ $refs: {
157
+ [x: string]: unknown;
158
+ };
159
+ $slots: Readonly<{
160
+ [name: string]: Slot<any> | undefined;
161
+ }>;
162
+ $root: ComponentPublicInstance | null;
163
+ $parent: ComponentPublicInstance | null;
164
+ $host: Element | null;
165
+ $emit: ((event: "open", visible: boolean) => void) & ((event: "close", visible: boolean) => void);
166
+ $el: HTMLDivElement;
167
+ $options: ComponentOptionsBase<Readonly<{
168
+ id?: string;
169
+ customClass?: string | string[];
170
+ visible?: boolean;
171
+ }> & Readonly<{
172
+ onClose?: ((visible: boolean) => any) | undefined;
173
+ onOpen?: ((visible: boolean) => any) | undefined;
174
+ }>, {
175
+ toggle: () => void;
176
+ open: () => void;
177
+ close: () => void;
178
+ }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
179
+ close: (visible: boolean) => any;
180
+ open: (visible: boolean) => any;
181
+ }, string, {
182
+ visible: boolean;
183
+ customClass: string | string[];
184
+ }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
185
+ beforeCreate?: (() => void) | (() => void)[];
186
+ created?: (() => void) | (() => void)[];
187
+ beforeMount?: (() => void) | (() => void)[];
188
+ mounted?: (() => void) | (() => void)[];
189
+ beforeUpdate?: (() => void) | (() => void)[];
190
+ updated?: (() => void) | (() => void)[];
191
+ activated?: (() => void) | (() => void)[];
192
+ deactivated?: (() => void) | (() => void)[];
193
+ beforeDestroy?: (() => void) | (() => void)[];
194
+ beforeUnmount?: (() => void) | (() => void)[];
195
+ destroyed?: (() => void) | (() => void)[];
196
+ unmounted?: (() => void) | (() => void)[];
197
+ renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
198
+ renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
199
+ errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
200
+ };
201
+ $forceUpdate: () => void;
202
+ $nextTick: nextTick;
203
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
204
+ } & Readonly<{
205
+ visible: boolean;
206
+ customClass: string | string[];
207
+ }> & Omit<Readonly<{
208
+ id?: string;
209
+ customClass?: string | string[];
210
+ visible?: boolean;
211
+ }> & Readonly<{
212
+ onClose?: ((visible: boolean) => any) | undefined;
213
+ onOpen?: ((visible: boolean) => any) | undefined;
214
+ }>, "visible" | "customClass" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
215
+ toggle: () => void;
216
+ open: () => void;
217
+ close: () => void;
218
+ }> & {} & ComponentCustomProperties & {} & {
219
+ $slots: Readonly<{
220
+ default: any;
221
+ }> & {
222
+ default: any;
223
+ };
224
+ }) | null;
225
+ }, HTMLDivElement>;
44
226
 
45
227
  declare type __VLS_Props = {
46
228
  collapseId: string;
47
229
  borderColor?: ColorPalette;
48
230
  rounded?: boolean;
49
- displayHighlight?: boolean;
231
+ showHighlight?: boolean;
50
232
  highlightColor?: ColorPalette;
51
233
  title: string;
52
234
  titleSize?: HeadingSize;
@@ -54,8 +236,7 @@ declare type __VLS_Props = {
54
236
  visible?: boolean;
55
237
  iconColor?: ColorPalette;
56
238
  bgColor?: ColorPalette;
57
- slotBgColor?: ColorPalette;
58
- accordion?: string;
239
+ contentBgColor?: ColorPalette;
59
240
  };
60
241
 
61
242
  declare type __VLS_Props_2 = {
@@ -65,12 +246,11 @@ declare type __VLS_Props_2 = {
65
246
  titleSize?: HeadingSize;
66
247
  borderColor?: ColorPalette;
67
248
  bgColor?: ColorPalette;
68
- btnColor?: ColorPalette;
249
+ triggerBgColor?: ColorPalette;
69
250
  iconColor?: ColorPalette;
70
251
  rounded?: boolean;
71
- displayShadow?: boolean;
252
+ showShadow?: boolean;
72
253
  visible?: boolean;
73
- accordion?: string;
74
254
  };
75
255
 
76
256
  declare function __VLS_template(): {
@@ -82,7 +262,90 @@ declare function __VLS_template(): {
82
262
  content: any;
83
263
  tab: any;
84
264
  };
85
- refs: {};
265
+ refs: {
266
+ collapseRef: ({
267
+ $: ComponentInternalInstance;
268
+ $data: {};
269
+ $props: {
270
+ readonly id?: string | undefined;
271
+ readonly customClass?: string | string[] | undefined;
272
+ readonly visible?: boolean | undefined;
273
+ readonly onClose?: ((visible: boolean) => any) | undefined | undefined;
274
+ readonly onOpen?: ((visible: boolean) => any) | undefined | undefined;
275
+ } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
276
+ $attrs: {
277
+ [x: string]: unknown;
278
+ };
279
+ $refs: {
280
+ [x: string]: unknown;
281
+ };
282
+ $slots: Readonly<{
283
+ [name: string]: Slot<any> | undefined;
284
+ }>;
285
+ $root: ComponentPublicInstance | null;
286
+ $parent: ComponentPublicInstance | null;
287
+ $host: Element | null;
288
+ $emit: ((event: "open", visible: boolean) => void) & ((event: "close", visible: boolean) => void);
289
+ $el: HTMLDivElement;
290
+ $options: ComponentOptionsBase<Readonly<{
291
+ id?: string;
292
+ customClass?: string | string[];
293
+ visible?: boolean;
294
+ }> & Readonly<{
295
+ onClose?: ((visible: boolean) => any) | undefined;
296
+ onOpen?: ((visible: boolean) => any) | undefined;
297
+ }>, {
298
+ toggle: () => void;
299
+ open: () => void;
300
+ close: () => void;
301
+ }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
302
+ close: (visible: boolean) => any;
303
+ open: (visible: boolean) => any;
304
+ }, string, {
305
+ visible: boolean;
306
+ customClass: string | string[];
307
+ }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
308
+ beforeCreate?: (() => void) | (() => void)[];
309
+ created?: (() => void) | (() => void)[];
310
+ beforeMount?: (() => void) | (() => void)[];
311
+ mounted?: (() => void) | (() => void)[];
312
+ beforeUpdate?: (() => void) | (() => void)[];
313
+ updated?: (() => void) | (() => void)[];
314
+ activated?: (() => void) | (() => void)[];
315
+ deactivated?: (() => void) | (() => void)[];
316
+ beforeDestroy?: (() => void) | (() => void)[];
317
+ beforeUnmount?: (() => void) | (() => void)[];
318
+ destroyed?: (() => void) | (() => void)[];
319
+ unmounted?: (() => void) | (() => void)[];
320
+ renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
321
+ renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
322
+ errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
323
+ };
324
+ $forceUpdate: () => void;
325
+ $nextTick: nextTick;
326
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
327
+ } & Readonly<{
328
+ visible: boolean;
329
+ customClass: string | string[];
330
+ }> & Omit<Readonly<{
331
+ id?: string;
332
+ customClass?: string | string[];
333
+ visible?: boolean;
334
+ }> & Readonly<{
335
+ onClose?: ((visible: boolean) => any) | undefined;
336
+ onOpen?: ((visible: boolean) => any) | undefined;
337
+ }>, "visible" | "customClass" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
338
+ toggle: () => void;
339
+ open: () => void;
340
+ close: () => void;
341
+ }> & {} & ComponentCustomProperties & {} & {
342
+ $slots: Readonly<{
343
+ default: any;
344
+ }> & {
345
+ default: any;
346
+ };
347
+ }) | null;
348
+ };
86
349
  rootEl: HTMLDivElement;
87
350
  };
88
351
 
@@ -93,7 +356,90 @@ declare function __VLS_template_2(): {
93
356
  }> & {
94
357
  default: any;
95
358
  };
96
- refs: {};
359
+ refs: {
360
+ collapseRef: ({
361
+ $: ComponentInternalInstance;
362
+ $data: {};
363
+ $props: {
364
+ readonly id?: string | undefined;
365
+ readonly customClass?: string | string[] | undefined;
366
+ readonly visible?: boolean | undefined;
367
+ readonly onClose?: ((visible: boolean) => any) | undefined | undefined;
368
+ readonly onOpen?: ((visible: boolean) => any) | undefined | undefined;
369
+ } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
370
+ $attrs: {
371
+ [x: string]: unknown;
372
+ };
373
+ $refs: {
374
+ [x: string]: unknown;
375
+ };
376
+ $slots: Readonly<{
377
+ [name: string]: Slot<any> | undefined;
378
+ }>;
379
+ $root: ComponentPublicInstance | null;
380
+ $parent: ComponentPublicInstance | null;
381
+ $host: Element | null;
382
+ $emit: ((event: "open", visible: boolean) => void) & ((event: "close", visible: boolean) => void);
383
+ $el: HTMLDivElement;
384
+ $options: ComponentOptionsBase<Readonly<{
385
+ id?: string;
386
+ customClass?: string | string[];
387
+ visible?: boolean;
388
+ }> & Readonly<{
389
+ onClose?: ((visible: boolean) => any) | undefined;
390
+ onOpen?: ((visible: boolean) => any) | undefined;
391
+ }>, {
392
+ toggle: () => void;
393
+ open: () => void;
394
+ close: () => void;
395
+ }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
396
+ close: (visible: boolean) => any;
397
+ open: (visible: boolean) => any;
398
+ }, string, {
399
+ visible: boolean;
400
+ customClass: string | string[];
401
+ }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
402
+ beforeCreate?: (() => void) | (() => void)[];
403
+ created?: (() => void) | (() => void)[];
404
+ beforeMount?: (() => void) | (() => void)[];
405
+ mounted?: (() => void) | (() => void)[];
406
+ beforeUpdate?: (() => void) | (() => void)[];
407
+ updated?: (() => void) | (() => void)[];
408
+ activated?: (() => void) | (() => void)[];
409
+ deactivated?: (() => void) | (() => void)[];
410
+ beforeDestroy?: (() => void) | (() => void)[];
411
+ beforeUnmount?: (() => void) | (() => void)[];
412
+ destroyed?: (() => void) | (() => void)[];
413
+ unmounted?: (() => void) | (() => void)[];
414
+ renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
415
+ renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
416
+ errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
417
+ };
418
+ $forceUpdate: () => void;
419
+ $nextTick: nextTick;
420
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
421
+ } & Readonly<{
422
+ visible: boolean;
423
+ customClass: string | string[];
424
+ }> & Omit<Readonly<{
425
+ id?: string;
426
+ customClass?: string | string[];
427
+ visible?: boolean;
428
+ }> & Readonly<{
429
+ onClose?: ((visible: boolean) => any) | undefined;
430
+ onOpen?: ((visible: boolean) => any) | undefined;
431
+ }>, "visible" | "customClass" | "toggle" | "open" | "close"> & ShallowUnwrapRef< {
432
+ toggle: () => void;
433
+ open: () => void;
434
+ close: () => void;
435
+ }> & {} & ComponentCustomProperties & {} & {
436
+ $slots: Readonly<{
437
+ default: any;
438
+ }> & {
439
+ default: any;
440
+ };
441
+ }) | null;
442
+ };
97
443
  rootEl: HTMLDivElement;
98
444
  };
99
445