Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2d3da57

Browse files
committed
added test
1 parentaafe91d commit2d3da57

File tree

5 files changed

+83
-50
lines changed

5 files changed

+83
-50
lines changed

‎README.md‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -33,26 +33,25 @@ For examples see [`dev/`](https://github.com/vue-comps/vue-comps-modal/tree/mast
3333
Note, that the modal will be appended to`document.body` on first opening.
3434

3535
####Props
36-
|Name| type| default| description|
37-
|---:| ---| ---| ---|
38-
|opacity| Number| 0.5| opacity of the overlay|
39-
|not-dismissable| Boolean| false| can it get closed by click on overlay or ESC?|
40-
|ignore-parent| Boolean| false| will not set-up click listener on parent|
41-
|is-opened| Boolean| false| (two-way) set to open / close|
42-
|transition-in|function| no animation| set animation with opacity = 1. Argument: {el,cb}|
43-
|transition-out|function| no animation| set animation with opacity = 0. Argument: {el,cb}|
44-
|parent|element| parentElement| where to listen for open click|
45-
| class| String|modal|classof the`div`|
36+
Name | type | default | description
37+
---:| --- | ---| ---
38+
opacity | Number | 0.5 | opacity of the overlay
39+
not-dismissable | Boolean | false | can it get closed by click on overlay or ESC?
40+
ignore-parent | Boolean | false | will not set-up click listener on parent
41+
is-opened | Boolean | false | (two-way) set to open / close
42+
transition-in |Function | no animation | set animation with opacity = 1. Argument: {el,cb}
43+
transition-out |Function | no animation | set animation with opacity = 0. Argument: {el,cb}
44+
parent |Element | parentElement | where to listen for open click
45+
zIndex | Number |1500 |minimum zIndexof theoverlay, cannot be lower than 100 (see[vue-overlay](https://github.com/vue-comps/vue-overlay) for specifics)
4646

4747

4848
####Events
49-
| Name| description|
50-
| ---:| ---|
51-
| close| when received, will close|
52-
| before-open| will be called before open animation|
53-
| opened| will be called when opened|
54-
| before-close| will be called before close animation|
55-
| closed| will be called when closed|
49+
Name | description
50+
---:| ---
51+
before-open | will be called before open animation
52+
opened | will be called when opened
53+
before-close | will be called before close animation
54+
closed | will be called when closed
5655

5756

5857
#Development

‎dev/basic.vue‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template lang="pug">
22
.container(style="padding:40px")
33
button click
4-
modal.modal
4+
modal(v-ref:modal,v-bind:style="style")
55
p Content
6-
button not dismissable
7-
modal.modal(not-dismissable)
8-
p Content
9-
closer
6+
button(@click="toggle") not dismissable
7+
modal(not-dismissable,ignore-parent,v-ref:notDismissable,v-bind:is-opened.sync="isOpened",v-bind:style="style")
8+
p Content
9+
button(@click.prevent="toggle") close
1010
br
1111
a(href="https://github.com/vue-comps/vue-comps-modal/blob/master/dev/basic.vue") source
1212
</template>
@@ -15,18 +15,16 @@
1515
module.exports=
1616
components:
1717
"modal":require"../src/modal.vue"
18-
"closer":
19-
template:"<button @click.prevent='close'>close</button>"
20-
methods:
21-
close:->
22-
@$dispatch"close"
18+
data:->
19+
isOpened:false
20+
style:
21+
background:"white"
22+
width:"80%"
23+
height:"60%"
24+
margin:"auto"
25+
padding:"20px"
26+
top:"20%"
27+
methods:
28+
toggle:->
29+
@isOpened=!@isOpened
2330
</script>
24-
25-
<style lang="stylus">
26-
.modal
27-
backgroundwhite
28-
width80%
29-
height60%
30-
marginauto
31-
top:20%
32-
</style>

‎package.json‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
"coffee-script":"^1.10.0",
2828
"css-loader":"^0.23.1",
2929
"gh-pages":"^0.11.0",
30-
"jade":"^1.11.0",
3130
"karma":"^1.1.2",
3231
"karma-chai":"^0.1.0",
3332
"karma-chai-dom":"^1.1.0",
@@ -42,17 +41,11 @@
4241
"mocha":"^3.0.2",
4342
"pug":"^2.0.0-beta5",
4443
"script-runner":"^0.1.5",
45-
"style-loader":"^0.13.1",
46-
"stylus":"^0.54.5",
47-
"stylus-loader":"^2.2.0",
48-
"template-html-loader":"0.0.3",
4944
"vue":"^1.0.26",
5045
"vue-compiler":"^0.3.0",
5146
"vue-dev-server":"^0.2.10",
5247
"vue-html-loader":"^1.2.3",
5348
"vue-loader":"^8.5.3",
54-
"vue-style-loader":"^1.0.0",
55-
"vueify-insert-css":"^1.0.0",
5649
"webpack":"^1.13.1"
5750
},
5851
"keywords": [

‎src/modal.vue‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,6 @@ module.exports =
6262
zIndex:1000
6363
display:"block"
6464
65-
events:
66-
close:->
67-
@close()
68-
returntrue
6965
methods:
7066
doNothing:->
7167
@@ -108,7 +104,7 @@ module.exports =
108104
e.preventDefault()
109105
toggle:->
110106
if@opened
111-
@open()
112-
else
113107
@close()
108+
else
109+
@open()
114110
</script>

‎test/modal.coffee‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,25 @@
11
env=null
2+
mouseClick=->
3+
evt=document.createEvent("MouseEvents")
4+
evt.initMouseEvent(
5+
"click",
6+
true,
7+
true,
8+
window,
9+
1,
10+
10,
11+
10,
12+
10,
13+
10,
14+
false,
15+
false,
16+
false,
17+
false,
18+
0,
19+
null
20+
)
21+
return evt
22+
223
describe"modal",->
324

425
describe"basic env",->
@@ -9,4 +30,30 @@ describe "modal", ->
930
after->
1031
unloadComp(env)
1132

12-
it"should work",->
33+
it"should work", (done)->
34+
should.not.existenv.$refs.modal.$els.modal
35+
should.not.existenv.$refs.notdismissable.$els.modal
36+
env.$refs.modal.isOpened=true
37+
env.$nextTick->
38+
should.existenv.$refs.modal.$els.modal
39+
len=document.body.children.length
40+
document.body.children[len-1].should.have.attr("style").match/z-index: 1501/
41+
document.body.children[len-2].should.have.attr("style").match/z-index: 1500/
42+
env.$refs.notdismissable.isOpened=true
43+
env.$nextTick->
44+
should.existenv.$refs.notdismissable.$els.modal
45+
len=document.body.children.length
46+
document.body.children[len-1].should.have.attr("style").match/z-index: 1506/
47+
document.body.children[len-3].should.have.attr("style").match/z-index: 1505/
48+
document.dispatchEvent(mouseClick())
49+
env.$nextTick->
50+
env.$refs.notdismissable.isOpened.should.be.true
51+
env.$refs.notdismissable.isOpened=false
52+
env.$nextTick->env.$nextTick->
53+
should.not.existenv.$refs.notdismissable.$els.modal
54+
len=document.body.children.length
55+
document.body.children[len-2].should.have.attr("style").match/z-index: 1500/
56+
document.body.children[len-2].dispatchEvent(mouseClick())
57+
env.$nextTick->
58+
should.not.existenv.$refs.modal.$els.modal
59+
done()

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp