mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-24 22:39:18 +01:00
58edb4f602
* feat: implements a toast for alerting errors and other useful information * removes unused code * feat: adds automatic redirect when a new container is found * complete the flow with alerts and settings page * adds more langs and option for once * removes files
40 lines
926 B
Vue
40 lines
926 B
Vue
<template>
|
|
<button class="btn relative overflow-hidden" @click="cancel()">
|
|
<div class="absolute inset-0 origin-left bg-white/30" ref="progress"></div>
|
|
<div class="z-10">
|
|
<slot></slot>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const progress = ref<HTMLElement>();
|
|
const finished = defineEmit();
|
|
const cancelled = defineEmit();
|
|
let animation: Animation | undefined;
|
|
|
|
onMounted(async () => {
|
|
animation = progress.value?.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], {
|
|
duration: 4000,
|
|
easing: "linear",
|
|
fill: "forwards",
|
|
});
|
|
try {
|
|
await animation?.finished;
|
|
finished();
|
|
} catch (e) {
|
|
progress.value?.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
|
|
duration: 0,
|
|
fill: "forwards",
|
|
});
|
|
cancelled();
|
|
}
|
|
});
|
|
|
|
const cancel = () => {
|
|
animation?.cancel();
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="postcss"></style>
|