klemek/tout-doux
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 15 Wiki Activity

refactor: format
TS Lint / ESLint (push) Has been cancelled
Details
TS Lint / Oxlint (push) Has been cancelled
Details
TS Lint / TypeScript (push) Has been cancelled
Details

Browse Source
This commit is contained in:
klemek
2026-07-14 11:47:05 +02:00
parent 566f8403ef
commit a9b2e31d81
17 changed files with 432 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/ts/components/AlertItem.vue
+24 -9
View File
@@ -1,12 +1,18 @@
<script setup lang="ts">
import type { Alert } from '@/types';
import { computed, ref, onBeforeMount } from 'vue';
import { CircleX, CircleAlert, CircleCheck, Info } from '@lucide/vue';
import type { Alert } from "@/types";
import { computed, ref, onBeforeMount } from "vue";
import { CircleX, CircleAlert, CircleCheck, Info } from "@lucide/vue";
const props = defineProps<{ alert: Alert }>();
const dismissed = ref<boolean>(false);
const refreshKey = ref<number>(1);
const visible = computed<boolean>(() => refreshKey.value > 0 && !dismissed.value && (new Date().getTime() - props.alert.created.getTime()) <= props.alert.seconds * 1000);
const visible = computed<boolean>(
() =>
refreshKey.value > 0 &&
!dismissed.value &&
new Date().getTime() - props.alert.created.getTime() <=
props.alert.seconds * 1000,
);
function onDismiss() {
dismissed.value = true;
@@ -20,11 +26,20 @@ onBeforeMount(() => {
</script>
<template>
<div v-if="visible" class="alert alert-info alert-soft cursor-pointer" :class="`alert-${alert.type}`" @click="onDismiss">
<CircleX v-if="alert.type === 'error'" /> <!-- alert-error -->
<CircleAlert v-if="alert.type === 'warning'" /> <!-- alert-warning -->
<CircleCheck v-if="alert.type === 'success'" /> <!-- alert-success -->
<Info v-if="alert.type === 'info'" /> <!-- alert-info -->
<div
v-if="visible"
class="alert alert-info alert-soft cursor-pointer"
:class="`alert-${alert.type}`"
@click="onDismiss"
>
<CircleX v-if="alert.type === 'error'" />
<!-- alert-error -->
<CircleAlert v-if="alert.type === 'warning'" />
<!-- alert-warning -->
<CircleCheck v-if="alert.type === 'success'" />
<!-- alert-success -->
<Info v-if="alert.type === 'info'" />
<!-- alert-info -->
<span>{{ alert.message }}</span>
</div>
</template>