matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Stuck at changing routes

Browse Source
This commit is contained in:
Julien Nahum
2023-10-14 18:24:44 +02:00
parent 358bf0e4d0
commit 3d3759c58c
29 changed files with 316 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
resources/js/components/common/Alert.vue
View File

@@ -1,95 +0,0 @@
<template>
<transition enter-active-class="linear duration-500 overflow-hidden"
enter-from-class="max-h-0 opacity-0"
enter-to-class="max-h-screen opacity-100"
leave-active-class="linear duration-500 overflow-hidden"
leave-from-class="max-h-screen opacity-100"
leave-to-class="max-h-0 opacity-0"
>
<div :class="alertClasses" class="border shadow-sm p-2 flex items-center rounded-md">
<div class="flex-grow">
<p class="mb-0 py-2 px-4" :class="textClasses" v-html="message" />
</div>
<div class="justify-end">
<v-button v-if="type == 'error'" color="red" shade="light" @click="close">
Close
</v-button>
<v-button v-if="type == 'success'" color="green" shade="light" @click="close">
OK
</v-button>
<v-button v-if="type == 'warning'" color="yellow" shade="light" @click="close">
OK
</v-button>
<v-button v-if="type == 'confirmation'" class="mr-1 mb-1" @click="confirm">
Yes
</v-button>
<v-button v-if="type == 'confirmation'" color="gray" shade="light" @click="cancel">
No, cancel
</v-button>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'Alert',
props: ['type', 'message', 'autoClose', 'confirmationProceed', 'confirmationCancel'],
data () {
return {
timeout: null
}
},
computed: {
alertClasses () {
if (this.type === 'error') return 'bg-red-100 border-red-500'
if (this.type === 'success') return 'bg-green-100 border-green-500'
if (this.type === 'warning') return 'bg-yellow-100 border-yellow-500'
return 'bg-blue-50 border-nt-blue-light'
},
textClasses () {
if (this.type === 'error') return 'text-red-600'
if (this.type === 'success') return 'text-green-600'
if (this.type === 'warning') return 'text-yellow-600'
return 'text-nt-blue'
}
},
mounted () {
if (this.autoClose) {
this.timeout = setTimeout(() => {
this.close()
}, this.autoClose)
}
},
methods: {
/**
* Close the modal.
*/
close () {
clearTimeout(this.timeout)
this.$emit('close')
},
/**
* Confirm and close the modal.
*/
confirm () {
this.confirmationProceed()
this.close()
},
/**
* Cancel and close the modal.
*/
cancel () {
if (this.confirmationCancel) {
this.confirmationCancel()
}
this.close()
}
}
}
</script>

10
resources/js/components/common/ScrollShadow.vue
View File

@@ -60,19 +60,19 @@ export default {
const scrollContainerObserver = newResizeObserver(this.toggleShadow)
if (scrollContainerObserver) {
scrollContainerObserver.observe(this.$refs.scrollContainer)
// Cleanup when the component is destroyed.
this.$once('hook:destroyed', () => scrollContainerObserver.disconnect())
// Cleanup when the component is unmounted.
this.$once('hook:unmounted', () => scrollContainerObserver.disconnect())
}
// Recalculate the container dimensions when the wrapper is resized.
const wrapObserver = newResizeObserver(this.calcDimensions)
if (wrapObserver) {
wrapObserver.observe(this.$el)
// Cleanup when the component is destroyed.
this.$once('hook:destroyed', () => wrapObserver.disconnect())
// Cleanup when the component is unmounted.
this.$once('hook:unmounted', () => wrapObserver.disconnect())
}
},
destroyed () {
unmounted () {
window.removeEventListener('resize', this.calcDimensions)
},
methods: {