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

Commit2fe10de

Browse files
committed
first commit
0 parents  commit2fe10de

File tree

10 files changed

+376
-0
lines changed

10 files changed

+376
-0
lines changed

‎.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
node_modules
2+
*.sublime-project
3+
*.sublime-workspace
4+
npm-debug.log
5+
build/bundle.js
6+
dev/index.js
7+
static
8+
*.js

‎.npmignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
*.sublime-project
3+
*.sublime-workspace
4+
npm-debug.log
5+
dev/index.js
6+
static

‎README.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
#vue-comps-modal
2+
3+
the best modal you can get
4+
5+
###[See it in action](https://vue-comps.github.io/vue-comps-modal)
6+
7+
#Install
8+
9+
```sh
10+
npm install --save-dev vue-comps-modal
11+
```
12+
or include`build/bundle.js`
13+
14+
##Usage
15+
```coffee
16+
# in your component
17+
components:
18+
"modal":require("vue-comps-modal")
19+
# or, when using bundle.js
20+
components:
21+
"modal":window.vueComps.modal
22+
```
23+
24+
For examples see`dev/`
25+
26+
####Props
27+
| Name| type| default| description|
28+
| ---:| ---| ---| ---|
29+
| opacity| Number| 0.5| opacity of the overlay|
30+
| dismissable| Boolean| true| can it get closed by click on overlay or ESC?|
31+
| on-click| Boolean| true| will set-up click listener on parent|
32+
| is-opened| Boolean| false| (two-way) set to open / close|
33+
| fade-in| function| no animation| set animation with opacity = 1. Argument: {el,cb}|
34+
| fade-out| function| no animation| set animation with opacity = 0. Argument: {el,cb}|
35+
| parent| element| parentElement| where to listen for open click|
36+
37+
38+
####Events
39+
| Name| description|
40+
| ---:| ---|
41+
| close| when received, will close|
42+
| before-open| will be called before open animation|
43+
| opened| will be called when opened|
44+
| before-close| will be called before close animation|
45+
| closed| will be called when closed|
46+
47+
48+
#Development
49+
Clone repository
50+
```sh
51+
npm install
52+
npm run dev
53+
```
54+
Browse to`http://localhost:8080/`
55+
56+
##License
57+
Copyright (c) 2016 Paul Pflugradt
58+
Licensed under the MIT license.

‎build/common.coffee‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
window.vueComps?= {}
2+
window.vueComps.modal=require('../modal.js')

‎build/webpack.config.coffee‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
webpack=require"webpack"
2+
3+
module.exports=
4+
entry:"./build/common.coffee"
5+
output:
6+
filename:"bundle.js"
7+
path:__dirname
8+
module:
9+
loaders: [
10+
{test:/\.coffee$/,loader:"coffee"}
11+
]
12+
plugins: [
13+
newwebpack.optimize.UglifyJsPlugincompress:warnings:false
14+
newwebpack.optimize.OccurenceOrderPlugin()
15+
]

‎dev/basic.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template lang="jade">
2+
.container
3+
button click
4+
modal
5+
p Content
6+
button not dismissable
7+
modal(:dismissable="false")
8+
p Content
9+
closer
10+
a(href="https://github.com/vue-comps/vue-comps-modal/blob/master/dev/basic.vue") source
11+
</template>
12+
13+
<script lang="coffee">
14+
module.exports=
15+
components:
16+
"modal":require"../src/modal.vue"
17+
"closer":
18+
template:"<button @click.prevent='close'>close</button>"
19+
methods:
20+
close:->
21+
@$dispatch"close"
22+
</script>
23+
24+
<style lang="stylus">
25+
.container>a
26+
positionabsolute
27+
left250px
28+
top40px
29+
.vc-modal
30+
backgroundwhite
31+
width80%
32+
height60%
33+
marginauto
34+
</style>

