├── .browserslistrc
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── docs
    ├── zh-CN
    │   ├── browser-compatibility.md
    │   ├── README.md
    │   ├── params.md
    │   ├── quick-start.md
    │   └── examples.md
    ├── browser-compatibility.md
    ├── .vuepress
    │   ├── enhanceApp.js
    │   ├── styles
    │   │   └── index.styl
    │   ├── config.js
    │   └── public
    │   │   └── vue-directive-window.umd.min.js
    ├── README.md
    ├── quick-start.md
    ├── params.md
    └── examples.md
├── .prettierrc.js
├── src
    ├── config
    │   ├── constant.js
    │   └── default-params.js
    ├── main.js
    └── libs
    │   ├── validate.js
    │   ├── maximize.js
    │   ├── event-binding.js
    │   ├── move.js
    │   ├── common.js
    │   └── resize.js
├── dist
    ├── demo.html
    └── vue-directive-window.umd.min.js
├── babel.config.js
├── .gitignore
├── .eslintrc.js
├── script
    ├── deploy.sh
    ├── dist-copy.js
    └── file-watch.js
├── vue.config.js
├── LICENSE
├── test.html
├── package.json
├── README.zh-CN.md
└── README.md


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | not ie <= 8
3 | last 2 versions
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Array-Huang/vue-directive-window/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/docs/zh-CN/browser-compatibility.md:
--------------------------------------------------------------------------------
1 | # 浏览器兼容性
2 | | IE10 | IE11 | Chrome |
3 | | :---: | :---: | :---: |
4 | | OK | OK | OK |


--------------------------------------------------------------------------------
/docs/browser-compatibility.md:
--------------------------------------------------------------------------------
1 | # Browser Compatibility
2 | | IE10 | IE11 | Chrome |
3 | | :---: | :---: | :---: |
4 | | OK | OK | OK |


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   trailingComma: 'es5',
 3 |   tabWidth: 2,
 4 |   useTabs: false,
 5 |   semi: true,
 6 |   singleQuote: true,
 7 |   bracketSpacing: true,
 8 |   arrowParens: 'avoid',
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/config/constant.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   BORDER_SCOPE: 10, // resize区域的宽度
3 |   AVAILABLE_CLICK_MAX_MOVE_DISTANCE: 4, // 在move中，超出这个距离的话将把click事件吞掉
4 |   AVAILABLE_CLICK_MAX_RESIZE_DISTANCE: 4, // 在resize中，超出这个距离的话将把click事件吞掉
5 | };
6 | 


--------------------------------------------------------------------------------
/dist/demo.html:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8">
 2 | <title>vue-directive-window demo</title>
 3 | <script src="./vue-directive-window.umd.js"></script>
 4 | 
 5 | <link rel="stylesheet" href="./vue-directive-window.css">
 6 | 
 7 | 
 8 | <script>
 9 | console.log(vue-directive-window)
10 | </script>
11 | 


--------------------------------------------------------------------------------
/docs/.vuepress/enhanceApp.js:
--------------------------------------------------------------------------------
 1 | /* https://v1.vuepress.vuejs.org/zh/guide/basic-config.html#%E5%BA%94%E7%94%A8%E7%BA%A7%E5%88%AB%E7%9A%84%E9%85%8D%E7%BD%AE */
 2 | 
 3 | export default ({
 4 |   Vue, // VuePress 正在使用的 Vue 构造函数
 5 |   options, // 附加到根实例的一些选项
 6 |   router, // 当前应用的路由实例
 7 |   siteData, // 站点元数据
 8 | }) => {
 9 |   // ...做一些其他的应用级别的优化
10 | 
11 | };
12 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       '@vue/app',
 5 |       {
 6 |         // polyfills: ['es6.promise', 'es6.symbol', 'es7.object.entries'],
 7 |         // useBuiltIns: 'usage',
 8 |         targets: {
 9 |           browsers: ['> 1%', 'not ie < 9', 'last 2 versions'],
10 |         },
11 |       },
12 |     ],
13 |   ],
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | 
 4 | # local env files
 5 | .env.local
 6 | .env.*.local
 7 | 
 8 | # Log files
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | 
13 | # Editor directories and files
14 | .idea
15 | .vscode
16 | *.suo
17 | *.ntvs*
18 | *.njsproj
19 | *.sln
20 | *.sw?
21 | 
22 | dist.webpack.config.js
23 | docs/.vuepress/dist/
24 | *.hot-update.*


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: ['plugin:vue/essential', '@vue/prettier'],
 7 |   rules: {
 8 |     'no-console': 'off',
 9 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
10 |     'no-unused-vars': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
11 |   },
12 |   parserOptions: {
13 |     parser: 'babel-eslint',
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/docs/zh-CN/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | home: true
 3 | heroText: vue-directive-window
 4 | tagline: 让你的模态框轻而易举地支持类窗口操作
 5 | actionText: 快速上手 →
 6 | actionLink: /zh-CN/quick-start/
 7 | features:
 8 | - title: 节约成本
 9 |   details: 旨在以极少的改造成本，让一个现有的模态框或任何合适的HTMLElement轻松支持拖拽移动、调整大小、最大化等类视窗操作。
10 | - title: 使用便捷
11 |   details: 同时提供Vue自定义指令以及一般js类库两种调用方式。
12 | - title: 可插拔
13 |   details: 可以随时为某个系统里已存在的模块添上/去除类视窗操作的功能，而不会影响该模块原有的功能。
14 | footer: MIT Licensed | Copyright © 2019-present Array Huang
15 | ---


--------------------------------------------------------------------------------
/script/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # 确保脚本抛出遇到的错误
 4 | set -e
 5 | 
 6 | # 生成静态文件
 7 | vuepress build docs
 8 | 
 9 | # 进入生成的文件夹
10 | cd docs/.vuepress/dist
11 | 
12 | # 如果是发布到自定义域名
13 | # echo 'www.example.com' > CNAME
14 | 
15 | git init
16 | git add -A
17 | git commit -m 'deploy'
18 | 
19 | # 如果发布到 https://<USERNAME>.github.io
20 | # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
21 | 
22 | # 如果发布到 https://<USERNAME>.github.io/<REPO>
23 | git push -f git@github.com:Array-Huang/vue-directive-window.git master:gh-pages
24 | 
25 | cd -


--------------------------------------------------------------------------------
/docs/.vuepress/styles/index.styl:
--------------------------------------------------------------------------------
 1 | .window {
 2 |   z-index: 100;
 3 |   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 4 |   border-radius: 4px;
 5 |   border: 1px solid #ebeef5;
 6 |   background-color: #fff;
 7 |   overflow: hidden;
 8 |   color: #303133;
 9 | }
10 | 
11 | .window__header {
12 |   padding: 18px 20px;
13 |   border-bottom: 1px solid #ebeef5;
14 |   box-sizing: border-box;
15 | }
16 | 
17 | .window__body {
18 |   padding: 20px;
19 | }
20 | 
21 | /* 主题重置 */
22 | .content__default.theme-default-content {
23 |   max-width: none;
24 | }
25 | .page .page-edit, .page .page-nav {
26 |   max-width: none;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import 'core-js/es7/object';
 2 | import 'core-js/es6/symbol';
 3 | import { eventBinding } from './libs/event-binding';
 4 | /* vue-directive-window，提供Vue.use方式安装，安装后将可使用v-title这一自定义指令 */
 5 | function install(Vue) {
 6 |   Vue.directive('window', {
 7 |     bind(el, binding) {
 8 |       const customParams = binding.value; // 从指令绑定值取来参数
 9 |       eventBinding(el, customParams);
10 |     },
11 |   });
12 | }
13 | /* EnhancedWindow，提供普通函数的方式来调用  */
14 | function enhanceWindow(el, customParams) {
15 |   eventBinding(el, customParams);
16 | }
17 | 
18 | export default {
19 |   install,
20 |   enhanceWindow,
21 | };
22 | 


--------------------------------------------------------------------------------
/script/dist-copy.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const shell = require('shelljs');
 3 | const DIST_FILE_PATH = [
 4 |   path.resolve(__filename, '../../dist/vue-directive-window.umd.min.js'),
 5 | ];
 6 | const DIST_DIR = path.resolve(__filename, '../../docs/.vuepress/public');
 7 | 
 8 | function afterWebpackBuildCb() {
 9 |   for (let path of DIST_FILE_PATH) {
10 |     shell.cp('-f', path, DIST_DIR);
11 |     console.log(`${path} synced`);
12 |   }
13 | }
14 | 
15 | class AfterBuildCbPlugin {
16 |   apply(compiler) {
17 |     compiler.plugin('done', afterWebpackBuildCb);
18 |   }
19 | }
20 | 
21 | module.exports = AfterBuildCbPlugin;
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-directive-window</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-directive-window doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const AfterBuildCbPlugin = require('./script/dist-copy');
 3 | const pkg = require('./package.json');
 4 | 
 5 | const banner = `
 6 | ${pkg.name}
 7 | ${pkg.description}\n
 8 | @version v${pkg.version}
 9 | @homepage ${pkg.homepage}
10 | @repository ${pkg.repository.url}\n
11 | (c) 2019 Array-Huang
12 | Released under the MIT License.
13 | hash: [hash]
14 | `;
15 | 
16 | module.exports = {
17 |   chainWebpack: config => {
18 |     config.output.libraryExport('default');
19 |     config.plugin('banner').use(webpack.BannerPlugin, [
20 |       {
21 |         banner,
22 |         entryOnly: true,
23 |       },
24 |     ]);
25 |     config.plugin('after-build').use(AfterBuildCbPlugin);
26 |   },
27 | };
28 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | home: true
 3 | heroText: vue-directive-window
 4 | tagline: Vue.js directive that enhance your Modal Window, support drag, resize and maximize.
 5 | actionText: Quick Start →
 6 | actionLink: /quick-start/
 7 | features:
 8 | - title: Cost Saving
 9 |   details: Born to enhance your existed Modal Window or any other approprite HTMLElement, support drag, resize and miximize, with minimum cost.
10 | - title: Easy to Use
11 |   details: We provide two ways to use, Vue Custom Directive, and general javascript class library.
12 | - title: Pluggable
13 |   details: Annytime to add or remove Window-Like enhancement to any existed module in your system, without any negative impact.
14 | footer: MIT Licensed | Copyright © 2019-present Array Huang
15 | ---


--------------------------------------------------------------------------------
/src/config/default-params.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   minWidth: 100, // resize最小宽度
 3 |   maxWidth: null, // resize最大宽度
 4 |   minHeight: 100, // resize最小高度
 5 |   maxHeight: null, // resize最大高度
 6 |   movable: true, // 是否开启拖拽移动功能，默认开启
 7 |   resizable: true, // 是否开启resize功能，true表示开启，false表示关闭；另外还可接受数组类型参数，指定在哪些方向上开启resize，包括：left-top/left-bottom/left/right-top/right-bottom/right/top/bottom
 8 |   customMoveHandler: null, // 自定义的拖拽移动handler，可接受选择器形式的参数，或是Element；为空则以窗口自身为handler
 9 |   customMaximizeHandler: null, // 自定义的最大化handler，可接受选择器形式的参数，或是Element；为空则不开启最大化的功能
10 |   maximizeCallback: () => {}, // 最大化后的回调函数
11 |   moveStartCallback: () => {}, // 拖拽移动开始的回调函数
12 |   movingCallback: () => {}, // 拖拽移动过程中的回调函数，在每次拖拽过程中会被执行多次
13 |   moveEndCallback: () => {}, // 拖拽移动结束的回调函数
14 | };
15 | 


--------------------------------------------------------------------------------
/script/file-watch.js:
--------------------------------------------------------------------------------
 1 | const chokidar = require('chokidar');
 2 | const path = require('path');
 3 | const shell = require('shelljs');
 4 | 
 5 | const WATCH_PATH = [
 6 |   path.resolve(__filename, '../../dist/vue-directive-window.umd.min.js'),
 7 |   path.resolve(__filename, '../../dist/vue-directive-window.umd.min.js.map'),
 8 | ];
 9 | const DIST_DIR = path.resolve(__filename, '../../docs/.vuepress/public');
10 | 
11 | function changeCb(path) {
12 |   shell.cp('-f', path, DIST_DIR);
13 |   console.log(`${path} changed, file synced`);
14 | }
15 | const watcher = chokidar.watch(WATCH_PATH, {
16 |   persistent: true,
17 |   interval: 500,
18 | });
19 | 
20 | watcher
21 |   .on('ready', () => {
22 |     console.log('ready for dist change');
23 |   })
24 |   .on('add', changeCb)
25 |   .on('change', changeCb);
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 George Raptis
 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 | 


--------------------------------------------------------------------------------
/docs/zh-CN/params.md:
--------------------------------------------------------------------------------
 1 | # 参数
 2 | 
 3 | ## minWidth
 4 | - 类型: `Number`
 5 | - 默认值: `100`
 6 | - 说明: 窗口可被调整至的最小宽度(px)
 7 | 
 8 | ## maxWidth
 9 | - 类型: `Number`
10 | - 说明: 窗口可被调整至的最大宽度(px)
11 | 
12 | ## minHeight
13 | - 类型: `Number`
14 | - 默认值: `100`
15 | - 说明: 窗口可被调整至的最小高度(px)
16 | 
17 | ## maxHeight
18 | - 类型: `Number`
19 | - 说明: 窗口可被调整至的最大高度(px)
20 | 
21 | ## movable
22 | - 类型: `Boolean`/`String`
23 | - 默认值: `true`
24 | - 可选值：`true`/`false`/`'horizontal'`/`'vertical'`
25 | - 说明: 是否开启拖拽移动功能；`'horizontal'`表示只允许水平方向的拖拽移动，`'vertical'`表示只允许垂直方向的拖拽移动，`true`表示水平垂直方向的拖拽移动均被允可。
26 | 
27 | ## resizable
28 | - 类型: `Boolean`/`Array`
29 | - 默认值: `true`
30 | - 可选值: `left-top`/`left-bottom`/`left`/`right-top`/`right-bottom`/`right`/`top`/`bottom`
31 | - 说明: 是否开启调整窗口尺寸的功能。参数为`true`表示八个方向均可调整窗口尺寸；但如果传入的是字符串数组，如`['left', 'left-top']`，则只有参数指定的方向可以调整窗口尺寸；各个方向的标识如“可选值”列里所示。
32 | 
33 | ## customMoveHandler
34 | - 类型: `String`/`Element`
35 | - 说明: 自定义的拖拽移动handler。如果传入字符串类型参数，系统则将采用`document.querySelector(customMoveHandler)`来获取handler。
36 | 
37 | ## customMaximizeHandler
38 | - 类型: `String`/`Element`
39 | - 说明: 自定义的最大化handler。如果传入字符串类型参数，系统则将采用`document.querySelector(customMoveHandler)`来获取handler。
40 | 
41 | ## maximizeCallback
42 | - 类型: `Function`
43 | - 说明: 窗口最大化的回调函数。回调参数为：当前是否最大化(Boolean)。
44 | 
45 | ## moveStartCallback
46 | - 类型: `Function`
47 | - 说明: 拖拽移动开始时触发。
48 | 
49 | ## movingCallback
50 | - 类型: `Function`
51 | - 说明: 拖拽移动过程中会多次触发。
52 | 
53 | ## moveEndCallback
54 | - 类型: `Function`
55 | - 说明: 拖拽移动结束时触发。


--------------------------------------------------------------------------------
/docs/zh-CN/quick-start.md:
--------------------------------------------------------------------------------
 1 | # 快速上手
 2 | 
 3 | ::: warning 
 4 | 注意 请确保你的 Node.js 版本 >= 8。 
 5 | :::
 6 | 
 7 | ## 引入vue-directive-window
 8 | `vue-directive-window`支持静态文件及npm两种方式引入。
 9 | 
10 | ### 静态文件方式引入
11 | ```html
12 | <script src="https://unpkg.com/vue-directive-window/dist/vue-directive-window.umd.min.js"></script>
13 | ```
14 | 
15 | ### npm方式引入
16 | ```bash
17 | npm install vue-directive-window
18 | ```
19 | 
20 | ## 开始使用
21 | `vue-directive-window`支持Vue自定义指令及一般js类两种方式来使用。
22 | 
23 | ### Vue自定义指令
24 | ```vue
25 | <template>
26 |   <div v-window="windowParams">
27 |     <!-- 容器内容 -->
28 |   </div>
29 | </template>
30 | <script>
31 | import VueDirectiveWindow from 'vue-directive-window';
32 | Vue.use(VueDirectiveWindow); // 如果是以静态文件方式引入的话，则不需要 import，直接使用Vue.use(window['vue-directive-window'])
33 | export default {
34 |   data() {
35 |     return {
36 |       windowParams: {
37 |         movable: false,
38 |         resizable: ['left', 'left-top'],
39 |       },
40 |     };
41 |   },
42 | }
43 | </script>
44 | ```
45 | 
46 | ### 一般js类
47 | ```html
48 | <div class="demo-window" v-window="windowParams">
49 |   <!-- 容器内容 -->
50 | </div>
51 | ```
52 | 
53 | ```javascript
54 | import { enhanceWindow } from 'vue-directive-window'; // 如果是以静态文件方式引入的话,则是const enhanceWindow = window['vue-directive-window'].enhanceWindow;
55 | 
56 | const windowParams = {
57 |   movable: false
58 |   resizable: ['left', 'left-top']
59 | };
60 | 
61 | enhanceWindow(document.querySelector('.demo-window'), windowParams);
62 | ```
63 | 
64 | ## 结语
65 | 到此,您已引入`vue-directive-window`并可以简单使用了，想要了解更多请参考[使用案例](/examples.md)和[参数](/params.md)章节。
66 | 


--------------------------------------------------------------------------------
/src/libs/validate.js:
--------------------------------------------------------------------------------
 1 | import Schema from 'micro-schema-validator';
 2 | const RULES = {
 3 |   windowSelector: {
 4 |     type: 'string',
 5 |     required: false,
 6 |   },
 7 |   minWidth: {
 8 |     type: 'number',
 9 |     size: { min: 1 },
10 |   },
11 |   maxWidth: {
12 |     type: 'number',
13 |   },
14 |   minHeight: {
15 |     type: 'number',
16 |     size: { min: 1 },
17 |   },
18 |   maxHeight: {
19 |     type: 'number',
20 |   },
21 |   resizeHandlerClassName: {
22 |     type: 'string',
23 |   },
24 |   customMoveHandler: {
25 |     type: 'string',
26 |   },
27 |   customMaximizeHandler: {
28 |     type: 'string',
29 |   },
30 |   movable: {
31 |     type: 'boolean|string',
32 |     required: false,
33 |   },
34 |   resizable: {
35 |     type: 'boolean|string',
36 |     required: false,
37 |   },
38 |   maximizeCallback: {
39 |     type: 'function',
40 |   },
41 |   moveStartCallback: {
42 |     type: 'function',
43 |     required: false,
44 |   },
45 |   movingCallback: {
46 |     type: 'function',
47 |     required: false,
48 |   },
49 |   moveEndCallback: {
50 |     type: 'function',
51 |     required: false,
52 |   },
53 | };
54 | export function validate(customParams = {}) {
55 |   const schema = new Schema(RULES);
56 |   const validateResult = schema.validate(customParams);
57 |   if (validateResult.status) {
58 |     return;
59 |   } else {
60 |     console.warn(
61 |       'There are some mistakes in your params to vue-directive-window, please fix them. Otherwise, it will act not like what you expected.'
62 |     );
63 |     if (Array.isArray(validateResult.errors)) {
64 |       validateResult.errors.forEach(error => {
65 |         console.warn(error.msg);
66 |         /* 参数有误则立刻抛出异常 */
67 |         throw 'Params validation failed, so vue-directive-window stopped.';
68 |       });
69 |     }
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>vue-directive-window demo</title>
 6 |     <script src="./dist/vue-directive-window.umd.js"></script>
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 9 |     <style>
10 |       .window {
11 |         z-index: 100;
12 |         box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
13 |         border-radius: 4px;
14 |         border: 1px solid #ebeef5;
15 |         background-color: #fff;
16 |         overflow: hidden;
17 |         color: #303133;
18 |       }
19 | 
20 |       .window__header {
21 |         padding: 18px 20px;
22 |         border-bottom: 1px solid #ebeef5;
23 |         box-sizing: border-box;
24 |       }
25 | 
26 |       .window__body {
27 |         padding: 20px;
28 |       }
29 |       .container {
30 |         padding: 30px;
31 |       }
32 |       .window2 {
33 |         width: 200px;
34 |         position: fixed;
35 |         top: 0;
36 |         bottom: 0;
37 |         right: 10px;
38 |       }
39 |     </style>
40 |   </head>
41 |   <body>
42 |     <div class="window window2 window--by-function">
43 |       <div class="window__header">
44 |         函数方式生成的窗口
45 |       </div>
46 |       <div class="window__body">
47 |         <p>窗口内容1</p>
48 |         <p>窗口内容2</p>
49 |         <p>窗口内容3</p>
50 |       </div>
51 |     </div>
52 |     <script>
53 |       function enhanceWindow() {
54 |         var windowParams = {
55 |           windowSelector: '.window--by-function',
56 |           minWidth: 10,
57 |           minHeight: 100,
58 |           // customMoveHandler: '.window__header',
59 |         };
60 |         window['vue-directive-window'].enhanceWindow(
61 |           document.body,
62 |           windowParams
63 |         );
64 |       }
65 | 
66 |       enhanceWindow();
67 |     </script>
68 |   </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   base: '/vue-directive-window/',
 3 |   head: [
 4 |     ['script', { src: '/vendor/vue.min.js' }],
 5 |     [
 6 |       'script',
 7 |       { src: '/vue-directive-window.umd.min.js' },
 8 |     ],
 9 |   ],
10 |   locales: {
11 |     // 键名是该语言所属的子路径
12 |     // 作为特例，默认语言可以使用 '/' 作为其路径。
13 |     '/': {
14 |       lang: 'en-US', // 将会被设置为 <html> 的 lang 属性
15 |       title: 'vue-directive-window',
16 |       description:
17 |         'Vue.js directive that enhance your Modal Window, support drag, resize and maximize.',
18 |     },
19 |     '/zh-CN/': {
20 |       lang: 'zh-CN',
21 |       title: 'vue-directive-window',
22 |       description: '让你的模态框轻而易举地支持类窗口操作',
23 |     },
24 |   },
25 |   themeConfig: {
26 |     /* 导航栏链接 */
27 |     nav: [
28 |       {
29 |         text: 'Github',
30 |         link: 'https://github.com/Array-Huang/vue-directive-window',
31 |       },
32 |       {
33 |         text: 'npm',
34 |         link: 'https://www.npmjs.com/package/vue-directive-window',
35 |       },
36 |     ],
37 |     /* 侧边栏 */
38 |     sidebarDepth: 2,
39 |     /* 最后更新时间 */
40 |     lastUpdated: 'Last Updated',
41 |     /* 活动的标题链接 */
42 |     activeHeaderLinks: true, // 默认值：true
43 |     /* 多语言 */
44 |     locales: {
45 |       '/': {
46 |         selectText: 'Languages',
47 |         label: 'English',
48 |         sidebar: ['quick-start', 'browser-compatibility', 'examples', 'params'],
49 |       },
50 |       '/zh-CN/': {
51 |         selectText: 'Languages',
52 |         label: '简体中文',
53 |         /* 侧边栏 */
54 |         sidebar: {
55 |           '/zh-CN/': [
56 |             'quick-start',
57 |             'browser-compatibility',
58 |             'examples',
59 |             'params',
60 |           ],
61 |         },
62 |       },
63 |     },
64 |   },
65 |   chainWebpack(config, isServer) {
66 |     config.resolve.alias.set('@pwd', process.cwd()); // process.cwd() 是当前执行node命令时候的文件夹地址 ——工作目录，保证了文件在不同的目录下执行时，路径始终不变
67 |   },
68 |   plugins: ['demo-block'],
69 | };
70 | 


--------------------------------------------------------------------------------
/docs/quick-start.md:
--------------------------------------------------------------------------------
 1 | # Quick Start
 2 | 
 3 | ::: warning 
 4 | Please make sure your Node.js version >= 8.
 5 | :::
 6 | 
 7 | ## Installation
 8 | There are two ways of installation, from CDN and from npm, you can choose which you like.
 9 | 
10 | ### CDN
11 | ```html
12 | <script src="https://unpkg.com/vue-directive-window/dist/vue-directive-window.umd.min.js"></script>
13 | ```
14 | 
15 | ### npm
16 | ```bash
17 | npm install vue-directive-window
18 | ```
19 | 
20 | ## Hello World
21 | `vue-directive-window` provides two ways to use:
22 | - Vue Custom Directive
23 | - general javascript class library
24 | 
25 | ### Vue Custom Directive
26 | ```vue
27 | <template>
28 |   <div v-window="windowParams">
29 |     <!-- container content -->
30 |   </div>
31 | </template>
32 | <script>
33 | import VueDirectiveWindow from 'vue-directive-window';
34 | Vue.use(VueDirectiveWindow); // When you take the CDN way, you don't need to import anything; you may use `Vue.use(window['vue-directive-window'])` instead.
35 | export default {
36 |   data() {
37 |     return {
38 |       windowParams: {
39 |         movable: false,
40 |         resizable: ['left', 'left-top'],
41 |       },
42 |     };
43 |   },
44 | }
45 | </script>
46 | ```
47 | 
48 | ### Javascript Class Library
49 | ```html
50 | <div class="demo-window" v-window="windowParams">
51 |   <!-- container content -->
52 | </div>
53 | ```
54 | 
55 | ```javascript
56 | import { enhanceWindow } from 'vue-directive-window'; // When you take the CDN way, you may use `const enhanceWindow = window['vue-directive-window'].enhanceWindow;` instead.
57 | 
58 | const windowParams = {
59 |   movable: false
60 |   resizable: ['left', 'left-top']
61 | };
62 | 
63 | enhanceWindow(document.querySelector('.demo-window'), windowParams);
64 | ```
65 | 
66 | ## Ready for More?
67 | At this point, you already install `vue-directive-window` and create a Hello World case. If you are interested in `vue-directive-window` and want to know more about it, you may refer to chapter [examples](/examples.md) and [params](/params.md).
68 | 


--------------------------------------------------------------------------------
/src/libs/maximize.js:
--------------------------------------------------------------------------------
 1 | import { getPositionOffset, getSize } from './common';
 2 | /**
 3 |  * 添加窗口最大化的事件
 4 |  *
 5 |  * @export
 6 |  * @param {Element} handler
 7 |  */
 8 | export function addMaximizeEvent(handler) {
 9 |   const target = this.window;
10 |   const params = this.params;
11 |   let positionOffset; // 记录最大化前的位置偏移(top/left)
12 |   let size; // 记录最大化前的大小(width/height)
13 |   let position; // 记录最大化前的position值
14 |   let isMaximize = false; // 记录当前是否为最大化的状态，方便判定切换状态
15 |   /* 设置位置偏移值 */
16 |   function _setPositionOffset(left, top, right, bottom) {
17 |     if (typeof left === 'number') {
18 |       target.style.left = left + 'px';
19 |     }
20 |     if (typeof top === 'number') {
21 |       target.style.top = top + 'px';
22 |     }
23 |     if (typeof right === 'number') {
24 |       target.style.right = right + 'px';
25 |     }
26 |     if (typeof bottom === 'number') {
27 |       target.style.bottom = bottom + 'px';
28 |     }
29 |   }
30 |   /* 设置大小 */
31 |   function _setSize(width, height) {
32 |     target.style.width = width;
33 |     target.style.height = height;
34 |   }
35 |   /* 最大化窗口，其原理是取浏览器窗口的宽高来设置在窗口上 */
36 |   function _setTargetMaximize() {
37 |     _setPositionOffset(0, 0, 0, 0);
38 |     _setSize('auto', 'auto');
39 |   }
40 | 
41 |   /* 在最大化的handler绑定click事件回调 */
42 |   handler.addEventListener('click', event => {
43 |     if (!isMaximize) {
44 |       positionOffset = getPositionOffset(target); // 记录最大化前的位置偏移
45 |       size = getSize(target); // 记录最大化前的窗口大小
46 | 
47 |       _setTargetMaximize(); // 最大化窗口
48 |       isMaximize = true;
49 |     } else {
50 |       // 如果当前是最大化状态...
51 |       target.style.position = position;
52 |       _setPositionOffset(positionOffset.x, positionOffset.y);
53 |       _setSize(size.width, size.height);
54 |       window.removeEventListener('resize', _setTargetMaximize);
55 |       isMaximize = false;
56 |     }
57 | 
58 |     if (
59 |       !!params.maximizeCallback &&
60 |       typeof params.maximizeCallback === 'function'
61 |     ) {
62 |       params.maximizeCallback(isMaximize);
63 |     }
64 | 
65 |     event.stopPropagation();
66 |   });
67 | }
68 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-directive-window",
 3 |   "version": "0.8.0",
 4 |   "description": "Vue.js directive that enhance your Modal Window, support drag, resize and maximize.",
 5 |   "author": "Array Huang",
 6 |   "license": "MIT",
 7 |   "files": [
 8 |     "src/",
 9 |     "dist/"
10 |   ],
11 |   "homepage": "https://github.com/Array-Huang/vue-directive-window",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/Array-Huang/vue-directive-window.git",
15 |     "bugs": {
16 |       "url": "https://github.com/Array-Huang/vue-directive-window/issues"
17 |     }
18 |   },
19 |   "keywords": [
20 |     "vue",
21 |     "directive",
22 |     "resize",
23 |     "drag",
24 |     "maximize"
25 |   ],
26 |   "private": false,
27 |   "main": "./dist/vue-directive-window.common.js",
28 |   "scripts": {
29 |     "build": "vue-cli-service build --target lib --name vue-directive-window ./src/main.js",
30 |     "watch": "vue-cli-service build --target lib --name vue-directive-window ./src/main.js --watch",
31 |     "lint": "vue-cli-service lint",
32 |     "inspect": "vue inspect > dist.webpack.config.js",
33 |     "start": "npm run docs:dev",
34 |     "docs:dev": "vuepress dev docs",
35 |     "docs:deploy": "sh script/deploy.sh",
36 |     "npm:deploy": "npm version patch && git push --follow-tags && npm publish"
37 |   },
38 |   "dependencies": {
39 |     "core-js": "^2.6.11",
40 |     "current-script-polyfill": "^1.0.0",
41 |     "micro-schema-validator": "^0.1.2",
42 |     "validate": "^4.5.1",
43 |     "vue": "^2.6.11",
44 |     "vue-router": "^3.0.7",
45 |     "vuex": "^3.1.2"
46 |   },
47 |   "devDependencies": {
48 |     "@vue/cli-plugin-babel": "^3.12.1",
49 |     "@vue/cli-plugin-eslint": "^3.12.1",
50 |     "@vue/cli-service": "^3.12.1",
51 |     "@vue/eslint-config-prettier": "^4.0.1",
52 |     "babel-eslint": "^10.0.2",
53 |     "cz-conventional-changelog": "^3.0.2",
54 |     "eslint": "^5.16.0",
55 |     "eslint-plugin-vue": "^5.2.3",
56 |     "shelljs": "^0.8.3",
57 |     "stylus": "^0.54.5",
58 |     "stylus-loader": "^3.0.2",
59 |     "vue-template-compiler": "^2.6.11",
60 |     "vuepress": "^1.2.0",
61 |     "vuepress-plugin-demo-block": "^0.7.2"
62 |   },
63 |   "config": {
64 |     "commitizen": {
65 |       "path": "./node_modules/cz-conventional-changelog"
66 |     }
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/docs/params.md:
--------------------------------------------------------------------------------
 1 | # Parameters
 2 | 
 3 | ## minWidth
 4 | - Type: `Number`
 5 | - Default: `100`
 6 | - Description: window's minimum width(px)
 7 | 
 8 | ## maxWidth
 9 | - Type: `Number`
10 | - Description: window's maximum width(px)
11 | 
12 | ## minHeight
13 | - Type: `Number`
14 | - Default: `100`
15 | - Description: window's minimum height(px)
16 | 
17 | ## maxHeight
18 | - Type: `Number`
19 | - Description: window's maximum height(px)
20 | 
21 | ## movable
22 | - Type: `Boolean`/`String`
23 | - Default: `true`
24 | - Accepted Values：`true`/`false`/`'horizontal'`/`'vertical'`
25 | - Description: Is drag feature available; when set `movable` to `'vertical'`, users will be only allow to make vertical drag; for the same reason, `'horizontal'` means only allow horizontal drag; when set `true`, both directions are available.
26 | 
27 | ## resizable
28 | - Type: `Boolean`/`Array`
29 | - Default: `true`
30 | - Accepted Values: `left-top`/`left-bottom`/`left`/`right-top`/`right-bottom`/`right`/`top`/`bottom`
31 | - Description: is resize feature available; when it is `true`, it means you could resize the window from every eight directions; when it is an Array value which contain String value, like `['left', 'left-top']` you could resize the window only from targeted directions.
32 | 
33 | ## customMoveHandler
34 | - Type: `String`/`Element`
35 | - Description: custom drag handler. When it is `null`, you could move the window by dragging every inch of this window. Otherwise, when it is a String value, `vue-directive-window` will use `document.querySelector(customMoveHandler)` to get the handler's Element; in that case, you could move the window only by dragging the handler.
36 | 
37 | ## customMaximizeHandler
38 | - Type: `String`/`Element`
39 | - Description: maximize feature's handler. When it is a String value, `vue-directive-window` will use `document.querySelector(customMoveHandler)` to get the handler.
40 | 
41 | ## maximizeCallback
42 | - Type: `Function`
43 | - Description: window maximizeCallback function; there is one parameter, which means if it is current maximize(Boolean).
44 | 
45 | ## moveStartCallback
46 | - Type: `Function`
47 | - Description: triggers when drag&move start.
48 | 
49 | ## movingCallback
50 | - Type: `Function`
51 | - Description: triggers multiple times during drag&move going.
52 | 
53 | ## moveEndCallback
54 | - Type: `Function`
55 | - Description: triggers when drag&move end.


--------------------------------------------------------------------------------
/src/libs/event-binding.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   startEvent,
  3 |   moveEvent,
  4 |   endEvent,
  5 |   ignoreIframe,
  6 |   recoverIframe,
  7 | } from './common';
  8 | import { handleStartEventForResize, cursorChange } from './resize';
  9 | import { handleStartEventForMove } from './move';
 10 | import { addMaximizeEvent } from './maximize';
 11 | import { validate } from './validate';
 12 | import DEFAULT_PARAMS from '../config/default-params';
 13 | 
 14 | function _prepareParams(customParams) {
 15 |   validate(customParams);
 16 |   return Object.assign({}, DEFAULT_PARAMS, customParams);
 17 | }
 18 | 
 19 | function getMoveHandler(finalParams, el) {
 20 |   const customMoveHandler = finalParams.customMoveHandler;
 21 |   if (customMoveHandler) {
 22 |     if (typeof customMoveHandler === 'string') {
 23 |       return el.querySelector(customMoveHandler);
 24 |     } else {
 25 |       return customMoveHandler;
 26 |     }
 27 |   } else {
 28 |     return el;
 29 |   }
 30 | }
 31 | 
 32 | function getMaximizeHandler(finalParams, el) {
 33 |   const customMaximizeHandler = finalParams.customMaximizeHandler;
 34 |   if (customMaximizeHandler) {
 35 |     if (typeof customMaximizeHandler === 'string') {
 36 |       return el.querySelector(customMaximizeHandler);
 37 |     } else {
 38 |       return customMaximizeHandler;
 39 |     }
 40 |   }
 41 | 
 42 |   return null;
 43 | }
 44 | 
 45 | function isMoveHandlerEqualWindow(window, moveHandler) {
 46 |   return window === moveHandler;
 47 | }
 48 | 
 49 | export function eventBinding(el, customParams) {
 50 |   /* 传入参数校验，参数有误则立刻停止执行 */
 51 |   try {
 52 |     var finalParams = _prepareParams(customParams);
 53 |   } catch (exception) {
 54 |     console.warn(exception);
 55 |     return;
 56 |   }
 57 | 
 58 |   el = finalParams.windowSelector
 59 |     ? el.querySelector(finalParams.windowSelector)
 60 |     : el;
 61 |   const moveHandler = getMoveHandler(finalParams, el);
 62 |   const maximizeHandler = getMaximizeHandler(finalParams, el);
 63 |   const instance = {
 64 |     window: el,
 65 |     params: finalParams,
 66 |     moveHandler,
 67 |     maximizeHandler,
 68 |     isMoveHandlerEqualWindow: isMoveHandlerEqualWindow(el, moveHandler),
 69 |   };
 70 | 
 71 |   /* 一些杂项的处理 */
 72 |   el.addEventListener(startEvent, () => {
 73 |     ignoreIframe(el); // 由于iframe会把moveEvent吃掉，因此需要忽略掉iframe;
 74 |     el.addEventListener(
 75 |       endEvent,
 76 |       () => {
 77 |         recoverIframe(el); // 恢复iframe的功能
 78 |       },
 79 |       { once: true }
 80 |     );
 81 |   });
 82 | 
 83 |   /* 拖拽移动相关 */
 84 |   if (finalParams.movable) {
 85 |     moveHandler.addEventListener(
 86 |       startEvent,
 87 |       handleStartEventForMove.bind(instance)
 88 |     );
 89 | 
 90 |     /* 当处在moving状态的时候，吞掉click事件 */
 91 |     moveHandler.addEventListener('click', event => {
 92 |       if (moveHandler.className.indexOf('moving') > -1) {
 93 |         event.stopImmediatePropagation();
 94 |       }
 95 |     });
 96 |   }
 97 | 
 98 |   /* resize相关 */
 99 |   if (finalParams.resizable) {
100 |     el.addEventListener(startEvent, handleStartEventForResize.bind(instance));
101 |     el.addEventListener(moveEvent, cursorChange.bind(instance));
102 |   }
103 | 
104 |   /* 最大化相关 */
105 |   if (maximizeHandler) {
106 |     addMaximizeEvent.call(instance, maximizeHandler);
107 |   }
108 | 
109 |   /* 当处在resizing/moving状态的时候，吞掉click事件 */
110 |   el.addEventListener('click', event => {
111 |     if (
112 |       el.className.indexOf('moving') > -1 ||
113 |       el.className.indexOf('resizing') > -1
114 |     ) {
115 |       event.stopImmediatePropagation();
116 |     }
117 |   });
118 | }
119 | 


--------------------------------------------------------------------------------
/src/libs/move.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   moveEvent,
  3 |   endEvent,
  4 |   getPositionOffset,
  5 |   getClientPosition,
  6 |   isOutOfBrowser,
  7 |   judgeResizeType,
  8 |   getSize,
  9 |   setSize,
 10 |   calDistance,
 11 | } from './common';
 12 | import constant from '../config/constant';
 13 | 
 14 | /**
 15 |  * 计算拖拽移动过程中窗口的位置，在移动过程中每一小段就会触发本方法
 16 |  *
 17 |  * @param {Object} touchStartPoint 鼠标/手势起始点
 18 |  * @param {Object} touchEndPoint 鼠标/手势当前点
 19 |  * @param {Object} windowOriginPosition 窗口在拖拽移动前的位置
 20 |  * @param {Object} movable 用户传入的拖拽移动开关/类型
 21 |  */
 22 | function _calWindowCurrentPosition(
 23 |   touchStartPoint,
 24 |   touchEndPoint,
 25 |   windowOriginPosition,
 26 |   movableParam
 27 | ) {
 28 |   const supposePosition = {
 29 |     x: touchEndPoint.x - touchStartPoint.x + windowOriginPosition.x,
 30 |     y: touchEndPoint.y - touchStartPoint.y + windowOriginPosition.y,
 31 |   };
 32 | 
 33 |   switch (movableParam) {
 34 |     case 'horizontal':
 35 |       return {
 36 |         x: supposePosition.x,
 37 |         y: windowOriginPosition.y,
 38 |       };
 39 | 
 40 |     case 'vertical':
 41 |       return {
 42 |         x: windowOriginPosition.x,
 43 |         y: supposePosition.y,
 44 |       };
 45 | 
 46 |     case true:
 47 |     default:
 48 |       return supposePosition;
 49 |   }
 50 | }
 51 | 
 52 | export function handleStartEventForMove(event) {
 53 |   function _handleEndEventForMove(event) {
 54 |     /* 提供拖拽移动结束的钩子 */
 55 |     moveEndCallback();
 56 |     nowInMoving = false;
 57 | 
 58 |     document.removeEventListener(moveEvent, _handleMoveEventForMove, false); // 拖拽结束，清除移动的事件回调
 59 | 
 60 |     event.preventDefault();
 61 | 
 62 |     /* 撤销moving状态，但由于此状态值主要用于吞掉click事件，因此使用setTimeout延长moving状态至click事件结束 */
 63 |     setTimeout(() => {
 64 |       window.className = window.className.replace(/ ?moving/, '');
 65 |     }, 0);
 66 |   }
 67 | 
 68 |   function _handleMoveEventForMove(event) {
 69 |     /* 判断鼠标是否已出浏览器窗口，是的话就限制移动，避免整个window出浏览器窗口 */
 70 |     if (isOutOfBrowser(event)) {
 71 |       return false;
 72 |     }
 73 | 
 74 |     const position = getClientPosition(event); // 获取鼠标/手指的位置
 75 |     /* 计算位置偏移值 */
 76 |     const positionOffset = _calWindowCurrentPosition(
 77 |       startPoint,
 78 |       position,
 79 |       originPositionOffset,
 80 |       movableParam
 81 |     );
 82 | 
 83 |     window.style.top = positionOffset.y + 'px'; // 设置纵坐标，即top
 84 |     window.style.left = positionOffset.x + 'px'; // 设置横坐标，left
 85 |     window.style.bottom = 'auto'; // 必须设置为auto，否则就会把高度撑起来
 86 |     window.style.right = 'auto'; // 必须设置为auto，否则就会把宽度撑起来
 87 | 
 88 |     /* 设置moving状态，主要用于吞掉click事件 */
 89 |     if (
 90 |       calDistance({
 91 |         x1: position.x,
 92 |         y1: position.y,
 93 |         x2: startPoint.x,
 94 |         y2: startPoint.y,
 95 |       }) > constant.AVAILABLE_CLICK_MAX_MOVE_DISTANCE &&
 96 |       window.className.indexOf('moving') === -1
 97 |     ) {
 98 |       window.className += ' moving';
 99 | 
100 |       /* 提供拖拽移动相关的钩子 */
101 |       if (!nowInMoving) {
102 |         moveStartCallback();
103 |         nowInMoving = true; // 保证在一次完整的拖拽移动过程中只触发一次moveStartCallback
104 |       }
105 |       movingCallback();
106 |     }
107 |   }
108 | 
109 |   const window = this.window;
110 |   const startPoint = getClientPosition(event); // 记录本次拖拽的起点位置
111 |   const movableParam = this.params.movable;
112 |   const moveStartCallback = this.params.moveStartCallback;
113 |   const movingCallback = this.params.movingCallback;
114 |   const moveEndCallback = this.params.moveEndCallback;
115 |   let nowInMoving = false;
116 | 
117 |   /* 当窗口本体作为MoveHandler且启用resize特性时，需要判断拖拽的位置是否与resize重复 */
118 |   if (
119 |     this.params.resizable &&
120 |     this.isMoveHandlerEqualWindow &&
121 |     judgeResizeType(startPoint, window) !== 'middle'
122 |   ) {
123 |     return;
124 |   }
125 | 
126 |   /* 固定窗口宽高 */
127 |   let size = getSize(window);
128 |   size = {
129 |     width: parseInt(size.width),
130 |     height: parseInt(size.height),
131 |   };
132 |   setSize(window, size.width, size.height);
133 | 
134 |   document.addEventListener(moveEvent, _handleMoveEventForMove, false); // 应在拖拽开始后才绑定移动的事件回调
135 |   document.addEventListener(endEvent, _handleEndEventForMove);
136 | 
137 |   const originPositionOffset = getPositionOffset(window); // 获取当前的位置偏移值
138 | 
139 |   event.preventDefault();
140 | }
141 | 


