pukaad-ui-lib 1.11.0 → 1.12.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/module.json
CHANGED
|
@@ -11,7 +11,7 @@ declare var __VLS_6: {
|
|
|
11
11
|
type __VLS_Slots = {} & {
|
|
12
12
|
header?: (props: typeof __VLS_6) => any;
|
|
13
13
|
} & {
|
|
14
|
-
|
|
14
|
+
content?: (props: typeof __VLS_8) => any;
|
|
15
15
|
} & {
|
|
16
16
|
default?: (props: typeof __VLS_10) => any;
|
|
17
17
|
};
|
|
@@ -1,39 +1,49 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="flex
|
|
3
|
-
<!--
|
|
4
|
-
<div class="
|
|
5
|
-
<!--
|
|
6
|
-
<div
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<!-- Toggle Button (at top, aligned with header) -->
|
|
11
|
-
<button
|
|
12
|
-
class="relative z-10 flex items-center justify-center w-5 h-5 mt-0.5 rounded border-2 border-primary text-primary bg-white shrink-0 transition-colors"
|
|
13
|
-
@click.stop="isOpen = !isOpen"
|
|
14
|
-
>
|
|
15
|
-
<Icon
|
|
16
|
-
:name="isOpen ? 'lucide:chevron-down' : 'lucide:chevron-right'"
|
|
17
|
-
:size="12"
|
|
2
|
+
<div class="flex flex-col">
|
|
3
|
+
<!-- Header Row with Toggle -->
|
|
4
|
+
<div class="flex items-center">
|
|
5
|
+
<!-- Tree Line Indicator -->
|
|
6
|
+
<div class="relative w-6 shrink-0 mr-4 self-stretch">
|
|
7
|
+
<!-- Dashed line (full height) -->
|
|
8
|
+
<div
|
|
9
|
+
class="absolute left-[11px] top-0 bottom-0 w-0 h-full border-l-2 border-dashed border-gray-300"
|
|
18
10
|
/>
|
|
19
|
-
</button>
|
|
20
|
-
</div>
|
|
21
11
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
12
|
+
<!-- Toggle Button (centered with header) -->
|
|
13
|
+
<button
|
|
14
|
+
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-5 h-5 rounded border-2 border-primary text-primary bg-white shrink-0 transition-colors"
|
|
15
|
+
@click.stop="isOpen = !isOpen"
|
|
16
|
+
>
|
|
17
|
+
<Icon
|
|
18
|
+
:name="isOpen ? 'lucide:chevron-down' : 'lucide:chevron-right'"
|
|
19
|
+
:size="12"
|
|
20
|
+
/>
|
|
21
|
+
</button>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<!-- Header Content -->
|
|
25
25
|
<div
|
|
26
|
-
class="flex items-center gap-3 cursor-pointer select-none"
|
|
26
|
+
class="flex-1 min-w-0 flex items-center gap-3 cursor-pointer select-none"
|
|
27
27
|
@click="isOpen = !isOpen"
|
|
28
28
|
>
|
|
29
29
|
<div class="flex-1 min-w-0">
|
|
30
30
|
<slot name="header" :open="isOpen" />
|
|
31
31
|
</div>
|
|
32
|
-
<slot name="
|
|
32
|
+
<slot name="content" :open="isOpen" />
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<!-- Children (shown when open) -->
|
|
37
|
+
<div v-if="isOpen" class="flex">
|
|
38
|
+
<!-- Continuation of dashed line -->
|
|
39
|
+
<div class="relative w-6 shrink-0 mr-4">
|
|
40
|
+
<div
|
|
41
|
+
class="absolute left-[11px] top-0 bottom-0 w-0 h-full border-l-2 border-dashed border-gray-300"
|
|
42
|
+
/>
|
|
33
43
|
</div>
|
|
34
44
|
|
|
35
|
-
<!-- Children
|
|
36
|
-
<div
|
|
45
|
+
<!-- Children content -->
|
|
46
|
+
<div class="flex-1 min-w-0 mt-4 flex flex-col gap-4 pb-2">
|
|
37
47
|
<slot :open="isOpen" />
|
|
38
48
|
</div>
|
|
39
49
|
</div>
|
|
@@ -11,7 +11,7 @@ declare var __VLS_6: {
|
|
|
11
11
|
type __VLS_Slots = {} & {
|
|
12
12
|
header?: (props: typeof __VLS_6) => any;
|
|
13
13
|
} & {
|
|
14
|
-
|
|
14
|
+
content?: (props: typeof __VLS_8) => any;
|
|
15
15
|
} & {
|
|
16
16
|
default?: (props: typeof __VLS_10) => any;
|
|
17
17
|
};
|