Hi, getting this error with the demo:

cd demo
Edwards-MacBook-Pro:demo edwardpotter$ npm install
Edwards-MacBook-Pro:demo edwardpotter$ npm run dev
npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/Cellar/node/7.3.0/bin/node" "/Users/edwardpotter/.npm-packages/bin/npm" "run" "dev"
npm ERR! node v7.3.0
npm ERR! npm v4.0.5

npm ERR! missing script: dev
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /Users/edwardpotter/code/modal/demo/npm-debug.log

Add a dialog box wrapper for simplified modals.
Current version looks like this:

Extra props can be:

:labels - Array / (List of buttons)

Extra events can be:

@cancel
@agree

Hi,
I'm getting this error during compiling the project using gulp browserify

Cannot find module '!!./../node_modules/css-loader/index.js!./../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-60fe12fc!./../node_modules/sass-loader/lib/loader.js!./../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Resizer.vue' from 'c:\GIT\Rockwool\Website\static\node_modules\vue-js-modal\dist

Something like that:

// ...
Vue.use(VueModal, {
  componentName: 'foo-modal',
  width: '80%',
  clickToClose: false
})
// ...

The properties should overwrite default options:

<!-- // Modal 'Bar' -->
<foo-modal name="bar" width="50%" :clickToClose="true">
<!-- ... -->
</foo-modal>

<!-- // Modal 'Baz' -->
<foo-modal name="baz" width="75%">
<!-- ... -->
</foo-modal>

What do you think?

For some reason, it sets a wrong top value (bigger than needed) so modal is not centered correctly.
I use height="auto" and :scrollable="true"
I don't have any other css which can impact this modal window position

Any ideas what can it be?

First, I like your work very.

But I found a close button on the top-right corner is better. What is your thought about this?
I am willing to add it based on your code, but I don't want to modify your code directly, so I want to compose your component. But It's pity that I cannot find a proper way. (I have learnt vuejs just a few days)

<modal name="hello-world" :width="300" :height="350" :classes="modal"> asdf </modal>

<style>
.modal {
    background-color: #000;
  }
</style>

Still white background.

Please advise.

When I use "this.$modal.hide()", the hidden modal will also show up. I guess the bug lies in the trigger function.

dist/index.js contains vuejs 2.2.6.

If I use import vmodal from 'vue-js-modal'; in an existing vuejs project, vuejs is loaded twice because my main application uses version 2.3.3.

What is the general approach to overcome this? I am a ES6 noob, so sorry if this is dumb question :)

tldr

When the modal draggable property is set to true ,the input box can not be entered.

Make resizing work on the touchscreens. Resizer component should be using touch events as well ass mouse events