‎karma.conf.coffee‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
module.exports= (config)->
2+
config.set
3+
preprocessors:
4+
"**/*.coffee": ["webpack",'sourcemap']
5+
webpack:
6+
devtool:'inline-source-map'
7+
resolve:
8+
extensions: ["",".js",".coffee",".vue"]
9+
module:
10+
loaders: [
11+
{test:/\.coffee$/,loader:"coffee-loader" }
12+
{test:/\.vue$/,loader:"vue-loader" }
13+
{test:/\.html$/,loader:"html"}
14+
{test:/\.css$/,loader:"style-loader!css-loader" }
15+
]
16+
webpackMiddleware:
17+
noInfo:true
18+
files: ["test/*.coffee"]
19+
frameworks: ["mocha","chai-dom","chai-spies","chai","vue-component"]
20+
plugins: [
21+
require("karma-chai")
22+
require("karma-chai-dom")
23+
require("karma-chrome-launcher")
24+
require("karma-firefox-launcher")
25+
require("karma-mocha")
26+
require("karma-webpack")
27+
require("karma-sourcemap-loader")
28+
require("karma-spec-reporter")
29+
require("karma-chai-spies")
30+
require("karma-vue-component")
31+
]
32+
browsers: ["Chrome","Firefox"]

‎package.json‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
{
2+
"name":"vue-comps-modal",
3+
"description":"the best modal you can get",
4+
"version":"0.0.0",
5+
"homepage":"https://github.com/vue-comps",
6+
"author": {
7+
"name":"Paul Pflugradt",
8+
"email":"paul.pflugradt@gmail.com"
9+
},
10+
"license":"MIT",
11+
"main":"modal.js",
12+
"repository": {
13+
"type":"git",
14+
"url":"git://github.com/vue-comps/vue-comps-modal"
15+
},
16+
"engines": {
17+
"node":"*"
18+
},
19+
"dependencies": {
20+
"vue-filters":"^0.1.6",
21+
"vue-overlay":"^0.0.2",
22+
"vue-mixins":"^0.2.2"
23+
},
24+
"devDependencies": {
25+
"babel-core":"^6.7.4",
26+
"babel-loader":"^6.2.4",
27+
"babel-plugin-transform-runtime":"^6.6.0",
28+
"babel-preset-es2015":"^6.6.0",
29+
"babel-runtime":"^5.8.34",
30+
"chai":"^3.5.0",
31+
"chai-spies":"^0.7.1",
32+
"coffee-loader":"^0.7.2",
33+
"coffee-script":"^1.10.0",
34+
"css-loader":"^0.23.1",
35+
"gh-pages":"^0.11.0",
36+
"jade":"^1.11.0",
37+
"karma":"^0.13.22",
38+
"karma-chai":"^0.1.0",
39+
"karma-chai-dom":"^1.1.0",
40+
"karma-chai-spies":"^0.1.4",
41+
"karma-chrome-launcher":"^0.2.3",
42+
"karma-firefox-launcher":"^0.1.7",
43+
"karma-mocha":"^0.2.2",
44+
"karma-sourcemap-loader":"^0.3.7",
45+
"karma-spec-reporter":"^0.0.25",
46+
"karma-vue-component":"^0.1.0",
47+
"karma-webpack":"^1.7.0",
48+
"mocha":"^2.4.5",
49+
"parse5":"^2.1.5",
50+
"script-runner":"^0.1.4",
51+
"style-loader":"^0.13.1",
52+
"stylus-loader":"^2.0.0",
53+
"template-html-loader":"0.0.3",
54+
"vue":"^1.0.20",
55+
"vue-compiler":"^0.1.0",
56+
"vue-dev-server":"^0.2.10",
57+
"vue-hot-reload-api":"^1.3.2",
58+
"vue-html-loader":"^1.2.1",
59+
"vue-loader":"^8.2.2",
60+
"vue-style-loader":"^1.0.0",
61+
"vue-touch":"^1.0.2",
62+
"vue-mixins":"^0.2.2",
63+
"vueify-insert-css":"^1.0.0",
64+
"webpack":"^1.12.14"
65+
},
66+
"keywords": [
67+
"modal",
68+
"component",
69+
"vue"
70+
],
71+
"readmeFilename":"README.md",
72+
"scripts": {
73+
"build:vue":"NODE_ENV=production vue-compiler --out . src/*.vue",
74+
"build:webpack":"webpack --config build/webpack.config.coffee",
75+
"build":"run-npm build:*",
76+
"dev":"vue-dev-server",
77+
"watch":"karma start --browsers Chrome --auto-watch --reporters spec",
78+
"test":"karma start --single-run",
79+
"preversion":"npm test",
80+
"version":"npm run build && git add .",
81+
"postversion":"git push && git push --tags && npm publish",
82+
"ghpages":"vue-dev-server --static static/ && gh-pages -d static"
83+
}
84+
}

