Последняя версия с сервера прошлого разработчика
This commit is contained in:
150
resources/js/Shared/Overlay/ModalFeed.vue
Executable file
150
resources/js/Shared/Overlay/ModalFeed.vue
Executable file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<TransitionRoot as="template" :show="open">
|
||||
<Dialog as="div" static
|
||||
class="fixed z-[1000] inset-0 overflow-y-auto" :open="open"
|
||||
@close="staticCloseModal"
|
||||
>
|
||||
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<TransitionChild as="template" enter="ease-out duration-300"
|
||||
enter-from="opacity-0" enter-to="opacity-100"
|
||||
leave="ease-in duration-200" leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<DialogOverlay class="fixed inset-0 bg-indigo-200 bg-opacity-75 transition-opacity" />
|
||||
</TransitionChild>
|
||||
|
||||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||||
|
||||
<TransitionChild as="template" enter="ease-out duration-300"
|
||||
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<div class="inline-block align-bottom bg-indigo-300 md:rounded-md text-left overflow-hidden shadow-xl transform transition-all md:align-middle md:max-w-6xl w-full">
|
||||
<div class="md:grid grid-cols-12">
|
||||
<button class="flex md:hidden w-full items-center justify-center p-3 bg-indigo-300 text-gray-light text-sm border-b border-indigo-100" @click="staticCloseModal">
|
||||
Закрыть
|
||||
</button>
|
||||
|
||||
<modal-feed-media
|
||||
:type="feed.type"
|
||||
:feed_id="feed.id"
|
||||
:title="feed.entity.title"
|
||||
:preview="feed.entity.preview"
|
||||
:medias="feed.entity.collection_medias"
|
||||
/>
|
||||
|
||||
<modal-feed-body
|
||||
:user="feed.user"
|
||||
:feed_id="feed.id"
|
||||
:entity="feed.entity"
|
||||
@openShare="showShareModal"
|
||||
@onRemoveFeed="onRemoveFeed"
|
||||
@disableModal="checkCloseModal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
<modal-warning
|
||||
:feed_id="modalFeedId"
|
||||
:open="warningShow"
|
||||
@action="deleteActionModal"
|
||||
/>
|
||||
<modal-share ref="shareModalNode" :entity="feed.entity" />
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
DialogTitle,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from '@headlessui/vue'
|
||||
|
||||
import ModalWarning from '@/Shared/Overlay/ModalWarning.vue'
|
||||
import ModalShare from '@/Shared/Overlay/ModalShare.vue'
|
||||
import ModalFeedMedia from '@/Shared/Overlay/ModalFeedMedia.vue'
|
||||
import ModalFeedBody from '@/Shared/Overlay/ModalFeedBody.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
DialogTitle,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
ModalFeedMedia,
|
||||
ModalFeedBody,
|
||||
ModalWarning,
|
||||
ModalShare,
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
is_exist_menu: this.is_exist_menu
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modalFeed: Object,
|
||||
is_exist_menu: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['closeModal', 'destroyFeed'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
disabled: 0,
|
||||
modalFeedId: 0,
|
||||
warningShow: false,
|
||||
feed: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
open(open) {
|
||||
if (open) {
|
||||
this.feed = this.modalFeed
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
deleteActionModal(removeFeed) {
|
||||
if (removeFeed) {
|
||||
this.$emit('destroyFeed')
|
||||
this.$nextTick(() => {
|
||||
this.staticCloseModal()
|
||||
})
|
||||
}
|
||||
this.warningShow = false
|
||||
},
|
||||
|
||||
showShareModal() {
|
||||
this.$refs.shareModalNode.openModal()
|
||||
},
|
||||
|
||||
onRemoveFeed(feed_id) {
|
||||
this.modalFeedId = feed_id
|
||||
this.warningShow = true
|
||||
},
|
||||
|
||||
checkCloseModal(value) {
|
||||
this.disabled = value
|
||||
},
|
||||
staticCloseModal() {
|
||||
if (!this.disabled) {
|
||||
this.$emit('closeModal', false)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user