It took a long time to understand what the problem was, but my colleagues helped me figure it out.
In the description there is an error.
methods: { show () { this.$modal.show('hello-word'); // need "hello-world".. }, hide () { this.$modal.hide('hello-world'); } }

I'm assuming the library touches the dom somehow and it is causing the vdom to not match up. Anyway this can be handled when SSR is in use?

Hi, could you please precompile index.js to ES5? I would really like to use your plugin, but I don't want to change Babel settings in webpack (that is, include node_modules folder in settings).

i got a warning:

[Vue warn]: Failed to mount component: template or render function not defined.

when i use import like this:

import modal from 'vue-js-modal'

and register it in components like this:

components:{
    ChatRoom,
    Player,
    modal
  },

and use it like this:
<modal name="test"></modal>

It appears only opened new tab by main tab. I will tell you step by step above.
1- activate your modal and don't close
2- open new tab by your site
3- click something on your page by you opened in new tab
4-return your first opened site where you activated your modal
5- just try to close modal
6- you will see that you can't close it :/

Had to search npm for this package. Maybe it will help people in the future to have the npm install path in your documentation.

I see that you do have it in the Demo though.

Is it possible?

Nice plugin. It seems to work well in vue 2.

Question: does it support auto: height? I've tried setting the property, but it defaults back to 300.

Hey, @euvl

Thank you very much for provide SSR support for this great library.

I encountered a problem in the use, if I nuxt dev mode to change the file, trigger nuxt re-compile, then the page is normal. But if you refresh the page, you will get a mistake:

Nuxt.js Error:

TypeError: Cannot redefine property: $modal
    at Function.defineProperty (native)
    at Object.install (~/.1.2.0@vue-js-modal/dist/ssr.index.js:1:953)
    at Function.Vue.use (/Users/abel/Desktop/test/vue-js-modal/demo/server_side_rendering/node_modules/.2.3.4@vue/dist/vue.runtime.common.js:4114:22)
    at Object.module.exports.Object.defineProperty.value (plugins/vue-js-modal.js:4:4)
    at __webpack_require__ (webpack:/webpack/bootstrap 5eeb6eab07fc43310607:25:0)
    at Object.module.exports.__webpack_exports__.a (.nuxt/index.js:25:14)
    at __webpack_require__ (webpack:/webpack/bootstrap 5eeb6eab07fc43310607:25:0)
    at Object.module.exports.Object.defineProperty.value (server-bundle.js:1545:65)
    at __webpack_require__ (webpack:/webpack/bootstrap 5eeb6eab07fc43310607:25:0)
    at server-bundle.js:95:18
    at Object.<anonymous> (server-bundle.js:98:10)
    at evaluateModule (/Users/abel/Desktop/test/vue-js-modal/demo/server_side_rendering/node_modules/.2.3.4@vue-server-renderer/build.js:5820:21)
    at /Users/abel/Desktop/test/vue-js-modal/demo/server_side_rendering/node_modules/.2.3.4@vue-server-renderer/build.js:5878:18
    at /Users/abel/Desktop/test/vue-js-modal/demo/server_side_rendering/node_modules/.2.3.4@vue-server-renderer/build.js:5870:14
    at Nuxt.renderToString (/Users/abel/Desktop/test/vue-js-modal/demo/server_side_rendering/node_modules/.2.3.4@vue-server-renderer/build.js:6022:9)
    at P (/Users/abel/Desktop/test/vue-js-modal/demo/server_side_rendering/node_modules/.3.0.0@pify/index.js:49:6)

I tried the demo you provided, the same as the problem.

I'm trying to set the focus on an element once the modal is opened. However, the $refs item is undefined after the 'opened' event is emitted. I set a breakpoint and saw that the modal wasn't visible before the emit was emitted:

Relevant code:

<modal name="addContactModal" @opened="opened">
<input type="text" ref="focus"/>

opened (event) {
  this.$refs.focus.focus();
},

Do you have an idea?

I would like to use 'auto' for the height and it works. However, Vue shows a warning.

[Vue warn]: Invalid prop: type check failed for prop "height". Expected Number, got String.
found in
---> <VueJsModal>

Using a WYSIWYG editor inside modal, unable to focus when modal is draggable.

I try to make some unit / integration tests but I don't know how to do.

I have configured my main.js file exactly as in the doc.

I have a basic template :

<!-- FeedbackModal.vue -->
<template>
  <div class="feedback-modal-wrapper">
    <modal class="feedback-modal" name="feedback-modal" @before-open="beforeOpen" :height="400">

      <!-- modal header-->
      <div class="feedback-modal__header">
        <h2 class="feedback-modal__title">Contacter le support</h2>
      </div>

      <!-- modal body -->
      <div class="feedback-modal__body">
        <form class="feedback-modal__form">
          <p class="feedback-modal__error" v-if="error" aria-live="polite">{{error}}</p>
          <label class="feedback-modal__label" for="feedback-content">Contenu du message :</label>
          <textarea class="feedback-modal__text" id="feedback-content" v-model="feedback"></textarea>
        </form>
      </div>

      <!-- modal footer -->
      <div class="feedback-modal__footer">
        <div class="feedback-modal__actions">
          <button class="feedback-modal__action feedback-modal__action--send" @click="sendFeedback">Envoyer</button>
          <button class="feedback-modal__action feedback-modal__action--cancel" @click="cancelFeedback">Annuler</button>
        </div>
      </div>

    </modal>
  </div>
</template>

<script>
  export default {

    name: 'FeedbackModal',

    data() {
      return {
        feedback: null,
        error: null,
      };
    },

    methods: {
      beforeOpen() {
        this._resetFeedback();
        this._removeError();
      },

      sendFeedback() {
        // some logic...
      },

      cancelFeedback() {
        this._closeModal();
      },

      // some other methods...

    },
  };

</script>

And my current test class (Mocha) :

import Vue from 'vue';
import FeedbackModal from '@/components/FeedbackModal';

Vue.use(VueModal);

describe('Unit | Component | FeedbackModal.vue', () => {
  let component;

  const feedback = 'Dis-moi petit, as-tu déjà dansé avec le diable au clair de lune ?';
  const consultant = {
    email: '[email protected]',
    name: 'Bruce Wayne',
  };

  beforeEach(() => {

    // given
    const Constructor = Vue.extend(FeedbackModal);

    // when
    component = new Constructor({
      data: {
        feedback,
      },
    }).$mount();

  });

  it('should be named "FeedbackModal"', () => {
    expect(component.$options.name).to.equal('FeedbackModal');
  });

  describe('rendering', () => {
    it('should display the modal', () => {
      return Vue.nextTick().then(() => {
        console.log(component.$el);
        expect(component.$el.querySelector('.feedback-modal')).to.exist;
      });
    });
  });
});

I can not make my test pass to green.

The result of the console.log is :

LOG LOG: <div data-v-605e0740="" class="feedback-modal-wrapper"><!----></div>

So it means the modal was not interpreted / compiled / rendered.

Do you have some clue please ?

Thanks :-)

Add an option to make modal draggable on the screen

I can not unit test my component, that is a simple wrapper with a modal :

src/components/FeedbackModal.vue (template only)

<template>
  <modal class="feedback-modal" name="feedback-modal" @before-open="beforeOpen" :height="400">

    <!-- ... some content ...  -->

    <div class="feedback-modal__footer">
      <div class="feedback-modal__actions">
        <button class="feedback-modal__action feedback-modal__action--cancel" @click="cancelFeedback">Annuler</button>
        <button class="feedback-modal__action feedback-modal__action--send" @click="sendFeedback">Envoyer</button>
      </div>
    </div> 
  </modal>
</template>

test/unit/specs/components/FeedbackModal.vue

import Vue from 'vue';
import VueModal from 'vue-js-modal';
import FeedbackModal from '@/components/FeedbackModal';
import feedbacksApi from '@/api/feedbacks';

Vue.use(VueModal);

describe('Unit | Component | FeedbackModal.vue', () => {
  let component;

  beforeEach(() => {
    sinon.stub(feedbacksApi, 'sendFeedback').resolves();
    const Constructor = Vue.extend(FeedbackModal);
    component = new Constructor().$mount();
  });

  afterEach(() => {
    feedbacksApi.sendFeedback.restore();
  });

  it('should send interests on click on "send" button', () => {
    // given
    const myButton = component.$el.querySelector('.feedback-modal__action--send');

    // when
    myButton.click();

    // then
    Vue.nextTick().then(() => {
      expect(feedbacksApi.sendFeedback).to.have.been.calledWith(feedback, consultant, 'some-access-token');
    });
  });
});

Terminal

2) should send interests on click on "send" button
     Unit | Component | FeedbackModal.vue #sendFeedback
     undefined is not a constructor (evaluating 'component.$el.querySelector('.feedback-modal__action--send')')