‎src/modal.vue‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
// out: ..
2+
<template lang="jade">
3+
.vc-modal(
4+
v-bind:style="style"
5+
v-if="opened"
6+
@keyup.esc="dismiss | notPrevented | prevent"
7+
@click="doNothing | notPrevented | prevent"
8+
)
9+
slot No content
10+
</template>
11+
12+
<script lang="coffee">
13+
module.exports=
14+
15+
mixins: [
16+
require("vue-mixins/getVue")
17+
]
18+
19+
filters:
20+
notPrevented:require("vue-filters/notPrevented")
21+
prevent:require("vue-filters/prevent")
22+
23+
created:->
24+
@overlay=require("vue-overlay")(@getVue())
25+
26+
props:
27+
"opacity":
28+
type:Number
29+
default:0.5
30+
"dismissable":
31+
type:Boolean
32+
default:true
33+
"isOpened":
34+
type:Boolean
35+
default:false
36+
"fadeIn":
37+
type:Function
38+
default: ({el,cb})->
39+
@style.opacity=1
40+
cb()
41+
"fadeOut":
42+
type:Function
43+
default: ({el,cb})->
44+
@style.opacity=0
45+
cb()
46+
"parent":
47+
type:Object
48+
"onClick":
49+
type:Boolean
50+
default:true
51+
52+
data:->
53+
opened:false
54+
closeOverlay:null
55+
removeParentClickListener:null
56+
style:
57+
opacity:0
58+
position:"fixed"
59+
left:0
60+
right:0
61+
zIndex:1000
62+
63+
watch:
64+
"parent":"setupParent"
65+
"isOpened": (val)->
66+
if val!=@opened
67+
if val
68+
@open()
69+
else
70+
@close()
71+
events:
72+
close:->
73+
@close()
74+
returntrue
75+
methods:
76+
doNothing:->
77+
78+
dismiss:->
79+
@close()if@dismissable
80+
81+
show:->
82+
@opened=true
83+
@isOpened=true
84+
#@$appendTo document.body
85+
@$nextTick=>
86+
@$emit"beforeOpen"
87+
@fadeInel:@$el,cb:=>
88+
@$emit"opened"
89+
hide:->
90+
returnunless@opened
91+
@$emit"beforeClose"
92+
@fadeInel:@$el,cb:=>
93+
@opened=false
94+
@isOpened=false
95+
@$emit"closed"
96+
open:->
97+
returnif@opened
98+
{zIndex,close}=@overlay.opendismissable:@dismissable,opacity:@opacity,onClosed:=>@close()
99+
@style.zIndex= zIndex
100+
@closeOverlay= close
101+
@show()
102+
close:->
103+
@closeOverlay?()
104+
@closeOverlay=null
105+
@hide()
106+
onParentClick: (e)->
107+
returnife.defaultPrevented
108+
if@opened
109+
@close()
110+
else
111+
@open()
112+
e.preventDefault()
113+
setupParent: (parent=@parent)->
114+
if@onClick
115+
@removeParentClickListener?()
116+
parent.addEventListener"click",@onParentClick
117+
@removeParentClickListener==>
118+
parent.removeEventListener"click",@onParentClick
119+
120+
attached:->
121+
unless@parent?
122+
@parent=@$el.parentElement
123+
else
124+
@setupParent()
125+
</script>

‎test/modal.coffee‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
env=null
2+
describe"modal",->
3+
4+
describe"basic env",->
5+
6+
before->
7+
env=loadComp(require("../dev/basic.vue"))
8+
9+
after->
10+
unloadComp(env)
11+
12+
it"should work",->

0 commit comments

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