From f7046b94af98bf0b0cedbeae0450e5adfe26f673 Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 7 Jul 2017 11:43:56 +0800 Subject: [PATCH] init --- .babelrc | 5 + .eslintignore | 2 + .eslintrc.js | 318 +++++++++++++++++++++++++++++++++++++ .gitignore | 4 + README.md | 1 + demo/index.css | 26 +++ demo/index.html | 70 ++++++++ dist/vue-split-pan.min.js | 1 + package.json | 36 +++++ src/index.js | 5 + src/split-pane/index.vue | 115 ++++++++++++++ src/split-pane/pane.vue | 44 +++++ src/split-pane/resizer.vue | 72 +++++++++ webpack.config.js | 87 ++++++++++ 14 files changed, 786 insertions(+) create mode 100644 .babelrc create mode 100644 .eslintignore create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 README.md create mode 100644 demo/index.css create mode 100644 demo/index.html create mode 100644 dist/vue-split-pan.min.js create mode 100644 package.json create mode 100644 src/index.js create mode 100644 src/split-pane/index.vue create mode 100644 src/split-pane/pane.vue create mode 100644 src/split-pane/resizer.vue create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..8252a86 --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ + +{ + "presets": ["es2015", "stage-2"], + "plugins": ["transform-runtime"] +} diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..34af377 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +build/*.js +config/*.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..a388ba2 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,318 @@ +module.exports = { + root: true, + parser: 'babel-eslint', + parserOptions: { + sourceType: 'module' + }, + env: { + browser: true, + node: true + }, + extends: 'eslint:recommended', + // required to lint *.vue files + plugins: [ + 'html' + ], + // check if imports actually resolve + 'settings': { + 'import/resolver': { + 'webpack': { + 'config': 'build/webpack.base.conf.js' + } + } + }, + // add your custom rules here + 'rules': { + // don't require .vue extension when importing + // 'import/extensions': ['error', 'always', { + // 'js': 'never', + // 'vue': 'never' + // }], + // allow debugger during development + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, + /* + * Possible Errors + */ + + // disallow unnecessary parentheses + 'no-extra-parens': ['error', 'all', {'nestedBinaryExpressions': false}], + + // disallow negating the left operand of relational operators + 'no-unsafe-negation': 'error', + + // enforce valid JSDoc comments + 'valid-jsdoc': 'off', + + /* + * Best Practices + */ + + // enforce return statements in callbacks of array methods + 'array-callback-return': 'error', + + // enforce consistent brace style for all control statements + curly: ['error', 'multi-line'], + + // enforce consistent newlines before and after dots + 'dot-location': ['error', 'property'], + + // enforce dot notation whenever possible + 'dot-notation': 'error', + + // require the use of === and !== + 'eqeqeq': ['error', 'smart'], + + // disallow the use of arguments.caller or arguments.callee + 'no-caller': 'error', + + // disallow empty functions + 'no-empty-function': 'error', + + // disallow unnecessary calls to .bind() + 'no-extra-bind': 'error', + + // disallow unnecessary labels + 'no-extra-label': 'error', + + // disallow leading or trailing decimal points in numeric literals + 'no-floating-decimal': 'error', + + // disallow assignments to native objects or read-only global variables + 'no-global-assign': 'error', + + // disallow the use of eval()-like methods + 'no-implied-eval': 'error', + + // disallow the use of the __iterator__ property + 'no-iterator': 'error', + + // disallow unnecessary nested blocks + 'no-lone-blocks': 'error', + + // disallow multiple spaces + 'no-multi-spaces': 'error', + + // disallow new operators with the String, Number, and Boolean objects + 'no-new-wrappers': 'error', + + // disallow octal escape sequences in string literals + 'no-octal-escape': 'error', + + // disallow the use of the __proto__ property + 'no-proto': 'error', + + // disallow comparisons where both sides are exactly the same + 'no-self-compare': 'error', + + // disallow throwing literals as exceptions + 'no-throw-literal': 'error', + + // disallow unused expressions + 'no-unused-expressions': 'error', + + // disallow unnecessary calls to .call() and .apply() + 'no-useless-call': 'error', + + // disallow unnecessary concatenation of literals or template literals + 'no-useless-concat': 'error', + + // disallow unnecessary escape characters + 'no-useless-escape': 'error', + + // disallow void operators + 'no-void': 'error', + + // require parentheses around immediate function invocations + 'wrap-iife': 'error', + + // require or disallow “Yoda” conditions + yoda: 'error', + + /* + * Variables + */ + + // disallow labels that share a name with a variable + 'no-label-var': 'error', + + // disallow initializing variables to undefined + 'no-undef-init': 'error', + 'no-undef': 'off', + // disallow the use of variables before they are defined + 'no-use-before-define': 'error', + + /* + * Node.js and CommonJS + */ + + // disallow new operators with calls to require + 'no-new-require': 'error', + + /* + * Stylistic Issues + */ + + // enforce consistent spacing inside array brackets + 'array-bracket-spacing': 'error', + + // enforce consistent spacing inside single-line blocks + 'block-spacing': 'error', + + // enforce consistent brace style for blocks + 'brace-style': ['error', '1tbs', {'allowSingleLine': true}], + + // require or disallow trailing commas + 'comma-dangle': 'error', + + // enforce consistent spacing before and after commas + 'comma-spacing': 'error', + + // enforce consistent comma style + 'comma-style': 'error', + + // enforce consistent spacing inside computed property brackets + 'computed-property-spacing': 'error', + + // require or disallow spacing between function identifiers and their invocations + 'func-call-spacing': 'error', + + // enforce consistent indentation + indent: ['error', 2, {SwitchCase: 1}], + + // enforce the consistent use of either double or single quotes in JSX attributes + 'jsx-quotes': 'error', + + // enforce consistent spacing between keys and values in object literal properties + 'key-spacing': 'error', + + // enforce consistent spacing before and after keywords + 'keyword-spacing': 'error', + + // enforce consistent linebreak style + 'linebreak-style': 'error', + + // require or disallow newlines around directives + 'lines-around-directive': 'error', + + // require constructor names to begin with a capital letter + 'new-cap': 'off', + + // require parentheses when invoking a constructor with no arguments + 'new-parens': 'error', + + // disallow Array constructors + 'no-array-constructor': 'error', + + // disallow Object constructors + 'no-new-object': 'error', + + // disallow trailing whitespace at the end of lines + 'no-trailing-spaces': 'error', + + // disallow ternary operators when simpler alternatives exist + 'no-unneeded-ternary': 'error', + + // disallow whitespace before properties + 'no-whitespace-before-property': 'error', + + // enforce consistent spacing inside braces + 'object-curly-spacing': ['error', 'always'], + + // require or disallow padding within blocks + 'padded-blocks': ['error', 'never'], + + // require quotes around object literal property names + 'quote-props': ['error', 'as-needed'], + + // enforce the consistent use of either backticks, double, or single quotes + quotes: ['error', 'single'], + + // enforce consistent spacing before and after semicolons + 'semi-spacing': 'error', + + // require or disallow semicolons instead of ASI + // semi: ['error', 'never'], + + // enforce consistent spacing before blocks + 'space-before-blocks': 'error', + + 'no-console': 'off', + + // enforce consistent spacing before function definition opening parenthesis + 'space-before-function-paren': ['error', 'never'], + + // enforce consistent spacing inside parentheses + 'space-in-parens': 'error', + + // require spacing around infix operators + 'space-infix-ops': 'error', + + // enforce consistent spacing before or after unary operators + 'space-unary-ops': 'error', + + // enforce consistent spacing after the // or /* in a comment + 'spaced-comment': 'error', + + // require or disallow Unicode byte order mark (BOM) + 'unicode-bom': 'error', + + + /* + * ECMAScript 6 + */ + + // require braces around arrow function bodies + 'arrow-body-style': 'error', + + // require parentheses around arrow function arguments + 'arrow-parens': ['error', 'as-needed'], + + // enforce consistent spacing before and after the arrow in arrow functions + 'arrow-spacing': 'error', + + // enforce consistent spacing around * operators in generator functions + 'generator-star-spacing': ['error', 'after'], + + // disallow duplicate module imports + 'no-duplicate-imports': 'error', + + // disallow unnecessary computed property keys in object literals + 'no-useless-computed-key': 'error', + + // disallow unnecessary constructors + 'no-useless-constructor': 'error', + + // disallow renaming import, export, and destructured assignments to the same name + 'no-useless-rename': 'error', + + // require let or const instead of var + 'no-var': 'error', + + // require or disallow method and property shorthand syntax for object literals + 'object-shorthand': 'error', + + // require arrow functions as callbacks + 'prefer-arrow-callback': 'error', + + // require const declarations for variables that are never reassigned after declared + 'prefer-const': 'error', + + // disallow parseInt() in favor of binary, octal, and hexadecimal literals + 'prefer-numeric-literals': 'error', + + // require rest parameters instead of arguments + 'prefer-rest-params': 'error', + + // require spread operators instead of .apply() + 'prefer-spread': 'error', + + // enforce spacing between rest and spread operators and their expressions + 'rest-spread-spacing': 'error', + + // require or disallow spacing around embedded expressions of template strings + 'template-curly-spacing': 'error', + + // require or disallow spacing around the * in yield* expressions + 'yield-star-spacing': 'error' + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..219fb81 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +node_modules/ +npm-debug.log +yarn-error.log diff --git a/README.md b/README.md new file mode 100644 index 0000000..b1b7161 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +init diff --git a/demo/index.css b/demo/index.css new file mode 100644 index 0000000..d63dcc8 --- /dev/null +++ b/demo/index.css @@ -0,0 +1,26 @@ + .components-container { + position: relative; + height: 100vh; + } + + .left-container { + background-color: #F38181; + height: 100%; + } + + .right-container { + background-color: #FCE38A; + height: 200px; + } + + .top-container { + background-color: #FCE38A; + width: 100%; + height: 100%; + } + + .bottom-container { + width: 100%; + background-color: #95E1D3; + height: 100%; + } diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..dd79bda --- /dev/null +++ b/demo/index.html @@ -0,0 +1,70 @@ + + + + + + vue-count-to + + + + + + + + + +
+ + +
+ + + + + diff --git a/dist/vue-split-pan.min.js b/dist/vue-split-pan.min.js new file mode 100644 index 0000000..4e5100d --- /dev/null +++ b/dist/vue-split-pan.min.js @@ -0,0 +1 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("SplitPane",[],t):"object"==typeof exports?exports.SplitPane=t():e.SplitPane=t()}(this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=19)}([function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;tr.parts.length&&(n.parts.length=r.parts.length)}else{for(var o=[],i=0;i=0},required:!0}},computed:{userSelect:function(){return this.active?"none":""},cursor:function(){return this.active?"col-resize":""}},data:function(){return{active:!1,hasMoved:!1,height:null,percent:50,type:"vertical"===this.split?"width":"height",resizeType:"vertical"===this.split?"left":"top"}},methods:{onClick:function(){this.hasMoved||(this.percent=50,this.$emit("resize"))},onMouseDown:function(){this.active=!0,this.hasMoved=!1},onMouseUp:function(){this.active=!1},onMouseMove:function(e){if(0!==e.buttons&&0!==e.which||(this.active=!1),this.active){var t=0,r=e.currentTarget;if("vertical"===this.split)for(;r;)t+=r.offsetLeft,r=r.offsetParent;else for(;r;)t+=r.offsetTop,r=r.offsetParent;var n="vertical"===this.split?e.pageX:e.pageY,i="vertical"===this.split?e.currentTarget.offsetWidth:e.currentTarget.offsetHeight,o=Math.floor((n-t)/i*1e4)/100;o>this.margin&&o<100-this.margin&&(this.percent=o),this.$emit("resize"),this.hasMoved=!0}}}}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"Pane",data:function(){return{classes:["Pane",this.$parent.split,"className"].join(" "),percent:50}}}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{split:{validator:function(e){return["vertical","horizontal"].indexOf(e)>=0},required:!0},onMouseDown:{type:Function,required:!0}},data:function(){return{classes:["Resizer",this.split,"className"].join(" ")}}}},function(e,t,r){t=e.exports=r(0)(),t.push([e.i,".Resizer[data-v-212fa2a4]{box-sizing:border-box;background:#000;position:absolute;opacity:.2;z-index:1}.Resizer.horizontal[data-v-212fa2a4]{height:11px;margin:-5px 0;border-top:5px solid hsla(0,0%,100%,0);border-bottom:5px solid hsla(0,0%,100%,0);cursor:row-resize;width:100%}.Resizer.horizontal[data-v-212fa2a4]:hover{border-top:5px solid rgba(0,0,0,.5);border-bottom:5px solid rgba(0,0,0,.5)}.Resizer.vertical[data-v-212fa2a4]{width:11px;height:100%;border-left:5px solid hsla(0,0%,100%,0);border-right:5px solid hsla(0,0%,100%,0);cursor:col-resize}.Resizer.vertical[data-v-212fa2a4]:hover{border-left:5px solid rgba(0,0,0,.5);border-right:5px solid rgba(0,0,0,.5)}",""])},function(e,t,r){t=e.exports=r(0)(),t.push([e.i,'.clearfix[data-v-566a42b8]:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.vue-splitter-container[data-v-566a42b8]{height:100%;position:relative}',""])},function(e,t,r){t=e.exports=r(0)(),t.push([e.i,".splitter-pane.vertical.splitter-paneL[data-v-815c801c]{position:absolute;left:0;height:100%}.splitter-pane.vertical.splitter-paneR[data-v-815c801c]{position:absolute;right:0;height:100%}.splitter-pane.horizontal.splitter-paneL[data-v-815c801c]{position:absolute;top:0;width:100%}.splitter-pane.horizontal.splitter-paneR[data-v-815c801c]{position:absolute;bottom:0;width:100%}",""])},function(e,t,r){r(17);var n=r(1)(r(5),r(14),"data-v-815c801c",null);e.exports=n.exports},function(e,t,r){r(15);var n=r(1)(r(6),r(12),"data-v-212fa2a4",null);e.exports=n.exports},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{class:e.classes,on:{mousedown:e.onMouseDown}})},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"vue-splitter-container clearfix",style:{cursor:e.cursor,userSelect:e.userSelect},on:{mouseup:e.onMouseUp,mousemove:e.onMouseMove}},[r("pane",{staticClass:"splitter-pane splitter-paneL",style:(n={},n[e.type]=e.percent+"%",n),attrs:{split:e.split}},[e._t("paneL")],2),e._v(" "),r("resizer",{style:(i={},i[e.resizeType]=e.percent+"%",i),attrs:{split:e.split,onMouseDown:e.onMouseDown},on:{click:e.onClick}}),e._v(" "),r("pane",{staticClass:"splitter-pane splitter-paneR",style:(o={},o[e.type]=100-e.percent+"%",o),attrs:{split:e.split}},[e._t("paneR")],2)],1);var n,i,o},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{class:e.classes},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,r){var n=r(7);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);r(2)("93b24118",n,!0)},function(e,t,r){var n=r(8);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);r(2)("084fcb29",n,!0)},function(e,t,r){var n=r(9);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);r(2)("2e723840",n,!0)},function(e,t){e.exports=function(e,t){for(var r=[],n={},i=0;i", + "main": "", + "scripts": { + "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --content-base='./demo/'", + "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" + }, + "license": "MIT", + "homepage": "", + "devDependencies": { + "babel-core": "^6.0.0", + "babel-loader": "^6.0.0", + "babel-plugin-transform-runtime": "^6.15.0", + "babel-preset-es2015": "^6.14.0", + "babel-preset-stage-2": "^6.13.0", + "babel-runtime": "^6.11.6", + "cross-env": "^3.0.0", + "css-loader": "^0.25.0", + "file-loader": "^0.9.0", + "vue-loader": "^11.1.4", + "vue-template-compiler": "^2.2.1", + "webpack": "^2.2.0", + "webpack-dev-server": "^2.2.0", + "babel-eslint": "7.1.1", + "eslint": "3.14.1", + "eslint-friendly-formatter": "2.0.7", + "eslint-loader": "1.6.1", + "eslint-plugin-html": "2.0.0", + "eslint-config-airbnb-base": "11.0.1", + "eslint-import-resolver-webpack": "0.8.1", + "eslint-plugin-import": "2.2.0" + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..985259b --- /dev/null +++ b/src/index.js @@ -0,0 +1,5 @@ +import Splitpane from './split-pane/index.vue'; +export default Splitpane; +if (typeof window !== 'undefined' && window.Vue) { + window.Vue.component('split-pane', Splitpane); +} diff --git a/src/split-pane/index.vue b/src/split-pane/index.vue new file mode 100644 index 0000000..25b1e30 --- /dev/null +++ b/src/split-pane/index.vue @@ -0,0 +1,115 @@ + + + + + diff --git a/src/split-pane/pane.vue b/src/split-pane/pane.vue new file mode 100644 index 0000000..a3c6721 --- /dev/null +++ b/src/split-pane/pane.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/src/split-pane/resizer.vue b/src/split-pane/resizer.vue new file mode 100644 index 0000000..5497ac7 --- /dev/null +++ b/src/split-pane/resizer.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..f1e16e1 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,87 @@ +const path = require('path') +const webpack = require('webpack') +function resolve(dir) { + return path.join(__dirname, '..', dir) +} +module.exports = { + entry: './src/index.js', + output: { + path: path.resolve(__dirname, './dist'), + publicPath: '/dist/', + filename: 'vue-split-pane.min.js', + library: 'SplitPane', + libraryTarget: 'umd', + umdNamedDefine: true + }, + module: { + rules: [ + { + test: /\.(js|vue)$/, + loader: 'eslint-loader', + enforce: 'pre', + include: [resolve('src'), resolve('test')], + options: { + formatter: require('eslint-friendly-formatter') + } + }, + { + test: /\.vue$/, + loader: 'vue-loader' + }, + { + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/ + }, + { + test: /\.(png|jpg|gif|svg)$/, + loader: 'file-loader', + options: { + name: '[name].[ext]?[hash]' + } + } + ] + }, + resolve: { + alias: { + vue$: 'vue/dist/vue.esm.js' + } + }, + externals: { + vue: { + root: 'Vue', + commonjs: 'vue', + commonjs2: 'vue', + amd: 'vue' + } + }, + devServer: { + historyApiFallback: true, + noInfo: true + }, + performance: { + hints: false + }, + devtool: '#source-map' +} + +if (process.env.NODE_ENV === 'production') { + module.exports.devtool = '#source-map' + // http://vue-loader.vuejs.org/en/workflow/production.html + module.exports.plugins = (module.exports.plugins || []).concat([ + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: '"production"' + } + }), + new webpack.optimize.UglifyJsPlugin({ + sourceMap: false, + compress: { + warnings: false + } + }), + new webpack.LoaderOptionsPlugin({ + minimize: true + }) + ]) +}