webpack:///test/unit/specs/components/FeedbackModal.spec.js:66:48 <- index.js:18198:46

Is there a good way to make unit / integration tests ? if yes, can you document it please ?

Thanks :-)

Hi can we change the style of the actual modal window e.g change white background.
I added a new class and gave it some style but didn't effect.

Add a parameter when installing plugin (Vue.use) to set a custom name for "modal" component.
(Keep "modal" as default)

e.g.

Vue.use(VModal, { componentName: 'foo' })

...
<foo name="mymodal"></foo>

Hello, i really love your modal, of all of the ones i tried this is my favorite. I do have one issue though, i cannot get it to be dynamic in that when i set a size, it gets the values loaded on page load, and not what the new computed property i pass on.

Is this normal? I wanted to adjust the width and height based on many dynamic parameters but after all my testing it just takes what is computed on page load. Thanks for your help and insight.

Figure out how to create a high quality gif with the showcase instead of the crappy current one 😄

This is a great component, but there is a slight issue with horizontal alignment.

Web page content is usually aligned with scroll bar taken into account (document.body.clientWidth). However, this modal includes scroll bar width (window.innerWidth), which makes it aligned a bit too much on the right. Depending on the content behind, it looks more or less like a layout bug.

I think there should be at least a prop to choose whether to exclude scroll bar width.

