mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-19 04:17:52 +00:00
toasty
This commit is contained in:
AndzejsP
parent
71eedb6346
commit
c982048675
@ -1,42 +1,47 @@
|
||||
<template>
|
||||
<div v-if="show" class="absolute bottom-16 right-2 z-20">
|
||||
<div id="toast-success"
|
||||
class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert">
|
||||
<div class="flex flex-row items-center">
|
||||
<slot>
|
||||
<div v-if="success"
|
||||
class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
|
||||
<i data-feather="check"></i>
|
||||
<span class="sr-only">Check icon</span>
|
||||
<div class="absolute bottom-16 right-2 z-20 flex flex-col gap-3">
|
||||
<TransitionGroup name="toastItem" tag="div">
|
||||
<div v-for=" t in toastArr" :key="t.id">
|
||||
<div id="toast-success"
|
||||
class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert">
|
||||
<div class="flex flex-row items-center">
|
||||
<slot>
|
||||
<div v-if="t.success"
|
||||
class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
|
||||
<i data-feather="check"></i>
|
||||
<span class="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div v-if="!t.success"
|
||||
class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
|
||||
<i data-feather="x"></i>
|
||||
<span class="sr-only">Cross icon</span>
|
||||
</div>
|
||||
<div class="ml-3 text-sm font-normal whitespace-pre-wrap">{{ t.message }}</div>
|
||||
|
||||
</slot>
|
||||
</div>
|
||||
<button type="button" @click="close(t.id)"
|
||||
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
|
||||
data-dismiss-target="#toast-success" aria-label="Close">
|
||||
<span class="sr-only">Close</span>
|
||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div v-if="!success" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
|
||||
<i data-feather="x"></i>
|
||||
<span class="sr-only">Cross icon</span>
|
||||
</div>
|
||||
<div class="ml-3 text-sm font-normal whitespace-pre-wrap">{{ message }}</div>
|
||||
|
||||
</slot>
|
||||
</div>
|
||||
<button type="button" @click="close"
|
||||
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
|
||||
data-dismiss-target="#toast-success" aria-label="Close">
|
||||
<span class="sr-only">Close</span>
|
||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import feather from 'feather-icons'
|
||||
import { nextTick } from 'vue'
|
||||
import { nextTick, TransitionGroup } from 'vue'
|
||||
export default {
|
||||
name: 'Toast',
|
||||
emits: ['close'],
|
||||
@ -47,27 +52,38 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
success: true,
|
||||
message: ''
|
||||
message: '',
|
||||
toastArr: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit('close')
|
||||
this.show = false
|
||||
},
|
||||
showToast(message, duration_s=3, success= true){
|
||||
this.success = success;
|
||||
this.message = message;
|
||||
this.show = true;
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
close(id) {
|
||||
|
||||
})
|
||||
this.toastArr = this.toastArr.filter(item => item.id != id)
|
||||
},
|
||||
showToast(message, duration_s = 3, success = true) {
|
||||
const id = parseInt(((new Date()).getTime() * Math.random()).toString()).toString()
|
||||
const toastObj = {
|
||||
id: id,
|
||||
success: success,
|
||||
message: message,
|
||||
show: true
|
||||
}
|
||||
|
||||
|
||||
this.toastArr.push(toastObj)
|
||||
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$emit('close')
|
||||
this.show = false
|
||||
}, duration_s*1000);
|
||||
|
||||
this.toastArr = this.toastArr.filter(item => item.id != id)
|
||||
|
||||
}, duration_s * 1000);
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
showProp(val) {
|
||||
@ -77,10 +93,22 @@ export default {
|
||||
this.$emit('close')
|
||||
this.show = false
|
||||
}, 3000);
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.toastItem-enter-active,
|
||||
.toastItem-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.toastItem-enter-from,
|
||||
.toastItem-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user