It seems that an error occurs in 1.1.0 and later versions.

ERROR  Failed to compile with 1 error                                                                                                                     18:37:10
error  in ./node_modules/jenesius-vue-modal/plugin/index.js

Module parse failed: Unexpected token (44:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| class ModalObject{
|
>     id;
|     component;
|     params;

 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js 4:0-45 10:26-35
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.101:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Hello,

I want to know if there is any way to prevent modal close when click modal outside .

I know I can prevent it like below but it is not good for me because I want to close it with emmited event and this can't do that

  modal.onclose = () => {
    return false;
  }

is there any way ?

Main goal: to add the ability to connect to linear modal windows. A linear modal window is a window whose main task is to return a value. Referencing promt in JavaScript. Tasks:

• implementation of the promtModal method (Or another name, while being discussed)
• value return implementation

Principle of operation:

const result = promptModal(VueModal);

// VueModal.vue
<template>
  <div>
    <button @click = "change(1)">up</button>
    <button @click = "change(-1)">down</button>
  </div>
</template>
<script setup>
  function change(v) {
    emit('close', v);
  }
</script>

This example demonstrates a modal window that will return either 1 or -1 (undefined if it was closed with Esc or background)

Is your feature request related to a problem? Please describe. Maybe this exists and I haven't seen it, but it would be nice to be able to pass configuration options when using VueRouter. For instance, I would like to disable closing the modal on ESC key press when using VueRouter.

Describe the solution you'd like When I open a modal page using the VueRouter integration, I may have other functionality on that page that requires users to use the ESC key. In this case, if the user presses on the ESC key, the entire page closes. I'd like a solution where I can disable the ESC key when using VueRouter.

Describe alternatives you've considered Maybe something like this to the composable?

useModalRouter.init(router, { escClose: false });

I know that in theory, we can tap into the onBeforeModalClose hook like this:

// App.vue

onBeforeModalClose((event) => {
    // prevent modal from closing if the user pressed the `ESC` key
   return false
});

However, in this case, it will be nice to add a flag in the event to show that the user pressed the ESC key. at the moment, the event contains only one flag called background, which I believe indicates that the user clicked on the background to close the modal. I suggest adding another flag, eg isESC or something similar.

Hi, I am using Vue 3 Composition api

and , I've done setup as document

But i have this error when I want to open it

jenesius-vue-modal.cjs.js:495 Uncaught (in promise) TypeError: Class constructor EventEmitter cannot be invoked without 'new'

app.vue

<script setup lang="ts">
import { RouterView } from 'vue-router'
import {container} from "jenesius-vue-modal";
</script>

<template>
 <container  />
  <RouterView />
</template>

homeComponent.vue

import { openModal } from "jenesius-vue-modal";
import MyCom from '@/components/Common/MyCom.vue'

function open() {
  openModal(MyCom, { message: "Welcome" })
}

MyCom.vue

<script setup lang="ts">
</script>
<template>
  <div class="header1">
    Hello
  </div>
</template>

How can I fix this ?

Hello, this is more a question than an issue but could not use a label :)

Do you plan on adding Typescript support adding the types, to enable the usage of your library in a TS project without shutting down TS on every import?

// @ts-expect-error no TS types available yet
import { openModal } from 'jenesius-vue-modal'

Thanks in anticipate.

Hello,

there are many times that it's needed to call API request after modal has been closed and result of modal was true

because sometime you need to just call API when a modal closed and also result of modal was true .

so it's needed to pass variable in when closing modal with closeModal() Function

and this variable is used like this

  modal.onClosed = (result) => {
    if (result) {
      // get data from api
    }else{
      // do nothing
    }
  }

imagine if a user just opened a modal and do nothing in this situation API call should not fired .

https://github.com/Jenesius/vue-modal/blob/main/dist/dts/utils/config.d.ts#L5

In the original Typescript, it looks like this. https://github.com/Jenesius/vue-modal/blob/22728664e80d736e6f2288954bc07154bd5f2d5e/plugin/utils/config.ts#L7

Hello,

I try to integrate the library in a Vue3/TS project mostly using the Composition API but I face some issues. First there are those warnings in the console and then when trying to use openModal to open a Component in the modal container there is an error. This is probably related to the warnings.

// App.vue
<script lang="ts">
import { defineComponent } from 'vue'
// @ts-expect-error no TS types available yet
import { container } from 'jenesius-vue-modal'
export default defineComponent({
  components: {
    WidgetContainerModal: container,
  },
})
</script>
<template>
  <div id="app">
    <router-view />
    <WidgetContainerModal />
  </div>
</template>

// Component.vue simplified
<script setup lang="ts">
// @ts-expect-error no TS types available yet
import { openModal } from 'jenesius-vue-modal'
import ExampleModal from './ExampleModal.vue'

</script>
<template>
  <div>
    <button text="Open Modal" @click="openModal(ExampleModal)">Open Modal</button>
  </div>
</template>

Here are the console warnings

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

which seems related to this

// extracted from jenesius-vue-modal.cjs.js
var script = {
  setup(){

    vue.onMounted(initialize);

  return () => {
    return vue.h(vue.TransitionGroup, {name: configuration.animation}, {
      default: () =>modalQueue.value.map(modalObject => {
        return vue.h(script$1, {component: modalObject.component, params: modalObject.params, key: modalObject.id, id: 
          modalObject.id});
	})
      })
    }
  },
  components: {WidgetContainerModalItem: script$1}
};

and probably related to useTransitionState() from the dependencies

I also have this warning

runtime-core.esm-bundler.js:6870 [Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol) 
  at <TransitionGroup name="modal-list" > 
  at <WidgetModalContainer> 
  at <App>

And finally the error when I try to open the modal

jenesius-vue-modal.cjs.js:771 Modal Container not found. Put container from jenesius-vue-modal in App's template. Check documentation for more information

localhost/:1 Uncaught (in promise) Modal Container not found. Put container from jenesius-vue-modal in App's template. Check documentation for more information

I probably make something wrong but do not understand what.

Thanks for the help

Thank you for the wonderful library 😄 It is helpful because there was no modal library that can be used properly with Vue3.

It doesn't seem to be responsive, but I solved it by adding the following CSS.

.widget__modal-container__item-back {
  position: absolute;
}

.widget__modal-container__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

It's can be comfortable to have access to last opened window.

• currentModal or const modal = useModal() // computed or
• lastModal( currentModal better)