Can you disable closing the modal by clicking outside the modal?

I want it to only be closeable with a button.

Need to add eslinting.

Node version: v6.11.0
npm version: 3.10.10

Error: Cannot find module '!!../node_modules/css-loader/index.js?sourceMap!../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-60fe12fc!../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Resizer.vue' from '/home/PROJECT_NAME/front/src/node_modules/vue-js-modal/dist'
at /home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
at process (/home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
at ondir (/home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
at load (/home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:123:15)

Bundle code

const browserify = require('browserify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const envify = require('envify/custom');
const gulp = require('gulp');
const task = gulp.task.bind(gulp);
const dest = gulp.dest.bind(gulp);;

task(':vue:compile', () => {
  const b = browserify(join(STATIC_APP_ROOT, 'vue/main.js'));

  const stream = b.bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer());


  return stream.pipe(dest(STATIC_APP_ROOT + '/shared/'));
});

package.json

"babel": {
    "presets": [
      "es2015"
    ],
    "plugins": [
      "transform-object-rest-spread"
    ]
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  },
  "browserify": {
    "transform": [
      "babelify",
      "vueify"
    ]
  },

Edit: You can replicate into vue-cli with browserify template. It seems a Browserify can't consume a Webpack bundle

The height on the modal doesn't resize to the content?
I've tried :adaptive="true" but it seems to have no bearing on the height.

Saw a similar issue (#48) that's been closed?

As a courtesy to others, it would be nice to update the readme/examples and mention that the module is only suitable for fixed size content.

Hi,

This modal looks great! However, I wonder if I can achieve something like Semantic UIs scrolling modals:
https://semantic-ui.com/modules/modal.html#/examples

Where the modal resizes according to the content and makes the whole window scrollable?

Thanks

Hi. When trying to set width and height of the modal (even if it works fine anyway!), one gets a bunch of errors saying height and width props as passed as String rather than Number. Changing the declaration of the modal with or without quotation marks has no effect. My current declaration:

<modal name="sites-list" width=800 height=500>

The errors:

I'll be happy to help with a PR, but I am unsure on where to start.

Hi!
Is it possible to set data or props inside a modal from outside, without giving it as props in the declaration?

Like, if I define a modal like this;
but I want to show it with different parameters, depending on where the 'show' is called, like for example like this;
@click="$modal.show('error-modal', 'data'));"
Is it possible to achieve this in some way?
Would greatly appreciate any help :)

Add reset flag that will reset the position & size of the modal every time it is opened.

Hi

I'm using the plugin as suggested but for some reason the styles are inserted straight into the head inside style tags when my app starts. I'm using Webpack for bundling my app. All other CSS gets correctly into the css bundle but vue-js-modal css only appears to be added dynamically when the app runs.

I think this is a bug since the browser needs to do more work this way and the performance suffers.

Could something be done so that the styles would be included in the css bundle and no runtime styles manipulation would be necessary?

Thanks for the awesome plugin!
BR
Pietari

Hi. I'd like to set the width and height of the modal in a more dynamic/responsive way. Would it be possible to set the values as percentage of something (probably window size)?

Currently the top-right slot doesn't get any CSS applied to it. It'd be nice by default if it was positioned at the top right of the modal instead of the top right of the page.

After I npm install the lastest version, I found that prop "adaptive" is not working.
In the code:
if (this.adaptive) {
this.modal.width = (0, _util.inRange)(0, this.window.width * this.maxAdaptiveWidth, this.modal.width);
...

this.maxAdaptiveWidth is always "undefined" when set a breakpoint before it.
I need to set it to 1 to make "adaptive" work.
Please check it.

全局引入了，没有反应唉

when I use bootstrap in my project , the vue-js-modal can't work well . it stop overlay ,but not show the modal ,

make vue directive or ??