@fiscozen/tab 0.1.12 → 2.0.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/CHANGELOG.md +37 -0
- package/dist/src/__test__/FzTabs.test.d.ts +1 -0
- package/dist/tab.js +117 -117
- package/dist/tab.umd.cjs +1 -1
- package/package.json +6 -5
- package/src/FzTabs.vue +101 -57
- package/src/__tests__/FzTabs.spec.ts +851 -571
- package/src/__tests__/__snapshots__/FzTabs.spec.ts.snap +154 -46
- package/src/common.ts +35 -10
- package/src/components/FzTabButton.vue +72 -22
- package/src/components/FzTabPicker.vue +31 -25
- package/src/types.ts +29 -2
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
2
|
|
|
3
3
|
exports[`FzTabs > Snapshots > should match snapshot - default state 1`] = `
|
|
4
|
-
"<div
|
|
5
|
-
<div
|
|
6
|
-
<div
|
|
7
|
-
<!--v-if--><span class="text-ellipsis
|
|
4
|
+
"<div class="flex flex-col">
|
|
5
|
+
<div class="flex flex-row">
|
|
6
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1">
|
|
7
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
8
8
|
<!--v-if-->
|
|
9
|
-
</button><button
|
|
10
|
-
<!--v-if--><span class="text-ellipsis
|
|
9
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
10
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
11
11
|
<!--v-if-->
|
|
12
12
|
</button></div>
|
|
13
13
|
</div>Content tab1
|
|
@@ -16,13 +16,43 @@ exports[`FzTabs > Snapshots > should match snapshot - default state 1`] = `
|
|
|
16
16
|
`;
|
|
17
17
|
|
|
18
18
|
exports[`FzTabs > Snapshots > should match snapshot - disabled tab 1`] = `
|
|
19
|
-
"<div
|
|
20
|
-
<div
|
|
21
|
-
<div
|
|
22
|
-
<!--v-if--><span class="text-ellipsis
|
|
19
|
+
"<div class="flex flex-col">
|
|
20
|
+
<div class="flex flex-row">
|
|
21
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-not-allowed" title="tab1" disabled="">
|
|
22
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
23
23
|
<!--v-if-->
|
|
24
|
-
</button><button
|
|
25
|
-
<!--v-if--><span class="text-ellipsis
|
|
24
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
25
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
26
|
+
<!--v-if-->
|
|
27
|
+
</button></div>
|
|
28
|
+
</div>Content tab1
|
|
29
|
+
<!--v-if-->
|
|
30
|
+
</div>"
|
|
31
|
+
`;
|
|
32
|
+
|
|
33
|
+
exports[`FzTabs > Snapshots > should match snapshot - environment backoffice 1`] = `
|
|
34
|
+
"<div class="flex flex-col">
|
|
35
|
+
<div class="flex flex-row">
|
|
36
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1">
|
|
37
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
38
|
+
<!--v-if-->
|
|
39
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
40
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
41
|
+
<!--v-if-->
|
|
42
|
+
</button></div>
|
|
43
|
+
</div>Content tab1
|
|
44
|
+
<!--v-if-->
|
|
45
|
+
</div>"
|
|
46
|
+
`;
|
|
47
|
+
|
|
48
|
+
exports[`FzTabs > Snapshots > should match snapshot - environment frontoffice 1`] = `
|
|
49
|
+
"<div class="flex flex-col">
|
|
50
|
+
<div class="flex flex-row">
|
|
51
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-48 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1">
|
|
52
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
53
|
+
<!--v-if-->
|
|
54
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-48 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
55
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
26
56
|
<!--v-if-->
|
|
27
57
|
</button></div>
|
|
28
58
|
</div>Content tab1
|
|
@@ -31,13 +61,13 @@ exports[`FzTabs > Snapshots > should match snapshot - disabled tab 1`] = `
|
|
|
31
61
|
`;
|
|
32
62
|
|
|
33
63
|
exports[`FzTabs > Snapshots > should match snapshot - md size 1`] = `
|
|
34
|
-
"<div
|
|
35
|
-
<div
|
|
36
|
-
<div
|
|
37
|
-
<!--v-if--><span class="text-ellipsis
|
|
64
|
+
"<div class="flex flex-col">
|
|
65
|
+
<div class="flex flex-row">
|
|
66
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-48 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1">
|
|
67
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
38
68
|
<!--v-if-->
|
|
39
|
-
</button><button
|
|
40
|
-
<!--v-if--><span class="text-ellipsis
|
|
69
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-48 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
70
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
41
71
|
<!--v-if-->
|
|
42
72
|
</button></div>
|
|
43
73
|
</div>Content tab1
|
|
@@ -46,13 +76,13 @@ exports[`FzTabs > Snapshots > should match snapshot - md size 1`] = `
|
|
|
46
76
|
`;
|
|
47
77
|
|
|
48
78
|
exports[`FzTabs > Snapshots > should match snapshot - tab change 1`] = `
|
|
49
|
-
"<div
|
|
50
|
-
<div
|
|
51
|
-
<div
|
|
52
|
-
<!--v-if--><span class="text-ellipsis
|
|
79
|
+
"<div class="flex flex-col">
|
|
80
|
+
<div class="flex flex-row">
|
|
81
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab1">
|
|
82
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
53
83
|
<!--v-if-->
|
|
54
|
-
</button><button
|
|
55
|
-
<!--v-if--><span class="text-ellipsis
|
|
84
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab2">
|
|
85
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
56
86
|
<!--v-if-->
|
|
57
87
|
</button></div>
|
|
58
88
|
</div>
|
|
@@ -60,14 +90,95 @@ exports[`FzTabs > Snapshots > should match snapshot - tab change 1`] = `
|
|
|
60
90
|
</div>"
|
|
61
91
|
`;
|
|
62
92
|
|
|
93
|
+
exports[`FzTabs > Snapshots > should match snapshot - tabStyle picker 1`] = `
|
|
94
|
+
"<div class="flex flex-col">
|
|
95
|
+
<div class="flex flex-row">
|
|
96
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row">
|
|
97
|
+
<div class="w-full overflow-hidden">
|
|
98
|
+
<div class="inline-flex w-full sm:w-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer w-full sm:w-auto" title="tab1" initialselected="true" data-testid="fz-tab-picker-opener">
|
|
99
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
100
|
+
<!--v-if--><span role="presentation" class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-chevron-down h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M239 401c9.4 9.4 24.6 9.4 33.9 0L465 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L81 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 401z"></path></svg></span>
|
|
101
|
+
</button></div>
|
|
102
|
+
<div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mt-4 bg-transparent z-70" style="display: none;">
|
|
103
|
+
<div data-v-ca7f3405="" class="fz__actionlist bg-core-white rounded flex flex-col gap-20 p-4 min-w-[240px]">
|
|
104
|
+
<div class="flex flex-col gap-4" role="group" aria-labelledby="fz-action-section-label-2a84k84">
|
|
105
|
+
<!--v-if--><button data-v-f322a564="" aria-disabled="false" aria-selected="false" type="button" class="group inline-flex max-w-full rounded border border-transparent border-2 transition-colors duration-200 gap-2 px-12 py-6 flex-row gap-8 text-core-black hover:bg-background-alice-blue hover:!text-blue-500 focus:!border-blue-200 focus:!outline-none focus:text-core-black">
|
|
106
|
+
<!--v-if-->
|
|
107
|
+
<div data-v-f322a564="" class="flex flex-1 flex-col gap-4 overflow-hidden"><span data-v-f322a564="" class="text-base text-left" title="tab1">tab1</span>
|
|
108
|
+
<!--v-if-->
|
|
109
|
+
</div>
|
|
110
|
+
<!--v-if-->
|
|
111
|
+
</button><button data-v-f322a564="" aria-disabled="false" aria-selected="false" type="button" class="group inline-flex max-w-full rounded border border-transparent border-2 transition-colors duration-200 gap-2 px-12 py-6 flex-row gap-8 text-core-black hover:bg-background-alice-blue hover:!text-blue-500 focus:!border-blue-200 focus:!outline-none focus:text-core-black">
|
|
112
|
+
<!--v-if-->
|
|
113
|
+
<div data-v-f322a564="" class="flex flex-1 flex-col gap-4 overflow-hidden"><span data-v-f322a564="" class="text-base text-left" title="tab2">tab2</span>
|
|
114
|
+
<!--v-if-->
|
|
115
|
+
</div>
|
|
116
|
+
<!--v-if-->
|
|
117
|
+
</button>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
<!--v-if-->
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>Content tab1
|
|
125
|
+
<!--v-if-->
|
|
126
|
+
</div>"
|
|
127
|
+
`;
|
|
128
|
+
|
|
129
|
+
exports[`FzTabs > Snapshots > should match snapshot - tabStyle scroll 1`] = `
|
|
130
|
+
"<div class="flex flex-col">
|
|
131
|
+
<div class="flex flex-row">
|
|
132
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1">
|
|
133
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
134
|
+
<!--v-if-->
|
|
135
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
136
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
137
|
+
<!--v-if-->
|
|
138
|
+
</button></div>
|
|
139
|
+
</div>Content tab1
|
|
140
|
+
<!--v-if-->
|
|
141
|
+
</div>"
|
|
142
|
+
`;
|
|
143
|
+
|
|
144
|
+
exports[`FzTabs > Snapshots > should match snapshot - tone alert 1`] = `
|
|
145
|
+
"<div class="flex flex-col" tone="alert">
|
|
146
|
+
<div class="flex flex-row">
|
|
147
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1">
|
|
148
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
149
|
+
<!--v-if-->
|
|
150
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
151
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
152
|
+
<!--v-if-->
|
|
153
|
+
</button></div>
|
|
154
|
+
</div>Content tab1
|
|
155
|
+
<!--v-if-->
|
|
156
|
+
</div>"
|
|
157
|
+
`;
|
|
158
|
+
|
|
159
|
+
exports[`FzTabs > Snapshots > should match snapshot - tone neutral 1`] = `
|
|
160
|
+
"<div class="flex flex-col" tone="neutral">
|
|
161
|
+
<div class="flex flex-row">
|
|
162
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1">
|
|
163
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
164
|
+
<!--v-if-->
|
|
165
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
166
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
167
|
+
<!--v-if-->
|
|
168
|
+
</button></div>
|
|
169
|
+
</div>Content tab1
|
|
170
|
+
<!--v-if-->
|
|
171
|
+
</div>"
|
|
172
|
+
`;
|
|
173
|
+
|
|
63
174
|
exports[`FzTabs > Snapshots > should match snapshot - vertical direction 1`] = `
|
|
64
|
-
"<div
|
|
65
|
-
<div
|
|
66
|
-
<div
|
|
67
|
-
<!--v-if--><span class="text-ellipsis
|
|
175
|
+
"<div class="flex flex-row">
|
|
176
|
+
<div class="flex flex-col">
|
|
177
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-col overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1">
|
|
178
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
68
179
|
<!--v-if-->
|
|
69
|
-
</button><button
|
|
70
|
-
<!--v-if--><span class="text-ellipsis
|
|
180
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
181
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
71
182
|
<!--v-if-->
|
|
72
183
|
</button></div>
|
|
73
184
|
</div>Content tab1
|
|
@@ -76,17 +187,17 @@ exports[`FzTabs > Snapshots > should match snapshot - vertical direction 1`] = `
|
|
|
76
187
|
`;
|
|
77
188
|
|
|
78
189
|
exports[`FzTabs > Snapshots > should match snapshot - with badgeContent 1`] = `
|
|
79
|
-
"<div
|
|
80
|
-
<div
|
|
81
|
-
<div
|
|
82
|
-
<!--v-if--><span class="text-ellipsis
|
|
83
|
-
<div class="flex items-center justify-center truncate max-w-full gap-4 size-24 rounded-full bg-blue-500 text-core-white" title="1">
|
|
190
|
+
"<div class="flex flex-col">
|
|
191
|
+
<div class="flex flex-row">
|
|
192
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1" badgecontent="1">
|
|
193
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
194
|
+
<div class="flex items-center justify-center truncate max-w-full gap-4 size-24 rounded-full bg-blue-500 text-core-white" title="1" environment="backoffice">
|
|
84
195
|
<!--v-if-->
|
|
85
196
|
<p class="text-[inherit] text-sm">1</p>
|
|
86
197
|
<!--v-if-->
|
|
87
198
|
</div>
|
|
88
|
-
</button><button
|
|
89
|
-
<!--v-if--><span class="text-ellipsis
|
|
199
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
200
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
90
201
|
<!--v-if-->
|
|
91
202
|
</button></div>
|
|
92
203
|
</div>Content tab1
|
|
@@ -95,15 +206,12 @@ exports[`FzTabs > Snapshots > should match snapshot - with badgeContent 1`] = `
|
|
|
95
206
|
`;
|
|
96
207
|
|
|
97
208
|
exports[`FzTabs > Snapshots > should match snapshot - with icon 1`] = `
|
|
98
|
-
"<div
|
|
99
|
-
<div
|
|
100
|
-
<div
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<!--v-if-->
|
|
105
|
-
</button><button data-v-97c498eb="" class="w-auto flex font-medium items-center rounded-md text-sm h-40 gap-6 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer max-w-[136px]" title="tab2">
|
|
106
|
-
<!--v-if--><span class="text-ellipsis flex-1 whitespace-nowrap overflow-hidden">tab2</span>
|
|
209
|
+
"<div class="flex flex-col">
|
|
210
|
+
<div class="flex flex-row">
|
|
211
|
+
<div class="tab-container flex rounded-lg p-2 bg-grey-100 w-fit max-w-full w-full sm:w-auto flex-row overflow-x-auto"><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1" icon="bell"><span role="presentation" class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-bell h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bell" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path></svg></span><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
|
|
212
|
+
<!--v-if-->
|
|
213
|
+
</button><button class="flex items-center rounded-md focus:z-10 w-auto text-md h-40 gap-8 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
|
|
214
|
+
<!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
|
|
107
215
|
<!--v-if-->
|
|
108
216
|
</button></div>
|
|
109
217
|
</div>Content tab1
|
package/src/common.ts
CHANGED
|
@@ -1,15 +1,40 @@
|
|
|
1
|
-
export const
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export const mapEnvironmentToClasses = {
|
|
2
|
+
backoffice: "text-md h-40 gap-8 py-8 px-12",
|
|
3
|
+
frontoffice: "text-md h-48 gap-8 py-8 px-12",
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Both backoffice and frontoffice use 'md' size based on design specs
|
|
7
|
+
*/
|
|
8
|
+
export const mapSizeToEnvironment = {
|
|
9
|
+
sm: "backoffice" as const,
|
|
10
|
+
md: "frontoffice" as const,
|
|
4
11
|
};
|
|
5
12
|
|
|
6
|
-
export const
|
|
7
|
-
|
|
8
|
-
|
|
13
|
+
export const mapSelectedTabToClassesWithTone = {
|
|
14
|
+
neutral: {
|
|
15
|
+
picker: "bg-background-alice-blue text-blue-500",
|
|
16
|
+
tab: "bg-white text-blue-500",
|
|
17
|
+
},
|
|
18
|
+
alert: {
|
|
19
|
+
picker: "bg-background-alice-blue text-semantic-error",
|
|
20
|
+
tab: "bg-white text-semantic-error",
|
|
21
|
+
},
|
|
9
22
|
};
|
|
10
23
|
|
|
11
|
-
export const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
24
|
+
export const mapUnselectedTabToClassesWithTone = {
|
|
25
|
+
neutral: {
|
|
26
|
+
picker:
|
|
27
|
+
"bg-white hover:bg-background-alice-blue text-black hover:text-blue-500",
|
|
28
|
+
tab: "text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500",
|
|
29
|
+
},
|
|
30
|
+
alert: {
|
|
31
|
+
picker: "bg-white hover:bg-background-alice-blue text-semantic-error",
|
|
32
|
+
tab: "bg-grey-100 hover:bg-background-alice-blue active:bg-white text-semantic-error",
|
|
33
|
+
},
|
|
15
34
|
};
|
|
35
|
+
|
|
36
|
+
export function debugWarn(message: string, isDebug: boolean) {
|
|
37
|
+
if (isDebug) {
|
|
38
|
+
console.warn(message);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<button :class="classes" @click="onClickTab" v-bind="tab">
|
|
3
|
-
<FzIcon v-if="tab.icon" :name="tab.icon"
|
|
4
|
-
<span class="text-ellipsis
|
|
2
|
+
<button :class="classes" @click="onClickTab" v-bind="tab" :title="tab.title">
|
|
3
|
+
<FzIcon v-if="tab.icon" :name="tab.icon" size="md" />
|
|
4
|
+
<span class="text-ellipsis whitespace-nowrap overflow-hidden">{{
|
|
5
5
|
tab.title
|
|
6
6
|
}}</span>
|
|
7
7
|
<FzBadge
|
|
8
8
|
v-if="tab.badgeContent != null"
|
|
9
|
-
:color="
|
|
10
|
-
:
|
|
9
|
+
:color="badgeColor"
|
|
10
|
+
:environment="environment"
|
|
11
|
+
size="md"
|
|
11
12
|
>
|
|
12
13
|
{{ tab.badgeContent }}
|
|
13
14
|
</FzBadge>
|
|
@@ -22,9 +23,9 @@ import { useMediaQuery } from "@fiscozen/composables";
|
|
|
22
23
|
import { breakpoints } from "@fiscozen/style";
|
|
23
24
|
import { FzTabProps } from "../types";
|
|
24
25
|
import {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
mapEnvironmentToClasses,
|
|
27
|
+
mapSelectedTabToClassesWithTone,
|
|
28
|
+
mapUnselectedTabToClassesWithTone,
|
|
28
29
|
} from "../common";
|
|
29
30
|
|
|
30
31
|
const xs = useMediaQuery(`(max-width: ${breakpoints.xs})`);
|
|
@@ -32,32 +33,81 @@ const xs = useMediaQuery(`(max-width: ${breakpoints.xs})`);
|
|
|
32
33
|
const props = withDefaults(
|
|
33
34
|
defineProps<{
|
|
34
35
|
tab: FzTabProps;
|
|
35
|
-
|
|
36
|
+
environment: "frontoffice" | "backoffice";
|
|
36
37
|
type: "picker" | "tab";
|
|
37
|
-
readonly
|
|
38
|
+
readonly?: boolean;
|
|
38
39
|
maxWidth?: string;
|
|
40
|
+
tone?: "neutral" | "alert";
|
|
41
|
+
fullWidth?: boolean;
|
|
39
42
|
}>(),
|
|
40
43
|
{
|
|
41
44
|
type: "tab",
|
|
42
45
|
readonly: false,
|
|
43
|
-
|
|
46
|
+
tone: "neutral",
|
|
47
|
+
fullWidth: false,
|
|
44
48
|
},
|
|
45
49
|
);
|
|
46
50
|
|
|
47
51
|
const selectedTab = inject<Ref<string>>("selectedTab");
|
|
48
52
|
const emit = defineEmits(["click"]);
|
|
49
53
|
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
54
|
+
const badgeColor = computed(() => {
|
|
55
|
+
if (selectedTab?.value !== props.tab.title) return "black";
|
|
56
|
+
return props.tone === "alert" ? "error" : "blue";
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Builds the CSS classes array for a tab button based on its state and configuration.
|
|
61
|
+
* @param tone - The tone of the tab (neutral or alert)
|
|
62
|
+
* @param isSelected - Whether the tab is currently selected
|
|
63
|
+
* @param type - The type of tab (picker or tab)
|
|
64
|
+
* @param environment - The environment (frontoffice or backoffice)
|
|
65
|
+
* @param isDisabled - Whether the tab is disabled
|
|
66
|
+
* @param maxWidth - Optional max width value
|
|
67
|
+
* @param isXsBreakpoint - Whether the current viewport is at xs breakpoint (defaults to false)
|
|
68
|
+
* @returns Array of CSS class strings
|
|
69
|
+
*/
|
|
70
|
+
function getTabButtonClasses(
|
|
71
|
+
tone: "neutral" | "alert",
|
|
72
|
+
isSelected: boolean,
|
|
73
|
+
type: "picker" | "tab",
|
|
74
|
+
environment: "frontoffice" | "backoffice",
|
|
75
|
+
isDisabled: boolean,
|
|
76
|
+
maxWidth?: string,
|
|
77
|
+
isXsBreakpoint: boolean = false,
|
|
78
|
+
fullWidth: boolean = false,
|
|
79
|
+
): string[] {
|
|
80
|
+
const toneClasses = isSelected
|
|
81
|
+
? mapSelectedTabToClassesWithTone[tone][type]
|
|
82
|
+
: mapUnselectedTabToClassesWithTone[tone][type];
|
|
83
|
+
|
|
84
|
+
return [
|
|
85
|
+
"flex items-center rounded-md focus:z-10",
|
|
86
|
+
fullWidth ? "flex-1 justify-center" : "w-auto",
|
|
87
|
+
mapEnvironmentToClasses[environment],
|
|
88
|
+
type === "picker" ? "text-left" : "",
|
|
89
|
+
toneClasses,
|
|
90
|
+
isDisabled ? "cursor-not-allowed" : "cursor-pointer",
|
|
91
|
+
maxWidth && !isXsBreakpoint ? `max-w-[${maxWidth}]` : "",
|
|
92
|
+
isXsBreakpoint ? "!max-w-full !w-full" : "",
|
|
93
|
+
];
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
const classes = computed(() => {
|
|
97
|
+
const tone = props.tone || "neutral";
|
|
98
|
+
const isSelected = selectedTab?.value === props.tab.title;
|
|
99
|
+
|
|
100
|
+
return getTabButtonClasses(
|
|
101
|
+
tone,
|
|
102
|
+
isSelected,
|
|
103
|
+
props.type,
|
|
104
|
+
props.environment,
|
|
105
|
+
props.tab.disabled ?? false,
|
|
106
|
+
props.maxWidth,
|
|
107
|
+
xs.value ?? false,
|
|
108
|
+
props.fullWidth,
|
|
109
|
+
);
|
|
110
|
+
});
|
|
61
111
|
|
|
62
112
|
const onClickTab = () => {
|
|
63
113
|
if (!props.tab.disabled) {
|
|
@@ -7,27 +7,35 @@
|
|
|
7
7
|
>
|
|
8
8
|
<template #opener>
|
|
9
9
|
<FzTabButton
|
|
10
|
-
|
|
11
|
-
:
|
|
10
|
+
v-if="selectedTabProps"
|
|
11
|
+
:tab="selectedTabProps"
|
|
12
|
+
:environment="environment"
|
|
13
|
+
:tone="props.tone"
|
|
12
14
|
class="w-full sm:w-auto"
|
|
13
15
|
type="tab"
|
|
14
16
|
readonly
|
|
15
17
|
@click="isOpen = !isOpen"
|
|
18
|
+
data-testid="fz-tab-picker-opener"
|
|
16
19
|
>
|
|
17
|
-
<FzIcon :name="isOpen ? 'chevron-up' : 'chevron-down'"
|
|
20
|
+
<FzIcon :name="isOpen ? 'chevron-up' : 'chevron-down'" size="md" />
|
|
18
21
|
</FzTabButton>
|
|
19
22
|
</template>
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
23
|
+
<FzActionList>
|
|
24
|
+
<FzActionSection>
|
|
25
|
+
<FzAction
|
|
26
|
+
v-for="tab in tabs"
|
|
27
|
+
:key="tab.title"
|
|
28
|
+
type="action"
|
|
29
|
+
variant="textLeft"
|
|
30
|
+
:label="tab.title"
|
|
31
|
+
:iconLeftName="tab.icon"
|
|
32
|
+
:disabled="tab.disabled"
|
|
33
|
+
:environment="environment"
|
|
34
|
+
:tone="tab.tone"
|
|
35
|
+
@click="selectTab(tab)"
|
|
36
|
+
/>
|
|
37
|
+
</FzActionSection>
|
|
38
|
+
</FzActionList>
|
|
31
39
|
</FzFloating>
|
|
32
40
|
</template>
|
|
33
41
|
|
|
@@ -35,29 +43,27 @@
|
|
|
35
43
|
import { ref, inject, computed, Ref } from "vue";
|
|
36
44
|
import { FzFloating } from "@fiscozen/composables";
|
|
37
45
|
import { FzIcon } from "@fiscozen/icons";
|
|
38
|
-
import {
|
|
46
|
+
import { FzAction, FzActionList, FzActionSection } from "@fiscozen/action";
|
|
39
47
|
import { FzTabProps } from "../types";
|
|
40
|
-
import { mapSizeToClasses } from "../common";
|
|
41
48
|
import FzTabButton from "./FzTabButton.vue";
|
|
42
49
|
|
|
43
50
|
const isOpen = ref(false);
|
|
44
51
|
const props = defineProps<{
|
|
45
52
|
tabs: FzTabProps[];
|
|
46
|
-
|
|
53
|
+
tone?: "neutral" | "alert";
|
|
54
|
+
environment: "frontoffice" | "backoffice";
|
|
47
55
|
}>();
|
|
48
|
-
const opener = ref<HTMLElement>();
|
|
49
56
|
|
|
50
57
|
const selectedTab = inject<Ref<string>>("selectedTab");
|
|
51
58
|
const selectedTabProps = computed(() => {
|
|
52
59
|
return props.tabs.find((tab) => tab.title === selectedTab?.value);
|
|
53
60
|
});
|
|
54
61
|
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
const closePicker = () => {
|
|
61
|
-
isOpen.value = false;
|
|
62
|
+
const selectTab = (tab: FzTabProps) => {
|
|
63
|
+
if (!tab.disabled && selectedTab) {
|
|
64
|
+
selectedTab.value = tab.title;
|
|
65
|
+
isOpen.value = false;
|
|
66
|
+
}
|
|
62
67
|
};
|
|
68
|
+
|
|
63
69
|
</script>
|
package/src/types.ts
CHANGED
|
@@ -1,16 +1,37 @@
|
|
|
1
|
+
export type FzTabStyle = "scroll" | "picker" | "fullWidth";
|
|
2
|
+
|
|
1
3
|
export type FzTabsProps = {
|
|
2
4
|
/**
|
|
3
5
|
* Size variant
|
|
6
|
+
* @deprecated Use the 'environment' prop instead. This prop will be removed in a future version.
|
|
4
7
|
*/
|
|
5
|
-
size
|
|
8
|
+
size?: "sm" | "md";
|
|
6
9
|
/**
|
|
7
10
|
* Enable horizontal overflow
|
|
11
|
+
* @deprecated Use the 'overflowMode' prop instead. This prop will be removed in a future version.
|
|
8
12
|
*/
|
|
9
13
|
horizontalOverflow?: boolean;
|
|
10
14
|
/**
|
|
11
15
|
* Enable vertical direction
|
|
12
16
|
*/
|
|
13
17
|
vertical?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Controls tab style and overflow behavior
|
|
20
|
+
* - 'scroll': Shows horizontal scroll when tabs overflow (default)
|
|
21
|
+
* - 'picker': Shows picker dropdown
|
|
22
|
+
* - 'full-width': Shows full width tabs
|
|
23
|
+
*/
|
|
24
|
+
tabStyle?: FzTabStyle;
|
|
25
|
+
/**
|
|
26
|
+
* Environment variant for sizing
|
|
27
|
+
* - 'backoffice': Backoffice environment sizing
|
|
28
|
+
* - 'frontoffice': Frontoffice environment sizing
|
|
29
|
+
*/
|
|
30
|
+
environment?: "backoffice" | "frontoffice";
|
|
31
|
+
/**
|
|
32
|
+
* Enable debug mode
|
|
33
|
+
*/
|
|
34
|
+
isDebug?: boolean;
|
|
14
35
|
};
|
|
15
36
|
|
|
16
37
|
export type FzTabProps = {
|
|
@@ -38,4 +59,10 @@ export type FzTabProps = {
|
|
|
38
59
|
* Max width of the tab
|
|
39
60
|
*/
|
|
40
61
|
maxWidth?: string;
|
|
41
|
-
|
|
62
|
+
/**
|
|
63
|
+
* Tone variant for styling
|
|
64
|
+
* - 'neutral': Default neutral styling
|
|
65
|
+
* - 'alert': Alert/error styling (red variant)
|
|
66
|
+
*/
|
|
67
|
+
tone?: "neutral" | "alert";
|
|
68
|
+
};
|