@orbe-agro/client-core 5.6.130 → 5.6.131
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/@ecme/assets/styles/app.css +3 -15
- package/dist/@ecme/assets/styles/tailwind/index.css +3 -15
- package/dist/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.js +10 -241
- package/dist/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.js.map +1 -1
- package/dist/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.js +3 -17
- package/dist/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.js.map +1 -1
- package/dist/@types/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.d.ts +0 -8
- package/dist/@types/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.d.ts.map +1 -1
- package/dist/@types/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.d.ts.map +1 -1
- package/dist/base/assets/styles/init.css +3 -15
- package/lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.tsx +13 -252
- package/lib/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.tsx +3 -25
- package/package.json +1 -1
|
@@ -4493,9 +4493,6 @@ hr:is(.dark *){
|
|
|
4493
4493
|
.-left-2{
|
|
4494
4494
|
left: -0.5rem;
|
|
4495
4495
|
}
|
|
4496
|
-
.-left-3{
|
|
4497
|
-
left: -0.75rem;
|
|
4498
|
-
}
|
|
4499
4496
|
.-right-2{
|
|
4500
4497
|
right: -0.5rem;
|
|
4501
4498
|
}
|
|
@@ -4556,9 +4553,6 @@ hr:is(.dark *){
|
|
|
4556
4553
|
.z-10{
|
|
4557
4554
|
z-index: 10;
|
|
4558
4555
|
}
|
|
4559
|
-
.z-20{
|
|
4560
|
-
z-index: 20;
|
|
4561
|
-
}
|
|
4562
4556
|
.z-30{
|
|
4563
4557
|
z-index: 30;
|
|
4564
4558
|
}
|
|
@@ -5275,9 +5269,6 @@ hr:is(.dark *){
|
|
|
5275
5269
|
.min-w-\[330px\]{
|
|
5276
5270
|
min-width: 330px;
|
|
5277
5271
|
}
|
|
5278
|
-
.min-w-\[calc\(100\%\+1\.5rem\)\]{
|
|
5279
|
-
min-width: calc(100% + 1.5rem);
|
|
5280
|
-
}
|
|
5281
5272
|
.min-w-full{
|
|
5282
5273
|
min-width: 100%;
|
|
5283
5274
|
}
|
|
@@ -5624,6 +5615,9 @@ hr:is(.dark *){
|
|
|
5624
5615
|
.text-clip{
|
|
5625
5616
|
text-overflow: clip;
|
|
5626
5617
|
}
|
|
5618
|
+
.whitespace-normal{
|
|
5619
|
+
white-space: normal;
|
|
5620
|
+
}
|
|
5627
5621
|
.whitespace-nowrap{
|
|
5628
5622
|
white-space: nowrap;
|
|
5629
5623
|
}
|
|
@@ -7096,9 +7090,6 @@ hr:is(.dark *){
|
|
|
7096
7090
|
.active\:bg-gray-100:active{
|
|
7097
7091
|
background-color: var(--gray-100);
|
|
7098
7092
|
}
|
|
7099
|
-
.group\/item:hover .group-hover\/item\:block{
|
|
7100
|
-
display: block;
|
|
7101
|
-
}
|
|
7102
7093
|
.group:hover .group-hover\:block{
|
|
7103
7094
|
display: block;
|
|
7104
7095
|
}
|
|
@@ -7143,9 +7134,6 @@ hr:is(.dark *){
|
|
|
7143
7134
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
|
7144
7135
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
7145
7136
|
}
|
|
7146
|
-
.group\/item:focus-visible .group-focus-visible\/item\:block{
|
|
7147
|
-
display: block;
|
|
7148
|
-
}
|
|
7149
7137
|
.group.active .group-\[\.active\]\:bg-white{
|
|
7150
7138
|
--tw-bg-opacity: 1;
|
|
7151
7139
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
@@ -1165,9 +1165,6 @@ video {
|
|
|
1165
1165
|
.-left-2 {
|
|
1166
1166
|
left: -0.5rem;
|
|
1167
1167
|
}
|
|
1168
|
-
.-left-3 {
|
|
1169
|
-
left: -0.75rem;
|
|
1170
|
-
}
|
|
1171
1168
|
.-right-2 {
|
|
1172
1169
|
right: -0.5rem;
|
|
1173
1170
|
}
|
|
@@ -1228,9 +1225,6 @@ video {
|
|
|
1228
1225
|
.z-10 {
|
|
1229
1226
|
z-index: 10;
|
|
1230
1227
|
}
|
|
1231
|
-
.z-20 {
|
|
1232
|
-
z-index: 20;
|
|
1233
|
-
}
|
|
1234
1228
|
.z-30 {
|
|
1235
1229
|
z-index: 30;
|
|
1236
1230
|
}
|
|
@@ -1947,9 +1941,6 @@ video {
|
|
|
1947
1941
|
.min-w-\[330px\] {
|
|
1948
1942
|
min-width: 330px;
|
|
1949
1943
|
}
|
|
1950
|
-
.min-w-\[calc\(100\%\+1\.5rem\)\] {
|
|
1951
|
-
min-width: calc(100% + 1.5rem);
|
|
1952
|
-
}
|
|
1953
1944
|
.min-w-full {
|
|
1954
1945
|
min-width: 100%;
|
|
1955
1946
|
}
|
|
@@ -2298,6 +2289,9 @@ video {
|
|
|
2298
2289
|
.text-clip {
|
|
2299
2290
|
text-overflow: clip;
|
|
2300
2291
|
}
|
|
2292
|
+
.whitespace-normal {
|
|
2293
|
+
white-space: normal;
|
|
2294
|
+
}
|
|
2301
2295
|
.whitespace-nowrap {
|
|
2302
2296
|
white-space: nowrap;
|
|
2303
2297
|
}
|
|
@@ -3770,9 +3764,6 @@ video {
|
|
|
3770
3764
|
.active\:bg-gray-100:active {
|
|
3771
3765
|
background-color: var(--gray-100);
|
|
3772
3766
|
}
|
|
3773
|
-
.group\/item:hover .group-hover\/item\:block {
|
|
3774
|
-
display: block;
|
|
3775
|
-
}
|
|
3776
3767
|
.group:hover .group-hover\:block {
|
|
3777
3768
|
display: block;
|
|
3778
3769
|
}
|
|
@@ -3817,9 +3808,6 @@ video {
|
|
|
3817
3808
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
|
3818
3809
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
3819
3810
|
}
|
|
3820
|
-
.group\/item:focus-visible .group-focus-visible\/item\:block {
|
|
3821
|
-
display: block;
|
|
3822
|
-
}
|
|
3823
3811
|
.group.active .group-\[\.active\]\:bg-white {
|
|
3824
3812
|
--tw-bg-opacity: 1;
|
|
3825
3813
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { BrowserRouter } from "react-router-dom";
|
|
3
3
|
import VerticalMenuContent from "./VerticalMenuContent.js";
|
|
4
|
-
import
|
|
5
|
-
import { NAV_ITEM_TYPE_TITLE, NAV_ITEM_TYPE_ITEM, NAV_ITEM_TYPE_COLLAPSE } from "../../../constants/navigation.constant.js";
|
|
4
|
+
import modulesNavigationConfig from "../../../../base/configs/navigation.config/modules.navigation.js";
|
|
6
5
|
const collectAuthorityPaths = (navTree) => {
|
|
7
6
|
return navTree.reduce((acc, node) => {
|
|
8
7
|
if (node.path) {
|
|
@@ -14,142 +13,9 @@ const collectAuthorityPaths = (navTree) => {
|
|
|
14
13
|
return acc;
|
|
15
14
|
}, []);
|
|
16
15
|
};
|
|
17
|
-
const
|
|
18
|
-
new Set(collectAuthorityPaths(
|
|
16
|
+
const allAuthority = Array.from(
|
|
17
|
+
new Set(collectAuthorityPaths(modulesNavigationConfig))
|
|
19
18
|
);
|
|
20
|
-
const ticketSubmenuAllExpanded = ticketNavigationConfig.map(
|
|
21
|
-
(menu) => {
|
|
22
|
-
if (menu.key !== "ticket") {
|
|
23
|
-
return menu;
|
|
24
|
-
}
|
|
25
|
-
return {
|
|
26
|
-
...menu,
|
|
27
|
-
subMenu: menu.subMenu.map((subMenu) => {
|
|
28
|
-
if (subMenu.key === "ticket.relatorios" || subMenu.key === "ticket.cadastros") {
|
|
29
|
-
return {
|
|
30
|
-
...subMenu,
|
|
31
|
-
type: NAV_ITEM_TYPE_TITLE
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
return subMenu;
|
|
35
|
-
})
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
);
|
|
39
|
-
const mockNavigationTree = [
|
|
40
|
-
{
|
|
41
|
-
key: "inicio",
|
|
42
|
-
path: "/inicio",
|
|
43
|
-
title: "Início",
|
|
44
|
-
translateKey: "nav.inicio",
|
|
45
|
-
icon: "",
|
|
46
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
47
|
-
authority: ["/inicio"],
|
|
48
|
-
subMenu: []
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
key: "cadastros",
|
|
52
|
-
path: "",
|
|
53
|
-
title: "Cadastros",
|
|
54
|
-
translateKey: "nav.cadastros",
|
|
55
|
-
icon: "",
|
|
56
|
-
type: NAV_ITEM_TYPE_COLLAPSE,
|
|
57
|
-
authority: ["/cadastros"],
|
|
58
|
-
subMenu: [
|
|
59
|
-
{
|
|
60
|
-
key: "clientes",
|
|
61
|
-
path: "/cadastros/clientes",
|
|
62
|
-
title: "Clientes",
|
|
63
|
-
translateKey: "nav.clientes",
|
|
64
|
-
icon: "",
|
|
65
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
66
|
-
authority: ["/cadastros/clientes"],
|
|
67
|
-
subMenu: []
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
key: "fornecedores",
|
|
71
|
-
path: "/cadastros/fornecedores",
|
|
72
|
-
title: "Fornecedores",
|
|
73
|
-
translateKey: "nav.fornecedores",
|
|
74
|
-
icon: "",
|
|
75
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
76
|
-
authority: ["/cadastros/fornecedores"],
|
|
77
|
-
subMenu: []
|
|
78
|
-
}
|
|
79
|
-
]
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
key: "relatorios",
|
|
83
|
-
path: "/relatorios",
|
|
84
|
-
title: "Relatórios",
|
|
85
|
-
translateKey: "nav.relatorios",
|
|
86
|
-
icon: "ChartBarIcon",
|
|
87
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
88
|
-
authority: ["/relatorios"],
|
|
89
|
-
subMenu: []
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
key: "configuracoes",
|
|
93
|
-
path: "",
|
|
94
|
-
title: "Configurações",
|
|
95
|
-
translateKey: "nav.configuracoes",
|
|
96
|
-
icon: "",
|
|
97
|
-
type: NAV_ITEM_TYPE_COLLAPSE,
|
|
98
|
-
authority: ["/configuracoes"],
|
|
99
|
-
subMenu: [
|
|
100
|
-
{
|
|
101
|
-
key: "perfil",
|
|
102
|
-
path: "/configuracoes/perfil",
|
|
103
|
-
title: "Perfil",
|
|
104
|
-
translateKey: "nav.perfil",
|
|
105
|
-
icon: "",
|
|
106
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
107
|
-
authority: ["/configuracoes/perfil"],
|
|
108
|
-
subMenu: []
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
key: "integracoes",
|
|
112
|
-
path: "",
|
|
113
|
-
title: "Integrações",
|
|
114
|
-
translateKey: "nav.integracoes",
|
|
115
|
-
icon: "",
|
|
116
|
-
type: NAV_ITEM_TYPE_COLLAPSE,
|
|
117
|
-
authority: ["/configuracoes/integracoes"],
|
|
118
|
-
subMenu: [
|
|
119
|
-
{
|
|
120
|
-
key: "webhooks",
|
|
121
|
-
path: "/configuracoes/integracoes/webhooks",
|
|
122
|
-
title: "Webhooks",
|
|
123
|
-
translateKey: "nav.webhooks",
|
|
124
|
-
icon: "WebhookIcon",
|
|
125
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
126
|
-
authority: ["/configuracoes/integracoes/webhooks"],
|
|
127
|
-
subMenu: []
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
key: "lorem.ipsum",
|
|
131
|
-
path: "/configuracoes/integracoes/lorem-ipsum",
|
|
132
|
-
title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
|
|
133
|
-
translateKey: "nav.loremIpsum",
|
|
134
|
-
icon: "LoremIpsumIcon",
|
|
135
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
136
|
-
authority: ["/configuracoes/integracoes/lorem-ipsum"],
|
|
137
|
-
subMenu: []
|
|
138
|
-
}
|
|
139
|
-
]
|
|
140
|
-
}
|
|
141
|
-
]
|
|
142
|
-
}
|
|
143
|
-
];
|
|
144
|
-
const allUserAuthority = [
|
|
145
|
-
"/inicio",
|
|
146
|
-
"/cadastros/clientes",
|
|
147
|
-
"/cadastros/fornecedores",
|
|
148
|
-
"/relatorios",
|
|
149
|
-
"/configuracoes/perfil",
|
|
150
|
-
"/configuracoes/integracoes/webhooks",
|
|
151
|
-
"/configuracoes/integracoes/lorem-ipsum"
|
|
152
|
-
];
|
|
153
19
|
const meta = {
|
|
154
20
|
title: "@ecme/Template/VerticalMenuContent",
|
|
155
21
|
component: VerticalMenuContent,
|
|
@@ -176,115 +42,18 @@ const meta = {
|
|
|
176
42
|
const Default = {
|
|
177
43
|
args: {
|
|
178
44
|
collapsed: false,
|
|
179
|
-
routeKey: "
|
|
180
|
-
navigationTree:
|
|
181
|
-
userAuthority:
|
|
182
|
-
direction: "ltr",
|
|
183
|
-
translationSetup: true
|
|
184
|
-
}
|
|
185
|
-
};
|
|
186
|
-
const Collapsed = {
|
|
187
|
-
args: {
|
|
188
|
-
collapsed: true,
|
|
189
|
-
routeKey: "/cadastros/clientes",
|
|
190
|
-
navigationTree: mockNavigationTree,
|
|
191
|
-
userAuthority: allUserAuthority,
|
|
192
|
-
direction: "ltr",
|
|
193
|
-
translationSetup: true
|
|
194
|
-
}
|
|
195
|
-
};
|
|
196
|
-
const WithExpandedMenu = {
|
|
197
|
-
args: {
|
|
198
|
-
collapsed: false,
|
|
199
|
-
routeKey: "/configuracoes/integracoes/webhooks",
|
|
200
|
-
navigationTree: mockNavigationTree,
|
|
201
|
-
userAuthority: allUserAuthority,
|
|
202
|
-
direction: "ltr",
|
|
203
|
-
translationSetup: true
|
|
204
|
-
}
|
|
205
|
-
};
|
|
206
|
-
const LimitedAuthority = {
|
|
207
|
-
args: {
|
|
208
|
-
collapsed: false,
|
|
209
|
-
routeKey: "/inicio",
|
|
210
|
-
navigationTree: mockNavigationTree,
|
|
211
|
-
userAuthority: ["/inicio", "/relatorios"],
|
|
45
|
+
routeKey: "modules",
|
|
46
|
+
navigationTree: modulesNavigationConfig,
|
|
47
|
+
userAuthority: allAuthority,
|
|
212
48
|
direction: "ltr",
|
|
213
49
|
translationSetup: true
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
collapsed: false,
|
|
219
|
-
routeKey: "/inicio",
|
|
220
|
-
navigationTree: mockNavigationTree,
|
|
221
|
-
userAuthority: allUserAuthority,
|
|
222
|
-
direction: "rtl",
|
|
223
|
-
translationSetup: true
|
|
224
|
-
}
|
|
225
|
-
};
|
|
226
|
-
const MinimalNavigation = {
|
|
227
|
-
args: {
|
|
228
|
-
collapsed: false,
|
|
229
|
-
routeKey: "/inicio",
|
|
230
|
-
navigationTree: [
|
|
231
|
-
{
|
|
232
|
-
key: "inicio",
|
|
233
|
-
path: "/inicio",
|
|
234
|
-
title: "Início",
|
|
235
|
-
translateKey: "nav.inicio",
|
|
236
|
-
icon: "",
|
|
237
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
238
|
-
authority: ["/inicio"],
|
|
239
|
-
subMenu: []
|
|
240
|
-
}
|
|
241
|
-
],
|
|
242
|
-
userAuthority: ["/inicio"],
|
|
243
|
-
direction: "ltr",
|
|
244
|
-
translationSetup: true
|
|
245
|
-
}
|
|
246
|
-
};
|
|
247
|
-
const WithMenuClick = {
|
|
248
|
-
args: {
|
|
249
|
-
collapsed: false,
|
|
250
|
-
routeKey: "/inicio",
|
|
251
|
-
navigationTree: mockNavigationTree,
|
|
252
|
-
userAuthority: allUserAuthority,
|
|
253
|
-
direction: "ltr",
|
|
254
|
-
translationSetup: true,
|
|
255
|
-
onMenuItemClick: () => alert("Menu item clicked!")
|
|
256
|
-
}
|
|
257
|
-
};
|
|
258
|
-
const TicketSubmenu = {
|
|
259
|
-
args: {
|
|
260
|
-
collapsed: false,
|
|
261
|
-
routeKey: "ticket",
|
|
262
|
-
navigationTree: ticketNavigationConfig,
|
|
263
|
-
userAuthority: ticketAuthority,
|
|
264
|
-
direction: "ltr",
|
|
265
|
-
translationSetup: true
|
|
266
|
-
}
|
|
267
|
-
};
|
|
268
|
-
const TicketSubmenuSortOrderStable = {
|
|
269
|
-
args: {
|
|
270
|
-
collapsed: false,
|
|
271
|
-
routeKey: "ticket",
|
|
272
|
-
navigationTree: ticketSubmenuAllExpanded,
|
|
273
|
-
userAuthority: ticketAuthority,
|
|
274
|
-
direction: "ltr",
|
|
275
|
-
translationSetup: true
|
|
276
|
-
}
|
|
50
|
+
},
|
|
51
|
+
decorators: [
|
|
52
|
+
(Story) => /* @__PURE__ */ jsx("div", { style: { maxWidth: "25vw" }, children: /* @__PURE__ */ jsx(Story, {}) })
|
|
53
|
+
]
|
|
277
54
|
};
|
|
278
55
|
export {
|
|
279
|
-
Collapsed,
|
|
280
56
|
Default,
|
|
281
|
-
LimitedAuthority,
|
|
282
|
-
MinimalNavigation,
|
|
283
|
-
RTLDirection,
|
|
284
|
-
TicketSubmenu,
|
|
285
|
-
TicketSubmenuSortOrderStable,
|
|
286
|
-
WithExpandedMenu,
|
|
287
|
-
WithMenuClick,
|
|
288
57
|
meta as default
|
|
289
58
|
};
|
|
290
59
|
//# sourceMappingURL=VerticalMenuContent.stories.js.map
|
package/dist/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalMenuContent.stories.js","sources":["../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { BrowserRouter } from 'react-router-dom'\nimport VerticalMenuContent from './VerticalMenuContent'\nimport type { NavigationTree } from '@/@types/navigation'\nimport ticketNavigationConfig from '@base/configs/navigation.config/modules.submenu/Ticket/ticket.navigation'\nimport {\n NAV_ITEM_TYPE_COLLAPSE,\n NAV_ITEM_TYPE_ITEM,\n NAV_ITEM_TYPE_TITLE,\n} from '@/constants/navigation.constant'\n\nconst collectAuthorityPaths = (navTree: NavigationTree[]): string[] => {\n return navTree.reduce((acc: string[], node) => {\n if (node.path) {\n acc.push(node.path)\n }\n\n if (node.subMenu?.length) {\n acc.push(...collectAuthorityPaths(node.subMenu))\n }\n\n return acc\n }, [])\n}\n\nconst ticketAuthority = Array.from(\n new Set(collectAuthorityPaths(ticketNavigationConfig)),\n)\n\nconst ticketSubmenuAllExpanded: NavigationTree[] = ticketNavigationConfig.map(\n (menu) => {\n if (menu.key !== 'ticket') {\n return menu\n }\n\n return {\n ...menu,\n subMenu: menu.subMenu.map((subMenu) => {\n if (\n subMenu.key === 'ticket.relatorios' ||\n subMenu.key === 'ticket.cadastros'\n ) {\n return {\n ...subMenu,\n type: NAV_ITEM_TYPE_TITLE,\n }\n }\n\n return subMenu\n }),\n }\n },\n)\n\nconst mockNavigationTree: NavigationTree[] = [\n {\n key: 'inicio',\n path: '/inicio',\n title: 'Início',\n translateKey: 'nav.inicio',\n icon: '',\n type: NAV_ITEM_TYPE_ITEM,\n authority: ['/inicio'],\n subMenu: [],\n },\n {\n key: 'cadastros',\n path: '',\n title: 'Cadastros',\n translateKey: 'nav.cadastros',\n icon: '',\n type: NAV_ITEM_TYPE_COLLAPSE,\n authority: ['/cadastros'],\n subMenu: [\n {\n key: 'clientes',\n path: '/cadastros/clientes',\n title: 'Clientes',\n translateKey: 'nav.clientes',\n icon: '',\n type: NAV_ITEM_TYPE_ITEM,\n authority: ['/cadastros/clientes'],\n subMenu: [],\n },\n {\n key: 'fornecedores',\n path: '/cadastros/fornecedores',\n title: 'Fornecedores',\n translateKey: 'nav.fornecedores',\n icon: '',\n type: NAV_ITEM_TYPE_ITEM,\n authority: ['/cadastros/fornecedores'],\n subMenu: [],\n },\n ],\n },\n {\n key: 'relatorios',\n path: '/relatorios',\n title: 'Relatórios',\n translateKey: 'nav.relatorios',\n icon: 'ChartBarIcon',\n type: NAV_ITEM_TYPE_ITEM,\n authority: ['/relatorios'],\n subMenu: [],\n },\n {\n key: 'configuracoes',\n path: '',\n title: 'Configurações',\n translateKey: 'nav.configuracoes',\n icon: '',\n type: NAV_ITEM_TYPE_COLLAPSE,\n authority: ['/configuracoes'],\n subMenu: [\n {\n key: 'perfil',\n path: '/configuracoes/perfil',\n title: 'Perfil',\n translateKey: 'nav.perfil',\n icon: '',\n type: NAV_ITEM_TYPE_ITEM,\n authority: ['/configuracoes/perfil'],\n subMenu: [],\n },\n {\n key: 'integracoes',\n path: '',\n title: 'Integrações',\n translateKey: 'nav.integracoes',\n icon: '',\n type: NAV_ITEM_TYPE_COLLAPSE,\n authority: ['/configuracoes/integracoes'],\n subMenu: [\n {\n key: 'webhooks',\n path: '/configuracoes/integracoes/webhooks',\n title: 'Webhooks',\n translateKey: 'nav.webhooks',\n icon: 'WebhookIcon',\n type: NAV_ITEM_TYPE_ITEM,\n authority: ['/configuracoes/integracoes/webhooks'],\n subMenu: [],\n },\n {\n key: 'lorem.ipsum',\n path: '/configuracoes/integracoes/lorem-ipsum',\n title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',\n translateKey: 'nav.loremIpsum',\n icon: 'LoremIpsumIcon',\n type: NAV_ITEM_TYPE_ITEM,\n authority: ['/configuracoes/integracoes/lorem-ipsum'],\n subMenu: [],\n },\n ],\n },\n ],\n },\n]\n\nconst allUserAuthority = [\n '/inicio',\n '/cadastros/clientes',\n '/cadastros/fornecedores',\n '/relatorios',\n '/configuracoes/perfil',\n '/configuracoes/integracoes/webhooks',\n '/configuracoes/integracoes/lorem-ipsum',\n]\n\nconst meta: Meta<typeof VerticalMenuContent> = {\n title: '@ecme/Template/VerticalMenuContent',\n component: VerticalMenuContent,\n parameters: {\n layout: 'padded',\n },\n tags: ['autodocs'],\n decorators: [\n (Story) => (\n <BrowserRouter>\n <Story />\n </BrowserRouter>\n ),\n ],\n argTypes: {\n collapsed: {\n control: 'boolean',\n },\n direction: {\n control: { type: 'select' },\n options: ['ltr', 'rtl'],\n },\n routeKey: {\n control: 'text',\n },\n },\n}\n\nexport default meta\ntype TStory = StoryObj<typeof VerticalMenuContent>\n\nexport const Default: TStory = {\n args: {\n collapsed: false,\n routeKey: '/inicio',\n navigationTree: mockNavigationTree,\n userAuthority: allUserAuthority,\n direction: 'ltr',\n translationSetup: true,\n },\n}\n\nexport const Collapsed: TStory = {\n args: {\n collapsed: true,\n routeKey: '/cadastros/clientes',\n navigationTree: mockNavigationTree,\n userAuthority: allUserAuthority,\n direction: 'ltr',\n translationSetup: true,\n },\n}\n\nexport const WithExpandedMenu: TStory = {\n args: {\n collapsed: false,\n routeKey: '/configuracoes/integracoes/webhooks',\n navigationTree: mockNavigationTree,\n userAuthority: allUserAuthority,\n direction: 'ltr',\n translationSetup: true,\n },\n}\n\nexport const LimitedAuthority: TStory = {\n args: {\n collapsed: false,\n routeKey: '/inicio',\n navigationTree: mockNavigationTree,\n userAuthority: ['/inicio', '/relatorios'],\n direction: 'ltr',\n translationSetup: true,\n },\n}\n\nexport const RTLDirection: TStory = {\n args: {\n collapsed: false,\n routeKey: '/inicio',\n navigationTree: mockNavigationTree,\n userAuthority: allUserAuthority,\n direction: 'rtl',\n translationSetup: true,\n },\n}\n\nexport const MinimalNavigation: TStory = {\n args: {\n collapsed: false,\n routeKey: '/inicio',\n navigationTree: [\n {\n key: 'inicio',\n path: '/inicio',\n title: 'Início',\n translateKey: 'nav.inicio',\n icon: '',\n type: NAV_ITEM_TYPE_ITEM,\n authority: ['/inicio'],\n subMenu: [],\n },\n ],\n userAuthority: ['/inicio'],\n direction: 'ltr',\n translationSetup: true,\n },\n}\n\nexport const WithMenuClick: TStory = {\n args: {\n collapsed: false,\n routeKey: '/inicio',\n navigationTree: mockNavigationTree,\n userAuthority: allUserAuthority,\n direction: 'ltr',\n translationSetup: true,\n onMenuItemClick: () => alert('Menu item clicked!'),\n },\n}\n\nexport const TicketSubmenu: TStory = {\n args: {\n collapsed: false,\n routeKey: 'ticket',\n navigationTree: ticketNavigationConfig,\n userAuthority: ticketAuthority,\n direction: 'ltr',\n translationSetup: true,\n },\n}\n\nexport const TicketSubmenuSortOrderStable: TStory = {\n args: {\n collapsed: false,\n routeKey: 'ticket',\n navigationTree: ticketSubmenuAllExpanded,\n userAuthority: ticketAuthority,\n direction: 'ltr',\n translationSetup: true,\n },\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"VerticalMenuContent.stories.js","sources":["../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { BrowserRouter } from 'react-router-dom'\nimport VerticalMenuContent from './VerticalMenuContent'\nimport type { NavigationTree } from '@/@types/navigation'\nimport modulesNavigationConfig from '@base/configs/navigation.config/modules.navigation'\n\nconst collectAuthorityPaths = (navTree: NavigationTree[]): string[] => {\n return navTree.reduce((acc: string[], node) => {\n if (node.path) {\n acc.push(node.path)\n }\n\n if (node.subMenu?.length) {\n acc.push(...collectAuthorityPaths(node.subMenu))\n }\n\n return acc\n }, [])\n}\n\nconst allAuthority = Array.from(\n new Set(collectAuthorityPaths(modulesNavigationConfig)),\n)\n\nconst meta: Meta<typeof VerticalMenuContent> = {\n title: '@ecme/Template/VerticalMenuContent',\n component: VerticalMenuContent,\n parameters: {\n layout: 'padded',\n },\n tags: ['autodocs'],\n decorators: [\n (Story) => (\n <BrowserRouter>\n <Story />\n </BrowserRouter>\n ),\n ],\n argTypes: {\n collapsed: {\n control: 'boolean',\n },\n direction: {\n control: { type: 'select' },\n options: ['ltr', 'rtl'],\n },\n routeKey: {\n control: 'text',\n },\n },\n}\n\nexport default meta\ntype TStory = StoryObj<typeof VerticalMenuContent>\n\nexport const Default: TStory = {\n args: {\n collapsed: false,\n routeKey: 'modules',\n navigationTree: modulesNavigationConfig,\n userAuthority: allAuthority,\n direction: 'ltr',\n translationSetup: true,\n },\n decorators: [\n (Story) => (\n <div style={{ maxWidth: '25vw' }}>\n <Story />\n </div>\n ),\n ],\n}\n"],"names":[],"mappings":";;;;AAMA,MAAM,wBAAwB,CAAC,YAAwC;AACnE,SAAO,QAAQ,OAAO,CAAC,KAAe,SAAS;AAC3C,QAAI,KAAK,MAAM;AACX,UAAI,KAAK,KAAK,IAAI;AAAA,IACtB;AAEA,QAAI,KAAK,SAAS,QAAQ;AACtB,UAAI,KAAK,GAAG,sBAAsB,KAAK,OAAO,CAAC;AAAA,IACnD;AAEA,WAAO;AAAA,EACX,GAAG,CAAA,CAAE;AACT;AAEA,MAAM,eAAe,MAAM;AAAA,EACvB,IAAI,IAAI,sBAAsB,uBAAuB,CAAC;AAC1D;AAEA,MAAM,OAAyC;AAAA,EAC3C,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACR,QAAQ;AAAA,EAAA;AAAA,EAEZ,MAAM,CAAC,UAAU;AAAA,EACjB,YAAY;AAAA,IACR,CAAC,UACG,oBAAC,eAAA,EACG,UAAA,oBAAC,SAAM,EAAA,CACX;AAAA,EAAA;AAAA,EAGR,UAAU;AAAA,IACN,WAAW;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEb,WAAW;AAAA,MACP,SAAS,EAAE,MAAM,SAAA;AAAA,MACjB,SAAS,CAAC,OAAO,KAAK;AAAA,IAAA;AAAA,IAE1B,UAAU;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACb;AAER;AAKO,MAAM,UAAkB;AAAA,EAC3B,MAAM;AAAA,IACF,WAAW;AAAA,IACX,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,kBAAkB;AAAA,EAAA;AAAA,EAEtB,YAAY;AAAA,IACR,CAAC,UACG,oBAAC,OAAA,EAAI,OAAO,EAAE,UAAU,OAAA,GACpB,UAAA,oBAAC,OAAA,CAAA,CAAM,EAAA,CACX;AAAA,EAAA;AAGZ;"}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import "../../ui/Tooltip/index.js";
|
|
3
3
|
import { Menu } from "../../ui/Menu/index.js";
|
|
4
|
-
import "../../ui/ScrollBar/index.js";
|
|
5
4
|
import VerticalMenuIcon from "./VerticalMenuIcon.js";
|
|
6
5
|
import { Link } from "react-router-dom";
|
|
7
|
-
import ScrollBar from "../../ui/ScrollBar/ScrollBar.js";
|
|
8
6
|
import Tooltip from "../../ui/Tooltip/Tooltip.js";
|
|
9
7
|
const { MenuItem } = Menu;
|
|
10
8
|
const DefaultItem = (props) => {
|
|
@@ -17,21 +15,9 @@ const DefaultItem = (props) => {
|
|
|
17
15
|
t,
|
|
18
16
|
linkRenderer
|
|
19
17
|
} = props;
|
|
20
|
-
const
|
|
21
|
-
const renderItemContent = (titleClassName) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
18
|
+
const linkContent = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
22
19
|
showIcon && /* @__PURE__ */ jsx(VerticalMenuIcon, { icon: nav.icon }),
|
|
23
|
-
showTitle && /* @__PURE__ */ jsx("span", { className:
|
|
24
|
-
] });
|
|
25
|
-
const linkContent = /* @__PURE__ */ jsxs("span", { className: "relative flex min-w-0 flex-1 items-center gap-2", children: [
|
|
26
|
-
/* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: renderItemContent("truncate") }),
|
|
27
|
-
showTitle && /* @__PURE__ */ jsx("div", { className: "w-100 absolute -left-3 top-1/2 z-20 hidden min-w-[calc(100%+1.5rem)] -translate-y-1/2 group-hover/item:block group-focus-visible/item:block", children: /* @__PURE__ */ jsx(
|
|
28
|
-
ScrollBar,
|
|
29
|
-
{
|
|
30
|
-
autoHide: true,
|
|
31
|
-
className: "max-h-16 rounded-lg bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-100",
|
|
32
|
-
children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-max min-w-full items-center gap-2 whitespace-nowrap rounded-lg px-3 font-semibold", children: renderItemContent() })
|
|
33
|
-
}
|
|
34
|
-
) })
|
|
20
|
+
showTitle && /* @__PURE__ */ jsx("span", { className: "whitespace-normal", children: t(nav.translateKey, nav.title) })
|
|
35
21
|
] });
|
|
36
22
|
const renderLink = () => {
|
|
37
23
|
if (linkRenderer) {
|
|
@@ -41,7 +27,7 @@ const DefaultItem = (props) => {
|
|
|
41
27
|
Link,
|
|
42
28
|
{
|
|
43
29
|
to: nav.path,
|
|
44
|
-
className: "
|
|
30
|
+
className: "flex h-full w-full items-center gap-2",
|
|
45
31
|
target: nav.isExternalLink ? "_blank" : "",
|
|
46
32
|
onClick: () => onLinkClick?.({
|
|
47
33
|
key: nav.key,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalSingleMenuItem.js","sources":["../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.tsx"],"sourcesContent":["import Tooltip from '@/components/ui/Tooltip'\nimport Menu from '@/components/ui/Menu'\nimport ScrollBar from '@/components/ui/ScrollBar'\nimport VerticalMenuIcon from './VerticalMenuIcon'\nimport { Link } from 'react-router-dom'\nimport type { CommonProps } from '@/@types/common'\nimport type { Direction } from '@/@types/theme'\nimport type { NavigationTree } from '@/@types/navigation'\n\nconst { MenuItem } = Menu\n\ntype LinkRenderer = (\n nav: NavigationTree,\n children: React.ReactNode,\n) => React.ReactNode\n\ninterface CollapsedItemProps extends CommonProps {\n nav: NavigationTree\n direction?: Direction\n linkRenderer?: LinkRenderer\n onLinkClick?: (link: { key: string; title: string; path: string }) => void\n t: (\n key: string,\n fallback?: string | Record<string, string | number>,\n ) => string\n renderAsIcon?: boolean\n userAuthority: string[]\n currentKey?: string\n parentKeys?: string[]\n}\n\ninterface DefaultItemProps {\n nav: NavigationTree\n onLinkClick?: (link: { key: string; title: string; path: string }) => void\n sideCollapsed?: boolean\n t: (\n key: string,\n fallback?: string | Record<string, string | number>,\n ) => string\n indent?: boolean\n userAuthority: string[]\n showIcon?: boolean\n showTitle?: boolean\n linkRenderer?: LinkRenderer\n}\n\ninterface VerticalMenuItemProps extends CollapsedItemProps, DefaultItemProps {}\n\nconst DefaultItem = (props: DefaultItemProps) => {\n const {\n nav,\n onLinkClick,\n showTitle,\n indent,\n showIcon = true,\n t,\n linkRenderer,\n } = props\n\n const
|
|
1
|
+
{"version":3,"file":"VerticalSingleMenuItem.js","sources":["../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.tsx"],"sourcesContent":["import Tooltip from '@/components/ui/Tooltip'\nimport Menu from '@/components/ui/Menu'\nimport ScrollBar from '@/components/ui/ScrollBar'\nimport VerticalMenuIcon from './VerticalMenuIcon'\nimport { Link } from 'react-router-dom'\nimport type { CommonProps } from '@/@types/common'\nimport type { Direction } from '@/@types/theme'\nimport type { NavigationTree } from '@/@types/navigation'\n\nconst { MenuItem } = Menu\n\ntype LinkRenderer = (\n nav: NavigationTree,\n children: React.ReactNode,\n) => React.ReactNode\n\ninterface CollapsedItemProps extends CommonProps {\n nav: NavigationTree\n direction?: Direction\n linkRenderer?: LinkRenderer\n onLinkClick?: (link: { key: string; title: string; path: string }) => void\n t: (\n key: string,\n fallback?: string | Record<string, string | number>,\n ) => string\n renderAsIcon?: boolean\n userAuthority: string[]\n currentKey?: string\n parentKeys?: string[]\n}\n\ninterface DefaultItemProps {\n nav: NavigationTree\n onLinkClick?: (link: { key: string; title: string; path: string }) => void\n sideCollapsed?: boolean\n t: (\n key: string,\n fallback?: string | Record<string, string | number>,\n ) => string\n indent?: boolean\n userAuthority: string[]\n showIcon?: boolean\n showTitle?: boolean\n linkRenderer?: LinkRenderer\n}\n\ninterface VerticalMenuItemProps extends CollapsedItemProps, DefaultItemProps {}\n\nconst DefaultItem = (props: DefaultItemProps) => {\n const {\n nav,\n onLinkClick,\n showTitle,\n indent,\n showIcon = true,\n t,\n linkRenderer,\n } = props\n\n const linkContent = (\n <>\n {showIcon && <VerticalMenuIcon icon={nav.icon} />}\n {showTitle && (\n <span className=\"whitespace-normal\">{t(nav.translateKey, nav.title)}</span>\n )}\n </>\n )\n\n const renderLink = () => {\n if (linkRenderer) {\n return linkRenderer(nav, linkContent)\n }\n\n return (\n <Link\n to={nav.path}\n className=\"flex h-full w-full items-center gap-2\"\n target={nav.isExternalLink ? '_blank' : ''}\n onClick={() =>\n onLinkClick?.({\n key: nav.key,\n title: nav.title,\n path: nav.path,\n })\n }\n >\n {linkContent}\n </Link>\n )\n }\n\n return (\n <MenuItem key={nav.key} eventKey={nav.key} dotIndent={indent}>\n {renderLink()}\n </MenuItem>\n )\n}\nconst VerticalSingleMenuItem = (props: VerticalMenuItemProps) => {\n const { sideCollapsed, nav, t, userAuthority, onLinkClick, linkRenderer } =\n props\n\n if (sideCollapsed) {\n return (\n <Tooltip\n title={t(nav.translateKey, nav.title)}\n placement={props.direction === 'rtl' ? 'left' : 'right'}\n >\n <DefaultItem\n nav={nav}\n onLinkClick={onLinkClick}\n t={t}\n userAuthority={userAuthority}\n linkRenderer={linkRenderer}\n showIcon={true}\n showTitle={false}\n indent={props.indent}\n />\n </Tooltip>\n )\n }\n\n return (\n <DefaultItem\n nav={nav}\n onLinkClick={onLinkClick}\n t={t}\n userAuthority={userAuthority}\n linkRenderer={linkRenderer}\n showIcon={true}\n showTitle={true}\n indent={props.indent}\n />\n )\n}\nexport default VerticalSingleMenuItem\n"],"names":[],"mappings":";;;;;;AASA,MAAM,EAAE,aAAa;AAuCrB,MAAM,cAAc,CAAC,UAA4B;AAC7C,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAAA,IACA;AAEJ,QAAM,cACF,qBAAA,UAAA,EACK,UAAA;AAAA,IAAA,YAAY,oBAAC,kBAAA,EAAiB,MAAM,IAAI,MAAM;AAAA,IAC9C,aACG,oBAAC,QAAA,EAAK,WAAU,qBAAqB,YAAE,IAAI,cAAc,IAAI,KAAK,EAAA,CAAE;AAAA,EAAA,GAE5E;AAGJ,QAAM,aAAa,MAAM;AACrB,QAAI,cAAc;AACd,aAAO,aAAa,KAAK,WAAW;AAAA,IACxC;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAI,IAAI;AAAA,QACR,WAAU;AAAA,QACV,QAAQ,IAAI,iBAAiB,WAAW;AAAA,QACxC,SAAS,MACL,cAAc;AAAA,UACV,KAAK,IAAI;AAAA,UACT,OAAO,IAAI;AAAA,UACX,MAAM,IAAI;AAAA,QAAA,CACb;AAAA,QAGJ,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AAEA,SACI,oBAAC,UAAA,EAAuB,UAAU,IAAI,KAAK,WAAW,QACjD,UAAA,WAAA,EAAW,GADD,IAAI,GAEnB;AAER;AACA,MAAM,yBAAyB,CAAC,UAAiC;AAC7D,QAAM,EAAE,eAAe,KAAK,GAAG,eAAe,aAAa,iBACvD;AAEJ,MAAI,eAAe;AACf,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,OAAO,EAAE,IAAI,cAAc,IAAI,KAAK;AAAA,QACpC,WAAW,MAAM,cAAc,QAAQ,SAAS;AAAA,QAEhD,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,WAAW;AAAA,YACX,QAAQ,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAGZ;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ,MAAM;AAAA,IAAA;AAAA,EAAA;AAG1B;"}
|
package/dist/@types/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.d.ts
CHANGED
|
@@ -4,12 +4,4 @@ declare const meta: Meta<typeof VerticalMenuContent>;
|
|
|
4
4
|
export default meta;
|
|
5
5
|
type TStory = StoryObj<typeof VerticalMenuContent>;
|
|
6
6
|
export declare const Default: TStory;
|
|
7
|
-
export declare const Collapsed: TStory;
|
|
8
|
-
export declare const WithExpandedMenu: TStory;
|
|
9
|
-
export declare const LimitedAuthority: TStory;
|
|
10
|
-
export declare const RTLDirection: TStory;
|
|
11
|
-
export declare const MinimalNavigation: TStory;
|
|
12
|
-
export declare const WithMenuClick: TStory;
|
|
13
|
-
export declare const TicketSubmenu: TStory;
|
|
14
|
-
export declare const TicketSubmenuSortOrderStable: TStory;
|
|
15
7
|
//# sourceMappingURL=VerticalMenuContent.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalMenuContent.stories.d.ts","sourceRoot":"","sources":["../../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"VerticalMenuContent.stories.d.ts","sourceRoot":"","sources":["../../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AAsBvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CA0B1C,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,MAAM,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAElD,eAAO,MAAM,OAAO,EAAE,MAgBrB,CAAA"}
|
package/dist/@types/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalSingleMenuItem.d.ts","sourceRoot":"","sources":["../../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAIzD,KAAK,YAAY,GAAG,CAChB,GAAG,EAAE,cAAc,EACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,KACxB,KAAK,CAAC,SAAS,CAAA;AAEpB,UAAU,kBAAmB,SAAQ,WAAW;IAC5C,GAAG,EAAE,cAAc,CAAA;IACnB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC1E,CAAC,EAAE,CACC,GAAG,EAAE,MAAM,EACX,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAClD,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,EAAE,MAAM,EAAE,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACxB;AAED,UAAU,gBAAgB;IACtB,GAAG,EAAE,cAAc,CAAA;IACnB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,CAAC,EAAE,CACC,GAAG,EAAE,MAAM,EACX,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAClD,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,MAAM,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,YAAY,CAAA;CAC9B;AAED,UAAU,qBAAsB,SAAQ,kBAAkB,EAAE,gBAAgB;CAAG;
|
|
1
|
+
{"version":3,"file":"VerticalSingleMenuItem.d.ts","sourceRoot":"","sources":["../../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAIzD,KAAK,YAAY,GAAG,CAChB,GAAG,EAAE,cAAc,EACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,KACxB,KAAK,CAAC,SAAS,CAAA;AAEpB,UAAU,kBAAmB,SAAQ,WAAW;IAC5C,GAAG,EAAE,cAAc,CAAA;IACnB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC1E,CAAC,EAAE,CACC,GAAG,EAAE,MAAM,EACX,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAClD,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,EAAE,MAAM,EAAE,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACxB;AAED,UAAU,gBAAgB;IACtB,GAAG,EAAE,cAAc,CAAA;IACnB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,CAAC,EAAE,CACC,GAAG,EAAE,MAAM,EACX,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAClD,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,MAAM,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,YAAY,CAAA;CAC9B;AAED,UAAU,qBAAsB,SAAQ,kBAAkB,EAAE,gBAAgB;CAAG;AAmD/E,QAAA,MAAM,sBAAsB,GAAI,OAAO,qBAAqB,4CAoC3D,CAAA;AACD,eAAe,sBAAsB,CAAA"}
|
|
@@ -4493,9 +4493,6 @@ hr:is(.dark *){
|
|
|
4493
4493
|
.-left-2{
|
|
4494
4494
|
left: -0.5rem;
|
|
4495
4495
|
}
|
|
4496
|
-
.-left-3{
|
|
4497
|
-
left: -0.75rem;
|
|
4498
|
-
}
|
|
4499
4496
|
.-right-2{
|
|
4500
4497
|
right: -0.5rem;
|
|
4501
4498
|
}
|
|
@@ -4556,9 +4553,6 @@ hr:is(.dark *){
|
|
|
4556
4553
|
.z-10{
|
|
4557
4554
|
z-index: 10;
|
|
4558
4555
|
}
|
|
4559
|
-
.z-20{
|
|
4560
|
-
z-index: 20;
|
|
4561
|
-
}
|
|
4562
4556
|
.z-30{
|
|
4563
4557
|
z-index: 30;
|
|
4564
4558
|
}
|
|
@@ -5275,9 +5269,6 @@ hr:is(.dark *){
|
|
|
5275
5269
|
.min-w-\[330px\]{
|
|
5276
5270
|
min-width: 330px;
|
|
5277
5271
|
}
|
|
5278
|
-
.min-w-\[calc\(100\%\+1\.5rem\)\]{
|
|
5279
|
-
min-width: calc(100% + 1.5rem);
|
|
5280
|
-
}
|
|
5281
5272
|
.min-w-full{
|
|
5282
5273
|
min-width: 100%;
|
|
5283
5274
|
}
|
|
@@ -5624,6 +5615,9 @@ hr:is(.dark *){
|
|
|
5624
5615
|
.text-clip{
|
|
5625
5616
|
text-overflow: clip;
|
|
5626
5617
|
}
|
|
5618
|
+
.whitespace-normal{
|
|
5619
|
+
white-space: normal;
|
|
5620
|
+
}
|
|
5627
5621
|
.whitespace-nowrap{
|
|
5628
5622
|
white-space: nowrap;
|
|
5629
5623
|
}
|
|
@@ -7110,9 +7104,6 @@ hr:is(.dark *){
|
|
|
7110
7104
|
.active\:bg-gray-100:active{
|
|
7111
7105
|
background-color: var(--gray-100);
|
|
7112
7106
|
}
|
|
7113
|
-
.group\/item:hover .group-hover\/item\:block{
|
|
7114
|
-
display: block;
|
|
7115
|
-
}
|
|
7116
7107
|
.group:hover .group-hover\:block{
|
|
7117
7108
|
display: block;
|
|
7118
7109
|
}
|
|
@@ -7157,9 +7148,6 @@ hr:is(.dark *){
|
|
|
7157
7148
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
|
7158
7149
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
7159
7150
|
}
|
|
7160
|
-
.group\/item:focus-visible .group-focus-visible\/item\:block{
|
|
7161
|
-
display: block;
|
|
7162
|
-
}
|
|
7163
7151
|
.group.active .group-\[\.active\]\:bg-white{
|
|
7164
7152
|
--tw-bg-opacity: 1;
|
|
7165
7153
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
@@ -2,12 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
|
|
|
2
2
|
import { BrowserRouter } from 'react-router-dom'
|
|
3
3
|
import VerticalMenuContent from './VerticalMenuContent'
|
|
4
4
|
import type { NavigationTree } from '@/@types/navigation'
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
NAV_ITEM_TYPE_COLLAPSE,
|
|
8
|
-
NAV_ITEM_TYPE_ITEM,
|
|
9
|
-
NAV_ITEM_TYPE_TITLE,
|
|
10
|
-
} from '@/constants/navigation.constant'
|
|
5
|
+
import modulesNavigationConfig from '@base/configs/navigation.config/modules.navigation'
|
|
11
6
|
|
|
12
7
|
const collectAuthorityPaths = (navTree: NavigationTree[]): string[] => {
|
|
13
8
|
return navTree.reduce((acc: string[], node) => {
|
|
@@ -23,151 +18,10 @@ const collectAuthorityPaths = (navTree: NavigationTree[]): string[] => {
|
|
|
23
18
|
}, [])
|
|
24
19
|
}
|
|
25
20
|
|
|
26
|
-
const
|
|
27
|
-
new Set(collectAuthorityPaths(
|
|
21
|
+
const allAuthority = Array.from(
|
|
22
|
+
new Set(collectAuthorityPaths(modulesNavigationConfig)),
|
|
28
23
|
)
|
|
29
24
|
|
|
30
|
-
const ticketSubmenuAllExpanded: NavigationTree[] = ticketNavigationConfig.map(
|
|
31
|
-
(menu) => {
|
|
32
|
-
if (menu.key !== 'ticket') {
|
|
33
|
-
return menu
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
return {
|
|
37
|
-
...menu,
|
|
38
|
-
subMenu: menu.subMenu.map((subMenu) => {
|
|
39
|
-
if (
|
|
40
|
-
subMenu.key === 'ticket.relatorios' ||
|
|
41
|
-
subMenu.key === 'ticket.cadastros'
|
|
42
|
-
) {
|
|
43
|
-
return {
|
|
44
|
-
...subMenu,
|
|
45
|
-
type: NAV_ITEM_TYPE_TITLE,
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
return subMenu
|
|
50
|
-
}),
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
)
|
|
54
|
-
|
|
55
|
-
const mockNavigationTree: NavigationTree[] = [
|
|
56
|
-
{
|
|
57
|
-
key: 'inicio',
|
|
58
|
-
path: '/inicio',
|
|
59
|
-
title: 'Início',
|
|
60
|
-
translateKey: 'nav.inicio',
|
|
61
|
-
icon: '',
|
|
62
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
63
|
-
authority: ['/inicio'],
|
|
64
|
-
subMenu: [],
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
key: 'cadastros',
|
|
68
|
-
path: '',
|
|
69
|
-
title: 'Cadastros',
|
|
70
|
-
translateKey: 'nav.cadastros',
|
|
71
|
-
icon: '',
|
|
72
|
-
type: NAV_ITEM_TYPE_COLLAPSE,
|
|
73
|
-
authority: ['/cadastros'],
|
|
74
|
-
subMenu: [
|
|
75
|
-
{
|
|
76
|
-
key: 'clientes',
|
|
77
|
-
path: '/cadastros/clientes',
|
|
78
|
-
title: 'Clientes',
|
|
79
|
-
translateKey: 'nav.clientes',
|
|
80
|
-
icon: '',
|
|
81
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
82
|
-
authority: ['/cadastros/clientes'],
|
|
83
|
-
subMenu: [],
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
key: 'fornecedores',
|
|
87
|
-
path: '/cadastros/fornecedores',
|
|
88
|
-
title: 'Fornecedores',
|
|
89
|
-
translateKey: 'nav.fornecedores',
|
|
90
|
-
icon: '',
|
|
91
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
92
|
-
authority: ['/cadastros/fornecedores'],
|
|
93
|
-
subMenu: [],
|
|
94
|
-
},
|
|
95
|
-
],
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
key: 'relatorios',
|
|
99
|
-
path: '/relatorios',
|
|
100
|
-
title: 'Relatórios',
|
|
101
|
-
translateKey: 'nav.relatorios',
|
|
102
|
-
icon: 'ChartBarIcon',
|
|
103
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
104
|
-
authority: ['/relatorios'],
|
|
105
|
-
subMenu: [],
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
key: 'configuracoes',
|
|
109
|
-
path: '',
|
|
110
|
-
title: 'Configurações',
|
|
111
|
-
translateKey: 'nav.configuracoes',
|
|
112
|
-
icon: '',
|
|
113
|
-
type: NAV_ITEM_TYPE_COLLAPSE,
|
|
114
|
-
authority: ['/configuracoes'],
|
|
115
|
-
subMenu: [
|
|
116
|
-
{
|
|
117
|
-
key: 'perfil',
|
|
118
|
-
path: '/configuracoes/perfil',
|
|
119
|
-
title: 'Perfil',
|
|
120
|
-
translateKey: 'nav.perfil',
|
|
121
|
-
icon: '',
|
|
122
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
123
|
-
authority: ['/configuracoes/perfil'],
|
|
124
|
-
subMenu: [],
|
|
125
|
-
},
|
|
126
|
-
{
|
|
127
|
-
key: 'integracoes',
|
|
128
|
-
path: '',
|
|
129
|
-
title: 'Integrações',
|
|
130
|
-
translateKey: 'nav.integracoes',
|
|
131
|
-
icon: '',
|
|
132
|
-
type: NAV_ITEM_TYPE_COLLAPSE,
|
|
133
|
-
authority: ['/configuracoes/integracoes'],
|
|
134
|
-
subMenu: [
|
|
135
|
-
{
|
|
136
|
-
key: 'webhooks',
|
|
137
|
-
path: '/configuracoes/integracoes/webhooks',
|
|
138
|
-
title: 'Webhooks',
|
|
139
|
-
translateKey: 'nav.webhooks',
|
|
140
|
-
icon: 'WebhookIcon',
|
|
141
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
142
|
-
authority: ['/configuracoes/integracoes/webhooks'],
|
|
143
|
-
subMenu: [],
|
|
144
|
-
},
|
|
145
|
-
{
|
|
146
|
-
key: 'lorem.ipsum',
|
|
147
|
-
path: '/configuracoes/integracoes/lorem-ipsum',
|
|
148
|
-
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
|
149
|
-
translateKey: 'nav.loremIpsum',
|
|
150
|
-
icon: 'LoremIpsumIcon',
|
|
151
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
152
|
-
authority: ['/configuracoes/integracoes/lorem-ipsum'],
|
|
153
|
-
subMenu: [],
|
|
154
|
-
},
|
|
155
|
-
],
|
|
156
|
-
},
|
|
157
|
-
],
|
|
158
|
-
},
|
|
159
|
-
]
|
|
160
|
-
|
|
161
|
-
const allUserAuthority = [
|
|
162
|
-
'/inicio',
|
|
163
|
-
'/cadastros/clientes',
|
|
164
|
-
'/cadastros/fornecedores',
|
|
165
|
-
'/relatorios',
|
|
166
|
-
'/configuracoes/perfil',
|
|
167
|
-
'/configuracoes/integracoes/webhooks',
|
|
168
|
-
'/configuracoes/integracoes/lorem-ipsum',
|
|
169
|
-
]
|
|
170
|
-
|
|
171
25
|
const meta: Meta<typeof VerticalMenuContent> = {
|
|
172
26
|
title: '@ecme/Template/VerticalMenuContent',
|
|
173
27
|
component: VerticalMenuContent,
|
|
@@ -202,110 +56,17 @@ type TStory = StoryObj<typeof VerticalMenuContent>
|
|
|
202
56
|
export const Default: TStory = {
|
|
203
57
|
args: {
|
|
204
58
|
collapsed: false,
|
|
205
|
-
routeKey: '
|
|
206
|
-
navigationTree:
|
|
207
|
-
userAuthority:
|
|
208
|
-
direction: 'ltr',
|
|
209
|
-
translationSetup: true,
|
|
210
|
-
},
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
export const Collapsed: TStory = {
|
|
214
|
-
args: {
|
|
215
|
-
collapsed: true,
|
|
216
|
-
routeKey: '/cadastros/clientes',
|
|
217
|
-
navigationTree: mockNavigationTree,
|
|
218
|
-
userAuthority: allUserAuthority,
|
|
219
|
-
direction: 'ltr',
|
|
220
|
-
translationSetup: true,
|
|
221
|
-
},
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
export const WithExpandedMenu: TStory = {
|
|
225
|
-
args: {
|
|
226
|
-
collapsed: false,
|
|
227
|
-
routeKey: '/configuracoes/integracoes/webhooks',
|
|
228
|
-
navigationTree: mockNavigationTree,
|
|
229
|
-
userAuthority: allUserAuthority,
|
|
230
|
-
direction: 'ltr',
|
|
231
|
-
translationSetup: true,
|
|
232
|
-
},
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
export const LimitedAuthority: TStory = {
|
|
236
|
-
args: {
|
|
237
|
-
collapsed: false,
|
|
238
|
-
routeKey: '/inicio',
|
|
239
|
-
navigationTree: mockNavigationTree,
|
|
240
|
-
userAuthority: ['/inicio', '/relatorios'],
|
|
241
|
-
direction: 'ltr',
|
|
242
|
-
translationSetup: true,
|
|
243
|
-
},
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
export const RTLDirection: TStory = {
|
|
247
|
-
args: {
|
|
248
|
-
collapsed: false,
|
|
249
|
-
routeKey: '/inicio',
|
|
250
|
-
navigationTree: mockNavigationTree,
|
|
251
|
-
userAuthority: allUserAuthority,
|
|
252
|
-
direction: 'rtl',
|
|
253
|
-
translationSetup: true,
|
|
254
|
-
},
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
export const MinimalNavigation: TStory = {
|
|
258
|
-
args: {
|
|
259
|
-
collapsed: false,
|
|
260
|
-
routeKey: '/inicio',
|
|
261
|
-
navigationTree: [
|
|
262
|
-
{
|
|
263
|
-
key: 'inicio',
|
|
264
|
-
path: '/inicio',
|
|
265
|
-
title: 'Início',
|
|
266
|
-
translateKey: 'nav.inicio',
|
|
267
|
-
icon: '',
|
|
268
|
-
type: NAV_ITEM_TYPE_ITEM,
|
|
269
|
-
authority: ['/inicio'],
|
|
270
|
-
subMenu: [],
|
|
271
|
-
},
|
|
272
|
-
],
|
|
273
|
-
userAuthority: ['/inicio'],
|
|
274
|
-
direction: 'ltr',
|
|
275
|
-
translationSetup: true,
|
|
276
|
-
},
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
export const WithMenuClick: TStory = {
|
|
280
|
-
args: {
|
|
281
|
-
collapsed: false,
|
|
282
|
-
routeKey: '/inicio',
|
|
283
|
-
navigationTree: mockNavigationTree,
|
|
284
|
-
userAuthority: allUserAuthority,
|
|
285
|
-
direction: 'ltr',
|
|
286
|
-
translationSetup: true,
|
|
287
|
-
onMenuItemClick: () => alert('Menu item clicked!'),
|
|
288
|
-
},
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
export const TicketSubmenu: TStory = {
|
|
292
|
-
args: {
|
|
293
|
-
collapsed: false,
|
|
294
|
-
routeKey: 'ticket',
|
|
295
|
-
navigationTree: ticketNavigationConfig,
|
|
296
|
-
userAuthority: ticketAuthority,
|
|
297
|
-
direction: 'ltr',
|
|
298
|
-
translationSetup: true,
|
|
299
|
-
},
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
export const TicketSubmenuSortOrderStable: TStory = {
|
|
303
|
-
args: {
|
|
304
|
-
collapsed: false,
|
|
305
|
-
routeKey: 'ticket',
|
|
306
|
-
navigationTree: ticketSubmenuAllExpanded,
|
|
307
|
-
userAuthority: ticketAuthority,
|
|
59
|
+
routeKey: 'modules',
|
|
60
|
+
navigationTree: modulesNavigationConfig,
|
|
61
|
+
userAuthority: allAuthority,
|
|
308
62
|
direction: 'ltr',
|
|
309
63
|
translationSetup: true,
|
|
310
64
|
},
|
|
65
|
+
decorators: [
|
|
66
|
+
(Story) => (
|
|
67
|
+
<div style={{ maxWidth: '25vw' }}>
|
|
68
|
+
<Story />
|
|
69
|
+
</div>
|
|
70
|
+
),
|
|
71
|
+
],
|
|
311
72
|
}
|
|
@@ -57,37 +57,15 @@ const DefaultItem = (props: DefaultItemProps) => {
|
|
|
57
57
|
linkRenderer,
|
|
58
58
|
} = props
|
|
59
59
|
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
const renderItemContent = (titleClassName?: string) => (
|
|
60
|
+
const linkContent = (
|
|
63
61
|
<>
|
|
64
62
|
{showIcon && <VerticalMenuIcon icon={nav.icon} />}
|
|
65
63
|
{showTitle && (
|
|
66
|
-
<span className=
|
|
64
|
+
<span className="whitespace-normal">{t(nav.translateKey, nav.title)}</span>
|
|
67
65
|
)}
|
|
68
66
|
</>
|
|
69
67
|
)
|
|
70
68
|
|
|
71
|
-
const linkContent = (
|
|
72
|
-
<span className="relative flex min-w-0 flex-1 items-center gap-2">
|
|
73
|
-
<span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
|
|
74
|
-
{renderItemContent('truncate')}
|
|
75
|
-
</span>
|
|
76
|
-
{showTitle && (
|
|
77
|
-
<div className="w-100 absolute -left-3 top-1/2 z-20 hidden min-w-[calc(100%+1.5rem)] -translate-y-1/2 group-hover/item:block group-focus-visible/item:block">
|
|
78
|
-
<ScrollBar
|
|
79
|
-
autoHide
|
|
80
|
-
className="max-h-16 rounded-lg bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-100"
|
|
81
|
-
>
|
|
82
|
-
<div className="flex h-full w-max min-w-full items-center gap-2 whitespace-nowrap rounded-lg px-3 font-semibold">
|
|
83
|
-
{renderItemContent()}
|
|
84
|
-
</div>
|
|
85
|
-
</ScrollBar>
|
|
86
|
-
</div>
|
|
87
|
-
)}
|
|
88
|
-
</span>
|
|
89
|
-
)
|
|
90
|
-
|
|
91
69
|
const renderLink = () => {
|
|
92
70
|
if (linkRenderer) {
|
|
93
71
|
return linkRenderer(nav, linkContent)
|
|
@@ -96,7 +74,7 @@ const DefaultItem = (props: DefaultItemProps) => {
|
|
|
96
74
|
return (
|
|
97
75
|
<Link
|
|
98
76
|
to={nav.path}
|
|
99
|
-
className="
|
|
77
|
+
className="flex h-full w-full items-center gap-2"
|
|
100
78
|
target={nav.isExternalLink ? '_blank' : ''}
|
|
101
79
|
onClick={() =>
|
|
102
80
|
onLinkClick?.({
|
package/package.json
CHANGED