ketekny-ui-kit 1.0.44 → 1.0.46
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 +2 -1
- package/package.json +1 -1
- package/src/style/style.css +2 -0
- package/src/ui/kMessageNew.vue +412 -0
package/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// UI Components
|
|
2
2
|
import kMessage from './src/ui/kMessage.vue'
|
|
3
|
+
import kMessageNew from './src/ui/kMessageNew.vue'
|
|
3
4
|
import kButton from './src/ui/kButton.vue'
|
|
4
5
|
import kChip from './src/ui/kChip.vue'
|
|
5
6
|
import kCode from './src/ui/kCode.vue'
|
|
@@ -48,7 +49,7 @@ import tailwindPreset from './tailwind-preset.js'
|
|
|
48
49
|
// Named exports (tree-shaking friendly)
|
|
49
50
|
export {
|
|
50
51
|
// UI Components
|
|
51
|
-
kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
|
|
52
|
+
kMessage, kMessageNew, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
|
|
52
53
|
|
|
53
54
|
// Form Components
|
|
54
55
|
kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kDateSelectorV2, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
|
package/package.json
CHANGED
package/src/style/style.css
CHANGED
|
@@ -0,0 +1,412 @@
|
|
|
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
|
+
</div>
|
|
93
|
+
</Transition>
|
|
94
|
+
</template>
|
|
95
|
+
|
|
96
|
+
<script setup>
|
|
97
|
+
import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue'
|
|
98
|
+
import { X as CloseIcon, Info, CircleCheckBig, TriangleAlert, OctagonX } from 'lucide-vue-next'
|
|
99
|
+
|
|
100
|
+
// ─── Color config ────────────────────────────────────────────────────────────
|
|
101
|
+
|
|
102
|
+
const colorConfig = {
|
|
103
|
+
info: {
|
|
104
|
+
default: {
|
|
105
|
+
container: 'border-sky-300/90 bg-sky-50/70 dark:border-sky-500/50 dark:bg-sky-950/40',
|
|
106
|
+
icon: 'bg-sky-100/60 border-sky-500 text-sky-600 dark:bg-sky-900/50 dark:border-sky-400 dark:text-sky-300',
|
|
107
|
+
title: 'text-sky-700 dark:text-sky-300',
|
|
108
|
+
body: 'text-slate-700 dark:text-sky-50',
|
|
109
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
110
|
+
},
|
|
111
|
+
standard: {
|
|
112
|
+
container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
|
|
113
|
+
icon: 'bg-sky-100 border-sky-300 text-sky-700 dark:bg-sky-500/15 dark:border-sky-400/40 dark:text-sky-300',
|
|
114
|
+
title: 'text-sky-700 dark:text-sky-300',
|
|
115
|
+
body: 'text-slate-700 dark:text-slate-200',
|
|
116
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
117
|
+
},
|
|
118
|
+
outlined: {
|
|
119
|
+
container: 'border-sky-400 bg-white dark:border-sky-500/70 dark:bg-slate-900',
|
|
120
|
+
icon: 'bg-sky-100/60 border-sky-500 text-sky-600 dark:bg-sky-900/50 dark:border-sky-400 dark:text-sky-300',
|
|
121
|
+
title: 'text-sky-700 dark:text-sky-300',
|
|
122
|
+
body: 'text-slate-600 dark:text-slate-200',
|
|
123
|
+
label: 'text-slate-400 dark:text-slate-400',
|
|
124
|
+
},
|
|
125
|
+
filled: {
|
|
126
|
+
container: 'bg-sky-700 border-transparent dark:bg-sky-700',
|
|
127
|
+
icon: 'bg-white/20 border-white/50 text-white',
|
|
128
|
+
title: 'text-white',
|
|
129
|
+
body: 'text-white',
|
|
130
|
+
label: 'text-white/70',
|
|
131
|
+
},
|
|
132
|
+
},
|
|
133
|
+
success: {
|
|
134
|
+
default: {
|
|
135
|
+
container: 'border-emerald-300/90 bg-emerald-50/70 dark:border-emerald-500/50 dark:bg-emerald-950/40',
|
|
136
|
+
icon: 'bg-emerald-100/60 border-emerald-500 text-emerald-600 dark:bg-emerald-900/50 dark:border-emerald-400 dark:text-emerald-300',
|
|
137
|
+
title: 'text-emerald-700 dark:text-emerald-300',
|
|
138
|
+
body: 'text-slate-700 dark:text-emerald-50',
|
|
139
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
140
|
+
},
|
|
141
|
+
standard: {
|
|
142
|
+
container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
|
|
143
|
+
icon: 'bg-emerald-100 border-emerald-300 text-emerald-700 dark:bg-emerald-500/15 dark:border-emerald-400/40 dark:text-emerald-300',
|
|
144
|
+
title: 'text-emerald-700 dark:text-emerald-300',
|
|
145
|
+
body: 'text-slate-700 dark:text-slate-200',
|
|
146
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
147
|
+
},
|
|
148
|
+
outlined: {
|
|
149
|
+
container: 'border-emerald-400 bg-white dark:border-emerald-500/70 dark:bg-slate-900',
|
|
150
|
+
icon: 'bg-emerald-100/60 border-emerald-500 text-emerald-600 dark:bg-emerald-900/50 dark:border-emerald-400 dark:text-emerald-300',
|
|
151
|
+
title: 'text-emerald-700 dark:text-emerald-300',
|
|
152
|
+
body: 'text-slate-600 dark:text-slate-200',
|
|
153
|
+
label: 'text-slate-400 dark:text-slate-400',
|
|
154
|
+
},
|
|
155
|
+
filled: {
|
|
156
|
+
container: 'bg-emerald-700 border-transparent dark:bg-emerald-700',
|
|
157
|
+
icon: 'bg-white/20 border-white/50 text-white',
|
|
158
|
+
title: 'text-white',
|
|
159
|
+
body: 'text-white',
|
|
160
|
+
label: 'text-white/70',
|
|
161
|
+
},
|
|
162
|
+
},
|
|
163
|
+
warning: {
|
|
164
|
+
default: {
|
|
165
|
+
container: 'border-amber-300/90 bg-amber-50/70 dark:border-amber-500/50 dark:bg-amber-950/40',
|
|
166
|
+
icon: 'bg-amber-100/60 border-amber-500 text-amber-600 dark:bg-amber-900/50 dark:border-amber-400 dark:text-amber-300',
|
|
167
|
+
title: 'text-amber-700 dark:text-amber-300',
|
|
168
|
+
body: 'text-slate-700 dark:text-amber-50',
|
|
169
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
170
|
+
},
|
|
171
|
+
standard: {
|
|
172
|
+
container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
|
|
173
|
+
icon: 'bg-amber-100 border-amber-300 text-amber-700 dark:bg-amber-500/15 dark:border-amber-400/40 dark:text-amber-300',
|
|
174
|
+
title: 'text-amber-700 dark:text-amber-300',
|
|
175
|
+
body: 'text-slate-700 dark:text-slate-200',
|
|
176
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
177
|
+
},
|
|
178
|
+
outlined: {
|
|
179
|
+
container: 'border-amber-400 bg-white dark:border-amber-500/70 dark:bg-slate-900',
|
|
180
|
+
icon: 'bg-amber-100/60 border-amber-500 text-amber-600 dark:bg-amber-900/50 dark:border-amber-400 dark:text-amber-300',
|
|
181
|
+
title: 'text-amber-700 dark:text-amber-300',
|
|
182
|
+
body: 'text-slate-600 dark:text-slate-200',
|
|
183
|
+
label: 'text-slate-400 dark:text-slate-400',
|
|
184
|
+
},
|
|
185
|
+
filled: {
|
|
186
|
+
container: 'bg-amber-600 border-transparent dark:bg-amber-600',
|
|
187
|
+
icon: 'bg-white/20 border-white/50 text-white',
|
|
188
|
+
title: 'text-white',
|
|
189
|
+
body: 'text-white',
|
|
190
|
+
label: 'text-white/70',
|
|
191
|
+
},
|
|
192
|
+
},
|
|
193
|
+
error: {
|
|
194
|
+
default: {
|
|
195
|
+
container: 'border-rose-300/90 bg-rose-50/70 dark:border-rose-500/50 dark:bg-rose-950/40',
|
|
196
|
+
icon: 'bg-rose-100/60 border-rose-500 text-rose-600 dark:bg-rose-900/50 dark:border-rose-400 dark:text-rose-300',
|
|
197
|
+
title: 'text-rose-700 dark:text-rose-300',
|
|
198
|
+
body: 'text-slate-700 dark:text-rose-50',
|
|
199
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
200
|
+
},
|
|
201
|
+
standard: {
|
|
202
|
+
container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
|
|
203
|
+
icon: 'bg-rose-100 border-rose-300 text-rose-700 dark:bg-rose-500/15 dark:border-rose-400/40 dark:text-rose-300',
|
|
204
|
+
title: 'text-rose-700 dark:text-rose-300',
|
|
205
|
+
body: 'text-slate-700 dark:text-slate-200',
|
|
206
|
+
label: 'text-slate-500 dark:text-slate-300',
|
|
207
|
+
},
|
|
208
|
+
outlined: {
|
|
209
|
+
container: 'border-rose-400 bg-white dark:border-rose-500/70 dark:bg-slate-900',
|
|
210
|
+
icon: 'bg-rose-100/60 border-rose-500 text-rose-600 dark:bg-rose-900/50 dark:border-rose-400 dark:text-rose-300',
|
|
211
|
+
title: 'text-rose-700 dark:text-rose-300',
|
|
212
|
+
body: 'text-slate-600 dark:text-slate-200',
|
|
213
|
+
label: 'text-slate-400 dark:text-slate-400',
|
|
214
|
+
},
|
|
215
|
+
filled: {
|
|
216
|
+
container: 'bg-rose-700 border-transparent dark:bg-rose-700',
|
|
217
|
+
icon: 'bg-white/20 border-white/50 text-white',
|
|
218
|
+
title: 'text-white',
|
|
219
|
+
body: 'text-white',
|
|
220
|
+
label: 'text-white/70',
|
|
221
|
+
},
|
|
222
|
+
},
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
const accentStripes = {
|
|
226
|
+
info: 'border-l-sky-500 dark:border-l-sky-400',
|
|
227
|
+
success: 'border-l-emerald-500 dark:border-l-emerald-400',
|
|
228
|
+
warning: 'border-l-amber-500 dark:border-l-amber-400',
|
|
229
|
+
error: 'border-l-rose-500 dark:border-l-rose-400',
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
const sizes = {
|
|
233
|
+
sm: {
|
|
234
|
+
padding: 'px-3 py-2',
|
|
235
|
+
text: 'text-xs sm:text-sm',
|
|
236
|
+
badgeWrap: 'h-5 w-5 mt-0.5',
|
|
237
|
+
badgeIcon: 'h-5 w-5',
|
|
238
|
+
customIcon: 'text-base leading-none',
|
|
239
|
+
lucide: 'h-4 w-4',
|
|
240
|
+
close: 'h-3 w-3',
|
|
241
|
+
},
|
|
242
|
+
md: {
|
|
243
|
+
padding: 'px-4 py-3',
|
|
244
|
+
text: 'text-sm sm:text-base',
|
|
245
|
+
badgeWrap: 'h-6 w-6 mt-0.5',
|
|
246
|
+
badgeIcon: 'h-6 w-6',
|
|
247
|
+
customIcon: 'text-lg leading-none',
|
|
248
|
+
lucide: 'h-5 w-5',
|
|
249
|
+
close: 'h-3.5 w-3.5',
|
|
250
|
+
},
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
const badgeIcons = { info: Info, success: CircleCheckBig, warning: TriangleAlert, error: OctagonX }
|
|
254
|
+
const lucideIcons = { info: Info, success: CircleCheckBig, warning: TriangleAlert, error: OctagonX }
|
|
255
|
+
|
|
256
|
+
// ─── Props / emits ────────────────────────────────────────────────────────────
|
|
257
|
+
|
|
258
|
+
const props = defineProps({
|
|
259
|
+
type: {
|
|
260
|
+
type: String,
|
|
261
|
+
// Keep legacy default for drop-in compatibility with kMessage.
|
|
262
|
+
default: 'warning',
|
|
263
|
+
validator: (val) => ['info', 'success', 'warning', 'error'].includes(val),
|
|
264
|
+
},
|
|
265
|
+
variant: {
|
|
266
|
+
type: String,
|
|
267
|
+
default: 'default',
|
|
268
|
+
validator: (val) => ['default', 'standard', 'outlined', 'filled'].includes(val),
|
|
269
|
+
},
|
|
270
|
+
iconStyle: {
|
|
271
|
+
type: String,
|
|
272
|
+
default: 'badge',
|
|
273
|
+
validator: (val) => ['badge', 'lucide', 'none'].includes(val),
|
|
274
|
+
},
|
|
275
|
+
accent: { type: Boolean, default: false },
|
|
276
|
+
size: {
|
|
277
|
+
type: String,
|
|
278
|
+
default: 'md',
|
|
279
|
+
validator: (val) => ['sm', 'md'].includes(val),
|
|
280
|
+
},
|
|
281
|
+
title: { type: String, default: '' },
|
|
282
|
+
description: { type: String, default: '' },
|
|
283
|
+
label: { type: String, default: '' },
|
|
284
|
+
visible: { type: Boolean, default: null },
|
|
285
|
+
closable: { type: Boolean, default: false },
|
|
286
|
+
dismissAfter: {
|
|
287
|
+
type: Number,
|
|
288
|
+
default: 0,
|
|
289
|
+
validator: (val) => Number.isFinite(val) && val >= 0,
|
|
290
|
+
},
|
|
291
|
+
})
|
|
292
|
+
|
|
293
|
+
const emit = defineEmits(['update:visible', 'close'])
|
|
294
|
+
|
|
295
|
+
// ─── State ────────────────────────────────────────────────────────────────────
|
|
296
|
+
|
|
297
|
+
const slots = useSlots()
|
|
298
|
+
const internalVisible = ref(true)
|
|
299
|
+
const messageRef = ref(null)
|
|
300
|
+
const dismissTimer = ref(null)
|
|
301
|
+
const dismissStartedAt = ref(0)
|
|
302
|
+
const dismissRemaining = ref(0)
|
|
303
|
+
|
|
304
|
+
const isVisible = computed(() => (props.visible !== null ? props.visible : internalVisible.value))
|
|
305
|
+
const isClosable = computed(() => props.closable || props.visible !== null)
|
|
306
|
+
const hasActionSlot = computed(() => !!slots.action)
|
|
307
|
+
const hasDefaultSlot = computed(() => !!slots.default)
|
|
308
|
+
const hasIconSlot = computed(() => !!slots.icon)
|
|
309
|
+
const colors = computed(() => colorConfig[props.type][props.variant])
|
|
310
|
+
const accentEnabled = computed(() => props.accent || props.variant === 'standard')
|
|
311
|
+
const dismissAfterMs = computed(() => {
|
|
312
|
+
const value = Number(props.dismissAfter)
|
|
313
|
+
return Number.isFinite(value) && value > 0 ? value : 0
|
|
314
|
+
})
|
|
315
|
+
|
|
316
|
+
function clearDismissTimer() {
|
|
317
|
+
if (dismissTimer.value) {
|
|
318
|
+
clearTimeout(dismissTimer.value)
|
|
319
|
+
dismissTimer.value = null
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
function startDismissTimer(duration) {
|
|
324
|
+
clearDismissTimer()
|
|
325
|
+
if (!isVisible.value || duration <= 0) return
|
|
326
|
+
|
|
327
|
+
dismissRemaining.value = duration
|
|
328
|
+
dismissStartedAt.value = Date.now()
|
|
329
|
+
dismissTimer.value = setTimeout(() => {
|
|
330
|
+
dismissTimer.value = null
|
|
331
|
+
dismissRemaining.value = 0
|
|
332
|
+
close()
|
|
333
|
+
}, duration)
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
function pauseDismissTimer() {
|
|
337
|
+
if (!dismissTimer.value || dismissAfterMs.value <= 0) return
|
|
338
|
+
|
|
339
|
+
const elapsed = Date.now() - dismissStartedAt.value
|
|
340
|
+
dismissRemaining.value = Math.max(0, dismissRemaining.value - elapsed)
|
|
341
|
+
clearDismissTimer()
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
function resumeDismissTimer() {
|
|
345
|
+
if (!isVisible.value || dismissAfterMs.value <= 0) return
|
|
346
|
+
|
|
347
|
+
if (dismissRemaining.value <= 0) {
|
|
348
|
+
close()
|
|
349
|
+
return
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
startDismissTimer(dismissRemaining.value)
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
function handleFocusOut(event) {
|
|
356
|
+
const nextFocused = event.relatedTarget
|
|
357
|
+
if (nextFocused && messageRef.value && messageRef.value.contains(nextFocused)) return
|
|
358
|
+
resumeDismissTimer()
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
function close() {
|
|
362
|
+
clearDismissTimer()
|
|
363
|
+
dismissRemaining.value = dismissAfterMs.value
|
|
364
|
+
if (props.visible !== null) {
|
|
365
|
+
emit('update:visible', false)
|
|
366
|
+
} else {
|
|
367
|
+
internalVisible.value = false
|
|
368
|
+
}
|
|
369
|
+
emit('close')
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
watch(
|
|
373
|
+
[isVisible, dismissAfterMs],
|
|
374
|
+
([visible, timeout]) => {
|
|
375
|
+
clearDismissTimer()
|
|
376
|
+
dismissRemaining.value = timeout
|
|
377
|
+
if (visible && timeout > 0) {
|
|
378
|
+
startDismissTimer(timeout)
|
|
379
|
+
}
|
|
380
|
+
},
|
|
381
|
+
{ immediate: true }
|
|
382
|
+
)
|
|
383
|
+
|
|
384
|
+
onBeforeUnmount(() => {
|
|
385
|
+
clearDismissTimer()
|
|
386
|
+
})
|
|
387
|
+
</script>
|
|
388
|
+
|
|
389
|
+
<style scoped>
|
|
390
|
+
.kmessagenew-enter-active {
|
|
391
|
+
transition: all 0.2s ease-out;
|
|
392
|
+
}
|
|
393
|
+
.kmessagenew-leave-active {
|
|
394
|
+
transition: all 0.15s ease-in;
|
|
395
|
+
}
|
|
396
|
+
.kmessagenew-enter-from,
|
|
397
|
+
.kmessagenew-leave-to {
|
|
398
|
+
opacity: 0;
|
|
399
|
+
transform: translateY(-4px);
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
@media (prefers-reduced-motion: reduce) {
|
|
403
|
+
.kmessagenew-enter-active,
|
|
404
|
+
.kmessagenew-leave-active {
|
|
405
|
+
transition: opacity 0.1s;
|
|
406
|
+
}
|
|
407
|
+
.kmessagenew-enter-from,
|
|
408
|
+
.kmessagenew-leave-to {
|
|
409
|
+
transform: none;
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
</style>
|