added test

Author: paulpflug

README.md

@@ -33,26 +33,25 @@ For examples see [`dev/`](https://github.com/vue-comps/vue-comps-modal/tree/mast
 Note, that the modal will be appended to `document.body` on first opening.
 
 #### Props
-| Name | type | default | description |
-| ---:| --- | ---| --- |
-| opacity | Number | 0.5 | opacity of the overlay |
-| not-dismissable | Boolean | false | can it get closed by click on overlay or ESC? |
-| ignore-parent | Boolean | false | will not set-up click listener on parent |
-| is-opened | Boolean | false | (two-way) set to open / close |
-| transition-in | function | no animation | set animation with opacity = 1. Argument: {el,cb} |
-| transition-out | function | no animation | set animation with opacity = 0. Argument: {el,cb} |
-| parent | element | parentElement | where to listen for open click |
-| class | String | modal | class of the `div`|
+Name | type | default | description
+---:| --- | ---| ---
+opacity | Number | 0.5 | opacity of the overlay
+not-dismissable | Boolean | false | can it get closed by click on overlay or ESC?
+ignore-parent | Boolean | false | will not set-up click listener on parent
+is-opened | Boolean | false | (two-way) set to open / close
+transition-in | Function | no animation | set animation with opacity = 1. Argument: {el,cb}
+transition-out | Function | no animation | set animation with opacity = 0. Argument: {el,cb}
+parent | Element | parentElement | where to listen for open click
+zIndex | Number | 1500 | minimum zIndex of the overlay, cannot be lower than 100 (see [vue-overlay](https://github.com/vue-comps/vue-overlay) for specifics)
 
 
 #### Events
-| Name |  description |
-| ---:| --- |
-| close |  when received, will close |
-| before-open | will be called before open animation |
-| opened |  will be called when opened |
-| before-close |  will be called before close animation |
-| closed |  will be called when closed |
+Name |  description
+---:| ---
+before-open | will be called before open animation
+opened |  will be called when opened
+before-close |  will be called before close animation
+closed |  will be called when closed
 
 
 # Development

dev/basic.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
 .container(style="padding:40px")
   button click
-    modal.modal
+    modal(v-ref:modal, v-bind:style="style")
       p Content
-  button not dismissable
-    modal.modal(not-dismissable)
-      p Content
-      closer
+  button(@click="toggle") not dismissable
+  modal(not-dismissable, ignore-parent,v-ref:notDismissable,v-bind:is-opened.sync="isOpened", v-bind:style="style")
+    p Content
+    button(@click.prevent="toggle") close
   br
   a(href="https://github.com/vue-comps/vue-comps-modal/blob/master/dev/basic.vue") source
 </template>
@@ -15,18 +15,16 @@
 module.exports =
   components:
     "modal" : require "../src/modal.vue"
-    "closer":
-      template: "<button @click.prevent='close'>close</button>"
-      methods:
-        close: ->
-          @$dispatch "close"
+  data: ->
+    isOpened: false
+    style:
+      background: "white"
+      width: "80%"
+      height: "60%"
+      margin: "auto"
+      padding: "20px"
+      top: "20%"
+  methods:
+    toggle: ->
+      @isOpened = !@isOpened
 </script>
-
-<style lang="stylus">
-.modal
-  background white
-  width 80%
-  height 60%
-  margin auto
-  top: 20%
-</style>

package.json

@@ -27,7 +27,6 @@
     "coffee-script": "^1.10.0",
     "css-loader": "^0.23.1",
     "gh-pages": "^0.11.0",
-    "jade": "^1.11.0",
     "karma": "^1.1.2",
     "karma-chai": "^0.1.0",
     "karma-chai-dom": "^1.1.0",
@@ -42,17 +41,11 @@
     "mocha": "^3.0.2",
     "pug": "^2.0.0-beta5",
     "script-runner": "^0.1.5",
-    "style-loader": "^0.13.1",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^2.2.0",
-    "template-html-loader": "0.0.3",
     "vue": "^1.0.26",
     "vue-compiler": "^0.3.0",
     "vue-dev-server": "^0.2.10",
     "vue-html-loader": "^1.2.3",
     "vue-loader": "^8.5.3",
-    "vue-style-loader": "^1.0.0",
-    "vueify-insert-css": "^1.0.0",
     "webpack": "^1.13.1"
   },
   "keywords": [

src/modal.vue

@@ -62,10 +62,6 @@ module.exports =
       zIndex: 1000
       display: "block"
 
-  events:
-    close: ->
-      @close()
-      return true
   methods:
     doNothing: ->
 
@@ -108,7 +104,7 @@ module.exports =
       e.preventDefault()
     toggle: ->
       if @opened
-        @open()
-      else
         @close()
+      else
+        @open()
 </script>

test/modal.coffee

@@ -1,4 +1,25 @@
 env = null
+mouseClick = ->
+  evt = document.createEvent("MouseEvents")
+  evt.initMouseEvent(
+    "click",
+    true,
+    true,
+    window,
+    1,
+    10,
+    10,
+    10,
+    10,
+    false,
+    false,
+    false,
+    false,
+    0,
+    null
+    )
+  return evt
+
 describe "modal", ->
 
   describe "basic env", ->
@@ -9,4 +30,30 @@ describe "modal", ->
     after ->
       unloadComp(env)
 
-    it "should work", ->
+    it "should work", (done) ->
+      should.not.exist env.$refs.modal.$els.modal
+      should.not.exist env.$refs.notdismissable.$els.modal
+      env.$refs.modal.isOpened = true
+      env.$nextTick ->
+        should.exist env.$refs.modal.$els.modal
+        len = document.body.children.length
+        document.body.children[len-1].should.have.attr("style").match /z-index: 1501/
+        document.body.children[len-2].should.have.attr("style").match /z-index: 1500/
+        env.$refs.notdismissable.isOpened = true
+        env.$nextTick ->
+          should.exist env.$refs.notdismissable.$els.modal
+          len = document.body.children.length
+          document.body.children[len-1].should.have.attr("style").match /z-index: 1506/
+          document.body.children[len-3].should.have.attr("style").match /z-index: 1505/
+          document.dispatchEvent(mouseClick())
+          env.$nextTick ->
+            env.$refs.notdismissable.isOpened.should.be.true
+            env.$refs.notdismissable.isOpened = false
+            env.$nextTick -> env.$nextTick ->
+              should.not.exist env.$refs.notdismissable.$els.modal
+              len = document.body.children.length
+              document.body.children[len-2].should.have.attr("style").match /z-index: 1500/
+              document.body.children[len-2].dispatchEvent(mouseClick())
+              env.$nextTick ->
+                should.not.exist env.$refs.modal.$els.modal
+                done()