Refactor DialogPanel class in DetailDialog.vue to support fullWidth option

This commit is contained in:
Dede Fuji Abdul 2024-02-27 17:26:08 +07:00
parent c84f22b6b7
commit 9d55d1f4bf

View File

@ -15,6 +15,10 @@ defineProps({
type: String,
required: true,
},
fullWidth: {
type: Boolean,
default: false,
},
})
const emit = defineEmits(['onClose'])
const handleOnClose = () => {
@ -38,7 +42,7 @@ const handleOnClose = () => {
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<DialogPanel
:class="['sm:max-w-lg relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:my-8 sm:w-full']">
:class="[fullWidth ? 'sm:max-w-[90%]' : 'sm:max-w-lg', 'relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:my-8 sm:w-full']">
<!-- Body Section -->
<div class="px-4 py-4 bg-gray-50">
<div class="flex flex-col items-start">