251 lines
8.4 KiB
PHP
Executable File
251 lines
8.4 KiB
PHP
Executable File
<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag; ?>
|
|
<?php foreach($attributes->onlyProps([
|
|
'isActive' => false,
|
|
'position' => 'center',
|
|
'size' => 'normal',
|
|
]) as $__key => $__value) {
|
|
$$__key = $$__key ?? $__value;
|
|
} ?>
|
|
<?php $attributes = $attributes->exceptProps([
|
|
'isActive' => false,
|
|
'position' => 'center',
|
|
'size' => 'normal',
|
|
]); ?>
|
|
<?php foreach (array_filter(([
|
|
'isActive' => false,
|
|
'position' => 'center',
|
|
'size' => 'normal',
|
|
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
|
|
$$__key = $$__key ?? $__value;
|
|
} ?>
|
|
<?php $__defined_vars = get_defined_vars(); ?>
|
|
<?php foreach ($attributes as $__key => $__value) {
|
|
if (array_key_exists($__key, $__defined_vars)) unset($$__key);
|
|
} ?>
|
|
<?php unset($__defined_vars); ?>
|
|
|
|
<v-modal
|
|
is-active="<?php echo e($isActive); ?>"
|
|
position="<?php echo e($position); ?>"
|
|
size="<?php echo e($size); ?>"
|
|
<?php echo e($attributes); ?>
|
|
|
|
>
|
|
<?php if(isset($toggle)): ?>
|
|
<template v-slot:toggle>
|
|
<?php echo e($toggle); ?>
|
|
|
|
</template>
|
|
<?php endif; ?>
|
|
|
|
<?php if(isset($header)): ?>
|
|
<template v-slot:header="{ toggle, isOpen }">
|
|
<div <?php echo e($header->attributes->merge(['class' => 'flex items-center justify-between gap-2.5 border-b px-4 py-3 dark:border-gray-800'])); ?>>
|
|
<?php echo e($header); ?>
|
|
|
|
|
|
<span
|
|
class="icon-cross-large cursor-pointer text-3xl hover:rounded-md hover:bg-gray-100 dark:hover:bg-gray-950"
|
|
@click="toggle"
|
|
>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<?php endif; ?>
|
|
|
|
<?php if(isset($content)): ?>
|
|
<template v-slot:content>
|
|
<div <?php echo e($content->attributes->merge(['class' => 'border-b px-4 py-2.5 dark:border-gray-800'])); ?>>
|
|
<?php echo e($content); ?>
|
|
|
|
</div>
|
|
</template>
|
|
<?php endif; ?>
|
|
|
|
<?php if(isset($footer)): ?>
|
|
<template v-slot:footer>
|
|
<div <?php echo e($content->attributes->merge(['class' => 'flex justify-end px-4 py-2.5'])); ?>>
|
|
<?php echo e($footer); ?>
|
|
|
|
</div>
|
|
</template>
|
|
<?php endif; ?>
|
|
</v-modal>
|
|
|
|
<?php if (! $__env->hasRenderedOnce('08f886d0-7a4b-4378-805a-271c51e35067')): $__env->markAsRenderedOnce('08f886d0-7a4b-4378-805a-271c51e35067');
|
|
$__env->startPush('scripts'); ?>
|
|
<script
|
|
type="text/x-template"
|
|
id="v-modal-template"
|
|
>
|
|
<div>
|
|
<div @click="toggle">
|
|
<slot name="toggle">
|
|
</slot>
|
|
</div>
|
|
|
|
<transition
|
|
tag="div"
|
|
name="modal-overlay"
|
|
enter-class="duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
|
|
enter-from-class="opacity-0"
|
|
enter-to-class="opacity-100"
|
|
leave-class="duration-200 ease-[cubic-bezier(.4,0,.2,1)]"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<div
|
|
class="fixed inset-0 z-[10002] bg-gray-500 bg-opacity-50 transition-opacity"
|
|
v-show="isOpen"
|
|
></div>
|
|
</transition>
|
|
|
|
<transition
|
|
tag="div"
|
|
name="modal-content"
|
|
enter-class="duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
|
|
:enter-from-class="enterFromLeaveToClasses"
|
|
enter-to-class="translate-y-0 opacity-100"
|
|
leave-class="duration-300 ease-[cubic-bezier(.4,0,.2,1)]"
|
|
leave-from-class="translate-y-0 opacity-100"
|
|
:leave-to-class="enterFromLeaveToClasses"
|
|
>
|
|
<div
|
|
class="fixed inset-0 z-[10003] transform overflow-y-auto transition"
|
|
v-if="isOpen"
|
|
>
|
|
<div class="flex min-h-full items-center justify-center max-md:p-4">
|
|
<div
|
|
class="box-shadow z-[999] w-full overflow-hidden rounded-lg bg-white dark:bg-gray-900 sm:absolute"
|
|
:class="[finalPositionClass, sizeClass]"
|
|
>
|
|
<!-- Header Slot -->
|
|
<slot
|
|
name="header"
|
|
:toggle="toggle"
|
|
:isOpen="isOpen"
|
|
>
|
|
</slot>
|
|
|
|
<!-- Content Slot -->
|
|
<slot name="content"></slot>
|
|
|
|
<!-- Footer Slot -->
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="module">
|
|
app.component('v-modal', {
|
|
template: '#v-modal-template',
|
|
|
|
props: [
|
|
'isActive',
|
|
'position',
|
|
'size'
|
|
],
|
|
|
|
emits: [
|
|
'toggle',
|
|
'open',
|
|
'close',
|
|
],
|
|
|
|
data() {
|
|
return {
|
|
isOpen: this.isActive,
|
|
|
|
isMobile: window.innerWidth < 640,
|
|
};
|
|
},
|
|
|
|
created() {
|
|
window.addEventListener('resize', this.checkScreenSize);
|
|
},
|
|
|
|
beforeUnmount() {
|
|
window.removeEventListener('resize', this.checkScreenSize);
|
|
},
|
|
|
|
computed: {
|
|
positionClass() {
|
|
return {
|
|
'center': 'items-center justify-center',
|
|
'top-center': 'top-4',
|
|
'bottom-center': 'bottom-4',
|
|
'bottom-right': 'bottom-4 right-4',
|
|
'bottom-left': 'bottom-4 left-4',
|
|
'top-right': 'top-4 right-4',
|
|
'top-left': 'top-4 left-4',
|
|
}[this.position];
|
|
},
|
|
|
|
finalPositionClass() {
|
|
return this.isMobile
|
|
? 'items-center justify-center'
|
|
: this.positionClass;
|
|
},
|
|
|
|
sizeClass() {
|
|
return {
|
|
'normal': 'max-w-[525px]',
|
|
'medium': 'max-w-[768px]',
|
|
'large': 'max-w-[950px]',
|
|
}[this.size] || 'max-w-[525px]';
|
|
},
|
|
|
|
enterFromLeaveToClasses() {
|
|
const effectivePosition = this.isMobile ? 'center' : this.position;
|
|
|
|
return {
|
|
'center': '-translate-y-4 opacity-0',
|
|
'top-center': '-translate-y-4 opacity-0',
|
|
'bottom-center': 'translate-y-4 opacity-0',
|
|
'bottom-right': 'translate-y-4 opacity-0',
|
|
'bottom-left': 'translate-y-4 opacity-0',
|
|
'top-right': '-translate-y-4 opacity-0',
|
|
'top-left': '-translate-y-4 opacity-0',
|
|
}[effectivePosition];
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
checkScreenSize() {
|
|
this.isMobile = window.innerWidth < 640;
|
|
},
|
|
|
|
toggle() {
|
|
this.isOpen = ! this.isOpen;
|
|
|
|
if (this.isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow ='auto';
|
|
}
|
|
|
|
this.$emit('toggle', { isActive: this.isOpen });
|
|
},
|
|
|
|
open() {
|
|
this.isOpen = true;
|
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
this.$emit('open', { isActive: this.isOpen });
|
|
},
|
|
|
|
close() {
|
|
this.isOpen = false;
|
|
|
|
document.body.style.overflow = 'auto';
|
|
|
|
this.$emit('close', { isActive: this.isOpen });
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<?php $__env->stopPush(); endif; ?><?php /**PATH /var/www/html/packages/Webkul/Admin/src/Providers/../Resources/views/components/modal/index.blade.php ENDPATH**/ ?>
|