Refresh content when slideover opens

[schillerenrico]

Description

There is a trigger for @update:open which triggers when you close the slideover.
https://ui3.nuxt.dev/components/slideover#emits

But I need an indicator to refresh the content when the slideover opens.
The watcheffect on the v-model doesnt work :(

slideovercmp.vue

<script setup lang="ts">
getApiContent() <-- needs to be triggered each time the slideover opens
</script>

<USlideover>
  <template #body>
  api content
  </template>
</USlideover>

[benjamincanac]

Have you tried using a v-model:open and a const open = ref(false) to watch on? https://ui3.nuxt.dev/components/slideover#control-open-state

[schillerenrico]

@benjamincanac yeah, if you try that the open.value stays false. I think the USlideover doenst provide a proper return value to the model when it opens. So no effect so far :(

thats the slideover component which is triggered via useSlideover().open(...)

<script setup lang="ts">
  const open = ref(false);

  watchEffect(() => {
    console.log(open.value);
  });
</script>

<template>
<USlideover v-model:open="open"></USlideover>
</template>

[schillerenrico]

For now I packed the open button inside the USlideover which lets me control the open and close state via open.value instead of useSlideover().open(...)
Downside is I now have the trigger AND the slideover in the same component. Dont know if thats the intended way

[EvertonWingert]

https://codesandbox.io/p/devbox/intelligent-cdn-vcsjgj

[schillerenrico]

@EvertonWingert Okay thats a good way to seperate trigger and slideover.

But we still miss a solution with useSlideover().open(slideoverCmp)
Would be great if the slideoverCmp itself would register if its get opened

It would help if @update:open triggers when the modal / slideover opens not just when it gets closed. Thats the main issue here

[schillerenrico]

yeah the @update:open doesnt work as intended.
In Reka it works both ways, when opening and closing.

using useSlideover().open(slideoverX)

<UiSlideover @update:open="() => console.log('opened/closed')"> <--- This wont trigger! Only if you close it.

Slideover and Modal same issue

[genu]

@schillerenrico Are you able to test this in this PR: #3279

I'm wondering the new way to handle modals and slideovers addresses this issue.

[schillerenrico]

@genu I can test it if you have a short documentation or example of the current changes that need to be made.
I mean to solve this issue there are two ways - a unmount on close or an event when closing AND opening. I looked into it and first look seems promising.

Great work, I like the combination of both layer components

[genu]

Sure thing @schillerenrico

You may have to clarify the issue again, but we have a after:leave event fired when the slideover closes now, if that is what would solve your issue:

<USlideover @after:leave="console.log('do something after')">
...
</USlideover

or, if you are using the useSlideover() composable, you should be able to adapt it to your use case. Have a look at: playground/app/pages/components/slideover.vue

Essentially, you can do:

const overlay = useOverlay()
const slideover = overlay.create(MySlideover, {
  attrs: {
    title: 'Slideover'
  }
})

function openSlideover() {
  slideover.open()
}

In your MySlideover.vue component:

<script lang="ts" setup>
const props = defineProps<{title: string}>()
const overlayInstance = useOverlayInstance() // <-- This gives you control over this instance only
</script>

<template>
<USlideover :description="props.title">
    <template #body>
      <Placeholder class="h-full" />
    </template>

    <template #footer>
      <UButton color="neutral" label="Close" @click="overlayInstance.close" />
    </template>
  </USlideover>
</template>

[schillerenrico]

@genu Just one question in advance. Closing a layer, slideover in this case, doesnt unmount it by default right? So next time I call .open() the onMounted wont trigger? Just a clarification :)
Cause thats the nuxt ui 2 behavior. I guess until you remove it from the overlay instances it wont remount right? Which would be great

and thanks for the great explanation

[genu]

It will actually unmount by default. This is to avoid issues with not clearing the state of the component when re-opening.

What do you think the expectation should be?

there is an option for destroyOnClose where the overlay is actually removed from memory, although I'm not sure how useful such option would be in practice.

const slideover = useOverlay().create(MySlideover, { destroyOnClose: true})

[schillerenrico]

Unmount by default is great too. Especially if people switch from nuxt ui 2 cause thats the default behavior there too. So its fine!
Dont have the need for a destryOnClose right now but nice to have I guess :)

[genu]

Unmount by default is great too. Especially if people switch from nuxt ui 2 cause thats the default behavior there too. So its fine! Dont have the need for a destryOnClose right now but nice to have I guess :)

The new api allows for a lot of flexibility on how we want this to work. So we can always improve on it in the future based on feedback.

[schillerenrico]

Great improvement from what I read so far 👍🏻

[bask-digital]

@genu How I can listen to custom emits from modal components using useOverlay?

const overlay = useOverlay();
const slideover = overlay.create(mySlideover);

For example, let's assume mySlideover component emits a refresh event, any idea how I can listen to that on the parent?

[genu]

@genu How I can listen to custom emits from modal components using useOverlay?

const overlay = useOverlay();
const slideover = overlay.create(mySlideover);

For example, let's assume mySlideover component emits a refresh event, any idea how I can listen to that on the parent?

Instead of emitting an event from mySlideover try, instead, to pass a function as a prop, and calling that function from mySlideover

something like this:

const overlay = useOverlay();
const slideover = overlay.create(mySlideover, {
props: {
   myFunc: () => {
       console.log('called')
   }
}
});

[bask-digital]

@genu Cheers, thanks so much!