MALIO-DEV/Inventory_frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): replace inline icons with lucide components

Browse Source
This commit is contained in:
Matthieu
2025-09-19 08:19:09 +02:00
parent dec4d451bb
commit 32dd8fab58
24 changed files with 519 additions and 901 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/components/ToastContainer.vue
View File

@@ -17,18 +17,26 @@
<div class="flex items-center gap-2">
<!-- Icon -->
<div class="flex-shrink-0">
<svg v-if="toast.type === 'success'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<svg v-else-if="toast.type === 'error'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<svg v-else-if="toast.type === 'warning'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
</svg>
<svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<IconLucideCheck
v-if="toast.type === 'success'"
class="w-5 h-5"
aria-hidden="true"
/>
<IconLucideX
v-else-if="toast.type === 'error'"
class="w-5 h-5"
aria-hidden="true"
/>
<IconLucideAlertTriangle
v-else-if="toast.type === 'warning'"
class="w-5 h-5"
aria-hidden="true"
/>
<IconLucideInfo
v-else
class="w-5 h-5"
aria-hidden="true"
/>
</div>
<!-- Message -->
@@ -41,9 +49,7 @@
@click="removeToast(toast.id)"
class="btn btn-ghost btn-xs"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<IconLucideX class="w-4 h-4" aria-hidden="true" />
</button>
</div>
</div>
@@ -54,6 +60,10 @@
<script setup>
import { useToast } from '~/composables/useToast'
import IconLucideCheck from '~icons/lucide/check'
import IconLucideX from '~icons/lucide/x'
import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
import IconLucideInfo from '~icons/lucide/info'
const { toasts, removeToast } = useToast()
@@ -92,4 +102,4 @@ const getToastClasses = (type) => {
.toast-move {
transition: transform 0.3s ease;
}
</style>
</style>