defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor DialogPanel class in DetailDialog.vue to support fullWidth option

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-02-27 17:26:08 +07:00
parent c84f22b6b7
commit 9d55d1f4bf
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Dialogs/DetailDialog.vue
View File

@ -15,6 +15,10 @@ defineProps({
type: String, type: String,
required: true, required: true,
}, },
fullWidth: {
type: Boolean,
default: false,
},
}) })
const emit = defineEmits(['onClose']) const emit = defineEmits(['onClose'])
const handleOnClose = () => { const handleOnClose = () => {
@ -38,7 +42,7 @@ const handleOnClose = () => {
leave-from="opacity-100 translate-y-0 sm:scale-100" leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<DialogPanel <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 --> <!-- Body Section -->
<div class="px-4 py-4 bg-gray-50"> <div class="px-4 py-4 bg-gray-50">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">