--------------------------------------------------------------------------------
/README.zh-CN.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">vue-directive-window 👋</h1>
  2 | <p>
  3 |   <a href="https://www.npmjs.com/package/vue-directive-window" target="_blank">
  4 |     <img src="https://img.shields.io/npm/v/vue-directive-window.svg?cacheSeconds=2592000" />
  5 |   </a>
  6 |   <a href="https://www.npmjs.com/package/vue-directive-window" target="_blank">
  7 |     <img alt="Maintenance" src="https://img.shields.io/npm/dw/vue-directive-window.svg?cacheSeconds=2592000" />
  8 |   </a>
  9 |   <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/min/vue-directive-window.svg?cacheSeconds=2592000" />
 10 |   <a href="https://array-huang.github.io/vue-directive-window">
 11 |     <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" target="_blank" />
 12 |   </a>
 13 |   <a href="https://github.com/Array-Huang/vue-directive-window/blob/master/LICENSE">
 14 |     <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" target="_blank" />
 15 |   </a>
 16 |   
 17 | </p>
 18 | 
 19 | > 让你的模态框轻而易举地支持类窗口操作。
 20 | 
 21 | - [Github](https://github.com/Array-Huang/vue-directive-window)
 22 | - [English README](https://github.com/Array-Huang/vue-directive-window/blob/master/README.md)
 23 | - [English Document](https://array-huang.github.io/vue-directive-window/)
 24 | 
 25 | > 注意 请确保你的 Node.js 版本 >= 8。 
 26 | 
 27 | ## 引入vue-directive-window
 28 | `vue-directive-window`支持静态文件及npm两种方式引入。
 29 | 
 30 | ### 静态文件方式引入
 31 | ```html
 32 | <script src="https://unpkg.com/vue-directive-window/dist/vue-directive-window.umd.min.js"></script>
 33 | ```
 34 | 
 35 | ### npm方式引入
 36 | ```bash
 37 | npm install vue-directive-window
 38 | ```
 39 | 
 40 | ## 打开本地文档
 41 | ```bash
 42 | npm start
 43 | ```
 44 | 
 45 | ## 开始使用
 46 | `vue-directive-window`支持Vue自定义指令及一般js类两种方式来使用。
 47 | 
 48 | ### Vue自定义指令
 49 | ```vue
 50 | <template>
 51 |   <div v-window="windowParams">
 52 |     <!-- 容器内容 -->
 53 |   </div>
 54 | </template>
 55 | <script>
 56 | import VueDirectiveWindow from 'vue-directive-window';
 57 | Vue.use(VueDirectiveWindow); // 如果是以静态文件方式引入的话，则不需要 import，直接使用Vue.use(window['vue-directive-window'])
 58 | export default {
 59 |   data() {
 60 |     return {
 61 |       windowParams: {
 62 |         movable: false,
 63 |         resizable: ['left', 'left-top'],
 64 |       },
 65 |     };
 66 |   },
 67 | }
 68 | </script>
 69 | ```
 70 | 
 71 | ### 一般js类
 72 | ```html
 73 | <div class="demo-window" v-window="windowParams">
 74 |   <!-- 容器内容 -->
 75 | </div>
 76 | ```
 77 | 
 78 | ```javascript
 79 | import { enhanceWindow } from 'vue-directive-window'; // 如果是以静态文件方式引入的话,则是const enhanceWindow = window['vue-directive-window'].enhanceWindow;
 80 | 
 81 | const windowParams = {
 82 |   movable: false
 83 |   resizable: ['left', 'left-top']
 84 | };
 85 | 
 86 | enhanceWindow(document.querySelector('.demo-window'), windowParams);
 87 | ```
 88 | 
 89 | ## 浏览器兼容性
 90 | | IE10 | IE11 | Chrome |
 91 | | :---: | :---: | :---: |
 92 | | OK | OK | OK |
 93 | 
 94 | ## 参数
 95 | 
 96 | ### minWidth
 97 | - 类型: `Number`
 98 | - 默认值: `100`
 99 | - 说明: 窗口可被调整至的最小宽度(px)
100 | 
101 | ### maxWidth
102 | - 类型: `Number`
103 | - 说明: 窗口可被调整至的最大宽度(px)
104 | 
105 | ### minHeight
106 | - 类型: `Number`
107 | - 默认值: `100`
108 | - 说明: 窗口可被调整至的最小高度(px)
109 | 
110 | ### maxHeight
111 | - 类型: `Number`
112 | - 说明: 窗口可被调整至的最大高度(px)
113 | 
114 | ### movable
115 | - 类型: `Boolean`/`String`
116 | - 默认值: `true`
117 | - 可选值：`true`/`false`/`'horizontal'`/`'vertical'`
118 | - 说明: 是否开启拖拽移动功能；`'horizontal'`表示只允许水平方向的拖拽移动，`'vertical'`表示只允许垂直方向的拖拽移动，`true`表示水平垂直方向的拖拽移动均被允可。
119 | 
120 | ### resizable
121 | - 类型: `Boolean`/`Array`
122 | - 默认值: `true`
123 | - 可选值: `left-top`/`left-bottom`/`left`/`right-top`/`right-bottom`/`right`/`top`/`bottom`
124 | - 说明: 是否开启调整窗口尺寸的功能。参数为`true`表示八个方向均可调整窗口尺寸；但如果传入的是字符串数组，如`['left', 'left-top']`，则只有参数指定的方向可以调整窗口尺寸；各个方向的标识如“可选值”列里所示。
125 | 
126 | ### customMoveHandler
127 | - 类型: `String`/`Element`
128 | - 说明: 自定义的拖拽移动handler。如果传入字符串类型参数，系统则将采用`document.querySelector(customMoveHandler)`来获取handler。
129 | 
130 | ### customMaximizeHandler
131 | - 类型: `String`/`Element`
132 | - 说明: 自定义的最大化handler。如果传入字符串类型参数，系统则将采用`document.querySelector(customMoveHandler)`来获取handler。
133 | 
134 | ### maximizeCallback
135 | - 类型: `Function`
136 | - 说明: 窗口最大化的回调函数。回调参数为：当前是否最大化(Boolean)。
137 | 
138 | ### moveStartCallback
139 | - 类型: `Function`
140 | - 说明: 拖拽移动开始时触发。
141 | 
142 | ### movingCallback
143 | - 类型: `Function`
144 | - 说明: 拖拽移动过程中会多次触发。
145 | 
146 | ### moveEndCallback
147 | - 类型: `Function`
148 | - 说明: 拖拽移动结束时触发。
149 | 
150 | ## 喜欢的话，请给个星吧⭐️
151 | 
152 | ## 📝 License
153 | 
154 | Copyright © 2019 [Array Huang](https://github.com/Array-Huang).<br />
155 | This project is [MIT](https://github.com/Array-Huang/vue-directive-window/blob/master/LICENSE) licensed.
156 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">Welcome to vue-directive-window 👋</h1>
  2 | <p>
  3 |   <a href="https://www.npmjs.com/package/vue-directive-window" target="_blank">
  4 |     <img src="https://img.shields.io/npm/v/vue-directive-window.svg?cacheSeconds=2592000" />
  5 |   </a>
  6 |   <a href="https://www.npmjs.com/package/vue-directive-window" target="_blank">
  7 |     <img alt="Maintenance" src="https://img.shields.io/npm/dw/vue-directive-window.svg?cacheSeconds=2592000" />
  8 |   </a>
  9 |   <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/min/vue-directive-window.svg?cacheSeconds=2592000" />
 10 |   <a href="https://array-huang.github.io/vue-directive-window">
 11 |     <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" target="_blank" />
 12 |   </a>
 13 |   <a href="https://github.com/Array-Huang/vue-directive-window/blob/master/LICENSE">
 14 |     <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" target="_blank" />
 15 |   </a>
 16 |   
 17 | </p>
 18 | 
 19 | > Vue.js directive that enhance your Modal Window, support drag, resize and maximize.
 20 | 
 21 | - [Github](https://github.com/Array-Huang/vue-directive-window)
 22 | - [中文 README](https://github.com/Array-Huang/vue-directive-window/blob/master/README.zh-CN.md)
 23 | - [中文 Document](https://array-huang.github.io/vue-directive-window/zh-CN/)
 24 | 
 25 | > `vue-directive-window` requires your Node.js version >= 8.
 26 | 
 27 | ## Installation
 28 | There are two ways of installation, from CDN and from npm, you can choose which you like.
 29 | 
 30 | ### CDN
 31 | ```html
 32 | <script src="https://unpkg.com/vue-directive-window/dist/vue-directive-window.umd.min.js"></script>
 33 | ```
 34 | 
 35 | ### npm
 36 | ```bash
 37 | npm install vue-directive-window
 38 | ```
 39 | 
 40 | ## Local document
 41 | ```bash
 42 | npm start
 43 | ```
 44 | 
 45 | ## Hello World
 46 | `vue-directive-window` provides two ways to use:
 47 | - Vue Custom Directive
 48 | - general javascript class library
 49 | 
 50 | ### Vue Custom Directive
 51 | ```vue
 52 | <template>
 53 |   <div v-window="windowParams">
 54 |     <!-- container content -->
 55 |   </div>
 56 | </template>
 57 | <script>
 58 | import VueDirectiveWindow from 'vue-directive-window';
 59 | Vue.use(VueDirectiveWindow); // When you take the CDN way, you don't need to import anything; you may use `Vue.use(window['vue-directive-window'])` instead.
 60 | export default {
 61 |   data() {
 62 |     return {
 63 |       windowParams: {
 64 |         movable: false,
 65 |         resizable: ['left', 'left-top'],
 66 |       },
 67 |     };
 68 |   },
 69 | }
 70 | </script>
 71 | ```
 72 | 
 73 | ### Javascript Class Library
 74 | ```html
 75 | <div class="demo-window" v-window="windowParams">
 76 |   <!-- container content -->
 77 | </div>
 78 | ```
 79 | 
 80 | ```javascript
 81 | import { enhanceWindow } from 'vue-directive-window'; // When you take the CDN way, you may use `const enhanceWindow = window['vue-directive-window'].enhanceWindow;` instead.
 82 | 
 83 | const windowParams = {
 84 |   movable: false
 85 |   resizable: ['left', 'left-top']
 86 | };
 87 | 
 88 | enhanceWindow(document.querySelector('.demo-window'), windowParams);
 89 | ```
 90 | 
 91 | ## Browser Compatibility
 92 | | IE10 | IE11 | Chrome |
 93 | | :---: | :---: | :---: |
 94 | | OK | OK | OK |
 95 | 
 96 | ## Parameters
 97 | 
 98 | ### minWidth
 99 | - Type: `Number`
100 | - Default: `100`
101 | - Description: window's minimum width(px)
102 | 
103 | ### maxWidth
104 | - Type: `Number`
105 | - Description: window's maximum width(px)
106 | 
107 | ### minHeight
108 | - Type: `Number`
109 | - Default: `100`
110 | - Description: window's minimum height(px)
111 | 
112 | ### maxHeight
113 | - Type: `Number`
114 | - Description: window's maximum height(px)
115 | 
116 | ### movable
117 | - Type: `Boolean`/`String`
118 | - Default: `true`
119 | - Accepted Values：`true`/`false`/`'horizontal'`/`'vertical'`
120 | - Description: Is drag feature available; when set `movable` to `'vertical'`, users will be only allow to make vertical drag; for the same reason, `'horizontal'` means only allow horizontal drag; when set `true`, both directions are available.
121 | 
122 | ### resizable
123 | - Type: `Boolean`/`Array`
124 | - Default: `true`
125 | - Accepted Values: `left-top`/`left-bottom`/`left`/`right-top`/`right-bottom`/`right`/`top`/`bottom`
126 | - Description: is resize feature available; when it is `true`, it means you could resize the window from every eight directions; when it is an Array value which contain String value, like `['left', 'left-top']` you could resize the window only from targeted directions.
127 | 
128 | ### customMoveHandler
129 | - Type: `String`/`Element`
130 | - Description: custom drag handler. When it is `null`, you could move the window by dragging every inch of this window. Otherwise, when it is a String value, `vue-directive-window` will use `document.querySelector(customMoveHandler)` to get the handler's Element; in that case, you could move the window only by dragging the handler.
131 | 
132 | ### customMaximizeHandler
133 | - Type: `String`/`Element`
134 | - Description: maximize feature's handler. When it is a String value, `vue-directive-window` will use `document.querySelector(customMoveHandler)` to get the handler.
135 | 
136 | ### maximizeCallback
137 | - Type: `Function`
138 | - Description: window maximizeCallback function; there is one parameter, which means if it is current maximize(Boolean).
139 | 
140 | ### moveStartCallback
141 | - Type: `Function`
142 | - Description: triggers when drag&move start.
143 | 
144 | ### movingCallback
145 | - Type: `Function`
146 | - Description: triggers multiple times during drag&move going.
147 | 
148 | ### moveEndCallback
149 | - Type: `Function`
150 | - Description: triggers when drag&move end.
151 | 
152 | ## Author
153 | 
154 | 👤 **Array Huang**
155 | 
156 | - Github: [@Array-Huang](https://github.com/Array-Huang)
157 | 
158 | ## Give a ⭐️ if this project helped you!
159 | 
160 | ## 📝 License
161 | 
162 | Copyright © 2019 [Array Huang](https://github.com/Array-Huang).<br />
163 | This project is [MIT](https://github.com/Array-Huang/vue-directive-window/blob/master/LICENSE) licensed.
164 | 


--------------------------------------------------------------------------------
/src/libs/common.js:
--------------------------------------------------------------------------------
  1 | import constant from '../config/constant';
  2 | 
  3 | /* 判断当前应该采用mouse相关事件还是touch相关事件 */
  4 | export const isTouchEvent = 'ontouchstart' in window;
  5 | export const startEvent = isTouchEvent ? 'touchstart' : 'mousedown';
  6 | export const moveEvent = isTouchEvent ? 'touchmove' : 'mousemove';
  7 | export const endEvent = isTouchEvent ? 'touchend' : 'mouseup';
  8 | 
  9 | function _refillPx(target) {
 10 |   if (typeof target === 'number') {
 11 |     return target + 'px';
 12 |   }
 13 | 
 14 |   return target;
 15 | }
 16 | 
 17 | /**
 18 |  * 判断当前用户是否使用IE浏览器访问
 19 |  *
 20 |  * @returns {Boolean}
 21 |  */
 22 | function isIE() {
 23 |   if (!!window.ActiveXObject || 'ActiveXObject' in window) return true;
 24 |   else return false;
 25 | }
 26 | 
 27 | /**
 28 |  * 从Event对象中获取当前鼠标/手指的位置
 29 |  *
 30 |  * @param {Event} event
 31 |  * @returns {Object}
 32 |  */
 33 | export function getClientPosition(event) {
 34 |   const clientX = isTouchEvent ? event.targetTouches[0].clientX : event.clientX;
 35 |   const clientY = isTouchEvent ? event.targetTouches[0].clientY : event.clientY;
 36 | 
 37 |   return {
 38 |     x: clientX,
 39 |     y: clientY,
 40 |   };
 41 | }
 42 | 
 43 | /**
 44 |  * 获取当前的位置偏移值(left、top)
 45 |  *
 46 |  * @export
 47 |  * @param {Node} node
 48 |  * @returns {Object}
 49 |  */
 50 | export function getPositionOffset(node) {
 51 |   const styleLeft = parseInt(getStyle(node, 'left'));
 52 |   const styleTop = parseInt(getStyle(node, 'top'));
 53 | 
 54 |   return {
 55 |     x: styleLeft ? styleLeft : 0,
 56 |     y: styleTop ? styleTop : 0,
 57 |   };
 58 | }
 59 | 
 60 | export function setPositionOffset(node, left, top, right, bottom) {
 61 |   if (!!left || left === 0) {
 62 |     node.style.left = _refillPx(left);
 63 |   }
 64 |   if (!!top || top === 0) {
 65 |     node.style.top = _refillPx(top);
 66 |   }
 67 |   if (!!right || right === 0) {
 68 |     node.style.right = _refillPx(right);
 69 |   }
 70 |   if (!!bottom || bottom === 0) {
 71 |     node.style.bottom = _refillPx(bottom);
 72 |   }
 73 | }
 74 | 
 75 | /**
 76 |  * 获取node的宽高
 77 |  *
 78 |  * @export
 79 |  * @param {Node} node
 80 |  */
 81 | export function getSize(node) {
 82 |   const computedStyle = window.getComputedStyle(node);
 83 |   return {
 84 |     width: computedStyle.getPropertyValue('width'),
 85 |     height: computedStyle.getPropertyValue('height'),
 86 |   };
 87 | }
 88 | 
 89 | export function setSize(node, width, height) {
 90 |   node.style.width = _refillPx(width);
 91 |   node.style.height = _refillPx(height);
 92 | }
 93 | 
 94 | /**
 95 |  * 判断鼠标是否已出浏览器窗口
 96 |  * @param {Event} event
 97 |  * @return {Boolean}
 98 |  */
 99 | export function isOutOfBrowser(event) {
100 |   if (
101 |     event.clientX > window.innerWidth ||
102 |     event.clientX < 0 ||
103 |     event.clientY < 0 ||
104 |     event.clientY > window.innerHeight
105 |   ) {
106 |     return true;
107 |   }
108 | 
109 |   return false;
110 | }
111 | /**
112 |  * 判断目标Element是否在拖拽移动的handler上
113 |  *
114 |  * @export
115 |  * @param {Node} targetEl
116 |  * @param {String} customMoveHandler
117 |  * @returns
118 |  */
119 | export function isInMoveHandler(targetEl, { customMoveHandler }) {
120 |   if (!customMoveHandler) {
121 |     return false;
122 |   }
123 |   const handler = document.querySelector(customMoveHandler);
124 |   if (!handler) {
125 |     return false;
126 |   }
127 | 
128 |   return handler.contains(targetEl);
129 | }
130 | /**
131 |  * 判断目标Element是否在最大化的handler上
132 |  *
133 |  * @export
134 |  * @param {Node} targetEl
135 |  * @param {String} customMoveHandler
136 |  * @returns
137 |  */
138 | export function isInMaximizeHandler(targetEl, { customMaximizeHandler }) {
139 |   if (!customMaximizeHandler) {
140 |     return false;
141 |   }
142 |   const handler = document.querySelector(customMaximizeHandler);
143 |   if (!handler) {
144 |     return false;
145 |   }
146 | 
147 |   return handler.contains(targetEl);
148 | }
149 | 
150 | export function getStyle(el, prop) {
151 |   const computedStyle = window.getComputedStyle(el);
152 |   const styleValue = computedStyle.getPropertyValue(prop);
153 |   /* 
154 |     需要对IE下的`getComputedStyle()`进行兼容，目前已知在css里设置`right: 0`的时候，
155 |     再用`getComputedStyle()`取left属性的时候只取到`auto` 
156 |   */
157 |   if (isIE()) {
158 |     if (prop === 'left' && styleValue === 'auto') {
159 |       const elWidth = computedStyle.getPropertyValue('width');
160 |       const elRight = computedStyle.getPropertyValue('right');
161 |       console.log('left:', window.innerWidth - parseFloat(elWidth) + 'px');
162 |       return (
163 |         window.innerWidth - parseFloat(elWidth) - parseFloat(elRight) + 'px'
164 |       );
165 |     }
166 | 
167 |     if (prop === 'top' && styleValue === 'auto') {
168 |       const elHeight = computedStyle.getPropertyValue('height');
169 |       const elBottom = computedStyle.getPropertyValue('bottom');
170 |       console.log('top:', window.innerHeight - parseFloat(elHeight) + 'px');
171 |       return (
172 |         window.innerHeight - parseFloat(elHeight) - parseFloat(elBottom) + 'px'
173 |       );
174 |     }
175 |   }
176 | 
177 |   return styleValue;
178 | }
179 | 
180 | export function judgeResizeType(cursorPoint, target) {
181 |   const borderScope = constant.BORDER_SCOPE;
182 |   const x = cursorPoint.x;
183 |   const y = cursorPoint.y;
184 |   const offsetTop = target.offsetTop;
185 |   const offsetLeft = target.offsetLeft;
186 |   const offsetWidth = target.offsetWidth;
187 |   const offsetHeight = target.offsetHeight;
188 |   // console.log(
189 |   //   `x:${x};y:${y};offsetTop:${offsetTop}；offsetLeft:${offsetLeft}；offsetWidth:${offsetWidth}；offsetHeight:${offsetHeight}；`
190 |   // );
191 |   if (Math.abs(offsetLeft - x) <= borderScope) {
192 |     if (Math.abs(offsetTop - y) <= borderScope) {
193 |       return 'left-top';
194 |     } else if (Math.abs(offsetTop + offsetHeight - y) <= borderScope) {
195 |       return 'left-bottom';
196 |     } else {
197 |       return 'left';
198 |     }
199 |   }
200 | 
201 |   if (Math.abs(offsetLeft + offsetWidth - x) <= borderScope) {
202 |     if (Math.abs(offsetTop - y) <= borderScope) {
203 |       return 'right-top';
204 |     } else if (Math.abs(offsetTop + offsetHeight - y) <= borderScope) {
205 |       return 'right-bottom';
206 |     } else {
207 |       return 'right';
208 |     }
209 |   }
210 | 
211 |   if (Math.abs(offsetTop - y) <= borderScope) {
212 |     return 'top';
213 |   } else if (Math.abs(offsetTop + offsetHeight - y) <= borderScope) {
214 |     return 'bottom';
215 |   }
216 | 
217 |   return 'middle';
218 | }
219 | 
220 | function _iframeWalk(window, func) {
221 |   const iframeEls = window.querySelectorAll('iframe');
222 |   if (!!iframeEls && iframeEls.length > 0) {
223 |     Array.prototype.forEach.call(iframeEls, iframe => {
224 |       func(iframe);
225 |     });
226 |   }
227 | }
228 | 
229 | export function ignoreIframe(window) {
230 |   _iframeWalk(window, iframe => {
231 |     iframe.style['pointer-events'] = 'none';
232 |   });
233 | }
234 | 
235 | export function recoverIframe(window) {
236 |   _iframeWalk(window, iframe => {
237 |     iframe.style['pointer-events'] = 'auto';
238 |   });
239 | }
240 | /* 计算两点间距离 */
241 | export function calDistance({ x1, y1, x2, y2 }) {
242 |   const result = Math.pow(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2), 0.5);
243 |   // console.log({ x1, y1, x2, y2 }, result);
244 |   return result;
245 | }
246 | 


--------------------------------------------------------------------------------
/src/libs/resize.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   moveEvent,
  3 |   endEvent,
  4 |   getClientPosition,
  5 |   isOutOfBrowser,
  6 |   getSize,
  7 |   getPositionOffset,
  8 |   setSize,
  9 |   setPositionOffset,
 10 |   isInMoveHandler,
 11 |   isInMaximizeHandler,
 12 |   judgeResizeType,
 13 |   getStyle,
 14 |   calDistance,
 15 | } from './common';
 16 | import constant from '../config/constant';
 17 | 
 18 | function _isOnOtherHandler(el, { moveHandler, maximizeHandler }) {
 19 |   return el === moveHandler || el === maximizeHandler;
 20 | }
 21 | 
 22 | function _setCursor(window, el, positionType) {
 23 |   let cursor;
 24 |   switch (positionType) {
 25 |     case 'top':
 26 |     case 'bottom':
 27 |       cursor = 'n-resize';
 28 |       break;
 29 | 
 30 |     case 'left':
 31 |     case 'right':
 32 |       cursor = 'e-resize';
 33 |       break;
 34 | 
 35 |     case 'left-top':
 36 |       cursor = 'nw-resize';
 37 |       break;
 38 | 
 39 |     case 'left-bottom':
 40 |       cursor = 'sw-resize';
 41 |       break;
 42 | 
 43 |     case 'right-top':
 44 |       cursor = 'ne-resize';
 45 |       break;
 46 | 
 47 |     case 'right-bottom':
 48 |       cursor = 'se-resize';
 49 |       break;
 50 |   }
 51 |   window.style.cursor = cursor;
 52 | }
 53 | 
 54 | function _resetCursor(window) {
 55 |   if (getStyle(window, 'cursor').indexOf('resize') > -1) {
 56 |     window.style.cursor = '';
 57 |   }
 58 | }
 59 | 
 60 | function _isDirectionResizable(direction) {
 61 |   const resizableParams = this.params.resizable;
 62 |   if (resizableParams === true) return true;
 63 |   if (
 64 |     Array.isArray(resizableParams) &&
 65 |     resizableParams.indexOf(direction) > -1
 66 |   ) {
 67 |     return true;
 68 |   }
 69 | 
 70 |   return false;
 71 | }
 72 | 
 73 | function _calWidthAndOffset({
 74 |   type,
 75 |   originSize,
 76 |   originOffset,
 77 |   nowPosition,
 78 |   startPoint,
 79 |   minWidth,
 80 |   maxWidth,
 81 |   minHeight,
 82 |   maxHeight,
 83 | }) {
 84 |   /* 获取最小/最大宽度限制下的实际宽度 */
 85 |   function _getLimitWidth({ minWidth, maxWidth, currentWidth }) {
 86 |     /* 最小宽度限制 */
 87 |     if (!!minWidth && currentWidth < minWidth) {
 88 |       currentWidth = minWidth;
 89 |     } else if (currentWidth < 0) {
 90 |       currentWidth = 0;
 91 |     }
 92 |     /* 最大宽度限制 */
 93 |     if (!!maxWidth && currentWidth > maxWidth) {
 94 |       currentWidth = maxWidth;
 95 |     }
 96 | 
 97 |     return currentWidth;
 98 |   }
 99 |   /* 获取最小/最大高度限制下的实际高度 */
100 |   function _getLimitHeight({ minHeight, maxHeight, currentHeight }) {
101 |     /* 最小宽度限制 */
102 |     if (!!minHeight && currentHeight < minHeight) {
103 |       currentHeight = minHeight;
104 |     } else if (currentHeight < 0) {
105 |       currentHeight = 0;
106 |     }
107 |     /* 最大宽度限制 */
108 |     if (!!maxHeight && currentHeight > maxHeight) {
109 |       currentHeight = maxHeight;
110 |     }
111 | 
112 |     return currentHeight;
113 |   }
114 | 
115 |   const optionWidth = nowPosition.x - startPoint.x + originSize.width;
116 |   const optionHeight = nowPosition.y - startPoint.y + originSize.height;
117 |   let calWidth = originSize.width;
118 |   let calHeight = originSize.height;
119 |   let calTop = originOffset.y;
120 |   let calLeft = originOffset.x;
121 |   /* 左边的拖拽调整大小 */
122 |   if (type.indexOf('left') > -1) {
123 |     calWidth = startPoint.x - nowPosition.x + originSize.width; // 根据拖拽移动的水平位移决定宽度
124 |     calWidth = _getLimitWidth({ minWidth, maxWidth, currentWidth: calWidth }); // 根据最大/最小宽度限制来决定最终的宽度
125 |     calLeft = originOffset.x - (calWidth - originSize.width); // 根据宽度的变化量来决定窗口的left属性
126 |   }
127 |   /* 上边的拖拽调整大小 */
128 |   if (type.indexOf('top') > -1) {
129 |     calHeight = startPoint.y - nowPosition.y + originSize.height; // 根据拖拽移动的垂直位移决定高度
130 |     // 根据最大/最小高度限制来决定最终的高度
131 |     calHeight = _getLimitHeight({
132 |       minHeight,
133 |       maxHeight,
134 |       currentHeight: calHeight,
135 |     });
136 |     calTop = originOffset.y - (calHeight - originSize.height); // 根据高度的变化量来决定窗口的top属性
137 |   }
138 |   /* 右边的拖拽调整大小 */
139 |   if (type.indexOf('right') > -1) {
140 |     calWidth = _getLimitWidth({
141 |       minWidth,
142 |       maxWidth,
143 |       currentWidth: optionWidth,
144 |     });
145 |   }
146 |   /* 下边的拖拽调整大小 */
147 |   if (type.indexOf('bottom') > -1) {
148 |     calHeight = _getLimitHeight({
149 |       minHeight,
150 |       maxHeight,
151 |       currentHeight: optionHeight,
152 |     });
153 |   }
154 | 
155 |   return { calWidth, calHeight, calTop, calLeft };
156 | }
157 | 
158 | /**
159 |  * 为了拖拽调整大小，绑定事件；
160 |  * 与拖拽移动不一样的是，由于鼠标在移动过程中会超出window的范围，因此moveEvent需要绑定在document上
161 |  *
162 |  * @param {Event} event
163 |  * @returns
164 |  */
165 | export function handleStartEventForResize(startEvent) {
166 |   function _handleMoveEventForResize(moveEvent) {
167 |     /* 判断鼠标是否已出浏览器窗口，是的话就限制拖拽，避免整个window出浏览器窗口 */
168 |     if (isOutOfBrowser(moveEvent)) {
169 |       return false;
170 |     }
171 |     const nowPosition = getClientPosition(moveEvent); // 获取鼠标/手指的位置
172 |     const { calWidth, calHeight, calTop, calLeft } = _calWidthAndOffset({
173 |       type,
174 |       originSize,
175 |       originOffset,
176 |       nowPosition,
177 |       startPoint,
178 |       minWidth: params.minWidth,
179 |       maxWidth: params.maxWidth,
180 |       minHeight: params.minHeight,
181 |       maxHeight: params.maxHeight,
182 |     });
183 |     setSize(target, calWidth, calHeight);
184 |     setPositionOffset(target, calLeft, calTop);
185 |     moveEvent.stopPropagation();
186 | 
187 |     /* 设置resizing状态，主要用于吞掉click事件 */
188 |     if (
189 |       calDistance({
190 |         x1: nowPosition.x,
191 |         y1: nowPosition.y,
192 |         x2: startPoint.x,
193 |         y2: startPoint.y,
194 |       }) > constant.AVAILABLE_CLICK_MAX_RESIZE_DISTANCE &&
195 |       target.className.indexOf('resizing') === -1
196 |     ) {
197 |       target.className += ' resizing';
198 |     }
199 |   }
200 | 
201 |   function _handleEndEventForResize(endEvent) {
202 |     document.removeEventListener(moveEvent, _handleMoveEventForResize, false); // 拖拽结束，清除移动的事件回调
203 | 
204 |     endEvent.preventDefault();
205 |     endEvent.stopPropagation();
206 | 
207 |     /* 撤销moving状态，但由于此状态值主要用于吞掉click事件，因此使用setTimeout延长moving状态至click事件结束 */
208 |     setTimeout(() => {
209 |       target.className = target.className.replace(/ ?resizing/, '');
210 |     }, 0);
211 |   }
212 | 
213 |   const eventEl = startEvent.target;
214 |   const params = this.params;
215 |   const target = this.window;
216 |   const startPoint = getClientPosition(startEvent); // 本次拖拽的起点位置
217 |   const type = judgeResizeType(startPoint, target); // 获取本次点击位于窗口的哪个区域
218 |   /* 点击位置位于窗口中央，不做任何处理 */
219 |   if (type === 'middle') {
220 |     return;
221 |   }
222 |   /* 该方向上的resize是否启用 */
223 |   if (!_isDirectionResizable.call(this, type)) {
224 |     return;
225 |   }
226 |   if (isInMoveHandler(eventEl, params)) {
227 |     /* 判断是否点击在拖拽移动的handler上，是的话就不做处理 */
228 |     return;
229 |   }
230 |   /* 判断是否点击在最大化的handler上，是的话就不做处理 */
231 |   if (isInMaximizeHandler(eventEl, params)) {
232 |     return;
233 |   }
234 |   let originSize = getSize(target);
235 |   originSize = {
236 |     width: parseInt(originSize.width),
237 |     height: parseInt(originSize.height),
238 |   };
239 | 
240 |   const originOffset = getPositionOffset(target);
241 | 
242 |   document.addEventListener(moveEvent, _handleMoveEventForResize, false); // 应在拖拽开始后才绑定移动的事件回调
243 |   document.addEventListener(endEvent, _handleEndEventForResize); // 绑定endEvent
244 |   startEvent.preventDefault();
245 |   startEvent.stopPropagation();
246 | }
247 | 
248 | export function cursorChange(event) {
249 |   const target = this.window;
250 |   const currentPoint = getClientPosition(event); // 本次拖拽的起点位置
251 |   const type = judgeResizeType(currentPoint, target); // 获取本次点击位于窗口的哪个区域
252 | 
253 |   /* 点击位置位于窗口中央，重置cursor */
254 |   if (
255 |     _isOnOtherHandler(event.target, this) ||
256 |     type === 'middle' ||
257 |     !_isDirectionResizable.call(this, type)
258 |   ) {
259 |     _resetCursor(this.window);
260 |   } else {
261 |     _setCursor(this.window, event.target, type);
262 |   }
263 | }
264 | 


--------------------------------------------------------------------------------
/docs/zh-CN/examples.md:
--------------------------------------------------------------------------------
  1 | # 使用案例
  2 | 
  3 | ## Vue 自定义指令 v-window 的基本使用案例
  4 | 
  5 | 本案例包含 3 个特性：拖拽移动、调整大小、窗口最大化。
  6 | 
  7 | 注意：
  8 | - `<iframe />`会把移动事件（`touchmove`和`mousemove`）吞掉，造成鼠标进入`<iframe />`区域后便不再响应拖拽移动或是调整大小的功能；`vue-directive-window`已经对这种场景做了相应的处理，现在你可以愉快的在窗口内使用`<iframe />`了。
  9 | ::: demo
 10 | 
 11 | ```html
 12 | <template>
 13 |   <div class="container">
 14 |     <div class="window window1" v-show="ifShowWindow" v-window="windowParams">
 15 |       <div class="window__header">
 16 |         一般窗口
 17 |         <button class="maximize-btn" type="button">
 18 |           <template v-if="!isMaximize"
 19 |             >点这放大</template
 20 |           >
 21 |           <template v-else
 22 |             >点这缩小</template
 23 |           >
 24 |         </button>
 25 |       </div>
 26 |       <div class="window__body">
 27 |         <iframe height="100%" width="100%" frameborder="0" src="https://array-huang.github.io/vue-directive-window/">
 28 |       </div>
 29 |     </div>
 30 | 
 31 |     <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">
 32 |       显示窗口
 33 |     </button>
 34 |     <button type="button" @click="ifShowWindow = false" v-else>隐藏窗口</button>
 35 |   </div>
 36 | </template>
 37 | <script>
 38 |   Vue.use(window['vue-directive-window']);
 39 | 
 40 |   function maximizeCb(isMaximize) {
 41 |     this.isMaximize = isMaximize;
 42 |   }
 43 | 
 44 |   export default {
 45 |     data() {
 46 |       return {
 47 |         windowParams: {
 48 |           minWidth: 10,
 49 |           maxWidth: 800,
 50 |           minHeight: 100,
 51 |           maxHeight: 800,
 52 |           customMaximizeHandler: '.maximize-btn',
 53 |           maximizeCallback: maximizeCb.bind(this),
 54 |         },
 55 |         ifShowWindow: false,
 56 |         isMaximize: false,
 57 |       };
 58 |     },
 59 |   };
 60 | </script>
 61 | <style>
 62 |   .container {
 63 |     padding: 30px;
 64 |   }
 65 |   .window1 {
 66 |     width: 400px;
 67 |     position: fixed;
 68 |     top: 60px;
 69 |     left: 0;
 70 |   }
 71 | </style>
 72 | ```
 73 | 
 74 | :::
 75 | 
 76 | ## 函数方式的基本使用案例
 77 | 
 78 | ::: demo
 79 | 
 80 | ```html
 81 | <template>
 82 |   <div class="container">
 83 |     <div class="window window2 window--by-function" v-show="ifShowWindow">
 84 |       <div class="window__header">
 85 |         函数方式生成的窗口
 86 |       </div>
 87 |       <div class="window__body">
 88 |         <p>窗口内容1</p>
 89 |         <p>窗口内容2</p>
 90 |         <p>窗口内容3</p>
 91 |       </div>
 92 |     </div>
 93 | 
 94 |     <button type="button" @click="show" v-if="!ifShowWindow">显示窗口</button>
 95 |     <button type="button" @click="hide" v-else>隐藏窗口</button>
 96 |   </div>
 97 | </template>
 98 | <script>
 99 |   function enhanceWindow() {
100 |     const windowElement = document.querySelector('.window--by-function');
101 |     const windowParams = {
102 |       minWidth: 10,
103 |       maxWidth: 400,
104 |       minHeight: 100,
105 |       maxHeight: 400,
106 |     };
107 |     window['vue-directive-window'].enhanceWindow(windowElement, windowParams);
108 |   }
109 |   export default {
110 |     data() {
111 |       return {
112 |         ifShowWindow: false,
113 |         ifInited: false,
114 |       };
115 |     },
116 |     methods: {
117 |       show() {
118 |         this.ifShowWindow = true;
119 |         if (!this.ifInited) {
120 |           enhanceWindow();
121 |         }
122 |       },
123 |       hide() {
124 |         this.ifShowWindow = false;
125 |       },
126 |     },
127 |   };
128 | </script>
129 | <style>
130 |   .container {
131 |     padding: 30px;
132 |   }
133 |   .window2 {
134 |     width: 200px;
135 |     position: fixed;
136 |     top: 60px;
137 |     left: 200px;
138 |   }
139 | </style>
140 | ```
141 | 
142 | :::
143 | 
144 | ## 停用拖拽移动特性，启用部分方向的调整大小
145 | 
146 | ::: demo
147 | 
148 | ```html
149 | <template>
150 |   <div class="container">
151 |     <div class="window window3" v-show="ifShowWindow" v-window="windowParams">
152 |       <div class="window__header">
153 |         部分功能可用的窗口
154 |       </div>
155 |       <div class="window__body">
156 |         <p>窗口内容1</p>
157 |         <p>窗口内容2</p>
158 |         <p>窗口内容3</p>
159 |       </div>
160 |     </div>
161 | 
162 |     <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">
163 |       显示窗口
164 |     </button>
165 |     <button type="button" @click="ifShowWindow = false" v-else>隐藏窗口</button>
166 |   </div>
167 | </template>
168 | <script>
169 |   Vue.use(window['vue-directive-window']);
170 |   export default {
171 |     data() {
172 |       return {
173 |         windowParams: {
174 |           movable: false,
175 |           resizable: ['left', 'left-top'],
176 |         },
177 |         ifShowWindow: false,
178 |       };
179 |     },
180 |   };
181 | </script>
182 | <style>
183 |   .container {
184 |     padding: 30px;
185 |   }
186 |   .window3 {
187 |     width: 200px;
188 |     position: fixed;
189 |     top: 60px;
190 |     left: 400px;
191 |   }
192 | </style>
193 | ```
194 | 
195 | :::
196 | 
197 | ## 指定拖拽移动的 handler
198 | 
199 | 这个例子中，只有拖拽`.window_header`，即窗口的头部，才能拖动窗口
200 | 
201 | ::: demo
202 | 
203 | ```html
204 | <template>
205 |   <div class="container">
206 |     <div class="window window4" v-show="ifShowWindow" v-window="windowParams">
207 |       <div class="window__header">
208 |         指定拖拽移动的handler的窗口
209 |       </div>
210 |       <div class="window__body">
211 |         <p>窗口内容1</p>
212 |         <p>窗口内容2</p>
213 |         <p>窗口内容3</p>
214 |       </div>
215 |     </div>
216 | 
217 |     <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">
218 |       显示窗口
219 |     </button>
220 |     <button type="button" @click="ifShowWindow = false" v-else>隐藏窗口</button>
221 |   </div>
222 | </template>
223 | <script>
224 |   Vue.use(window['vue-directive-window']);
225 |   export default {
226 |     data() {
227 |       return {
228 |         windowParams: {
229 |           customMoveHandler: '.window__header',
230 |         },
231 |         ifShowWindow: false,
232 |       };
233 |     },
234 |   };
235 | </script>
236 | <style>
237 |   .container {
238 |     padding: 30px;
239 |   }
240 |   .window4 {
241 |     width: 200px;
242 |     position: fixed;
243 |     top: 60px;
244 |     left: 600px;
245 |   }
246 | </style>
247 | ```
248 | 
249 | :::
250 | 
251 | ## 只允许垂直方向的拖拽移动
252 | 把`movable`参数设为`'vertical'`即可限制用户只能在垂直方向上拖拽移动窗口，而设为`'horizontal'`则表示限制只能在水平方向上拖拽移动窗口。
253 | 
254 | ::: demo
255 | 
256 | ```html
257 | <template>
258 |   <div class="container">
259 |     <div class="window window5" v-show="ifShowWindow" v-window="windowParams">
260 |       <div class="window__header">
261 |         只允许垂直方向的拖拽移动
262 |       </div>
263 |       <div class="window__body">
264 |         <iframe height="100%" width="100%" frameborder="0" src="https://array-huang.github.io/vue-directive-window/">
265 |       </div>
266 |     </div>
267 | 
268 |     <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">
269 |       显示窗口
270 |     </button>
271 |     <button type="button" @click="ifShowWindow = false" v-else>隐藏窗口</button>
272 |   </div>
273 | </template>
274 | <script>
275 |   Vue.use(window['vue-directive-window']);
276 | 
277 |   export default {
278 |     data() {
279 |       return {
280 |         windowParams: {
281 |           movable: 'vertical',
282 |           resizable: false,
283 |         },
284 |         ifShowWindow: false,
285 |       };
286 |     },
287 |   };
288 | </script>
289 | <style>
290 |   .container {
291 |     padding: 30px;
292 |   }
293 |   .window5 {
294 |     width: 400px;
295 |     position: fixed;
296 |     top: 60px;
297 |     left: 0;
298 |   }
299 | </style>
300 | ```
301 | 
302 | :::
303 | 
304 | ## 避免拖拽移动过程中触发窗口内部的 click 事件
305 | 当你没有指定`customMoveHandler`参数时，用户可以拖拽窗口内部任一位置来移动窗口，但这会带来一个问题：假如用户通过拖拽窗口内某一按钮来移动窗口，则当用户结束拖拽时，这个按钮也会视为被触发了 **click** 事件，这通常不是我们所期望发生的。
306 | 
307 | 因此，vue-directive-window 提供了拖拽移动相关的钩子，你可以在钩子的回调函数上加锁来避免拖拽移动触发 click 事件，下面是具体的示例：
308 | 
309 | ::: demo
310 | 
311 | ```html
312 | <template>
313 |   <div class="container">
314 |     <div class="window window6" v-show="ifShowWindow" v-window="windowParams">
315 |       <div class="window__header">
316 |         避免拖拽移动过程中触发窗口内部的 click 事件
317 |       </div>
318 |       <div class="window__body">
319 |         <button @click="clickCb">点击执行alert</button>
320 |       </div>
321 |     </div>
322 | 
323 |     <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">
324 |       显示窗口
325 |     </button>
326 |     <button type="button" @click="ifShowWindow = false" v-else>隐藏窗口</button>
327 |   </div>
328 | </template>
329 | <script>
330 |   Vue.use(window['vue-directive-window']);
331 | 
332 |   export default {
333 |     data() {
334 |       return {
335 |         windowParams: {
336 |           resizable: false,
337 |           moveStartCallback: () => {
338 |             this.clickLock = true;
339 |           },
340 |           moveEndCallback: () => {
341 |             setTimeout(() => {
342 |               this.clickLock = false;
343 |             }, 300);
344 |           }
345 |         },
346 |         ifShowWindow: false,
347 |         clickLock: false,
348 |       };
349 |     },
350 |     methods: {
351 |       clickCb() {
352 |         if (this.clickLock) return;
353 |         alert('您点击了按钮');
354 |       }
355 |     }
356 |   };
357 | </script>
358 | <style>
359 |   .container {
360 |     padding: 30px;
361 |   }
362 |   .window6 {
363 |     width: 400px;
364 |     position: fixed;
365 |     top: 60px;
366 |     left: 0;
367 |   }
368 | </style>
369 | ```
370 | 
371 | :::


--------------------------------------------------------------------------------
/docs/examples.md:
--------------------------------------------------------------------------------
  1 | # Examples
  2 | 
  3 | ## Vue Custom Directive `v-window` Basic Example
  4 | 
  5 | Contain three feature: drag, resize, maximize.
  6 | 
  7 | ::: warning
  8 | `<iframe />` will swallow the touch/mouse event, include `touchmove` and `mousemove` which are dependent by drag and resize feature. Therefor, when mouse/finger move into the `<iframe />` area, there will be no any response for drag/resize. Fortunatly, I have already considered this situation and finally fix it, so you won't be conserned.
  9 | :::
 10 | 
 11 | ::: demo
 12 | 
 13 | ```html
 14 | <template>
 15 |   <div class="container">
 16 |     <div class="window window1" v-show="ifShowWindow" v-window="windowParams">
 17 |       <div class="window__header">
 18 |         Basic Example
 19 |         <button class="maximize-btn" type="button">
 20 |           <template v-if="!isMaximize"
 21 |             >maximize</template
 22 |           >
 23 |           <template v-else
 24 |             >minimize</template
 25 |           >
 26 |         </button>
 27 |       </div>
 28 |       <div class="window__body">
 29 |         <iframe height="100%" width="100%" frameborder="0" src="https://array-huang.github.io/vue-directive-window/">
 30 |       </div>
 31 |     </div>
 32 | 
 33 |     <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">
 34 |       display window
 35 |     </button>
 36 |     <button type="button" @click="ifShowWindow = false" v-else>hide window</button>
 37 |   </div>
 38 | </template>
 39 | <script>
 40 |   Vue.use(window['vue-directive-window']);
 41 | 
 42 |   function maximizeCb(isMaximize) {
 43 |     this.isMaximize = isMaximize;
 44 |   }
 45 | 
 46 |   export default {
 47 |     data() {
 48 |       return {
 49 |         windowParams: {
 50 |           minWidth: 10,
 51 |           maxWidth: 800,
 52 |           minHeight: 100,
 53 |           maxHeight: 800,
 54 |           customMaximizeHandler: '.maximize-btn',
 55 |           maximizeCallback: maximizeCb.bind(this),
 56 |         },
 57 |         ifShowWindow: false,
 58 |         isMaximize: false,
 59 |       };
 60 |     },
 61 |   };
 62 | </script>
 63 | <style>
 64 |   .container {
 65 |     padding: 30px;
 66 |   }
 67 |   .window1 {
 68 |     width: 400px;
 69 |     position: fixed;
 70 |     top: 60px;
 71 |     left: 0;
 72 |   }
 73 | </style>
 74 | ```
 75 | 
 76 | :::
 77 | 
 78 | ## Javascript Class Library Basic Example
 79 | 
 80 | ::: demo
 81 | 
 82 | ```html
 83 | <template>
 84 |   <div class="container">
 85 |     <div class="window window2 window--by-function" v-show="ifShowWindow">
 86 |       <div class="window__header">
 87 |         Window Created by Javascript Class Library
 88 |       </div>
 89 |       <div class="window__body">
 90 |         <p>window content1</p>
 91 |         <p>window content2</p>
 92 |         <p>window content3</p>
 93 |       </div>
 94 |     </div>
 95 | 
 96 |     <button type="button" @click="show" v-if="!ifShowWindow">display window</button>
 97 |     <button type="button" @click="hide" v-else>hide window</button>
 98 |   </div>
 99 | </template>
100 | <script>
101 |   function enhanceWindow() {
102 |     const windowElement = document.querySelector('.window--by-function');
103 |     const windowParams = {
104 |       minWidth: 10,
105 |       maxWidth: 400,
106 |       minHeight: 100,
107 |       maxHeight: 400,
108 |     };
109 |     window['vue-directive-window'].enhanceWindow(windowElement, windowParams);
110 |   }
111 |   export default {
112 |     data() {
113 |       return {
114 |         ifShowWindow: false,
115 |         ifInited: false,
116 |       };
117 |     },
118 |     methods: {
119 |       show() {
120 |         this.ifShowWindow = true;
121 |         if (!this.ifInited) {
122 |           enhanceWindow();
123 |         }
124 |       },
125 |       hide() {
126 |         this.ifShowWindow = false;
127 |       },
128 |     },
129 |   };
130 | </script>
131 | <style>
132 |   .container {
133 |     padding: 30px;
134 |   }
135 |   .window2 {
136 |     width: 200px;
137 |     position: fixed;
138 |     top: 60px;
139 |     left: 200px;
140 |   }
141 | </style>
142 | ```
143 | 
144 | :::
145 | 
146 | ## Disable Drag and Enable Part of Resize
147 | 
148 | ::: demo
149 | 
150 | ```html
151 | <template>
152 |   <div class="container">
153 |     <div class="window window3" v-show="ifShowWindow" v-window="windowParams">
154 |       <div class="window__header">
155 |         Window Which Part of Feature Available
156 |       </div>
157 |       <div class="window__body">
158 |         <p>window content1</p>
159 |         <p>window content2</p>
160 |         <p>window content3</p>
161 |       </div>
162 |     </div>
163 | 
164 |     <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">
165 |       display window
166 |     </button>
167 |     <button type="button" @click="ifShowWindow = false" v-else>hide window</button>
168 |   </div>
169 | </template>
170 | <script>
171 |   Vue.use(window['vue-directive-window']);
172 |   export default {
173 |     data() {
174 |       return {
175 |         windowParams: {
176 |           movable: false,
177 |           resizable: ['left', 'left-top'],
178 |         },
179 |         ifShowWindow: false,
180 |       };
181 |     },
182 |   };
183 | </script>
184 | <style>
185 |   .container {
186 |     padding: 30px;
187 |   }
188 |   .window3 {
189 |     width: 200px;
190 |     position: fixed;
191 |     top: 60px;
192 |     left: 400px;
193 |   }
194 | </style>
195 | ```
196 | 
197 | :::
198 | 
199 | ## Pass Drag Handler Parameter
200 | 
201 | In this example，you could move the window only when you drag the Drag Handler(`.window_header`), which is the header of the window.
202 | 
203 | ::: demo
204 | 
205 | ```html
206 | <template>
207 |   <div class="container">
208 |     <div class="window window4" v-show="ifShowWindow" v-window="windowParams">
209 |       <div class="window__header">
210 |         Window with Drag Handler
211 |       </div>
212 |       <div class="window__body">
213 |         <p>window content1</p>
214 |         <p>window content2</p>
215 |         <p>window content3</p>
216 |       </div>
217 |     </div>
218 | 
219 |     <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">
220 |       display window
221 |     </button>
222 |     <button type="button" @click="ifShowWindow = false" v-else>hide window</button>
223 |   </div>
224 | </template>
225 | <script>
226 |   Vue.use(window['vue-directive-window']);
227 |   export default {
228 |     data() {
229 |       return {
230 |         windowParams: {
231 |           customMoveHandler: '.window__header',
232 |         },
233 |         ifShowWindow: false,
234 |       };
235 |     },
236 |   };
237 | </script>
238 | <style>
239 |   .container {
240 |     padding: 30px;
241 |   }
242 |   .window4 {
243 |     width: 200px;
244 |     position: fixed;
245 |     top: 60px;
246 |     left: 600px;
247 |   }
248 | </style>
249 | ```
250 | 
251 | :::
252 | 
253 | ## Only Vertical Drag Available
254 | When set `movable` to `'vertical'`, users will be only allow to make vertical drag; for the same reason, `'horizontal'` means only allow horizontal drag.
255 | 
256 | ::: demo
257 | 
258 | ```html
259 | <template>
260 |   <div class="container">
261 |     <div class="window window5" v-show="ifShowWindow" v-window="windowParams">
262 |       <div class="window__header">
263 |         Only Vertical Drag Available
264 |       </div>
265 |       <div class="window__body">
266 |         <iframe height="100%" width="100%" frameborder="0" src="https://array-huang.github.io/vue-directive-window/">
267 |       </div>
268 |     </div>
269 | 
270 |     <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">display window</button>
271 |     <button type="button" @click="ifShowWindow = false" v-else>hide window</button>
272 |   </div>
273 | </template>
274 | <script>
275 |   Vue.use(window['vue-directive-window']);
276 | 
277 |   export default {
278 |     data() {
279 |       return {
280 |         windowParams: {
281 |           movable: 'vertical',
282 |           resizable: false,
283 |         },
284 |         ifShowWindow: false,
285 |       };
286 |     },
287 |   };
288 | </script>
289 | <style>
290 |   .container {
291 |     padding: 30px;
292 |   }
293 |   .window5 {
294 |     width: 400px;
295 |     position: fixed;
296 |     top: 60px;
297 |     left: 0;
298 |   }
299 | </style>
300 | ```
301 | 
302 | :::
303 | 
304 | ## Avoid Unexpected Click Event Inside Window During Drag Window
305 | When you have not provided param `customMoveHandler`, users are able to drag&move the window through any position inside the window. Though this may poses a problem: in case user drag&move the window through a button in the window, this button's CLICK event will be triggered when drag&move finish, and this is not we expedted generally.
306 | 
307 | Therefore, vue-directive-window provide hooks related to drag&move，and you should add LOCK to avaoid the unexpected CLICK event triggered by drag&move. Here is an example:
308 | 
309 | ::: demo
310 | 
311 | ```html
312 | <template>
313 |   <div class="container">
314 |     <div class="window window6" v-show="ifShowWindow" v-window="windowParams">
315 |       <div class="window__header">
316 |         Avoid Unexpected Click Event Inside Window During Drag Window
317 |       </div>
318 |       <div class="window__body">
319 |         <button @click="clickCb">clik to excute alert</button>
320 |       </div>
321 |     </div>
322 | 
323 |     <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">display window</button>
324 |     <button type="button" @click="ifShowWindow = false" v-else>hide window</button>
325 |   </div>
326 | </template>
327 | <script>
328 |   Vue.use(window['vue-directive-window']);
329 | 
330 |   export default {
331 |     data() {
332 |       return {
333 |         windowParams: {
334 |           resizable: false,
335 |           moveStartCallback: () => {
336 |             this.clickLock = true;
337 |           },
338 |           moveEndCallback: () => {
339 |             setTimeout(() => {
340 |               this.clickLock = false;
341 |             }, 300);
342 |           }
343 |         },
344 |         ifShowWindow: false,
345 |         clickLock: false,
346 |       };
347 |     },
348 |     methods: {
349 |       clickCb() {
350 |         if (this.clickLock) return;
351 |         alert('you clicked the button');
352 |       }
353 |     }
354 |   };
355 | </script>
356 | <style>
357 |   .container {
358 |     padding: 30px;
359 |   }
360 |   .window6 {
361 |     width: 400px;
362 |     position: fixed;
363 |     top: 60px;
364 |     left: 0;
365 |   }
366 | </style>
367 | ```
368 | 
369 | :::


--------------------------------------------------------------------------------
/dist/vue-directive-window.umd.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * 
 3 |  * vue-directive-window
 4 |  * Vue.js directive that enhance your Modal Window, support drag, resize and maximize.
 5 |  * 
 6 |  * @version v0.7.5
 7 |  * @homepage https://github.com/Array-Huang/vue-directive-window
 8 |  * @repository git+https://github.com/Array-Huang/vue-directive-window.git
 9 |  * 
10 |  * (c) 2019 Array-Huang
11 |  * Released under the MIT License.
12 |  * hash: 1bf4f834a86aacc762d9
13 |  * 
14 |  */
15 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-directive-window"]=e():t["vue-directive-window"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"01f9":function(t,e,n){"use strict";var r=n("2d00"),i=n("5ca1"),o=n("2aba"),c=n("32e9"),a=n("84f2"),u=n("41a0"),f=n("7f20"),s=n("38fd"),l=n("2b4c")("iterator"),p=!([].keys&&"next"in[].keys()),d="@@iterator",h="keys",v="values",b=function(){return this};t.exports=function(t,e,n,m,y,g,x){u(n,e,m);var w,O,S,j=function(t){if(!p&&t in k)return k[t];switch(t){case h:return function(){return new n(this,t)};case v:return function(){return new n(this,t)}}return function(){return new n(this,t)}},E=e+" Iterator",P=y==v,_=!1,k=t.prototype,M=k[l]||k[d]||y&&k[y],L=M||j(y),C=y?P?j("entries"):L:void 0,A="Array"==e&&k.entries||M;if(A&&(S=s(A.call(new t)),S!==Object.prototype&&S.next&&(f(S,E,!0),r||"function"==typeof S[l]||c(S,l,b))),P&&M&&M.name!==v&&(_=!0,L=function(){return M.call(this)}),r&&!x||!p&&!_&&k[l]||c(k,l,L),a[e]=L,a[E]=b,y)if(w={values:P?L:j(v),keys:g?L:j(h),entries:C},x)for(O in w)O in k||o(k,O,w[O]);else i(i.P+i.F*(p||_),e,w);return w}},"02f4":function(t,e,n){var r=n("4588"),i=n("be13");t.exports=function(t){return function(e,n){var o,c,a=String(i(e)),u=r(n),f=a.length;return u<0||u>=f?t?"":void 0:(o=a.charCodeAt(u),o<55296||o>56319||u+1===f||(c=a.charCodeAt(u+1))<56320||c>57343?t?a.charAt(u):o:t?a.slice(u,u+2):c-56320+(o-55296<<10)+65536)}}},"0390":function(t,e,n){"use strict";var r=n("02f4")(!0);t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},"06db":function(t,e,n){"use strict";var r=n("23c6"),i={};i[n("2b4c")("toStringTag")]="z",i+""!="[object z]"&&n("2aba")(Object.prototype,"toString",(function(){return"[object "+r(this)+"]"}),!0)},"0bfb":function(t,e,n){"use strict";var r=n("cb7c");t.exports=function(){var t=r(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},"0d58":function(t,e,n){var r=n("ce10"),i=n("e11e");t.exports=Object.keys||function(t){return r(t,i)}},1169:function(t,e,n){var r=n("2d95");t.exports=Array.isArray||function(t){return"Array"==r(t)}},"11e9":function(t,e,n){var r=n("52a7"),i=n("4630"),o=n("6821"),c=n("6a99"),a=n("69a8"),u=n("c69a"),f=Object.getOwnPropertyDescriptor;e.f=n("9e1e")?f:function(t,e){if(t=o(t),e=c(e,!0),u)try{return f(t,e)}catch(n){}if(a(t,e))return i(!r.f.call(t,e),t[e])}},1495:function(t,e,n){var r=n("86cc"),i=n("cb7c"),o=n("0d58");t.exports=n("9e1e")?Object.defineProperties:function(t,e){i(t);var n,c=o(e),a=c.length,u=0;while(a>u)r.f(t,n=c[u++],e[n]);return t}},"214f":function(t,e,n){"use strict";n("b0c5");var r=n("2aba"),i=n("32e9"),o=n("79e5"),c=n("be13"),a=n("2b4c"),u=n("520a"),f=a("species"),s=!o((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$<a>")})),l=function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2===n.length&&"a"===n[0]&&"b"===n[1]}();t.exports=function(t,e,n){var p=a(t),d=!o((function(){var e={};return e[p]=function(){return 7},7!=""[t](e)})),h=d?!o((function(){var e=!1,n=/a/;return n.exec=function(){return e=!0,null},"split"===t&&(n.constructor={},n.constructor[f]=function(){return n}),n[p](""),!e})):void 0;if(!d||!h||"replace"===t&&!s||"split"===t&&!l){var v=/./[p],b=n(c,p,""[t],(function(t,e,n,r,i){return e.exec===u?d&&!i?{done:!0,value:v.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}})),m=b[0],y=b[1];r(String.prototype,t,m),i(RegExp.prototype,p,2==e?function(t,e){return y.call(t,this,e)}:function(t){return y.call(t,this)})}}},"230e":function(t,e,n){var r=n("d3f4"),i=n("7726").document,o=r(i)&&r(i.createElement);t.exports=function(t){return o?i.createElement(t):{}}},"23c6":function(t,e,n){var r=n("2d95"),i=n("2b4c")("toStringTag"),o="Arguments"==r(function(){return arguments}()),c=function(t,e){try{return t[e]}catch(n){}};t.exports=function(t){var e,n,a;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=c(e=Object(t),i))?n:o?r(e):"Object"==(a=r(e))&&"function"==typeof e.callee?"Arguments":a}},2621:function(t,e){e.f=Object.getOwnPropertySymbols},"2aba":function(t,e,n){var r=n("7726"),i=n("32e9"),o=n("69a8"),c=n("ca5a")("src"),a=n("fa5b"),u="toString",f=(""+a).split(u);n("8378").inspectSource=function(t){return a.call(t)},(t.exports=function(t,e,n,a){var u="function"==typeof n;u&&(o(n,"name")||i(n,"name",e)),t[e]!==n&&(u&&(o(n,c)||i(n,c,t[e]?""+t[e]:f.join(String(e)))),t===r?t[e]=n:a?t[e]?t[e]=n:i(t,e,n):(delete t[e],i(t,e,n)))})(Function.prototype,u,(function(){return"function"==typeof this&&this[c]||a.call(this)}))},"2aeb":function(t,e,n){var r=n("cb7c"),i=n("1495"),o=n("e11e"),c=n("613b")("IE_PROTO"),a=function(){},u="prototype",f=function(){var t,e=n("230e")("iframe"),r=o.length,i="<",c=">";e.style.display="none",n("fab2").appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write(i+"script"+c+"document.F=Object"+i+"/script"+c),t.close(),f=t.F;while(r--)delete f[u][o[r]];return f()};t.exports=Object.create||function(t,e){var n;return null!==t?(a[u]=r(t),n=new a,a[u]=null,n[c]=t):n=f(),void 0===e?n:i(n,e)}},"2b4c":function(t,e,n){var r=n("5537")("wks"),i=n("ca5a"),o=n("7726").Symbol,c="function"==typeof o,a=t.exports=function(t){return r[t]||(r[t]=c&&o[t]||(c?o:i)("Symbol."+t))};a.store=r},"2d00":function(t,e){t.exports=!1},"2d95":function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},"32e9":function(t,e,n){var r=n("86cc"),i=n("4630");t.exports=n("9e1e")?function(t,e,n){return r.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},"37c8":function(t,e,n){e.f=n("2b4c")},"38fd":function(t,e,n){var r=n("69a8"),i=n("4bf8"),o=n("613b")("IE_PROTO"),c=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=i(t),r(t,o)?t[o]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?c:null}},"3a72":function(t,e,n){var r=n("7726"),i=n("8378"),o=n("2d00"),c=n("37c8"),a=n("86cc").f;t.exports=function(t){var e=i.Symbol||(i.Symbol=o?{}:r.Symbol||{});"_"==t.charAt(0)||t in e||a(e,t,{value:c.f(t)})}},"41a0":function(t,e,n){"use strict";var r=n("2aeb"),i=n("4630"),o=n("7f20"),c={};n("32e9")(c,n("2b4c")("iterator"),(function(){return this})),t.exports=function(t,e,n){t.prototype=r(c,{next:i(1,n)}),o(t,e+" Iterator")}},4504:function(t,e,n){"use strict";var r=n("5ca1"),i=n("4bf8"),o=n("d8e8"),c=n("86cc");n("9e1e")&&r(r.P+n("c5b4"),"Object",{__defineGetter__:function(t,e){c.f(i(this),t,{get:o(e),enumerable:!0,configurable:!0})}})},4588:function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},4630:function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},"4bf8":function(t,e,n){var r=n("be13");t.exports=function(t){return Object(r(t))}},"504c":function(t,e,n){var r=n("9e1e"),i=n("0d58"),o=n("6821"),c=n("52a7").f;t.exports=function(t){return function(e){var n,a=o(e),u=i(a),f=u.length,s=0,l=[];while(f>s)n=u[s++],r&&!c.call(a,n)||l.push(t?[n,a[n]]:a[n]);return l}}},"520a":function(t,e,n){"use strict";var r=n("0bfb"),i=RegExp.prototype.exec,o=String.prototype.replace,c=i,a="lastIndex",u=function(){var t=/a/,e=/b*/g;return i.call(t,"a"),i.call(e,"a"),0!==t[a]||0!==e[a]}(),f=void 0!==/()??/.exec("")[1],s=u||f;s&&(c=function(t){var e,n,c,s,l=this;return f&&(n=new RegExp("^"+l.source+"$(?!\\s)",r.call(l))),u&&(e=l[a]),c=i.call(l,t),u&&c&&(l[a]=l.global?c.index+c[0].length:e),f&&c&&c.length>1&&o.call(c[0],n,(function(){for(s=1;s<arguments.length-2;s++)void 0===arguments[s]&&(c[s]=void 0)})),c}),t.exports=c},"52a7":function(t,e){e.f={}.propertyIsEnumerable},5537:function(t,e,n){var r=n("8378"),i=n("7726"),o="__core-js_shared__",c=i[o]||(i[o]={});(t.exports=function(t,e){return c[t]||(c[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n("2d00")?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},"5ca1":function(t,e,n){var r=n("7726"),i=n("8378"),o=n("32e9"),c=n("2aba"),a=n("9b43"),u="prototype",f=function(t,e,n){var s,l,p,d,h=t&f.F,v=t&f.G,b=t&f.S,m=t&f.P,y=t&f.B,g=v?r:b?r[e]||(r[e]={}):(r[e]||{})[u],x=v?i:i[e]||(i[e]={}),w=x[u]||(x[u]={});for(s in v&&(n=e),n)l=!h&&g&&void 0!==g[s],p=(l?g:n)[s],d=y&&l?a(p,r):m&&"function"==typeof p?a(Function.call,p):p,g&&c(g,s,p,t&f.U),x[s]!=p&&o(x,s,d),m&&w[s]!=p&&(w[s]=p)};r.core=i,f.F=1,f.G=2,f.S=4,f.P=8,f.B=16,f.W=32,f.U=64,f.R=128,t.exports=f},"5f1b":function(t,e,n){"use strict";var r=n("23c6"),i=RegExp.prototype.exec;t.exports=function(t,e){var n=t.exec;if("function"===typeof n){var o=n.call(t,e);if("object"!==typeof o)throw new TypeError("RegExp exec method returned something other than an Object or null");return o}if("RegExp"!==r(t))throw new TypeError("RegExp#exec called on incompatible receiver");return i.call(t,e)}},"613b":function(t,e,n){var r=n("5537")("keys"),i=n("ca5a");t.exports=function(t){return r[t]||(r[t]=i(t))}},"626a":function(t,e,n){var r=n("2d95");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},"64d5":function(t,e,n){"use strict";var r=n("5ca1"),i=n("4bf8"),o=n("6a99"),c=n("38fd"),a=n("11e9").f;n("9e1e")&&r(r.P+n("c5b4"),"Object",{__lookupSetter__:function(t){var e,n=i(this),r=o(t,!0);do{if(e=a(n,r))return e.set}while(n=c(n))}})},"67ab":function(t,e,n){var r=n("ca5a")("meta"),i=n("d3f4"),o=n("69a8"),c=n("86cc").f,a=0,u=Object.isExtensible||function(){return!0},f=!n("79e5")((function(){return u(Object.preventExtensions({}))})),s=function(t){c(t,r,{value:{i:"O"+ ++a,w:{}}})},l=function(t,e){if(!i(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!o(t,r)){if(!u(t))return"F";if(!e)return"E";s(t)}return t[r].i},p=function(t,e){if(!o(t,r)){if(!u(t))return!0;if(!e)return!1;s(t)}return t[r].w},d=function(t){return f&&h.NEED&&u(t)&&!o(t,r)&&s(t),t},h=t.exports={KEY:r,NEED:!1,fastKey:l,getWeak:p,onFreeze:d}},6821:function(t,e,n){var r=n("626a"),i=n("be13");t.exports=function(t){return r(i(t))}},"69a8":function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},"6a99":function(t,e,n){var r=n("d3f4");t.exports=function(t,e){if(!r(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!r(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},"6b42":function(t,e,n){n("8e6e"),n("8615"),n("ffc1"),n("4504"),n("fee7"),n("b9a1"),n("64d5"),t.exports=n("8378").Object},7333:function(t,e,n){"use strict";var r=n("9e1e"),i=n("0d58"),o=n("2621"),c=n("52a7"),a=n("4bf8"),u=n("626a"),f=Object.assign;t.exports=!f||n("79e5")((function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach((function(t){e[t]=t})),7!=f({},t)[n]||Object.keys(f({},e)).join("")!=r}))?function(t,e){var n=a(t),f=arguments.length,s=1,l=o.f,p=c.f;while(f>s){var d,h=u(arguments[s++]),v=l?i(h).concat(l(h)):i(h),b=v.length,m=0;while(b>m)d=v[m++],r&&!p.call(h,d)||(n[d]=h[d])}return n}:f},7726:function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},"77f1":function(t,e,n){var r=n("4588"),i=Math.max,o=Math.min;t.exports=function(t,e){return t=r(t),t<0?i(t+e,0):o(t,e)}},"79e5":function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},"7bbc":function(t,e,n){var r=n("6821"),i=n("9093").f,o={}.toString,c="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[],a=function(t){try{return i(t)}catch(e){return c.slice()}};t.exports.f=function(t){return c&&"[object Window]"==o.call(t)?a(t):i(r(t))}},"7f20":function(t,e,n){var r=n("86cc").f,i=n("69a8"),o=n("2b4c")("toStringTag");t.exports=function(t,e,n){t&&!i(t=n?t:t.prototype,o)&&r(t,o,{configurable:!0,value:e})}},8086:function(t,e){
16 | /*!
17 |  * micro-schema-validator
18 |  * Damn simple javascript object schema validator
19 |  * 
20 |  * @version v0.1.2
21 |  * @author Array Huang <hyw125@gmail.com>
22 |  * @homepage https://github.com/Array-Huang/micro-schema-validator#readme
23 |  * @repository git+https://github.com/Array-Huang/micro-schema-validator.git
24 |  */
25 | t.exports=function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="./index.js")}({"./index.js":
26 | /*!******************!*\
27 |   !*** ./index.js ***!
28 |   \******************/
29 | /*! no static exports found */function(t,e,n){t.exports=n(/*! ./src */"./src/index.js").default},"./src/error.class.js":
30 | /*!****************************!*\
31 |   !*** ./src/error.class.js ***!
32 |   \****************************/
33 | /*! exports provided: default */function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}n.r(e),n.d(e,"default",(function(){return i}));var i=function t(e){var n=e.columnName,i=e.columnVal,o=e.ruleName,c=e.ruleVal,a=e.msg;r(this,t),this.columnName=n,this.columnVal=i,this.ruleName=o,this.ruleVal=c,this.msg=a}},"./src/index.js":
34 | /*!**********************!*\
35 |   !*** ./src/index.js ***!
36 |   \**********************/
37 | /*! exports provided: default */function(t,e,n){"use strict";n.r(e);var r=n(/*! ./validators */"./src/validators.js"),i=n(/*! ./utils */"./src/utils.js");function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function c(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function a(t,e,n){return e&&c(t.prototype,e),n&&c(t,n),t}var u=function(){function t(e){o(this,t),this._library_name="micro-schema-validator",e||console.warn("Schema can't be empty."),this.schema=e,this.errors=[]}return a(t,[{key:"validate",value:function(t){for(var e in t||console.warn("Validate target can't be empty."),this.schema)if(Object.prototype.hasOwnProperty.call(this.schema,e)){var n=this.schema[e];for(var o in n)if(Object.prototype.hasOwnProperty.call(n,o)){var c=t[e],a=n[o];("required"===o||"undefined"!==typeof c&&!Object(i["isNull"])(c))&&r["default"].check(this.errors,{columnName:e,columnVal:c,ruleName:o,ruleVal:a})}}return{status:0===this.errors.length,errors:this.errors}}},{key:"_getName",value:function(){return this._library_name}}]),t}();e["default"]=u},"./src/utils.js":
38 | /*!**********************!*\
39 |   !*** ./src/utils.js ***!
40 |   \**********************/
41 | /*! exports provided: isNull */function(t,e,n){"use strict";function r(t){return!t&&"undefined"!==typeof t&&0!==t}n.r(e),n.d(e,"isNull",(function(){return r}))},"./src/validators.js":
42 | /*!***************************!*\
43 |   !*** ./src/validators.js ***!
44 |   \***************************/
45 | /*! exports provided: default */function(t,e,n){"use strict";n.r(e);var r=n(/*! ./error.class */"./src/error.class.js"),i=n(/*! ./utils */"./src/utils.js");function o(t){return o="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o(t)}function c(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function a(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?c(n,!0).forEach((function(e){u(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):c(n).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function u(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}e["default"]={originInfo:null,buildError:function(t){return new r["default"](a({},this.originInfo,{msg:t}))},check:function(t,e){var n=e.columnName,i=e.columnVal,o=e.ruleName,c=e.ruleVal,a="".concat(o,"Check");if(this[a]||"function"===typeof this[a]){this.originInfo={columnName:n,columnVal:i,ruleName:o,ruleVal:c};var u=this[a]({columnName:n,columnVal:i,ruleName:o,ruleVal:c});u instanceof r["default"]&&t.push(u)}else console.warn("Unexpected rule found: ".concat(o))},requiredCheck:function(t){var e=t.columnName,n=t.columnVal,r=t.ruleVal;return!r||"undefined"!==typeof n&&!Object(i["isNull"])(n)||this.buildError("RequiredCheck: ".concat(e," is required"))},typeCheck:function(t){var e=t.columnName,n=t.columnVal,r=t.ruleVal,i=r.split("|");0===i.length&&console.warn("TypeCheck: Type requirement should not be empty");var c=o(n);if(i.every((function(t){return"array"===t?!Array.isArray(n):c!==t})))return this.buildError("TypeCheck: ".concat(e," need to be ").concat(r,", but now is ").concat(c))},sizeCheck:function(t){var e,n=t.columnName,r=t.columnVal,i=t.ruleVal;function o(){var t=r.length;return!("number"===typeof i.min&&i.min>0&&t<i.min)&&!("number"===typeof i.max&&i.max>0&&t>i.max)}function c(){return!("number"===typeof i.min&&i.min>0&&r<i.min)&&!("number"===typeof i.max&&i.max>0&&r>i.max)}if("string"===typeof r||Array.isArray(r))e=o();else{if("number"!==typeof r)return void console.warn("SizeCheck: ".concat(n," need to be a string, a number, or an array"));e=c()}if(!e)return this.buildError("SizeCheck failed")}}}})},8378:function(t,e){var n=t.exports={version:"2.6.10"};"number"==typeof __e&&(__e=n)},"84f2":function(t,e){t.exports={}},8615:function(t,e,n){var r=n("5ca1"),i=n("504c")(!1);r(r.S,"Object",{values:function(t){return i(t)}})},"86cc":function(t,e,n){var r=n("cb7c"),i=n("c69a"),o=n("6a99"),c=Object.defineProperty;e.f=n("9e1e")?Object.defineProperty:function(t,e,n){if(r(t),e=o(e,!0),r(n),i)try{return c(t,e,n)}catch(a){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},"8a81":function(t,e,n){"use strict";var r=n("7726"),i=n("69a8"),o=n("9e1e"),c=n("5ca1"),a=n("2aba"),u=n("67ab").KEY,f=n("79e5"),s=n("5537"),l=n("7f20"),p=n("ca5a"),d=n("2b4c"),h=n("37c8"),v=n("3a72"),b=n("d4c0"),m=n("1169"),y=n("cb7c"),g=n("d3f4"),x=n("4bf8"),w=n("6821"),O=n("6a99"),S=n("4630"),j=n("2aeb"),E=n("7bbc"),P=n("11e9"),_=n("2621"),k=n("86cc"),M=n("0d58"),L=P.f,C=k.f,A=E.f,N=r.Symbol,T=r.JSON,H=T&&T.stringify,z="prototype",I=d("_hidden"),V=d("toPrimitive"),W={}.propertyIsEnumerable,F=s("symbol-registry"),D=s("symbols"),R=s("op-symbols"),q=Object[z],G="function"==typeof N&&!!_.f,B=r.QObject,X=!B||!B[z]||!B[z].findChild,$=o&&f((function(){return 7!=j(C({},"a",{get:function(){return C(this,"a",{value:7}).a}})).a}))?function(t,e,n){var r=L(q,e);r&&delete q[e],C(t,e,n),r&&t!==q&&C(q,e,r)}:C,K=function(t){var e=D[t]=j(N[z]);return e._k=t,e},Y=G&&"symbol"==typeof N.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof N},J=function(t,e,n){return t===q&&J(R,e,n),y(t),e=O(e,!0),y(n),i(D,e)?(n.enumerable?(i(t,I)&&t[I][e]&&(t[I][e]=!1),n=j(n,{enumerable:S(0,!1)})):(i(t,I)||C(t,I,S(1,{})),t[I][e]=!0),$(t,e,n)):C(t,e,n)},U=function(t,e){y(t);var n,r=b(e=w(e)),i=0,o=r.length;while(o>i)J(t,n=r[i++],e[n]);return t},Z=function(t,e){return void 0===e?j(t):U(j(t),e)},Q=function(t){var e=W.call(this,t=O(t,!0));return!(this===q&&i(D,t)&&!i(R,t))&&(!(e||!i(this,t)||!i(D,t)||i(this,I)&&this[I][t])||e)},tt=function(t,e){if(t=w(t),e=O(e,!0),t!==q||!i(D,e)||i(R,e)){var n=L(t,e);return!n||!i(D,e)||i(t,I)&&t[I][e]||(n.enumerable=!0),n}},et=function(t){var e,n=A(w(t)),r=[],o=0;while(n.length>o)i(D,e=n[o++])||e==I||e==u||r.push(e);return r},nt=function(t){var e,n=t===q,r=A(n?R:w(t)),o=[],c=0;while(r.length>c)!i(D,e=r[c++])||n&&!i(q,e)||o.push(D[e]);return o};G||(N=function(){if(this instanceof N)throw TypeError("Symbol is not a constructor!");var t=p(arguments.length>0?arguments[0]:void 0),e=function(n){this===q&&e.call(R,n),i(this,I)&&i(this[I],t)&&(this[I][t]=!1),$(this,t,S(1,n))};return o&&X&&$(q,t,{configurable:!0,set:e}),K(t)},a(N[z],"toString",(function(){return this._k})),P.f=tt,k.f=J,n("9093").f=E.f=et,n("52a7").f=Q,_.f=nt,o&&!n("2d00")&&a(q,"propertyIsEnumerable",Q,!0),h.f=function(t){return K(d(t))}),c(c.G+c.W+c.F*!G,{Symbol:N});for(var rt="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),it=0;rt.length>it;)d(rt[it++]);for(var ot=M(d.store),ct=0;ot.length>ct;)v(ot[ct++]);c(c.S+c.F*!G,"Symbol",{for:function(t){return i(F,t+="")?F[t]:F[t]=N(t)},keyFor:function(t){if(!Y(t))throw TypeError(t+" is not a symbol!");for(var e in F)if(F[e]===t)return e},useSetter:function(){X=!0},useSimple:function(){X=!1}}),c(c.S+c.F*!G,"Object",{create:Z,defineProperty:J,defineProperties:U,getOwnPropertyDescriptor:tt,getOwnPropertyNames:et,getOwnPropertySymbols:nt});var at=f((function(){_.f(1)}));c(c.S+c.F*at,"Object",{getOwnPropertySymbols:function(t){return _.f(x(t))}}),T&&c(c.S+c.F*(!G||f((function(){var t=N();return"[null]"!=H([t])||"{}"!=H({a:t})||"{}"!=H(Object(t))}))),"JSON",{stringify:function(t){var e,n,r=[t],i=1;while(arguments.length>i)r.push(arguments[i++]);if(n=e=r[1],(g(e)||void 0!==t)&&!Y(t))return m(e)||(e=function(t,e){if("function"==typeof n&&(e=n.call(this,t,e)),!Y(e))return e}),r[1]=e,H.apply(T,r)}}),N[z][V]||n("32e9")(N[z],V,N[z].valueOf),l(N,"Symbol"),l(Math,"Math",!0),l(r.JSON,"JSON",!0)},"8e6e":function(t,e,n){var r=n("5ca1"),i=n("990b"),o=n("6821"),c=n("11e9"),a=n("f1ae");r(r.S,"Object",{getOwnPropertyDescriptors:function(t){var e,n,r=o(t),u=c.f,f=i(r),s={},l=0;while(f.length>l)n=u(r,e=f[l++]),void 0!==n&&a(s,e,n);return s}})},9093:function(t,e,n){var r=n("ce10"),i=n("e11e").concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,i)}},"990b":function(t,e,n){var r=n("9093"),i=n("2621"),o=n("cb7c"),c=n("7726").Reflect;t.exports=c&&c.ownKeys||function(t){var e=r.f(o(t)),n=i.f;return n?e.concat(n(t)):e}},"9b43":function(t,e,n){var r=n("d8e8");t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,i){return t.call(e,n,r,i)}}return function(){return t.apply(e,arguments)}}},"9c6c":function(t,e,n){var r=n("2b4c")("unscopables"),i=Array.prototype;void 0==i[r]&&n("32e9")(i,r,{}),t.exports=function(t){i[r][t]=!0}},"9def":function(t,e,n){var r=n("4588"),i=Math.min;t.exports=function(t){return t>0?i(r(t),9007199254740991):0}},"9e1e":function(t,e,n){t.exports=!n("79e5")((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},a481:function(t,e,n){"use strict";var r=n("cb7c"),i=n("4bf8"),o=n("9def"),c=n("4588"),a=n("0390"),u=n("5f1b"),f=Math.max,s=Math.min,l=Math.floor,p=/\$([$&`']|\d\d?|<[^>]*>)/g,d=/\$([$&`']|\d\d?)/g,h=function(t){return void 0===t?t:String(t)};n("214f")("replace",2,(function(t,e,n,v){return[function(r,i){var o=t(this),c=void 0==r?void 0:r[e];return void 0!==c?c.call(r,o,i):n.call(String(o),r,i)},function(t,e){var i=v(n,t,this,e);if(i.done)return i.value;var l=r(t),p=String(this),d="function"===typeof e;d||(e=String(e));var m=l.global;if(m){var y=l.unicode;l.lastIndex=0}var g=[];while(1){var x=u(l,p);if(null===x)break;if(g.push(x),!m)break;var w=String(x[0]);""===w&&(l.lastIndex=a(p,o(l.lastIndex),y))}for(var O="",S=0,j=0;j<g.length;j++){x=g[j];for(var E=String(x[0]),P=f(s(c(x.index),p.length),0),_=[],k=1;k<x.length;k++)_.push(h(x[k]));var M=x.groups;if(d){var L=[E].concat(_,P,p);void 0!==M&&L.push(M);var C=String(e.apply(void 0,L))}else C=b(E,p,P,_,M,e);P>=S&&(O+=p.slice(S,P)+C,S=P+E.length)}return O+p.slice(S)}];function b(t,e,r,o,c,a){var u=r+t.length,f=o.length,s=d;return void 0!==c&&(c=i(c),s=p),n.call(a,s,(function(n,i){var a;switch(i.charAt(0)){case"$":return"$";case"&":return t;case"`":return e.slice(0,r);case"'":return e.slice(u);case"<":a=c[i.slice(1,-1)];break;default:var s=+i;if(0===s)return n;if(s>f){var p=l(s/10);return 0===p?n:p<=f?void 0===o[p-1]?i.charAt(1):o[p-1]+i.charAt(1):n}a=o[s-1]}return void 0===a?"":a}))}}))},ac6a:function(t,e,n){for(var r=n("cadf"),i=n("0d58"),o=n("2aba"),c=n("7726"),a=n("32e9"),u=n("84f2"),f=n("2b4c"),s=f("iterator"),l=f("toStringTag"),p=u.Array,d={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},h=i(d),v=0;v<h.length;v++){var b,m=h[v],y=d[m],g=c[m],x=g&&g.prototype;if(x&&(x[s]||a(x,s,p),x[l]||a(x,l,m),u[m]=p,y))for(b in r)x[b]||o(x,b,r[b],!0)}},b0c5:function(t,e,n){"use strict";var r=n("520a");n("5ca1")({target:"RegExp",proto:!0,forced:r!==/./.exec},{exec:r})},b9a1:function(t,e,n){"use strict";var r=n("5ca1"),i=n("4bf8"),o=n("6a99"),c=n("38fd"),a=n("11e9").f;n("9e1e")&&r(r.P+n("c5b4"),"Object",{__lookupGetter__:function(t){var e,n=i(this),r=o(t,!0);do{if(e=a(n,r))return e.get}while(n=c(n))}})},be13:function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on  "+t);return t}},bea1:function(t,e,n){n("8a81"),n("06db"),t.exports=n("8378").Symbol},c366:function(t,e,n){var r=n("6821"),i=n("9def"),o=n("77f1");t.exports=function(t){return function(e,n,c){var a,u=r(e),f=i(u.length),s=o(c,f);if(t&&n!=n){while(f>s)if(a=u[s++],a!=a)return!0}else for(;f>s;s++)if((t||s in u)&&u[s]===n)return t||s||0;return!t&&-1}}},c5b4:function(t,e,n){"use strict";t.exports=n("2d00")||!n("79e5")((function(){var t=Math.random();__defineSetter__.call(null,t,(function(){})),delete n("7726")[t]}))},c69a:function(t,e,n){t.exports=!n("9e1e")&&!n("79e5")((function(){return 7!=Object.defineProperty(n("230e")("div"),"a",{get:function(){return 7}}).a}))},ca5a:function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},cadf:function(t,e,n){"use strict";var r=n("9c6c"),i=n("d53b"),o=n("84f2"),c=n("6821");t.exports=n("01f9")(Array,"Array",(function(t,e){this._t=c(t),this._i=0,this._k=e}),(function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,i(1)):i(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])}),"values"),o.Arguments=o.Array,r("keys"),r("values"),r("entries")},cb7c:function(t,e,n){var r=n("d3f4");t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},ce10:function(t,e,n){var r=n("69a8"),i=n("6821"),o=n("c366")(!1),c=n("613b")("IE_PROTO");t.exports=function(t,e){var n,a=i(t),u=0,f=[];for(n in a)n!=c&&r(a,n)&&f.push(n);while(e.length>u)r(a,n=e[u++])&&(~o(f,n)||f.push(n));return f}},d3f4:function(t,e){t.exports=function(t){return"object"===typeof t?null!==t:"function"===typeof t}},d4c0:function(t,e,n){var r=n("0d58"),i=n("2621"),o=n("52a7");t.exports=function(t){var e=r(t),n=i.f;if(n){var c,a=n(t),u=o.f,f=0;while(a.length>f)u.call(t,c=a[f++])&&e.push(c)}return e}},d53b:function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},d8e8:function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},e11e:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},f1ae:function(t,e,n){"use strict";var r=n("86cc"),i=n("4630");t.exports=function(t,e,n){e in t?r.f(t,e,i(0,n)):t[e]=n}},f6fd:function(t,e){(function(t){var e="currentScript",n=t.getElementsByTagName("script");e in t||Object.defineProperty(t,e,{get:function(){try{throw new Error}catch(r){var t,e=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(r.stack)||[!1])[1];for(t in n)if(n[t].src==e||"interactive"==n[t].readyState)return n[t];return null}}})})(document)},f751:function(t,e,n){var r=n("5ca1");r(r.S+r.F,"Object",{assign:n("7333")})},fa5b:function(t,e,n){t.exports=n("5537")("native-function-to-string",Function.toString)},fab2:function(t,e,n){var r=n("7726").document;t.exports=r&&r.documentElement},fb15:function(t,e,n){"use strict";var r;(n.r(e),"undefined"!==typeof window)&&(n("f6fd"),(r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=r[1]));n("6b42"),n("bea1"),n("f751"),n("ac6a");var i={BORDER_SCOPE:10,AVAILABLE_CLICK_MAX_MOVE_DISTANCE:4,AVAILABLE_CLICK_MAX_RESIZE_DISTANCE:4},o="ontouchstart"in window,c=o?"touchstart":"mousedown",a=o?"touchmove":"mousemove",u=o?"touchend":"mouseup";function f(t){return"number"===typeof t?t+"px":t}function s(){return!!(window.ActiveXObject||"ActiveXObject"in window)}function l(t){var e=o?t.targetTouches[0].clientX:t.clientX,n=o?t.targetTouches[0].clientY:t.clientY;return{x:e,y:n}}function p(t){var e=parseInt(g(t,"left")),n=parseInt(g(t,"top"));return{x:e||0,y:n||0}}function d(t,e,n,r,i){(e||0===e)&&(t.style.left=f(e)),(n||0===n)&&(t.style.top=f(n)),(r||0===r)&&(t.style.right=f(r)),(i||0===i)&&(t.style.bottom=f(i))}function h(t){var e=window.getComputedStyle(t);return{width:e.getPropertyValue("width"),height:e.getPropertyValue("height")}}function v(t,e,n){t.style.width=f(e),t.style.height=f(n)}function b(t){return t.clientX>window.innerWidth||t.clientX<0||t.clientY<0||t.clientY>window.innerHeight}function m(t,e){var n=e.customMoveHandler;if(!n)return!1;var r=document.querySelector(n);return!!r&&r.contains(t)}function y(t,e){var n=e.customMaximizeHandler;if(!n)return!1;var r=document.querySelector(n);return!!r&&r.contains(t)}function g(t,e){var n=window.getComputedStyle(t),r=n.getPropertyValue(e);if(s()){if("left"===e&&"auto"===r){var i=n.getPropertyValue("width"),o=n.getPropertyValue("right");return console.log("left:",window.innerWidth-parseFloat(i)+"px"),window.innerWidth-parseFloat(i)-parseFloat(o)+"px"}if("top"===e&&"auto"===r){var c=n.getPropertyValue("height"),a=n.getPropertyValue("bottom");return console.log("top:",window.innerHeight-parseFloat(c)+"px"),window.innerHeight-parseFloat(c)-parseFloat(a)+"px"}}return r}function x(t,e){var n=i.BORDER_SCOPE,r=t.x,o=t.y,c=e.offsetTop,a=e.offsetLeft,u=e.offsetWidth,f=e.offsetHeight;return Math.abs(a-r)<=n?Math.abs(c-o)<=n?"left-top":Math.abs(c+f-o)<=n?"left-bottom":"left":Math.abs(a+u-r)<=n?Math.abs(c-o)<=n?"right-top":Math.abs(c+f-o)<=n?"right-bottom":"right":Math.abs(c-o)<=n?"top":Math.abs(c+f-o)<=n?"bottom":"middle"}function w(t,e){var n=t.querySelectorAll("iframe");n&&n.length>0&&Array.prototype.forEach.call(n,(function(t){e(t)}))}function O(t){w(t,(function(t){t.style["pointer-events"]="none"}))}function S(t){w(t,(function(t){t.style["pointer-events"]="auto"}))}function j(t){var e=t.x1,n=t.y1,r=t.x2,i=t.y2,o=Math.pow(Math.pow(e-r,2)+Math.pow(n-i,2),.5);return o}n("a481");function E(t,e){var n=e.moveHandler,r=e.maximizeHandler;return t===n||t===r}function P(t,e,n){var r;switch(n){case"top":case"bottom":r="n-resize";break;case"left":case"right":r="e-resize";break;case"left-top":r="nw-resize";break;case"left-bottom":r="sw-resize";break;case"right-top":r="ne-resize";break;case"right-bottom":r="se-resize";break}t.style.cursor=r}function _(t){g(t,"cursor").indexOf("resize")>-1&&(t.style.cursor="")}function k(t){var e=this.params.resizable;return!0===e||!!(Array.isArray(e)&&e.indexOf(t)>-1)}function M(t){var e=t.type,n=t.originSize,r=t.originOffset,i=t.nowPosition,o=t.startPoint,c=t.minWidth,a=t.maxWidth,u=t.minHeight,f=t.maxHeight;function s(t){var e=t.minWidth,n=t.maxWidth,r=t.currentWidth;return e&&r<e?r=e:r<0&&(r=0),n&&r>n&&(r=n),r}function l(t){var e=t.minHeight,n=t.maxHeight,r=t.currentHeight;return e&&r<e?r=e:r<0&&(r=0),n&&r>n&&(r=n),r}var p=i.x-o.x+n.width,d=i.y-o.y+n.height,h=n.width,v=n.height,b=r.y,m=r.x;return e.indexOf("left")>-1&&(h=o.x-i.x+n.width,h=s({minWidth:c,maxWidth:a,currentWidth:h}),m=r.x-(h-n.width)),e.indexOf("top")>-1&&(v=o.y-i.y+n.height,v=l({minHeight:u,maxHeight:f,currentHeight:v}),b=r.y-(v-n.height)),e.indexOf("right")>-1&&(h=s({minWidth:c,maxWidth:a,currentWidth:p})),e.indexOf("bottom")>-1&&(v=l({minHeight:u,maxHeight:f,currentHeight:d})),{calWidth:h,calHeight:v,calTop:b,calLeft:m}}function L(t){function e(t){if(b(t))return!1;var e=l(t),n=M({type:s,originSize:g,originOffset:w,nowPosition:e,startPoint:f,minWidth:o.minWidth,maxWidth:o.maxWidth,minHeight:o.minHeight,maxHeight:o.maxHeight}),r=n.calWidth,a=n.calHeight,u=n.calTop,p=n.calLeft;v(c,r,a),d(c,p,u),t.stopPropagation(),j({x1:e.x,y1:e.y,x2:f.x,y2:f.y})>i.AVAILABLE_CLICK_MAX_RESIZE_DISTANCE&&-1===c.className.indexOf("resizing")&&(c.className+=" resizing")}function n(t){document.removeEventListener(a,e,!1),t.preventDefault(),t.stopPropagation(),setTimeout((function(){c.className=c.className.replace(/ ?resizing/,"")}),0)}var r=t.target,o=this.params,c=this.window,f=l(t),s=x(f,c);if("middle"!==s&&k.call(this,s)&&!m(r,o)&&!y(r,o)){var g=h(c);g={width:parseInt(g.width),height:parseInt(g.height)};var w=p(c);document.addEventListener(a,e,!1),document.addEventListener(u,n),t.preventDefault(),t.stopPropagation()}}function C(t){var e=this.window,n=l(t),r=x(n,e);E(t.target,this)||"middle"===r||!k.call(this,r)?_(this.window):P(this.window,t.target,r)}function A(t,e,n,r){var i={x:e.x-t.x+n.x,y:e.y-t.y+n.y};switch(r){case"horizontal":return{x:i.x,y:n.y};case"vertical":return{x:n.x,y:i.y};case!0:default:return i}}function N(t){function e(t){d(),m=!1,document.removeEventListener(a,n,!1),t.preventDefault(),setTimeout((function(){r.className=r.className.replace(/ ?moving/,"")}),0)}function n(t){if(b(t))return!1;var e=l(t),n=A(o,e,g,c);r.style.top=n.y+"px",r.style.left=n.x+"px",r.style.bottom="auto",r.style.right="auto",j({x1:e.x,y1:e.y,x2:o.x,y2:o.y})>i.AVAILABLE_CLICK_MAX_MOVE_DISTANCE&&-1===r.className.indexOf("moving")&&(r.className+=" moving",m||(f(),m=!0),s())}var r=this.window,o=l(t),c=this.params.movable,f=this.params.moveStartCallback,s=this.params.movingCallback,d=this.params.moveEndCallback,m=!1;if(!this.params.resizable||!this.isMoveHandlerEqualWindow||"middle"===x(o,r)){var y=h(r);y={width:parseInt(y.width),height:parseInt(y.height)},v(r,y.width,y.height),document.addEventListener(a,n,!1),document.addEventListener(u,e);var g=p(r);t.preventDefault()}}function T(t){var e,n,r,i=this.window,o=this.params,c=!1;function a(t,e,n,r){"number"===typeof t&&(i.style.left=t+"px"),"number"===typeof e&&(i.style.top=e+"px"),"number"===typeof n&&(i.style.right=n+"px"),"number"===typeof r&&(i.style.bottom=r+"px")}function u(t,e){i.style.width=t,i.style.height=e}function f(){a(0,0,0,0),u("auto","auto")}t.addEventListener("click",(function(t){c?(i.style.position=r,a(e.x,e.y),u(n.width,n.height),window.removeEventListener("resize",f),c=!1):(e=p(i),n=h(i),f(),c=!0),o.maximizeCallback&&"function"===typeof o.maximizeCallback&&o.maximizeCallback(c),t.stopPropagation()}))}var H=n("8086"),z=n.n(H),I={windowSelector:{type:"string",required:!1},minWidth:{type:"number",size:{min:1}},maxWidth:{type:"number"},minHeight:{type:"number",size:{min:1}},maxHeight:{type:"number"},resizeHandlerClassName:{type:"string"},customMoveHandler:{type:"string"},customMaximizeHandler:{type:"string"},movable:{type:"boolean|string",required:!1},resizable:{type:"boolean|string",required:!1},maximizeCallback:{type:"function"},moveStartCallback:{type:"function",required:!1},movingCallback:{type:"function",required:!1},moveEndCallback:{type:"function",required:!1}};function V(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=new z.a(I),n=e.validate(t);n.status||(console.warn("There are some mistakes in your params to vue-directive-window, please fix them. Otherwise, it will act not like what you expected."),Array.isArray(n.errors)&&n.errors.forEach((function(t){throw console.warn(t.msg),"Params validation failed, so vue-directive-window stopped."})))}var W={minWidth:100,maxWidth:null,minHeight:100,maxHeight:null,movable:!0,resizable:!0,customMoveHandler:null,customMaximizeHandler:null,maximizeCallback:function(){},moveStartCallback:function(){},movingCallback:function(){},moveEndCallback:function(){}};function F(t){return V(t),Object.assign({},W,t)}function D(t,e){var n=t.customMoveHandler;return n?"string"===typeof n?e.querySelector(n):n:e}function R(t,e){var n=t.customMaximizeHandler;return n?"string"===typeof n?e.querySelector(n):n:null}function q(t,e){return t===e}function G(t,e){try{var n=F(e)}catch(f){return void console.warn(f)}t=n.windowSelector?t.querySelector(n.windowSelector):t;var r=D(n,t),i=R(n,t),o={window:t,params:n,moveHandler:r,maximizeHandler:i,isMoveHandlerEqualWindow:q(t,r)};t.addEventListener(c,(function(){O(t),t.addEventListener(u,(function(){S(t)}),{once:!0})})),n.movable&&(r.addEventListener(c,N.bind(o)),r.addEventListener("click",(function(t){r.className.indexOf("moving")>-1&&t.stopImmediatePropagation()}))),n.resizable&&(t.addEventListener(c,L.bind(o)),t.addEventListener(a,C.bind(o))),i&&T.call(o,i),t.addEventListener("click",(function(e){(t.className.indexOf("moving")>-1||t.className.indexOf("resizing")>-1)&&e.stopImmediatePropagation()}))}function B(t){t.directive("window",{bind:function(t,e){var n=e.value;G(t,n)}})}function X(t,e){G(t,e)}var $={install:B,enhanceWindow:X};e["default"]=$},fee7:function(t,e,n){"use strict";var r=n("5ca1"),i=n("4bf8"),o=n("d8e8"),c=n("86cc");n("9e1e")&&r(r.P+n("c5b4"),"Object",{__defineSetter__:function(t,e){c.f(i(this),t,{set:o(e),enumerable:!0,configurable:!0})}})},ffc1:function(t,e,n){var r=n("5ca1"),i=n("504c")(!0);r(r.S,"Object",{entries:function(t){return i(t)}})}})["default"]}));
46 | //# sourceMappingURL=vue-directive-window.umd.min.js.map


