@finema/finework-layer 0.0.14 → 0.0.15
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
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.0.15](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.0.14...0.0.15) (2025-10-14)
|
|
4
|
+
|
|
5
|
+
### Bug Fixes
|
|
6
|
+
|
|
7
|
+
* **admin:** always show logo in sidebar ([914c216](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/914c216503b911574d85d658b7cf76618d58e007))
|
|
8
|
+
|
|
3
9
|
## [0.0.14](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.0.13...0.0.14) (2025-10-14)
|
|
4
10
|
|
|
5
11
|
### Bug Fixes
|
|
@@ -1,220 +1,220 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="relative flex min-h-screen flex-1">
|
|
3
|
-
<div
|
|
4
|
-
:class="[`
|
|
5
|
-
fixed inset-0 z-30 hidden w-auto
|
|
6
|
-
lg:block
|
|
7
|
-
`, {
|
|
8
|
-
'max-w-[88px]': isCollapsed,
|
|
9
|
-
'max-w-[260px]': !isCollapsed,
|
|
10
|
-
}]"
|
|
11
|
-
>
|
|
12
|
-
<Sidebar
|
|
13
|
-
:label="label"
|
|
14
|
-
:is-collapsed="isCollapsed"
|
|
15
|
-
:items="sidebarItems"
|
|
16
|
-
:is-group="isSidebarGroup"
|
|
17
|
-
@toggle-collapsed="isCollapsed = !isCollapsed"
|
|
18
|
-
/>
|
|
19
|
-
</div>
|
|
20
|
-
<div
|
|
21
|
-
:class="['w-full bg-gray-50', {
|
|
22
|
-
'lg:pl-[88px]': isCollapsed,
|
|
23
|
-
'lg:pl-[260px]': !isCollapsed,
|
|
24
|
-
}]"
|
|
25
|
-
>
|
|
26
|
-
<nav
|
|
27
|
-
class="
|
|
28
|
-
fixed top-0 left-0 z-20 flex min-h-[64px] w-screen items-center justify-between
|
|
29
|
-
gap-4 bg-white px-5 lg:min-h-[72px]
|
|
30
|
-
lg:justify-end
|
|
31
|
-
"
|
|
32
|
-
style="box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);"
|
|
33
|
-
>
|
|
34
|
-
<div class="flex items-center gap-4">
|
|
35
|
-
<Slideover
|
|
36
|
-
v-model:open="isShowSidebarMobile"
|
|
37
|
-
:ui="{
|
|
38
|
-
content: 'w-[80%] max-w-[260px] lg:hidden',
|
|
39
|
-
overlay: 'lg:hidden',
|
|
40
|
-
}"
|
|
41
|
-
side="left"
|
|
42
|
-
>
|
|
43
|
-
<svg
|
|
44
|
-
class="
|
|
45
|
-
cursor-pointer
|
|
46
|
-
lg:hidden
|
|
47
|
-
"
|
|
48
|
-
width="19"
|
|
49
|
-
height="18"
|
|
50
|
-
viewBox="0 0 19 18"
|
|
51
|
-
fill="none"
|
|
52
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
53
|
-
transform="scale(-1, 1)"
|
|
54
|
-
@click="isShowSidebarMobile = true"
|
|
55
|
-
>
|
|
56
|
-
<path
|
|
57
|
-
d="M10 18L10 16L19 16L19 18L10 18ZM6 2L6 -2.62268e-07L19 -8.30516e-07L19 2L6 2ZM-3.49691e-07 10L-4.37114e-07 8L19 8L19 10L-3.49691e-07 10Z"
|
|
58
|
-
fill="#4B5563"
|
|
59
|
-
/>
|
|
60
|
-
</svg>
|
|
61
|
-
|
|
62
|
-
<template #content>
|
|
63
|
-
<Sidebar
|
|
64
|
-
:label="label"
|
|
65
|
-
:is-collapsed="false"
|
|
66
|
-
:is-mobile="true"
|
|
67
|
-
:items="sidebarItems"
|
|
68
|
-
:is-group="isSidebarGroup"
|
|
69
|
-
@toggle-collapsed="isShowSidebarMobile = false"
|
|
70
|
-
/>
|
|
71
|
-
</template>
|
|
72
|
-
</Slideover>
|
|
73
|
-
<NuxtLink :to="routes.home.to">
|
|
74
|
-
<img
|
|
75
|
-
src="/logo-mini.png"
|
|
76
|
-
alt="logo_mini_color"
|
|
77
|
-
class="
|
|
78
|
-
w-[126px] min-w-[126px] lg:hidden
|
|
79
|
-
lg:w-[172px] lg:min-w-[172px]
|
|
80
|
-
"
|
|
81
|
-
/>
|
|
82
|
-
</NuxtLink>
|
|
83
|
-
<Apps class="lg:hidden" />
|
|
84
|
-
</div>
|
|
85
|
-
|
|
86
|
-
<div class="flex items-center justify-center gap-4">
|
|
87
|
-
<DropdownMenu
|
|
88
|
-
size="xl"
|
|
89
|
-
:items="userMenuItems"
|
|
90
|
-
:content="{
|
|
91
|
-
align: 'end',
|
|
92
|
-
side: 'bottom',
|
|
93
|
-
}"
|
|
94
|
-
:ui="{
|
|
95
|
-
content: 'w-48',
|
|
96
|
-
}"
|
|
97
|
-
>
|
|
98
|
-
<div class="relative flex cursor-pointer items-center gap-2">
|
|
99
|
-
<div
|
|
100
|
-
class="hidden flex-col justify-end text-right lg:flex"
|
|
101
|
-
>
|
|
102
|
-
<p class="font-bold">
|
|
103
|
-
{{ auth.me.value?.display_name || auth.me.value?.full_name }}
|
|
104
|
-
</p>
|
|
105
|
-
<p class="text-muted text-sm">
|
|
106
|
-
{{ auth.me.value?.email || '' }}
|
|
107
|
-
</p>
|
|
108
|
-
</div>
|
|
109
|
-
<Avatar
|
|
110
|
-
class="border-muted size-[40px] border text-2xl"
|
|
111
|
-
icon="ri:user-line"
|
|
112
|
-
:src="auth.me.value?.avatar_url || ''"
|
|
113
|
-
/>
|
|
114
|
-
<Icon
|
|
115
|
-
name="i-ph:caret-down-light"
|
|
116
|
-
class="size-5"
|
|
117
|
-
/>
|
|
118
|
-
</div>
|
|
119
|
-
</DropdownMenu>
|
|
120
|
-
</div>
|
|
121
|
-
</nav>
|
|
122
|
-
<div class="w-full bg-gray-50 pt-[64px] lg:pt-[72px]">
|
|
123
|
-
<main
|
|
124
|
-
class="
|
|
125
|
-
mx-auto min-h-full w-full flex-1 px-6 py-10 lg:px-8
|
|
126
|
-
"
|
|
127
|
-
>
|
|
128
|
-
<Breadcrumb
|
|
129
|
-
v-if="!app.pageMeta.isHideBreadcrumbs && breadcrumbsItems.length > 1"
|
|
130
|
-
:items="breadcrumbsItems"
|
|
131
|
-
class="mb-6"
|
|
132
|
-
:ui="{
|
|
133
|
-
item: 'max-w-2/3',
|
|
134
|
-
list: 'w-full',
|
|
135
|
-
}"
|
|
136
|
-
/>
|
|
137
|
-
<div
|
|
138
|
-
v-if="app.pageMeta.title"
|
|
139
|
-
class="
|
|
140
|
-
mb-4 flex flex-col justify-between gap-1 md:mb-6 md:gap-4
|
|
141
|
-
lg:flex-row lg:items-start
|
|
142
|
-
"
|
|
143
|
-
>
|
|
144
|
-
<div class="flex flex-1 flex-col">
|
|
145
|
-
<h1
|
|
146
|
-
class="
|
|
147
|
-
text-3xl font-bold wrap-break-word
|
|
148
|
-
lg:max-w-2/3
|
|
149
|
-
"
|
|
150
|
-
:title="app.pageMeta.title"
|
|
151
|
-
>
|
|
152
|
-
{{ app.pageMeta.title }}
|
|
153
|
-
<span id="page-title-extra" />
|
|
154
|
-
</h1>
|
|
155
|
-
|
|
156
|
-
<div id="page-subtitle" />
|
|
157
|
-
<p
|
|
158
|
-
v-if="app.pageMeta.sub_title"
|
|
159
|
-
class="text-[#475467]"
|
|
160
|
-
>
|
|
161
|
-
{{ app.pageMeta.sub_title }}
|
|
162
|
-
</p>
|
|
163
|
-
</div>
|
|
164
|
-
<div id="page-header" />
|
|
165
|
-
</div>
|
|
166
|
-
<slot />
|
|
167
|
-
</main>
|
|
168
|
-
</div>
|
|
169
|
-
</div>
|
|
170
|
-
</div>
|
|
171
|
-
</template>
|
|
172
|
-
|
|
173
|
-
<script lang="ts" setup>
|
|
174
|
-
import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
|
|
175
|
-
import { computed } from 'vue'
|
|
176
|
-
import Sidebar from './Sidebar.vue'
|
|
177
|
-
import Apps from './Apps.vue'
|
|
178
|
-
|
|
179
|
-
defineProps<{
|
|
180
|
-
label: string
|
|
181
|
-
sidebarItems: NavigationMenuItem[]
|
|
182
|
-
isSidebarGroup?: boolean
|
|
183
|
-
}>()
|
|
184
|
-
|
|
185
|
-
const app = useApp()
|
|
186
|
-
const isShowSidebarMobile = ref(false)
|
|
187
|
-
const auth = useAuth()
|
|
188
|
-
// Cookie to store user preference for desktop
|
|
189
|
-
const isCollapsed = useCookie<boolean>('app.admin.sidebar.isCollapsed', {
|
|
190
|
-
default: () => false,
|
|
191
|
-
path: '/',
|
|
192
|
-
})
|
|
193
|
-
|
|
194
|
-
const userMenuItems: DropdownMenuItem[] = [
|
|
195
|
-
{
|
|
196
|
-
label: 'View profile',
|
|
197
|
-
icon: 'i-lucide-user',
|
|
198
|
-
to: routes.account.profile.to,
|
|
199
|
-
},
|
|
200
|
-
|
|
201
|
-
{
|
|
202
|
-
label: routes.logout.label,
|
|
203
|
-
icon: 'i-lucide-log-out',
|
|
204
|
-
to: routes.logout.to,
|
|
205
|
-
external: true,
|
|
206
|
-
},
|
|
207
|
-
]
|
|
208
|
-
|
|
209
|
-
const breadcrumbsItems = computed(() => [
|
|
210
|
-
// {
|
|
211
|
-
// label: '',
|
|
212
|
-
// icon: 'ph:house',
|
|
213
|
-
// to: '/',
|
|
214
|
-
// },
|
|
215
|
-
...(app.pageMeta.breadcrumbs || []).map((item: any) => ({
|
|
216
|
-
...item,
|
|
217
|
-
icon: '',
|
|
218
|
-
})),
|
|
219
|
-
])
|
|
220
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="relative flex min-h-screen flex-1">
|
|
3
|
+
<div
|
|
4
|
+
:class="[`
|
|
5
|
+
fixed inset-0 z-30 hidden w-auto
|
|
6
|
+
lg:block
|
|
7
|
+
`, {
|
|
8
|
+
'max-w-[88px]': isCollapsed,
|
|
9
|
+
'max-w-[260px]': !isCollapsed,
|
|
10
|
+
}]"
|
|
11
|
+
>
|
|
12
|
+
<Sidebar
|
|
13
|
+
:label="label"
|
|
14
|
+
:is-collapsed="isCollapsed"
|
|
15
|
+
:items="sidebarItems"
|
|
16
|
+
:is-group="isSidebarGroup"
|
|
17
|
+
@toggle-collapsed="isCollapsed = !isCollapsed"
|
|
18
|
+
/>
|
|
19
|
+
</div>
|
|
20
|
+
<div
|
|
21
|
+
:class="['w-full bg-gray-50', {
|
|
22
|
+
'lg:pl-[88px]': isCollapsed,
|
|
23
|
+
'lg:pl-[260px]': !isCollapsed,
|
|
24
|
+
}]"
|
|
25
|
+
>
|
|
26
|
+
<nav
|
|
27
|
+
class="
|
|
28
|
+
fixed top-0 left-0 z-20 flex min-h-[64px] w-screen items-center justify-between
|
|
29
|
+
gap-4 bg-white px-5 lg:min-h-[72px]
|
|
30
|
+
lg:justify-end
|
|
31
|
+
"
|
|
32
|
+
style="box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);"
|
|
33
|
+
>
|
|
34
|
+
<div class="flex items-center gap-4">
|
|
35
|
+
<Slideover
|
|
36
|
+
v-model:open="isShowSidebarMobile"
|
|
37
|
+
:ui="{
|
|
38
|
+
content: 'w-[80%] max-w-[260px] lg:hidden',
|
|
39
|
+
overlay: 'lg:hidden',
|
|
40
|
+
}"
|
|
41
|
+
side="left"
|
|
42
|
+
>
|
|
43
|
+
<svg
|
|
44
|
+
class="
|
|
45
|
+
cursor-pointer
|
|
46
|
+
lg:hidden
|
|
47
|
+
"
|
|
48
|
+
width="19"
|
|
49
|
+
height="18"
|
|
50
|
+
viewBox="0 0 19 18"
|
|
51
|
+
fill="none"
|
|
52
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
53
|
+
transform="scale(-1, 1)"
|
|
54
|
+
@click="isShowSidebarMobile = true"
|
|
55
|
+
>
|
|
56
|
+
<path
|
|
57
|
+
d="M10 18L10 16L19 16L19 18L10 18ZM6 2L6 -2.62268e-07L19 -8.30516e-07L19 2L6 2ZM-3.49691e-07 10L-4.37114e-07 8L19 8L19 10L-3.49691e-07 10Z"
|
|
58
|
+
fill="#4B5563"
|
|
59
|
+
/>
|
|
60
|
+
</svg>
|
|
61
|
+
|
|
62
|
+
<template #content>
|
|
63
|
+
<Sidebar
|
|
64
|
+
:label="label"
|
|
65
|
+
:is-collapsed="false"
|
|
66
|
+
:is-mobile="true"
|
|
67
|
+
:items="sidebarItems"
|
|
68
|
+
:is-group="isSidebarGroup"
|
|
69
|
+
@toggle-collapsed="isShowSidebarMobile = false"
|
|
70
|
+
/>
|
|
71
|
+
</template>
|
|
72
|
+
</Slideover>
|
|
73
|
+
<NuxtLink :to="routes.home.to">
|
|
74
|
+
<img
|
|
75
|
+
src="/logo-mini.png"
|
|
76
|
+
alt="logo_mini_color"
|
|
77
|
+
class="
|
|
78
|
+
w-[126px] min-w-[126px] lg:hidden
|
|
79
|
+
lg:w-[172px] lg:min-w-[172px]
|
|
80
|
+
"
|
|
81
|
+
/>
|
|
82
|
+
</NuxtLink>
|
|
83
|
+
<Apps class="lg:hidden" />
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div class="flex items-center justify-center gap-4">
|
|
87
|
+
<DropdownMenu
|
|
88
|
+
size="xl"
|
|
89
|
+
:items="userMenuItems"
|
|
90
|
+
:content="{
|
|
91
|
+
align: 'end',
|
|
92
|
+
side: 'bottom',
|
|
93
|
+
}"
|
|
94
|
+
:ui="{
|
|
95
|
+
content: 'w-48',
|
|
96
|
+
}"
|
|
97
|
+
>
|
|
98
|
+
<div class="relative flex cursor-pointer items-center gap-2">
|
|
99
|
+
<div
|
|
100
|
+
class="hidden flex-col justify-end text-right lg:flex"
|
|
101
|
+
>
|
|
102
|
+
<p class="font-bold">
|
|
103
|
+
{{ auth.me.value?.display_name || auth.me.value?.full_name }}
|
|
104
|
+
</p>
|
|
105
|
+
<p class="text-muted text-sm">
|
|
106
|
+
{{ auth.me.value?.email || '' }}
|
|
107
|
+
</p>
|
|
108
|
+
</div>
|
|
109
|
+
<Avatar
|
|
110
|
+
class="border-muted size-[40px] border text-2xl"
|
|
111
|
+
icon="ri:user-line"
|
|
112
|
+
:src="auth.me.value?.avatar_url || ''"
|
|
113
|
+
/>
|
|
114
|
+
<Icon
|
|
115
|
+
name="i-ph:caret-down-light"
|
|
116
|
+
class="size-5"
|
|
117
|
+
/>
|
|
118
|
+
</div>
|
|
119
|
+
</DropdownMenu>
|
|
120
|
+
</div>
|
|
121
|
+
</nav>
|
|
122
|
+
<div class="w-full bg-gray-50 pt-[64px] lg:pt-[72px]">
|
|
123
|
+
<main
|
|
124
|
+
class="
|
|
125
|
+
mx-auto min-h-full w-full flex-1 px-6 py-10 lg:px-8
|
|
126
|
+
"
|
|
127
|
+
>
|
|
128
|
+
<Breadcrumb
|
|
129
|
+
v-if="!app.pageMeta.isHideBreadcrumbs && breadcrumbsItems.length > 1"
|
|
130
|
+
:items="breadcrumbsItems"
|
|
131
|
+
class="mb-6"
|
|
132
|
+
:ui="{
|
|
133
|
+
item: 'max-w-2/3',
|
|
134
|
+
list: 'w-full',
|
|
135
|
+
}"
|
|
136
|
+
/>
|
|
137
|
+
<div
|
|
138
|
+
v-if="app.pageMeta.title"
|
|
139
|
+
class="
|
|
140
|
+
mb-4 flex flex-col justify-between gap-1 md:mb-6 md:gap-4
|
|
141
|
+
lg:flex-row lg:items-start
|
|
142
|
+
"
|
|
143
|
+
>
|
|
144
|
+
<div class="flex flex-1 flex-col">
|
|
145
|
+
<h1
|
|
146
|
+
class="
|
|
147
|
+
text-3xl font-bold wrap-break-word
|
|
148
|
+
lg:max-w-2/3
|
|
149
|
+
"
|
|
150
|
+
:title="app.pageMeta.title"
|
|
151
|
+
>
|
|
152
|
+
{{ app.pageMeta.title }}
|
|
153
|
+
<span id="page-title-extra" />
|
|
154
|
+
</h1>
|
|
155
|
+
|
|
156
|
+
<div id="page-subtitle" />
|
|
157
|
+
<p
|
|
158
|
+
v-if="app.pageMeta.sub_title"
|
|
159
|
+
class="text-[#475467]"
|
|
160
|
+
>
|
|
161
|
+
{{ app.pageMeta.sub_title }}
|
|
162
|
+
</p>
|
|
163
|
+
</div>
|
|
164
|
+
<div id="page-header" />
|
|
165
|
+
</div>
|
|
166
|
+
<slot />
|
|
167
|
+
</main>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</template>
|
|
172
|
+
|
|
173
|
+
<script lang="ts" setup>
|
|
174
|
+
import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
|
|
175
|
+
import { computed } from 'vue'
|
|
176
|
+
import Sidebar from './Sidebar.vue'
|
|
177
|
+
import Apps from './Apps.vue'
|
|
178
|
+
|
|
179
|
+
defineProps<{
|
|
180
|
+
label: string
|
|
181
|
+
sidebarItems: NavigationMenuItem[]
|
|
182
|
+
isSidebarGroup?: boolean
|
|
183
|
+
}>()
|
|
184
|
+
|
|
185
|
+
const app = useApp()
|
|
186
|
+
const isShowSidebarMobile = ref(false)
|
|
187
|
+
const auth = useAuth()
|
|
188
|
+
// Cookie to store user preference for desktop
|
|
189
|
+
const isCollapsed = useCookie<boolean>('app.admin.sidebar.isCollapsed', {
|
|
190
|
+
default: () => false,
|
|
191
|
+
path: '/',
|
|
192
|
+
})
|
|
193
|
+
|
|
194
|
+
const userMenuItems: DropdownMenuItem[] = [
|
|
195
|
+
{
|
|
196
|
+
label: 'View profile',
|
|
197
|
+
icon: 'i-lucide-user',
|
|
198
|
+
to: routes.account.profile.to,
|
|
199
|
+
},
|
|
200
|
+
|
|
201
|
+
{
|
|
202
|
+
label: routes.logout.label,
|
|
203
|
+
icon: 'i-lucide-log-out',
|
|
204
|
+
to: routes.logout.to,
|
|
205
|
+
external: true,
|
|
206
|
+
},
|
|
207
|
+
]
|
|
208
|
+
|
|
209
|
+
const breadcrumbsItems = computed(() => [
|
|
210
|
+
// {
|
|
211
|
+
// label: '',
|
|
212
|
+
// icon: 'ph:house',
|
|
213
|
+
// to: '/',
|
|
214
|
+
// },
|
|
215
|
+
...(app.pageMeta.breadcrumbs || []).map((item: any) => ({
|
|
216
|
+
...item,
|
|
217
|
+
icon: '',
|
|
218
|
+
})),
|
|
219
|
+
])
|
|
220
|
+
</script>
|