edvoyui-component-library-test-flight 0.0.110 → 0.0.111
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=script&setup=true&lang.ts";
|
|
2
|
-
import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=
|
|
2
|
+
import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=c12052b6&lang.css";
|
|
3
3
|
declare const _default: any;
|
|
4
4
|
export default _default;
|
|
5
5
|
//# sourceMappingURL=EUITabs.vue.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,87 +1,98 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
<div
|
|
4
|
+
v-if="tabStyle === 'design'"
|
|
5
|
+
class="flex flex-row items-center justify-between w-full p-2 bg-gray-100 rounded-xl"
|
|
6
|
+
>
|
|
7
|
+
<button
|
|
8
|
+
v-for="(tab, tabindex) in tabs"
|
|
9
|
+
:disabled="tab?.disabled"
|
|
10
|
+
:key="tabindex"
|
|
11
|
+
:id="`id-${tab.name}`"
|
|
12
|
+
type="button"
|
|
13
|
+
class="[&:not(:focus-visible)]:focus:outline-none relative w-full inline-flex items-center transition-colors duration-100"
|
|
14
|
+
:class="tab?.disabled ? ' cursor-not-allowed ' : ''"
|
|
15
|
+
role="tab"
|
|
16
|
+
tabindex="-1"
|
|
17
|
+
@click="selectTab(tabindex)"
|
|
18
|
+
:title="tab?.toolTipText"
|
|
6
19
|
>
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
20
|
+
<div
|
|
21
|
+
class="pointer-events-none absolute inset-0 transition-transform duration-200 transform z-[1] ease-in-out"
|
|
22
|
+
:class="{
|
|
23
|
+
'translate-x-full': tabindex < activeTabIndex,
|
|
24
|
+
'-translate-x-full': tabindex > activeTabIndex,
|
|
25
|
+
'translate-x-0 rounded-lg bg-gray-600': activeTabIndex === tabindex,
|
|
26
|
+
}"
|
|
27
|
+
/>
|
|
28
|
+
<span
|
|
29
|
+
:class="[
|
|
30
|
+
'w-full px-4 py-2 text-sm tracking-wide font-medium capitalize z-10',
|
|
31
|
+
activeTabIndex == tabindex
|
|
32
|
+
? ' text-white'
|
|
33
|
+
: ' text-gray-500 hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
|
|
34
|
+
]"
|
|
18
35
|
>
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
'translate-x-0 rounded-lg bg-gray-600':
|
|
25
|
-
activeTabIndex === tabindex,
|
|
26
|
-
}"
|
|
27
|
-
/>
|
|
28
|
-
<span
|
|
29
|
-
:class="[
|
|
30
|
-
'w-full px-4 py-2 text-sm tracking-wide font-medium capitalize z-10',
|
|
31
|
-
activeTabIndex == tabindex
|
|
32
|
-
? ' text-white'
|
|
33
|
-
: ' text-gray-500 hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
|
|
34
|
-
]"
|
|
36
|
+
<slot
|
|
37
|
+
name="title"
|
|
38
|
+
:tab="tab"
|
|
39
|
+
:tabIndex="tabindex"
|
|
40
|
+
:activeTab="activeTabIndex"
|
|
35
41
|
>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
{{ tab?.name }}
|
|
43
|
+
</slot>
|
|
44
|
+
</span>
|
|
45
|
+
</button>
|
|
46
|
+
</div>
|
|
47
|
+
<div
|
|
48
|
+
v-else-if="tabStyle === 'border'"
|
|
49
|
+
class="flex items-center gap-1 before:bottom-0 before:left-0 before:absolute before:content-[''] before:h-px before:w-full before:bg-gray-200 relative before:-z-[1] z-0 bg-white"
|
|
50
|
+
:class="[
|
|
51
|
+
tabAlign === 'justify'
|
|
52
|
+
? 'justify-between'
|
|
53
|
+
: tabAlign === 'end'
|
|
54
|
+
? 'justify-end'
|
|
55
|
+
: 'justify-start',
|
|
56
|
+
]"
|
|
57
|
+
>
|
|
58
|
+
<button
|
|
59
|
+
v-for="(tab, tabindex) in tabs"
|
|
60
|
+
:disabled="tab?.disabled"
|
|
61
|
+
:title="tab?.toolTipText"
|
|
62
|
+
:key="tabindex"
|
|
63
|
+
type="button"
|
|
64
|
+
role="tab"
|
|
65
|
+
:id="`id-${tab.name}`"
|
|
45
66
|
:class="[
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
67
|
+
'px-3 py-1 leading-5 transition-all duration-150 ease-in-out hover:text-gray-800',
|
|
68
|
+
tabSize === 'sm'
|
|
69
|
+
? 'text-sm font-semibold border-b-2'
|
|
70
|
+
: 'text-base font-bold border-b-[3px]',
|
|
71
|
+
activeTabIndex === tabindex
|
|
72
|
+
? 'border-gray-900 text-gray-900'
|
|
73
|
+
: 'border-transparent text-gray-500',
|
|
74
|
+
tab?.disabled ? ' cursor-not-allowed ' : '',
|
|
51
75
|
]"
|
|
76
|
+
@click="selectTab(tabindex)"
|
|
52
77
|
>
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
:
|
|
56
|
-
|
|
57
|
-
:
|
|
58
|
-
type="button"
|
|
59
|
-
role="tab"
|
|
60
|
-
:id="`id-${tab.name}`"
|
|
61
|
-
:class="[
|
|
62
|
-
'px-3 py-1 leading-5 transition-all duration-150 ease-in-out hover:text-gray-800',
|
|
63
|
-
tabSize === 'sm'
|
|
64
|
-
? 'text-sm font-semibold border-b-2'
|
|
65
|
-
: 'text-base font-bold border-b-[3px]',
|
|
66
|
-
activeTabIndex === tabindex
|
|
67
|
-
? 'border-gray-900 text-gray-900'
|
|
68
|
-
: 'border-transparent text-gray-500',
|
|
69
|
-
tab?.disabled?' cursor-not-allowed ':''
|
|
70
|
-
]"
|
|
71
|
-
@click="selectTab(tabindex)"
|
|
78
|
+
<slot
|
|
79
|
+
name="title"
|
|
80
|
+
:tab="tab"
|
|
81
|
+
:tabIndex="tabindex"
|
|
82
|
+
:activeTab="activeTabIndex"
|
|
72
83
|
>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<div
|
|
84
|
+
{{ tab?.name }}
|
|
85
|
+
</slot>
|
|
86
|
+
</button>
|
|
87
|
+
</div>
|
|
88
|
+
<div
|
|
79
89
|
v-else-if="tabStyle === 'shadow'"
|
|
80
90
|
class="justify-start relative z-0 inline-flex items-center gap-0 bg-white/50 rounded-t-lg shadow-[0px_1px_2px_0px_rgba(55,65,81,0.10)]"
|
|
81
91
|
>
|
|
82
92
|
<button
|
|
83
93
|
v-for="(tab, tabindex) in tabs"
|
|
84
94
|
:disabled="tab?.disabled"
|
|
95
|
+
:title="tab?.toolTipText"
|
|
85
96
|
:key="tabindex"
|
|
86
97
|
type="button"
|
|
87
98
|
role="tab"
|
|
@@ -94,41 +105,59 @@
|
|
|
94
105
|
activeTabIndex === tabindex
|
|
95
106
|
? 'border-purple-800 text-purple-800 bg-white z-10 rounded-t-lg shadow-[0px_2px_4px_0px_rgba(55,65,81,0.1)]'
|
|
96
107
|
: 'border-transparent text-gray-500 z-0',
|
|
97
|
-
|
|
108
|
+
tab?.disabled ? ' cursor-not-allowed ' : '',
|
|
98
109
|
]"
|
|
99
110
|
@click="selectTab(tabindex)"
|
|
100
111
|
>
|
|
101
|
-
<slot
|
|
112
|
+
<slot
|
|
113
|
+
name="title"
|
|
114
|
+
:tab="tab"
|
|
115
|
+
:tabIndex="tabindex"
|
|
116
|
+
:activeTab="activeTabIndex"
|
|
117
|
+
>
|
|
102
118
|
{{ tab?.name }}
|
|
103
119
|
</slot>
|
|
104
120
|
</button>
|
|
105
121
|
</div>
|
|
106
122
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
123
|
+
<div v-else class="flex items-center gap-1 p-2 transition-all duration-100">
|
|
124
|
+
<button
|
|
125
|
+
v-for="(tab, tabindex) in tabs"
|
|
126
|
+
:disabled="tab?.disabled"
|
|
127
|
+
:title="tab?.toolTipText"
|
|
128
|
+
:key="tabindex"
|
|
129
|
+
type="button"
|
|
130
|
+
role="tab"
|
|
131
|
+
:id="`id-${tab.name}`"
|
|
132
|
+
class="px-4 py-1 text-sm font-semibold transition-colors duration-150 ease-in-out border rounded-full"
|
|
133
|
+
:class="[
|
|
134
|
+
activeTabIndex === tabindex
|
|
135
|
+
? 'shadow-lg shadow-gray-100 bg-white border-gray-200 focus-within:border-purple-600 text-gray-900'
|
|
136
|
+
: 'border-white hover:bg-gray-50 text-gray-700',
|
|
137
|
+
tab?.disabled ? ' cursor-not-allowed ' : '',
|
|
138
|
+
]"
|
|
139
|
+
@click="selectTab(tabindex)"
|
|
110
140
|
>
|
|
111
|
-
<
|
|
112
|
-
|
|
113
|
-
:
|
|
114
|
-
:
|
|
115
|
-
|
|
116
|
-
role="tab"
|
|
117
|
-
:id="`id-${tab.name}`"
|
|
118
|
-
class="px-4 py-1 text-sm font-semibold transition-colors duration-150 ease-in-out border rounded-full"
|
|
119
|
-
:class="
|
|
120
|
-
[ activeTabIndex === tabindex
|
|
121
|
-
? 'shadow-lg shadow-gray-100 bg-white border-gray-200 focus-within:border-purple-600 text-gray-900'
|
|
122
|
-
: 'border-white hover:bg-gray-50 text-gray-700',tab?.disabled?' cursor-not-allowed ':'']
|
|
123
|
-
"
|
|
124
|
-
@click="selectTab(tabindex)"
|
|
141
|
+
<slot
|
|
142
|
+
name="title"
|
|
143
|
+
:tab="tab"
|
|
144
|
+
:tabIndex="tabindex"
|
|
145
|
+
:activeTab="activeTabIndex"
|
|
125
146
|
>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
147
|
+
{{ tab?.name }}
|
|
148
|
+
</slot>
|
|
149
|
+
</button>
|
|
150
|
+
</div>
|
|
151
|
+
<div
|
|
152
|
+
:class="[
|
|
153
|
+
'py-2 text-base font-normal text-gray-700 bg-white relative',
|
|
154
|
+
contentClass,
|
|
155
|
+
{
|
|
156
|
+
'rounded-lg !rounded-tl-none shadow-[0px_-2px_24px_0px_rgba(0,0,0,0.075)] z-20':
|
|
157
|
+
tabStyle === 'shadow',
|
|
158
|
+
},
|
|
159
|
+
]"
|
|
160
|
+
>
|
|
132
161
|
<slot name="content" :active-tab="tabs[activeTabIndex]">
|
|
133
162
|
{{ tabs[activeTabIndex]?.content }}
|
|
134
163
|
</slot>
|
|
@@ -142,7 +171,8 @@ import { defineProps, ref, watch } from "vue";
|
|
|
142
171
|
interface Tab {
|
|
143
172
|
name: string;
|
|
144
173
|
content?: string;
|
|
145
|
-
disabled?:boolean
|
|
174
|
+
disabled?: boolean;
|
|
175
|
+
toolTipText?: string;
|
|
146
176
|
}
|
|
147
177
|
|
|
148
178
|
const props = defineProps<{
|
|
@@ -152,7 +182,6 @@ const props = defineProps<{
|
|
|
152
182
|
contentClass?: string[] | string;
|
|
153
183
|
tabSize?: "sm" | "md";
|
|
154
184
|
tabAlign?: "start" | "justify" | "end";
|
|
155
|
-
|
|
156
185
|
}>();
|
|
157
186
|
|
|
158
187
|
const emit = defineEmits<{
|