edvoyui-component-library-test-flight 0.0.109 → 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,84 +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
|
-
|
|
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
|
+
]"
|
|
17
35
|
>
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
'translate-x-0 rounded-lg bg-gray-600':
|
|
24
|
-
activeTabIndex === tabindex,
|
|
25
|
-
}"
|
|
26
|
-
/>
|
|
27
|
-
<span
|
|
28
|
-
:class="[
|
|
29
|
-
'w-full px-4 py-2 text-sm tracking-wide font-medium capitalize z-10',
|
|
30
|
-
activeTabIndex == tabindex
|
|
31
|
-
? ' text-white'
|
|
32
|
-
: ' text-gray-500 hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
|
|
33
|
-
]"
|
|
36
|
+
<slot
|
|
37
|
+
name="title"
|
|
38
|
+
:tab="tab"
|
|
39
|
+
:tabIndex="tabindex"
|
|
40
|
+
:activeTab="activeTabIndex"
|
|
34
41
|
>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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}`"
|
|
44
66
|
:class="[
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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 ' : '',
|
|
50
75
|
]"
|
|
76
|
+
@click="selectTab(tabindex)"
|
|
51
77
|
>
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
:
|
|
55
|
-
:
|
|
56
|
-
|
|
57
|
-
role="tab"
|
|
58
|
-
:id="`id-${tab.name}`"
|
|
59
|
-
:class="[
|
|
60
|
-
'px-3 py-1 leading-5 transition-all duration-150 ease-in-out hover:text-gray-800',
|
|
61
|
-
tabSize === 'sm'
|
|
62
|
-
? 'text-sm font-semibold border-b-2'
|
|
63
|
-
: 'text-base font-bold border-b-[3px]',
|
|
64
|
-
activeTabIndex === tabindex
|
|
65
|
-
? 'border-gray-900 text-gray-900'
|
|
66
|
-
: 'border-transparent text-gray-500',
|
|
67
|
-
]"
|
|
68
|
-
@click="selectTab(tabindex)"
|
|
78
|
+
<slot
|
|
79
|
+
name="title"
|
|
80
|
+
:tab="tab"
|
|
81
|
+
:tabIndex="tabindex"
|
|
82
|
+
:activeTab="activeTabIndex"
|
|
69
83
|
>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<div
|
|
84
|
+
{{ tab?.name }}
|
|
85
|
+
</slot>
|
|
86
|
+
</button>
|
|
87
|
+
</div>
|
|
88
|
+
<div
|
|
76
89
|
v-else-if="tabStyle === 'shadow'"
|
|
77
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)]"
|
|
78
91
|
>
|
|
79
92
|
<button
|
|
80
93
|
v-for="(tab, tabindex) in tabs"
|
|
81
94
|
:disabled="tab?.disabled"
|
|
95
|
+
:title="tab?.toolTipText"
|
|
82
96
|
:key="tabindex"
|
|
83
97
|
type="button"
|
|
84
98
|
role="tab"
|
|
@@ -91,40 +105,59 @@
|
|
|
91
105
|
activeTabIndex === tabindex
|
|
92
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)]'
|
|
93
107
|
: 'border-transparent text-gray-500 z-0',
|
|
108
|
+
tab?.disabled ? ' cursor-not-allowed ' : '',
|
|
94
109
|
]"
|
|
95
110
|
@click="selectTab(tabindex)"
|
|
96
111
|
>
|
|
97
|
-
<slot
|
|
112
|
+
<slot
|
|
113
|
+
name="title"
|
|
114
|
+
:tab="tab"
|
|
115
|
+
:tabIndex="tabindex"
|
|
116
|
+
:activeTab="activeTabIndex"
|
|
117
|
+
>
|
|
98
118
|
{{ tab?.name }}
|
|
99
119
|
</slot>
|
|
100
120
|
</button>
|
|
101
121
|
</div>
|
|
102
122
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
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)"
|
|
106
140
|
>
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
:
|
|
110
|
-
:
|
|
111
|
-
|
|
112
|
-
role="tab"
|
|
113
|
-
:id="`id-${tab.name}`"
|
|
114
|
-
class="px-4 py-1 text-sm font-semibold transition-colors duration-150 ease-in-out border rounded-full"
|
|
115
|
-
:class="
|
|
116
|
-
activeTabIndex === tabindex
|
|
117
|
-
? 'shadow-lg shadow-gray-100 bg-white border-gray-200 focus-within:border-purple-600 text-gray-900'
|
|
118
|
-
: 'border-white hover:bg-gray-50 text-gray-700'
|
|
119
|
-
"
|
|
120
|
-
@click="selectTab(tabindex)"
|
|
141
|
+
<slot
|
|
142
|
+
name="title"
|
|
143
|
+
:tab="tab"
|
|
144
|
+
:tabIndex="tabindex"
|
|
145
|
+
:activeTab="activeTabIndex"
|
|
121
146
|
>
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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
|
+
>
|
|
128
161
|
<slot name="content" :active-tab="tabs[activeTabIndex]">
|
|
129
162
|
{{ tabs[activeTabIndex]?.content }}
|
|
130
163
|
</slot>
|
|
@@ -138,7 +171,8 @@ import { defineProps, ref, watch } from "vue";
|
|
|
138
171
|
interface Tab {
|
|
139
172
|
name: string;
|
|
140
173
|
content?: string;
|
|
141
|
-
disabled?:boolean
|
|
174
|
+
disabled?: boolean;
|
|
175
|
+
toolTipText?: string;
|
|
142
176
|
}
|
|
143
177
|
|
|
144
178
|
const props = defineProps<{
|
|
@@ -148,7 +182,6 @@ const props = defineProps<{
|
|
|
148
182
|
contentClass?: string[] | string;
|
|
149
183
|
tabSize?: "sm" | "md";
|
|
150
184
|
tabAlign?: "start" | "justify" | "end";
|
|
151
|
-
|
|
152
185
|
}>();
|
|
153
186
|
|
|
154
187
|
const emit = defineEmits<{
|