├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── src
    ├── BaseModal.js
    ├── CardModal.vue
    ├── ImageModal.vue
    ├── Modal.vue
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | (The MIT License)
 2 | 
 3 | Copyright (c) 2016 fundon <cfddream@gmail.com<
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Modal
 2 | 
 3 | Modal component for Vue Bulma.
 4 | 
 5 | 
 6 | ## Installation
 7 | 
 8 | ```
 9 | $ npm install vue-bulma-modal --save
10 | ```
11 | 
12 | 
13 | ## Examples
14 | 
15 | ```vue
16 | <template>
17 |   <div>
18 |     <image-modal :visible="true" transition="roll">
19 |       <p class="image is-4by3">
20 |         <img src="http://placehold.it/1280x960">
21 |       </p>
22 |     </image-modal>
23 |     <card-modal :visible="true" :title="title" transition="zoom">
24 |       <div class="content has-text-centered">
25 |         <img :src="src" height="120" alt="Vue Admin">
26 |       </div>
27 |     </card-modal>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | import { Modal, ImageModal, CardModal } from 'vue-bulma-modal'
33 | 
34 | export default {
35 |   components: {
36 |     Modal,
37 |     ImageModal,
38 |     CardModal
39 |   }
40 | }
41 | </script>
42 | ```
43 | 
44 | 
45 | ## Badges
46 | 
47 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
48 | ![](https://img.shields.io/badge/status-stable-green.svg)
49 | 
50 | ---
51 | 
52 | > [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
53 | > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
54 | > Twitter [@_fundon](https://twitter.com/_fundon)
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bulma-modal",
 3 |   "version": "1.0.1",
 4 |   "description": "Modal component for Vue Bulma",
 5 |   "main": "src/index.js",
 6 |   "peerDependencies": {
 7 |     "bulma": ">=0.2",
 8 |     "vue": ">=2"
 9 |   },
10 |   "repository": "vue-bulma/modal",
11 |   "keywords": [
12 |     "vue",
13 |     "bulma",
14 |     "vue-bulma",
15 |     "vue-bulma-component",
16 |     "vue-bulma-modal",
17 |     "modal"
18 |   ],
19 |   "author": "Fangdun Cai <cfddream@gmail.com>",
20 |   "license": "MIT"
21 | }
22 | 


--------------------------------------------------------------------------------
/src/BaseModal.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 | 
 4 |   props: {
 5 |     card: Boolean,
 6 |     visible: Boolean,
 7 |     closable: Boolean,
 8 |     transition: {
 9 |       type: String,
10 |       default: 'fade'
11 |     }
12 |   },
13 | 
14 |   data () {
15 |     return {
16 |       show: this.visible
17 |     }
18 |   },
19 | 
20 |   mounted () {
21 |     document.body.appendChild(this.$el)
22 |   },
23 | 
24 |   methods: {
25 |     beforeEnter () {
26 |       this.$emit('open')
27 |     },
28 |     
29 |     afterEnter () {
30 |       this.$emit('opened')
31 |     },
32 | 
33 |     beforeLeave () {
34 |       this.$emit('before-close')
35 |     },
36 |     
37 |     afterLeave () {
38 |       this.$emit('close')
39 |     },
40 | 
41 |     active () {
42 |       this.show = true
43 |     },
44 | 
45 |     deactive () {
46 |       if(this.closable)
47 |         this.show = false
48 |     }
49 |   },
50 | 
51 |   computed: {
52 |     enterClass () {
53 |       return `${this.transition}In`
54 |     },
55 | 
56 |     leaveClass () {
57 |       return `${this.transition}Out`
58 |     }
59 |   },
60 | 
61 |   watch: {
62 |     visible (val) {
63 |       this.show = val
64 |     }
65 |   }
66 | 
67 | }
68 | 


--------------------------------------------------------------------------------
/src/CardModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition
 3 |     :name="transition"
 4 |     mode="in-out"
 5 |     appear
 6 |     :appear-active-class="enterClass"
 7 |     :enter-active-class="enterClass"
 8 |     :leave-active-class="leaveClass"
 9 |     @beforeEnter="beforeEnter"
10 |     @afterEnter="afterEnter"
11 |     @beforeLeave="beforeLeave"
12 |     @afterLeave="afterLeave"
13 |   >
14 |     <div :class="classes" v-if="show">
15 |       <div class="modal-background" @click="deactive"></div>
16 |       <div class="modal-card">
17 |         <header class="modal-card-head">
18 |           <p class="modal-card-title">{{ title }}</p>
19 |           <button class="delete" @click="deactive"></button>
20 |         </header>
21 |         <section class="modal-card-body">
22 |           <slot></slot>
23 |         </section>
24 |         <footer class="modal-card-foot">
25 |           <a class="button is-primary" @click="ok">{{ okText }}</a>
26 |           <a class="button" @click="cancel">{{ cancelText }}</a>
27 |         </footer>
28 |       </div>
29 |     </div>
30 |   </transition>
31 | </template>
32 | 
33 | <script>
34 | import BaseModal from './BaseModal'
35 | 
36 | export default {
37 |   mixins: [BaseModal],
38 | 
39 |   props: {
40 |     title: {
41 |       type: String
42 |     },
43 |     okText: {
44 |       type: String,
45 |       default: 'Ok'
46 |     },
47 |     cancelText: {
48 |       type: String,
49 |       default: 'Cancel'
50 |     }
51 |   },
52 | 
53 |   computed: {
54 |     classes () {
55 |       return ['modal', 'animated', 'is-active']
56 |     }
57 |   },
58 | 
59 |   methods: {
60 |     ok () {
61 |       this.$emit('ok')
62 |     },
63 | 
64 |     cancel () {
65 |       this.$emit('cancel')
66 |     },
67 |   }
68 | }
69 | </script>
70 | 


--------------------------------------------------------------------------------
/src/ImageModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition
 3 |     :name="transition"
 4 |     mode="in-out"
 5 |     appear
 6 |     :appear-active-class="enterClass"
 7 |     :enter-active-class="enterClass"
 8 |     :leave-active-class="leaveClass"
 9 |     @beforeEnter="beforeEnter"
10 |     @afterEnter="afterEnter"
11 |     @beforeLeave="beforeLeave"
12 |     @afterLeave="afterLeave"
13 |   >
14 |     <div :class="classes" v-if="show">
15 |       <div class="modal-background" @click="deactive"></div>
16 |       <div class="modal-content">
17 |         <slot></slot>
18 |       </div>
19 |       <button class="modal-close" @click="deactive" v-if="closable"></button>
20 |     </div>
21 |   </transition>
22 | </template>
23 | 
24 | <script>
25 | import BaseModal from './BaseModal'
26 | 
27 | export default {
28 |   mixins: [BaseModal],
29 | 
30 |   props: {
31 |     closable: {
32 |       type: Boolean,
33 |       default: true
34 |     }
35 |   },
36 | 
37 |   computed: {
38 |     classes () {
39 |       return ['modal', 'animated', 'is-active']
40 |     }
41 |   }
42 | }
43 | </script>
44 | 


--------------------------------------------------------------------------------
/src/Modal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition
 3 |     :name="transition"
 4 |     mode="in-out"
 5 |     appear
 6 |     :appear-active-class="enterClass"
 7 |     :enter-active-class="enterClass"
 8 |     :leave-active-class="leaveClass"
 9 |     @beforeEnter="beforeEnter"
10 |     @afterEnter="afterEnter"
11 |     @beforeLeave="beforeLeave"
12 |     @afterLeave="afterLeave"
13 |   >
14 |     <div :class="classes" v-if="show">
15 |       <div class="modal-background" @click="deactive"></div>
16 |       <div class="modal-container">
17 |         <div class="modal-content">
18 |           <slot></slot>
19 |         </div>
20 |       </div>
21 |       <button class="modal-close" @click="deactive" v-if="closable"></button>
22 |     </div>
23 |   </transition>
24 | </template>
25 | 
26 | <script>
27 | import BaseModal from './BaseModal'
28 | 
29 | export default {
30 |   mixins: [BaseModal],
31 | 
32 |   props: {
33 |     closable: {
34 |       type: Boolean,
35 |       default: true
36 |     }
37 |   },
38 | 
39 |   computed: {
40 |     classes () {
41 |       return ['modal', 'animated', 'is-active']
42 |     }
43 |   }
44 | }
45 | </script>
46 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Modal from './Modal.vue'
 2 | import BaseModal from './BaseModal'
 3 | import CardModal from './CardModal.vue'
 4 | import ImageModal from './ImageModal.vue'
 5 | 
 6 | export {
 7 |   Modal,
 8 |   BaseModal,
 9 |   CardModal,
10 |   ImageModal
11 | }
12 | 


--------------------------------------------------------------------------------