ketekny-ui-kit 1.0.48 → 1.0.49
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/index.js +1 -2
- package/package.json +1 -1
- package/src/ui/kMessage.vue +462 -46
- package/src/ui/kMessageNew.vue +0 -479
package/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
// UI Components
|
|
2
2
|
import kMessage from './src/ui/kMessage.vue'
|
|
3
|
-
import kMessageNew from './src/ui/kMessageNew.vue'
|
|
4
3
|
import kButton from './src/ui/kButton.vue'
|
|
5
4
|
import kChip from './src/ui/kChip.vue'
|
|
6
5
|
import kCode from './src/ui/kCode.vue'
|
|
@@ -49,7 +48,7 @@ import tailwindPreset from './tailwind-preset.js'
|
|
|
49
48
|
// Named exports (tree-shaking friendly)
|
|
50
49
|
export {
|
|
51
50
|
// UI Components
|
|
52
|
-
kMessage,
|
|
51
|
+
kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
|
|
53
52
|
|
|
54
53
|
// Form Components
|
|
55
54
|
kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kDateSelectorV2, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
|
package/package.json
CHANGED
package/src/ui/kMessage.vue
CHANGED
|
@@ -1,63 +1,479 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
<Transition name="kmessage">
|
|
3
|
+
<div
|
|
4
|
+
v-if="isVisible"
|
|
5
|
+
ref="messageRef"
|
|
6
|
+
:class="[
|
|
7
|
+
colors.container,
|
|
8
|
+
'relative overflow-hidden shadow-sm ring-1 ring-black/5 transition-[box-shadow,transform] duration-200 dark:ring-white/10',
|
|
9
|
+
'border',
|
|
10
|
+
accentEnabled ? 'border-l-4 rounded-r-md' : 'rounded-md',
|
|
11
|
+
accentEnabled ? accentStripes[type] : '',
|
|
12
|
+
'focus-within:ring-2 focus-within:ring-primary/30 focus-within:ring-offset-1 focus-within:ring-offset-white dark:focus-within:ring-offset-slate-900',
|
|
13
|
+
sizes[size].padding,
|
|
14
|
+
$attrs.class,
|
|
15
|
+
]"
|
|
16
|
+
:role="type === 'error' ? 'alert' : 'status'"
|
|
17
|
+
:aria-live="type === 'error' ? 'assertive' : 'polite'"
|
|
18
|
+
aria-atomic="true"
|
|
19
|
+
@mouseenter="pauseDismissTimer"
|
|
20
|
+
@mouseleave="resumeDismissTimer"
|
|
21
|
+
@focusin="pauseDismissTimer"
|
|
22
|
+
@focusout="handleFocusOut"
|
|
23
|
+
>
|
|
24
|
+
<div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
|
|
25
|
+
<!-- Left: icon + content -->
|
|
26
|
+
<div class="flex min-w-0 items-start gap-3">
|
|
27
|
+
<!-- Custom icon slot -->
|
|
28
|
+
<span
|
|
29
|
+
v-if="hasIconSlot"
|
|
30
|
+
:class="['inline-flex shrink-0 items-center justify-center', sizes[size].customIcon]"
|
|
31
|
+
aria-hidden="true"
|
|
32
|
+
>
|
|
33
|
+
<slot name="icon" />
|
|
34
|
+
</span>
|
|
35
|
+
<!-- Badge icon -->
|
|
36
|
+
<span
|
|
37
|
+
v-else-if="iconStyle === 'badge'"
|
|
38
|
+
:class="[
|
|
39
|
+
'inline-flex shrink-0 items-center justify-center',
|
|
40
|
+
sizes[size].badgeWrap,
|
|
41
|
+
]"
|
|
42
|
+
aria-hidden="true"
|
|
43
|
+
>
|
|
44
|
+
<component :is="badgeIcons[type]" :class="[sizes[size].badgeIcon, colors.title]" aria-hidden="true" />
|
|
45
|
+
</span>
|
|
46
|
+
<!-- Lucide icon -->
|
|
47
|
+
<component
|
|
48
|
+
v-else-if="iconStyle === 'lucide'"
|
|
49
|
+
:is="lucideIcons[type]"
|
|
50
|
+
:class="['shrink-0', sizes[size].lucide]"
|
|
51
|
+
aria-hidden="true"
|
|
52
|
+
/>
|
|
53
|
+
|
|
54
|
+
<div :class="['min-w-0 flex-1', sizes[size].text, colors.body]">
|
|
55
|
+
<p v-if="title" :class="['font-semibold leading-tight', colors.title]">{{ title }}</p>
|
|
56
|
+
<div
|
|
57
|
+
v-if="hasDefaultSlot || description"
|
|
58
|
+
:class="['leading-relaxed break-words', title ? 'mt-1' : '']"
|
|
59
|
+
>
|
|
60
|
+
<slot v-if="hasDefaultSlot"></slot>
|
|
61
|
+
<span v-else>{{ description }}</span>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<!-- Right: action slot | label | close -->
|
|
67
|
+
<div
|
|
68
|
+
v-if="hasActionSlot || label || isClosable"
|
|
69
|
+
class="ml-auto flex shrink-0 items-center gap-2 self-end sm:self-start sm:pl-3"
|
|
70
|
+
>
|
|
71
|
+
<slot name="action" />
|
|
72
|
+
<span
|
|
73
|
+
v-if="!hasActionSlot && label"
|
|
74
|
+
:class="['text-xs font-medium', colors.label]"
|
|
75
|
+
>
|
|
76
|
+
{{ label }}
|
|
77
|
+
</span>
|
|
78
|
+
<button
|
|
79
|
+
v-if="isClosable"
|
|
80
|
+
type="button"
|
|
81
|
+
@click="close"
|
|
82
|
+
:class="[
|
|
83
|
+
'rounded-md p-0.5 opacity-70 transition-all hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 dark:hover:bg-white/10',
|
|
84
|
+
colors.label,
|
|
85
|
+
]"
|
|
86
|
+
:aria-label="`Close ${type} message`"
|
|
87
|
+
>
|
|
88
|
+
<CloseIcon :class="sizes[size].close" />
|
|
89
|
+
</button>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
10
92
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
93
|
+
<div
|
|
94
|
+
v-if="showDismissProgress"
|
|
95
|
+
:class="['mt-1 flex items-center justify-end gap-1 text-[10px] font-medium leading-none', colors.label]"
|
|
96
|
+
aria-hidden="true"
|
|
97
|
+
>
|
|
98
|
+
<Clock3 class="h-2.5 w-2.5" />
|
|
99
|
+
<span>{{ dismissSecondsLeft }}s</span>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div
|
|
103
|
+
v-if="showDismissProgress"
|
|
104
|
+
:class="['pointer-events-none absolute inset-x-0 bottom-0 h-1', progressTracks[type]]"
|
|
105
|
+
aria-hidden="true"
|
|
106
|
+
/>
|
|
107
|
+
<div
|
|
108
|
+
v-if="showDismissProgress"
|
|
109
|
+
:class="['pointer-events-none absolute bottom-0 left-0 h-1', progressBars[type]]"
|
|
110
|
+
:style="{ width: `${dismissElapsedPercent}%` }"
|
|
111
|
+
aria-hidden="true"
|
|
112
|
+
/>
|
|
17
113
|
</div>
|
|
18
|
-
</
|
|
114
|
+
</Transition>
|
|
19
115
|
</template>
|
|
20
116
|
|
|
21
117
|
<script setup>
|
|
22
|
-
import {
|
|
23
|
-
|
|
24
|
-
TriangleAlert,
|
|
25
|
-
OctagonX,
|
|
26
|
-
CircleCheckBig,
|
|
27
|
-
} from 'lucide-vue-next'
|
|
28
|
-
</script>
|
|
118
|
+
import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue'
|
|
119
|
+
import { X as CloseIcon, Info, CircleCheckBig, TriangleAlert, OctagonX, Clock3 } from 'lucide-vue-next'
|
|
29
120
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
121
|
+
// ─── Color config ────────────────────────────────────────────────────────────
|
|
122
|
+
|
|
123
|
+
const colorConfig = {
|
|
124
|
+
info: {
|
|
125
|
+
default: {
|
|
126
|
+
container: 'border-sky-300/90 bg-sky-50/70 dark:border-sky-500/50 dark:bg-sky-950/40',
|
|
127
|
+
icon: 'bg-sky-100/60 border-sky-500 text-sky-600 dark:bg-sky-900/50 dark:border-sky-400 dark:text-sky-300',
|
|
128
|
+
title: 'text-sky-700 dark:text-sky-300',
|
|
129
|
+
body: 'text-slate-700 dark:text-sky-50',
|
|
130
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
131
|
+
},
|
|
132
|
+
standard: {
|
|
133
|
+
container: 'border-sky-200/90 bg-sky-50/60 dark:border-sky-500/35 dark:bg-sky-950/35',
|
|
134
|
+
icon: 'bg-sky-100 border-sky-300 text-sky-700 dark:bg-sky-500/15 dark:border-sky-400/40 dark:text-sky-300',
|
|
135
|
+
title: 'text-sky-700 dark:text-sky-300',
|
|
136
|
+
body: 'text-slate-700 dark:text-slate-200',
|
|
137
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
138
|
+
},
|
|
139
|
+
outlined: {
|
|
140
|
+
container: 'border-sky-400 bg-white dark:border-sky-500/70 dark:bg-slate-900',
|
|
141
|
+
icon: 'bg-sky-100/60 border-sky-500 text-sky-600 dark:bg-sky-900/50 dark:border-sky-400 dark:text-sky-300',
|
|
142
|
+
title: 'text-sky-700 dark:text-sky-300',
|
|
143
|
+
body: 'text-slate-600 dark:text-slate-200',
|
|
144
|
+
label: 'text-slate-400 dark:text-slate-400',
|
|
145
|
+
},
|
|
146
|
+
filled: {
|
|
147
|
+
container: 'bg-sky-700 border-transparent dark:bg-sky-700',
|
|
148
|
+
icon: 'bg-white/20 border-white/50 text-white',
|
|
149
|
+
title: 'text-white',
|
|
150
|
+
body: 'text-white',
|
|
151
|
+
label: 'text-white/70',
|
|
37
152
|
},
|
|
38
|
-
title: { type: String, default: '' },
|
|
39
153
|
},
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
154
|
+
success: {
|
|
155
|
+
default: {
|
|
156
|
+
container: 'border-emerald-300/90 bg-emerald-50/70 dark:border-emerald-500/50 dark:bg-emerald-950/40',
|
|
157
|
+
icon: 'bg-emerald-100/60 border-emerald-500 text-emerald-600 dark:bg-emerald-900/50 dark:border-emerald-400 dark:text-emerald-300',
|
|
158
|
+
title: 'text-emerald-700 dark:text-emerald-300',
|
|
159
|
+
body: 'text-slate-700 dark:text-emerald-50',
|
|
160
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
43
161
|
},
|
|
44
|
-
|
|
45
|
-
|
|
162
|
+
standard: {
|
|
163
|
+
container: 'border-emerald-200/90 bg-emerald-50/60 dark:border-emerald-500/35 dark:bg-emerald-950/35',
|
|
164
|
+
icon: 'bg-emerald-100 border-emerald-300 text-emerald-700 dark:bg-emerald-500/15 dark:border-emerald-400/40 dark:text-emerald-300',
|
|
165
|
+
title: 'text-emerald-700 dark:text-emerald-300',
|
|
166
|
+
body: 'text-slate-700 dark:text-slate-200',
|
|
167
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
168
|
+
},
|
|
169
|
+
outlined: {
|
|
170
|
+
container: 'border-emerald-400 bg-white dark:border-emerald-500/70 dark:bg-slate-900',
|
|
171
|
+
icon: 'bg-emerald-100/60 border-emerald-500 text-emerald-600 dark:bg-emerald-900/50 dark:border-emerald-400 dark:text-emerald-300',
|
|
172
|
+
title: 'text-emerald-700 dark:text-emerald-300',
|
|
173
|
+
body: 'text-slate-600 dark:text-slate-200',
|
|
174
|
+
label: 'text-slate-400 dark:text-slate-400',
|
|
175
|
+
},
|
|
176
|
+
filled: {
|
|
177
|
+
container: 'bg-emerald-700 border-transparent dark:bg-emerald-700',
|
|
178
|
+
icon: 'bg-white/20 border-white/50 text-white',
|
|
179
|
+
title: 'text-white',
|
|
180
|
+
body: 'text-white',
|
|
181
|
+
label: 'text-white/70',
|
|
182
|
+
},
|
|
183
|
+
},
|
|
184
|
+
warning: {
|
|
185
|
+
default: {
|
|
186
|
+
container: 'border-amber-300/90 bg-amber-50/70 dark:border-amber-500/50 dark:bg-amber-950/40',
|
|
187
|
+
icon: 'bg-amber-100/60 border-amber-500 text-amber-600 dark:bg-amber-900/50 dark:border-amber-400 dark:text-amber-300',
|
|
188
|
+
title: 'text-amber-700 dark:text-amber-300',
|
|
189
|
+
body: 'text-slate-700 dark:text-amber-50',
|
|
190
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
191
|
+
},
|
|
192
|
+
standard: {
|
|
193
|
+
container: 'border-amber-200/90 bg-amber-50/60 dark:border-amber-500/35 dark:bg-amber-950/35',
|
|
194
|
+
icon: 'bg-amber-100 border-amber-300 text-amber-700 dark:bg-amber-500/15 dark:border-amber-400/40 dark:text-amber-300',
|
|
195
|
+
title: 'text-amber-700 dark:text-amber-300',
|
|
196
|
+
body: 'text-slate-700 dark:text-slate-200',
|
|
197
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
198
|
+
},
|
|
199
|
+
outlined: {
|
|
200
|
+
container: 'border-amber-400 bg-white dark:border-amber-500/70 dark:bg-slate-900',
|
|
201
|
+
icon: 'bg-amber-100/60 border-amber-500 text-amber-600 dark:bg-amber-900/50 dark:border-amber-400 dark:text-amber-300',
|
|
202
|
+
title: 'text-amber-700 dark:text-amber-300',
|
|
203
|
+
body: 'text-slate-600 dark:text-slate-200',
|
|
204
|
+
label: 'text-slate-400 dark:text-slate-400',
|
|
205
|
+
},
|
|
206
|
+
filled: {
|
|
207
|
+
container: 'bg-amber-600 border-transparent dark:bg-amber-600',
|
|
208
|
+
icon: 'bg-white/20 border-white/50 text-white',
|
|
209
|
+
title: 'text-white',
|
|
210
|
+
body: 'text-white',
|
|
211
|
+
label: 'text-white/70',
|
|
212
|
+
},
|
|
213
|
+
},
|
|
214
|
+
error: {
|
|
215
|
+
default: {
|
|
216
|
+
container: 'border-rose-300/90 bg-rose-50/70 dark:border-rose-500/50 dark:bg-rose-950/40',
|
|
217
|
+
icon: 'bg-rose-100/60 border-rose-500 text-rose-600 dark:bg-rose-900/50 dark:border-rose-400 dark:text-rose-300',
|
|
218
|
+
title: 'text-rose-700 dark:text-rose-300',
|
|
219
|
+
body: 'text-slate-700 dark:text-rose-50',
|
|
220
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
46
221
|
},
|
|
47
|
-
|
|
48
|
-
|
|
222
|
+
standard: {
|
|
223
|
+
container: 'border-rose-200/90 bg-rose-50/60 dark:border-rose-500/35 dark:bg-rose-950/35',
|
|
224
|
+
icon: 'bg-rose-100 border-rose-300 text-rose-700 dark:bg-rose-500/15 dark:border-rose-400/40 dark:text-rose-300',
|
|
225
|
+
title: 'text-rose-700 dark:text-rose-300',
|
|
226
|
+
body: 'text-slate-700 dark:text-slate-200',
|
|
227
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
49
228
|
},
|
|
50
|
-
|
|
51
|
-
|
|
229
|
+
outlined: {
|
|
230
|
+
container: 'border-rose-400 bg-white dark:border-rose-500/70 dark:bg-slate-900',
|
|
231
|
+
icon: 'bg-rose-100/60 border-rose-500 text-rose-600 dark:bg-rose-900/50 dark:border-rose-400 dark:text-rose-300',
|
|
232
|
+
title: 'text-rose-700 dark:text-rose-300',
|
|
233
|
+
body: 'text-slate-600 dark:text-slate-200',
|
|
234
|
+
label: 'text-slate-400 dark:text-slate-400',
|
|
52
235
|
},
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}[this.type]
|
|
236
|
+
filled: {
|
|
237
|
+
container: 'bg-rose-700 border-transparent dark:bg-rose-700',
|
|
238
|
+
icon: 'bg-white/20 border-white/50 text-white',
|
|
239
|
+
title: 'text-white',
|
|
240
|
+
body: 'text-white',
|
|
241
|
+
label: 'text-white/70',
|
|
60
242
|
},
|
|
61
243
|
},
|
|
62
244
|
}
|
|
245
|
+
|
|
246
|
+
const accentStripes = {
|
|
247
|
+
info: 'border-l-sky-500 dark:border-l-sky-400',
|
|
248
|
+
success: 'border-l-emerald-500 dark:border-l-emerald-400',
|
|
249
|
+
warning: 'border-l-amber-500 dark:border-l-amber-400',
|
|
250
|
+
error: 'border-l-rose-500 dark:border-l-rose-400',
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
const sizes = {
|
|
254
|
+
sm: {
|
|
255
|
+
padding: 'px-3 py-2',
|
|
256
|
+
text: 'text-xs sm:text-sm',
|
|
257
|
+
badgeWrap: 'h-5 w-5 mt-0.5',
|
|
258
|
+
badgeIcon: 'h-5 w-5',
|
|
259
|
+
customIcon: 'text-base leading-none',
|
|
260
|
+
lucide: 'h-4 w-4',
|
|
261
|
+
close: 'h-3 w-3',
|
|
262
|
+
},
|
|
263
|
+
md: {
|
|
264
|
+
padding: 'px-4 py-3',
|
|
265
|
+
text: 'text-sm sm:text-base',
|
|
266
|
+
badgeWrap: 'h-6 w-6 mt-0.5',
|
|
267
|
+
badgeIcon: 'h-6 w-6',
|
|
268
|
+
customIcon: 'text-lg leading-none',
|
|
269
|
+
lucide: 'h-5 w-5',
|
|
270
|
+
close: 'h-3.5 w-3.5',
|
|
271
|
+
},
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
const badgeIcons = { info: Info, success: CircleCheckBig, warning: TriangleAlert, error: OctagonX }
|
|
275
|
+
const lucideIcons = { info: Info, success: CircleCheckBig, warning: TriangleAlert, error: OctagonX }
|
|
276
|
+
|
|
277
|
+
// ─── Props / emits ────────────────────────────────────────────────────────────
|
|
278
|
+
|
|
279
|
+
const props = defineProps({
|
|
280
|
+
type: {
|
|
281
|
+
type: String,
|
|
282
|
+
// Keep legacy default for drop-in compatibility with kMessage.
|
|
283
|
+
default: 'warning',
|
|
284
|
+
validator: (val) => ['info', 'success', 'warning', 'error'].includes(val),
|
|
285
|
+
},
|
|
286
|
+
variant: {
|
|
287
|
+
type: String,
|
|
288
|
+
default: 'default',
|
|
289
|
+
validator: (val) => ['default', 'standard', 'outlined', 'filled'].includes(val),
|
|
290
|
+
},
|
|
291
|
+
iconStyle: {
|
|
292
|
+
type: String,
|
|
293
|
+
default: 'badge',
|
|
294
|
+
validator: (val) => ['badge', 'lucide', 'none'].includes(val),
|
|
295
|
+
},
|
|
296
|
+
accent: { type: Boolean, default: false },
|
|
297
|
+
size: {
|
|
298
|
+
type: String,
|
|
299
|
+
default: 'md',
|
|
300
|
+
validator: (val) => ['sm', 'md'].includes(val),
|
|
301
|
+
},
|
|
302
|
+
title: { type: String, default: '' },
|
|
303
|
+
description: { type: String, default: '' },
|
|
304
|
+
label: { type: String, default: '' },
|
|
305
|
+
visible: { type: Boolean, default: null },
|
|
306
|
+
closable: { type: Boolean, default: false },
|
|
307
|
+
dismissAfter: {
|
|
308
|
+
type: Number,
|
|
309
|
+
default: 0,
|
|
310
|
+
validator: (val) => Number.isFinite(val) && val >= 0,
|
|
311
|
+
},
|
|
312
|
+
})
|
|
313
|
+
|
|
314
|
+
const emit = defineEmits(['update:visible', 'close'])
|
|
315
|
+
|
|
316
|
+
// ─── State ────────────────────────────────────────────────────────────────────
|
|
317
|
+
|
|
318
|
+
const slots = useSlots()
|
|
319
|
+
const internalVisible = ref(true)
|
|
320
|
+
const messageRef = ref(null)
|
|
321
|
+
const dismissTimer = ref(null)
|
|
322
|
+
const dismissRaf = ref(null)
|
|
323
|
+
const dismissStartedAt = ref(0)
|
|
324
|
+
const dismissRemainingAtStart = ref(0)
|
|
325
|
+
const dismissRemaining = ref(0)
|
|
326
|
+
|
|
327
|
+
const isVisible = computed(() => (props.visible !== null ? props.visible : internalVisible.value))
|
|
328
|
+
const isClosable = computed(() => props.closable || props.visible !== null)
|
|
329
|
+
const hasActionSlot = computed(() => !!slots.action)
|
|
330
|
+
const hasDefaultSlot = computed(() => !!slots.default)
|
|
331
|
+
const hasIconSlot = computed(() => !!slots.icon)
|
|
332
|
+
const colors = computed(() => colorConfig[props.type][props.variant])
|
|
333
|
+
const accentEnabled = computed(() => props.accent || props.variant === 'standard')
|
|
334
|
+
const dismissAfterMs = computed(() => {
|
|
335
|
+
const value = Number(props.dismissAfter)
|
|
336
|
+
return Number.isFinite(value) && value > 0 ? value : 0
|
|
337
|
+
})
|
|
338
|
+
const showDismissProgress = computed(() => isVisible.value && dismissAfterMs.value > 0)
|
|
339
|
+
const dismissElapsedPercent = computed(() => {
|
|
340
|
+
if (dismissAfterMs.value <= 0) return 0
|
|
341
|
+
return Math.min(100, Math.max(0, ((dismissAfterMs.value - dismissRemaining.value) / dismissAfterMs.value) * 100))
|
|
342
|
+
})
|
|
343
|
+
const dismissSecondsLeft = computed(() => Math.max(0, Math.ceil(dismissRemaining.value / 1000)))
|
|
344
|
+
|
|
345
|
+
const progressTracks = {
|
|
346
|
+
info: 'bg-sky-200/60 dark:bg-sky-900/55',
|
|
347
|
+
success: 'bg-emerald-200/60 dark:bg-emerald-900/55',
|
|
348
|
+
warning: 'bg-amber-200/60 dark:bg-amber-900/55',
|
|
349
|
+
error: 'bg-rose-200/60 dark:bg-rose-900/55',
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
const progressBars = {
|
|
353
|
+
info: 'bg-sky-500/70 dark:bg-sky-400/80',
|
|
354
|
+
success: 'bg-emerald-500/70 dark:bg-emerald-400/80',
|
|
355
|
+
warning: 'bg-amber-500/80 dark:bg-amber-400/85',
|
|
356
|
+
error: 'bg-rose-500/70 dark:bg-rose-400/80',
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
function stopDismissRaf() {
|
|
360
|
+
if (dismissRaf.value) {
|
|
361
|
+
cancelAnimationFrame(dismissRaf.value)
|
|
362
|
+
dismissRaf.value = null
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
function syncDismissRemaining() {
|
|
367
|
+
if (!dismissTimer.value) return
|
|
368
|
+
|
|
369
|
+
const elapsed = Date.now() - dismissStartedAt.value
|
|
370
|
+
dismissRemaining.value = Math.max(0, dismissRemainingAtStart.value - elapsed)
|
|
371
|
+
|
|
372
|
+
if (dismissRemaining.value > 0) {
|
|
373
|
+
dismissRaf.value = requestAnimationFrame(syncDismissRemaining)
|
|
374
|
+
} else {
|
|
375
|
+
dismissRaf.value = null
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
function clearDismissTimer() {
|
|
380
|
+
if (dismissTimer.value) {
|
|
381
|
+
clearTimeout(dismissTimer.value)
|
|
382
|
+
dismissTimer.value = null
|
|
383
|
+
}
|
|
384
|
+
stopDismissRaf()
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
function startDismissTimer(duration) {
|
|
388
|
+
clearDismissTimer()
|
|
389
|
+
if (!isVisible.value || duration <= 0) return
|
|
390
|
+
|
|
391
|
+
dismissRemaining.value = duration
|
|
392
|
+
dismissRemainingAtStart.value = duration
|
|
393
|
+
dismissStartedAt.value = Date.now()
|
|
394
|
+
dismissRaf.value = requestAnimationFrame(syncDismissRemaining)
|
|
395
|
+
dismissTimer.value = setTimeout(() => {
|
|
396
|
+
dismissTimer.value = null
|
|
397
|
+
stopDismissRaf()
|
|
398
|
+
dismissRemaining.value = 0
|
|
399
|
+
close()
|
|
400
|
+
}, duration)
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
function pauseDismissTimer() {
|
|
404
|
+
if (!dismissTimer.value || dismissAfterMs.value <= 0) return
|
|
405
|
+
|
|
406
|
+
const elapsed = Date.now() - dismissStartedAt.value
|
|
407
|
+
dismissRemaining.value = Math.max(0, dismissRemainingAtStart.value - elapsed)
|
|
408
|
+
clearDismissTimer()
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
function resumeDismissTimer() {
|
|
412
|
+
if (!isVisible.value || dismissAfterMs.value <= 0) return
|
|
413
|
+
|
|
414
|
+
if (dismissRemaining.value <= 0) {
|
|
415
|
+
close()
|
|
416
|
+
return
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
startDismissTimer(dismissRemaining.value)
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
function handleFocusOut(event) {
|
|
423
|
+
const nextFocused = event.relatedTarget
|
|
424
|
+
if (nextFocused && messageRef.value && messageRef.value.contains(nextFocused)) return
|
|
425
|
+
resumeDismissTimer()
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
function close() {
|
|
429
|
+
clearDismissTimer()
|
|
430
|
+
dismissRemaining.value = dismissAfterMs.value
|
|
431
|
+
if (props.visible !== null) {
|
|
432
|
+
emit('update:visible', false)
|
|
433
|
+
} else {
|
|
434
|
+
internalVisible.value = false
|
|
435
|
+
}
|
|
436
|
+
emit('close')
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
watch(
|
|
440
|
+
[isVisible, dismissAfterMs],
|
|
441
|
+
([visible, timeout]) => {
|
|
442
|
+
clearDismissTimer()
|
|
443
|
+
dismissRemaining.value = timeout
|
|
444
|
+
if (visible && timeout > 0) {
|
|
445
|
+
startDismissTimer(timeout)
|
|
446
|
+
}
|
|
447
|
+
},
|
|
448
|
+
{ immediate: true }
|
|
449
|
+
)
|
|
450
|
+
|
|
451
|
+
onBeforeUnmount(() => {
|
|
452
|
+
clearDismissTimer()
|
|
453
|
+
})
|
|
63
454
|
</script>
|
|
455
|
+
|
|
456
|
+
<style scoped>
|
|
457
|
+
.kmessage-enter-active {
|
|
458
|
+
transition: all 0.2s ease-out;
|
|
459
|
+
}
|
|
460
|
+
.kmessage-leave-active {
|
|
461
|
+
transition: all 0.15s ease-in;
|
|
462
|
+
}
|
|
463
|
+
.kmessage-enter-from,
|
|
464
|
+
.kmessage-leave-to {
|
|
465
|
+
opacity: 0;
|
|
466
|
+
transform: translateY(-4px);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
@media (prefers-reduced-motion: reduce) {
|
|
470
|
+
.kmessage-enter-active,
|
|
471
|
+
.kmessage-leave-active {
|
|
472
|
+
transition: opacity 0.1s;
|
|
473
|
+
}
|
|
474
|
+
.kmessage-enter-from,
|
|
475
|
+
.kmessage-leave-to {
|
|
476
|
+
transform: none;
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
</style>
|
package/src/ui/kMessageNew.vue
DELETED
|
@@ -1,479 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<Transition name="kmessagenew">
|
|
3
|
-
<div
|
|
4
|
-
v-if="isVisible"
|
|
5
|
-
ref="messageRef"
|
|
6
|
-
:class="[
|
|
7
|
-
colors.container,
|
|
8
|
-
'relative overflow-hidden shadow-sm ring-1 ring-black/5 transition-[box-shadow,transform] duration-200 dark:ring-white/10',
|
|
9
|
-
'border',
|
|
10
|
-
accentEnabled ? 'border-l-4 rounded-r-md' : 'rounded-md',
|
|
11
|
-
accentEnabled ? accentStripes[type] : '',
|
|
12
|
-
'focus-within:ring-2 focus-within:ring-primary/30 focus-within:ring-offset-1 focus-within:ring-offset-white dark:focus-within:ring-offset-slate-900',
|
|
13
|
-
sizes[size].padding,
|
|
14
|
-
$attrs.class,
|
|
15
|
-
]"
|
|
16
|
-
:role="type === 'error' ? 'alert' : 'status'"
|
|
17
|
-
:aria-live="type === 'error' ? 'assertive' : 'polite'"
|
|
18
|
-
aria-atomic="true"
|
|
19
|
-
@mouseenter="pauseDismissTimer"
|
|
20
|
-
@mouseleave="resumeDismissTimer"
|
|
21
|
-
@focusin="pauseDismissTimer"
|
|
22
|
-
@focusout="handleFocusOut"
|
|
23
|
-
>
|
|
24
|
-
<div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
|
|
25
|
-
<!-- Left: icon + content -->
|
|
26
|
-
<div class="flex min-w-0 items-start gap-3">
|
|
27
|
-
<!-- Custom icon slot -->
|
|
28
|
-
<span
|
|
29
|
-
v-if="hasIconSlot"
|
|
30
|
-
:class="['inline-flex shrink-0 items-center justify-center', sizes[size].customIcon]"
|
|
31
|
-
aria-hidden="true"
|
|
32
|
-
>
|
|
33
|
-
<slot name="icon" />
|
|
34
|
-
</span>
|
|
35
|
-
<!-- Badge icon -->
|
|
36
|
-
<span
|
|
37
|
-
v-else-if="iconStyle === 'badge'"
|
|
38
|
-
:class="[
|
|
39
|
-
'inline-flex shrink-0 items-center justify-center',
|
|
40
|
-
sizes[size].badgeWrap,
|
|
41
|
-
]"
|
|
42
|
-
aria-hidden="true"
|
|
43
|
-
>
|
|
44
|
-
<component :is="badgeIcons[type]" :class="[sizes[size].badgeIcon, colors.title]" aria-hidden="true" />
|
|
45
|
-
</span>
|
|
46
|
-
<!-- Lucide icon -->
|
|
47
|
-
<component
|
|
48
|
-
v-else-if="iconStyle === 'lucide'"
|
|
49
|
-
:is="lucideIcons[type]"
|
|
50
|
-
:class="['shrink-0', sizes[size].lucide]"
|
|
51
|
-
aria-hidden="true"
|
|
52
|
-
/>
|
|
53
|
-
|
|
54
|
-
<div :class="['min-w-0 flex-1', sizes[size].text, colors.body]">
|
|
55
|
-
<p v-if="title" :class="['font-semibold leading-tight', colors.title]">{{ title }}</p>
|
|
56
|
-
<div
|
|
57
|
-
v-if="hasDefaultSlot || description"
|
|
58
|
-
:class="['leading-relaxed break-words', title ? 'mt-1' : '']"
|
|
59
|
-
>
|
|
60
|
-
<slot v-if="hasDefaultSlot"></slot>
|
|
61
|
-
<span v-else>{{ description }}</span>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
|
-
<!-- Right: action slot | label | close -->
|
|
67
|
-
<div
|
|
68
|
-
v-if="hasActionSlot || label || isClosable"
|
|
69
|
-
class="ml-auto flex shrink-0 items-center gap-2 self-end sm:self-start sm:pl-3"
|
|
70
|
-
>
|
|
71
|
-
<slot name="action" />
|
|
72
|
-
<span
|
|
73
|
-
v-if="!hasActionSlot && label"
|
|
74
|
-
:class="['text-xs font-medium', colors.label]"
|
|
75
|
-
>
|
|
76
|
-
{{ label }}
|
|
77
|
-
</span>
|
|
78
|
-
<button
|
|
79
|
-
v-if="isClosable"
|
|
80
|
-
type="button"
|
|
81
|
-
@click="close"
|
|
82
|
-
:class="[
|
|
83
|
-
'rounded-md p-0.5 opacity-70 transition-all hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 dark:hover:bg-white/10',
|
|
84
|
-
colors.label,
|
|
85
|
-
]"
|
|
86
|
-
:aria-label="`Close ${type} message`"
|
|
87
|
-
>
|
|
88
|
-
<CloseIcon :class="sizes[size].close" />
|
|
89
|
-
</button>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
<div
|
|
94
|
-
v-if="showDismissProgress"
|
|
95
|
-
:class="['mt-1 flex items-center justify-end gap-1 text-[10px] font-medium leading-none', colors.label]"
|
|
96
|
-
aria-hidden="true"
|
|
97
|
-
>
|
|
98
|
-
<Clock3 class="h-2.5 w-2.5" />
|
|
99
|
-
<span>{{ dismissSecondsLeft }}s</span>
|
|
100
|
-
</div>
|
|
101
|
-
|
|
102
|
-
<div
|
|
103
|
-
v-if="showDismissProgress"
|
|
104
|
-
:class="['pointer-events-none absolute inset-x-0 bottom-0 h-1', progressTracks[type]]"
|
|
105
|
-
aria-hidden="true"
|
|
106
|
-
/>
|
|
107
|
-
<div
|
|
108
|
-
v-if="showDismissProgress"
|
|
109
|
-
:class="['pointer-events-none absolute bottom-0 left-0 h-1', progressBars[type]]"
|
|
110
|
-
:style="{ width: `${dismissElapsedPercent}%` }"
|
|
111
|
-
aria-hidden="true"
|
|
112
|
-
/>
|
|
113
|
-
</div>
|
|
114
|
-
</Transition>
|
|
115
|
-
</template>
|
|
116
|
-
|
|
117
|
-
<script setup>
|
|
118
|
-
import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue'
|
|
119
|
-
import { X as CloseIcon, Info, CircleCheckBig, TriangleAlert, OctagonX, Clock3 } from 'lucide-vue-next'
|
|
120
|
-
|
|
121
|
-
// ─── Color config ────────────────────────────────────────────────────────────
|
|
122
|
-
|
|
123
|
-
const colorConfig = {
|
|
124
|
-
info: {
|
|
125
|
-
default: {
|
|
126
|
-
container: 'border-sky-300/90 bg-sky-50/70 dark:border-sky-500/50 dark:bg-sky-950/40',
|
|
127
|
-
icon: 'bg-sky-100/60 border-sky-500 text-sky-600 dark:bg-sky-900/50 dark:border-sky-400 dark:text-sky-300',
|
|
128
|
-
title: 'text-sky-700 dark:text-sky-300',
|
|
129
|
-
body: 'text-slate-700 dark:text-sky-50',
|
|
130
|
-
label: 'text-slate-500 dark:text-slate-300',
|
|
131
|
-
},
|
|
132
|
-
standard: {
|
|
133
|
-
container: 'border-sky-200/90 bg-sky-50/60 dark:border-sky-500/35 dark:bg-sky-950/35',
|
|
134
|
-
icon: 'bg-sky-100 border-sky-300 text-sky-700 dark:bg-sky-500/15 dark:border-sky-400/40 dark:text-sky-300',
|
|
135
|
-
title: 'text-sky-700 dark:text-sky-300',
|
|
136
|
-
body: 'text-slate-700 dark:text-slate-200',
|
|
137
|
-
label: 'text-slate-500 dark:text-slate-300',
|
|
138
|
-
},
|
|
139
|
-
outlined: {
|
|
140
|
-
container: 'border-sky-400 bg-white dark:border-sky-500/70 dark:bg-slate-900',
|
|
141
|
-
icon: 'bg-sky-100/60 border-sky-500 text-sky-600 dark:bg-sky-900/50 dark:border-sky-400 dark:text-sky-300',
|
|
142
|
-
title: 'text-sky-700 dark:text-sky-300',
|
|
143
|
-
body: 'text-slate-600 dark:text-slate-200',
|
|
144
|
-
label: 'text-slate-400 dark:text-slate-400',
|
|
145
|
-
},
|
|
146
|
-
filled: {
|
|
147
|
-
container: 'bg-sky-700 border-transparent dark:bg-sky-700',
|
|
148
|
-
icon: 'bg-white/20 border-white/50 text-white',
|
|
149
|
-
title: 'text-white',
|
|
150
|
-
body: 'text-white',
|
|
151
|
-
label: 'text-white/70',
|
|
152
|
-
},
|
|
153
|
-
},
|
|
154
|
-
success: {
|
|
155
|
-
default: {
|
|
156
|
-
container: 'border-emerald-300/90 bg-emerald-50/70 dark:border-emerald-500/50 dark:bg-emerald-950/40',
|
|
157
|
-
icon: 'bg-emerald-100/60 border-emerald-500 text-emerald-600 dark:bg-emerald-900/50 dark:border-emerald-400 dark:text-emerald-300',
|
|
158
|
-
title: 'text-emerald-700 dark:text-emerald-300',
|
|
159
|
-
body: 'text-slate-700 dark:text-emerald-50',
|
|
160
|
-
label: 'text-slate-500 dark:text-slate-300',
|
|
161
|
-
},
|
|
162
|
-
standard: {
|
|
163
|
-
container: 'border-emerald-200/90 bg-emerald-50/60 dark:border-emerald-500/35 dark:bg-emerald-950/35',
|
|
164
|
-
icon: 'bg-emerald-100 border-emerald-300 text-emerald-700 dark:bg-emerald-500/15 dark:border-emerald-400/40 dark:text-emerald-300',
|
|
165
|
-
title: 'text-emerald-700 dark:text-emerald-300',
|
|
166
|
-
body: 'text-slate-700 dark:text-slate-200',
|
|
167
|
-
label: 'text-slate-500 dark:text-slate-300',
|
|
168
|
-
},
|
|
169
|
-
outlined: {
|
|
170
|
-
container: 'border-emerald-400 bg-white dark:border-emerald-500/70 dark:bg-slate-900',
|
|
171
|
-
icon: 'bg-emerald-100/60 border-emerald-500 text-emerald-600 dark:bg-emerald-900/50 dark:border-emerald-400 dark:text-emerald-300',
|
|
172
|
-
title: 'text-emerald-700 dark:text-emerald-300',
|
|
173
|
-
body: 'text-slate-600 dark:text-slate-200',
|
|
174
|
-
label: 'text-slate-400 dark:text-slate-400',
|
|
175
|
-
},
|
|
176
|
-
filled: {
|
|
177
|
-
container: 'bg-emerald-700 border-transparent dark:bg-emerald-700',
|
|
178
|
-
icon: 'bg-white/20 border-white/50 text-white',
|
|
179
|
-
title: 'text-white',
|
|
180
|
-
body: 'text-white',
|
|
181
|
-
label: 'text-white/70',
|
|
182
|
-
},
|
|
183
|
-
},
|
|
184
|
-
warning: {
|
|
185
|
-
default: {
|
|
186
|
-
container: 'border-amber-300/90 bg-amber-50/70 dark:border-amber-500/50 dark:bg-amber-950/40',
|
|
187
|
-
icon: 'bg-amber-100/60 border-amber-500 text-amber-600 dark:bg-amber-900/50 dark:border-amber-400 dark:text-amber-300',
|
|
188
|
-
title: 'text-amber-700 dark:text-amber-300',
|
|
189
|
-
body: 'text-slate-700 dark:text-amber-50',
|
|
190
|
-
label: 'text-slate-500 dark:text-slate-300',
|
|
191
|
-
},
|
|
192
|
-
standard: {
|
|
193
|
-
container: 'border-amber-200/90 bg-amber-50/60 dark:border-amber-500/35 dark:bg-amber-950/35',
|
|
194
|
-
icon: 'bg-amber-100 border-amber-300 text-amber-700 dark:bg-amber-500/15 dark:border-amber-400/40 dark:text-amber-300',
|
|
195
|
-
title: 'text-amber-700 dark:text-amber-300',
|
|
196
|
-
body: 'text-slate-700 dark:text-slate-200',
|
|
197
|
-
label: 'text-slate-500 dark:text-slate-300',
|
|
198
|
-
},
|
|
199
|
-
outlined: {
|
|
200
|
-
container: 'border-amber-400 bg-white dark:border-amber-500/70 dark:bg-slate-900',
|
|
201
|
-
icon: 'bg-amber-100/60 border-amber-500 text-amber-600 dark:bg-amber-900/50 dark:border-amber-400 dark:text-amber-300',
|
|
202
|
-
title: 'text-amber-700 dark:text-amber-300',
|
|
203
|
-
body: 'text-slate-600 dark:text-slate-200',
|
|
204
|
-
label: 'text-slate-400 dark:text-slate-400',
|
|
205
|
-
},
|
|
206
|
-
filled: {
|
|
207
|
-
container: 'bg-amber-600 border-transparent dark:bg-amber-600',
|
|
208
|
-
icon: 'bg-white/20 border-white/50 text-white',
|
|
209
|
-
title: 'text-white',
|
|
210
|
-
body: 'text-white',
|
|
211
|
-
label: 'text-white/70',
|
|
212
|
-
},
|
|
213
|
-
},
|
|
214
|
-
error: {
|
|
215
|
-
default: {
|
|
216
|
-
container: 'border-rose-300/90 bg-rose-50/70 dark:border-rose-500/50 dark:bg-rose-950/40',
|
|
217
|
-
icon: 'bg-rose-100/60 border-rose-500 text-rose-600 dark:bg-rose-900/50 dark:border-rose-400 dark:text-rose-300',
|
|
218
|
-
title: 'text-rose-700 dark:text-rose-300',
|
|
219
|
-
body: 'text-slate-700 dark:text-rose-50',
|
|
220
|
-
label: 'text-slate-500 dark:text-slate-300',
|
|
221
|
-
},
|
|
222
|
-
standard: {
|
|
223
|
-
container: 'border-rose-200/90 bg-rose-50/60 dark:border-rose-500/35 dark:bg-rose-950/35',
|
|
224
|
-
icon: 'bg-rose-100 border-rose-300 text-rose-700 dark:bg-rose-500/15 dark:border-rose-400/40 dark:text-rose-300',
|
|
225
|
-
title: 'text-rose-700 dark:text-rose-300',
|
|
226
|
-
body: 'text-slate-700 dark:text-slate-200',
|
|
227
|
-
label: 'text-slate-500 dark:text-slate-300',
|
|
228
|
-
},
|
|
229
|
-
outlined: {
|
|
230
|
-
container: 'border-rose-400 bg-white dark:border-rose-500/70 dark:bg-slate-900',
|
|
231
|
-
icon: 'bg-rose-100/60 border-rose-500 text-rose-600 dark:bg-rose-900/50 dark:border-rose-400 dark:text-rose-300',
|
|
232
|
-
title: 'text-rose-700 dark:text-rose-300',
|
|
233
|
-
body: 'text-slate-600 dark:text-slate-200',
|
|
234
|
-
label: 'text-slate-400 dark:text-slate-400',
|
|
235
|
-
},
|
|
236
|
-
filled: {
|
|
237
|
-
container: 'bg-rose-700 border-transparent dark:bg-rose-700',
|
|
238
|
-
icon: 'bg-white/20 border-white/50 text-white',
|
|
239
|
-
title: 'text-white',
|
|
240
|
-
body: 'text-white',
|
|
241
|
-
label: 'text-white/70',
|
|
242
|
-
},
|
|
243
|
-
},
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
const accentStripes = {
|
|
247
|
-
info: 'border-l-sky-500 dark:border-l-sky-400',
|
|
248
|
-
success: 'border-l-emerald-500 dark:border-l-emerald-400',
|
|
249
|
-
warning: 'border-l-amber-500 dark:border-l-amber-400',
|
|
250
|
-
error: 'border-l-rose-500 dark:border-l-rose-400',
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
const sizes = {
|
|
254
|
-
sm: {
|
|
255
|
-
padding: 'px-3 py-2',
|
|
256
|
-
text: 'text-xs sm:text-sm',
|
|
257
|
-
badgeWrap: 'h-5 w-5 mt-0.5',
|
|
258
|
-
badgeIcon: 'h-5 w-5',
|
|
259
|
-
customIcon: 'text-base leading-none',
|
|
260
|
-
lucide: 'h-4 w-4',
|
|
261
|
-
close: 'h-3 w-3',
|
|
262
|
-
},
|
|
263
|
-
md: {
|
|
264
|
-
padding: 'px-4 py-3',
|
|
265
|
-
text: 'text-sm sm:text-base',
|
|
266
|
-
badgeWrap: 'h-6 w-6 mt-0.5',
|
|
267
|
-
badgeIcon: 'h-6 w-6',
|
|
268
|
-
customIcon: 'text-lg leading-none',
|
|
269
|
-
lucide: 'h-5 w-5',
|
|
270
|
-
close: 'h-3.5 w-3.5',
|
|
271
|
-
},
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
const badgeIcons = { info: Info, success: CircleCheckBig, warning: TriangleAlert, error: OctagonX }
|
|
275
|
-
const lucideIcons = { info: Info, success: CircleCheckBig, warning: TriangleAlert, error: OctagonX }
|
|
276
|
-
|
|
277
|
-
// ─── Props / emits ────────────────────────────────────────────────────────────
|
|
278
|
-
|
|
279
|
-
const props = defineProps({
|
|
280
|
-
type: {
|
|
281
|
-
type: String,
|
|
282
|
-
// Keep legacy default for drop-in compatibility with kMessage.
|
|
283
|
-
default: 'warning',
|
|
284
|
-
validator: (val) => ['info', 'success', 'warning', 'error'].includes(val),
|
|
285
|
-
},
|
|
286
|
-
variant: {
|
|
287
|
-
type: String,
|
|
288
|
-
default: 'default',
|
|
289
|
-
validator: (val) => ['default', 'standard', 'outlined', 'filled'].includes(val),
|
|
290
|
-
},
|
|
291
|
-
iconStyle: {
|
|
292
|
-
type: String,
|
|
293
|
-
default: 'badge',
|
|
294
|
-
validator: (val) => ['badge', 'lucide', 'none'].includes(val),
|
|
295
|
-
},
|
|
296
|
-
accent: { type: Boolean, default: false },
|
|
297
|
-
size: {
|
|
298
|
-
type: String,
|
|
299
|
-
default: 'md',
|
|
300
|
-
validator: (val) => ['sm', 'md'].includes(val),
|
|
301
|
-
},
|
|
302
|
-
title: { type: String, default: '' },
|
|
303
|
-
description: { type: String, default: '' },
|
|
304
|
-
label: { type: String, default: '' },
|
|
305
|
-
visible: { type: Boolean, default: null },
|
|
306
|
-
closable: { type: Boolean, default: false },
|
|
307
|
-
dismissAfter: {
|
|
308
|
-
type: Number,
|
|
309
|
-
default: 0,
|
|
310
|
-
validator: (val) => Number.isFinite(val) && val >= 0,
|
|
311
|
-
},
|
|
312
|
-
})
|
|
313
|
-
|
|
314
|
-
const emit = defineEmits(['update:visible', 'close'])
|
|
315
|
-
|
|
316
|
-
// ─── State ────────────────────────────────────────────────────────────────────
|
|
317
|
-
|
|
318
|
-
const slots = useSlots()
|
|
319
|
-
const internalVisible = ref(true)
|
|
320
|
-
const messageRef = ref(null)
|
|
321
|
-
const dismissTimer = ref(null)
|
|
322
|
-
const dismissRaf = ref(null)
|
|
323
|
-
const dismissStartedAt = ref(0)
|
|
324
|
-
const dismissRemainingAtStart = ref(0)
|
|
325
|
-
const dismissRemaining = ref(0)
|
|
326
|
-
|
|
327
|
-
const isVisible = computed(() => (props.visible !== null ? props.visible : internalVisible.value))
|
|
328
|
-
const isClosable = computed(() => props.closable || props.visible !== null)
|
|
329
|
-
const hasActionSlot = computed(() => !!slots.action)
|
|
330
|
-
const hasDefaultSlot = computed(() => !!slots.default)
|
|
331
|
-
const hasIconSlot = computed(() => !!slots.icon)
|
|
332
|
-
const colors = computed(() => colorConfig[props.type][props.variant])
|
|
333
|
-
const accentEnabled = computed(() => props.accent || props.variant === 'standard')
|
|
334
|
-
const dismissAfterMs = computed(() => {
|
|
335
|
-
const value = Number(props.dismissAfter)
|
|
336
|
-
return Number.isFinite(value) && value > 0 ? value : 0
|
|
337
|
-
})
|
|
338
|
-
const showDismissProgress = computed(() => isVisible.value && dismissAfterMs.value > 0)
|
|
339
|
-
const dismissElapsedPercent = computed(() => {
|
|
340
|
-
if (dismissAfterMs.value <= 0) return 0
|
|
341
|
-
return Math.min(100, Math.max(0, ((dismissAfterMs.value - dismissRemaining.value) / dismissAfterMs.value) * 100))
|
|
342
|
-
})
|
|
343
|
-
const dismissSecondsLeft = computed(() => Math.max(0, Math.ceil(dismissRemaining.value / 1000)))
|
|
344
|
-
|
|
345
|
-
const progressTracks = {
|
|
346
|
-
info: 'bg-sky-200/60 dark:bg-sky-900/55',
|
|
347
|
-
success: 'bg-emerald-200/60 dark:bg-emerald-900/55',
|
|
348
|
-
warning: 'bg-amber-200/60 dark:bg-amber-900/55',
|
|
349
|
-
error: 'bg-rose-200/60 dark:bg-rose-900/55',
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
const progressBars = {
|
|
353
|
-
info: 'bg-sky-500/70 dark:bg-sky-400/80',
|
|
354
|
-
success: 'bg-emerald-500/70 dark:bg-emerald-400/80',
|
|
355
|
-
warning: 'bg-amber-500/80 dark:bg-amber-400/85',
|
|
356
|
-
error: 'bg-rose-500/70 dark:bg-rose-400/80',
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
function stopDismissRaf() {
|
|
360
|
-
if (dismissRaf.value) {
|
|
361
|
-
cancelAnimationFrame(dismissRaf.value)
|
|
362
|
-
dismissRaf.value = null
|
|
363
|
-
}
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
function syncDismissRemaining() {
|
|
367
|
-
if (!dismissTimer.value) return
|
|
368
|
-
|
|
369
|
-
const elapsed = Date.now() - dismissStartedAt.value
|
|
370
|
-
dismissRemaining.value = Math.max(0, dismissRemainingAtStart.value - elapsed)
|
|
371
|
-
|
|
372
|
-
if (dismissRemaining.value > 0) {
|
|
373
|
-
dismissRaf.value = requestAnimationFrame(syncDismissRemaining)
|
|
374
|
-
} else {
|
|
375
|
-
dismissRaf.value = null
|
|
376
|
-
}
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
function clearDismissTimer() {
|
|
380
|
-
if (dismissTimer.value) {
|
|
381
|
-
clearTimeout(dismissTimer.value)
|
|
382
|
-
dismissTimer.value = null
|
|
383
|
-
}
|
|
384
|
-
stopDismissRaf()
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
function startDismissTimer(duration) {
|
|
388
|
-
clearDismissTimer()
|
|
389
|
-
if (!isVisible.value || duration <= 0) return
|
|
390
|
-
|
|
391
|
-
dismissRemaining.value = duration
|
|
392
|
-
dismissRemainingAtStart.value = duration
|
|
393
|
-
dismissStartedAt.value = Date.now()
|
|
394
|
-
dismissRaf.value = requestAnimationFrame(syncDismissRemaining)
|
|
395
|
-
dismissTimer.value = setTimeout(() => {
|
|
396
|
-
dismissTimer.value = null
|
|
397
|
-
stopDismissRaf()
|
|
398
|
-
dismissRemaining.value = 0
|
|
399
|
-
close()
|
|
400
|
-
}, duration)
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
function pauseDismissTimer() {
|
|
404
|
-
if (!dismissTimer.value || dismissAfterMs.value <= 0) return
|
|
405
|
-
|
|
406
|
-
const elapsed = Date.now() - dismissStartedAt.value
|
|
407
|
-
dismissRemaining.value = Math.max(0, dismissRemainingAtStart.value - elapsed)
|
|
408
|
-
clearDismissTimer()
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
function resumeDismissTimer() {
|
|
412
|
-
if (!isVisible.value || dismissAfterMs.value <= 0) return
|
|
413
|
-
|
|
414
|
-
if (dismissRemaining.value <= 0) {
|
|
415
|
-
close()
|
|
416
|
-
return
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
startDismissTimer(dismissRemaining.value)
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
function handleFocusOut(event) {
|
|
423
|
-
const nextFocused = event.relatedTarget
|
|
424
|
-
if (nextFocused && messageRef.value && messageRef.value.contains(nextFocused)) return
|
|
425
|
-
resumeDismissTimer()
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
function close() {
|
|
429
|
-
clearDismissTimer()
|
|
430
|
-
dismissRemaining.value = dismissAfterMs.value
|
|
431
|
-
if (props.visible !== null) {
|
|
432
|
-
emit('update:visible', false)
|
|
433
|
-
} else {
|
|
434
|
-
internalVisible.value = false
|
|
435
|
-
}
|
|
436
|
-
emit('close')
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
watch(
|
|
440
|
-
[isVisible, dismissAfterMs],
|
|
441
|
-
([visible, timeout]) => {
|
|
442
|
-
clearDismissTimer()
|
|
443
|
-
dismissRemaining.value = timeout
|
|
444
|
-
if (visible && timeout > 0) {
|
|
445
|
-
startDismissTimer(timeout)
|
|
446
|
-
}
|
|
447
|
-
},
|
|
448
|
-
{ immediate: true }
|
|
449
|
-
)
|
|
450
|
-
|
|
451
|
-
onBeforeUnmount(() => {
|
|
452
|
-
clearDismissTimer()
|
|
453
|
-
})
|
|
454
|
-
</script>
|
|
455
|
-
|
|
456
|
-
<style scoped>
|
|
457
|
-
.kmessagenew-enter-active {
|
|
458
|
-
transition: all 0.2s ease-out;
|
|
459
|
-
}
|
|
460
|
-
.kmessagenew-leave-active {
|
|
461
|
-
transition: all 0.15s ease-in;
|
|
462
|
-
}
|
|
463
|
-
.kmessagenew-enter-from,
|
|
464
|
-
.kmessagenew-leave-to {
|
|
465
|
-
opacity: 0;
|
|
466
|
-
transform: translateY(-4px);
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
@media (prefers-reduced-motion: reduce) {
|
|
470
|
-
.kmessagenew-enter-active,
|
|
471
|
-
.kmessagenew-leave-active {
|
|
472
|
-
transition: opacity 0.1s;
|
|
473
|
-
}
|
|
474
|
-
.kmessagenew-enter-from,
|
|
475
|
-
.kmessagenew-leave-to {
|
|
476
|
-
transform: none;
|
|
477
|
-
}
|
|
478
|
-
}
|
|
479
|
-
</style>
|