55 lines
1.0 KiB
Vue
55 lines
1.0 KiB
Vue
<template>
|
|
<button
|
|
class="save-btn"
|
|
:class="{ 'save-btn--saving': saving, 'save-btn--saved': saved }"
|
|
:disabled="saving"
|
|
@click="$emit('save')"
|
|
>
|
|
<div v-if="saving" class="i-lucide-loader-2 h-4 w-4 animate-spin" />
|
|
<div v-else-if="saved" class="i-lucide-check h-4 w-4" />
|
|
<div v-else class="i-lucide-save h-4 w-4" />
|
|
{{ saving ? 'Sauvegarde...' : saved ? 'Sauvegardé' : 'Sauvegarder' }}
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
saving?: boolean
|
|
saved?: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
save: []
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.save-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 0.5rem;
|
|
border: none;
|
|
background: hsl(12 76% 48%);
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.save-btn:hover:not(:disabled) {
|
|
background: hsl(12 76% 42%);
|
|
}
|
|
|
|
.save-btn:disabled {
|
|
opacity: 0.7;
|
|
cursor: wait;
|
|
}
|
|
|
|
.save-btn--saved {
|
|
background: hsl(140 50% 40%);
|
|
}
|
|
</style>
|