正文用中文好了
有些情况下，modal body里面的内容可能是需要预编译的 vue 模板，这时候如果能支持传入一个 partial 作为 modal body 可用性就更高了

这只是一个简单可用的commit，因为我只用到了 card modal，就不发 PR 了。建议对整个 modal 组件做一个可复用的变更。
BelinChung@88ad34a

I got "Error in ./~/vue-bulma-modal/src/index.js Module not found: Error: Can't resolve './Modal'"

same for CardModal and ImageModal

i added the file extensions, and it works now. I'm not sure why these would be required in my project. I used vue cli to generate project and added components as needed.

import Modal from './Modal.vue'
import BaseModal from './BaseModal.js'
import CardModal from './CardModal.vue'
import ImageModal from './ImageModal.vue'

Hello. I am trying to handle data passed to modal but it looks like open event does not received in my handler

mounted () {
      this.$on('open', () => {
         // Not executed
      })
      this.$on('opened', () => {
        // Not executed
      })

      this.$on('close', () => {
        // Executed!
      })
},

...
"vue-bulma-modal": "1.0.1",
...

It can't be re-showed again after :visibility property has been set to "false".

Hello,

Thank you for this component, but that would be really useful to add a tiny documentation.

I've just spend 2 hours trying to make this component works.
I've created a custom component, and imported vue-bulma-modal, then instantiate this component with Vue but I still can't figure out how I can trigger any modal methods (which are ?) from my webpage.
Can I achieve this from my component ? Am I supposed to use Vuex ?

Please consider a basic documentation.

Thanks

Hi, when I open the modal the transition between .modal <-> .is-active leads to flicker effect.
I have to set also the enter class to avoid this issue. Do you have an idea why this is necessary? I try it like in the example. In vue-admin you create the modal in a different way.

:enter-class="enterClass"

Am trying to use vue-bulma-modal but keep getting the error unmet peer dependency

npm install vue-bulma-modal --save

+-- UNMET PEER DEPENDENCY [email protected]
`-- [email protected] 

npm install npm install [email protected]

+-- [email protected] 
+-- [email protected] 
`-- UNMET PEER DEPENDENCY [email protected]

I'm using vue-bulma in an Electron app, and everything went OK until I had to include modals...

In my JS :
import { CardModal } from 'vue-bulma-modal'

In my HTML:

<card-modal :visible="false" :title="Some lazy title" transition="zoom">
...
</card-modal>

causes :

> cross-env NODE_ENV=production webpack --progress --hide-modules

 86% hashingcrypto.js:74
  this._handle.update(data, encoding);
               ^

TypeError: Data must be a string or a buffer
    at TypeError (native)
    at Hash.update (crypto.js:74:16)

When I remove the import, webpack succeed to compile my app.

Someone got an idea ?
Thanks.

I am using laravel-mix and Webpack.

public/js/app.js from UglifyJs
Unexpected token punc «(», expected punc «:» [./~/vue-bulma-modal/src/BaseModal.js:14,0][public/js/app.js:656,7]

When user goes back, the parent component may be destroyed. So the modal dialog should be closed rather remaining on the top.

The prop visible won't function properly once the deactive method has been called

Steps to reproduce

<button @click="() => modalVisible = true">open modal</button>

<card-modal :visible="modalVisible" @cancel="() => modalVisible = false"> sdklfjsda </card-modal>

data() { return { modalVisible: false }

This would work only when you click the button and the cancel button. When you click the close button the deactive method in the BaseModal Mixin is called, and all it does is set the show to false.
Since the show and the modalVisible are meant to be in sync, the next time you click on the button modalVisible would remain true but show would be false.

if I change the click function of the button to toggle the state of modalVisible, I would have to click 2 times to get the modal back to visible.

The temporary fix is adding ref to the modal

<button @click="() => $refs.modal.active()">open modal</button>

<card-modal ref="modal" :visible="modalVisible" @cancel="() =>$refs.modal.deactive()"> sdklfjsda </card-modal>

Which makes the :visible prop somewhat useless.

Can you bump the version on npm? The latest version there doesn't have the last pull request.

Hello!

Sorry if it is a dumb question, but how can I put events on these buttons?

Please upgrade the release

the shortand functions inside the .js file imported as a mixin (BaseModal.js):

es. data()

wont be transpiled ( in data: function()) when i build the app with webpack

this gives error on ie 11 or lower

How would someone listen on parent element for an event of modal?

In the template(s) you have this
<div class="modal-background" @click="deactive"></div>

and this
<button class="modal-close" @click="deactive" v-if="closable"></button>

both actions point to

deactive () {
   this.show = false
}

so while the button may be hidden, the action of the background would still fire

please look at pull review for suggestion to fix
#8

it would be very useful to have a slot for the footer in the card modal, because sometimes i do not need the two buttons and sometimes i even need more buttons or something else but the footer is not configurable.

A simple slot would be easy to implement and therefore, the events emited for these buttons won't be needed anymore, as it would be handled by the wya this slot would be use

I'm using Laravel Elixir 6.0.0-15 and get the following error

ERROR in ./~/vue-bulma-modal/src/index.js
Module not found: Error: Can't resolve './Modal' in 'I:\Lavarel\onsen\node_modules\vue-bulma-modal\src'
 @ ./~/vue-bulma-modal/src/index.js 1:0-27

If I make the following changes to the index.js file, it functions

import Modal from './Modal.vue'
import BaseModal from './BaseModal.js'
import CardModal from './CardModal.vue'
import ImageModal from './ImageModal.vue'

I realize that Laravel Elixir has been superseded by Mix now and it may work from there but I haven't tested it.

assume there are many modals in the same page ... how could i target a specific modal by id ???
any help please