├── .babelrc
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── README.md
├── build
    ├── webpack.dev.config.js
    └── webpack.prod.config.js
├── examples
    ├── App.vue
    ├── index.html
    └── main.js
├── package.json
└── src
    ├── Dialog.vue
    ├── assets
        └── images
        │   └── close.svg
    └── index.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015", "es2017"
4 |   ],
5 |   "plugins": [
6 |     "transform-es2015-modules-commonjs"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | build/*


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "commonjs": true,
 6 |     "es6": true,
 7 |     "node": true
 8 |   },
 9 |   "parserOptions": {
10 |     "ecmaVersion": 8,
11 |     "sourceType": "module"
12 |   },
13 |   "rules": {
14 |     "no-const-assign": "warn",
15 |     "no-this-before-super": "warn",
16 |     "no-undef": "warn",
17 |     "no-unreachable": "warn",
18 |     "no-unused-vars": "warn",
19 |     "constructor-super": "warn",
20 |     "valid-typeof": "warn",
21 |     "semi": [
22 |       "warn",
23 |       "never"
24 |     ],
25 |     "quotes": [
26 |       "warn",
27 |       "single"
28 |     ],
29 |     "arrow-parens": 0,
30 |     "generator-star-spacing": 0,
31 |     "space-before-function-paren": 0
32 |   }
33 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist
4 | lib/*
5 | !lib/.gitkeep
6 | .vscode
7 | npm-debug.log
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-dialog
 2 | 
 3 | This is yet another vue dialog component.
 4 | 
 5 | ## Install
 6 | 
 7 | Use npm to download code:
 8 | 
 9 | ```
10 | npm install hsy-vue-dialog -S
11 | ```
12 | 
13 | then import it into your project, add below code into your `main.js`:
14 | 
15 | ```js
16 | import Dialog from 'hsy-vue-dialog'
17 | 
18 | Vue.use(Dialog)
19 | ```
20 | 
21 | ## Usage
22 | 
23 | ```html
24 | <button @click="visible = true">remove</button>
25 | 
26 | <hsy-dialog class="confirm" v-model="visible">
27 |   <div slot="title">Remove</div>
28 |   <div slot="body">
29 |     <div>This operation is irreversible, are you sure?</div>
30 |     <div>
31 |       <button @click="handleYes">Yes</button>
32 |       <button>No</button>
33 |     </div>
34 |   </div>
35 | </hsy-dialog>
36 | 
37 | <script>
38 | export default {
39 |   data() {
40 |     return {
41 |       visible: false
42 |     }
43 |   },
44 |   methods: {
45 |     handleYes() {
46 |       alert('Yes')
47 |       this.visible = false
48 |     }
49 |   }
50 | }
51 | </script>
52 | ```
53 | 
54 | ## Props
55 | 
56 | | Prop            | Description                                     | Type    | Accepted Values | Default |
57 | |:----------------|:------------------------------------------------|:--------|:----------------|:--------|
58 | | value           | whether dialog is visible or not                | Boolean | --              | false   |
59 | | closeButton     | whether close button is visible or not          | Boolean | --              | true    |
60 | | clickMask2Close | if dialog should be closed when mask is clicked | Boolean | --              | true    |
61 | 
62 | ## Demo
63 | 
64 | [demo](http://vue-demo.hsiaosiyuan.com/#/dialog)
65 | 
66 | ## Screenshot
67 | 
68 | <img src="http://og9g58alt.bkt.clouddn.com/dialog1.png" width="500">
69 | <img src="http://og9g58alt.bkt.clouddn.com/dialog2.png" width="430">
70 | 


--------------------------------------------------------------------------------
/build/webpack.dev.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 3 | 
 4 | module.exports = {
 5 |   entry: './examples/main.js',
 6 |   resolve: {
 7 |     extensions: ['.js', '.vue', '.json'],
 8 |     alias: {
 9 |       main: path.resolve(__dirname, '../src')
10 |     },
11 |   },
12 |   output: {
13 |     path: path.resolve(__dirname, '../dist/dev'),
14 |     publicPath: '/',
15 |     filename: 'index.js'
16 |   },
17 |   devServer: {
18 |     contentBase: path.resolve(__dirname, '../dist/dev'),
19 |     compress: false,
20 |     port: 8080
21 |   },
22 |   plugins: [
23 |     new HtmlWebpackPlugin({
24 |       filename: path.resolve(__dirname, '../dist/dev/index.html'),
25 |       template: 'examples/index.html',
26 |       inject: true
27 |     })
28 |   ],
29 |   module: {
30 |     loaders: [{
31 |       test: /\.vue$/,
32 |       loader: 'vue-loader'
33 |     }, {
34 |       test: /\.js$/,
35 |       loaders: ['babel-loader', 'eslint-loader'],
36 |       exclude: /node_modules/
37 |     }, {
38 |       test: /\.css$/,
39 |       loader: 'style-loader!css-loader'
40 |     }, {
41 |       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
42 |       loader: 'url-loader',
43 |       query: {
44 |         limit: 10000,
45 |         name: 'img/[name].[hash:7].[ext]'
46 |       }
47 |     }, {
48 |       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
49 |       loader: 'url-loader',
50 |       query: {
51 |         limit: 10000,
52 |         name: 'fonts/[name].[hash:7].[ext]'
53 |       }
54 |     }]
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/build/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | 
 3 | module.exports = {
 4 |   entry: './src/index.js',
 5 |   devtool: 'source-map',
 6 |   resolve: {
 7 |     extensions: ['.js', '.vue', '.json']
 8 |   },
 9 |   output: {
10 |     path: path.resolve(__dirname, '../lib'),
11 |     filename: 'index.js',
12 |     libraryTarget: 'commonjs2'
13 |   },
14 |   module: {
15 |     loaders: [{
16 |       test: /\.vue$/,
17 |       loader: 'vue-loader'
18 |     }, {
19 |       test: /\.js$/,
20 |       loaders: ['babel-loader', 'eslint-loader'],
21 |       exclude: /node_modules/
22 |     }, {
23 |       test: /\.css$/,
24 |       loader: 'style-loader!css-loader'
25 |     }, {
26 |       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
27 |       loader: 'url-loader',
28 |       query: {
29 |         limit: 10000,
30 |         name: 'img/[name].[hash:7].[ext]'
31 |       }
32 |     }, {
33 |       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
34 |       loader: 'url-loader',
35 |       query: {
36 |         limit: 10000,
37 |         name: 'fonts/[name].[hash:7].[ext]'
38 |       }
39 |     }]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div style="height: 1000px; width: 200px; left: 100px; top: 200px; position: absolute;">
 3 |   <button @click="visible = true">click to open dialog</button>
 4 |   <hsy-dialog class="test" v-model="visible" :clickMask2Close="false">
 5 |     <div slot="title">Message</div>
 6 |     <div slot="body" style="width: 300px;">
 7 |       This is your message content.
 8 |     </div>
 9 |   </hsy-dialog>
10 | 
11 |   <button @click="visible1 = true">remove</button>
12 |   <hsy-dialog class="confirm" v-model="visible1">
13 |     <div slot="title">Remove</div>
14 |     <div slot="body" style="width: 200px;">
15 |       <div>This operation is irreversible, are you sure?</div>
16 |       <div class="btns">
17 |         <button class="yes" @click="handleYes">Yes</button>
18 |         <button class="no">No</button>
19 |       </div>
20 |     </div>
21 |   </hsy-dialog>
22 | </div>
23 | </template>
24 | 
25 | <script>
26 | import 'main'
27 | 
28 | export default {
29 |   data() {
30 |     return {
31 |       visible: false,
32 |       visible1: false
33 |     }
34 |   },
35 |   methods: {
36 |     handleYes() {
37 |       alert('Yes')
38 |       this.visible1 = false
39 |     }
40 |   }
41 | }
42 | </script>
43 | 
44 | <style>
45 | body {
46 |   margin: 0;
47 |   padding: 0;
48 | }
49 | 
50 | div.confirm button {
51 |   border: 0;
52 |   border-radius: 3px;
53 |   padding: 8px 10px;
54 |   cursor: pointer;
55 |   outline: none;
56 |   font-size: 13px;
57 | }
58 | 
59 | div.confirm .no {
60 |   color: #fff;
61 |   background-color: #f84f47;
62 | }
63 | 
64 | div.confirm .yes {
65 |   color: #fff;
66 |   background-color: #0097ff;
67 | }
68 | 
69 | div.confirm .btns {
70 |   overflow: hidden;
71 |   margin-top: 20px;
72 | }
73 | 
74 | div.confirm .btns .yes {
75 |   float: left;
76 | }
77 | 
78 | div.confirm .btns .no {
79 |   float: right;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>test</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 |   <!-- webpack builds are automatically injected -->
12 | </body>
13 | 
14 | </html>
15 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import Dialog from 'main'
 4 | 
 5 | Vue.use(Dialog)
 6 | 
 7 | new Vue({
 8 |   el: '#app',
 9 |   render: h => h(App)
10 | })
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hsy-vue-dialog",
 3 |   "version": "0.0.7",
 4 |   "description": "vue dialog component",
 5 |   "author": "hsiaosiyuan0 <hsiaosiyuan0@outlook.com>",
 6 |   "main": "lib/index.js",
 7 |   "scripts": {
 8 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config ./build/webpack.dev.config.js",
 9 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.prod.config.js",
10 |     "prepublish": "npm run build"
11 |   },
12 |   "devDependencies": {
13 |     "babel-core": "^6.21.0",
14 |     "babel-eslint": "^6.1.2",
15 |     "babel-loader": "^6.2.10",
16 |     "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
17 |     "babel-preset-es2015": "^6.22.0",
18 |     "babel-preset-es2017": "^6.16.0",
19 |     "cross-env": "^3.1.4",
20 |     "css-loader": "^0.23.0",
21 |     "eslint": "^3.12.2",
22 |     "eslint-loader": "^1.6.1",
23 |     "file-loader": "^0.8.4",
24 |     "html-webpack-plugin": "^2.28.0",
25 |     "json-loader": "^0.5.4",
26 |     "style-loader": "^0.13.1",
27 |     "url-loader": "^0.5.7",
28 |     "vue": "^2.1.10",
29 |     "vue-loader": "^10.3.0",
30 |     "vue-style-loader": "^2.0.0",
31 |     "vue-template-compiler": "^2.1.10",
32 |     "webpack": "^2.2.1",
33 |     "webpack-dev-server": "^2.3.0"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/Dialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="hsy-dialog">
  3 |   <div class="mask" :style="{backgroundColor: maskColor}" @click="maskClicked"></div>
  4 |   <div class="main">
  5 |     <div class="inner">
  6 |       <div class="title">
  7 |         <div class="content">
  8 |           <slot name="title"></slot>
  9 |         </div>
 10 |         <div class="btnClose" @click="hide" v-if="closeButton"></div>
 11 |       </div>
 12 |       <div class="body">
 13 |         <slot name="body"></slot>
 14 |       </div>
 15 |     </div>
 16 |   </div>
 17 | </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | const ANIME_EVENTS = ['webkitAnimationEnd', 'mozAnimationEnd', 'MSAnimationEnd', 'oanimationend', 'animationend']
 22 | 
 23 | export default {
 24 |   name: 'HsyDialog',
 25 | 
 26 |   data() {
 27 |     return {
 28 |       msg: 'hello vue-component!',
 29 |       width: '',
 30 |       height: '',
 31 |       parentOverflowX: '',
 32 |       parentOverflowY: '',
 33 |       isHidden: true
 34 |     }
 35 |   },
 36 |   props: {
 37 |     maskColor: {
 38 |       type: String,
 39 |       default: 'rgba(0, 0, 0, 0.3)'
 40 |     },
 41 |     closeButton: {
 42 |       type: Boolean,
 43 |       default: true
 44 |     },
 45 |     clickMask2Close: {
 46 |       type: Boolean,
 47 |       default: true
 48 |     },
 49 |     wholeWindow: {
 50 |       type: Boolean,
 51 |       default: true
 52 |     },
 53 |     value: {
 54 |       type: Boolean,
 55 |       default: false
 56 |     }
 57 |   },
 58 |   computed: {
 59 |     mainEl() {
 60 |       return this.$el.querySelector('.main')
 61 |     },
 62 |     parentEl() {
 63 |       let parent = this.$el.parentNode
 64 |       while (parent) {
 65 |         if (parent === document.body) {
 66 |           break
 67 |         }
 68 |         let style = window.getComputedStyle(parent)
 69 |         let position = style.getPropertyValue('position')
 70 |         if (position === 'relative' || position === 'absolute') {
 71 |           break
 72 |         }
 73 |         parent = parent.parentNode
 74 |       }
 75 |       return parent
 76 |     },
 77 |     parentSize: {
 78 |       cache: false,
 79 |       get() {
 80 |         if (this.wholeWindow) {
 81 |           let width = document.documentElement.clientWidth
 82 |           let height = document.documentElement.clientHeight
 83 |           return {
 84 |             width,
 85 |             height
 86 |           }
 87 |         }
 88 |         return this.parentEl.getBoundingClientRect()
 89 |       }
 90 |     }
 91 |   },
 92 |   watch: {
 93 |     value(val) {
 94 |       if (val) {
 95 |         this.show()
 96 |       } else {
 97 |         this.hide()
 98 |       }
 99 |     }
100 |   },
101 |   methods: {
102 |     rect(el) {
103 |       let rect = el.getBoundingClientRect()
104 |       if (rect.width !== 0 || rect.height !== 0) {
105 |         return rect
106 |       }
107 | 
108 |       let style = window.getComputedStyle(el)
109 |       let display = style.getPropertyValue('display')
110 |       let top = style.getPropertyValue('top')
111 |       let left = style.getPropertyValue('left')
112 | 
113 |       el.style.top = '-1000px'
114 |       el.style.left = '-1000px'
115 |       el.style.display = 'inline-block'
116 |       rect = el.getBoundingClientRect()
117 | 
118 |       el.style.display = display
119 |       el.style.top = top
120 |       el.style.left = left
121 | 
122 |       return rect
123 |     },
124 |     updateContainerSize() {
125 |       let size = this.parentSize
126 |       this.$el.style.width = size.width + 'px'
127 |       this.$el.style.height = size.height + 'px'
128 |       this.$el.style.top = window.scrollY + 'px'
129 |     },
130 |     updateMainSize() {
131 |       let mainEl = this.$el.querySelector('.main')
132 |       let mainElRect = this.rect(mainEl)
133 |       mainEl.style.width = mainElRect.width + 'px'
134 |       mainEl.style.left = '0px'
135 |       mainEl.style.right = '0px'
136 |     },
137 |     captureParentOverflow() {
138 |       let style = window.getComputedStyle(this.parentEl)
139 |       this.parentOverflowX = style.getPropertyValue('overflowX')
140 |       this.parentOverflowY = style.getPropertyValue('overflowY')
141 |     },
142 |     forceParentOverflow() {
143 |       this.parentEl.style.overflow = 'hidden'
144 |     },
145 |     resumeParentOverflow() {
146 |       this.parentEl.style.overflowX = this.parentOverflowX
147 |       this.parentEl.style.overflowY = this.parentOverflowY
148 |     },
149 |     addCssClass(el, cls) {
150 |       let clsList = el.className.split(' ')
151 |       if (clsList.indexOf(cls) === -1) {
152 |         clsList.push(cls)
153 |         el.className = clsList.join(' ')
154 |       }
155 |     },
156 |     removeCssClass(el, cls) {
157 |       let clsList = el.className.split(' ')
158 |       if (clsList.indexOf(cls) !== -1) {
159 |         el.className = clsList.filter((c) => {
160 |           return c !== cls
161 |         }).join(' ')
162 |       }
163 |     },
164 |     anime(el, cls) {
165 |       return new Promise((resolve) => {
166 |         ANIME_EVENTS.forEach((e) => {
167 |           el.addEventListener(e, () => {
168 |             this.removeCssClass(el, 'animated')
169 |             this.removeCssClass(el, cls)
170 |             resolve()
171 |           })
172 |           this.addCssClass(el, 'animated')
173 |           this.addCssClass(el, cls)
174 |         })
175 |       })
176 |     },
177 |     show() {
178 |       this.$el.style.display = 'block'
179 |       this.captureParentOverflow()
180 |       this.forceParentOverflow()
181 |       this.updateContainerSize()
182 |       this.updateMainSize()
183 |       this.anime(this.mainEl, 'fadeInDown')
184 | 
185 |       this.isHidden = false
186 |     },
187 |     hide() {
188 |       if (this.isHidden) return
189 |       this.anime(this.$el, 'fadeOut').then(() => {
190 |         this.$el.style.display = 'none'
191 |         this.resumeParentOverflow()
192 |         this.$emit('input', false)
193 |         this.isHidden = true
194 |       })
195 |     },
196 |     maskClicked() {
197 |       if (!this.clickMask2Close) return
198 |       this.hide()
199 |     }
200 |   },
201 |   mounted() {
202 |     if (this.wholeWindow) {
203 |       this.$el.parentNode.removeChild(this.$el)
204 |       document.body.appendChild(this.$el)
205 |     }
206 |   }
207 | }
208 | </script>
209 | 
210 | <style>
211 | .hsy-dialog {
212 |   display: none;
213 |   font: 10px "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
214 |   position: absolute;
215 |   top: 0;
216 |   left: 0;
217 | }
218 | 
219 | .hsy-dialog .mask {
220 |   width: 100%;
221 |   height: 100%;
222 | }
223 | 
224 | .hsy-dialog .main {
225 |   position: absolute;
226 |   margin: 0 auto;
227 |   top: 20%;
228 |   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
229 |   background: #fff;
230 |   border-radius: 3px;
231 |   font-size: 1.2em;
232 | }
233 | 
234 | .hsy-dialog .main>div {
235 |   margin: 0 auto;
236 |   padding: 20px;
237 | }
238 | 
239 | .hsy-dialog .main .title {
240 |   position: relative;
241 |   color: #0E3569;
242 |   height: 40px;
243 |   line-height: 40px;
244 |   overflow: hidden;
245 | }
246 | 
247 | .hsy-dialog .main .title .content>* {
248 |   width: 80%;
249 |   min-width: 85px;
250 |   white-space: nowrap;
251 |   overflow: hidden;
252 |   text-overflow: ellipsis;
253 | }
254 | 
255 | .hsy-dialog .main .title .content {
256 |   font-size: 1.8em;
257 |   min-height: 20px;
258 |   vertical-align: middle;
259 | }
260 | 
261 | .hsy-dialog .main .title .btnClose {
262 |   width: 20px;
263 |   height: 20px;
264 |   background: url('assets/images/close.svg') no-repeat center center;
265 |   float: right;
266 |   cursor: pointer;
267 |   position: absolute;
268 |   right: 0;
269 |   top: 50%;
270 |   transform: translate(0, -50%);
271 | }
272 | 
273 | .hsy-dialog .main .body {
274 |   max-width: 46vw;
275 |   color: #6A7288;
276 |   font-size: 1.2em;
277 |   border-top: 1px solid #eee;
278 |   margin-top: 5px;
279 |   padding-top: 15px;
280 | }
281 | 
282 | .hsy-dialog.animated,
283 | .hsy-dialog .animated {
284 |   animation-duration: 0.35s;
285 |   animation-fill-mode: both;
286 | }
287 | 
288 | @keyframes fadeInDown {
289 |   from {
290 |     opacity: 0;
291 |     -webkit-transform: translate3d(0, -30%, 0);
292 |     transform: translate3d(0, -30%, 0);
293 |   }
294 |   to {
295 |     opacity: 1;
296 |     -webkit-transform: none;
297 |     transform: none;
298 |   }
299 | }
300 | 
301 | .hsy-dialog.fadeInDown,
302 | .hsy-dialog .fadeInDown {
303 |   animation-name: fadeInDown;
304 | }
305 | 
306 | @keyframes fadeOut {
307 |   from {
308 |     opacity: 1;
309 |   }
310 |   to {
311 |     opacity: 0;
312 |   }
313 | }
314 | 
315 | .hsy-dialog.fadeOut,
316 | .hsy-dialog .fadeOut {
317 |   animation-name: fadeOut;
318 | }
319 | </style>
320 | 


--------------------------------------------------------------------------------
/src/assets/images/close.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <defs></defs>
 4 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 5 |         <g transform="translate(-861.000000, -169.000000)" fill="#7D869A">
 6 |             <g id="Group-7" transform="translate(538.000000, 122.000000)">
 7 |                 <g id="Group-9" transform="translate(314.000000, 38.000000)">
 8 |                     <path d="M15.8235294,15.8235294 L8.17642377,15.8235294 C7.53495169,15.8235294 7,16.3502532 7,17 C7,17.6542767 7.52670286,18.1764706 8.17642377,18.1764706 L15.8235294,18.1764706 L15.8235294,25.8235762 C15.8235294,26.4650483 16.3502532,27 17,27 C17.6542767,27 18.1764706,26.4732971 18.1764706,25.8235762 L18.1764706,18.1764706 L25.8235762,18.1764706 C26.4650483,18.1764706 27,17.6497468 27,17 C27,16.3457233 26.4732971,15.8235294 25.8235762,15.8235294 L18.1764706,15.8235294 L18.1764706,8.17642377 C18.1764706,7.53495169 17.6497468,7 17,7 C16.3457233,7 15.8235294,7.52670286 15.8235294,8.17642377 L15.8235294,15.8235294 Z" id="Combined-Shape" transform="translate(17.000000, 17.000000) rotate(-315.000000) translate(-17.000000, -17.000000) "></path>
 9 |                 </g>
10 |             </g>
11 |         </g>
12 |     </g>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Dialog from './Dialog'
 2 | 
 3 | const install = (Vue) => {
 4 |   Vue.component(Dialog.name, Dialog)
 5 | }
 6 | 
 7 | export default {
 8 |   version: '0.0.1',
 9 |   install
10 | }
11 | 


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