@finema/finework-layer 0.2.6 → 0.2.7
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/.playground/app/pages/submenu/layout-admin.vue +202 -121
- package/CHANGELOG.md +2 -0
- package/bun.lock +2 -2
- package/package.json +2 -2
|
@@ -1,129 +1,210 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
<div class="space-y-8">
|
|
3
|
+
<!-- Introduction -->
|
|
4
|
+
<div>
|
|
5
|
+
<h1 class="text-primary text-2xl font-bold">
|
|
6
|
+
Dialog Component
|
|
7
|
+
</h1>
|
|
8
|
+
<p class="mt-2 text-gray-600">
|
|
9
|
+
Display modal dialogs for success, warning, error and information
|
|
10
|
+
messages
|
|
11
|
+
</p>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<!-- Success Dialog -->
|
|
15
|
+
<div class="space-y-4">
|
|
16
|
+
<h2 class="text-xl font-medium">
|
|
17
|
+
Success Dialog
|
|
18
|
+
</h2>
|
|
19
|
+
<div class="flex flex-wrap gap-2">
|
|
20
|
+
<Button color="success" @click="openSuccessDialog">
|
|
21
|
+
Open Success Dialog
|
|
22
|
+
</Button>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<!-- Error Dialog -->
|
|
27
|
+
<div class="space-y-4">
|
|
28
|
+
<h2 class="text-xl font-medium">
|
|
29
|
+
Error Dialog
|
|
30
|
+
</h2>
|
|
31
|
+
<div class="flex flex-wrap gap-2">
|
|
32
|
+
<Button color="error" @click="openErrorDialog">
|
|
33
|
+
Open Error Dialog
|
|
34
|
+
</Button>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<!-- Warning Dialog -->
|
|
39
|
+
<div class="space-y-4">
|
|
40
|
+
<h2 class="text-xl font-medium">
|
|
41
|
+
Warning Dialog
|
|
42
|
+
</h2>
|
|
43
|
+
<div class="flex flex-wrap gap-2">
|
|
44
|
+
<Button color="warning" @click="openWarningDialog">
|
|
45
|
+
Open Warning Dialog
|
|
46
|
+
</Button>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- Info Dialog -->
|
|
51
|
+
<div class="space-y-4">
|
|
52
|
+
<h2 class="text-xl font-medium">
|
|
53
|
+
Info Dialog
|
|
54
|
+
</h2>
|
|
55
|
+
<div class="flex flex-wrap gap-2">
|
|
56
|
+
<Button color="info" @click="openInfoDialog">
|
|
57
|
+
Open Info Dialog
|
|
58
|
+
</Button>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="space-y-4">
|
|
62
|
+
<h2 class="text-xl font-medium">
|
|
63
|
+
Confirm Dialog
|
|
64
|
+
</h2>
|
|
65
|
+
<div class="flex flex-wrap gap-2">
|
|
66
|
+
<Button color="info" @click="openConfirmDialog">
|
|
67
|
+
Open Confirm Dialog
|
|
68
|
+
</Button>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="space-y-4">
|
|
72
|
+
<h2 class="text-xl font-medium">
|
|
73
|
+
Loading Dialog
|
|
74
|
+
</h2>
|
|
75
|
+
<div class="flex flex-wrap gap-2">
|
|
76
|
+
<Button color="info" @click="openLoadingDialog">
|
|
77
|
+
Open Loading Dialog
|
|
78
|
+
</Button>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<!-- Custom Dialog -->
|
|
83
|
+
<div class="space-y-4">
|
|
84
|
+
<h2 class="text-xl font-medium">
|
|
85
|
+
Custom Dialog
|
|
86
|
+
</h2>
|
|
87
|
+
<div class="flex flex-wrap gap-2">
|
|
88
|
+
<Button @click="openCustomDialog">
|
|
89
|
+
Open Custom Dialog
|
|
90
|
+
</Button>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<!-- <Modal title="title">
|
|
95
|
+
<Button
|
|
96
|
+
label="Open"
|
|
97
|
+
color="neutral"
|
|
98
|
+
variant="subtle"
|
|
99
|
+
/>
|
|
100
|
+
|
|
101
|
+
<template #body>
|
|
102
|
+
gsdfgsdfg
|
|
103
|
+
</template>
|
|
104
|
+
</Modal> -->
|
|
105
|
+
</div>
|
|
9
106
|
</template>
|
|
10
107
|
|
|
11
|
-
<script lang="ts"
|
|
12
|
-
import
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
useApp().definePage({
|
|
17
|
-
title: 'Test Layout',
|
|
18
|
-
breadcrumbs: [
|
|
19
|
-
{
|
|
20
|
-
label: 'Home',
|
|
21
|
-
to: '/',
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
label: 'Test Layout',
|
|
25
|
-
to: '/test-layout',
|
|
26
|
-
},
|
|
27
|
-
],
|
|
108
|
+
<script setup lang="ts">
|
|
109
|
+
import { useDialog } from '#imports'
|
|
110
|
+
|
|
111
|
+
definePageMeta({
|
|
112
|
+
layout: 'example',
|
|
28
113
|
})
|
|
29
114
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
email: 'long@finema.co',
|
|
35
|
-
full_name: 'Passakon Puttasuwan',
|
|
36
|
-
display_name: 'Long',
|
|
37
|
-
position: 'Technical Specialist',
|
|
38
|
-
team_code: 'DEV',
|
|
39
|
-
company: 'finema',
|
|
40
|
-
avatar_url:
|
|
41
|
-
'https://avatars.slack-edge.com/2023-09-25/5968557597936_c750902e3ffc4f690d80_512.jpg',
|
|
42
|
-
slack_id: 'U0147KLKKH8',
|
|
43
|
-
azure_id: 'fd7fbb55-a249-4b79-b439-2270981bd3ae',
|
|
44
|
-
is_active: true,
|
|
45
|
-
joined_date: '2025-09-02T00:00:00Z',
|
|
46
|
-
access_level: {
|
|
47
|
-
user_id: 'edab2396-2b6f-4855-b04e-a7c9ae9b70ae',
|
|
48
|
-
clockin: 'ADMIN',
|
|
49
|
-
timesheet: 'ADMIN',
|
|
50
|
-
pmo: 'SUPER',
|
|
51
|
-
setting: 'SUPER',
|
|
52
|
-
created_at: '2025-08-15T16:40:29.319Z',
|
|
53
|
-
updated_at: '2025-09-30T10:14:59.228Z',
|
|
54
|
-
},
|
|
55
|
-
team: {
|
|
56
|
-
id: 'ef2abb00-d57f-4a38-a5d1-660ee63d2e1f',
|
|
57
|
-
created_at: '2025-08-26T10:36:53.598Z',
|
|
58
|
-
updated_at: '2025-10-01T06:00:29.941Z',
|
|
59
|
-
name: 'Developer Team',
|
|
60
|
-
code: 'DEV',
|
|
61
|
-
color: 'violet',
|
|
62
|
-
description: '',
|
|
63
|
-
working_start_at: '12:02:00',
|
|
64
|
-
working_end_at: '20:00:00',
|
|
65
|
-
created_by_id: null,
|
|
66
|
-
updated_by_id: '96d3ec63-be14-41c6-9268-ea8095d2a73b',
|
|
67
|
-
deleted_by_id: null,
|
|
68
|
-
},
|
|
115
|
+
useSeoMeta({
|
|
116
|
+
title: 'Dialog Component',
|
|
117
|
+
description:
|
|
118
|
+
'Display modal dialogs for success, warning, error and information messages',
|
|
69
119
|
})
|
|
70
120
|
|
|
71
|
-
const
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
to
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
121
|
+
const dialog = useDialog()
|
|
122
|
+
|
|
123
|
+
// Success Dialog Example
|
|
124
|
+
const openSuccessDialog = () => {
|
|
125
|
+
dialog.success({
|
|
126
|
+
title: 'Operation Successful',
|
|
127
|
+
description: 'Your changes have been saved successfully.',
|
|
128
|
+
})
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// Error Dialog Example
|
|
132
|
+
const openErrorDialog = () => {
|
|
133
|
+
dialog.error({
|
|
134
|
+
title: 'Error Occurred',
|
|
135
|
+
description: 'Unable to complete the operation. Please try again.',
|
|
136
|
+
cancelText: 'Close',
|
|
137
|
+
})
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// Warning Dialog Example
|
|
141
|
+
const openWarningDialog = () => {
|
|
142
|
+
dialog
|
|
143
|
+
.warning({
|
|
144
|
+
title: 'Warning',
|
|
145
|
+
description:
|
|
146
|
+
'This action cannot be undone. Are you sure you want to continue?',
|
|
147
|
+
confirmText: 'Continue',
|
|
148
|
+
cancelText: 'Cancel',
|
|
149
|
+
})
|
|
150
|
+
.then(() => {
|
|
151
|
+
alert('success')
|
|
152
|
+
})
|
|
153
|
+
.catch(() => {
|
|
154
|
+
alert('cancel')
|
|
155
|
+
})
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// Info Dialog Example
|
|
159
|
+
const openInfoDialog = () => {
|
|
160
|
+
dialog.info({
|
|
161
|
+
title: 'Information',
|
|
162
|
+
description: 'Here is some important information you should know.',
|
|
163
|
+
confirmText: 'Got it',
|
|
164
|
+
})
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
const openConfirmDialog = () => {
|
|
168
|
+
dialog
|
|
169
|
+
.confirm({
|
|
170
|
+
title: 'Confirm',
|
|
171
|
+
description: 'Here is some important information you should know.',
|
|
172
|
+
})
|
|
173
|
+
.then(() => {
|
|
174
|
+
alert('success')
|
|
175
|
+
})
|
|
176
|
+
.catch(() => {
|
|
177
|
+
alert('cancel')
|
|
178
|
+
})
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
const openLoadingDialog = async () => {
|
|
182
|
+
dialog.loading({
|
|
183
|
+
title: 'กรุณารอสักครู่...',
|
|
184
|
+
description: 'กำลังโหลดข้อมูล...',
|
|
185
|
+
})
|
|
186
|
+
|
|
187
|
+
setTimeout(() => {
|
|
188
|
+
dialog.close()
|
|
189
|
+
}, 2000)
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// Custom Dialog Example
|
|
193
|
+
const openCustomDialog = () => {
|
|
194
|
+
dialog
|
|
195
|
+
.success({
|
|
196
|
+
title: 'Custom Dialog',
|
|
197
|
+
description: 'A dialog with custom configuration',
|
|
198
|
+
confirmText: 'Accept',
|
|
199
|
+
cancelText: 'Decline',
|
|
200
|
+
isShowCancelBtn: true,
|
|
201
|
+
isHideIcon: true,
|
|
202
|
+
})
|
|
203
|
+
.then(() => {
|
|
204
|
+
alert('success')
|
|
205
|
+
})
|
|
206
|
+
.catch(() => {
|
|
207
|
+
alert('cancel')
|
|
208
|
+
})
|
|
209
|
+
}
|
|
129
210
|
</script>
|
package/CHANGELOG.md
CHANGED
package/bun.lock
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"": {
|
|
5
5
|
"name": "@finema/finework-layer",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@finema/core": "^2.49.
|
|
7
|
+
"@finema/core": "^2.49.1",
|
|
8
8
|
},
|
|
9
9
|
"devDependencies": {
|
|
10
10
|
"@finema/eslint-config": "^2.0.3",
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
|
|
188
188
|
"@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.0", "", { "dependencies": { "@eslint/core": "^0.16.0", "levn": "^0.4.1" } }, "sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A=="],
|
|
189
189
|
|
|
190
|
-
"@finema/core": ["@finema/core@2.49.
|
|
190
|
+
"@finema/core": ["@finema/core@2.49.1", "", { "dependencies": { "@iconify-json/heroicons": "^1.2.2", "@iconify-json/ph": "^1.2.2", "@iconify-json/svg-spinners": "^1.2.2", "@nuxt/kit": "^4.0.2", "@nuxt/ui": "^4.0.1", "@pinia/nuxt": "^0.11.0", "@tailwindcss/typography": "^0.5.0-alpha.3", "@tiptap/extension-image": "^3.0.7", "@tiptap/extension-link": "^3.0.7", "@tiptap/extension-text-align": "^3.0.7", "@tiptap/extension-text-style": "^3.0.7", "@tiptap/extension-underline": "^3.0.7", "@tiptap/extension-youtube": "^3.0.7", "@tiptap/pm": "^3.0.7", "@tiptap/starter-kit": "^3.0.7", "@tiptap/vue-3": "^3.0.7", "@vee-validate/nuxt": "^4.15.1", "@vee-validate/valibot": "^4.15.1", "@vuepic/vue-datepicker": "^11.0.2", "@vueuse/components": "^13.2.0", "@vueuse/core": "^13.4.0", "@wdns/vue-code-block": "^2.3.5", "axios": "^1.10.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "defu": "^6.1.4", "lodash-es": "^4.17.21", "maska": "^3.1.1", "url-join": "^5.0.0" } }, "sha512-sbF7sjw9ItBc4pRi+mLu7I7zZ7JU4hDyva2ttpn0VzEo80BhSuzAv6xauXwVEcP5PkJk1WDgq6Gdog/d4u2NGA=="],
|
|
191
191
|
|
|
192
192
|
"@finema/eslint-config": ["@finema/eslint-config@2.0.3", "", { "dependencies": { "eslint-plugin-better-tailwindcss": "^3.7.10", "eslint-plugin-tailwindcss": "^3.18.2", "eslint-plugin-unused-imports": "^4.2.0" }, "peerDependencies": { "eslint": "^9.37.0" } }, "sha512-cKayHHZLTp/cA1q9ohowBcNWqpMZcA3zYcw8W7JkB89B+cyT1hYUOIi046cUEW23mFTfsSKUVIeW/C+BKpXuXQ=="],
|
|
193
193
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@finema/finework-layer",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.7",
|
|
5
5
|
"main": "./nuxt.config.ts",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"dev": "nuxi dev .playground -o",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"vue": "latest"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@finema/core": "^2.49.
|
|
33
|
+
"@finema/core": "^2.49.1"
|
|
34
34
|
},
|
|
35
35
|
"lint-staged": {
|
|
36
36
|
"*": "eslint"
|