86 lines
2.5 KiB
Vue
86 lines
2.5 KiB
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import { computed, ref } from 'vue';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const $props = defineProps({
|
|
progress: {
|
|
type: Number, //Progress value (1.0 > x > 0.0)
|
|
required: true,
|
|
},
|
|
cancelled: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['cancel', 'close']);
|
|
|
|
const dialogRef = ref(null);
|
|
|
|
const showDialog = defineModel('showDialog', {
|
|
type: Boolean,
|
|
default: false,
|
|
});
|
|
|
|
const _progress = computed(() => $props.progress);
|
|
const progressLabel = computed(() => `${Math.round($props.progress * 100)}%`);
|
|
</script>
|
|
|
|
<template>
|
|
<QDialog ref="dialogRef" v-model="showDialog" @hide="emit('close')">
|
|
<QCard class="full-width dialog">
|
|
<QCardSection class="row">
|
|
<span class="text-h6">{{ t('Progress') }}</span>
|
|
<QSpace />
|
|
<QBtn icon="close" flat round dense v-close-popup />
|
|
</QCardSection>
|
|
<QCardSection>
|
|
<div class="column">
|
|
<span>{{ t('Total progress') }}:</span>
|
|
<QLinearProgress
|
|
size="30px"
|
|
:value="_progress"
|
|
color="primary"
|
|
stripe
|
|
class="q-mt-sm q-mb-md"
|
|
>
|
|
<div class="absolute-full flex flex-center">
|
|
<QBadge
|
|
v-if="cancelled"
|
|
text-color="white"
|
|
color="negative"
|
|
:label="t('Cancelled')"
|
|
/>
|
|
<span v-else class="text-white text-subtitle1">
|
|
{{ progressLabel }}
|
|
</span>
|
|
</div>
|
|
</QLinearProgress>
|
|
<slot />
|
|
</div>
|
|
</QCardSection>
|
|
<QCardActions align="right">
|
|
<QBtn
|
|
v-if="!cancelled && progress < 1"
|
|
type="button"
|
|
flat
|
|
class="text-primary"
|
|
v-close-popup
|
|
>
|
|
{{ t('globals.cancel') }}
|
|
</QBtn>
|
|
</QCardActions>
|
|
</QCard>
|
|
</QDialog>
|
|
</template>
|
|
|
|
<i18n>
|
|
es:
|
|
Progress: Progreso
|
|
Total progress: Progreso total
|
|
Cancelled: Cancelado
|
|
</i18n>
|