Dialog: cannot open as maximized using prop

[iGroupGreye]

Describe the bug

It seems that we cannot use prop to set Dialog to be opened as maximized, but we can manually set p-dialog-maximized on Dialog to make it work. https://primevue.org/dialog/#api.dialog.interfaces.DialogState.maximized

// This doesn't work
<Dialog maximized >

// This doesn't work
<Dialog
  :pt="{
    state: {
      maximized: true,
    },
  }"
>

// This works
<Dialog class="p-dialog-maximized" >

Reproducer

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-61fojz?file=src%2FApp.vue

PrimeVue version

4.1

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 129.0.6668.90

Steps to reproduce the behavior

1. add class p-dialog-maximized to Dialog
2. open dialog as maximized
3. remove p-dialog-maximized from Dialog
4. add prop maximized to Dialog
5. cannot open Dialog as maximized

Expected behavior

<Dialog maximized > to equal <Dialog class="p-dialog-maximized" >

[CCodam]

This is a feature request, not a bug. There is no mazimized prop, but I see no reason why there couldn't be.

You're linking to the DialogState, which is an interface, used to style elements based on the state of the object, not a prop to set the state. You can use that to apply a class based on the maximized state of the Dialog

const dialogPassThrough = computed(() => ({
  root: (options) => ({
    class: {
      'some-class-when-max': options.state.maximized
      'some-class-when-notmax': !options.state.maximized
    },
  }),
}));

[!TIP] Workaround

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-rdcohg?file=src%2FApp.vue

• We ref the Dialog
• We set maximized to true at onMounted.

  
  <script setup>
  import { ref, onMounted } from 'vue';

const comDialog = ref(); const visible = ref(false);

onMounted(() => { comDialog.value.maximized = true; });

[iGroupGreye]

Tip

Workaround

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-rdcohg?file=src%2FApp.vue

• We ref the Dialog
• We set maximized to true at onMounted.

Thank you for making examples. I tried this approach setting comDialog.value.maximized = true on mounted before opening this issue, but didn't work. Now I see your example has maximizable prop on the <Dialog > which is required to make it work. I guess I'll just use class="p-dialog-maximized" for now. Can we close this issue?

[CCodam]

Let's give them a chance to decide whether they want to implement a mazimize prop as a new feature, I don't see why that shouldn't be an option.

You can use pt:pcMaximizeButton:root:style="display:none" to hide the maximize button if needed.

If you're going to just use class="p-dialog-maximized", you probably want to add @show="blockBodyScroll()" and @hide="unblockBodyScroll()", otherwise you'll be able to scroll the content behind the dialog. https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-dec4dk?file=src%2FApp.vue

<script setup>
import { ref } from 'vue';
import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils/dom';

const visible = ref(false);
</script>

<template>
  <Button label="Open Dialog" @click="visible = !visible" />

  <Dialog class="p-dialog-maximized" v-model:visible="visible" @show="blockBodyScroll()" @hide="unblockBodyScroll()">
    Dialog Content - Maximized
  </Dialog>
  <div style="height: 2000px"></div>
  <div>footer</div>
</template>

[iGroupGreye]

If you're going to just use class="p-dialog-maximized", you probably want to add @show="blockBodyScroll()" and @hide="unblockBodyScroll()", otherwise you'll be able to scroll the content behind the dialog. https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-dec4dk?file=src%2FApp.vue

How does this import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils/dom'; work? I search there is a @primeuix/utils package but it is not installed in the package.json and I don't see it has documentation. Should we use this package directly? Although in my case my app is 100vh I don't need to block scroll.