--------------------------------------------------------------------------------
/docs/.vuepress/public/vue-directive-window.umd.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * 
 3 |  * vue-directive-window
 4 |  * Vue.js directive that enhance your Modal Window, support drag, resize and maximize.
 5 |  * 
 6 |  * @version v0.7.5
 7 |  * @homepage https://github.com/Array-Huang/vue-directive-window
 8 |  * @repository git+https://github.com/Array-Huang/vue-directive-window.git
 9 |  * 
10 |  * (c) 2019 Array-Huang
11 |  * Released under the MIT License.
12 |  * hash: 1bf4f834a86aacc762d9
13 |  * 
14 |  */
15 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-directive-window"]=e():t["vue-directive-window"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"01f9":function(t,e,n){"use strict";var r=n("2d00"),i=n("5ca1"),o=n("2aba"),c=n("32e9"),a=n("84f2"),u=n("41a0"),f=n("7f20"),s=n("38fd"),l=n("2b4c")("iterator"),p=!([].keys&&"next"in[].keys()),d="@@iterator",h="keys",v="values",b=function(){return this};t.exports=function(t,e,n,m,y,g,x){u(n,e,m);var w,O,S,j=function(t){if(!p&&t in k)return k[t];switch(t){case h:return function(){return new n(this,t)};case v:return function(){return new n(this,t)}}return function(){return new n(this,t)}},E=e+" Iterator",P=y==v,_=!1,k=t.prototype,M=k[l]||k[d]||y&&k[y],L=M||j(y),C=y?P?j("entries"):L:void 0,A="Array"==e&&k.entries||M;if(A&&(S=s(A.call(new t)),S!==Object.prototype&&S.next&&(f(S,E,!0),r||"function"==typeof S[l]||c(S,l,b))),P&&M&&M.name!==v&&(_=!0,L=function(){return M.call(this)}),r&&!x||!p&&!_&&k[l]||c(k,l,L),a[e]=L,a[E]=b,y)if(w={values:P?L:j(v),keys:g?L:j(h),entries:C},x)for(O in w)O in k||o(k,O,w[O]);else i(i.P+i.F*(p||_),e,w);return w}},"02f4":function(t,e,n){var r=n("4588"),i=n("be13");t.exports=function(t){return function(e,n){var o,c,a=String(i(e)),u=r(n),f=a.length;return u<0||u>=f?t?"":void 0:(o=a.charCodeAt(u),o<55296||o>56319||u+1===f||(c=a.charCodeAt(u+1))<56320||c>57343?t?a.charAt(u):o:t?a.slice(u,u+2):c-56320+(o-55296<<10)+65536)}}},"0390":function(t,e,n){"use strict";var r=n("02f4")(!0);t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},"06db":function(t,e,n){"use strict";var r=n("23c6"),i={};i[n("2b4c")("toStringTag")]="z",i+""!="[object z]"&&n("2aba")(Object.prototype,"toString",(function(){return"[object "+r(this)+"]"}),!0)},"0bfb":function(t,e,n){"use strict";var r=n("cb7c");t.exports=function(){var t=r(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},"0d58":function(t,e,n){var r=n("ce10"),i=n("e11e");t.exports=Object.keys||function(t){return r(t,i)}},1169:function(t,e,n){var r=n("2d95");t.exports=Array.isArray||function(t){return"Array"==r(t)}},"11e9":function(t,e,n){var r=n("52a7"),i=n("4630"),o=n("6821"),c=n("6a99"),a=n("69a8"),u=n("c69a"),f=Object.getOwnPropertyDescriptor;e.f=n("9e1e")?f:function(t,e){if(t=o(t),e=c(e,!0),u)try{return f(t,e)}catch(n){}if(a(t,e))return i(!r.f.call(t,e),t[e])}},1495:function(t,e,n){var r=n("86cc"),i=n("cb7c"),o=n("0d58");t.exports=n("9e1e")?Object.defineProperties:function(t,e){i(t);var n,c=o(e),a=c.length,u=0;while(a>u)r.f(t,n=c[u++],e[n]);return t}},"214f":function(t,e,n){"use strict";n("b0c5");var r=n("2aba"),i=n("32e9"),o=n("79e5"),c=n("be13"),a=n("2b4c"),u=n("520a"),f=a("species"),s=!o((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$<a>")})),l=function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2===n.length&&"a"===n[0]&&"b"===n[1]}();t.exports=function(t,e,n){var p=a(t),d=!o((function(){var e={};return e[p]=function(){return 7},7!=""[t](e)})),h=d?!o((function(){var e=!1,n=/a/;return n.exec=function(){return e=!0,null},"split"===t&&(n.constructor={},n.constructor[f]=function(){return n}),n[p](""),!e})):void 0;if(!d||!h||"replace"===t&&!s||"split"===t&&!l){var v=/./[p],b=n(c,p,""[t],(function(t,e,n,r,i){return e.exec===u?d&&!i?{done:!0,value:v.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}})),m=b[0],y=b[1];r(String.prototype,t,m),i(RegExp.prototype,p,2==e?function(t,e){return y.call(t,this,e)}:function(t){return y.call(t,this)})}}},"230e":function(t,e,n){var r=n("d3f4"),i=n("7726").document,o=r(i)&&r(i.createElement);t.exports=function(t){return o?i.createElement(t):{}}},"23c6":function(t,e,n){var r=n("2d95"),i=n("2b4c")("toStringTag"),o="Arguments"==r(function(){return arguments}()),c=function(t,e){try{return t[e]}catch(n){}};t.exports=function(t){var e,n,a;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=c(e=Object(t),i))?n:o?r(e):"Object"==(a=r(e))&&"function"==typeof e.callee?"Arguments":a}},2621:function(t,e){e.f=Object.getOwnPropertySymbols},"2aba":function(t,e,n){var r=n("7726"),i=n("32e9"),o=n("69a8"),c=n("ca5a")("src"),a=n("fa5b"),u="toString",f=(""+a).split(u);n("8378").inspectSource=function(t){return a.call(t)},(t.exports=function(t,e,n,a){var u="function"==typeof n;u&&(o(n,"name")||i(n,"name",e)),t[e]!==n&&(u&&(o(n,c)||i(n,c,t[e]?""+t[e]:f.join(String(e)))),t===r?t[e]=n:a?t[e]?t[e]=n:i(t,e,n):(delete t[e],i(t,e,n)))})(Function.prototype,u,(function(){return"function"==typeof this&&this[c]||a.call(this)}))},"2aeb":function(t,e,n){var r=n("cb7c"),i=n("1495"),o=n("e11e"),c=n("613b")("IE_PROTO"),a=function(){},u="prototype",f=function(){var t,e=n("230e")("iframe"),r=o.length,i="<",c=">";e.style.display="none",n("fab2").appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write(i+"script"+c+"document.F=Object"+i+"/script"+c),t.close(),f=t.F;while(r--)delete f[u][o[r]];return f()};t.exports=Object.create||function(t,e){var n;return null!==t?(a[u]=r(t),n=new a,a[u]=null,n[c]=t):n=f(),void 0===e?n:i(n,e)}},"2b4c":function(t,e,n){var r=n("5537")("wks"),i=n("ca5a"),o=n("7726").Symbol,c="function"==typeof o,a=t.exports=function(t){return r[t]||(r[t]=c&&o[t]||(c?o:i)("Symbol."+t))};a.store=r},"2d00":function(t,e){t.exports=!1},"2d95":function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},"32e9":function(t,e,n){var r=n("86cc"),i=n("4630");t.exports=n("9e1e")?function(t,e,n){return r.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},"37c8":function(t,e,n){e.f=n("2b4c")},"38fd":function(t,e,n){var r=n("69a8"),i=n("4bf8"),o=n("613b")("IE_PROTO"),c=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=i(t),r(t,o)?t[o]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?c:null}},"3a72":function(t,e,n){var r=n("7726"),i=n("8378"),o=n("2d00"),c=n("37c8"),a=n("86cc").f;t.exports=function(t){var e=i.Symbol||(i.Symbol=o?{}:r.Symbol||{});"_"==t.charAt(0)||t in e||a(e,t,{value:c.f(t)})}},"41a0":function(t,e,n){"use strict";var r=n("2aeb"),i=n("4630"),o=n("7f20"),c={};n("32e9")(c,n("2b4c")("iterator"),(function(){return this})),t.exports=function(t,e,n){t.prototype=r(c,{next:i(1,n)}),o(t,e+" Iterator")}},4504:function(t,e,n){"use strict";var r=n("5ca1"),i=n("4bf8"),o=n("d8e8"),c=n("86cc");n("9e1e")&&r(r.P+n("c5b4"),"Object",{__defineGetter__:function(t,e){c.f(i(this),t,{get:o(e),enumerable:!0,configurable:!0})}})},4588:function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},4630:function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},"4bf8":function(t,e,n){var r=n("be13");t.exports=function(t){return Object(r(t))}},"504c":function(t,e,n){var r=n("9e1e"),i=n("0d58"),o=n("6821"),c=n("52a7").f;t.exports=function(t){return function(e){var n,a=o(e),u=i(a),f=u.length,s=0,l=[];while(f>s)n=u[s++],r&&!c.call(a,n)||l.push(t?[n,a[n]]:a[n]);return l}}},"520a":function(t,e,n){"use strict";var r=n("0bfb"),i=RegExp.prototype.exec,o=String.prototype.replace,c=i,a="lastIndex",u=function(){var t=/a/,e=/b*/g;return i.call(t,"a"),i.call(e,"a"),0!==t[a]||0!==e[a]}(),f=void 0!==/()??/.exec("")[1],s=u||f;s&&(c=function(t){var e,n,c,s,l=this;return f&&(n=new RegExp("^"+l.source+"$(?!\\s)",r.call(l))),u&&(e=l[a]),c=i.call(l,t),u&&c&&(l[a]=l.global?c.index+c[0].length:e),f&&c&&c.length>1&&o.call(c[0],n,(function(){for(s=1;s<arguments.length-2;s++)void 0===arguments[s]&&(c[s]=void 0)})),c}),t.exports=c},"52a7":function(t,e){e.f={}.propertyIsEnumerable},5537:function(t,e,n){var r=n("8378"),i=n("7726"),o="__core-js_shared__",c=i[o]||(i[o]={});(t.exports=function(t,e){return c[t]||(c[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n("2d00")?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},"5ca1":function(t,e,n){var r=n("7726"),i=n("8378"),o=n("32e9"),c=n("2aba"),a=n("9b43"),u="prototype",f=function(t,e,n){var s,l,p,d,h=t&f.F,v=t&f.G,b=t&f.S,m=t&f.P,y=t&f.B,g=v?r:b?r[e]||(r[e]={}):(r[e]||{})[u],x=v?i:i[e]||(i[e]={}),w=x[u]||(x[u]={});for(s in v&&(n=e),n)l=!h&&g&&void 0!==g[s],p=(l?g:n)[s],d=y&&l?a(p,r):m&&"function"==typeof p?a(Function.call,p):p,g&&c(g,s,p,t&f.U),x[s]!=p&&o(x,s,d),m&&w[s]!=p&&(w[s]=p)};r.core=i,f.F=1,f.G=2,f.S=4,f.P=8,f.B=16,f.W=32,f.U=64,f.R=128,t.exports=f},"5f1b":function(t,e,n){"use strict";var r=n("23c6"),i=RegExp.prototype.exec;t.exports=function(t,e){var n=t.exec;if("function"===typeof n){var o=n.call(t,e);if("object"!==typeof o)throw new TypeError("RegExp exec method returned something other than an Object or null");return o}if("RegExp"!==r(t))throw new TypeError("RegExp#exec called on incompatible receiver");return i.call(t,e)}},"613b":function(t,e,n){var r=n("5537")("keys"),i=n("ca5a");t.exports=function(t){return r[t]||(r[t]=i(t))}},"626a":function(t,e,n){var r=n("2d95");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},"64d5":function(t,e,n){"use strict";var r=n("5ca1"),i=n("4bf8"),o=n("6a99"),c=n("38fd"),a=n("11e9").f;n("9e1e")&&r(r.P+n("c5b4"),"Object",{__lookupSetter__:function(t){var e,n=i(this),r=o(t,!0);do{if(e=a(n,r))return e.set}while(n=c(n))}})},"67ab":function(t,e,n){var r=n("ca5a")("meta"),i=n("d3f4"),o=n("69a8"),c=n("86cc").f,a=0,u=Object.isExtensible||function(){return!0},f=!n("79e5")((function(){return u(Object.preventExtensions({}))})),s=function(t){c(t,r,{value:{i:"O"+ ++a,w:{}}})},l=function(t,e){if(!i(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!o(t,r)){if(!u(t))return"F";if(!e)return"E";s(t)}return t[r].i},p=function(t,e){if(!o(t,r)){if(!u(t))return!0;if(!e)return!1;s(t)}return t[r].w},d=function(t){return f&&h.NEED&&u(t)&&!o(t,r)&&s(t),t},h=t.exports={KEY:r,NEED:!1,fastKey:l,getWeak:p,onFreeze:d}},6821:function(t,e,n){var r=n("626a"),i=n("be13");t.exports=function(t){return r(i(t))}},"69a8":function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},"6a99":function(t,e,n){var r=n("d3f4");t.exports=function(t,e){if(!r(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!r(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},"6b42":function(t,e,n){n("8e6e"),n("8615"),n("ffc1"),n("4504"),n("fee7"),n("b9a1"),n("64d5"),t.exports=n("8378").Object},7333:function(t,e,n){"use strict";var r=n("9e1e"),i=n("0d58"),o=n("2621"),c=n("52a7"),a=n("4bf8"),u=n("626a"),f=Object.assign;t.exports=!f||n("79e5")((function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach((function(t){e[t]=t})),7!=f({},t)[n]||Object.keys(f({},e)).join("")!=r}))?function(t,e){var n=a(t),f=arguments.length,s=1,l=o.f,p=c.f;while(f>s){var d,h=u(arguments[s++]),v=l?i(h).concat(l(h)):i(h),b=v.length,m=0;while(b>m)d=v[m++],r&&!p.call(h,d)||(n[d]=h[d])}return n}:f},7726:function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},"77f1":function(t,e,n){var r=n("4588"),i=Math.max,o=Math.min;t.exports=function(t,e){return t=r(t),t<0?i(t+e,0):o(t,e)}},"79e5":function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},"7bbc":function(t,e,n){var r=n("6821"),i=n("9093").f,o={}.toString,c="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[],a=function(t){try{return i(t)}catch(e){return c.slice()}};t.exports.f=function(t){return c&&"[object Window]"==o.call(t)?a(t):i(r(t))}},"7f20":function(t,e,n){var r=n("86cc").f,i=n("69a8"),o=n("2b4c")("toStringTag");t.exports=function(t,e,n){t&&!i(t=n?t:t.prototype,o)&&r(t,o,{configurable:!0,value:e})}},8086:function(t,e){
16 | /*!
17 |  * micro-schema-validator
18 |  * Damn simple javascript object schema validator
19 |  * 
20 |  * @version v0.1.2
21 |  * @author Array Huang <hyw125@gmail.com>
22 |  * @homepage https://github.com/Array-Huang/micro-schema-validator#readme
23 |  * @repository git+https://github.com/Array-Huang/micro-schema-validator.git
24 |  */
25 | t.exports=function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="./index.js")}({"./index.js":
26 | /*!******************!*\
27 |   !*** ./index.js ***!
28 |   \******************/
29 | /*! no static exports found */function(t,e,n){t.exports=n(/*! ./src */"./src/index.js").default},"./src/error.class.js":
30 | /*!****************************!*\
31 |   !*** ./src/error.class.js ***!
32 |   \****************************/
33 | /*! exports provided: default */function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}n.r(e),n.d(e,"default",(function(){return i}));var i=function t(e){var n=e.columnName,i=e.columnVal,o=e.ruleName,c=e.ruleVal,a=e.msg;r(this,t),this.columnName=n,this.columnVal=i,this.ruleName=o,this.ruleVal=c,this.msg=a}},"./src/index.js":
34 | /*!**********************!*\
35 |   !*** ./src/index.js ***!
36 |   \**********************/
37 | /*! exports provided: default */function(t,e,n){"use strict";n.r(e);var r=n(/*! ./validators */"./src/validators.js"),i=n(/*! ./utils */"./src/utils.js");function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function c(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function a(t,e,n){return e&&c(t.prototype,e),n&&c(t,n),t}var u=function(){function t(e){o(this,t),this._library_name="micro-schema-validator",e||console.warn("Schema can't be empty."),this.schema=e,this.errors=[]}return a(t,[{key:"validate",value:function(t){for(var e in t||console.warn("Validate target can't be empty."),this.schema)if(Object.prototype.hasOwnProperty.call(this.schema,e)){var n=this.schema[e];for(var o in n)if(Object.prototype.hasOwnProperty.call(n,o)){var c=t[e],a=n[o];("required"===o||"undefined"!==typeof c&&!Object(i["isNull"])(c))&&r["default"].check(this.errors,{columnName:e,columnVal:c,ruleName:o,ruleVal:a})}}return{status:0===this.errors.length,errors:this.errors}}},{key:"_getName",value:function(){return this._library_name}}]),t}();e["default"]=u},"./src/utils.js":
38 | /*!**********************!*\
39 |   !*** ./src/utils.js ***!
40 |   \**********************/
41 | /*! exports provided: isNull */function(t,e,n){"use strict";function r(t){return!t&&"undefined"!==typeof t&&0!==t}n.r(e),n.d(e,"isNull",(function(){return r}))},"./src/validators.js":
42 | /*!***************************!*\
43 |   !*** ./src/validators.js ***!
44 |   \***************************/
45 | /*! exports provided: default */function(t,e,n){"use strict";n.r(e);var r=n(/*! ./error.class */"./src/error.class.js"),i=n(/*! ./utils */"./src/utils.js");function o(t){return o="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o(t)}function c(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function a(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?c(n,!0).forEach((function(e){u(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):c(n).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function u(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}e["default"]={originInfo:null,buildError:function(t){return new r["default"](a({},this.originInfo,{msg:t}))},check:function(t,e){var n=e.columnName,i=e.columnVal,o=e.ruleName,c=e.ruleVal,a="".concat(o,"Check");if(this[a]||"function"===typeof this[a]){this.originInfo={columnName:n,columnVal:i,ruleName:o,ruleVal:c};var u=this[a]({columnName:n,columnVal:i,ruleName:o,ruleVal:c});u instanceof r["default"]&&t.push(u)}else console.warn("Unexpected rule found: ".concat(o))},requiredCheck:function(t){var e=t.columnName,n=t.columnVal,r=t.ruleVal;return!r||"undefined"!==typeof n&&!Object(i["isNull"])(n)||this.buildError("RequiredCheck: ".concat(e," is required"))},typeCheck:function(t){var e=t.columnName,n=t.columnVal,r=t.ruleVal,i=r.split("|");0===i.length&&console.warn("TypeCheck: Type requirement should not be empty");var c=o(n);if(i.every((function(t){return"array"===t?!Array.isArray(n):c!==t})))return this.buildError("TypeCheck: ".concat(e," need to be ").concat(r,", but now is ").concat(c))},sizeCheck:function(t){var e,n=t.columnName,r=t.columnVal,i=t.ruleVal;function o(){var t=r.length;return!("number"===typeof i.min&&i.min>0&&t<i.min)&&!("number"===typeof i.max&&i.max>0&&t>i.max)}function c(){return!("number"===typeof i.min&&i.min>0&&r<i.min)&&!("number"===typeof i.max&&i.max>0&&r>i.max)}if("string"===typeof r||Array.isArray(r))e=o();else{if("number"!==typeof r)return void console.warn("SizeCheck: ".concat(n," need to be a string, a number, or an array"));e=c()}if(!e)return this.buildError("SizeCheck failed")}}}})},8378:function(t,e){var n=t.exports={version:"2.6.10"};"number"==typeof __e&&(__e=n)},"84f2":function(t,e){t.exports={}},8615:function(t,e,n){var r=n("5ca1"),i=n("504c")(!1);r(r.S,"Object",{values:function(t){return i(t)}})},"86cc":function(t,e,n){var r=n("cb7c"),i=n("c69a"),o=n("6a99"),c=Object.defineProperty;e.f=n("9e1e")?Object.defineProperty:function(t,e,n){if(r(t),e=o(e,!0),r(n),i)try{return c(t,e,n)}catch(a){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},"8a81":function(t,e,n){"use strict";var r=n("7726"),i=n("69a8"),o=n("9e1e"),c=n("5ca1"),a=n("2aba"),u=n("67ab").KEY,f=n("79e5"),s=n("5537"),l=n("7f20"),p=n("ca5a"),d=n("2b4c"),h=n("37c8"),v=n("3a72"),b=n("d4c0"),m=n("1169"),y=n("cb7c"),g=n("d3f4"),x=n("4bf8"),w=n("6821"),O=n("6a99"),S=n("4630"),j=n("2aeb"),E=n("7bbc"),P=n("11e9"),_=n("2621"),k=n("86cc"),M=n("0d58"),L=P.f,C=k.f,A=E.f,N=r.Symbol,T=r.JSON,H=T&&T.stringify,z="prototype",I=d("_hidden"),V=d("toPrimitive"),W={}.propertyIsEnumerable,F=s("symbol-registry"),D=s("symbols"),R=s("op-symbols"),q=Object[z],G="function"==typeof N&&!!_.f,B=r.QObject,X=!B||!B[z]||!B[z].findChild,$=o&&f((function(){return 7!=j(C({},"a",{get:function(){return C(this,"a",{value:7}).a}})).a}))?function(t,e,n){var r=L(q,e);r&&delete q[e],C(t,e,n),r&&t!==q&&C(q,e,r)}:C,K=function(t){var e=D[t]=j(N[z]);return e._k=t,e},Y=G&&"symbol"==typeof N.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof N},J=function(t,e,n){return t===q&&J(R,e,n),y(t),e=O(e,!0),y(n),i(D,e)?(n.enumerable?(i(t,I)&&t[I][e]&&(t[I][e]=!1),n=j(n,{enumerable:S(0,!1)})):(i(t,I)||C(t,I,S(1,{})),t[I][e]=!0),$(t,e,n)):C(t,e,n)},U=function(t,e){y(t);var n,r=b(e=w(e)),i=0,o=r.length;while(o>i)J(t,n=r[i++],e[n]);return t},Z=function(t,e){return void 0===e?j(t):U(j(t),e)},Q=function(t){var e=W.call(this,t=O(t,!0));return!(this===q&&i(D,t)&&!i(R,t))&&(!(e||!i(this,t)||!i(D,t)||i(this,I)&&this[I][t])||e)},tt=function(t,e){if(t=w(t),e=O(e,!0),t!==q||!i(D,e)||i(R,e)){var n=L(t,e);return!n||!i(D,e)||i(t,I)&&t[I][e]||(n.enumerable=!0),n}},et=function(t){var e,n=A(w(t)),r=[],o=0;while(n.length>o)i(D,e=n[o++])||e==I||e==u||r.push(e);return r},nt=function(t){var e,n=t===q,r=A(n?R:w(t)),o=[],c=0;while(r.length>c)!i(D,e=r[c++])||n&&!i(q,e)||o.push(D[e]);return o};G||(N=function(){if(this instanceof N)throw TypeError("Symbol is not a constructor!");var t=p(arguments.length>0?arguments[0]:void 0),e=function(n){this===q&&e.call(R,n),i(this,I)&&i(this[I],t)&&(this[I][t]=!1),$(this,t,S(1,n))};return o&&X&&$(q,t,{configurable:!0,set:e}),K(t)},a(N[z],"toString",(function(){return this._k})),P.f=tt,k.f=J,n("9093").f=E.f=et,n("52a7").f=Q,_.f=nt,o&&!n("2d00")&&a(q,"propertyIsEnumerable",Q,!0),h.f=function(t){return K(d(t))}),c(c.G+c.W+c.F*!G,{Symbol:N});for(var rt="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),it=0;rt.length>it;)d(rt[it++]);for(var ot=M(d.store),ct=0;ot.length>ct;)v(ot[ct++]);c(c.S+c.F*!G,"Symbol",{for:function(t){return i(F,t+="")?F[t]:F[t]=N(t)},keyFor:function(t){if(!Y(t))throw TypeError(t+" is not a symbol!");for(var e in F)if(F[e]===t)return e},useSetter:function(){X=!0},useSimple:function(){X=!1}}),c(c.S+c.F*!G,"Object",{create:Z,defineProperty:J,defineProperties:U,getOwnPropertyDescriptor:tt,getOwnPropertyNames:et,getOwnPropertySymbols:nt});var at=f((function(){_.f(1)}));c(c.S+c.F*at,"Object",{getOwnPropertySymbols:function(t){return _.f(x(t))}}),T&&c(c.S+c.F*(!G||f((function(){var t=N();return"[null]"!=H([t])||"{}"!=H({a:t})||"{}"!=H(Object(t))}))),"JSON",{stringify:function(t){var e,n,r=[t],i=1;while(arguments.length>i)r.push(arguments[i++]);if(n=e=r[1],(g(e)||void 0!==t)&&!Y(t))return m(e)||(e=function(t,e){if("function"==typeof n&&(e=n.call(this,t,e)),!Y(e))return e}),r[1]=e,H.apply(T,r)}}),N[z][V]||n("32e9")(N[z],V,N[z].valueOf),l(N,"Symbol"),l(Math,"Math",!0),l(r.JSON,"JSON",!0)},"8e6e":function(t,e,n){var r=n("5ca1"),i=n("990b"),o=n("6821"),c=n("11e9"),a=n("f1ae");r(r.S,"Object",{getOwnPropertyDescriptors:function(t){var e,n,r=o(t),u=c.f,f=i(r),s={},l=0;while(f.length>l)n=u(r,e=f[l++]),void 0!==n&&a(s,e,n);return s}})},9093:function(t,e,n){var r=n("ce10"),i=n("e11e").concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,i)}},"990b":function(t,e,n){var r=n("9093"),i=n("2621"),o=n("cb7c"),c=n("7726").Reflect;t.exports=c&&c.ownKeys||function(t){var e=r.f(o(t)),n=i.f;return n?e.concat(n(t)):e}},"9b43":function(t,e,n){var r=n("d8e8");t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,i){return t.call(e,n,r,i)}}return function(){return t.apply(e,arguments)}}},"9c6c":function(t,e,n){var r=n("2b4c")("unscopables"),i=Array.prototype;void 0==i[r]&&n("32e9")(i,r,{}),t.exports=function(t){i[r][t]=!0}},"9def":function(t,e,n){var r=n("4588"),i=Math.min;t.exports=function(t){return t>0?i(r(t),9007199254740991):0}},"9e1e":function(t,e,n){t.exports=!n("79e5")((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},a481:function(t,e,n){"use strict";var r=n("cb7c"),i=n("4bf8"),o=n("9def"),c=n("4588"),a=n("0390"),u=n("5f1b"),f=Math.max,s=Math.min,l=Math.floor,p=/\$([$&`']|\d\d?|<[^>]*>)/g,d=/\$([$&`']|\d\d?)/g,h=function(t){return void 0===t?t:String(t)};n("214f")("replace",2,(function(t,e,n,v){return[function(r,i){var o=t(this),c=void 0==r?void 0:r[e];return void 0!==c?c.call(r,o,i):n.call(String(o),r,i)},function(t,e){var i=v(n,t,this,e);if(i.done)return i.value;var l=r(t),p=String(this),d="function"===typeof e;d||(e=String(e));var m=l.global;if(m){var y=l.unicode;l.lastIndex=0}var g=[];while(1){var x=u(l,p);if(null===x)break;if(g.push(x),!m)break;var w=String(x[0]);""===w&&(l.lastIndex=a(p,o(l.lastIndex),y))}for(var O="",S=0,j=0;j<g.length;j++){x=g[j];for(var E=String(x[0]),P=f(s(c(x.index),p.length),0),_=[],k=1;k<x.length;k++)_.push(h(x[k]));var M=x.groups;if(d){var L=[E].concat(_,P,p);void 0!==M&&L.push(M);var C=String(e.apply(void 0,L))}else C=b(E,p,P,_,M,e);P>=S&&(O+=p.slice(S,P)+C,S=P+E.length)}return O+p.slice(S)}];function b(t,e,r,o,c,a){var u=r+t.length,f=o.length,s=d;return void 0!==c&&(c=i(c),s=p),n.call(a,s,(function(n,i){var a;switch(i.charAt(0)){case"$":return"$";case"&":return t;case"`":return e.slice(0,r);case"'":return e.slice(u);case"<":a=c[i.slice(1,-1)];break;default:var s=+i;if(0===s)return n;if(s>f){var p=l(s/10);return 0===p?n:p<=f?void 0===o[p-1]?i.charAt(1):o[p-1]+i.charAt(1):n}a=o[s-1]}return void 0===a?"":a}))}}))},ac6a:function(t,e,n){for(var r=n("cadf"),i=n("0d58"),o=n("2aba"),c=n("7726"),a=n("32e9"),u=n("84f2"),f=n("2b4c"),s=f("iterator"),l=f("toStringTag"),p=u.Array,d={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},h=i(d),v=0;v<h.length;v++){var b,m=h[v],y=d[m],g=c[m],x=g&&g.prototype;if(x&&(x[s]||a(x,s,p),x[l]||a(x,l,m),u[m]=p,y))for(b in r)x[b]||o(x,b,r[b],!0)}},b0c5:function(t,e,n){"use strict";var r=n("520a");n("5ca1")({target:"RegExp",proto:!0,forced:r!==/./.exec},{exec:r})},b9a1:function(t,e,n){"use strict";var r=n("5ca1"),i=n("4bf8"),o=n("6a99"),c=n("38fd"),a=n("11e9").f;n("9e1e")&&r(r.P+n("c5b4"),"Object",{__lookupGetter__:function(t){var e,n=i(this),r=o(t,!0);do{if(e=a(n,r))return e.get}while(n=c(n))}})},be13:function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on  "+t);return t}},bea1:function(t,e,n){n("8a81"),n("06db"),t.exports=n("8378").Symbol},c366:function(t,e,n){var r=n("6821"),i=n("9def"),o=n("77f1");t.exports=function(t){return function(e,n,c){var a,u=r(e),f=i(u.length),s=o(c,f);if(t&&n!=n){while(f>s)if(a=u[s++],a!=a)return!0}else for(;f>s;s++)if((t||s in u)&&u[s]===n)return t||s||0;return!t&&-1}}},c5b4:function(t,e,n){"use strict";t.exports=n("2d00")||!n("79e5")((function(){var t=Math.random();__defineSetter__.call(null,t,(function(){})),delete n("7726")[t]}))},c69a:function(t,e,n){t.exports=!n("9e1e")&&!n("79e5")((function(){return 7!=Object.defineProperty(n("230e")("div"),"a",{get:function(){return 7}}).a}))},ca5a:function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},cadf:function(t,e,n){"use strict";var r=n("9c6c"),i=n("d53b"),o=n("84f2"),c=n("6821");t.exports=n("01f9")(Array,"Array",(function(t,e){this._t=c(t),this._i=0,this._k=e}),(function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,i(1)):i(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])}),"values"),o.Arguments=o.Array,r("keys"),r("values"),r("entries")},cb7c:function(t,e,n){var r=n("d3f4");t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},ce10:function(t,e,n){var r=n("69a8"),i=n("6821"),o=n("c366")(!1),c=n("613b")("IE_PROTO");t.exports=function(t,e){var n,a=i(t),u=0,f=[];for(n in a)n!=c&&r(a,n)&&f.push(n);while(e.length>u)r(a,n=e[u++])&&(~o(f,n)||f.push(n));return f}},d3f4:function(t,e){t.exports=function(t){return"object"===typeof t?null!==t:"function"===typeof t}},d4c0:function(t,e,n){var r=n("0d58"),i=n("2621"),o=n("52a7");t.exports=function(t){var e=r(t),n=i.f;if(n){var c,a=n(t),u=o.f,f=0;while(a.length>f)u.call(t,c=a[f++])&&e.push(c)}return e}},d53b:function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},d8e8:function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},e11e:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},f1ae:function(t,e,n){"use strict";var r=n("86cc"),i=n("4630");t.exports=function(t,e,n){e in t?r.f(t,e,i(0,n)):t[e]=n}},f6fd:function(t,e){(function(t){var e="currentScript",n=t.getElementsByTagName("script");e in t||Object.defineProperty(t,e,{get:function(){try{throw new Error}catch(r){var t,e=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(r.stack)||[!1])[1];for(t in n)if(n[t].src==e||"interactive"==n[t].readyState)return n[t];return null}}})})(document)},f751:function(t,e,n){var r=n("5ca1");r(r.S+r.F,"Object",{assign:n("7333")})},fa5b:function(t,e,n){t.exports=n("5537")("native-function-to-string",Function.toString)},fab2:function(t,e,n){var r=n("7726").document;t.exports=r&&r.documentElement},fb15:function(t,e,n){"use strict";var r;(n.r(e),"undefined"!==typeof window)&&(n("f6fd"),(r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=r[1]));n("6b42"),n("bea1"),n("f751"),n("ac6a");var i={BORDER_SCOPE:10,AVAILABLE_CLICK_MAX_MOVE_DISTANCE:4,AVAILABLE_CLICK_MAX_RESIZE_DISTANCE:4},o="ontouchstart"in window,c=o?"touchstart":"mousedown",a=o?"touchmove":"mousemove",u=o?"touchend":"mouseup";function f(t){return"number"===typeof t?t+"px":t}function s(){return!!(window.ActiveXObject||"ActiveXObject"in window)}function l(t){var e=o?t.targetTouches[0].clientX:t.clientX,n=o?t.targetTouches[0].clientY:t.clientY;return{x:e,y:n}}function p(t){var e=parseInt(g(t,"left")),n=parseInt(g(t,"top"));return{x:e||0,y:n||0}}function d(t,e,n,r,i){(e||0===e)&&(t.style.left=f(e)),(n||0===n)&&(t.style.top=f(n)),(r||0===r)&&(t.style.right=f(r)),(i||0===i)&&(t.style.bottom=f(i))}function h(t){var e=window.getComputedStyle(t);return{width:e.getPropertyValue("width"),height:e.getPropertyValue("height")}}function v(t,e,n){t.style.width=f(e),t.style.height=f(n)}function b(t){return t.clientX>window.innerWidth||t.clientX<0||t.clientY<0||t.clientY>window.innerHeight}function m(t,e){var n=e.customMoveHandler;if(!n)return!1;var r=document.querySelector(n);return!!r&&r.contains(t)}function y(t,e){var n=e.customMaximizeHandler;if(!n)return!1;var r=document.querySelector(n);return!!r&&r.contains(t)}function g(t,e){var n=window.getComputedStyle(t),r=n.getPropertyValue(e);if(s()){if("left"===e&&"auto"===r){var i=n.getPropertyValue("width"),o=n.getPropertyValue("right");return console.log("left:",window.innerWidth-parseFloat(i)+"px"),window.innerWidth-parseFloat(i)-parseFloat(o)+"px"}if("top"===e&&"auto"===r){var c=n.getPropertyValue("height"),a=n.getPropertyValue("bottom");return console.log("top:",window.innerHeight-parseFloat(c)+"px"),window.innerHeight-parseFloat(c)-parseFloat(a)+"px"}}return r}function x(t,e){var n=i.BORDER_SCOPE,r=t.x,o=t.y,c=e.offsetTop,a=e.offsetLeft,u=e.offsetWidth,f=e.offsetHeight;return Math.abs(a-r)<=n?Math.abs(c-o)<=n?"left-top":Math.abs(c+f-o)<=n?"left-bottom":"left":Math.abs(a+u-r)<=n?Math.abs(c-o)<=n?"right-top":Math.abs(c+f-o)<=n?"right-bottom":"right":Math.abs(c-o)<=n?"top":Math.abs(c+f-o)<=n?"bottom":"middle"}function w(t,e){var n=t.querySelectorAll("iframe");n&&n.length>0&&Array.prototype.forEach.call(n,(function(t){e(t)}))}function O(t){w(t,(function(t){t.style["pointer-events"]="none"}))}function S(t){w(t,(function(t){t.style["pointer-events"]="auto"}))}function j(t){var e=t.x1,n=t.y1,r=t.x2,i=t.y2,o=Math.pow(Math.pow(e-r,2)+Math.pow(n-i,2),.5);return o}n("a481");function E(t,e){var n=e.moveHandler,r=e.maximizeHandler;return t===n||t===r}function P(t,e,n){var r;switch(n){case"top":case"bottom":r="n-resize";break;case"left":case"right":r="e-resize";break;case"left-top":r="nw-resize";break;case"left-bottom":r="sw-resize";break;case"right-top":r="ne-resize";break;case"right-bottom":r="se-resize";break}t.style.cursor=r}function _(t){g(t,"cursor").indexOf("resize")>-1&&(t.style.cursor="")}function k(t){var e=this.params.resizable;return!0===e||!!(Array.isArray(e)&&e.indexOf(t)>-1)}function M(t){var e=t.type,n=t.originSize,r=t.originOffset,i=t.nowPosition,o=t.startPoint,c=t.minWidth,a=t.maxWidth,u=t.minHeight,f=t.maxHeight;function s(t){var e=t.minWidth,n=t.maxWidth,r=t.currentWidth;return e&&r<e?r=e:r<0&&(r=0),n&&r>n&&(r=n),r}function l(t){var e=t.minHeight,n=t.maxHeight,r=t.currentHeight;return e&&r<e?r=e:r<0&&(r=0),n&&r>n&&(r=n),r}var p=i.x-o.x+n.width,d=i.y-o.y+n.height,h=n.width,v=n.height,b=r.y,m=r.x;return e.indexOf("left")>-1&&(h=o.x-i.x+n.width,h=s({minWidth:c,maxWidth:a,currentWidth:h}),m=r.x-(h-n.width)),e.indexOf("top")>-1&&(v=o.y-i.y+n.height,v=l({minHeight:u,maxHeight:f,currentHeight:v}),b=r.y-(v-n.height)),e.indexOf("right")>-1&&(h=s({minWidth:c,maxWidth:a,currentWidth:p})),e.indexOf("bottom")>-1&&(v=l({minHeight:u,maxHeight:f,currentHeight:d})),{calWidth:h,calHeight:v,calTop:b,calLeft:m}}function L(t){function e(t){if(b(t))return!1;var e=l(t),n=M({type:s,originSize:g,originOffset:w,nowPosition:e,startPoint:f,minWidth:o.minWidth,maxWidth:o.maxWidth,minHeight:o.minHeight,maxHeight:o.maxHeight}),r=n.calWidth,a=n.calHeight,u=n.calTop,p=n.calLeft;v(c,r,a),d(c,p,u),t.stopPropagation(),j({x1:e.x,y1:e.y,x2:f.x,y2:f.y})>i.AVAILABLE_CLICK_MAX_RESIZE_DISTANCE&&-1===c.className.indexOf("resizing")&&(c.className+=" resizing")}function n(t){document.removeEventListener(a,e,!1),t.preventDefault(),t.stopPropagation(),setTimeout((function(){c.className=c.className.replace(/ ?resizing/,"")}),0)}var r=t.target,o=this.params,c=this.window,f=l(t),s=x(f,c);if("middle"!==s&&k.call(this,s)&&!m(r,o)&&!y(r,o)){var g=h(c);g={width:parseInt(g.width),height:parseInt(g.height)};var w=p(c);document.addEventListener(a,e,!1),document.addEventListener(u,n),t.preventDefault(),t.stopPropagation()}}function C(t){var e=this.window,n=l(t),r=x(n,e);E(t.target,this)||"middle"===r||!k.call(this,r)?_(this.window):P(this.window,t.target,r)}function A(t,e,n,r){var i={x:e.x-t.x+n.x,y:e.y-t.y+n.y};switch(r){case"horizontal":return{x:i.x,y:n.y};case"vertical":return{x:n.x,y:i.y};case!0:default:return i}}function N(t){function e(t){d(),m=!1,document.removeEventListener(a,n,!1),t.preventDefault(),setTimeout((function(){r.className=r.className.replace(/ ?moving/,"")}),0)}function n(t){if(b(t))return!1;var e=l(t),n=A(o,e,g,c);r.style.top=n.y+"px",r.style.left=n.x+"px",r.style.bottom="auto",r.style.right="auto",j({x1:e.x,y1:e.y,x2:o.x,y2:o.y})>i.AVAILABLE_CLICK_MAX_MOVE_DISTANCE&&-1===r.className.indexOf("moving")&&(r.className+=" moving",m||(f(),m=!0),s())}var r=this.window,o=l(t),c=this.params.movable,f=this.params.moveStartCallback,s=this.params.movingCallback,d=this.params.moveEndCallback,m=!1;if(!this.params.resizable||!this.isMoveHandlerEqualWindow||"middle"===x(o,r)){var y=h(r);y={width:parseInt(y.width),height:parseInt(y.height)},v(r,y.width,y.height),document.addEventListener(a,n,!1),document.addEventListener(u,e);var g=p(r);t.preventDefault()}}function T(t){var e,n,r,i=this.window,o=this.params,c=!1;function a(t,e,n,r){"number"===typeof t&&(i.style.left=t+"px"),"number"===typeof e&&(i.style.top=e+"px"),"number"===typeof n&&(i.style.right=n+"px"),"number"===typeof r&&(i.style.bottom=r+"px")}function u(t,e){i.style.width=t,i.style.height=e}function f(){a(0,0,0,0),u("auto","auto")}t.addEventListener("click",(function(t){c?(i.style.position=r,a(e.x,e.y),u(n.width,n.height),window.removeEventListener("resize",f),c=!1):(e=p(i),n=h(i),f(),c=!0),o.maximizeCallback&&"function"===typeof o.maximizeCallback&&o.maximizeCallback(c),t.stopPropagation()}))}var H=n("8086"),z=n.n(H),I={windowSelector:{type:"string",required:!1},minWidth:{type:"number",size:{min:1}},maxWidth:{type:"number"},minHeight:{type:"number",size:{min:1}},maxHeight:{type:"number"},resizeHandlerClassName:{type:"string"},customMoveHandler:{type:"string"},customMaximizeHandler:{type:"string"},movable:{type:"boolean|string",required:!1},resizable:{type:"boolean|string",required:!1},maximizeCallback:{type:"function"},moveStartCallback:{type:"function",required:!1},movingCallback:{type:"function",required:!1},moveEndCallback:{type:"function",required:!1}};function V(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=new z.a(I),n=e.validate(t);n.status||(console.warn("There are some mistakes in your params to vue-directive-window, please fix them. Otherwise, it will act not like what you expected."),Array.isArray(n.errors)&&n.errors.forEach((function(t){throw console.warn(t.msg),"Params validation failed, so vue-directive-window stopped."})))}var W={minWidth:100,maxWidth:null,minHeight:100,maxHeight:null,movable:!0,resizable:!0,customMoveHandler:null,customMaximizeHandler:null,maximizeCallback:function(){},moveStartCallback:function(){},movingCallback:function(){},moveEndCallback:function(){}};function F(t){return V(t),Object.assign({},W,t)}function D(t,e){var n=t.customMoveHandler;return n?"string"===typeof n?e.querySelector(n):n:e}function R(t,e){var n=t.customMaximizeHandler;return n?"string"===typeof n?e.querySelector(n):n:null}function q(t,e){return t===e}function G(t,e){try{var n=F(e)}catch(f){return void console.warn(f)}t=n.windowSelector?t.querySelector(n.windowSelector):t;var r=D(n,t),i=R(n,t),o={window:t,params:n,moveHandler:r,maximizeHandler:i,isMoveHandlerEqualWindow:q(t,r)};t.addEventListener(c,(function(){O(t),t.addEventListener(u,(function(){S(t)}),{once:!0})})),n.movable&&(r.addEventListener(c,N.bind(o)),r.addEventListener("click",(function(t){r.className.indexOf("moving")>-1&&t.stopImmediatePropagation()}))),n.resizable&&(t.addEventListener(c,L.bind(o)),t.addEventListener(a,C.bind(o))),i&&T.call(o,i),t.addEventListener("click",(function(e){(t.className.indexOf("moving")>-1||t.className.indexOf("resizing")>-1)&&e.stopImmediatePropagation()}))}function B(t){t.directive("window",{bind:function(t,e){var n=e.value;G(t,n)}})}function X(t,e){G(t,e)}var $={install:B,enhanceWindow:X};e["default"]=$},fee7:function(t,e,n){"use strict";var r=n("5ca1"),i=n("4bf8"),o=n("d8e8"),c=n("86cc");n("9e1e")&&r(r.P+n("c5b4"),"Object",{__defineSetter__:function(t,e){c.f(i(this),t,{set:o(e),enumerable:!0,configurable:!0})}})},ffc1:function(t,e,n){var r=n("5ca1"),i=n("504c")(!0);r(r.S,"Object",{entries:function(t){return i(t)}})}})["default"]}));
46 | //# sourceMappingURL=vue-directive-window.umd.min.js.map


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