Example of a basic dialog with <script setup>?

[ocratravis]

Hi there –

I'm trying to implement a basic dialog using the Composition API, in plain JS.

My component is shown below (styles omitted):

<template>
  <div class="dialog">
    <div class="center">
      <p>{{text}}</p>
      <button @click="$close(this, 'user clicked no')" class="btn">NO</button>
      <button @click="$close(this)" class="btn">YES</button>
    </div>
  </div>
</template>

<script setup>

    const props = defineProps({
        text: {
            type: String,
        },
    })

    function returnValue() {
        return 'user clicked yes';
    }

</script>

This almost works. Clicking on "No" resolves the promise with the string "user clicked no", as expected.

However, clicking on "Yes" gives the following error in the console:

runtime-core.esm-bundler.js:218 Uncaught TypeError: dialogRef.value.comp.returnValue is not a function
    at closeDialog (vue3-promise-dialog.es.js:5:33)
    at Proxy.app.config.globalProperties.$close (vue3-promise-dialog.es.js:23:7)
    at _createElementVNode.onClick._cache.<computed>._cache.<computed> (TempDialog.vue:6:23)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:366:13)

Do you know what I'm doing wrong? I'm sure it's something basic...

It would be nice to provide an example of this usage in the docs.

Thanks for this great package – if I can figure out this little detail, then it's exactly what I needed!

[rlemaigre]

I don't use script setup myself (yet) so I never tried this package with it. Have you tried to explicitly expose the returnValue function using defineExpose ? See docs here : https://vuejs.org/api/sfc-script-setup.html#defineexpose

Please tell me if it works. If it does, I'll update the docs accordingly.

[ocratravis]

Thanks for the reply. I will test this ASAP and let you know.

[ocratravis]

That did the trick! The following code works:

<template>
  <div class="dialog">
    <div class="center">
      <p>{{text}}</p>
      <button @click="$close(this, 'user clicked no')" class="btn">NO</button>
      <button @click="$close(this)" class="btn">YES</button>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  text: {
    type: String,
  },
})

function returnValue() {
  return 'user clicked yes';
}

defineExpose({
  returnValue,
})

</script>

Thank you!